@metadev/lux 0.16.3 → 0.19.0

package/fesm2015/metadev-lux.mjs

@@ -0,0 +1,4345 @@
+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 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 { of, Subject, fromEvent, from, BehaviorSubject } from 'rxjs';
+import * as i2 from 'angular-resize-event';
+import { AngularResizedEventModule } from 'angular-resize-event';
+import * as i2$1 from '@angular/common';
+import { DOCUMENT, isPlatformBrowser, CommonModule } from '@angular/common';
+import * as i1$1 from '@angular/router';
+import { NavigationEnd, RouterModule } from '@angular/router';
+import * as i1$2 from '@angular/common/http';
+import { HttpClientModule } from '@angular/common/http';
+
+// undefined and null functions
+const exists = (value) => value !== null && value !== undefined;
+const hasValue = (value) => exists(value) && (typeof value === 'string' ? !isEmptyString(value) : true);
+// string functions
+const isEmptyString = (value) => value.trim() === '';
+const isValidEmail = (value) => {
+    const re = /^[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?$/;
+    return re.test(String(value).toLowerCase().trim());
+};
+const isValidUrl = (value) => {
+    const re = /^([a-z]+?:\/\/)?((([a-z\d]([a-z\d-]*[a-z\d])*)\.)+[a-z]{2,}|((\d{1,3}\.){3}\d{1,3}))(\:\d+)?(\/[-a-z\d%_.~+]*)*(\?[;&a-z\d%_.~+=-]*)?(\#[-a-z\d_]*)?$/i;
+    return re.test(String(value).toLowerCase().trim());
+};
+const isValidColor = (value) => {
+    value = String(value).toLowerCase();
+    // valid values for CSS color property, yet not valid colors by themselves
+    if (value === 'currentcolor' ||
+        value === 'inherit' ||
+        value === 'initial' ||
+        value === 'revert' ||
+        value === 'unset') {
+        return false;
+    }
+    return CSS.supports('color', value);
+};
+// date functions
+const isValidDate = (date) => exists(date) ? !isNaN(date.getTime()) : false;
+const normalizeDate = (value) => {
+    if (typeof value === 'string' && value.length > 10) {
+        return value.substr(0, 10);
+    }
+    return value ? value.toString() : null;
+};
+const addTimezoneOffset = (date) => {
+    if (!isValidDate(date)) {
+        return date;
+    }
+    else {
+        return new Date(date.getTime() - date.getTimezoneOffset() * 60000);
+    }
+};
+// number functions
+const isValidNumber = (value) => (hasValue(value) ? !Number.isNaN(Number(value)) : false);
+const numberOfDecimalDigits = (x) => {
+    if (isValidNumber(x)) {
+        const xString = String(Number(x));
+        if (xString === 'Infinity') {
+            return 0;
+        }
+        const indexOfE = xString.indexOf('e');
+        if (indexOfE >= 0) {
+            return 0;
+        }
+        const indexOfDecimalPoint = xString.indexOf('.');
+        if (indexOfDecimalPoint < 0) {
+            return 0;
+        }
+        else {
+            return xString.length - indexOfDecimalPoint - 1;
+        }
+    }
+    return undefined;
+};
+const numberOfWholeDigits = (x) => {
+    if (isValidNumber(x)) {
+        let xString = String(Number(x));
+        if (xString.indexOf('-') === 0) {
+            xString = xString.slice(1, xString.length);
+        }
+        if (xString === 'Infinity') {
+            return Infinity;
+        }
+        if (xString.indexOf('0') === 0) {
+            xString = xString.slice(1, xString.length);
+        }
+        const indexOfE = xString.indexOf('e');
+        if (indexOfE >= 0) {
+            return Number(xString.slice(indexOfE + 1, xString.length)) + 1;
+        }
+        const indexOfDecimalPoint = xString.indexOf('.');
+        if (indexOfDecimalPoint < 0) {
+            return xString.length;
+        }
+        else {
+            return indexOfDecimalPoint;
+        }
+    }
+    return undefined;
+};
+const roundToMultipleOf = (x, modulo) => {
+    const moduloString = String(modulo);
+    // approximates the result
+    // prone to inexactitude because of floating point arithmetic
+    const approximation = Math.round(x / modulo) * modulo;
+    const approximationString = String(approximation);
+    // remove useless decimals
+    const uselessDecimalsInApproximation = numberOfDecimalDigits(approximationString) -
+        numberOfDecimalDigits(moduloString);
+    const resultString = approximationString.slice(0, approximationString.length - uselessDecimalsInApproximation);
+    return Number(resultString);
+};
+// other functions
+const isInitialAndEmpty = (previousValue, newValue) => {
+    const isPrevArray = Array.isArray(previousValue);
+    const isNewArray = Array.isArray(newValue);
+    return !((isPrevArray ? previousValue.length !== 0 : Boolean(previousValue)) ||
+        (isNewArray ? newValue.length !== 0 : Boolean(newValue)));
+};
+
+/** Language detector based on Navigator preferences */
+const languageDetector = () => {
+    const lang = navigator.language.split('-')[0];
+    if (lang === 'es' || lang === 'en') {
+        return lang;
+    }
+    return 'en'; // default
+};
+
+const LOST_FOCUS_TIME_WINDOW_MS = 200; // ms
+class AutocompleteComponent {
+    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 = () => { };
+    }
+    get value() {
+        return this._value;
+    }
+    set value(v) {
+        const initialAndEmpty = isInitialAndEmpty(this._value, v);
+        this._value = v;
+        this.onChange(v);
+        this.completeLabel();
+        if (!initialAndEmpty) {
+            this.valueChange.emit(v);
+        }
+    }
+    get dataSource() {
+        return this._dataSource;
+    }
+    set dataSource(v) {
+        this._dataSource = v;
+        this.dataSourceChange.emit(v);
+    }
+    set placeholder(v) {
+        this._placeholder = v;
+    }
+    get placeholder() {
+        return this._placeholder ? this._placeholder : '';
+    }
+    writeValue(value) {
+        this.value = value;
+    }
+    registerOnChange(onChange) {
+        this.onChange = onChange;
+    }
+    registerOnTouched(onTouched) {
+        this.onTouched = onTouched;
+    }
+    markAsTouched() {
+        if (!this.touched && !this.disabled) {
+            this.onTouched();
+            this.touched = true;
+        }
+    }
+    setDisabledState(disabled) {
+        this.disabled = disabled;
+    }
+    // End ControlValueAccessor Interface
+    // Validator interface
+    registerOnValidatorChange() { }
+    validate(control) {
+        const value = control.value;
+        if (this.required &&
+            (value === '' || value === null || value === undefined)) {
+            return { required: { value, reason: 'Required field.' } };
+        }
+        return null;
+    }
+    // End of Validator interface
+    clear() {
+        this.value = null;
+        this.toggleCompletion(this.keepOpenAfterDelete, '');
+    }
+    completeLabel() {
+        if (this.value) {
+            if (this.dataSource) {
+                this.label = findLabelForId(this.dataSource, this.value) || '';
+            }
+            else if (this.instance && this.resolveLabelsFunction) {
+                this.resolveLabelsFunction(this.instance, [this.value])
+                    .pipe(debounceTime(1), first())
+                    .subscribe((data) => {
+                    this.label = findLabelForId(data, this.value) || '';
+                });
+            }
+        }
+        else {
+            this.label = '';
+        }
+    }
+    ngOnInit() {
+        this.inputId = this.inputId
+            ? this.inputId
+            : `autocompletelist${AutocompleteComponent.idCounter++}`;
+        this.completeLabel();
+    }
+    ngAfterViewInit() {
+        this.setSameWidth();
+    }
+    onInputResized() {
+        this.setSameWidth();
+    }
+    setSameWidth() {
+        const width = this.i0.nativeElement.getBoundingClientRect().width;
+        this.completeDiv.nativeElement.style.width = `${width}px`;
+    }
+    onKeydown(event, label) {
+        switch (event.key) {
+            case 'Tab':
+                if (label) {
+                    this.pickSelectionOrFirstMatch(label);
+                }
+                this.showCompletion = false;
+                break;
+        }
+        this.markAsTouched();
+    }
+    onKeypress(event, label) {
+        switch (event.key) {
+            case 'Intro':
+            case 'Enter':
+                this.pickSelectionOrFirstMatch(label);
+                event.preventDefault();
+                break;
+        }
+        this.markAsTouched();
+    }
+    onKeyup(event, label) {
+        switch (event.key) {
+            case 'PageDown':
+                this.focusOnNext(5);
+                event.preventDefault();
+                break;
+            case 'ArrowDown':
+                this.focusOnNext(1);
+                event.preventDefault();
+                break;
+            case 'PageUp':
+                this.focusOnPrevious(5);
+                event.preventDefault();
+                break;
+            case 'ArrowUp':
+                this.focusOnPrevious(1);
+                event.preventDefault();
+                break;
+            case 'Escape':
+                this.complete(null);
+                event.preventDefault();
+                break;
+            case 'Intro':
+            case 'Enter':
+                event.preventDefault();
+                break;
+            default:
+                this.showCompletionList(label);
+            // event.preventDefault();
+        }
+        this.markAsTouched();
+    }
+    focusOnNext(offset) {
+        const list = this.completionList || [];
+        const index = list.findIndex((it) => this.focusItem && it.key === this.focusItem.key);
+        const indexNext = -1 && list.length > index + offset ? index + offset : list.length - 1;
+        const next = list[indexNext];
+        this.focusItem = next;
+        this.ensureItemVisible(index);
+    }
+    focusOnPrevious(offset) {
+        const list = this.completionList || [];
+        const index = list.findIndex((it) => this.focusItem && it.key === this.focusItem.key);
+        const indexPrevious = index !== -1 && index > offset ? index - offset : 0;
+        const next = list[indexPrevious];
+        this.focusItem = next;
+        this.ensureItemVisible(index);
+    }
+    onLostFocus(label) {
+        this.lostFocusHandled = false;
+        this.t0 = performance.now();
+        // console.log('Init LostFocus');
+        setTimeout(() => {
+            // needs to postpone actions some milliseconds to verify if
+            // lost focus was followed by a list selection -> then cancel
+            // if not -> make side effect
+            if (!this.lostFocusHandled) {
+                // console.log(
+                //   'Lost focus 2',
+                //   this.lostFocusHandled,
+                //   'SIDE EFFECT',
+                //   performance.now() - this.t0,
+                //   'label:',
+                //   label
+                // );
+                if (label && this.label !== label) {
+                    this.pickSelectionOrFirstMatch(label);
+                }
+                else {
+                    this.lostFocusHandled = true;
+                }
+                this.toggleCompletion(false, label);
+            }
+            else {
+                // do nothing (list selection took place)
+                // console.log(
+                //   'onlost focus 2',
+                //   this.lostFocusHandled,
+                //   'nothing',
+                //   performance.now() - this.t0
+                // );
+            }
+        }, LOST_FOCUS_TIME_WINDOW_MS);
+    }
+    complete(item) {
+        if (!this.lostFocusHandled) {
+            this.lostFocusHandled = true; // prevent a previous lostFocus to trigger a side effect
+            const ellapsed = performance.now() - this.t0;
+            if (ellapsed > LOST_FOCUS_TIME_WINDOW_MS) {
+                console.warn('complete. lostfocus->click timeout of ', LOST_FOCUS_TIME_WINDOW_MS, 'ms exceed: ', performance.now() - this.t0, ' ms');
+            }
+            // console.log(
+            //   'complete. set to true. CANCELED side effect',
+            //   performance.now() - this.t0
+            // );
+        }
+        if (item !== null) {
+            this.value = item.key;
+            this.label = item.label;
+        }
+        else {
+            this.value = null;
+            this.label = '';
+        }
+        this.toggleCompletion(false, null);
+        this.markAsTouched();
+    }
+    toggleCompletion(show, label) {
+        if (show && !this.disabled) {
+            this.showCompletionList(label);
+        }
+        else {
+            this.showCompletion = false;
+            if (this.canAddNewValues) {
+                this.syncCustomValue(this.label);
+                return;
+            }
+        }
+        this.cd.markForCheck();
+    }
+    get selectedOption() {
+        const index = this.completionList.findIndex((i) => i.key === this.focusItem.key);
+        if (index === -1 || !this.focusItem) {
+            return null;
+        }
+        return `${this.inputId}_${index}`;
+    }
+    ensureItemVisible(index) {
+        const target = this.completeDiv.nativeElement.querySelectorAll('li')[index];
+        if (target) {
+            target.scrollIntoView({ block: 'center' });
+        }
+    }
+    syncCustomValue(text) {
+        this.value = text;
+        this.label = text;
+    }
+    /** Pick selection based on text filtering (ingnores drowdown state) */
+    pickSelectionOrFirstMatch(text) {
+        if (this.canAddNewValues) {
+            this.syncCustomValue(text);
+            return;
+        }
+        const focusIndex = this.completionList.findIndex((it) => this.focusItem && it.key === this.focusItem.key);
+        if (this.showCompletion &&
+            focusIndex > 0 &&
+            this.focusItem &&
+            this.focusItem.label) {
+            if (text === this.focusItem.label && this.focusItem.key === this.value) {
+                // do nothing if value does not change & close dropdow
+                this.showCompletion = false;
+                return;
+            }
+            // complete selected using selected item on drowdown
+            this.complete(this.focusItem);
+            return;
+        }
+        const source = (text || '').trim();
+        if (!source) {
+            this.showCompletion = false;
+            // select null value
+            if (this.value !== null) {
+                this.value = null;
+            }
+            return;
+        }
+        this.completionList = [];
+        this.computeCompletionList(source).subscribe((suggestions) => {
+            const candidate = suggestions && suggestions.length > 0 ? suggestions[0] : null;
+            this.complete(candidate);
+        });
+    }
+    showCompletionList(text) {
+        this.setSameWidth();
+        const useSpinner = this.hasExternalDataSource();
+        this.spinnerVisibility(useSpinner, true);
+        setTimeout(() => {
+            // for spinner to be shown
+            this.computeCompletionList(text).subscribe({
+                next: (cl) => {
+                    this.completionList = cl;
+                    this.focusItem = selectElement(this.completionList, text);
+                    this.showCompletion = true;
+                    this.spinnerVisibility(useSpinner, false);
+                },
+                error: () => {
+                    this.spinnerVisibility(useSpinner, false);
+                },
+                complete: () => {
+                    this.spinnerVisibility(useSpinner, false);
+                }
+            });
+        }, 1);
+    }
+    spinnerVisibility(useSpinner, value) {
+        if (useSpinner) {
+            this.showSpinner = value;
+        }
+    }
+    hasExternalDataSource() {
+        return !this.dataSource && !!this.instance && !!this.populateFunction;
+    }
+    computeCompletionList(text) {
+        const searchText = (text || '').toLowerCase();
+        if (this.dataSource) {
+            const ds = (this.dataSource || [])
+                .filter((it) => ignoreAccentsInclude(it.label, searchText))
+                .sort((a, b) => a.label.localeCompare(b.label));
+            return of(decorateDataSource(ds, searchText));
+        }
+        else if (this.instance && this.populateFunction) {
+            return this.populateFunction(this.instance, searchText).pipe(debounceTime(1), first(), map((ds) => {
+                const dsFiltered = ds
+                    .filter((it) => ignoreAccentsInclude(it.label, searchText))
+                    .sort((a, b) => a.label.localeCompare(b.label));
+                return decorateDataSource(dsFiltered, searchText);
+            }));
+        }
+        else {
+            return of([]);
+        }
+    }
+}
+AutocompleteComponent.idCounter = 0;
+AutocompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AutocompleteComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", 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>{{ item.labelPrefix }}</span>\n        <span class=\"bold\">{{ item.labelMatch }}</span>\n        <span>{{ 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}\n"], directives: [{ 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]" }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2.ResizedDirective, selector: "[resized]", outputs: ["resized"] }, { type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AutocompleteComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lux-autocomplete', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            multi: true,
+                            useExisting: forwardRef(() => AutocompleteComponent)
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            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>{{ item.labelPrefix }}</span>\n        <span class=\"bold\">{{ item.labelMatch }}</span>\n        <span>{{ 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}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { i0: [{
+                type: ViewChild,
+                args: ['i0', { static: true }]
+            }], completeDiv: [{
+                type: ViewChild,
+                args: ['completeDiv', { static: true }]
+            }], valueChange: [{
+                type: Output
+            }], dataSourceChange: [{
+                type: Output
+            }], inputId: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], canAddNewValues: [{
+                type: Input
+            }], keepOpenAfterDelete: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], dataSource: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], resolveLabelsFunction: [{
+                type: Input
+            }], populateFunction: [{
+                type: Input
+            }], instance: [{
+                type: Input
+            }] } });
+/** Returns true if text includes substring. No accents considered. Ignorecase */
+const ignoreAccentsInclude = (text, substring) => {
+    text = normalizedString(text).toLowerCase();
+    substring = normalizedString(substring).toLowerCase();
+    return text.includes(substring);
+};
+/** Returns a normalized string with no accents: used for comparison */
+const normalizedString = (a) => (a || '').normalize('NFD').replace(/[\u0300-\u036f]/g, '');
+const decorateDataSource = (dataSource, subString) => dataSource.map((it) => decorateItem(it, subString));
+const decorateItem = (item, tx) => {
+    const index = normalizedString(item.label)
+        .toLowerCase()
+        .indexOf(normalizedString(tx).toLowerCase());
+    const labelPrefix = index === -1 ? item.label : item.label.substr(0, index);
+    const labelMatch = index === -1 ? '' : item.label.substr(index, tx.length);
+    const labelPostfix = index === -1 ? '' : item.label.substr(index + tx.length);
+    const newItem = Object.assign(Object.assign({}, item), { labelPrefix,
+        labelMatch,
+        labelPostfix });
+    return newItem;
+};
+const findLabelForId = (data, id) => {
+    const found = data.find((it) => it.key === id);
+    return found ? found.label : null;
+};
+const selectElement = (completionList, label) => {
+    label = (label || '').toLowerCase();
+    if (!completionList || completionList.length === 0) {
+        return null;
+    }
+    if (completionList.length === 1) {
+        return completionList[0];
+    }
+    const found = completionList.find((it) => it.label.toLowerCase() === label);
+    return found || completionList[0];
+};
+
+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 = () => { };
+    }
+    set value(val) {
+        if (val === this._value) {
+            return;
+        }
+        const initialAndEmpty = isInitialAndEmpty(this._value, val);
+        this._value = val;
+        this.ensureLabelsForIds();
+        this.populateWith('');
+        this.onChange(this._value);
+        if (!initialAndEmpty) {
+            this.valueChange.emit(this._value);
+        }
+    }
+    get value() {
+        return this._value;
+    }
+    get lang() {
+        return this._lang;
+    }
+    set lang(l) {
+        if (l === this._lang) {
+            return;
+        }
+        if (Object.keys(this.literals).includes(l)) {
+            this._lang = l;
+        }
+        else {
+            this._lang = 'en';
+        }
+    }
+    writeValue(value) {
+        this.value = value;
+    }
+    registerOnChange(onChange) {
+        this.onChange = onChange;
+    }
+    registerOnTouched(onTouched) {
+        this.onTouched = onTouched;
+    }
+    markAsTouched() {
+        if (!this.touched && !this.disabled) {
+            this.onTouched();
+            this.touched = true;
+        }
+    }
+    setDisabledState(disabled) {
+        this.disabled = disabled;
+    }
+    // End ControlValueAccessor Interface
+    // Validator interface
+    registerOnValidatorChange() { }
+    validate(control) {
+        const value = control.value;
+        if (this.required &&
+            (value === '' || value === null || value === undefined)) {
+            return { required: { value, reason: 'Required field.' } };
+        }
+        return null;
+    }
+    // End of Validator interface
+    ngOnInit() {
+        this.inputId = this.inputId
+            ? this.inputId
+            : `autocompletelist${AutocompleteListComponent.idCounter++}`;
+        this.autoPopulate =
+            !!this.resolveLabelsFunction && !!this.populateFunction && this.instance;
+        this.ensureLabelsForIds();
+    }
+    ensureLabelsForIds() {
+        if (this.autoPopulate && this.resolveLabelsFunction) {
+            this.resolveLabelsFunction(this.instance, this._value)
+                .pipe(first())
+                .subscribe((data) => {
+                const res = [];
+                (this._value || []).map((id) => {
+                    const found = data.find((it) => it.key === id);
+                    if (found) {
+                        res.push(found.label);
+                    }
+                    else {
+                        res.push('(unset)');
+                    }
+                });
+                this.labels = res;
+            });
+        }
+        else if (this.dataSource) {
+            const res = [];
+            (this._value || []).map((id) => {
+                const found = this.dataSource.find((it) => it.key === id);
+                if (found) {
+                    res.push(found.label);
+                }
+                else {
+                    res.push('(unset)');
+                }
+            });
+            this.labels = res;
+        }
+        else {
+            this.labels = this._value.map((it) => (it ? it.toString() : '(unset)'));
+        }
+    }
+    removeAt(index) {
+        if (this._value.length > index) {
+            const key = this._value.splice(index, 1)[0];
+            const label = this.labels.splice(index, 1)[0];
+            this.internalDataSource.push({ key, label });
+        }
+        this.markAsTouched();
+    }
+    onValueChange() {
+        this.updateCanAdd();
+    }
+    onNewEntryChange(event, auto) {
+        if (event.key === 'Enter' && !!auto.value) {
+            this.addNew(auto);
+        }
+        else if (event.key === 'Delete' || event.key === 'Backspace') {
+            // todo
+        }
+        else {
+            this.populateWith(auto.label + event.key);
+        }
+        this.updateCanAdd();
+    }
+    populateWith(searchText) {
+        if (this.autoPopulate && this.populateFunction && this.instance) {
+            this.populateFunction(this.instance, searchText)
+                .pipe(first())
+                .subscribe((data) => {
+                this.internalDataSource = data.filter((it) => !(this._value || []).includes(it.key));
+            });
+        }
+        else if (this.dataSource) {
+            this.internalDataSource = this.dataSource.filter((it) => !(this._value || []).includes(it.key));
+        }
+    }
+    updateCanAdd() {
+        this.canAdd =
+            !this.disabled &&
+                this.auto &&
+                !!this.auto.value && // has value
+                !this.value.find((it) => it === this.auto.value); // not already in
+    }
+    addNew(auto) {
+        this.value.push(auto.value);
+        this.ensureLabelsForIds();
+        this.newEntry = '';
+        this.internalDataSource = this.internalDataSource.filter((it) => !this._value.includes(it.key));
+        this.markAsTouched();
+    }
+    getDeleteMessage(label) {
+        var _a;
+        return ((_a = this.deleteLabelTemplate) !== null && _a !== void 0 ? _a : this.literals[this.lang].deleteLabelTemplate).replace('<<label>>', label);
+    }
+}
+AutocompleteListComponent.idCounter = 0;
+AutocompleteListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AutocompleteListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AutocompleteListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", 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"], components: [{ type: AutocompleteComponent, selector: "lux-autocomplete", inputs: ["inputId", "disabled", "readonly", "label", "canAddNewValues", "keepOpenAfterDelete", "value", "dataSource", "required", "placeholder", "resolveLabelsFunction", "populateFunction", "instance"], outputs: ["valueChange", "dataSourceChange"] }], directives: [{ type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AutocompleteListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lux-autocomplete-list', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            multi: true,
+                            useExisting: forwardRef(() => AutocompleteListComponent)
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            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"] }]
+        }], propDecorators: { auto: [{
+                type: ViewChild,
+                args: ['auto']
+            }], value: [{
+                type: Input
+            }], lang: [{
+                type: Input
+            }], inputId: [{
+                type: Input
+            }], dataSource: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], deleteLabelTemplate: [{
+                type: Input
+            }], addMessage: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], resolveLabelsFunction: [{
+                type: Input
+            }], populateFunction: [{
+                type: Input
+            }], instance: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
+class LuxBreadcrumbComponent {
+    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
+            .pipe(filter((event) => event instanceof NavigationEnd))
+            .subscribe((_) => {
+            this.breadcrumbs = [];
+            this.addBreadcrumbs(this.activedRoute.snapshot.root, true, null);
+        }));
+    }
+    ngOnDestroy() {
+        this.subs.forEach((s) => s.unsubscribe());
+        this.subs = [];
+    }
+    addBreadcrumbs(activedRouteSnapshot, isRoot, urlPrefix) {
+        const routeConfig = activedRouteSnapshot.routeConfig;
+        let url = urlPrefix || '';
+        url += routeConfig ? '/' + this.getUrl(activedRouteSnapshot) : '';
+        const label = routeConfig
+            ? this.getLabel(activedRouteSnapshot)
+            : isRoot
+                ? 'Home'
+                : '';
+        if (label && url !== '/') {
+            const breadcrumb = { label, url };
+            this.breadcrumbs.push(breadcrumb);
+        }
+        if (activedRouteSnapshot.children.length) {
+            this.addBreadcrumbs(activedRouteSnapshot.children[0], false, url);
+        }
+    }
+    getUrl(activedRouteSnapshot) {
+        if (!activedRouteSnapshot.url[0]) {
+            return '';
+        }
+        const id = activedRouteSnapshot.params.id;
+        return id
+            ? `${activedRouteSnapshot.url[0]}/${id}`
+            : activedRouteSnapshot.routeConfig.path || '';
+    }
+    getLabel(activedRouteSnapshot) {
+        const routeConfig = activedRouteSnapshot.routeConfig;
+        if (!routeConfig) {
+            return null;
+        }
+        if (activedRouteSnapshot.data && activedRouteSnapshot.data.title) {
+            const data = activedRouteSnapshot.data;
+            if (data.objectTitle) {
+                return `${data.title} ${data.objectTitle}`;
+            }
+            else {
+                return data.title;
+            }
+        }
+        return activedRouteSnapshot.params.id || routeConfig.path;
+    }
+}
+LuxBreadcrumbComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: LuxBreadcrumbComponent, deps: [{ token: i1$1.Router }, { token: i1$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
+LuxBreadcrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", 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"], directives: [{ type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", 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$1.Router }, { type: i1$1.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 = () => { };
+    }
+    set lang(l) {
+        if (l === this._lang) {
+            return;
+        }
+        if (Object.keys(this.literals).includes(l)) {
+            this._lang = l;
+        }
+        else {
+            this._lang = 'en';
+        }
+    }
+    get lang() {
+        return this._lang;
+    }
+    get value() {
+        return this.internalValue;
+    }
+    set value(v) {
+        if (this.internalValue === v) {
+            return;
+        }
+        const initialAndEmpty = isInitialAndEmpty(this.internalValue, v);
+        this.internalValue = v;
+        this.syncModel();
+        this.onChange(v);
+        if (!initialAndEmpty) {
+            this.valueChange.emit(v);
+        }
+    }
+    get tabindexValue() {
+        return this.disabled ? null : '0';
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(v) {
+        if (v === this._disabled) {
+            return;
+        }
+        this._disabled = v;
+        this.syncModel();
+    }
+    writeValue(value) {
+        this.value = !!value;
+    }
+    registerOnChange(onChange) {
+        this.onChange = onChange;
+    }
+    registerOnTouched(onTouched) {
+        this.onTouched = onTouched;
+    }
+    markAsTouched() {
+        if (!this.touched) {
+            this.onTouched();
+            this.touched = true;
+        }
+    }
+    setDisabledState(disabled) {
+        this.disabled = disabled;
+    }
+    // End ControlValueAccessor Interface
+    ngOnInit() {
+        this.inputId = this.inputId
+            ? this.inputId
+            : `${this.name || 'checkbox'}$${CheckboxComponent.idCounter++}`;
+    }
+    ngAfterViewInit() {
+        this.syncModel();
+    }
+    clicked() {
+        if (!this.disabled) {
+            this.value = !this.internalValue;
+            this.markAsTouched();
+        }
+    }
+    onKey(event) {
+        if (event.key === KEY_SPACE && !this.disabled) {
+            this.value = !this.internalValue;
+            this.markAsTouched();
+            event.preventDefault();
+        }
+    }
+    syncModel() {
+        if (this.ck) {
+            this.ck.nativeElement.checked = this.internalValue;
+        }
+    }
+}
+CheckboxComponent.idCounter = 0;
+CheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", 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"], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: CheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lux-checkbox', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            multi: true,
+                            useExisting: forwardRef(() => CheckboxComponent)
+                        }
+                    ], template: "<div class=\"switch\">\n  <div>\n    <label *ngIf=\"label\" [for]=\"inputId\">{{ label }}</label>\n  </div>\n  <div *ngIf=\"!disabled\" class=\"switch-item\" (click)=\"clicked()\">\n    <input #ck [name]=\"name\" type=\"checkbox\" [id]=\"inputId\" />\n    <div\n      class=\"slider round\"\n      [class.on]=\"value\"\n      [class.disabled]=\"disabled\"\n      [tabindex]=\"tabindexValue\"\n      (keyup)=\"onKey($event)\"\n    ></div>\n  </div>\n  <div>\n    <span class=\"checkbox-label\" *ngIf=\"value\">{{\n      literals[lang].yesLabel\n    }}</span>\n    <span class=\"checkbox-label\" *ngIf=\"!value\">{{\n      literals[lang].noLabel\n    }}</span>\n  </div>\n</div>\n", styles: [".switch{display:flex;flex-flow:row wrap;align-items:center}label{padding-right:1.1rem}.switch-item{padding-right:.5em}.slider.round{border-radius:.7rem;width:3.1rem;height:1.4rem}.slider.round:before{border-radius:50%}.switch input{opacity:0;width:0;height:0}.slider{cursor:pointer;position:relative;top:-.7rem;background-color:#ccc;transition:.4s}.slider.on{background-color:#2196f3}.slider:before{position:absolute;content:\"\";height:1rem;width:1rem;left:.2rem;bottom:.2rem;background-color:#fff;transition:.4s}.slider.on:before{transform:translate(26px)}input:focus+.slider{box-shadow:0 0 1px #2196f3}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { ck: [{
+                type: ViewChild,
+                args: ['ck', { static: false }]
+            }], lang: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], inputId: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
+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 = () => { };
+    }
+    get className() {
+        return this.checkClassName();
+    }
+    set disabled(v) {
+        v = typeof v === 'string' && v !== 'false' ? true : v;
+        this._disabled = v;
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    set required(v) {
+        this._required = v;
+    }
+    get required() {
+        return this._required;
+    }
+    set value(v) {
+        if (v === this._value) {
+            return; // prevent events when there is no changes
+        }
+        const initialAndEmpty = isInitialAndEmpty(this._value, v);
+        const datetime = new Date(v);
+        if (!v) {
+            this._value = null;
+            this.setDateInControl(null);
+            this.setTimeInControl(null);
+        }
+        else if (!isValidDate(datetime)) {
+            this._value = v;
+            // we don't set value in control if the value is not valid
+            // if we do, the content of the control changes and can erase what the user is typing
+        }
+        else {
+            this._value = datetime.toISOString(); // YYYY-MM-DDThh:mm:ss.SSSZ
+            this.setValueInControl(datetime);
+        }
+        this.onChange(v);
+        if (!initialAndEmpty) {
+            this.valueChange.emit(v);
+        }
+    }
+    get value() {
+        return this._value;
+    }
+    // ControlValueAccessor Interface implementation
+    writeValue(value) {
+        this.value = value;
+    }
+    registerOnChange(onChange) {
+        this.onChange = onChange;
+    }
+    registerOnTouched(onTouched) {
+        this.onTouched = onTouched;
+    }
+    markAsTouched() {
+        if (!this.touched) {
+            this.onTouched();
+            this.touched = true;
+        }
+    }
+    setDisabledState(disabled) {
+        this.disabled = disabled;
+    }
+    // End of ControlValueAccessor Interface implementation
+    setDateInControl(date) {
+        // this.dateInput.nativeElement.value = date;
+        this.dateValue = date;
+    }
+    setTimeInControl(time) {
+        // this.timeInput.nativeElement.value = time;
+        this.timeValue = time;
+    }
+    setValueInControl(datetime) {
+        const offsetDatetime = this.localTime
+            ? addTimezoneOffset(datetime)
+            : datetime;
+        const offsetDatetimeString = offsetDatetime.toISOString(); // YYYY-MM-DDThh:mm:ss.SSSZ
+        this.setDateInControl(offsetDatetimeString.slice(0, 10)); // YYYY-MM-DD
+        if (this.includeSeconds) {
+            this.setTimeInControl(offsetDatetimeString.slice(11, 19)); // hh:mm:ss
+        }
+        else {
+            this.setTimeInControl(offsetDatetimeString.slice(11, 16)); // hh:mm
+        }
+    }
+    clear() {
+        this.setDateInControl(null);
+        this.setTimeInControl(null);
+        this.value = null;
+    }
+    isClearable() {
+        return hasValue(this.value);
+    }
+    // Validator interface
+    registerOnValidatorChange() { }
+    validate(control) {
+        const value = control.value;
+        let result = null;
+        if (this.required &&
+            !hasValue(value) &&
+            !hasValue(this.dateValue) &&
+            !hasValue(this.timeValue)) {
+            result = result || {};
+            result.required = { value, reason: 'Required field.' };
+        }
+        if (!hasValue(this.dateValue) && hasValue(this.timeValue)) {
+            result = result || {};
+            result.existsDate = {
+                value,
+                reason: 'Date not specified.'
+            };
+        }
+        if (hasValue(this.dateValue) && !hasValue(this.timeValue)) {
+            result = result || {};
+            result.existsTime = {
+                value,
+                reason: 'Time not specified.'
+            };
+        }
+        if (hasValue(this.min) &&
+            hasValue(value) &&
+            hasValue(this.dateValue) &&
+            hasValue(this.timeValue) &&
+            String(value).localeCompare(this.min) === -1) {
+            result = result || {};
+            result.min = {
+                value,
+                min: this.min,
+                reason: `Value is lower than minimum value: ${this.min}.`
+            };
+        }
+        if (hasValue(this.max) &&
+            hasValue(value) &&
+            hasValue(this.dateValue) &&
+            hasValue(this.timeValue) &&
+            String(value).localeCompare(this.max) !== -1) {
+            result = result || {};
+            result.max = {
+                value,
+                max: this.max,
+                reason: `Value is greater than than maximum value: ${this.max}.`
+            };
+        }
+        this.lastErrors = result;
+        return result;
+    }
+    // End of Validator interface
+    ngOnInit() {
+        this.inputId = this.inputId
+            ? this.inputId
+            : `datetime$${DatetimeComponent.idCounter++}`;
+        this.setPatterns();
+    }
+    onLostFocus() {
+        this.markAsTouched();
+    }
+    onKeyPress(event) {
+        this.keyPress.emit(event);
+    }
+    onEventDatetime(newDate, newTime) {
+        if (this.disabled || this.readonly) {
+            return;
+        }
+        const newValue = '' + newDate + ' ' + newTime;
+        if (!newValue) {
+            this.value = null;
+        }
+        else {
+            const datetime = new Date(newValue);
+            if (isValidDate(datetime)) {
+                let datetimeString;
+                if (this.localTime) {
+                    datetimeString = datetime.toISOString(); // YYYY-MM-DDThh:mm:ss.SSSZ
+                }
+                else {
+                    datetimeString = addTimezoneOffset(datetime).toISOString(); // YYYY-MM-DDThh:mm:ss.SSSZ
+                }
+                if (this.includeSeconds) {
+                    this.value = datetimeString.slice(0, 19) + 'Z'; // YYYY-MM-DDThh:mm:ssZ
+                }
+                else {
+                    this.value = datetimeString.slice(0, 16) + 'Z'; // YYYY-MM-DDThh:mmZ
+                }
+            }
+            else {
+                this.value = newValue;
+            }
+        }
+    }
+    checkClassName() {
+        return this.disabled
+            ? this.readonly
+                ? 'disabled readonly'
+                : 'disabled'
+            : this.readonly
+                ? 'readonly'
+                : '';
+    }
+    setPatterns() {
+        this.min = this.min || '1900-01-01';
+        this.max = this.max || '2100-01-01';
+    }
+}
+DatetimeComponent.idCounter = 0;
+DatetimeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: DatetimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DatetimeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", 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"], directives: [{ 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]" }, { type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: DatetimeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lux-datetime', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            multi: true,
+                            useExisting: forwardRef(() => DatetimeComponent)
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            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"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { dateInput: [{
+                type: ViewChild,
+                args: ['dateInput', { static: true }]
+            }], timeInput: [{
+                type: ViewChild,
+                args: ['timeInput', { static: true }]
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], includeSeconds: [{
+                type: Input
+            }], localTime: [{
+                type: Input
+            }], lang: [{
+                type: Input
+            }], inlineErrors: [{
+                type: Input
+            }], inputId: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input,
+                args: ['aria-label']
+            }], readonly: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], keyPress: [{
+                type: Output
+            }] } });
+
+/** 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();
+    }
+    /** Search value introduced by the user. */
+    get searchValue() {
+        return this._searchValue;
+    }
+    set searchValue(v) {
+        v = (v || '').toString();
+        if (v === this._searchValue) {
+            return;
+        }
+        this.onChange(v);
+        this._searchValue = v;
+    }
+    /** Debounce time in milliseconds. (defaults to 300 ms) */
+    set debounce(val) {
+        this.debounceValue = val;
+        this.recreateObservable();
+    }
+    get debounce() {
+        return this.debounceValue;
+    }
+    writeValue(value) {
+        this.searchValue = (value || '').toString();
+    }
+    registerOnChange(onChange) {
+        this.onChange = onChange;
+    }
+    registerOnTouched(onTouched) {
+        this.onTouched = onTouched;
+    }
+    markAsTouched() {
+        if (!this.touched) {
+            this.onTouched();
+            this.touched = true;
+        }
+    }
+    setDisabledState(disabled) {
+        this.disabled = disabled;
+    }
+    // End ControlValueAccessor Interface
+    ngOnInit() {
+        this.inputId = this.inputId
+            ? this.inputId
+            : `filter$${FilterComponent.idCounter++}`;
+    }
+    ngOnDestroy() {
+        this.freeSubscriptions();
+    }
+    clear() {
+        this.searchValue = '';
+        this.search();
+    }
+    search() {
+        this.searchValueChange.emit(this.searchValue);
+    }
+    keyup(event, newValue) {
+        this.markAsTouched();
+        this.searchValue = newValue;
+        if (event.key === 'Enter') {
+            this.searchNow(this.searchValue);
+        }
+        if (this.searchOnType) {
+            this.addEvent();
+        }
+    }
+    onInputValueChange(newValue) {
+        this.markAsTouched();
+        this.searchValue = newValue;
+    }
+    recreateObservable() {
+        this.searchValue$ = this.subject
+            .asObservable()
+            .pipe(debounceTime(this.debounce));
+        this.freeSubscriptions();
+        this.sub = this.searchValue$.subscribe((value) => {
+            this.searchValueChange.emit(value);
+        });
+    }
+    freeSubscriptions() {
+        if (this.sub) {
+            this.sub.unsubscribe();
+            this.sub = null;
+        }
+    }
+    searchNow(value) {
+        this.searchValueChange.emit(value);
+    }
+    addEvent() {
+        this.subject.next(this.searchValue);
+    }
+}
+FilterComponent.idCounter = 0;
+FilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", 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"], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lux-filter', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            multi: true,
+                            useExisting: forwardRef(() => FilterComponent)
+                        }
+                    ], template: "<div class=\"filter\">\n  <input\n    #i0\n    type=\"text\"\n    [attr.aria-label]=\"ariaLabel\"\n    [placeholder]=\"placeholder\"\n    [id]=\"inputId\"\n    [disabled]=\"disabled\"\n    [value]=\"searchValue\"\n    (valueChange)=\"onInputValueChange(i0.value)\"\n    (keyup)=\"keyup($event, i0.value)\"\n  />\n\n  <button\n    [class.hide]=\"!searchValue\"\n    aria-label=\"Clear\"\n    class=\"clear-indicator icon icon-clear\"\n    type=\"button\"\n    (click)=\"clear()\"\n  ></button>\n  <i *ngIf=\"1 || searchOnType\" class=\"search-indicator icon icon-search\"></i>\n  <button\n    class=\"btn-search\"\n    *ngIf=\"!searchOnType\"\n    type=\"button\"\n    [disabled]=\"disabled\"\n    (click)=\"search()\"\n  >\n    Search\n  </button>\n</div>\n", styles: [":focus{z-index:1}input,select,textarea{border: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"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { disabled: [{
+                type: Input
+            }], inputId: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], searchValue: [{
+                type: Input
+            }], searchOnType: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input,
+                args: ['aria-label']
+            }], debounce: [{
+                type: Input
+            }], searchValueChange: [{
+                type: Output
+            }] } });
+
+class ActiveModal {
+    close(result) { }
+    dismiss(reason) { }
+}
+class ModalRef {
+    constructor(_windowCmptRef, _contentRef, _backdropCmptRef, _beforeDismiss) {
+        this._windowCmptRef = _windowCmptRef;
+        this._contentRef = _contentRef;
+        this._backdropCmptRef = _backdropCmptRef;
+        this._beforeDismiss = _beforeDismiss;
+        _windowCmptRef.instance.dismissEvent.subscribe((reason) => {
+            this.dismiss(reason);
+        });
+        this.result = new Promise((resolve, reject) => {
+            this._resolve = resolve;
+            this._reject = reject;
+        });
+        this.result.then(null, () => { });
+    }
+    /**
+     * 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.
+     *
+     * The `NgbMobalRef.result` promise will be resolved with the provided value.
+     */
+    close(result) {
+        if (this._windowCmptRef) {
+            if (this._resolve) {
+                this._resolve(result);
+            }
+            this._removeModalElements();
+        }
+    }
+    _dismiss(reason) {
+        if (this._reject) {
+            this._reject(reason);
+        }
+        this._removeModalElements();
+    }
+    /**
+     * Dismisses the modal with an optional `reason` value.
+     *
+     * The `NgbModalRef.result` promise will be rejected with the provided value.
+     */
+    dismiss(reason) {
+        if (this._windowCmptRef) {
+            if (!this._beforeDismiss) {
+                this._dismiss(reason);
+            }
+            else {
+                const dismiss = this._beforeDismiss();
+                if (dismiss && dismiss.then) {
+                    dismiss.then((result) => {
+                        if (result !== false) {
+                            this._dismiss(reason);
+                        }
+                    }, () => { });
+                }
+                else if (dismiss !== false) {
+                    this._dismiss(reason);
+                }
+            }
+        }
+    }
+    _removeModalElements() {
+        const windowNativeEl = this._windowCmptRef.location.nativeElement;
+        windowNativeEl.parentNode.removeChild(windowNativeEl);
+        this._windowCmptRef.destroy();
+        if (this._backdropCmptRef) {
+            const backdropNativeEl = this._backdropCmptRef.location.nativeElement;
+            backdropNativeEl.parentNode.removeChild(backdropNativeEl);
+            this._backdropCmptRef.destroy();
+        }
+        if (this._contentRef && this._contentRef.viewRef) {
+            this._contentRef.viewRef.destroy();
+        }
+        this._windowCmptRef = null;
+        this._backdropCmptRef = null;
+        this._contentRef = null;
+    }
+}
+
+const FOCUS = 'focus';
+var Key;
+(function (Key) {
+    Key[Key["Tab"] = 9] = "Tab";
+    Key[Key["Enter"] = 13] = "Enter";
+    Key[Key["Escape"] = 27] = "Escape";
+    Key[Key["Space"] = 32] = "Space";
+    Key[Key["PageUp"] = 33] = "PageUp";
+    Key[Key["PageDown"] = 34] = "PageDown";
+    Key[Key["End"] = 35] = "End";
+    Key[Key["Home"] = 36] = "Home";
+    Key[Key["ArrowLeft"] = 37] = "ArrowLeft";
+    Key[Key["ArrowUp"] = 38] = "ArrowUp";
+    Key[Key["ArrowRight"] = 39] = "ArrowRight";
+    Key[Key["ArrowDown"] = 40] = "ArrowDown";
+})(Key || (Key = {}));
+const isDefined = (value) => value !== undefined && value !== null;
+class ContentRef {
+    constructor(nodes, viewRef, componentRef) {
+        this.nodes = nodes;
+        this.viewRef = viewRef;
+        this.componentRef = componentRef;
+    }
+}
+const FOCUSABLE_ELEMENTS_SELECTOR = [
+    'a[href]',
+    'button:not([disabled])',
+    'input:not([disabled]):not([type="hidden"])',
+    'select:not([disabled])',
+    'textarea:not([disabled])',
+    '[contenteditable]',
+    '[tabindex]:not([tabindex="-1"])'
+].join(', ');
+/**
+ * Returns first and last focusable elements inside of a given element based on specific CSS selector
+ */
+const getFocusableBoundaryElements = (element) => {
+    const list = Array.from(element.querySelectorAll(FOCUSABLE_ELEMENTS_SELECTOR)).filter((el) => el.tabIndex !== -1);
+    return [list[0], list[list.length - 1]];
+};
+/**
+ * Function that enforces browser focus to be trapped inside a DOM element.
+ *
+ * Works only for clicks inside the element and navigation with 'Tab', ignoring clicks outside of the element
+ *
+ * @param element The element around which focus will be trapped inside
+ * @param stopFocusTrap$ The observable stream. When completed the focus trap will clean up listeners
+ * and free internal resources
+ * @param refocusOnClick Put the focus back to the last focused element whenever a click occurs on element (default to
+ * false)
+ */
+const focusTrap = (element, stopFocusTrap$, refocusOnClick = false) => {
+    // last focused element
+    const lastFocusedElement$ = fromEvent(element, 'focusin').pipe(takeUntil(stopFocusTrap$), map((e) => e.target));
+    // 'tab' / 'shift+tab' stream
+    fromEvent(element, 'keydown')
+        .pipe(takeUntil(stopFocusTrap$), 
+    /* eslint-disable import/no-deprecated */
+    filter((e) => e.which === Key.Tab), 
+    /* eslint-enable import/no-deprecated */
+    withLatestFrom(lastFocusedElement$))
+        .subscribe(([tabEvent, focusedElement]) => {
+        const [first, last] = getFocusableBoundaryElements(element);
+        if ((focusedElement === first || focusedElement === element) &&
+            tabEvent.shiftKey) {
+            last.focus();
+            tabEvent.preventDefault();
+        }
+        if (focusedElement === last && !tabEvent.shiftKey) {
+            first.focus();
+            tabEvent.preventDefault();
+        }
+    });
+    // inside click
+    if (refocusOnClick) {
+        fromEvent(element, 'click')
+            .pipe(takeUntil(stopFocusTrap$), withLatestFrom(lastFocusedElement$), map((arr) => arr[1]))
+            .subscribe((lastFocusedElement) => lastFocusedElement.focus());
+    }
+};
+
+var ModalDismissReasons;
+(function (ModalDismissReasons) {
+    ModalDismissReasons[ModalDismissReasons["BackdropClick"] = 0] = "BackdropClick";
+    ModalDismissReasons[ModalDismissReasons["Esc"] = 1] = "Esc";
+})(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;
+    }
+    get class() {
+        return `modal ${this.windowClass || ''}`;
+    }
+    get hostAriaLabelledBy() {
+        return this.ariaLabelledBy;
+    }
+    get hostAriaDescribedBy() {
+        return this.ariaDescribedBy;
+    }
+    backdropClick(btn) {
+        if (this.backdrop === true && this._elRef.nativeElement === btn) {
+            this.dismiss(ModalDismissReasons.BackdropClick);
+        }
+    }
+    escKey(event) {
+        if (this.keyboard && !event.defaultPrevented) {
+            this.dismiss(ModalDismissReasons.Esc);
+        }
+    }
+    dismiss(reason) {
+        this.dismissEvent.emit(reason);
+    }
+    ngOnInit() {
+        this._elWithFocus = this._document.activeElement;
+    }
+    ngAfterViewInit() {
+        if (!this._elRef.nativeElement.contains(document.activeElement)) {
+            const firstFocusable = getFocusableBoundaryElements(this._elRef.nativeElement)[0];
+            const elementToFocus = firstFocusable || this._elRef.nativeElement;
+            elementToFocus.focus();
+        }
+    }
+    ngOnDestroy() {
+        const body = this._document.body;
+        const elWithFocus = this._elWithFocus;
+        let elementToFocus;
+        if (elWithFocus && elWithFocus[FOCUS] && body.contains(elWithFocus)) {
+            elementToFocus = elWithFocus;
+        }
+        else {
+            elementToFocus = body;
+        }
+        elementToFocus.focus();
+        this._elWithFocus = null;
+    }
+}
+LuxModalWindowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: LuxModalWindowComponent, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+LuxModalWindowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", 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: "13.1.1", ngImport: i0, type: LuxModalWindowComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'lux-modal-window',
+                    template: `
+    <div class="modal-dialog" role="document">
+      <div class="modal-content"><ng-content></ng-content></div>
+    </div>
+  `
+                }]
+        }], ctorParameters: function () {
+        return [{ type: undefined, decorators: [{
+                        type: Inject,
+                        args: [DOCUMENT]
+                    }] }, { type: i0.ElementRef }];
+    }, propDecorators: { ariaDescribedBy: [{
+                type: Input
+            }], ariaLabelledBy: [{
+                type: Input
+            }], backdrop: [{
+                type: Input
+            }], keyboard: [{
+                type: Input
+            }], windowClass: [{
+                type: Input
+            }], dismissEvent: [{
+                type: Output
+            }], class: [{
+                type: HostBinding,
+                args: ['class']
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], tabindex: [{
+                type: HostBinding,
+                args: ['tabindex']
+            }], ariamodal: [{
+                type: HostBinding,
+                args: ['attr.aria-modal']
+            }], hostAriaLabelledBy: [{
+                type: HostBinding,
+                args: ['attr.aria-labelledby']
+            }], hostAriaDescribedBy: [{
+                type: HostBinding,
+                args: ['attr.aria-describedby']
+            }], backdropClick: [{
+                type: HostListener,
+                args: ['click', ['$event.target']]
+            }], escKey: [{
+                type: HostListener,
+                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: "13.1.1", ngImport: i0, type: LuxModalBackdropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+LuxModalBackdropComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", 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: "13.1.1", 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: "13.1.1", ngImport: i0, type: LuxModalConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+LuxModalConfig.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: LuxModalConfig, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: LuxModalConfig, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class ModalStack {
+    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];
+                focusTrap(activeWindowCmpt.location.nativeElement, this._activeWindowCmptHasChanged);
+                this._revertAriaHidden();
+                this._setAriaHidden(activeWindowCmpt.location.nativeElement);
+            }
+        });
+    }
+    open(moduleCFR, content, options) {
+        const config = Object.assign({}, this.modalConfig, options);
+        const containerEl = this._document.body;
+        const renderer = this._rendererFactory.createRenderer(null, null);
+        const removeBodyClass = () => {
+            if (!this._modalRefs.length) {
+                renderer.removeClass(this._document.body, 'modal-open');
+                this._revertAriaHidden();
+            }
+        };
+        const activeModal = new ActiveModal();
+        const contentRef = this.getContentRef(moduleCFR, content, activeModal);
+        const backdropCmptRef = config.backdrop ? this._attachBackdrop(moduleCFR, containerEl) : null;
+        const windowCmptRef = this._attachWindowComponent(moduleCFR, containerEl, contentRef);
+        const modalRef = new ModalRef(windowCmptRef, contentRef, backdropCmptRef);
+        this._registerModalRef(modalRef);
+        this._registerWindowCmpt(windowCmptRef);
+        modalRef.result.then(removeBodyClass, removeBodyClass);
+        activeModal.close = (result) => {
+            modalRef.close(result);
+        };
+        activeModal.dismiss = (reason) => {
+            modalRef.dismiss(reason);
+        };
+        this._applyWindowOptions(windowCmptRef.instance, config);
+        if (this._modalRefs.length === 1) {
+            renderer.addClass(this._document.body, 'modal-open');
+        }
+        if (backdropCmptRef && backdropCmptRef.instance) {
+            this._applyBackgroundOptions(backdropCmptRef.instance, config);
+            backdropCmptRef.changeDetectorRef.detectChanges();
+        }
+        windowCmptRef.changeDetectorRef.detectChanges();
+        return modalRef;
+    }
+    _applyWindowOptions(windowInstance, config) {
+        this._windowAttributes.forEach((optionName) => {
+            if (isDefined(config[optionName])) {
+                windowInstance[optionName] = config[optionName];
+            }
+        });
+    }
+    _applyBackgroundOptions(backgroudInstance, config) {
+        this._backdropAttributes.forEach((optionName) => {
+            if (isDefined(config[optionName])) {
+                backgroudInstance[optionName] = config[optionName];
+            }
+        });
+    }
+    _revertAriaHidden() {
+        this._ariaHiddenValues.forEach((value, element) => {
+            if (value) {
+                element.setAttribute('aria-hidden', value);
+            }
+            else {
+                element.removeAttribute('aria-hidden');
+            }
+        });
+        this._ariaHiddenValues.clear();
+    }
+    getContentRef(moduleCFR, content, activeModal) {
+        if (content instanceof TemplateRef) {
+            return this.createFromTemplateRef(content, activeModal);
+        }
+    }
+    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);
+            }
+        };
+        const viewRef = content.createEmbeddedView(context);
+        this._applicationRef.attachView(viewRef);
+        return new ContentRef([viewRef.rootNodes], viewRef);
+    }
+    _attachBackdrop(moduleCFR, containerEl) {
+        const backdropFactory = moduleCFR.resolveComponentFactory(LuxModalBackdropComponent);
+        const backdropCmptRef = backdropFactory.create(this._injector);
+        this._applicationRef.attachView(backdropCmptRef.hostView);
+        containerEl.appendChild(backdropCmptRef.location.nativeElement);
+        return backdropCmptRef;
+    }
+    _attachWindowComponent(moduleCFR, containerEl, contentRef) {
+        const windowFactory = moduleCFR.resolveComponentFactory(LuxModalWindowComponent);
+        const windowCmptRef = windowFactory.create(this._injector, contentRef.nodes);
+        this._applicationRef.attachView(windowCmptRef.hostView);
+        containerEl.appendChild(windowCmptRef.location.nativeElement);
+        return windowCmptRef;
+    }
+    _registerModalRef(modalRef) {
+        const unregisterModalRef = () => {
+            const index = this._modalRefs.indexOf(modalRef);
+            if (index > -1) {
+                this._modalRefs.splice(index, 1);
+            }
+        };
+        this._modalRefs.push(modalRef);
+        modalRef.result.then(unregisterModalRef, unregisterModalRef);
+    }
+    _registerWindowCmpt(windowCmpt) {
+        this._windowCmpts.push(windowCmpt);
+        this._activeWindowCmptHasChanged.next(null);
+        windowCmpt.onDestroy(() => {
+            const index = this._windowCmpts.indexOf(windowCmpt);
+            if (index > -1) {
+                this._windowCmpts.splice(index, 1);
+                this._activeWindowCmptHasChanged.next(null);
+            }
+        });
+    }
+    _setAriaHidden(element) {
+        const parent = element.parentElement;
+        if (parent && element !== this._document.body) {
+            Array.from(parent.children).forEach((sibling) => {
+                if (sibling !== element && sibling.nodeName !== 'SCRIPT') {
+                    this._ariaHiddenValues.set(sibling, sibling.getAttribute('aria-hidden'));
+                    sibling.setAttribute('aria-hidden', 'true');
+                }
+            });
+            this._setAriaHidden(parent);
+        }
+    }
+}
+ModalStack.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", 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: "13.1.1", ngImport: i0, type: ModalStack, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ModalStack, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: function () {
+        return [{ type: i0.ApplicationRef }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [DOCUMENT]
+                    }] }, { type: i0.Injector }, { type: i0.RendererFactory2 }, { type: LuxModalConfig }];
+    } });
+
+/**
+ * A service that it allow open an close modal components
+ */
+class ModalService {
+    constructor(modalStack, moduleCFR) {
+        this.modalStack = modalStack;
+        this.moduleCFR = moduleCFR;
+    }
+    /**Open a modal component
+     * @param content TemplateRef
+     */
+    open(content, options = {}) {
+        return this.modalStack.open(this.moduleCFR, content, options);
+    }
+}
+ModalService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ModalService, deps: [{ token: ModalStack }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Injectable });
+ModalService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ModalService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ModalService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: function () { return [{ type: ModalStack }, { type: i0.ComponentFactoryResolver }]; } });
+
+class GeolocationService {
+    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()
+            .pipe(distinctUntilChanged());
+        this.currentQuery$ = typed$.pipe(debounceTime(this.debouncePeriodMs), switchMap((currentQuery) => {
+            const data = this.getFromCache(currentQuery);
+            if (data !== undefined) {
+                return of(data);
+            }
+            // Nominatim search documentation:
+            // https://nominatim.org/release-docs/develop/api/Search/
+            const url = 'https://nominatim.openstreetmap.org/search?format=json&limit=20&q=' +
+                encodeURIComponent(currentQuery);
+            const headers = {
+                'Content-Type': 'application/json'
+            };
+            this.addToCache(currentQuery, []);
+            return this.http.get(url, { headers }).pipe(map((response) => {
+                const searchResults = response;
+                const uniqueResults = distinct(searchResults);
+                return this.addToCache(currentQuery, uniqueResults);
+            }));
+        }));
+    }
+    searchGeolocation(query) {
+        this.currentSearch$.next(query);
+        return this.currentQuery$;
+    }
+    getLabels(instance, keys) {
+        const searchResults = instance.lastQueriesWithResults
+            .get(instance.getLatestQuery())
+            .filter((searchResult) => samePosition(searchResult, keys));
+        return of(searchResults.map((searchResult) => {
+            const key = {
+                type: 'Point',
+                coordinates: [searchResult.lon, searchResult.lat]
+            };
+            return {
+                key,
+                label: searchResult.display_name
+            };
+        }));
+    }
+    getData(instance, search) {
+        return instance.searchGeolocation(search).pipe(map((searchResults) => searchResults.map((searchResult) => {
+            const key = {
+                type: 'Point',
+                coordinates: [searchResult.lon, searchResult.lat]
+            };
+            const label = searchResult.display_name;
+            return { key, label };
+        })));
+    }
+    // Cache implemementation ---
+    getFromCache(query) {
+        if (this.lastQueriesWithResults.has(query)) {
+            return this.lastQueriesWithResults.get(query);
+        }
+        return undefined;
+    }
+    addToCache(query, data) {
+        if (this.lastQueriesWithResults.keys.length >= this.cacheSize) {
+            const deletedQuery = this.lastQueriesLru[0];
+            this.revomeFromCache(deletedQuery);
+        }
+        this.lastQueriesWithResults.set(query, data);
+        this.lastQueriesLru.push(query);
+        return data;
+    }
+    revomeFromCache(query) {
+        this.lastQueriesWithResults.delete(query);
+        const index = this.lastQueriesLru.findIndex((it) => it === query);
+        this.lastQueriesLru.splice(index, 1);
+    }
+    getLatestQuery() {
+        return this.lastQueriesLru.length
+            ? this.lastQueriesLru[this.lastQueriesLru.length - 1]
+            : null;
+    }
+}
+GeolocationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: GeolocationService, deps: [{ token: i1$2.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+GeolocationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: GeolocationService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: GeolocationService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: function () { return [{ type: i1$2.HttpClient }]; } });
+const samePosition = (searchResult, keys) => {
+    let found = false;
+    keys.forEach((item) => {
+        if (searchResult.lon === item.coordinates[0] &&
+            searchResult.lat === item.coordinates[1]) {
+            found = true;
+        }
+    });
+    return found;
+};
+const distinct = (data) => {
+    const unique = {};
+    return data.filter((r) => {
+        if (unique[r.display_name]) {
+            return false;
+        }
+        unique[r.display_name] = 1;
+        return true;
+    });
+};
+
+let openLayersIsInstalled = false;
+class OpenLayerLoaderService {
+    load() {
+        if (window.ol) {
+            return of(true);
+        }
+        const openLayerJsUrl = 'https://openlayers.org/en/v5.3.0/build/ol.js';
+        const openLayerCssUrl = 'https://openlayers.org/en/v5.3.0/css/ol.css';
+        if (!openLayersIsInstalled) {
+            openLayersIsInstalled = true; // only try to install it once
+            loadCss(openLayerCssUrl, () => { });
+            return from(new Promise((resolve, _) => {
+                loadScript(openLayerJsUrl, () => resolve(true));
+            }));
+        }
+        return of(true);
+    }
+}
+OpenLayerLoaderService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: OpenLayerLoaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+OpenLayerLoaderService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: OpenLayerLoaderService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: OpenLayerLoaderService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+/** Dynamically load a script from url and return a callback */
+const loadScript = (url, callback) => {
+    const script = document.createElement('script');
+    script.type = 'text/javascript';
+    if (script.readyState) {
+        // for old IE
+        script.onreadystatechange = () => {
+            if (script.readyState === 'loaded' || script.readyState === 'complete') {
+                script.onreadystatechange = null;
+                callback();
+            }
+        };
+    }
+    else {
+        // Others browsers
+        script.onload = () => {
+            callback();
+        };
+    }
+    script.src = url;
+    document.getElementsByTagName('head')[0].appendChild(script);
+};
+/** Dynamically load css from url and return a callback */
+const loadCss = (url, callback) => {
+    const link = document.createElement('link');
+    link.type = 'text/css';
+    link.rel = 'stylesheet';
+    link.type = 'text/javascript';
+    link.href = url;
+    link.onload = () => {
+        callback();
+    };
+    document.getElementsByTagName('head')[0].appendChild(link);
+};
+
+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);
+        });
+    }
+    set zoom(zoom) {
+        if (!isNaN(zoom)) {
+            this._zoom = zoom;
+            if (this._map) {
+                this._map.getView().setZoom(zoom);
+            }
+        }
+    }
+    get zoom() {
+        return this._zoom;
+    }
+    set center(center) {
+        if (center && center.coordinates && center.coordinates.length === 2) {
+            this._center = center;
+            if (this._map) {
+                this._map.getView().setCenter(ol.proj.fromLonLat(center.coordinates));
+            }
+        }
+    }
+    get center() {
+        return this._center;
+    }
+    set readonly(readonly) {
+        if (!readonly) {
+            if (this._map) {
+                this._map.on('click', (args) => {
+                    // args.coordinate is in EPSG:3857 (meters), we transform it into EPSG:4326 (degrees)
+                    const coordinates = ol.proj.toLonLat(args.coordinate);
+                    // alternatively: const lonLat = ol.proj.transform(args.coordinate,'EPSG:3857','EPSG:4326');
+                    this.addMarkerAtCoordinates(coordinates);
+                });
+                this._map.on('pointermove', (event) => {
+                    const pixel = this._map.getEventPixel(event.originalEvent);
+                    const hit = this._map.hasFeatureAtPixel(pixel);
+                    this._map.getViewport().style.cursor = hit ? 'move' : 'grab';
+                });
+            }
+        }
+        else {
+            if (this._map) {
+                this._map.on('click', (args) => { });
+                this._map.on('pointermove', (event) => { });
+                this._map.getViewport().style.cursor = 'grab';
+            }
+        }
+        this._readonly = readonly;
+        // reset marker coordinates so marker interactions can be created or recreated accordingly
+        // to the changes to readonly
+        this.markerCoordinates = this.markerCoordinates;
+    }
+    get readonly() {
+        return this._readonly;
+    }
+    set markerCoordinates(markerCoordinates) {
+        if (markerCoordinates && markerCoordinates.length === 2) {
+            this._markerCoordinates = markerCoordinates;
+            if (this._map) {
+                this.addMarkerAtCoordinates(markerCoordinates);
+            }
+        }
+        else {
+            this._markerCoordinates = undefined;
+            if (this._map) {
+                this.removeMarker();
+            }
+        }
+    }
+    get markerCoordinates() {
+        return this._markerCoordinates;
+    }
+    set markerPoint(markerPoint) {
+        if (!markerPoint ||
+            !(markerPoint.coordinates && markerPoint.coordinates.length === 2)) {
+            this.markerCoordinates = undefined;
+        }
+        else {
+            this.markerCoordinates = [
+                +markerPoint.coordinates[0],
+                +markerPoint.coordinates[1]
+            ];
+        }
+        this.valueChange.emit(markerPoint);
+    }
+    get markerPoint() {
+        return {
+            type: 'Point',
+            coordinates: this.markerCoordinates
+        };
+    }
+    ngOnInit() {
+        this.mapId = this.mapId ? this.mapId : 'map' + MapComponent.idCounter++;
+    }
+    ngAfterViewInit() {
+        this.loaded$.subscribe((loaded) => {
+            if (loaded) {
+                this.initMap();
+            }
+        });
+    }
+    initMap() {
+        this._map = new ol.Map({
+            target: this.mapId,
+            controls: ol.control.defaults({ attribution: false }),
+            layers: [
+                new ol.layer.Tile({
+                    source: new ol.source.OSM()
+                }),
+                new ol.layer.Vector({
+                    source: this._markerSource,
+                    style: this._markerStyle
+                })
+            ],
+            view: new ol.View({
+                center: ol.proj.fromLonLat(this.center !== undefined ? this.center.coordinates : [0, 0]),
+                zoom: this.zoom
+            })
+        });
+        if (this.center === undefined || this.center === null) {
+            // if the center is not set, we set its default value
+            if ('geolocation' in navigator) {
+                navigator.geolocation.getCurrentPosition((position) => {
+                    this.center = {
+                        type: 'Point',
+                        coordinates: [position.coords.longitude, position.coords.latitude]
+                    };
+                }, (error) => {
+                    this.center = {
+                        type: 'Point',
+                        coordinates: [0, 0]
+                    };
+                });
+            }
+            else {
+                this.center = {
+                    type: 'Point',
+                    coordinates: [0, 0]
+                };
+            }
+        }
+        else {
+            // the center needs the map to be properly set, so if it was set before the map was initialized,
+            // we set the center again to perform necessary adjustements
+            this.center = this.center;
+        }
+        if (this.zoom === undefined || this.zoom === null) {
+            // if the zoom is not set, we set its default value
+            this.zoom = 18;
+        }
+        else {
+            // the zoom needs the map to be properly set, so if it was set before the map was initialized,
+            // we set the zoom again to perform necessary adjustements
+            this.zoom = this.zoom;
+        }
+        if (this.readonly === undefined || this.readonly === null) {
+            // if readonly is not set, we set its default value
+            this.readonly = false;
+        }
+        else {
+            // readonly needs the map to be properly set, so if it was set before the map was initialized,
+            // we set readonly again to perform necessary adjustements
+            this.readonly = this.readonly;
+        }
+        if (this.markerCoordinates !== undefined &&
+            this.markerCoordinates !== null) {
+            // the marker coordinates need the map to be properly set, so if they were set before the map was initialized,
+            // we set the marker coordinates again to perform necessary adjustements
+            this.markerCoordinates = this.markerCoordinates;
+        }
+    }
+    addMarkerAtCoordinates(coordinates) {
+        if (coordinates && coordinates.length === 2) {
+            if (this._marker !== undefined) {
+                this.removeMarker();
+            }
+            this._marker = new ol.Feature({
+                geometry: new ol.geom.Point(
+                // [lon, lat] is in EPSG:4326 (degrees), we transform it into EPSG:3857 (meters)
+                ol.proj.transform(coordinates, 'EPSG:4326', 'EPSG:3857'))
+            });
+            this._markerSource.addFeature(this._marker);
+            this._markerCoordinates = this.getMarkerCoordinates();
+            if (!this.readonly) {
+                const dragInteraction = new ol.interaction.Modify({
+                    features: new ol.Collection([this._marker]),
+                    style: this._markerStyle,
+                    pixelTolerance: 50,
+                    hitDetection: true
+                });
+                this._markerInteraction = dragInteraction;
+                this._map.addInteraction(dragInteraction);
+            }
+            this._marker.on('change', () => {
+                this._markerCoordinates = this.getMarkerCoordinates();
+            }, this._marker);
+        }
+    }
+    removeMarker() {
+        if (this._marker !== undefined) {
+            this._markerSource.removeFeature(this._marker);
+            this._marker = undefined;
+        }
+        if (this._markerInteraction !== undefined) {
+            this._map.getInteractions().pop();
+            this._markerInteraction = undefined;
+        }
+    }
+    getMarkerCoordinates() {
+        if (this._marker === undefined || this._marker == null) {
+            return this._marker;
+        }
+        const coordinates = this._marker.getGeometry().getCoordinates();
+        // coordinates is in EPSG:3857 (meters), we transform it into EPSG:4326 (degrees)
+        return ol.proj.transform(coordinates, 'EPSG:3857', 'EPSG:4326');
+    }
+    onResize() {
+        if (this._map) {
+            this._map.updateSize();
+        }
+    }
+}
+MapComponent.idCounter = 0;
+MapComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MapComponent, deps: [{ token: OpenLayerLoaderService }], target: i0.ɵɵFactoryTarget.Component });
+MapComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", 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"], directives: [{ type: i2.ResizedDirective, selector: "[resized]", outputs: ["resized"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", 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: [{
+                type: Input
+            }], zoom: [{
+                type: Input
+            }], center: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], markerCoordinates: [{
+                type: Input
+            }], markerPoint: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
+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.'
+                }
+            },
+            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.'
+                }
+            }
+        };
+        this.lang = languageDetector();
+        this.inlineErrors = false;
+        this.readonly = null;
+        this.valueChange = new EventEmitter();
+        this.keyPress = new EventEmitter();
+        this.onChange = (value) => { };
+        this.onTouched = () => { };
+    }
+    get className() {
+        return this.checkClassName();
+    }
+    set disabled(v) {
+        v = typeof v === 'string' && v !== 'false' ? true : v;
+        this._disabled = v;
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    set required(v) {
+        this._required = v;
+    }
+    get required() {
+        return this._required;
+    }
+    set value(v) {
+        if (v === this._value) {
+            return; // prevent events when there is no changes
+        }
+        const initialAndEmpty = isInitialAndEmpty(this._value, v);
+        if (v &&
+            v.coordinates &&
+            v.coordinates.length === 2 &&
+            exists(v.coordinates[0] && exists(v.coordinates[1]))) {
+            this._value = v;
+            this.setLatitudeInControl(v.coordinates[1]);
+            this.setLongitudeInControl(v.coordinates[0]);
+        }
+        else if (!v) {
+            this._value = null;
+            this.setLatitudeInControl(null);
+            this.setLongitudeInControl(null);
+        }
+        else {
+            this._value = v;
+            // we don't set value in control if the value is not valid
+            // if we do, the content of the control changes and can erase what the user is typing
+        }
+        this.onChange(v);
+        if (!initialAndEmpty) {
+            this.valueChange.emit(v);
+        }
+    }
+    get value() {
+        return this._value;
+    }
+    // ControlValueAccessor Interface implementation
+    writeValue(value) {
+        this.value = value;
+    }
+    registerOnChange(onChange) {
+        this.onChange = onChange;
+    }
+    registerOnTouched(onTouched) {
+        this.onTouched = onTouched;
+    }
+    markAsTouched() {
+        if (!this.touched) {
+            this.onTouched();
+            this.touched = true;
+        }
+    }
+    setDisabledState(disabled) {
+        this.disabled = disabled;
+    }
+    // End of ControlValueAccessor Interface implementation
+    setLatitudeInControl(latitude) {
+        // this.latitude.nativeElement.value = latitude;
+        this.latitudeValue = latitude;
+    }
+    setLongitudeInControl(longitude) {
+        // this.longitude.nativeElement.value = longitude;
+        this.longitudeValue = longitude;
+    }
+    clear() {
+        this.setLatitudeInControl(null);
+        this.setLongitudeInControl(null);
+        this.value = null;
+    }
+    isClearable() {
+        return (isValidNumber(this.latitudeValue) || isValidNumber(this.longitudeValue));
+    }
+    // Validator interface
+    registerOnValidatorChange() { }
+    validate(control) {
+        const value = control.value;
+        let result = null;
+        if (this.required &&
+            !hasValue(value) &&
+            !exists(this.latitudeValue) &&
+            !exists(this.longitudeValue)) {
+            result = result || {};
+            result.required = { value, reason: 'Required field.' };
+        }
+        if (!exists(this.latitudeValue) && exists(this.longitudeValue)) {
+            result = result || {};
+            result.existsLatitude = {
+                value,
+                reason: 'Latitude not specified.'
+            };
+        }
+        if (exists(this.latitudeValue) && !exists(this.longitudeValue)) {
+            result = result || {};
+            result.existsLongitude = {
+                value,
+                reason: 'Longitude not specified.'
+            };
+        }
+        if (exists(this.minLatitude) && this.latitudeValue < this.minLatitude) {
+            result = result || {};
+            result.minLatitude = {
+                value,
+                min: this.minLatitude,
+                reason: `Latitude is lower than minimum value: ${this.minLatitude}.`
+            };
+        }
+        if (exists(this.maxLatitude) && this.latitudeValue > this.maxLatitude) {
+            result = result || {};
+            result.maxLatitude = {
+                value,
+                max: this.maxLatitude,
+                reason: `Latitude is higher than maximum value: ${this.maxLatitude}.`
+            };
+        }
+        if (exists(this.minLongitude) && this.longitudeValue < this.minLongitude) {
+            result = result || {};
+            result.minLongitude = {
+                value,
+                min: this.minLongitude,
+                reason: `Longitude is lower than minimum value: ${this.minLongitude}.`
+            };
+        }
+        if (exists(this.maxLongitude) && this.longitudeValue > this.maxLongitude) {
+            result = result || {};
+            result.maxLongitude = {
+                value,
+                max: this.maxLongitude,
+                reason: `Longitude is higher than maximum value: ${this.maxLongitude}.`
+            };
+        }
+        this.lastErrors = result;
+        return result;
+    }
+    // End of Validator interface
+    ngOnInit() {
+        this.inputId = this.inputId
+            ? this.inputId
+            : `geolocation$${GeolocationComponent.idCounter++}`;
+        this.setPatterns();
+    }
+    roundToStepAndUpdateLatitudeAndLongitude(newLatitudeAndLongitude) {
+        const newLatitude = roundToMultipleOf(newLatitudeAndLongitude[1], this.step);
+        const newLongitude = roundToMultipleOf(newLatitudeAndLongitude[0], this.step);
+        if (this.disabled || this.readonly) {
+            return;
+        }
+        if (!exists(newLatitudeAndLongitude)) {
+            this.value = null;
+        }
+        this.value = {
+            type: 'Point',
+            coordinates: [newLongitude, newLatitude]
+        };
+    }
+    onLostFocus() {
+        this.markAsTouched();
+    }
+    onEventLatitude(newLatitude) {
+        if (this.disabled || this.readonly) {
+            return;
+        }
+        const newLatitudeValue = isValidNumber(newLatitude) ? +newLatitude : null;
+        if (!(exists(this.value) && exists(this.value.coordinates[0])) &&
+            !exists(newLatitudeValue)) {
+            this.value = null;
+        }
+        else {
+            this.value = {
+                type: 'Point',
+                coordinates: [
+                    this.value ? this.value.coordinates[0] : undefined,
+                    newLatitudeValue
+                ]
+            };
+        }
+        this.markAsTouched();
+    }
+    onEventLongitude(newLongitude) {
+        if (this.disabled || this.readonly) {
+            return;
+        }
+        const newLongitudeValue = isValidNumber(newLongitude)
+            ? +newLongitude
+            : null;
+        if (!exists(newLongitudeValue) &&
+            !(exists(this.value) && exists(this._value.coordinates[1]))) {
+            this.value = null;
+        }
+        else {
+            this.value = {
+                type: 'Point',
+                coordinates: [
+                    newLongitudeValue,
+                    this.value ? this.value.coordinates[1] : undefined
+                ]
+            };
+        }
+        this.markAsTouched();
+    }
+    onKeyPress(event) {
+        this.keyPress.emit(event);
+    }
+    checkClassName() {
+        return this.disabled
+            ? this.readonly
+                ? 'disabled readonly'
+                : 'disabled'
+            : this.readonly
+                ? 'readonly'
+                : '';
+    }
+    openModalMap(modal) {
+        this.modalService.open(modal).result.then((result) => {
+            if (result !== 'cancel') {
+                this.roundToStepAndUpdateLatitudeAndLongitude(result);
+            }
+        }, (_) => { });
+    }
+    onSearchLocationChanged(newValue, map) {
+        map.markerPoint = newValue;
+        map.center = map.markerPoint;
+    }
+    get mapTitle() {
+        return this._disabled || !!this.readonly
+            ? this.i18n[this.lang].location
+            : this.i18n[this.lang].selectLocation;
+    }
+    get self() {
+        return this;
+    }
+    getLabels(instance, keys) {
+        return instance.locationService.getLabels(instance.locationService, keys);
+    }
+    getData(instance, search) {
+        return instance.locationService.getData(instance.locationService, search);
+    }
+    setPatterns() {
+        this.step = this.step || 0.00001; // 0.00001 degrees = 1.11 meters
+        this.zoom = this.zoom || 18; // (360/2^18) degrees ~ 0.00137 degrees ~ 153 meters
+        this.minLatitude = this.minLatitude || -90;
+        this.maxLatitude = this.maxLatitude || +90;
+        this.minLongitude = this.minLongitude || -180;
+        this.maxLongitude = this.maxLongitude || +180;
+    }
+}
+GeolocationComponent.idCounter = 0;
+GeolocationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: GeolocationComponent, deps: [{ token: ModalService }, { token: GeolocationService }], target: i0.ɵɵFactoryTarget.Component });
+GeolocationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", 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"], components: [{ type: AutocompleteComponent, selector: "lux-autocomplete", inputs: ["inputId", "disabled", "readonly", "label", "canAddNewValues", "keepOpenAfterDelete", "value", "dataSource", "required", "placeholder", "resolveLabelsFunction", "populateFunction", "instance"], outputs: ["valueChange", "dataSourceChange"] }, { type: MapComponent, selector: "lux-map", inputs: ["mapId", "zoom", "center", "readonly", "markerCoordinates", "markerPoint"], outputs: ["valueChange"] }], directives: [{ type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { 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]" }, { type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: GeolocationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lux-geolocation', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            multi: true,
+                            useExisting: forwardRef(() => GeolocationComponent)
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            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"] }]
+        }], ctorParameters: function () { return [{ type: ModalService }, { type: GeolocationService }]; }, propDecorators: { latitude: [{
+                type: ViewChild,
+                args: ['latitude', { static: true }]
+            }], longitude: [{
+                type: ViewChild,
+                args: ['longitude', { static: true }]
+            }], map: [{
+                type: ViewChild,
+                args: ['map', { static: false }]
+            }], minLatitude: [{
+                type: Input
+            }], maxLatitude: [{
+                type: Input
+            }], minLongitude: [{
+                type: Input
+            }], maxLongitude: [{
+                type: Input
+            }], step: [{
+                type: Input
+            }], zoom: [{
+                type: Input
+            }], lang: [{
+                type: Input
+            }], inlineErrors: [{
+                type: Input
+            }], inputId: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input,
+                args: ['aria-label']
+            }], readonly: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], keyPress: [{
+                type: Output
+            }] } });
+
+/**
+ * A service that holds the functionality for advanced handling of regular expressions
+ */
+class RegexpService {
+    constructor() { }
+    removeOuterRoundBrackets(regularExpressionString) {
+        while (regularExpressionString[0] === '(' &&
+            regularExpressionString[regularExpressionString.length - 1] === ')') {
+            regularExpressionString = regularExpressionString.slice(1, regularExpressionString.length - 1);
+        }
+        return regularExpressionString;
+    }
+    isQuantifier(quantifier) {
+        switch (quantifier) {
+            case '{':
+            case '?':
+            case '+':
+            case '*':
+                return true;
+        }
+        return false;
+    }
+    parseMinimalAmountOfQuantifier(quantifier) {
+        switch (quantifier[0]) {
+            case '?':
+            case '*':
+                return 0;
+            case '+':
+                return 1;
+            case '{':
+                for (let index = 1; index < quantifier.length; ++index) {
+                    if (quantifier[index] < '0' || quantifier[index] > '9') {
+                        return Number(quantifier.slice(1, index));
+                    }
+                }
+        }
+        return 0;
+    }
+    sliceRegexByOr(regularExpressionString) {
+        const result = [];
+        let slicedRegex = '';
+        let lastSliceIndex = 0;
+        let roundBracketCount = 0;
+        let squareBracketCount = 0;
+        let curlyBracketCount = 0;
+        let index = 0;
+        for (; index < regularExpressionString.length; ++index) {
+            switch (regularExpressionString[index]) {
+                case '\\':
+                    // escape sequence; skip the next character
+                    ++index;
+                    break;
+                case '(':
+                    roundBracketCount += 1;
+                    break;
+                case ')':
+                    roundBracketCount -= 1;
+                    break;
+                case '[':
+                    squareBracketCount += 1;
+                    break;
+                case ']':
+                    squareBracketCount -= 1;
+                    break;
+                case '{':
+                    curlyBracketCount += 1;
+                    break;
+                case '}':
+                    curlyBracketCount -= 1;
+                    break;
+                case '|':
+                    if (roundBracketCount === 0 &&
+                        squareBracketCount === 0 &&
+                        curlyBracketCount === 0) {
+                        slicedRegex = this.removeOuterRoundBrackets(regularExpressionString.slice(lastSliceIndex, index));
+                        result.push(slicedRegex);
+                        lastSliceIndex = index + 1;
+                    }
+                    break;
+            }
+        }
+        slicedRegex = this.removeOuterRoundBrackets(regularExpressionString.slice(lastSliceIndex, index));
+        result.push(slicedRegex);
+        return result;
+    }
+    sliceRegexByThen(regularExpressionString) {
+        // the actual result
+        const resultStart = [];
+        // the remainder of the regex in each case
+        const resultRemainder = [];
+        let roundBracketCount = 0;
+        let squareBracketCount = 0;
+        let curlyBracketCount = 0;
+        for (let index = 0; index < regularExpressionString.length; ++index) {
+            switch (regularExpressionString[index]) {
+                case '\\':
+                    // escape sequence; skip the next character
+                    ++index;
+                    break;
+                case '(':
+                    roundBracketCount += 1;
+                    break;
+                case ')':
+                    roundBracketCount -= 1;
+                    break;
+                case '[':
+                    squareBracketCount += 1;
+                    break;
+                case ']':
+                    squareBracketCount -= 1;
+                    break;
+                case '{':
+                    curlyBracketCount += 1;
+                    break;
+                case '}':
+                    curlyBracketCount -= 1;
+                    break;
+            }
+            if (roundBracketCount === 0 &&
+                squareBracketCount === 0 &&
+                curlyBracketCount === 0) {
+                if (!this.isQuantifier(regularExpressionString[index + 1])) {
+                    resultStart.push(regularExpressionString.slice(0, index + 1));
+                    resultRemainder.push(regularExpressionString.slice(index + 1));
+                }
+                else {
+                    // let minimalAmountOfRepeats = parseMinimalAmountOfQuantifier(regularExpressionString.slice(index + 1));
+                    // TODO
+                }
+            }
+        }
+        return [resultStart, resultRemainder];
+    }
+    suggestion(beginning, regularExpressionString) {
+        if (new RegExp(regularExpressionString).test(beginning)) {
+            // TODO: RETURN AN EMPTY STRING
+            return 'YA ES IGUAL, NO HAY MÁS QUE SUGERIR';
+        }
+        const regexOptions = this.sliceRegexByOr(regularExpressionString);
+        if (regexOptions.length > 1) {
+            for (let regexOptionIndex = 0; regexOptionIndex < regexOptions.length; ++regexOptionIndex) {
+                const regexParts = this.sliceRegexByThen(regexOptions[regexOptionIndex]);
+                const regexPartsStarts = regexParts[0];
+                const regexPartsRemainders = regexParts[1];
+                // for each option, test if the first part of the regex matches
+                // if it doesn't, continue
+                // if it does, keep checking until what part it matches
+                if (!new RegExp(regexPartsStarts[0]).test(beginning)) {
+                    // if there are no more options
+                    if (regexOptionIndex === regexOptions.length - 1) {
+                        // we return the first option, but we could return any option
+                        // TODO: RETURN ANY TEXT THAT MATCHES regexOptions[0]
+                        return regexOptions[0];
+                    }
+                }
+                else {
+                    for (let regexPartIndex = 1; regexPartIndex < regexPartsStarts.length; ++regexPartIndex) {
+                        if (!new RegExp(regexPartsStarts[regexPartIndex]).test(beginning)) {
+                            // TODO: RETURN ANY TEXT THAT MATCHES regexPartsRemainders[regexPartIndex - 1]
+                            return regexPartsRemainders[regexPartIndex - 1];
+                        }
+                    }
+                }
+            }
+        }
+        else if (regexOptions.length === 1) {
+            const regexParts = this.sliceRegexByThen(regexOptions[0]);
+            const regexPartsStarts = regexParts[0];
+            const regexPartsRemainders = regexParts[1];
+            if (!new RegExp(regexPartsStarts[0]).test(beginning)) {
+                // TODO: RETURN ANY TEXT THAT MATCHES regularExpressionString
+                return regularExpressionString;
+            }
+            else {
+                for (let regexPartIndex = 1; regexPartIndex < regexPartsStarts.length; ++regexPartIndex) {
+                    if (!new RegExp(regexPartsStarts[regexPartIndex]).test(beginning)) {
+                        // TODO: RETURN ANY TEXT THAT MATCHES regexPartsRemainders[regexPartIndex - 1]
+                        return regexPartsRemainders[regexPartIndex - 1];
+                    }
+                }
+            }
+        }
+        // TODO: RETURN AN EMPTY STRING
+        return 'NO DEBERÍA SER POSIBLE';
+    }
+}
+RegexpService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: RegexpService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+RegexpService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: RegexpService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", 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 = () => { };
+    }
+    get className() {
+        return this.checkClassName();
+    }
+    get color() {
+        return this.checkColor();
+    }
+    set disabled(v) {
+        v = typeof v === 'string' ? true : v;
+        this._disabled = v;
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    set pattern(p) {
+        this._pattern = p;
+        if (p === undefined) {
+            this._regexp = undefined;
+        }
+        else {
+            try {
+                this._regexp = new RegExp(p);
+            }
+            catch (e) {
+                this._pattern = undefined;
+                this._regexp = undefined;
+            }
+        }
+    }
+    get pattern() {
+        return this._pattern;
+    }
+    set currency(v) {
+        this._currency = v.toUpperCase();
+    }
+    get currency() {
+        return this._currency;
+    }
+    set placeholder(v) {
+        this._placeholder = v;
+    }
+    get placeholder() {
+        return this._placeholder ? this._placeholder : '';
+    }
+    set required(v) {
+        this._required = v;
+    }
+    get required() {
+        return this._required;
+    }
+    set type(v) {
+        this._type = v.toLowerCase();
+        this.domain = v.toLowerCase();
+        this.checkType(v);
+    }
+    get type() {
+        return this._type ? this._type : 'text';
+    }
+    set value(v) {
+        v = v === undefined ? null : v;
+        if (v === this._value) {
+            return; // prevent events when there is no changes
+        }
+        const initialAndEmpty = isInitialAndEmpty(this._value, v);
+        if (this.type === 'date') {
+            v = normalizeDate(v);
+        }
+        this._value = v;
+        this.onChange(v);
+        if (!initialAndEmpty) {
+            this.valueChange.emit(v);
+        }
+    }
+    get value() {
+        if (this.isPercentage() || this.isPermillage() || this.isNumber()) {
+            const numVal = parseFloat(this._value);
+            if (!Number.isNaN(numVal)) {
+                return numVal;
+            }
+        }
+        return this._value;
+    }
+    // ControlValueAccessor Interface implementation
+    writeValue(value) {
+        this.value = value;
+        this.setValueInControl(value);
+    }
+    registerOnChange(onChange) {
+        this.onChange = onChange;
+    }
+    registerOnTouched(onTouched) {
+        this.onTouched = onTouched;
+    }
+    markAsTouched() {
+        if (!this.touched) {
+            this.onTouched();
+            this.touched = true;
+        }
+    }
+    setDisabledState(disabled) {
+        this.disabled = disabled;
+    }
+    // End of ControlValueAccessor Interface implementation
+    setValueInControl(v) {
+        if (this.domain === 'date') {
+            v = normalizeDate(v);
+        }
+        if (this.input) {
+            this.input.nativeElement.value = v;
+        }
+        if (this.textarea) {
+            this.textarea.nativeElement.value = v;
+        }
+    }
+    // Validator interface
+    registerOnValidatorChange() { }
+    validate(control) {
+        const value = control.value;
+        let result = null;
+        if (this.required && !hasValue(value)) {
+            result = result || {};
+            result.required = { value, reason: 'Required field.' };
+        }
+        if (this._regexp && hasValue(value) && !this._regexp.test(value)) {
+            result = result || {};
+            result.pattern = {
+                value,
+                reason: `Value must follow the pattern: ${this._pattern}`
+            };
+        }
+        if (this.type === 'email' && hasValue(value) && !isValidEmail(value)) {
+            result = result || {};
+            result.email = { value, reason: 'Invalid email.' };
+        }
+        if (this.type === 'url' && hasValue(value) && !isValidUrl(value)) {
+            result = result || {};
+            result.url = { value, reason: 'Invalid URL.' };
+        }
+        if (this.type === 'color' && hasValue(value) && !isValidColor(value)) {
+            result = result || {};
+            result.color = { value, reason: 'Invalid color.' };
+        }
+        if (this.type === 'number' && hasValue(value) && !isValidNumber(value)) {
+            result = result || {};
+            result.numeric = { value, reason: 'Invalid number.' };
+        }
+        if (this.type === 'date' ||
+            this.type === 'time' ||
+            this.type === 'timestamp') {
+            if (typeof this.min === 'string' &&
+                hasValue(value) &&
+                String(value).localeCompare(this.min) === -1) {
+                result = result || {};
+                result.min = {
+                    value,
+                    min: this.min,
+                    reason: `Value is lower than minimum value: ${this.min}.`
+                };
+            }
+            if (typeof this.max === 'string' &&
+                hasValue(value) &&
+                String(value).localeCompare(this.max) !== -1) {
+                result = result || {};
+                result.max = {
+                    value,
+                    max: this.max,
+                    reason: `Value is greater than than maximum value: ${this.max}.`
+                };
+            }
+        }
+        if (this.type === 'percentage' ||
+            this.type === 'permillage' ||
+            this.type === 'number' ||
+            this.type === 'currency') {
+            if (hasValue(this.min) && hasValue(value) && value < +this.min) {
+                result = result || {};
+                result.min = {
+                    value,
+                    min: this.min,
+                    reason: `Value is lower than minimum value: ${this.min}.`
+                };
+            }
+            if (hasValue(this.max) && hasValue(value) && value > +this.max) {
+                result = result || {};
+                result.max = {
+                    value,
+                    max: this.max,
+                    reason: `Value is greater than than maximum value: ${this.max}.`
+                };
+            }
+        }
+        this.lastErrors = result;
+        return result;
+    }
+    // End of Validator interface
+    ngOnInit() {
+        this.inputId = this.inputId
+            ? this.inputId
+            : `${this.type}$${InputComponent.idCounter++}`;
+    }
+    onLostFocus() {
+        this.markAsTouched();
+    }
+    onKeyUp(newValue) {
+        this.value = newValue;
+    }
+    onChangeValue(newValue) {
+        this.value = newValue;
+        if (this.isColor()) {
+            this.colorpicker.nativeElement.value = undefined;
+        }
+        this.markAsTouched();
+    }
+    onKeyPress(event) {
+        this.keyPress.emit(event);
+    }
+    onColorPicked(newValue) {
+        this.onChangeValue(newValue);
+        this.setValueInControl(newValue);
+    }
+    isUrl() {
+        return this.type === 'url';
+    }
+    isColor() {
+        return this.type === 'color';
+    }
+    isNumber() {
+        return this.type === 'number';
+    }
+    isPercentage() {
+        return this.type === 'percentage';
+    }
+    isPermillage() {
+        return this.type === 'permillage';
+    }
+    hasPrefix() {
+        return this.currency === 'USD';
+    }
+    hasPostfix() {
+        return (this.currency === 'EUR' ||
+            this.isPercentage() ||
+            this.isPermillage() ||
+            (this.isUrl() && !!this.value) ||
+            this.isColor());
+    }
+    checkClassName() {
+        return this.disabled
+            ? this.readonly
+                ? 'disabled readonly'
+                : 'disabled'
+            : this.readonly
+                ? 'readonly'
+                : '';
+    }
+    checkColor() {
+        return this.type === 'color' && isValidColor(this.value)
+            ? this.value
+            : 'initial';
+    }
+    checkType(type) {
+        switch (type) {
+            case 'email':
+                this.setEmailPatterns();
+                break;
+            case 'url':
+                this.setUrlPatterns();
+                break;
+            case 'color':
+                this.setColorPatterns();
+                break;
+            case 'date':
+                this.setDatePatterns();
+                break;
+            case 'time':
+                this.setTimePatterns();
+                break;
+            case 'password':
+                this.setPasswordPatterns();
+                break;
+            case 'number':
+                this.setNumberPatterns();
+                break;
+            case 'currency':
+                this.setCurrencyPatterns();
+                break;
+            case 'percentage':
+                this.setPercentagePatterns();
+                break;
+            case 'permillage':
+                this.setPermillagePatterns();
+                break;
+            default:
+                break;
+        }
+    }
+    setEmailPatterns() { }
+    setUrlPatterns() { }
+    setColorPatterns() {
+        this.domain = 'text';
+    }
+    setDatePatterns() {
+        this.min = this.min || '1900-01-01';
+        this.max = this.max || '2100-01-01';
+    }
+    setTimePatterns() { }
+    setPasswordPatterns() { }
+    setNumberPatterns() {
+        this.domain = 'number';
+        this.placeholder = '0';
+    }
+    setCurrencyPatterns() {
+        this.domain = 'number';
+        this.step = this.step || 0.1;
+        this.min = this.min || 0.0;
+        this.max = this.max || 10000.0;
+        this.value = 0.0;
+    }
+    setPercentagePatterns() {
+        this.domain = 'number';
+        this.step = this.step || 0.01;
+        this.min = this.min || 0.0;
+        this.max = this.max || 100.0;
+        this.placeholder = '0.00';
+    }
+    setPermillagePatterns() {
+        this.domain = 'number';
+        this.step = this.step || 0.01;
+        this.min = this.min || 0.0;
+        this.max = this.max || 1000.0;
+        this.placeholder = '0.00';
+    }
+}
+InputComponent.idCounter = 0;
+InputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: InputComponent, deps: [{ token: RegexpService }], target: i0.ɵɵFactoryTarget.Component });
+InputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", 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}.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;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"], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: InputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lux-input', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            multi: true,
+                            useExisting: forwardRef(() => InputComponent)
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            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}.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;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"] }]
+        }], ctorParameters: function () { return [{ type: RegexpService }]; }, propDecorators: { input: [{
+                type: ViewChild,
+                args: ['input', { static: false }]
+            }], textarea: [{
+                type: ViewChild,
+                args: ['textarea', { static: false }]
+            }], colorpicker: [{
+                type: ViewChild,
+                args: ['colorpicker', { static: false }]
+            }], rows: [{
+                type: Input
+            }], cols: [{
+                type: Input
+            }], step: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], lang: [{
+                type: Input
+            }], inlineErrors: [{
+                type: Input
+            }], inputId: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input,
+                args: ['aria-label']
+            }], readonly: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], pattern: [{
+                type: Input
+            }], currency: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], keyPress: [{
+                type: Output
+            }] } });
+
+var Placement;
+(function (Placement) {
+    Placement["Top"] = "top";
+    Placement["Bottom"] = "bottom";
+    Placement["Left"] = "left";
+    Placement["Right"] = "right";
+})(Placement || (Placement = {}));
+
+/**
+ * Default Tooltip Component
+ */
+class TooltipComponent {
+    constructor() { }
+}
+TooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", 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: "13.1.1", ngImport: i0, type: TooltipComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `
+        <span class="lux-tooltip" style="transition: opacity 200ms">{{context.message}}</span>
+    `
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { context: [{
+                type: Input
+            }] } });
+
+class TooltipContentRef {
+    constructor(viewRef, componentRef) {
+        this.viewRef = viewRef;
+        this.componentRef = componentRef;
+    }
+}
+
+class TooltipService {
+    constructor(_injector, _crf, _applicationRef) {
+        this._injector = _injector;
+        this._crf = _crf;
+        this._applicationRef = _applicationRef;
+    }
+    appendComponentToBody(content, elHost, placement) {
+        const tooltipContentRef = this.getTooltipContentRef(content);
+        if (tooltipContentRef) {
+            let domElem = tooltipContentRef.viewRef
+                .rootNodes[0];
+            document.body.appendChild(domElem);
+            if (tooltipContentRef.componentRef) {
+                tooltipContentRef.componentRef.changeDetectorRef.detectChanges();
+            }
+            domElem = this.setStyle(domElem, placement);
+            domElem = this.setPosition(domElem, elHost, placement);
+            return tooltipContentRef;
+        }
+        return null;
+    }
+    removeComponentFromBody(tooltipContentRef) {
+        this._applicationRef.detachView(tooltipContentRef.viewRef);
+        if (tooltipContentRef.componentRef) {
+            tooltipContentRef.componentRef.destroy();
+        }
+    }
+    getTooltipContentRef(content) {
+        if (!content) {
+            // nothing to show
+        }
+        else if (content instanceof TemplateRef) {
+            return this.createFromTemplateRef(content);
+        }
+        else if (typeof content === 'string') {
+            return this.createFromComponent(TooltipComponent, { message: content });
+        }
+        else {
+            return this.createFromComponent(content);
+        }
+    }
+    createFromTemplateRef(content) {
+        const viewRef = content.createEmbeddedView({});
+        this._applicationRef.attachView(viewRef);
+        return new TooltipContentRef(viewRef);
+    }
+    createFromComponent(component, context) {
+        const componentRef = this._crf
+            .resolveComponentFactory(component)
+            .create(this._injector);
+        if (context) {
+            componentRef.instance.context = context;
+        }
+        this._applicationRef.attachView(componentRef.hostView);
+        return new TooltipContentRef(componentRef.hostView, componentRef);
+    }
+    setStyle(domElem, placement) {
+        domElem.style.position = 'absolute';
+        domElem.style.minWidth = 'min-content';
+        domElem.style.minHeight = 'min-content';
+        const tooltipElement = this.getTooltipElementFromHTMLElemnt(domElem);
+        placement =
+            placement !== undefined
+                ? placement.toLocaleLowerCase()
+                : 'top'; // 'Top' is the default value of placement
+        tooltipElement.classList.add(`lux-tooltip-${placement}`);
+        tooltipElement.classList.add('lux-tooltip-show');
+        return domElem;
+    }
+    getTooltipElementFromHTMLElemnt(domElem) {
+        const elementsArray = Array.from(domElem.classList).filter((className) => className === 'lux-tooltip');
+        if (elementsArray.length !== 0) {
+            return domElem;
+        }
+        else if (domElem.hasChildNodes()) {
+            const childrenArray = Array.from(domElem.children).filter((child) => this.getTooltipElementFromHTMLElemnt(child) !== null);
+            if (childrenArray.length !== 0) {
+                return this.getTooltipElementFromHTMLElemnt(childrenArray[0]);
+            }
+            else {
+                return null;
+            }
+        }
+        else {
+            return null;
+        }
+    }
+    setPosition(domElem, elHost, placement) {
+        const hostPos = elHost.nativeElement.getBoundingClientRect();
+        const tooltipPos = domElem.getBoundingClientRect();
+        const scrollPos = window.pageYOffset ||
+            document.documentElement.scrollTop ||
+            document.body.scrollTop ||
+            0;
+        let top = 0;
+        let left = 0;
+        const offset = 10;
+        switch (placement) {
+            case Placement.Bottom:
+                top = hostPos.bottom + offset;
+                left = hostPos.left + (hostPos.width - tooltipPos.width) / 2;
+                break;
+            case Placement.Left:
+                top = hostPos.top + (hostPos.height - tooltipPos.height) / 2;
+                left = hostPos.left - tooltipPos.width - offset;
+                break;
+            case Placement.Right:
+                top = hostPos.top + (hostPos.height - tooltipPos.height) / 2;
+                left = hostPos.right + offset;
+                break;
+            case Placement.Top:
+            default:
+                top = hostPos.top - tooltipPos.height - offset;
+                left = hostPos.left + (hostPos.width - tooltipPos.width) / 2;
+                break;
+        }
+        top = Math.max(0, top);
+        left = Math.max(0, left);
+        domElem.style.top = `${top + scrollPos}px`;
+        domElem.style.left = `${left}px`;
+        return domElem;
+    }
+}
+TooltipService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", 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: "13.1.1", ngImport: i0, type: TooltipService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: TooltipService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ComponentFactoryResolver }, { type: i0.ApplicationRef }]; } });
+
+/**
+ * Tooltip directive
+ */
+class LuxTooltipDirective {
+    constructor(elHost, tooltipService) {
+        this.elHost = elHost;
+        this.tooltipService = tooltipService;
+    }
+    onMouseEnter() {
+        if (!this.tooltipRef) {
+            this.tooltipRef = this.show(this.content, this.elHost, this.placement);
+        }
+    }
+    onMouseLeave() {
+        if (this.tooltipRef) {
+            this.remove(this.tooltipRef);
+            this.tooltipRef = null;
+        }
+    }
+    onClick() {
+        if (this.tooltipRef) {
+            this.remove(this.tooltipRef);
+            this.tooltipRef = null;
+        }
+    }
+    show(component, elHost, placement) {
+        return this.tooltipService.appendComponentToBody(component, elHost, placement);
+    }
+    remove(tooltipRef) {
+        this.tooltipService.removeComponentFromBody(tooltipRef);
+    }
+}
+LuxTooltipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: LuxTooltipDirective, deps: [{ token: i0.ElementRef }, { token: TooltipService }], target: i0.ɵɵFactoryTarget.Directive });
+LuxTooltipDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", 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: "13.1.1", ngImport: i0, type: LuxTooltipDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[luxTooltip]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: TooltipService }]; }, propDecorators: { luxTooltip: [{
+                type: Input
+            }], content: [{
+                type: Input
+            }], placement: [{
+                type: Input
+            }], onMouseEnter: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }], onMouseLeave: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
+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();
+    }
+    set lang(l) {
+        if (l === this._lang) {
+            return;
+        }
+        if (Object.keys(this.literals).includes(l)) {
+            this._lang = l;
+        }
+        else {
+            this._lang = 'en';
+        }
+        this.loadLanguage();
+    }
+    get lang() {
+        return this._lang;
+    }
+    set paginationInfo(value) {
+        this.paginationInfoValue = value;
+        this.syncState();
+    }
+    get paginationInfo() {
+        return this.paginationInfoValue;
+    }
+    ngOnInit() {
+        this.calculatePages();
+    }
+    pageSizeChanged(pageSize) {
+        this.paginationInfo.pageSize = pageSize;
+        this.syncState();
+        this.pageSizeChange.emit(pageSize);
+    }
+    onPage(n) {
+        this.goToPage.emit(n);
+    }
+    onFirst() {
+        this.goToPage.emit(0);
+    }
+    onLast() {
+        this.goToPage.emit(this.totalPages - 1);
+    }
+    onNext() {
+        const page = (this.paginationInfo.page || 0) + 1;
+        this.goToPage.emit(page);
+    }
+    onPrevious() {
+        const page = (this.paginationInfo.page || 0) - 1;
+        this.goToPage.emit(page);
+    }
+    syncState() {
+        this.pages = this.calculatePages();
+        this.showPagination =
+            this.paginationInfo.total > this.paginationInfo.pageSize;
+        this.hidePrevious = this.paginationInfo.page === 0;
+        this.lastPage =
+            this.paginationInfo.pageSize * (this.paginationInfo.page + 1) >=
+                this.paginationInfo.total;
+        this.totalPages =
+            Math.ceil(this.paginationInfo.total / this.paginationInfo.pageSize) || 0;
+        this.displayNextEllipsis = !this.pages.includes(this.totalPages - 1);
+        this.displayPreviousEllipsis = !this.pages.includes(0);
+    }
+    calculatePages() {
+        const totalPages = Math.ceil(this.paginationInfo.total / this.paginationInfo.pageSize) - 1; // 0-index
+        const p = this.paginationInfo.page || 0;
+        const pagesToShow = this.paginationInfo.pagesToShow;
+        const pages = [];
+        pages.push(p);
+        const times = pagesToShow - 1;
+        for (let i = 0; i < times; i++) {
+            if (pages.length < pagesToShow) {
+                if (Math.min(...pages) > 0) {
+                    pages.unshift(Math.min(...pages) - 1);
+                }
+            }
+            if (pages.length < pagesToShow) {
+                if (Math.max(...pages) < totalPages) {
+                    pages.push(Math.max(...pages) + 1);
+                }
+            }
+        }
+        pages.sort((a, b) => a - b);
+        return pages;
+    }
+    loadLanguage() {
+        const l = this.literals[this.lang];
+        this.first = l.first;
+        this.previous = l.previous;
+        this.next = l.next;
+        this.last = l.last;
+    }
+}
+PaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", 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 #cfcfcf;border:var(--lux-pagination-enabled-border, 1px solid #cfcfcf);border-radius:10%;border-radius:var(--lux-pagination-enabled-border-radius, 10%);padding:1%;margin:0 .7%;color:#325c81;color:var(--lux-pagination-enabled-color, #325c81);width:-webkit-min-content;width:-moz-min-content;width:min-content;cursor:pointer}.enabledFirstLast{border:1px solid #cfcfcf;border-radius:10%;padding:1%;color:#325c81;margin:0 .7%;width:-webkit-min-content;width:-moz-min-content;width:min-content;cursor:pointer}.ellipsis{margin: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"], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: LuxTooltipDirective, selector: "[luxTooltip]", inputs: ["luxTooltip", "content", "placement"] }, { type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", 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 #cfcfcf;border:var(--lux-pagination-enabled-border, 1px solid #cfcfcf);border-radius:10%;border-radius:var(--lux-pagination-enabled-border-radius, 10%);padding:1%;margin:0 .7%;color:#325c81;color:var(--lux-pagination-enabled-color, #325c81);width:-webkit-min-content;width:-moz-min-content;width:min-content;cursor:pointer}.enabledFirstLast{border:1px solid #cfcfcf;border-radius:10%;padding:1%;color:#325c81;margin:0 .7%;width:-webkit-min-content;width:-moz-min-content;width:min-content;cursor:pointer}.ellipsis{margin: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"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { goToPage: [{
+                type: Output
+            }], pageSizeChange: [{
+                type: Output
+            }], lang: [{
+                type: Input
+            }], paginationInfo: [{
+                type: Input
+            }] } });
+
+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 = () => { };
+    }
+    set items(col) {
+        this._items = (col || []).map((it, index) => this.ensureHasUniqueName(it, index));
+        this.itemsChange.emit(col);
+    }
+    get items() {
+        return this._items;
+    }
+    set value(v) {
+        if (v === this._value) {
+            return;
+        }
+        const initialAndEmpty = isInitialAndEmpty(this._value, v);
+        this._value = v;
+        this.onChange(v);
+        if (!initialAndEmpty) {
+            this.valueChange.emit(v);
+        }
+    }
+    get value() {
+        return this._value;
+    }
+    writeValue(value) {
+        this.value = value;
+    }
+    registerOnChange(onChange) {
+        this.onChange = onChange;
+    }
+    registerOnTouched(onTouched) {
+        this.onTouched = onTouched;
+    }
+    markAsTouched() {
+        if (!this.touched) {
+            this.onTouched();
+            this.touched = true;
+        }
+    }
+    setDisabledState(disabled) {
+        this.disabled = disabled;
+    }
+    // End ControlValueAccessor Interface
+    // Validator interface
+    registerOnValidatorChange() { }
+    validate(control) {
+        const value = control.value;
+        if (this.required &&
+            (value === '' || value === null || value === undefined)) {
+            return { required: { value, reason: 'Required field.' } };
+        }
+        return null;
+    }
+    // End of Validator interface
+    setValue(event, item) {
+        if (!this.disabled && !this.readonly) {
+            this.value = item.value;
+            this.markAsTouched();
+        }
+        event.preventDefault();
+    }
+    ensureHasUniqueName(item, index) {
+        if (!item.name) {
+            item.name = `${this.name}_${index}`;
+        }
+        return item;
+    }
+}
+RadiogroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: RadiogroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+RadiogroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", 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, #2e2eac)}.radio-item.selected label{font-size:initial;font-size:var(--lux-radiogroup-font-size, initial);color:#fff;color:var(--lux-radiogroup-selected-color, white)}.radio-start{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}.radio-end{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}.disabled .radio-item{background-color:#f0f0f0;color:#444}.disabled .selected{font-size:initial;font-size:var(--lux-radiogroup-selected-disabled-font-size, initial);color:#fff;color:var(--lux-radiogroup-selected-disabled-color, white);background-color:#9898ec;background-color:var(--lux-radiogroup-selected-disabled-background-color, #9898ec)}.unselectable{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}\n"], directives: [{ type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: RadiogroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lux-radiogroup', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            multi: true,
+                            useExisting: forwardRef(() => RadiogroupComponent)
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            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, #2e2eac)}.radio-item.selected label{font-size:initial;font-size:var(--lux-radiogroup-font-size, initial);color:#fff;color:var(--lux-radiogroup-selected-color, white)}.radio-start{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}.radio-end{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}.disabled .radio-item{background-color:#f0f0f0;color:#444}.disabled .selected{font-size:initial;font-size:var(--lux-radiogroup-selected-disabled-font-size, initial);color:#fff;color:var(--lux-radiogroup-selected-disabled-color, white);background-color:#9898ec;background-color:var(--lux-radiogroup-selected-disabled-background-color, #9898ec)}.unselectable{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { name: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], items: [{
+                type: Input
+            }], itemsChange: [{
+                type: Output
+            }], value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
+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 = () => { };
+    }
+    writeValue(value) {
+        this.value = value;
+    }
+    registerOnChange(onChange) {
+        this.onChange = onChange;
+    }
+    registerOnTouched(onTouched) {
+        this.onTouched = onTouched;
+    }
+    markAsTouched() {
+        if (!this.touched) {
+            this.onTouched();
+            this.touched = true;
+        }
+    }
+    setDisabledState(disabled) {
+        this.disabled = disabled;
+    }
+    // End ControlValueAccessor Interface
+    // Validator interface
+    registerOnValidatorChange() { }
+    validate(control) {
+        const value = control.value;
+        if (this.required &&
+            (value === '' || value === null || value === undefined)) {
+            return { required: { value, reason: 'Required field.' } };
+        }
+        return null;
+    }
+    // End of Validator interface
+    get canAdd() {
+        return this.multiple || this.value.length === 0;
+    }
+    add(val) {
+        this.value.push(val);
+        this.newEntry = '';
+        this.markAsTouched();
+        this.valueChange.emit(this.value);
+    }
+    remove(index) {
+        if (this.value.length > index) {
+            this.value.splice(index, 1);
+            this.markAsTouched();
+            this.valueChange.emit(this.value);
+        }
+    }
+    onKeyPress(event) {
+        if (event.key === 'Enter' && !this.error && this.newEntry !== '') {
+            // Add on pressing Enter/Return
+            this.markAsTouched();
+            this.add(this.newEntry);
+        }
+    }
+    onChangeNewEntry(newValue) {
+        this.markAsTouched();
+        if (!newValue) {
+            this.isValidNewEntry = false;
+            this.error = null;
+            return;
+        }
+        if (this.unique) {
+            const found = (this.value || []).find((it) => it === newValue);
+            this.isValidNewEntry = !found;
+            this.error = found
+                ? `Value '${newValue}' is already in. Cannot add duplicates.`
+                : null;
+            if (!this.isValidNewEntry) {
+                return;
+            }
+        }
+        this.error = this.validateItem(newValue);
+        this.isValidNewEntry = !this.error;
+    }
+}
+SelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", 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"], components: [{ 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"] }], directives: [{ type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: SelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lux-select', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            multi: true,
+                            useExisting: forwardRef(() => SelectComponent)
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            multi: true,
+                            useExisting: forwardRef(() => SelectComponent)
+                        }
+                    ], template: "<div class=\"lux-select\">\n  <ul class=\"list\">\n    <li *ngFor=\"let item of value; let i = index\">\n      <span>{{ item }}</span>\n      <button *ngIf=\"!disabled\"\n            class=\"remove\"\n            type=\"button\"\n            (click)=\"remove(i)\"\n            [attr.aria-label]=\"'Remove ' + item\"\n            >Remove</button>\n    </li>\n  </ul>\n  <div class=\"add-new-item\" *ngIf=\"!disabled\">\n    <lux-input\n      id=\"{{ id + 'addNew' }}\"\n      type=\"string\"\n      [placeholder]=\"placeholder\"\n      [attr.aria-label]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [(value)]=\"newEntry\"\n      (keyPress)=\"onKeyPress($event)\"\n      (valueChange)=\"onChangeNewEntry($event)\"\n    >\n    </lux-input>\n    <div *ngIf=\"canAdd\">\n      <button *ngIf=\"isValidNewEntry\" type=\"button\" (click)=\"add(newEntry)\">Add</button>\n    </div>\n    <div class=\"error\">\n      {{ error }}\n    </div>\n  </div>\n</div>\n", styles: [".lux-select{margin-bottom:.5em}.lux-select .list{margin:1em;padding-bottom:.2em;list-style-type:square}.lux-select .list span{margin-bottom:.3em}.remove{margin-left:2em;font-size:.65em;color:#b22222;background:transparent;border:2px solid #BBB}.add-new-item{display:inline-flex;margin-left:2.2em;height:1.6em}.error{margin:.5em 0;color:#b22222}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { id: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], placeholder: [{
+                type: Input
+            }], unique: [{
+                type: Input
+            }], validateItem: [{
+                type: Input
+            }] } });
+
+class VoiceRecognitionDirective {
+    constructor(el, renderer) {
+        this.el = el;
+        this.renderer = renderer;
+        this.isRecognizing = false;
+        const speechRecognition = window.webkitSpeechRecognition;
+        if (speechRecognition) {
+            this.recognition = new speechRecognition();
+        }
+    }
+    ngOnInit() {
+        if (this.recognition) {
+            // API is available
+            this.recognition.lang = this.language || window.navigator.language;
+            this.recognition.interimResults = false;
+            this.recognition.maxAlternatives = 1;
+            // Add mic icon
+            this.mic = document.createElement('div');
+            this.mic.setAttribute('class', 'lux-microphone');
+            const parent = this.el.nativeElement.parentElement;
+            parent.appendChild(this.mic);
+            // Add event handlers
+            this.mic.onclick = () => this.microphoneClick();
+            this.recognition.onresult = (event) => this.onRecognized(event);
+        }
+    }
+    microphoneClick() {
+        if (this.isRecognizing) {
+            // stop
+            this.isRecognizing = false;
+            this.renderer.removeClass(this.mic, 'lux-recording');
+            this.recognition.abort();
+        }
+        else {
+            // start
+            this.el.nativeElement.value = getRecordingMessage(this.language);
+            this.isRecognizing = true;
+            this.renderer.addClass(this.mic, 'lux-recording');
+            this.recognition.start();
+        }
+    }
+    onRecognized(event) {
+        const recognizedText = event.results[0][0].transcript;
+        this.isRecognizing = false;
+        this.el.nativeElement.value = recognizedText;
+        this.renderer.removeClass(this.mic, 'lux-recording');
+    }
+}
+VoiceRecognitionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: VoiceRecognitionDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+VoiceRecognitionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", type: VoiceRecognitionDirective, selector: "[luxVoiceRecognition]", inputs: { language: "language" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: VoiceRecognitionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[luxVoiceRecognition]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { language: [{
+                type: Input
+            }] } });
+const getRecordingMessage = (lang) => {
+    switch (lang.toLowerCase()) {
+        case 'es':
+        case 'es-es':
+            return 'Grabando...';
+        case 'en':
+        case 'en-uk':
+        case 'en-us':
+        default:
+            return 'Recording...';
+    }
+};
+
+/* Create a new injection token for injecting the window into a component. */
+const WINDOW = new InjectionToken('WindowToken');
+/* Define abstract class for obtaining reference to the global window object. */
+class WindowRef {
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    get nativeWindow() {
+        throw new Error('Not implemented.');
+    }
+}
+/* Define class that implements the abstract class and returns the native window object. */
+class BrowserWindowRef extends WindowRef {
+    constructor() {
+        super();
+    }
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    get nativeWindow() {
+        return window;
+    }
+}
+/* Create an factory function that returns the native window object. */
+// eslint-disable-next-line @typescript-eslint/ban-types
+const windowFactory = (browserWindowRef, platformId) => {
+    if (isPlatformBrowser(platformId)) {
+        return browserWindowRef.nativeWindow;
+    }
+    return new Object();
+};
+/* Create a injectable provider for the WindowRef token that uses the BrowserWindowRef class. */
+const browserWindowProvider = {
+    provide: WindowRef,
+    useClass: BrowserWindowRef
+};
+/* Create an injectable provider that uses the windowFactory function for returning the native window object. */
+const windowProvider = {
+    provide: WINDOW,
+    useFactory: windowFactory,
+    deps: [WindowRef, PLATFORM_ID]
+};
+/* Create an array of providers. */
+const WINDOW_PROVIDERS = [
+    browserWindowProvider,
+    windowProvider
+];
+
+class LuxModule {
+}
+LuxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: LuxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+LuxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: LuxModule, declarations: [AutocompleteComponent,
+        AutocompleteListComponent,
+        FilterComponent,
+        CheckboxComponent,
+        DatetimeComponent,
+        InputComponent,
+        GeolocationComponent,
+        LuxTooltipDirective,
+        LuxModalWindowComponent,
+        LuxModalBackdropComponent,
+        LuxBreadcrumbComponent,
+        MapComponent,
+        SelectComponent,
+        TooltipComponent,
+        PaginationComponent,
+        RadiogroupComponent,
+        VoiceRecognitionDirective], imports: [AngularResizedEventModule,
+        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: "13.1.1", ngImport: i0, type: LuxModule, providers: [ModalService, TooltipService, WINDOW_PROVIDERS], imports: [[
+            AngularResizedEventModule,
+            FormsModule,
+            HttpClientModule,
+            ReactiveFormsModule,
+            RouterModule,
+            CommonModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: LuxModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        AutocompleteComponent,
+                        AutocompleteListComponent,
+                        FilterComponent,
+                        CheckboxComponent,
+                        DatetimeComponent,
+                        InputComponent,
+                        GeolocationComponent,
+                        LuxTooltipDirective,
+                        LuxModalWindowComponent,
+                        LuxModalBackdropComponent,
+                        LuxBreadcrumbComponent,
+                        MapComponent,
+                        SelectComponent,
+                        TooltipComponent,
+                        PaginationComponent,
+                        RadiogroupComponent,
+                        VoiceRecognitionDirective
+                    ],
+                    entryComponents: [
+                        LuxModalWindowComponent,
+                        LuxModalBackdropComponent,
+                        TooltipComponent
+                    ],
+                    providers: [ModalService, TooltipService, WINDOW_PROVIDERS],
+                    imports: [
+                        AngularResizedEventModule,
+                        FormsModule,
+                        HttpClientModule,
+                        ReactiveFormsModule,
+                        RouterModule,
+                        CommonModule
+                    ],
+                    exports: [
+                        AutocompleteComponent,
+                        AutocompleteListComponent,
+                        FilterComponent,
+                        CheckboxComponent,
+                        DatetimeComponent,
+                        InputComponent,
+                        GeolocationComponent,
+                        LuxTooltipDirective,
+                        LuxBreadcrumbComponent,
+                        LuxBreadcrumbComponent,
+                        MapComponent,
+                        SelectComponent,
+                        PaginationComponent,
+                        RadiogroupComponent,
+                        VoiceRecognitionDirective
+                    ]
+                }]
+        }] });
+
+/*
+ * Public API Surface of lux
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AutocompleteComponent, AutocompleteListComponent, CheckboxComponent, DatetimeComponent, FilterComponent, GeolocationComponent, InputComponent, LuxBreadcrumbComponent, LuxModule, LuxTooltipDirective, MapComponent, ModalRef, ModalService, PaginationComponent, RadiogroupComponent, SelectComponent, VoiceRecognitionDirective };
+//# sourceMappingURL=metadev-lux.mjs.map