@metadev/lux 0.25.0 → 0.27.0

package/{fesm2020 → fesm2022}/metadev-lux.mjs

@@ -1,18 +1,17 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, forwardRef, Component, ViewChild, Output, Input, Inject, HostBinding, HostListener, Injectable, TemplateRef, Directive, InjectionToken, PLATFORM_ID, NgModule } from '@angular/core';
-import * as i3 from '@angular/forms';
+import { EventEmitter, forwardRef, Component, ViewChild, Output, Input, HostBinding, Injectable, Inject, HostListener, TemplateRef, Directive, 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 { 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 from 'angular-resize-event';
-import { AngularResizeEventModule } from 'angular-resize-event';
 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';
 
+/* eslint-disable no-useless-escape */
 // undefined and null functions
 const exists = (value) => value !== null && value !== undefined;
 const hasValue = (value) => exists(value) && (typeof value === 'string' ? !isEmptyString(value) : true);
@@ -141,33 +140,33 @@ const languageDetector = () => {
 
 const LOST_FOCUS_TIME_WINDOW_MS = 200; // ms
 class AutocompleteComponent {
-    constructor(cd) {
-        this.cd = cd;
-        this.lostFocusHandled = true;
-        this.t0 = 0;
-        this.showSpinner = false;
-        this.touched = false;
-        this.completionList = [];
-        this.showCompletion = false;
-        this.valueChange = new EventEmitter();
-        this.dataSourceChange = new EventEmitter();
-        this.disabled = null;
-        this.readonly = null;
-        this.label = '';
-        /** If canAddNewValues, user can type items not present in the data-source. */
-        this.canAddNewValues = false;
-        /** After cleaning the selection should the completion list remain open or closed:
-         *  false: (default) close on filters, to clean a filter and select all.
-         *  true: keep open (when the action most likely is to pick another one).
-         */
-        this.keepOpenAfterDelete = false;
-        this.required = false;
-        this.resolveLabelsFunction = undefined;
-        this.populateFunction = undefined;
-        // ControlValueAccessor Interface
-        this.onChange = (value) => { };
-        this.onTouched = () => { };
-    }
+    cd;
+    static idCounter = 0;
+    i0;
+    completeDiv;
+    _dataSource;
+    _placeholder;
+    _value;
+    lostFocusHandled = true;
+    t0 = 0;
+    showSpinner = false;
+    touched = false;
+    completionList = [];
+    showCompletion = false;
+    focusItem;
+    valueChange = new EventEmitter();
+    dataSourceChange = new EventEmitter();
+    inputId;
+    disabled = null;
+    readonly = null;
+    label = '';
+    /** If canAddNewValues, user can type items not present in the data-source. */
+    canAddNewValues = false;
+    /** After cleaning the selection should the completion list remain open or closed:
+     *  false: (default) close on filters, to clean a filter and select all.
+     *  true: keep open (when the action most likely is to pick another one).
+     */
+    keepOpenAfterDelete = false;
     get value() {
         return this._value;
     }
@@ -187,12 +186,22 @@ class AutocompleteComponent {
         this._dataSource = v;
         this.dataSourceChange.emit(v);
     }
+    required = false;
     set placeholder(v) {
         this._placeholder = v;
     }
     get placeholder() {
         return this._placeholder ? this._placeholder : '';
     }
+    resolveLabelsFunction = undefined;
+    populateFunction = undefined;
+    instance;
+    constructor(cd) {
+        this.cd = cd;
+    }
+    // ControlValueAccessor Interface
+    onChange = (value) => { };
+    onTouched = () => { };
     writeValue(value) {
         this.value = value;
     }
@@ -504,22 +513,21 @@ class AutocompleteComponent {
             return of([]);
         }
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: AutocompleteComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: AutocompleteComponent, 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: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                multi: true,
+                useExisting: forwardRef(() => AutocompleteComponent)
+            },
+            {
+                provide: NG_VALIDATORS,
+                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"] }] });
 }
-AutocompleteComponent.idCounter = 0;
-AutocompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: AutocompleteComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: AutocompleteComponent, 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: [
-        {
-            provide: NG_VALUE_ACCESSOR,
-            multi: true,
-            useExisting: forwardRef(() => AutocompleteComponent)
-        },
-        {
-            provide: NG_VALIDATORS,
-            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:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057);margin:0rem;margin:var(--lux-input-margin, 0rem);padding:0rem .5rem;padding:var(--lux-input-padding, 0rem .5rem)}.alert{padding:.2rem 2rem;background:#fe2e2e;background:var(--lux-alert-background, #fe2e2e);color:#fff;color:var(--lux-alert-color, white);font-family:Consolas,monospace;width:45%;margin-right:1rem;display:inline-block}.symbol{display:inline-block;align-items:baseline;padding:0rem .5rem;margin-bottom:0;font-weight:400;color:default;color:var(--lux-symbol-color, default);text-align:center;white-space:nowrap;background:default;background:var(--lux-symbol-background, default);font-size:1rem;font-size:var(--lux-symbol-font-size, 1rem)}.bordered,.symbol{border:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:.25rem;border-radius:var(--lux-border-radius, .25rem)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none;display:flex;align-items:center}.monospace{font-family:monospace}.default-font{color:#000;color:var(--lux-font-color, black)}.lux-autocomplete .lux-autocomplete-box{display:grid;grid-template-columns:1fr -webkit-max-content;grid-template-columns:1fr max-content}.lux-autocomplete input{padding:.1rem 1.5rem .1rem .5rem;padding:var(--lux-autocomplete-input-padding, .1rem 1.5rem .1rem .5rem);text-overflow:ellipsis;grid-row:1;grid-column-start:1;grid-column-end:3}.lux-autocomplete .icon-suggestions{grid-row:1;grid-column:2;width:1.5rem;border:none;background-color:transparent;background:url(/assets/img/suggestions.svg) no-repeat center;background-size:.5rem .5rem;z-index:1;position:relative;left:-1rem}.lux-autocomplete .icon-clear{grid-row:1;grid-column:2;width:1.5rem;width:var(--lux-autocomplete-icon-width, 1.5rem);border:none;background-color:transparent;background:url(/assets/img/filter-clear.png) no-repeat center;background:var(--lux-autocomplete-icon-clear, url(/assets/img/filter-clear.png) no-repeat center);background-size:.5rem .5rem;background-size:var(--lux-autocomplete-icon-bg-size, .5rem .5rem);z-index:1}.lux-autocomplete .icon-dropdown{grid-row:1;grid-column:2;width:1.5rem;width:var(--lux-autocomplete-icon-width, 1.5rem);height:1.3rem;height:var(--lux-autocomplete-icon-height, 1.3rem);border:none;background-color:transparent;background:url(/assets/img/drop-down-arrow.svg) no-repeat center;background:var(--lux-autocomplete-icon-dropdown, url(/assets/img/drop-down-arrow.svg) no-repeat center);background-size:.5rem .5rem;background-size:var(--lux-autocomplete-icon-bg-size, .5rem .5rem);z-index:1}.lux-autocomplete .icon-spinner{grid-row:1;grid-column:2;width:1.5rem;border:none;background-color:transparent;background:url(/assets/img/spinner.svg) no-repeat center;background-size:1.2rem 1.2rem;z-index:1}.lux-completion-list{visibility:collapse;position:absolute;border:1px solid #ccc;margin: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.ResizedDirective, selector: "[resized]", outputs: ["resized"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: AutocompleteComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: AutocompleteComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lux-autocomplete', providers: [
                         {
@@ -532,7 +540,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", 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:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057);margin:0rem;margin:var(--lux-input-margin, 0rem);padding:0rem .5rem;padding:var(--lux-input-padding, 0rem .5rem)}.alert{padding:.2rem 2rem;background:#fe2e2e;background:var(--lux-alert-background, #fe2e2e);color:#fff;color:var(--lux-alert-color, white);font-family:Consolas,monospace;width:45%;margin-right:1rem;display:inline-block}.symbol{display:inline-block;align-items:baseline;padding:0rem .5rem;margin-bottom:0;font-weight:400;color:default;color:var(--lux-symbol-color, default);text-align:center;white-space:nowrap;background:default;background:var(--lux-symbol-background, default);font-size:1rem;font-size:var(--lux-symbol-font-size, 1rem)}.bordered,.symbol{border:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:.25rem;border-radius:var(--lux-border-radius, .25rem)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none;display:flex;align-items:center}.monospace{font-family:monospace}.default-font{color:#000;color:var(--lux-font-color, black)}.lux-autocomplete .lux-autocomplete-box{display:grid;grid-template-columns:1fr -webkit-max-content;grid-template-columns:1fr max-content}.lux-autocomplete input{padding:.1rem 1.5rem .1rem .5rem;padding:var(--lux-autocomplete-input-padding, .1rem 1.5rem .1rem .5rem);text-overflow:ellipsis;grid-row:1;grid-column-start:1;grid-column-end:3}.lux-autocomplete .icon-suggestions{grid-row:1;grid-column:2;width:1.5rem;border:none;background-color:transparent;background:url(/assets/img/suggestions.svg) no-repeat center;background-size:.5rem .5rem;z-index:1;position:relative;left:-1rem}.lux-autocomplete .icon-clear{grid-row:1;grid-column:2;width:1.5rem;width:var(--lux-autocomplete-icon-width, 1.5rem);border:none;background-color:transparent;background:url(/assets/img/filter-clear.png) no-repeat center;background:var(--lux-autocomplete-icon-clear, url(/assets/img/filter-clear.png) no-repeat center);background-size:.5rem .5rem;background-size:var(--lux-autocomplete-icon-bg-size, .5rem .5rem);z-index:1}.lux-autocomplete .icon-dropdown{grid-row:1;grid-column:2;width:1.5rem;width:var(--lux-autocomplete-icon-width, 1.5rem);height:1.3rem;height:var(--lux-autocomplete-icon-height, 1.3rem);border:none;background-color:transparent;background:url(/assets/img/drop-down-arrow.svg) no-repeat center;background:var(--lux-autocomplete-icon-dropdown, url(/assets/img/drop-down-arrow.svg) no-repeat center);background-size:.5rem .5rem;background-size:var(--lux-autocomplete-icon-bg-size, .5rem .5rem);z-index:1}.lux-autocomplete .icon-spinner{grid-row:1;grid-column:2;width:1.5rem;border:none;background-color:transparent;background:url(/assets/img/spinner.svg) no-repeat center;background-size:1.2rem 1.2rem;z-index:1}.lux-completion-list{visibility:collapse;position:absolute;border:1px solid #ccc;margin: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"] }]
+                    ], 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: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { i0: [{
                 type: ViewChild,
                 args: ['i0', { static: true }]
@@ -611,36 +619,23 @@ const selectElement = (completionList, label) => {
 };
 
 class AutocompleteListComponent {
-    constructor() {
-        this.literals = {
-            en: {
-                placeholder: 'new item',
-                deleteLabelTemplate: 'Delete <<label>>',
-                addMessage: 'Add'
-            },
-            es: {
-                placeholder: 'nuevo elemento',
-                deleteLabelTemplate: 'Eliminar <<label>>',
-                addMessage: 'Añadir'
-            }
-        };
-        this.internalDataSource = [];
-        this.autoPopulate = false;
-        this._value = [];
-        this.labels = [];
-        this.canAdd = false;
-        this.touched = false;
-        this._lang = languageDetector();
-        this.dataSource = [];
-        this.disabled = false;
-        this.required = false;
-        this.resolveLabelsFunction = undefined;
-        this.populateFunction = undefined;
-        this.valueChange = new EventEmitter();
-        // ControlValueAccessor Interface
-        this.onChange = (value) => { };
-        this.onTouched = () => { };
-    }
+    static idCounter = 0;
+    auto;
+    literals = {
+        en: {
+            placeholder: 'new item',
+            deleteLabelTemplate: 'Delete <<label>>',
+            addMessage: 'Add'
+        },
+        es: {
+            placeholder: 'nuevo elemento',
+            deleteLabelTemplate: 'Eliminar <<label>>',
+            addMessage: 'Añadir'
+        }
+    };
+    internalDataSource = [];
+    autoPopulate = false;
+    _value = [];
     set value(val) {
         if (val === this._value) {
             return;
@@ -657,6 +652,11 @@ class AutocompleteListComponent {
     get value() {
         return this._value;
     }
+    labels = [];
+    newEntry;
+    canAdd = false;
+    touched = false;
+    _lang = languageDetector();
     get lang() {
         return this._lang;
     }
@@ -671,6 +671,20 @@ class AutocompleteListComponent {
             this._lang = 'en';
         }
     }
+    inputId;
+    dataSource = [];
+    placeholder;
+    disabled = false;
+    deleteLabelTemplate;
+    addMessage;
+    required = false;
+    resolveLabelsFunction = undefined;
+    populateFunction = undefined;
+    instance;
+    valueChange = new EventEmitter();
+    // ControlValueAccessor Interface
+    onChange = (value) => { };
+    onTouched = () => { };
     writeValue(value) {
         this.value = value;
     }
@@ -796,22 +810,21 @@ class AutocompleteListComponent {
     getDeleteMessage(label) {
         return (this.deleteLabelTemplate ?? this.literals[this.lang].deleteLabelTemplate).replace('<<label>>', label);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: AutocompleteListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: AutocompleteListComponent, 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,
+                useExisting: forwardRef(() => AutocompleteListComponent)
+            },
+            {
+                provide: NG_VALIDATORS,
+                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"] }] });
 }
-AutocompleteListComponent.idCounter = 0;
-AutocompleteListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: AutocompleteListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AutocompleteListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: AutocompleteListComponent, 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,
-            useExisting: forwardRef(() => AutocompleteListComponent)
-        },
-        {
-            provide: NG_VALIDATORS,
-            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      attr.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:-webkit-max-content -webkit-max-content;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:url(/assets/img/create.png) no-repeat .2rem .2rem;background:var(--lux-autocomplete-list-add-icon, url(/assets/img/create.png) no-repeat .2rem .2rem);background-size:1.1rem;background-size:var(--lux-autocomplete-list-add-icon-size, 1.1rem);height:1.4rem;height:var(--lux-autocomplete-list-add-icon-height, 1.4rem);width:1.4rem;width:var(--lux-autocomplete-list-add-icon-width, 1.4rem)}.remove-item{margin-left:.5rem;border:none;background:url(/assets/img/delete.svg) no-repeat .2rem .1rem;background:var(--lux-autocomplete-list-remove-icon, url(/assets/img/delete.svg) no-repeat .2rem .1rem);height:1.2rem;height:var(--lux-autocomplete-list-remove-icon-height, 1.2rem);width:1.3rem;width:var(--lux-autocomplete-list-remove-icon-width, 1.3rem);position:relative;top:.2rem;top:var(--lux-autocomplete-list-remove-icon-top, .2rem);background-size:1rem 1rem;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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: AutocompleteListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: AutocompleteListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lux-autocomplete-list', providers: [
                         {
@@ -824,7 +837,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", 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      attr.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:-webkit-max-content -webkit-max-content;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:url(/assets/img/create.png) no-repeat .2rem .2rem;background:var(--lux-autocomplete-list-add-icon, url(/assets/img/create.png) no-repeat .2rem .2rem);background-size:1.1rem;background-size:var(--lux-autocomplete-list-add-icon-size, 1.1rem);height:1.4rem;height:var(--lux-autocomplete-list-add-icon-height, 1.4rem);width:1.4rem;width:var(--lux-autocomplete-list-add-icon-width, 1.4rem)}.remove-item{margin-left:.5rem;border:none;background:url(/assets/img/delete.svg) no-repeat .2rem .1rem;background:var(--lux-autocomplete-list-remove-icon, url(/assets/img/delete.svg) no-repeat .2rem .1rem);height:1.2rem;height:var(--lux-autocomplete-list-remove-icon-height, 1.2rem);width:1.3rem;width:var(--lux-autocomplete-list-remove-icon-width, 1.3rem);position:relative;top:.2rem;top:var(--lux-autocomplete-list-remove-icon-top, .2rem);background-size:1rem 1rem;background-size:var(--lux-autocomplete-list-remove-icon-size, 1rem 1rem)}\n"] }]
+                    ], 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"] }]
         }], propDecorators: { auto: [{
                 type: ViewChild,
                 args: ['auto']
@@ -857,11 +870,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
             }] } });
 
 class LuxBreadcrumbComponent {
+    route;
+    activedRoute;
+    breadcrumbs;
+    subs = [];
+    imagePath = '../assets/img/arrow-forward.svg';
     constructor(route, activedRoute) {
         this.route = route;
         this.activedRoute = activedRoute;
-        this.subs = [];
-        this.imagePath = '../assets/img/arrow-forward.svg';
     }
     ngOnInit() {
         this.subs.push(this.route.events
@@ -917,37 +933,19 @@ class LuxBreadcrumbComponent {
         }
         return activedRouteSnapshot.params.id || routeConfig.path;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", 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: "16.0.2", type: LuxBreadcrumbComponent, 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,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 512 512%22%3E    %3Cpath d%3D%22M294.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%22%2F%3E%3C%2Fsvg%3E\");background-repeat:no-repeat;display:inline-block}\n"], dependencies: [{ kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "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"] }] });
 }
-LuxBreadcrumbComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: LuxBreadcrumbComponent, deps: [{ token: i1$2.Router }, { token: i1$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
-LuxBreadcrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: LuxBreadcrumbComponent, 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,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 512 512%22%3E    %3Cpath d%3D%22M294.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%22%2F%3E%3C%2Fsvg%3E\");background-repeat:no-repeat;display:inline-block}\n"], dependencies: [{ kind: "directive", type: i1$2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: LuxBreadcrumbComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: LuxBreadcrumbComponent, decorators: [{
             type: Component,
             args: [{ 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,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 512 512%22%3E    %3Cpath d%3D%22M294.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%22%2F%3E%3C%2Fsvg%3E\");background-repeat:no-repeat;display:inline-block}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$2.Router }, { type: i1$2.ActivatedRoute }]; } });
 
 const KEY_SPACE = ' ';
 class CheckboxComponent {
-    constructor() {
-        this._lang = languageDetector();
-        this.label = null;
-        this.name = null;
-        this._disabled = false;
-        this.literals = {
-            en: {
-                yesLabel: 'Yes',
-                noLabel: 'No'
-            },
-            es: {
-                yesLabel: 'Sí',
-                noLabel: 'No'
-            }
-        };
-        this.touched = false;
-        this.valueChange = new EventEmitter();
-        // ControlValueAccessor Interface
-        this.onChange = (value) => { };
-        this.onTouched = () => { };
-    }
+    static idCounter = 0;
+    ck;
+    _lang = languageDetector();
     set lang(l) {
         if (l === this._lang) {
             return;
@@ -962,6 +960,7 @@ class CheckboxComponent {
     get lang() {
         return this._lang;
     }
+    internalValue;
     get value() {
         return this.internalValue;
     }
@@ -980,6 +979,9 @@ class CheckboxComponent {
     get tabindexValue() {
         return this.disabled ? null : '0';
     }
+    label = null;
+    name = null;
+    _disabled = false;
     get disabled() {
         return this._disabled;
     }
@@ -990,6 +992,23 @@ class CheckboxComponent {
         this._disabled = v;
         this.syncModel();
     }
+    inputId;
+    literals = {
+        en: {
+            yesLabel: 'Yes',
+            noLabel: 'No'
+        },
+        es: {
+            yesLabel: 'Sí',
+            noLabel: 'No'
+        }
+    };
+    touched = false;
+    valueChange = new EventEmitter();
+    constructor() { }
+    // ControlValueAccessor Interface
+    onChange = (value) => { };
+    onTouched = () => { };
     writeValue(value) {
         this.value = !!value;
     }
@@ -1035,17 +1054,16 @@ class CheckboxComponent {
             this.ck.nativeElement.checked = this.internalValue;
         }
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: CheckboxComponent, 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"] }] });
 }
-CheckboxComponent.idCounter = 0;
-CheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: CheckboxComponent, 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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: CheckboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lux-checkbox', providers: [
                         {
@@ -1074,39 +1092,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
             }] } });
 
 class DatetimeComponent {
-    constructor() {
-        this.touched = false;
-        this.dirty = false;
-        this.lastErrors = null;
-        this.dateValue = undefined;
-        this.timeValue = undefined;
-        this.userErrors = {
-            en: {
-                required: 'Required field.',
-                min: 'Minimum value is $min.',
-                max: 'Maximum value is $max.'
-            },
-            es: {
-                required: 'El campo es obligatorio.',
-                min: 'El valor mínimo es $min.',
-                max: 'El valor máximo es $max.'
-            }
-        };
-        this.min = '1900-01-01T00:00:00Z';
-        this.max = '2100-01-01T00:00:00Z';
-        this.includeSeconds = true;
-        this.localTime = true;
-        this.lang = languageDetector();
-        this.inlineErrors = false;
-        this.readonly = null;
-        this.valueChange = new EventEmitter();
-        this.keyPress = new EventEmitter();
-        this.onChange = (_value) => { };
-        this.onTouched = () => { };
-    }
+    static idCounter = 0;
+    dateInput;
+    timeInput;
+    touched = false;
+    dirty = false;
+    lastErrors = null;
+    _disabled;
+    _required;
+    _value;
+    dateValue = undefined;
+    timeValue = undefined;
+    userErrors = {
+        en: {
+            required: 'Required field.',
+            min: 'Minimum value is $min.',
+            max: 'Maximum value is $max.'
+        },
+        es: {
+            required: 'El campo es obligatorio.',
+            min: 'El valor mínimo es $min.',
+            max: 'El valor máximo es $max.'
+        }
+    };
+    min = '1900-01-01T00:00:00Z';
+    max = '2100-01-01T00:00:00Z';
+    includeSeconds = true;
+    localTime = true;
     get className() {
         return this.checkClassName();
     }
+    lang = languageDetector();
+    inlineErrors = false;
+    inputId;
+    ariaLabel;
+    readonly = null;
     set disabled(v) {
         v = typeof v === 'string' && v !== 'false' ? true : v;
         this._disabled = v;
@@ -1148,6 +1168,11 @@ class DatetimeComponent {
     get value() {
         return this._value;
     }
+    valueChange = new EventEmitter();
+    keyPress = new EventEmitter();
+    onChange = (_value) => { };
+    onTouched = () => { };
+    constructor() { }
     // ControlValueAccessor Interface implementation
     writeValue(value) {
         this.value = value;
@@ -1306,22 +1331,21 @@ 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: "16.0.2", ngImport: i0, type: DatetimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: DatetimeComponent, 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,
+                useExisting: forwardRef(() => DatetimeComponent)
+            },
+            {
+                provide: NG_VALIDATORS,
+                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"] }] });
 }
-DatetimeComponent.idCounter = 0;
-DatetimeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: DatetimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DatetimeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: DatetimeComponent, 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,
-            useExisting: forwardRef(() => DatetimeComponent)
-        },
-        {
-            provide: NG_VALIDATORS,
-            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:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057);margin:0rem;margin:var(--lux-input-margin, 0rem);padding:0rem .5rem;padding:var(--lux-input-padding, 0rem .5rem)}.alert{padding:.2rem 2rem;background:#fe2e2e;background:var(--lux-alert-background, #fe2e2e);color:#fff;color:var(--lux-alert-color, white);font-family:Consolas,monospace;width:45%;margin-right:1rem;display:inline-block}.symbol{display:inline-block;align-items:baseline;padding:0rem .5rem;margin-bottom:0;font-weight:400;color:default;color:var(--lux-symbol-color, default);text-align:center;white-space:nowrap;background:default;background:var(--lux-symbol-background, default);font-size:1rem;font-size:var(--lux-symbol-font-size, 1rem)}.bordered,.symbol{border:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:.25rem;border-radius:var(--lux-border-radius, .25rem)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none;display:flex;align-items:center}.monospace{font-family:monospace}.default-font{color:#000;color:var(--lux-font-color, black)}:host{display:flex;align-items:stretch}.readonly{border:none}.readonly:focus{border:none;outline:none}.disabled{background-color:#f1f1f1;background-color:var(--lux-disabled-color, #f1f1f1);border-color:#6d6d6d;border-color:var(--lux-disabled-border-color, #6d6d6d)}.icon-clear{grid-row:1;grid-column:2;width:1.5rem;width:var(--lux-autocomplete-icon-width, 1.5rem);background:url(/assets/img/filter-clear.png) no-repeat center;background:var(--lux-autocomplete-icon-clear, url(/assets/img/filter-clear.png) no-repeat center);background-size:.5rem .5rem;background-size:var(--lux-autocomplete-icon-bg-size, .5rem .5rem);z-index:1}\n"], dependencies: [{ kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: DatetimeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: DatetimeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lux-datetime', providers: [
                         {
@@ -1334,7 +1358,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", 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:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057);margin:0rem;margin:var(--lux-input-margin, 0rem);padding:0rem .5rem;padding:var(--lux-input-padding, 0rem .5rem)}.alert{padding:.2rem 2rem;background:#fe2e2e;background:var(--lux-alert-background, #fe2e2e);color:#fff;color:var(--lux-alert-color, white);font-family:Consolas,monospace;width:45%;margin-right:1rem;display:inline-block}.symbol{display:inline-block;align-items:baseline;padding:0rem .5rem;margin-bottom:0;font-weight:400;color:default;color:var(--lux-symbol-color, default);text-align:center;white-space:nowrap;background:default;background:var(--lux-symbol-background, default);font-size:1rem;font-size:var(--lux-symbol-font-size, 1rem)}.bordered,.symbol{border:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:.25rem;border-radius:var(--lux-border-radius, .25rem)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none;display:flex;align-items:center}.monospace{font-family:monospace}.default-font{color:#000;color:var(--lux-font-color, black)}:host{display:flex;align-items:stretch}.readonly{border:none}.readonly:focus{border:none;outline:none}.disabled{background-color:#f1f1f1;background-color:var(--lux-disabled-color, #f1f1f1);border-color:#6d6d6d;border-color:var(--lux-disabled-border-color, #6d6d6d)}.icon-clear{grid-row:1;grid-column:2;width:1.5rem;width:var(--lux-autocomplete-icon-width, 1.5rem);background:url(/assets/img/filter-clear.png) no-repeat center;background:var(--lux-autocomplete-icon-clear, url(/assets/img/filter-clear.png) no-repeat center);background-size:.5rem .5rem;background-size:var(--lux-autocomplete-icon-bg-size, .5rem .5rem);z-index:1}\n"] }]
+                    ], 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"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { dateInput: [{
                 type: ViewChild,
                 args: ['dateInput', { static: true }]
@@ -1374,23 +1398,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
 
 /** Filter component to query for objects. */
 class FilterComponent {
-    constructor() {
-        this.touched = false;
-        this._searchValue = '';
-        this.disabled = false;
-        /** Placeholder default text. */
-        this.placeholder = '';
-        /** Search on type: (default true) Auto-search when user types in. */
-        this.searchOnType = true;
-        this.debounceValue = 300; // 300 ms
-        /** Search value changed by user. */
-        this.searchValueChange = new EventEmitter();
-        this.subject = new Subject();
-        // ControlValueAccessor Interface
-        this.onChange = (value) => { };
-        this.onTouched = () => { };
-        this.recreateObservable();
-    }
+    static idCounter = 0;
+    touched = false;
+    _searchValue = '';
+    disabled = false;
+    /** id for the input. If left blank, it is autogenerated */
+    inputId;
+    /** Placeholder default text. */
+    placeholder = '';
     /** Search value introduced by the user. */
     get searchValue() {
         return this._searchValue;
@@ -1403,6 +1418,11 @@ class FilterComponent {
         this.onChange(v);
         this._searchValue = v;
     }
+    /** Search on type: (default true) Auto-search when user types in. */
+    searchOnType = true;
+    /** Custom aria label in case of not using a label */
+    ariaLabel;
+    debounceValue = 300; // 300 ms
     /** Debounce time in milliseconds. (defaults to 300 ms) */
     set debounce(val) {
         this.debounceValue = val;
@@ -1411,6 +1431,17 @@ class FilterComponent {
     get debounce() {
         return this.debounceValue;
     }
+    /** Search value changed by user. */
+    searchValueChange = new EventEmitter();
+    searchValue$;
+    subject = new Subject();
+    sub;
+    constructor() {
+        this.recreateObservable();
+    }
+    // ControlValueAccessor Interface
+    onChange = (value) => { };
+    onTouched = () => { };
     writeValue(value) {
         this.searchValue = (value || '').toString();
     }
@@ -1480,17 +1511,16 @@ class FilterComponent {
     addEvent() {
         this.subject.next(this.searchValue);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: FilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: FilterComponent, 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"] }] });
 }
-FilterComponent.idCounter = 0;
-FilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: FilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: FilterComponent, 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:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057);margin:0rem;margin:var(--lux-input-margin, 0rem);padding:0rem .5rem;padding:var(--lux-input-padding, 0rem .5rem)}.alert{padding:.2rem 2rem;background:#fe2e2e;background:var(--lux-alert-background, #fe2e2e);color:#fff;color:var(--lux-alert-color, white);font-family:Consolas,monospace;width:45%;margin-right:1rem;display:inline-block}.symbol{display:inline-block;align-items:baseline;padding:0rem .5rem;margin-bottom:0;font-weight:400;color:default;color:var(--lux-symbol-color, default);text-align:center;white-space:nowrap;background:default;background:var(--lux-symbol-background, default);font-size:1rem;font-size:var(--lux-symbol-font-size, 1rem)}.bordered,.symbol{border:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:.25rem;border-radius:var(--lux-border-radius, .25rem)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none;display:flex;align-items:center}.monospace{font-family:monospace}.default-font{color:#000;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:url(/assets/img/filter-search.png) no-repeat center;background:var(--lux-filter-icon-search, url(/assets/img/filter-search.png) no-repeat center);background-size:1rem;background-size:var(--lux-filter-icon-bg-size, 1rem);background-position:center;width:1rem;width:var(--lux-filter-icon-width, 1rem)}.filter .icon-clear{background:url(/assets/img/filter-clear.png) no-repeat center;background:var(--lux-filter-icon-clear, url(/assets/img/filter-clear.png) no-repeat center);background-size:1rem;background-size:var(--lux-filter-icon-bg-size, 1rem);background-position:center}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: FilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: FilterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lux-filter', providers: [
                         {
@@ -1498,7 +1528,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
                             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:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057);margin:0rem;margin:var(--lux-input-margin, 0rem);padding:0rem .5rem;padding:var(--lux-input-padding, 0rem .5rem)}.alert{padding:.2rem 2rem;background:#fe2e2e;background:var(--lux-alert-background, #fe2e2e);color:#fff;color:var(--lux-alert-color, white);font-family:Consolas,monospace;width:45%;margin-right:1rem;display:inline-block}.symbol{display:inline-block;align-items:baseline;padding:0rem .5rem;margin-bottom:0;font-weight:400;color:default;color:var(--lux-symbol-color, default);text-align:center;white-space:nowrap;background:default;background:var(--lux-symbol-background, default);font-size:1rem;font-size:var(--lux-symbol-font-size, 1rem)}.bordered,.symbol{border:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:.25rem;border-radius:var(--lux-border-radius, .25rem)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none;display:flex;align-items:center}.monospace{font-family:monospace}.default-font{color:#000;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:url(/assets/img/filter-search.png) no-repeat center;background:var(--lux-filter-icon-search, url(/assets/img/filter-search.png) no-repeat center);background-size:1rem;background-size:var(--lux-filter-icon-bg-size, 1rem);background-position:center;width:1rem;width:var(--lux-filter-icon-width, 1rem)}.filter .icon-clear{background:url(/assets/img/filter-clear.png) no-repeat center;background:var(--lux-filter-icon-clear, url(/assets/img/filter-clear.png) no-repeat center);background-size:1rem;background-size:var(--lux-filter-icon-bg-size, 1rem);background-position:center}\n"] }]
+                    ], 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"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { disabled: [{
                 type: Input
             }], inputId: [{
@@ -1518,11 +1548,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
                 type: Output
             }] } });
 
+class LuxModalBackdropComponent {
+    backdropClass;
+    class = 'modal-backdrop fade show';
+    style = 'z-index: 1050';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: LuxModalBackdropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: LuxModalBackdropComponent, 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: "16.0.2", ngImport: i0, type: LuxModalBackdropComponent, decorators: [{
+            type: Component,
+            args: [{
+                    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: "16.0.2", ngImport: i0, type: LuxModalConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: LuxModalConfig, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", 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;
+        }
+    }
+    /**
+     * 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;
@@ -1537,16 +1620,6 @@ class ModalRef {
         });
         this.result.then(null, () => { });
     }
-    /**
-     * 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;
-        }
-    }
     /**
      * Closes the modal with an optional `result` value.
      *
@@ -1627,6 +1700,9 @@ var Key;
 })(Key || (Key = {}));
 const isDefined = (value) => value !== undefined && value !== null;
 class ContentRef {
+    nodes;
+    viewRef;
+    componentRef;
     constructor(nodes, viewRef, componentRef) {
         this.nodes = nodes;
         this.viewRef = viewRef;
@@ -1665,11 +1741,7 @@ const focusTrap = (element, stopFocusTrap$, refocusOnClick = false) => {
     const lastFocusedElement$ = fromEvent(element, 'focusin').pipe(takeUntil(stopFocusTrap$), map((e) => e.target));
     // 'tab' / 'shift+tab' stream
     fromEvent(element, 'keydown')
-        .pipe(takeUntil(stopFocusTrap$), 
-    /* eslint-disable import/no-deprecated */
-    filter((e) => e.which === Key.Tab), 
-    /* eslint-enable import/no-deprecated */
-    withLatestFrom(lastFocusedElement$))
+        .pipe(takeUntil(stopFocusTrap$), filter((e) => e.which === Key.Tab), withLatestFrom(lastFocusedElement$))
         .subscribe(([tabEvent, focusedElement]) => {
         const [first, last] = getFocusableBoundaryElements(element);
         if ((focusedElement === first || focusedElement === element) &&
@@ -1697,19 +1769,21 @@ var ModalDismissReasons;
 })(ModalDismissReasons || (ModalDismissReasons = {}));
 
 class LuxModalWindowComponent {
-    constructor(_document, _elRef) {
-        this._document = _document;
-        this._elRef = _elRef;
-        this.backdrop = false;
-        this.keyboard = true;
-        this.dismissEvent = new EventEmitter();
-        this.role = 'dialog';
-        this.tabindex = '-1';
-        this.ariamodal = true;
-    }
+    _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;
     }
@@ -1726,6 +1800,10 @@ class LuxModalWindowComponent {
             this.dismiss(ModalDismissReasons.Esc);
         }
     }
+    constructor(_document, _elRef) {
+        this._document = _document;
+        this._elRef = _elRef;
+    }
     dismiss(reason) {
         this.dismissEvent.emit(reason);
     }
@@ -1752,14 +1830,14 @@ class LuxModalWindowComponent {
         elementToFocus.focus();
         this._elWithFocus = null;
     }
-}
-LuxModalWindowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: LuxModalWindowComponent, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-LuxModalWindowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: LuxModalWindowComponent, selector: "lux-modal-window", inputs: { ariaDescribedBy: "ariaDescribedBy", ariaLabelledBy: "ariaLabelledBy", backdrop: "backdrop", keyboard: "keyboard", windowClass: "windowClass" }, outputs: { dismissEvent: "dismissEvent" }, host: { listeners: { "click": "backdropClick($event.target)", "keyup.esc": "escKey($event)" }, properties: { "class": "this.class", "attr.role": "this.role", "tabindex": "this.tabindex", "attr.aria-modal": "this.ariamodal", "attr.aria-labelledby": "this.hostAriaLabelledBy", "attr.aria-describedby": "this.hostAriaDescribedBy" } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: LuxModalWindowComponent, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: LuxModalWindowComponent, 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: "14.0.2", ngImport: i0, type: LuxModalWindowComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: LuxModalWindowComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'lux-modal-window',
@@ -1810,63 +1888,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
                 args: ['keyup.esc', ['$event']]
             }] } });
 
-class LuxModalBackdropComponent {
-    constructor() {
-        this.class = 'modal-backdrop fade show';
-        this.style = 'z-index: 1050';
-    }
-}
-LuxModalBackdropComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: LuxModalBackdropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-LuxModalBackdropComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: LuxModalBackdropComponent, 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: "14.0.2", ngImport: i0, type: LuxModalBackdropComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'lux-modal-backdrop',
-                    template: ''
-                }]
-        }], propDecorators: { backdropClass: [{
-                type: Input
-            }], class: [{
-                type: HostBinding,
-                args: ['class']
-            }], style: [{
-                type: HostBinding,
-                args: ['style']
-            }] } });
-
-class LuxModalConfig {
-    constructor() {
-        this.backdrop = true;
-    }
-}
-LuxModalConfig.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: LuxModalConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-LuxModalConfig.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: LuxModalConfig, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: LuxModalConfig, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-
 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 = new Subject();
-        this._modalRefs = [];
-        this._windowCmpts = [];
-        this._ariaHiddenValues = new Map();
-        this._backdropAttributes = ['backdropClass'];
-        this._windowAttributes = [
-            'ariaLabelledBy',
-            'backdrop',
-            'centered',
-            'keyboard',
-            'scrollable',
-            'size',
-            'windowClass'
-        ];
         this._activeWindowCmptHasChanged.subscribe(() => {
             if (this._windowCmpts.length) {
                 const activeWindowCmpt = this._windowCmpts[this._windowCmpts.length - 1];
@@ -1944,11 +1991,9 @@ class ModalStack {
     createFromTemplateRef(content, activeModal) {
         const context = {
             $implicit: activeModal,
-            // eslint-disable-next-line prefer-arrow/prefer-arrow-functions
             close(result) {
                 activeModal.close(result);
             },
-            // eslint-disable-next-line prefer-arrow/prefer-arrow-functions
             dismiss(reason) {
                 activeModal.dismiss(reason);
             }
@@ -2004,10 +2049,10 @@ class ModalStack {
             this._setAriaHidden(parent);
         }
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", 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: "16.0.2", ngImport: i0, type: ModalStack, providedIn: 'root' });
 }
-ModalStack.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ModalStack, deps: [{ token: i0.ApplicationRef }, { token: DOCUMENT }, { token: i0.Injector }, { token: i0.RendererFactory2 }, { token: LuxModalConfig }], target: i0.ɵɵFactoryTarget.Injectable });
-ModalStack.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ModalStack, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ModalStack, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: ModalStack, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: function () { return [{ type: i0.ApplicationRef }, { type: undefined, decorators: [{
@@ -2019,6 +2064,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
  * A service that it allow open an close modal components
  */
 class ModalService {
+    modalStack;
+    moduleCFR;
     constructor(modalStack, moduleCFR) {
         this.modalStack = modalStack;
         this.moduleCFR = moduleCFR;
@@ -2029,21 +2076,24 @@ class ModalService {
     open(content, options = {}) {
         return this.modalStack.open(this.moduleCFR, content, options);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: ModalService, deps: [{ token: ModalStack }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: ModalService, providedIn: 'root' });
 }
-ModalService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ModalService, deps: [{ token: ModalStack }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Injectable });
-ModalService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ModalService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ModalService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: ModalService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: function () { return [{ 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.debouncePeriodMs = 300; // ms
-        this.cacheSize = 20;
-        this.lastQueriesWithResults = new Map();
-        this.lastQueriesLru = [];
         this.currentSearch$ = new Subject();
         const typed$ = this.currentSearch$
             .asObservable()
@@ -2123,10 +2173,10 @@ class GeolocationService {
             ? this.lastQueriesLru[this.lastQueriesLru.length - 1]
             : null;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: GeolocationService, deps: [{ token: i1$3.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: GeolocationService, providedIn: 'root' });
 }
-GeolocationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: GeolocationService, deps: [{ token: i1$3.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
-GeolocationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: GeolocationService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: GeolocationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: GeolocationService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: function () { return [{ type: i1$3.HttpClient }]; } });
@@ -2168,10 +2218,10 @@ class OpenLayerLoaderService {
         }
         return of(true);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: OpenLayerLoaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: OpenLayerLoaderService, providedIn: 'root' });
 }
-OpenLayerLoaderService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: OpenLayerLoaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-OpenLayerLoaderService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: OpenLayerLoaderService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: OpenLayerLoaderService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: OpenLayerLoaderService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -2210,23 +2260,13 @@ const loadCss = (url, callback) => {
     document.getElementsByTagName('head')[0].appendChild(link);
 };
 
+/* eslint-disable no-self-assign */
 class MapComponent {
-    constructor(olLoader) {
-        this.loaded$ = new BehaviorSubject(false);
-        this.valueChange = new EventEmitter();
-        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);
-        });
-    }
+    static idCounter = 0;
+    loaded$ = new BehaviorSubject(false);
+    _map;
+    mapId;
+    _zoom;
     set zoom(zoom) {
         if (!isNaN(zoom)) {
             this._zoom = zoom;
@@ -2238,6 +2278,7 @@ class MapComponent {
     get zoom() {
         return this._zoom;
     }
+    _center;
     set center(center) {
         if (center && center.coordinates && center.coordinates.length === 2) {
             this._center = center;
@@ -2249,6 +2290,7 @@ class MapComponent {
     get center() {
         return this._center;
     }
+    _readonly;
     set readonly(readonly) {
         if (!readonly) {
             if (this._map) {
@@ -2280,6 +2322,9 @@ class MapComponent {
     get readonly() {
         return this._readonly;
     }
+    _marker;
+    _markerInteraction;
+    _markerCoordinates;
     set markerCoordinates(markerCoordinates) {
         if (markerCoordinates && markerCoordinates.length === 2) {
             this._markerCoordinates = markerCoordinates;
@@ -2316,6 +2361,23 @@ class MapComponent {
             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++;
     }
@@ -2446,11 +2508,10 @@ class MapComponent {
             this._map.updateSize();
         }
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: MapComponent, deps: [{ token: OpenLayerLoaderService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: MapComponent, 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"] });
 }
-MapComponent.idCounter = 0;
-MapComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: MapComponent, deps: [{ token: OpenLayerLoaderService }], target: i0.ɵɵFactoryTarget.Component });
-MapComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: MapComponent, selector: "lux-map", inputs: { mapId: "mapId", zoom: "zoom", center: "center", readonly: "readonly", markerCoordinates: "markerCoordinates", markerPoint: "markerPoint" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div [id]=\"mapId\" class=\"map\" (resized)=\"onResize()\"></div>\n", styles: [".map{min-height:100px;height:100%;min-width:160px;width:100%}\n"], dependencies: [{ kind: "directive", type: i1.ResizedDirective, selector: "[resized]", outputs: ["resized"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: MapComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: MapComponent, decorators: [{
             type: Component,
             args: [{ 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: function () { return [{ type: OpenLayerLoaderService }]; }, propDecorators: { mapId: [{
@@ -2470,74 +2531,83 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
             }] } });
 
 class GeolocationComponent {
-    constructor(modalService, locationService) {
-        this.modalService = modalService;
-        this.locationService = locationService;
-        this.touched = false;
-        this.dirty = false;
-        this.lastErrors = null;
-        this.latitudeValue = undefined;
-        this.longitudeValue = undefined;
-        this.isValidNumber = isValidNumber;
-        this.i18n = {
-            en: {
-                lat: 'latitude',
-                lon: 'longitude',
-                selectLocation: 'Select location',
-                location: 'Location',
-                selectAction: 'Select',
-                cancelAction: 'Cancel',
-                closeAction: 'Close',
-                typeToSearch: 'type to search',
-                cardinalPoints: {
-                    north: 'N',
-                    south: 'S',
-                    east: 'E',
-                    west: 'W'
-                },
-                userErrors: {
-                    required: 'Required field.',
-                    minLatitude: 'Minimum latitude is $minLatitude.',
-                    maxLatitude: 'Maximum latitude is $maxLatitude.',
-                    minLongitude: 'Minimum longitude is $minLongitude.',
-                    maxLongitude: 'Maximum longitude is $maxLongitude.'
-                }
+    modalService;
+    locationService;
+    static idCounter = 0;
+    latitude;
+    longitude;
+    map;
+    touched = false;
+    dirty = false;
+    lastErrors = null;
+    _disabled;
+    _required;
+    _value;
+    latitudeValue = undefined;
+    longitudeValue = undefined;
+    isValidNumber = isValidNumber;
+    i18n = {
+        en: {
+            lat: 'latitude',
+            lon: 'longitude',
+            selectLocation: 'Select location',
+            location: 'Location',
+            selectAction: 'Select',
+            cancelAction: 'Cancel',
+            closeAction: 'Close',
+            typeToSearch: 'type to search',
+            cardinalPoints: {
+                north: 'N',
+                south: 'S',
+                east: 'E',
+                west: 'W'
             },
-            es: {
-                lat: 'latitud',
-                lon: 'longitud',
-                selectLocation: 'Seleccione ubicación',
-                location: 'Ubicación',
-                selectAction: 'Seleccionar',
-                cancelAction: 'Cancelar',
-                closeAction: 'Cerrar',
-                typeToSearch: 'escribe para buscar',
-                cardinalPoints: {
-                    north: 'N',
-                    south: 'S',
-                    east: 'E',
-                    west: 'O'
-                },
-                userErrors: {
-                    required: 'El campo es obligatorio.',
-                    minLatitude: 'La latitud mínima es $minLatitude.',
-                    maxLatitude: 'La latitud máxima es $maxLatitude.',
-                    minLongitude: 'La longitud mínima es $minLongitude.',
-                    maxLongitude: 'La longitud máxima es $maxLongitude.'
-                }
+            userErrors: {
+                required: 'Required field.',
+                minLatitude: 'Minimum latitude is $minLatitude.',
+                maxLatitude: 'Maximum latitude is $maxLatitude.',
+                minLongitude: 'Minimum longitude is $minLongitude.',
+                maxLongitude: 'Maximum longitude is $maxLongitude.'
             }
-        };
-        this.lang = languageDetector();
-        this.inlineErrors = false;
-        this.readonly = null;
-        this.valueChange = new EventEmitter();
-        this.keyPress = new EventEmitter();
-        this.onChange = (value) => { };
-        this.onTouched = () => { };
-    }
+        },
+        es: {
+            lat: 'latitud',
+            lon: 'longitud',
+            selectLocation: 'Seleccione ubicación',
+            location: 'Ubicación',
+            selectAction: 'Seleccionar',
+            cancelAction: 'Cancelar',
+            closeAction: 'Cerrar',
+            typeToSearch: 'escribe para buscar',
+            cardinalPoints: {
+                north: 'N',
+                south: 'S',
+                east: 'E',
+                west: 'O'
+            },
+            userErrors: {
+                required: 'El campo es obligatorio.',
+                minLatitude: 'La latitud mínima es $minLatitude.',
+                maxLatitude: 'La latitud máxima es $maxLatitude.',
+                minLongitude: 'La longitud mínima es $minLongitude.',
+                maxLongitude: 'La longitud máxima es $maxLongitude.'
+            }
+        }
+    };
+    minLatitude;
+    maxLatitude;
+    minLongitude;
+    maxLongitude;
+    step;
+    zoom;
     get className() {
         return this.checkClassName();
     }
+    lang = languageDetector();
+    inlineErrors = false;
+    inputId;
+    ariaLabel;
+    readonly = null;
     set disabled(v) {
         v = typeof v === 'string' && v !== 'false' ? true : v;
         this._disabled = v;
@@ -2582,6 +2652,14 @@ class GeolocationComponent {
     get value() {
         return this._value;
     }
+    valueChange = new EventEmitter();
+    keyPress = new EventEmitter();
+    onChange = (value) => { };
+    onTouched = () => { };
+    constructor(modalService, locationService) {
+        this.modalService = modalService;
+        this.locationService = locationService;
+    }
     // ControlValueAccessor Interface implementation
     writeValue(value) {
         this.value = value;
@@ -2790,22 +2868,21 @@ class GeolocationComponent {
         this.minLongitude = this.minLongitude || -180;
         this.maxLongitude = this.maxLongitude || +180;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: GeolocationComponent, deps: [{ token: ModalService }, { token: GeolocationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: GeolocationComponent, 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,
+                useExisting: forwardRef(() => GeolocationComponent)
+            },
+            {
+                provide: NG_VALIDATORS,
+                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"] }] });
 }
-GeolocationComponent.idCounter = 0;
-GeolocationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: GeolocationComponent, deps: [{ token: ModalService }, { token: GeolocationService }], target: i0.ɵɵFactoryTarget.Component });
-GeolocationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: GeolocationComponent, 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,
-            useExisting: forwardRef(() => GeolocationComponent)
-        },
-        {
-            provide: NG_VALIDATORS,
-            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:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057);margin:0rem;margin:var(--lux-input-margin, 0rem);padding:0rem .5rem;padding:var(--lux-input-padding, 0rem .5rem)}.alert{padding:.2rem 2rem;background:#fe2e2e;background:var(--lux-alert-background, #fe2e2e);color:#fff;color:var(--lux-alert-color, white);font-family:Consolas,monospace;width:45%;margin-right:1rem;display:inline-block}.symbol{display:inline-block;align-items:baseline;padding:0rem .5rem;margin-bottom:0;font-weight:400;color:default;color:var(--lux-symbol-color, default);text-align:center;white-space:nowrap;background:default;background:var(--lux-symbol-background, default);font-size:1rem;font-size:var(--lux-symbol-font-size, 1rem)}.bordered,.symbol{border:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:.25rem;border-radius:var(--lux-border-radius, .25rem)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none;display:flex;align-items:center}.monospace{font-family:monospace}.default-font{color:#000;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:#f1f1f1;background-color:var(--lux-disabled-color, #f1f1f1);border-color:#6d6d6d;border-color:var(--lux-disabled-border-color, #6d6d6d)}.icon,.icon-clear,.icon-globe{display:inline-block;background-size:1rem 1rem;background-position:center;background-repeat:no-repeat;min-width:1rem;min-height:1rem;width:1.5rem;width:var(--lux-autocomplete-icon-width, 1.5rem);z-index:1}.clickable{cursor:pointer}.icon-globe{background:url(/assets/img/globe.svg) no-repeat center;background:var(--lux-autocomplete-icon-globe, url(/assets/img/globe.svg) no-repeat center);background-size:1rem;height:100%}.icon-clear{width:1.5rem;width:var(--lux-autocomplete-icon-width, 1.5rem);background:url(/assets/img/filter-clear.png) no-repeat center;background:var(--lux-autocomplete-icon-clear, url(/assets/img/filter-clear.png) no-repeat center);background-size:.5rem .5rem;background-size:var(--lux-autocomplete-icon-bg-size, .5rem .5rem);z-index:1}.lux-modal-body{padding:0}.map-container{height:45vh;height:var(--lux-geolocation-map-height, 45vh);width:90vw;width:var(--lux-geolocation-map-width, 90vw);max-width:100%}\n"], dependencies: [{ kind: "directive", type: i3.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: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i3.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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: GeolocationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: GeolocationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lux-geolocation', providers: [
                         {
@@ -2818,7 +2895,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", 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:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057);margin:0rem;margin:var(--lux-input-margin, 0rem);padding:0rem .5rem;padding:var(--lux-input-padding, 0rem .5rem)}.alert{padding:.2rem 2rem;background:#fe2e2e;background:var(--lux-alert-background, #fe2e2e);color:#fff;color:var(--lux-alert-color, white);font-family:Consolas,monospace;width:45%;margin-right:1rem;display:inline-block}.symbol{display:inline-block;align-items:baseline;padding:0rem .5rem;margin-bottom:0;font-weight:400;color:default;color:var(--lux-symbol-color, default);text-align:center;white-space:nowrap;background:default;background:var(--lux-symbol-background, default);font-size:1rem;font-size:var(--lux-symbol-font-size, 1rem)}.bordered,.symbol{border:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:.25rem;border-radius:var(--lux-border-radius, .25rem)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none;display:flex;align-items:center}.monospace{font-family:monospace}.default-font{color:#000;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:#f1f1f1;background-color:var(--lux-disabled-color, #f1f1f1);border-color:#6d6d6d;border-color:var(--lux-disabled-border-color, #6d6d6d)}.icon,.icon-clear,.icon-globe{display:inline-block;background-size:1rem 1rem;background-position:center;background-repeat:no-repeat;min-width:1rem;min-height:1rem;width:1.5rem;width:var(--lux-autocomplete-icon-width, 1.5rem);z-index:1}.clickable{cursor:pointer}.icon-globe{background:url(/assets/img/globe.svg) no-repeat center;background:var(--lux-autocomplete-icon-globe, url(/assets/img/globe.svg) no-repeat center);background-size:1rem;height:100%}.icon-clear{width:1.5rem;width:var(--lux-autocomplete-icon-width, 1.5rem);background:url(/assets/img/filter-clear.png) no-repeat center;background:var(--lux-autocomplete-icon-clear, url(/assets/img/filter-clear.png) no-repeat center);background-size:.5rem .5rem;background-size:var(--lux-autocomplete-icon-bg-size, .5rem .5rem);z-index:1}.lux-modal-body{padding:0}.map-container{height:45vh;height:var(--lux-geolocation-map-height, 45vh);width:90vw;width:var(--lux-geolocation-map-width, 90vw);max-width:100%}\n"] }]
+                    ], 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: function () { return [{ type: ModalService }, { type: GeolocationService }]; }, propDecorators: { latitude: [{
                 type: ViewChild,
                 args: ['latitude', { static: true }]
@@ -3048,55 +3125,66 @@ class RegexpService {
         // TODO: RETURN AN EMPTY STRING
         return 'NO DEBERÍA SER POSIBLE';
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: RegexpService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: RegexpService, providedIn: 'root' });
 }
-RegexpService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: RegexpService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-RegexpService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: RegexpService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: RegexpService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: RegexpService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: function () { return []; } });
 
 class InputComponent {
-    constructor(regexpService) {
-        this.regexpService = regexpService;
-        this.touched = false;
-        this.dirty = false;
-        this.lastErrors = null;
-        this._value = '';
-        this._pattern = undefined;
-        this._regexp = undefined;
-        this.userErrors = {
-            en: {
-                required: 'Required field.',
-                min: 'Minimum value is $min.',
-                max: 'Maximum value is $max.',
-                email: 'Format should match example@example.com.',
-                url: 'Format should match https://example.com.',
-                color: 'Format should match #XXXXXX.'
-            },
-            es: {
-                required: 'El campo es obligatorio.',
-                min: 'El valor mínimo es $min.',
-                max: 'El valor máximo es $max.',
-                email: 'El campo debe tener un formato como ejemplo@ejemplo.com.',
-                url: 'El campo debe tener un formato como https://ejemplo.com.',
-                color: 'El campo debe tener un formato como #XXXXXX.'
-            }
-        };
-        this.lang = languageDetector();
-        this.inlineErrors = false;
-        this.readonly = null;
-        this.valueChange = new EventEmitter();
-        this.keyPress = new EventEmitter();
-        this.onChange = (value) => { };
-        this.onTouched = () => { };
-    }
+    regexpService;
+    static idCounter = 0;
+    input;
+    textarea;
+    colorpicker;
+    touched = false;
+    dirty = false;
+    lastErrors = null;
+    _disabled;
+    _value = '';
+    _type;
+    _placeholder;
+    _pattern = undefined;
+    _regexp = undefined;
+    _currency;
+    _required;
+    userErrors = {
+        en: {
+            required: 'Required field.',
+            min: 'Minimum value is $min.',
+            max: 'Maximum value is $max.',
+            email: 'Format should match example@example.com.',
+            url: 'Format should match https://example.com.',
+            color: 'Format should match #XXXXXX.'
+        },
+        es: {
+            required: 'El campo es obligatorio.',
+            min: 'El valor mínimo es $min.',
+            max: 'El valor máximo es $max.',
+            email: 'El campo debe tener un formato como ejemplo@ejemplo.com.',
+            url: 'El campo debe tener un formato como https://ejemplo.com.',
+            color: 'El campo debe tener un formato como #XXXXXX.'
+        }
+    };
+    domain;
+    rows;
+    cols;
+    step;
+    min;
+    max;
     get className() {
         return this.checkClassName();
     }
     get color() {
         return this.checkColor();
     }
+    lang = languageDetector();
+    inlineErrors = false;
+    inputId;
+    ariaLabel;
+    readonly = null;
     set disabled(v) {
         v = typeof v === 'string' ? true : v;
         this._disabled = v;
@@ -3172,6 +3260,13 @@ class InputComponent {
         }
         return this._value;
     }
+    valueChange = new EventEmitter();
+    keyPress = new EventEmitter();
+    onChange = (value) => { };
+    onTouched = () => { };
+    constructor(regexpService) {
+        this.regexpService = regexpService;
+    }
     // ControlValueAccessor Interface implementation
     writeValue(value) {
         this.value = value;
@@ -3421,22 +3516,21 @@ class InputComponent {
         this.max = this.max || 1000.0;
         this.placeholder = '0.00';
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: InputComponent, deps: [{ token: RegexpService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: InputComponent, 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,
+                useExisting: forwardRef(() => InputComponent)
+            },
+            {
+                provide: NG_VALIDATORS,
+                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(white 0deg 90deg,lightgray 90deg 180deg,white 180deg 270deg,lightgray 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"] }] });
 }
-InputComponent.idCounter = 0;
-InputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: InputComponent, deps: [{ token: RegexpService }], target: i0.ɵɵFactoryTarget.Component });
-InputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: InputComponent, 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,
-            useExisting: forwardRef(() => InputComponent)
-        },
-        {
-            provide: NG_VALIDATORS,
-            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:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057);margin:0rem;margin:var(--lux-input-margin, 0rem);padding:0rem .5rem;padding:var(--lux-input-padding, 0rem .5rem)}.alert{padding:.2rem 2rem;background:#fe2e2e;background:var(--lux-alert-background, #fe2e2e);color:#fff;color:var(--lux-alert-color, white);font-family:Consolas,monospace;width:45%;margin-right:1rem;display:inline-block}.symbol{display:inline-block;align-items:baseline;padding:0rem .5rem;margin-bottom:0;font-weight:400;color:default;color:var(--lux-symbol-color, default);text-align:center;white-space:nowrap;background:default;background:var(--lux-symbol-background, default);font-size:1rem;font-size:var(--lux-symbol-font-size, 1rem)}.bordered,.symbol{border:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:.25rem;border-radius:var(--lux-border-radius, .25rem)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none;display:flex;align-items:center}.monospace{font-family:monospace}.default-font{color:#000;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:#f1f1f1;background-color:var(--lux-disabled-color, #f1f1f1);border-color:#6d6d6d;border-color:var(--lux-disabled-border-color, #6d6d6d)}.clickable{cursor:pointer}.full-space{width:100%;height:100%;margin:0;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:1.5rem;width:var(--lux-autocomplete-icon-width, 1.5rem);z-index:1}.icon-external{background:url(/assets/img/external.svg) no-repeat center;background:var(--lux-input-icon-external, url(/assets/img/external.svg) no-repeat center);background-size:1rem;background-position-y:.1rem;height:100%}.invisible{opacity:0}.transparency{background-image:conic-gradient(white 0deg 90deg,lightgray 90deg 180deg,white 180deg 270deg,lightgray 270deg 360deg)}\n"], 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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: InputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: InputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lux-input', providers: [
                         {
@@ -3449,7 +3543,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", 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:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057);margin:0rem;margin:var(--lux-input-margin, 0rem);padding:0rem .5rem;padding:var(--lux-input-padding, 0rem .5rem)}.alert{padding:.2rem 2rem;background:#fe2e2e;background:var(--lux-alert-background, #fe2e2e);color:#fff;color:var(--lux-alert-color, white);font-family:Consolas,monospace;width:45%;margin-right:1rem;display:inline-block}.symbol{display:inline-block;align-items:baseline;padding:0rem .5rem;margin-bottom:0;font-weight:400;color:default;color:var(--lux-symbol-color, default);text-align:center;white-space:nowrap;background:default;background:var(--lux-symbol-background, default);font-size:1rem;font-size:var(--lux-symbol-font-size, 1rem)}.bordered,.symbol{border:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:.25rem;border-radius:var(--lux-border-radius, .25rem)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none;display:flex;align-items:center}.monospace{font-family:monospace}.default-font{color:#000;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:#f1f1f1;background-color:var(--lux-disabled-color, #f1f1f1);border-color:#6d6d6d;border-color:var(--lux-disabled-border-color, #6d6d6d)}.clickable{cursor:pointer}.full-space{width:100%;height:100%;margin:0;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:1.5rem;width:var(--lux-autocomplete-icon-width, 1.5rem);z-index:1}.icon-external{background:url(/assets/img/external.svg) no-repeat center;background:var(--lux-input-icon-external, url(/assets/img/external.svg) no-repeat center);background-size:1rem;background-position-y:.1rem;height:100%}.invisible{opacity:0}.transparency{background-image:conic-gradient(white 0deg 90deg,lightgray 90deg 180deg,white 180deg 270deg,lightgray 270deg 360deg)}\n"] }]
+                    ], 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(white 0deg 90deg,lightgray 90deg 180deg,white 180deg 270deg,lightgray 270deg 360deg)}\n"] }]
         }], ctorParameters: function () { return [{ type: RegexpService }]; }, propDecorators: { input: [{
                 type: ViewChild,
                 args: ['input', { static: false }]
@@ -3512,13 +3606,14 @@ var Placement;
  * Default Tooltip Component
  */
 class TooltipComponent {
+    context;
     constructor() { }
-}
-TooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: TooltipComponent, selector: "ng-component", inputs: { context: "context" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: TooltipComponent, selector: "ng-component", 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: "14.0.2", ngImport: i0, type: TooltipComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: TooltipComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -3530,6 +3625,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
             }] } });
 
 class TooltipContentRef {
+    viewRef;
+    componentRef;
     constructor(viewRef, componentRef) {
         this.viewRef = viewRef;
         this.componentRef = componentRef;
@@ -3537,6 +3634,9 @@ class TooltipContentRef {
 }
 
 class TooltipService {
+    _injector;
+    _crf;
+    _applicationRef;
     constructor(_injector, _crf, _applicationRef) {
         this._injector = _injector;
         this._crf = _crf;
@@ -3658,10 +3758,10 @@ class TooltipService {
         domElem.style.left = `${left}px`;
         return domElem;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", 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: "16.0.2", ngImport: i0, type: TooltipService });
 }
-TooltipService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: TooltipService, deps: [{ token: i0.Injector }, { token: i0.ComponentFactoryResolver }, { token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Injectable });
-TooltipService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: TooltipService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: TooltipService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: TooltipService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ComponentFactoryResolver }, { type: i0.ApplicationRef }]; } });
 
@@ -3669,6 +3769,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
  * Tooltip directive
  */
 class LuxTooltipDirective {
+    elHost;
+    tooltipService;
+    /** Tooltip title */
+    luxTooltip;
+    /** Component, TemplateRef or String */
+    content;
+    /** Placement */
+    placement;
+    tooltipRef;
     constructor(elHost, tooltipService) {
         this.elHost = elHost;
         this.tooltipService = tooltipService;
@@ -3696,10 +3805,10 @@ class LuxTooltipDirective {
     remove(tooltipRef) {
         this.tooltipService.removeComponentFromBody(tooltipRef);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: LuxTooltipDirective, deps: [{ token: i0.ElementRef }, { token: TooltipService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.2", type: LuxTooltipDirective, selector: "[luxTooltip]", inputs: { luxTooltip: "luxTooltip", content: "content", placement: "placement" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "click": "onClick()" } }, ngImport: i0 });
 }
-LuxTooltipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: LuxTooltipDirective, deps: [{ token: i0.ElementRef }, { token: TooltipService }], target: i0.ɵɵFactoryTarget.Directive });
-LuxTooltipDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.2", type: LuxTooltipDirective, selector: "[luxTooltip]", inputs: { luxTooltip: "luxTooltip", content: "content", placement: "placement" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "click": "onClick()" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: LuxTooltipDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: LuxTooltipDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[luxTooltip]'
@@ -3722,32 +3831,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
             }] } });
 
 class PaginationComponent {
-    constructor() {
-        this.literals = {
-            en: {
-                first: 'First',
-                previous: 'Previous',
-                next: 'Next',
-                last: 'Last'
-            },
-            es: {
-                first: 'Primero',
-                previous: 'Anterior',
-                next: 'Siguiente',
-                last: 'Último'
-            }
-        };
-        this.showPagination = false;
-        this.hidePrevious = false;
-        this.lastPage = false;
-        this.totalPages = 0;
-        this.displayNextEllipsis = false;
-        this.displayPreviousEllipsis = false;
-        this.pages = [];
-        this.goToPage = new EventEmitter();
-        this.pageSizeChange = new EventEmitter();
-        this.lang = languageDetector();
-    }
+    literals = {
+        en: {
+            first: 'First',
+            previous: 'Previous',
+            next: 'Next',
+            last: 'Last'
+        },
+        es: {
+            first: 'Primero',
+            previous: 'Anterior',
+            next: 'Siguiente',
+            last: 'Último'
+        }
+    };
+    first;
+    previous;
+    next;
+    last;
+    showPagination = false;
+    hidePrevious = false;
+    lastPage = false;
+    totalPages = 0;
+    displayNextEllipsis = false;
+    displayPreviousEllipsis = false;
+    pages = [];
+    goToPage = new EventEmitter();
+    pageSizeChange = new EventEmitter();
+    /** Current page, total items and items to show per page */
+    paginationInfoValue;
+    _lang;
     set lang(l) {
         if (l === this._lang) {
             return;
@@ -3770,6 +3883,9 @@ class PaginationComponent {
     get paginationInfo() {
         return this.paginationInfoValue;
     }
+    constructor() {
+        this.lang = languageDetector();
+    }
     ngOnInit() {
         this.calculatePages();
     }
@@ -3837,12 +3953,12 @@ class PaginationComponent {
         this.next = l.next;
         this.last = l.last;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: PaginationComponent, 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:white;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,%3Csvg width%3D%2268%22 height%3D%2248%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E %3Cg%3E  %3Ctitle%3Ebackground%3C%2Ftitle%3E  %3Crect fill%3D%22none%22 id%3D%22canvas_background%22 height%3D%22402%22 width%3D%221082%22 y%3D%22-1%22 x%3D%22-1%22%2F%3E %3C%2Fg%3E %3Cg%3E  %3Ctitle%3ELayer 1%3C%2Ftitle%3E  %3Cpolygon fill%3D%22%23325C81%22 id%3D%22svg_2%22 points%3D%2221.8%2C45.7 10.4%2C44.3 30.8%2C24 10.4%2C3.7 21.8%2C2.3 43.5%2C24  %22%2F%3E %3C%2Fg%3E%3C%2Fsvg%3E\");background-position:.4em}.arrow-left{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2268%22 height%3D%2248%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E %3Cg%3E  %3Ctitle%3Ebackground%3C%2Ftitle%3E  %3Crect fill%3D%22none%22 id%3D%22canvas_background%22 height%3D%22402%22 width%3D%221082%22 y%3D%22-1%22 x%3D%22-1%22%2F%3E %3C%2Fg%3E %3Cg%3E  %3Ctitle%3ELayer 1%3C%2Ftitle%3E  %3Cpolygon fill%3D%22%23325C81%22 id%3D%22svg_2%22 points%3D%2221.8%2C45.7 10.4%2C44.3 30.8%2C24 10.4%2C3.7 21.8%2C2.3 43.5%2C24  %22%2F%3E %3C%2Fg%3E%3C%2Fsvg%3E\");transform:rotate(180deg);background-position:.4em}.arrow-right-end{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2268%22 height%3D%2248%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E %3Cg%3E  %3Ctitle%3Ebackground%3C%2Ftitle%3E  %3Crect fill%3D%22none%22 id%3D%22canvas_background%22 height%3D%22402%22 width%3D%221082%22 y%3D%22-1%22 x%3D%22-1%22%2F%3E %3C%2Fg%3E %3Cg%3E  %3Ctitle%3ELayer 1%3C%2Ftitle%3E  %3Cpolygon fill%3D%22%23325C81%22 id%3D%22svg_2%22 points%3D%2221.8%2C45.7 10.4%2C44.3 30.8%2C24 10.4%2C3.7 21.8%2C2.3 43.5%2C24  %22%2F%3E    %3Cpolygon fill%3D%22%23325C81%22 id%3D%22svg_3%22 points%3D%2241.8%2C45.7 30.4%2C44.3 50.8%2C24 30.4%2C3.7 41.8%2C2.3 63.5%2C24  %22%2F%3E %3C%2Fg%3E%3C%2Fsvg%3E\");background-position:.1em}.arrow-left-end{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2268%22 height%3D%2248%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E %3Cg%3E  %3Ctitle%3Ebackground%3C%2Ftitle%3E  %3Crect fill%3D%22none%22 id%3D%22canvas_background%22 height%3D%22402%22 width%3D%221082%22 y%3D%22-1%22 x%3D%22-1%22%2F%3E %3C%2Fg%3E %3Cg%3E  %3Ctitle%3ELayer 1%3C%2Ftitle%3E  %3Cpolygon fill%3D%22%23325C81%22 id%3D%22svg_2%22 points%3D%2221.8%2C45.7 10.4%2C44.3 30.8%2C24 10.4%2C3.7 21.8%2C2.3 43.5%2C24  %22%2F%3E    %3Cpolygon fill%3D%22%23325C81%22 id%3D%22svg_3%22 points%3D%2241.8%2C45.7 30.4%2C44.3 50.8%2C24 30.4%2C3.7 41.8%2C2.3 63.5%2C24  %22%2F%3E %3C%2Fg%3E%3C%2Fsvg%3E\");background-position:.1em;transform:rotate(180deg)}@media only screen and (min-width: 300px) and (max-width: 500px){.arrow-right,.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"] }] });
 }
-PaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PaginationComponent, 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:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057);margin:0rem;margin:var(--lux-input-margin, 0rem);padding:0rem .5rem;padding:var(--lux-input-padding, 0rem .5rem)}.alert{padding:.2rem 2rem;background:#fe2e2e;background:var(--lux-alert-background, #fe2e2e);color:#fff;color:var(--lux-alert-color, white);font-family:Consolas,monospace;width:45%;margin-right:1rem;display:inline-block}.symbol{display:inline-block;align-items:baseline;padding:0rem .5rem;margin-bottom:0;font-weight:400;color:default;color:var(--lux-symbol-color, default);text-align:center;white-space:nowrap;background:default;background:var(--lux-symbol-background, default);font-size:1rem;font-size:var(--lux-symbol-font-size, 1rem)}.bordered,.symbol{border:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:.25rem;border-radius:var(--lux-border-radius, .25rem)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none;display:flex;align-items:center}.monospace{font-family:monospace}.default-font{color:#000;color:var(--lux-font-color, black)}.lux-pagination{display:flex;flex-direction:row;margin:2% 0;width:100%;background:white;align-items:center}.disabled{cursor:not-allowed;border:1px solid #325c81;border:var(--lux-pagination-disabled-border, 1px solid #325c81);border-radius:10%;border-radius:var(--lux-pagination-disabled-border-radius, 10%);padding:1%;margin:0 .7%;color:#fff;color:var(--lux-pagination-disabled-color, white);background-color:#325c81;background-color:var(--lux-pagination-disabled-background-color, #325c81);text-decoration:none;pointer-events:none}.enabled{border:1px solid rgb(207,207,207);border:var(--lux-pagination-enabled-border, 1px solid rgb(207, 207, 207));border-radius:10%;border-radius:var(--lux-pagination-enabled-border-radius, 10%);padding:1%;margin:0 .7%;color:#325c81;color:var(--lux-pagination-enabled-color, #325c81);width:-webkit-min-content;width:-moz-min-content;width:min-content;cursor:pointer}.enabledFirstLast{border:1px solid rgb(207,207,207);border-radius:10%;padding:1%;color:#325c81;margin:0 .7%;width:-webkit-min-content;width:-moz-min-content;width:min-content;cursor:pointer}.ellipsis{margin:0rem .5rem;padding:0rem;color:#325c81;width:-webkit-min-content;width:-moz-min-content;width:min-content}.button-pagination{width:1em;width:var(--lux-pagination-button-width, 1em);height:1.2em;height:var(--lux-pagination-button-height, 1.2em);font-size:80%;font-size:var(--lux-pagination-font-size, 80%);text-align:center}.icon{background-size:1.3em 1.4em;background-position:center;background-repeat:no-repeat}.arrow-right{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2268%22 height%3D%2248%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E %3Cg%3E  %3Ctitle%3Ebackground%3C%2Ftitle%3E  %3Crect fill%3D%22none%22 id%3D%22canvas_background%22 height%3D%22402%22 width%3D%221082%22 y%3D%22-1%22 x%3D%22-1%22%2F%3E %3C%2Fg%3E %3Cg%3E  %3Ctitle%3ELayer 1%3C%2Ftitle%3E  %3Cpolygon fill%3D%22%23325C81%22 id%3D%22svg_2%22 points%3D%2221.8%2C45.7 10.4%2C44.3 30.8%2C24 10.4%2C3.7 21.8%2C2.3 43.5%2C24  %22%2F%3E %3C%2Fg%3E%3C%2Fsvg%3E\");background-position:.4em}.arrow-left{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2268%22 height%3D%2248%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E %3Cg%3E  %3Ctitle%3Ebackground%3C%2Ftitle%3E  %3Crect fill%3D%22none%22 id%3D%22canvas_background%22 height%3D%22402%22 width%3D%221082%22 y%3D%22-1%22 x%3D%22-1%22%2F%3E %3C%2Fg%3E %3Cg%3E  %3Ctitle%3ELayer 1%3C%2Ftitle%3E  %3Cpolygon fill%3D%22%23325C81%22 id%3D%22svg_2%22 points%3D%2221.8%2C45.7 10.4%2C44.3 30.8%2C24 10.4%2C3.7 21.8%2C2.3 43.5%2C24  %22%2F%3E %3C%2Fg%3E%3C%2Fsvg%3E\");transform:rotate(180deg);background-position:.4em}.arrow-right-end{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2268%22 height%3D%2248%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E %3Cg%3E  %3Ctitle%3Ebackground%3C%2Ftitle%3E  %3Crect fill%3D%22none%22 id%3D%22canvas_background%22 height%3D%22402%22 width%3D%221082%22 y%3D%22-1%22 x%3D%22-1%22%2F%3E %3C%2Fg%3E %3Cg%3E  %3Ctitle%3ELayer 1%3C%2Ftitle%3E  %3Cpolygon fill%3D%22%23325C81%22 id%3D%22svg_2%22 points%3D%2221.8%2C45.7 10.4%2C44.3 30.8%2C24 10.4%2C3.7 21.8%2C2.3 43.5%2C24  %22%2F%3E    %3Cpolygon fill%3D%22%23325C81%22 id%3D%22svg_3%22 points%3D%2241.8%2C45.7 30.4%2C44.3 50.8%2C24 30.4%2C3.7 41.8%2C2.3 63.5%2C24  %22%2F%3E %3C%2Fg%3E%3C%2Fsvg%3E\");background-position:.1em}.arrow-left-end{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2268%22 height%3D%2248%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E %3Cg%3E  %3Ctitle%3Ebackground%3C%2Ftitle%3E  %3Crect fill%3D%22none%22 id%3D%22canvas_background%22 height%3D%22402%22 width%3D%221082%22 y%3D%22-1%22 x%3D%22-1%22%2F%3E %3C%2Fg%3E %3Cg%3E  %3Ctitle%3ELayer 1%3C%2Ftitle%3E  %3Cpolygon fill%3D%22%23325C81%22 id%3D%22svg_2%22 points%3D%2221.8%2C45.7 10.4%2C44.3 30.8%2C24 10.4%2C3.7 21.8%2C2.3 43.5%2C24  %22%2F%3E    %3Cpolygon fill%3D%22%23325C81%22 id%3D%22svg_3%22 points%3D%2241.8%2C45.7 30.4%2C44.3 50.8%2C24 30.4%2C3.7 41.8%2C2.3 63.5%2C24  %22%2F%3E %3C%2Fg%3E%3C%2Fsvg%3E\");background-position:.1em;transform:rotate(180deg)}@media only screen and (min-width: 300px) and (max-width: 500px){.arrow-right,.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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PaginationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: PaginationComponent, decorators: [{
             type: Component,
-            args: [{ 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:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057);margin:0rem;margin:var(--lux-input-margin, 0rem);padding:0rem .5rem;padding:var(--lux-input-padding, 0rem .5rem)}.alert{padding:.2rem 2rem;background:#fe2e2e;background:var(--lux-alert-background, #fe2e2e);color:#fff;color:var(--lux-alert-color, white);font-family:Consolas,monospace;width:45%;margin-right:1rem;display:inline-block}.symbol{display:inline-block;align-items:baseline;padding:0rem .5rem;margin-bottom:0;font-weight:400;color:default;color:var(--lux-symbol-color, default);text-align:center;white-space:nowrap;background:default;background:var(--lux-symbol-background, default);font-size:1rem;font-size:var(--lux-symbol-font-size, 1rem)}.bordered,.symbol{border:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:.25rem;border-radius:var(--lux-border-radius, .25rem)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none;display:flex;align-items:center}.monospace{font-family:monospace}.default-font{color:#000;color:var(--lux-font-color, black)}.lux-pagination{display:flex;flex-direction:row;margin:2% 0;width:100%;background:white;align-items:center}.disabled{cursor:not-allowed;border:1px solid #325c81;border:var(--lux-pagination-disabled-border, 1px solid #325c81);border-radius:10%;border-radius:var(--lux-pagination-disabled-border-radius, 10%);padding:1%;margin:0 .7%;color:#fff;color:var(--lux-pagination-disabled-color, white);background-color:#325c81;background-color:var(--lux-pagination-disabled-background-color, #325c81);text-decoration:none;pointer-events:none}.enabled{border:1px solid rgb(207,207,207);border:var(--lux-pagination-enabled-border, 1px solid rgb(207, 207, 207));border-radius:10%;border-radius:var(--lux-pagination-enabled-border-radius, 10%);padding:1%;margin:0 .7%;color:#325c81;color:var(--lux-pagination-enabled-color, #325c81);width:-webkit-min-content;width:-moz-min-content;width:min-content;cursor:pointer}.enabledFirstLast{border:1px solid rgb(207,207,207);border-radius:10%;padding:1%;color:#325c81;margin:0 .7%;width:-webkit-min-content;width:-moz-min-content;width:min-content;cursor:pointer}.ellipsis{margin:0rem .5rem;padding:0rem;color:#325c81;width:-webkit-min-content;width:-moz-min-content;width:min-content}.button-pagination{width:1em;width:var(--lux-pagination-button-width, 1em);height:1.2em;height:var(--lux-pagination-button-height, 1.2em);font-size:80%;font-size:var(--lux-pagination-font-size, 80%);text-align:center}.icon{background-size:1.3em 1.4em;background-position:center;background-repeat:no-repeat}.arrow-right{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2268%22 height%3D%2248%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E %3Cg%3E  %3Ctitle%3Ebackground%3C%2Ftitle%3E  %3Crect fill%3D%22none%22 id%3D%22canvas_background%22 height%3D%22402%22 width%3D%221082%22 y%3D%22-1%22 x%3D%22-1%22%2F%3E %3C%2Fg%3E %3Cg%3E  %3Ctitle%3ELayer 1%3C%2Ftitle%3E  %3Cpolygon fill%3D%22%23325C81%22 id%3D%22svg_2%22 points%3D%2221.8%2C45.7 10.4%2C44.3 30.8%2C24 10.4%2C3.7 21.8%2C2.3 43.5%2C24  %22%2F%3E %3C%2Fg%3E%3C%2Fsvg%3E\");background-position:.4em}.arrow-left{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2268%22 height%3D%2248%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E %3Cg%3E  %3Ctitle%3Ebackground%3C%2Ftitle%3E  %3Crect fill%3D%22none%22 id%3D%22canvas_background%22 height%3D%22402%22 width%3D%221082%22 y%3D%22-1%22 x%3D%22-1%22%2F%3E %3C%2Fg%3E %3Cg%3E  %3Ctitle%3ELayer 1%3C%2Ftitle%3E  %3Cpolygon fill%3D%22%23325C81%22 id%3D%22svg_2%22 points%3D%2221.8%2C45.7 10.4%2C44.3 30.8%2C24 10.4%2C3.7 21.8%2C2.3 43.5%2C24  %22%2F%3E %3C%2Fg%3E%3C%2Fsvg%3E\");transform:rotate(180deg);background-position:.4em}.arrow-right-end{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2268%22 height%3D%2248%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E %3Cg%3E  %3Ctitle%3Ebackground%3C%2Ftitle%3E  %3Crect fill%3D%22none%22 id%3D%22canvas_background%22 height%3D%22402%22 width%3D%221082%22 y%3D%22-1%22 x%3D%22-1%22%2F%3E %3C%2Fg%3E %3Cg%3E  %3Ctitle%3ELayer 1%3C%2Ftitle%3E  %3Cpolygon fill%3D%22%23325C81%22 id%3D%22svg_2%22 points%3D%2221.8%2C45.7 10.4%2C44.3 30.8%2C24 10.4%2C3.7 21.8%2C2.3 43.5%2C24  %22%2F%3E    %3Cpolygon fill%3D%22%23325C81%22 id%3D%22svg_3%22 points%3D%2241.8%2C45.7 30.4%2C44.3 50.8%2C24 30.4%2C3.7 41.8%2C2.3 63.5%2C24  %22%2F%3E %3C%2Fg%3E%3C%2Fsvg%3E\");background-position:.1em}.arrow-left-end{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2268%22 height%3D%2248%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E %3Cg%3E  %3Ctitle%3Ebackground%3C%2Ftitle%3E  %3Crect fill%3D%22none%22 id%3D%22canvas_background%22 height%3D%22402%22 width%3D%221082%22 y%3D%22-1%22 x%3D%22-1%22%2F%3E %3C%2Fg%3E %3Cg%3E  %3Ctitle%3ELayer 1%3C%2Ftitle%3E  %3Cpolygon fill%3D%22%23325C81%22 id%3D%22svg_2%22 points%3D%2221.8%2C45.7 10.4%2C44.3 30.8%2C24 10.4%2C3.7 21.8%2C2.3 43.5%2C24  %22%2F%3E    %3Cpolygon fill%3D%22%23325C81%22 id%3D%22svg_3%22 points%3D%2241.8%2C45.7 30.4%2C44.3 50.8%2C24 30.4%2C3.7 41.8%2C2.3 63.5%2C24  %22%2F%3E %3C%2Fg%3E%3C%2Fsvg%3E\");background-position:.1em;transform:rotate(180deg)}@media only screen and (min-width: 300px) and (max-width: 500px){.arrow-right,.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', 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:white;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,%3Csvg width%3D%2268%22 height%3D%2248%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E %3Cg%3E  %3Ctitle%3Ebackground%3C%2Ftitle%3E  %3Crect fill%3D%22none%22 id%3D%22canvas_background%22 height%3D%22402%22 width%3D%221082%22 y%3D%22-1%22 x%3D%22-1%22%2F%3E %3C%2Fg%3E %3Cg%3E  %3Ctitle%3ELayer 1%3C%2Ftitle%3E  %3Cpolygon fill%3D%22%23325C81%22 id%3D%22svg_2%22 points%3D%2221.8%2C45.7 10.4%2C44.3 30.8%2C24 10.4%2C3.7 21.8%2C2.3 43.5%2C24  %22%2F%3E %3C%2Fg%3E%3C%2Fsvg%3E\");background-position:.4em}.arrow-left{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2268%22 height%3D%2248%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E %3Cg%3E  %3Ctitle%3Ebackground%3C%2Ftitle%3E  %3Crect fill%3D%22none%22 id%3D%22canvas_background%22 height%3D%22402%22 width%3D%221082%22 y%3D%22-1%22 x%3D%22-1%22%2F%3E %3C%2Fg%3E %3Cg%3E  %3Ctitle%3ELayer 1%3C%2Ftitle%3E  %3Cpolygon fill%3D%22%23325C81%22 id%3D%22svg_2%22 points%3D%2221.8%2C45.7 10.4%2C44.3 30.8%2C24 10.4%2C3.7 21.8%2C2.3 43.5%2C24  %22%2F%3E %3C%2Fg%3E%3C%2Fsvg%3E\");transform:rotate(180deg);background-position:.4em}.arrow-right-end{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2268%22 height%3D%2248%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E %3Cg%3E  %3Ctitle%3Ebackground%3C%2Ftitle%3E  %3Crect fill%3D%22none%22 id%3D%22canvas_background%22 height%3D%22402%22 width%3D%221082%22 y%3D%22-1%22 x%3D%22-1%22%2F%3E %3C%2Fg%3E %3Cg%3E  %3Ctitle%3ELayer 1%3C%2Ftitle%3E  %3Cpolygon fill%3D%22%23325C81%22 id%3D%22svg_2%22 points%3D%2221.8%2C45.7 10.4%2C44.3 30.8%2C24 10.4%2C3.7 21.8%2C2.3 43.5%2C24  %22%2F%3E    %3Cpolygon fill%3D%22%23325C81%22 id%3D%22svg_3%22 points%3D%2241.8%2C45.7 30.4%2C44.3 50.8%2C24 30.4%2C3.7 41.8%2C2.3 63.5%2C24  %22%2F%3E %3C%2Fg%3E%3C%2Fsvg%3E\");background-position:.1em}.arrow-left-end{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2268%22 height%3D%2248%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E %3Cg%3E  %3Ctitle%3Ebackground%3C%2Ftitle%3E  %3Crect fill%3D%22none%22 id%3D%22canvas_background%22 height%3D%22402%22 width%3D%221082%22 y%3D%22-1%22 x%3D%22-1%22%2F%3E %3C%2Fg%3E %3Cg%3E  %3Ctitle%3ELayer 1%3C%2Ftitle%3E  %3Cpolygon fill%3D%22%23325C81%22 id%3D%22svg_2%22 points%3D%2221.8%2C45.7 10.4%2C44.3 30.8%2C24 10.4%2C3.7 21.8%2C2.3 43.5%2C24  %22%2F%3E    %3Cpolygon fill%3D%22%23325C81%22 id%3D%22svg_3%22 points%3D%2241.8%2C45.7 30.4%2C44.3 50.8%2C24 30.4%2C3.7 41.8%2C2.3 63.5%2C24  %22%2F%3E %3C%2Fg%3E%3C%2Fsvg%3E\");background-position:.1em;transform:rotate(180deg)}@media only screen and (min-width: 300px) and (max-width: 500px){.arrow-right,.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: function () { return []; }, propDecorators: { goToPage: [{
                 type: Output
             }], pageSizeChange: [{
@@ -3854,20 +3970,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
             }] } });
 
 class RadiogroupComponent {
-    constructor() {
-        this.touched = false;
-        this.name = 'radiogroup1';
-        this.disabled = false;
-        this.readonly = false;
-        this.required = false;
-        this.itemsChange = new EventEmitter();
-        this.valueChange = new EventEmitter();
-        this._value = undefined;
-        this._items = [];
-        // ControlValueAccessor Interface
-        this.onChange = (value) => { };
-        this.onTouched = () => { };
-    }
+    touched = false;
+    name = 'radiogroup1';
+    disabled = false;
+    readonly = false;
+    required = false;
     set items(col) {
         this._items = (col || []).map((it, index) => this.ensureHasUniqueName(it, index));
         this.itemsChange.emit(col);
@@ -3875,6 +3982,7 @@ class RadiogroupComponent {
     get items() {
         return this._items;
     }
+    itemsChange = new EventEmitter();
     set value(v) {
         if (v === this._value) {
             return;
@@ -3889,6 +3997,13 @@ class RadiogroupComponent {
     get value() {
         return this._value;
     }
+    valueChange = new EventEmitter();
+    _value = undefined;
+    _items = [];
+    constructor() { }
+    // ControlValueAccessor Interface
+    onChange = (value) => { };
+    onTouched = () => { };
     writeValue(value) {
         this.value = value;
     }
@@ -3932,21 +4047,21 @@ class RadiogroupComponent {
         }
         return item;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: RadiogroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: RadiogroupComponent, 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,
+                useExisting: forwardRef(() => RadiogroupComponent)
+            },
+            {
+                provide: NG_VALIDATORS,
+                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;user-select:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 }
-RadiogroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: RadiogroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-RadiogroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: RadiogroupComponent, 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,
-            useExisting: forwardRef(() => RadiogroupComponent)
-        },
-        {
-            provide: NG_VALIDATORS,
-            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:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057);margin:0rem;margin:var(--lux-input-margin, 0rem);padding:0rem .5rem;padding:var(--lux-input-padding, 0rem .5rem)}.alert{padding:.2rem 2rem;background:#fe2e2e;background:var(--lux-alert-background, #fe2e2e);color:#fff;color:var(--lux-alert-color, white);font-family:Consolas,monospace;width:45%;margin-right:1rem;display:inline-block}.symbol{display:inline-block;align-items:baseline;padding:0rem .5rem;margin-bottom:0;font-weight:400;color:default;color:var(--lux-symbol-color, default);text-align:center;white-space:nowrap;background:default;background:var(--lux-symbol-background, default);font-size:1rem;font-size:var(--lux-symbol-font-size, 1rem)}.bordered,.symbol{border:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:.25rem;border-radius:var(--lux-border-radius, .25rem)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none;display:flex;align-items:center}.monospace{font-family:monospace}.default-font{color:#000;color:var(--lux-font-color, black)}.radiogroup{display:flex}.radio-item{border-radius:0;border:1px solid #ccc;padding:0rem .5rem;padding:var(--lux-radiogroup-padding, 0rem .5rem)}.radio-item input{display:none}.radio-item label{color:initial;color:var(--lux-radiogroup-color, initial);font-size:initial;font-size:var(--lux-radiogroup-font-size, initial);margin-top:.3rem;margin-bottom:.3rem}.radio-item.selected{background-color:#2e2eac;background-color:var(--lux-radiogroup-selected-background-color, rgb(46, 46, 172))}.radio-item.selected label{font-size:initial;font-size:var(--lux-radiogroup-font-size, initial);color:#fff;color:var(--lux-radiogroup-selected-color, white)}.radio-start{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}.radio-end{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}.disabled .radio-item{background-color:#f0f0f0;color:#444}.disabled .selected{font-size:initial;font-size:var(--lux-radiogroup-selected-disabled-font-size, initial);color:#fff;color:var(--lux-radiogroup-selected-disabled-color, white);background-color:#9898ec;background-color:var(--lux-radiogroup-selected-disabled-background-color, rgb(152, 152, 236))}.unselectable{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: RadiogroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: RadiogroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lux-radiogroup', providers: [
                         {
@@ -3959,7 +4074,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", 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:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057);margin:0rem;margin:var(--lux-input-margin, 0rem);padding:0rem .5rem;padding:var(--lux-input-padding, 0rem .5rem)}.alert{padding:.2rem 2rem;background:#fe2e2e;background:var(--lux-alert-background, #fe2e2e);color:#fff;color:var(--lux-alert-color, white);font-family:Consolas,monospace;width:45%;margin-right:1rem;display:inline-block}.symbol{display:inline-block;align-items:baseline;padding:0rem .5rem;margin-bottom:0;font-weight:400;color:default;color:var(--lux-symbol-color, default);text-align:center;white-space:nowrap;background:default;background:var(--lux-symbol-background, default);font-size:1rem;font-size:var(--lux-symbol-font-size, 1rem)}.bordered,.symbol{border:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:.25rem;border-radius:var(--lux-border-radius, .25rem)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none;display:flex;align-items:center}.monospace{font-family:monospace}.default-font{color:#000;color:var(--lux-font-color, black)}.radiogroup{display:flex}.radio-item{border-radius:0;border:1px solid #ccc;padding:0rem .5rem;padding:var(--lux-radiogroup-padding, 0rem .5rem)}.radio-item input{display:none}.radio-item label{color:initial;color:var(--lux-radiogroup-color, initial);font-size:initial;font-size:var(--lux-radiogroup-font-size, initial);margin-top:.3rem;margin-bottom:.3rem}.radio-item.selected{background-color:#2e2eac;background-color:var(--lux-radiogroup-selected-background-color, rgb(46, 46, 172))}.radio-item.selected label{font-size:initial;font-size:var(--lux-radiogroup-font-size, initial);color:#fff;color:var(--lux-radiogroup-selected-color, white)}.radio-start{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}.radio-end{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}.disabled .radio-item{background-color:#f0f0f0;color:#444}.disabled .selected{font-size:initial;font-size:var(--lux-radiogroup-selected-disabled-font-size, initial);color:#fff;color:var(--lux-radiogroup-selected-disabled-color, white);background-color:#9898ec;background-color:var(--lux-radiogroup-selected-disabled-background-color, rgb(152, 152, 236))}.unselectable{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}\n"] }]
+                    ], 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;user-select:none}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { name: [{
                 type: Input
             }], disabled: [{
@@ -3980,27 +4095,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
 
 let sequencer = 0;
 class SelectComponent {
-    constructor() {
-        this.id = 'stringList' + sequencer++;
-        this.disabled = false;
-        this.required = false;
-        /** Allow multiple elements */
-        this.multiple = true;
-        this.value = [];
-        this.valueChange = new EventEmitter();
-        this.placeholder = 'Add new';
-        /** If set, check there is no duplicates in the data. */
-        this.unique = true;
-        /** Validation function for new items. Returns error or null if valid */
-        this.validateItem = (_) => null;
-        this.newEntry = '';
-        this.error = null;
-        this.isValidNewEntry = false;
-        this.touched = false;
-        // ControlValueAccessor Interface
-        this.onChange = (value) => { };
-        this.onTouched = () => { };
-    }
+    id = 'stringList' + sequencer++;
+    disabled = false;
+    required = false;
+    /** Allow multiple elements */
+    multiple = true;
+    value = [];
+    valueChange = new EventEmitter();
+    placeholder = 'Add new';
+    /** If set, check there is no duplicates in the data. */
+    unique = true;
+    /** Validation function for new items. Returns error or null if valid */
+    validateItem = (_) => null;
+    newEntry = '';
+    error = null;
+    isValidNewEntry = false;
+    touched = false;
+    constructor() { }
+    // ControlValueAccessor Interface
+    onChange = (value) => { };
+    onTouched = () => { };
     writeValue(value) {
         this.value = value;
     }
@@ -4074,21 +4188,21 @@ class SelectComponent {
         this.error = this.validateItem(newValue);
         this.isValidNewEntry = !this.error;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: SelectComponent, 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,
+                useExisting: forwardRef(() => SelectComponent)
+            },
+            {
+                provide: NG_VALIDATORS,
+                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"] }] });
 }
-SelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: SelectComponent, 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,
-            useExisting: forwardRef(() => SelectComponent)
-        },
-        {
-            provide: NG_VALIDATORS,
-            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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: SelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lux-select', providers: [
                         {
@@ -4123,10 +4237,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
             }] } });
 
 class VoiceRecognitionDirective {
+    el;
+    renderer;
+    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;
-        this.isRecognizing = false;
         const speechRecognition = window.webkitSpeechRecognition;
         if (speechRecognition) {
             this.recognition = new speechRecognition();
@@ -4169,10 +4289,10 @@ class VoiceRecognitionDirective {
         this.el.nativeElement.value = recognizedText;
         this.renderer.removeClass(this.mic, 'lux-recording');
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: VoiceRecognitionDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.2", type: VoiceRecognitionDirective, selector: "[luxVoiceRecognition]", inputs: { language: "language" }, ngImport: i0 });
 }
-VoiceRecognitionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: VoiceRecognitionDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-VoiceRecognitionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.2", type: VoiceRecognitionDirective, selector: "[luxVoiceRecognition]", inputs: { language: "language" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: VoiceRecognitionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: VoiceRecognitionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[luxVoiceRecognition]'
@@ -4238,51 +4358,49 @@ const WINDOW_PROVIDERS = [
 ];
 
 class LuxModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: LuxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.2", ngImport: i0, type: LuxModule, declarations: [AutocompleteComponent,
+            AutocompleteListComponent,
+            FilterComponent,
+            CheckboxComponent,
+            DatetimeComponent,
+            InputComponent,
+            GeolocationComponent,
+            LuxTooltipDirective,
+            LuxModalWindowComponent,
+            LuxModalBackdropComponent,
+            LuxBreadcrumbComponent,
+            MapComponent,
+            SelectComponent,
+            TooltipComponent,
+            PaginationComponent,
+            RadiogroupComponent,
+            VoiceRecognitionDirective], imports: [FormsModule,
+            HttpClientModule,
+            ReactiveFormsModule,
+            RouterModule,
+            CommonModule], exports: [AutocompleteComponent,
+            AutocompleteListComponent,
+            FilterComponent,
+            CheckboxComponent,
+            DatetimeComponent,
+            InputComponent,
+            GeolocationComponent,
+            LuxTooltipDirective,
+            LuxBreadcrumbComponent,
+            LuxBreadcrumbComponent,
+            MapComponent,
+            SelectComponent,
+            PaginationComponent,
+            RadiogroupComponent,
+            VoiceRecognitionDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: LuxModule, providers: [ModalService, TooltipService, WINDOW_PROVIDERS], imports: [FormsModule,
+            HttpClientModule,
+            ReactiveFormsModule,
+            RouterModule,
+            CommonModule] });
 }
-LuxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: LuxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-LuxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: LuxModule, declarations: [AutocompleteComponent,
-        AutocompleteListComponent,
-        FilterComponent,
-        CheckboxComponent,
-        DatetimeComponent,
-        InputComponent,
-        GeolocationComponent,
-        LuxTooltipDirective,
-        LuxModalWindowComponent,
-        LuxModalBackdropComponent,
-        LuxBreadcrumbComponent,
-        MapComponent,
-        SelectComponent,
-        TooltipComponent,
-        PaginationComponent,
-        RadiogroupComponent,
-        VoiceRecognitionDirective], imports: [AngularResizeEventModule,
-        FormsModule,
-        HttpClientModule,
-        ReactiveFormsModule,
-        RouterModule,
-        CommonModule], exports: [AutocompleteComponent,
-        AutocompleteListComponent,
-        FilterComponent,
-        CheckboxComponent,
-        DatetimeComponent,
-        InputComponent,
-        GeolocationComponent,
-        LuxTooltipDirective,
-        LuxBreadcrumbComponent,
-        LuxBreadcrumbComponent,
-        MapComponent,
-        SelectComponent,
-        PaginationComponent,
-        RadiogroupComponent,
-        VoiceRecognitionDirective] });
-LuxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: LuxModule, providers: [ModalService, TooltipService, WINDOW_PROVIDERS], imports: [AngularResizeEventModule,
-        FormsModule,
-        HttpClientModule,
-        ReactiveFormsModule,
-        RouterModule,
-        CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: LuxModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: LuxModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -4304,14 +4422,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
                         RadiogroupComponent,
                         VoiceRecognitionDirective
                     ],
-                    entryComponents: [
-                        LuxModalWindowComponent,
-                        LuxModalBackdropComponent,
-                        TooltipComponent
-                    ],
                     providers: [ModalService, TooltipService, WINDOW_PROVIDERS],
                     imports: [
-                        AngularResizeEventModule,
                         FormsModule,
                         HttpClientModule,
                         ReactiveFormsModule,