@metadev/lux 0.26.0 → 0.27.0

package/fesm2015/metadev-lux.mjs

@@ -1,4347 +0,0 @@
-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 * as i1$1 from '@angular/common';
-import { DOCUMENT, isPlatformBrowser, CommonModule } from '@angular/common';
-import { of, Subject, fromEvent, from, BehaviorSubject } from 'rxjs';
-import * as i1$2 from '@angular/router';
-import { NavigationEnd, RouterModule } from '@angular/router';
-import * as i1$3 from '@angular/common/http';
-import { HttpClientModule } from '@angular/common/http';
-
-// 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 pattern = 
-    // eslint-disable-next-line max-len
-    /^((([a-z]+?:\/\/)?(((([a-z0-9]([a-z0-9-]*[a-z0-9])*)\.)+[a-z]{2,})|((([0-9]{1,3}\.){3}[0-9]{1,3}))|(localhost))(\:[0-9]+)?))?((\/[a-zA-Z0-9\-_+=~.,:;%]+)*\/?)((\?|;)[a-zA-Z0-9\-_+~.,:;%]+=[a-zA-Z0-9\-_+~.,:;%]+(((&|;)[a-zA-Z0-9\-_+~.,:;%]+=[a-zA-Z0-9\-_+~.,:;%]+)*))?(#[a-zA-Z0-9\-_+~.,:;%]+(=[a-zA-Z0-9\*\-_+~.,:;%]+)?)?$/;
-    return pattern.test(value);
-};
-const isValidRelativeUrl = (value) => {
-    const pattern = 
-    // eslint-disable-next-line max-len
-    /^((([a-z]+?:\/\/)?(((([a-z0-9]([a-z0-9-]*[a-z0-9])*)\.)+[a-z]{2,})|((([0-9]{1,3}\.){3}[0-9]{1,3}))|(localhost))(\:[0-9]+)?)|([a-zA-Z0-9\-_+=~.,:;%]+))?((\/[a-zA-Z0-9\-_+=~.,:;%]+)*\/?)((\?|;)[a-zA-Z0-9\-_+~.,:;%]+=[a-zA-Z0-9\-_+~.,:;%]+(((&|;)[a-zA-Z0-9\-_+~.,:;%]+=[a-zA-Z0-9\-_+~.,:;%]+)*))?(#[a-zA-Z0-9\-_+~.,:;%]+(=[a-zA-Z0-9\*\-_+~.,:;%]+)?)?$/;
-    return pattern.test(value);
-};
-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 {
-    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 : '';
-    }
-    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 = () => { };
-    }
-    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.i0.nativeElement.focus();
-            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: "15.2.2", ngImport: i0, type: AutocompleteComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: AutocompleteComponent, selector: "lux-autocomplete", inputs: { inputId: "inputId", disabled: "disabled", readonly: "readonly", label: "label", canAddNewValues: "canAddNewValues", keepOpenAfterDelete: "keepOpenAfterDelete", value: "value", dataSource: "dataSource", required: "required", placeholder: "placeholder", resolveLabelsFunction: "resolveLabelsFunction", populateFunction: "populateFunction", instance: "instance" }, outputs: { valueChange: "valueChange", dataSourceChange: "dataSourceChange" }, providers: [
-        {
-            provide: NG_VALUE_ACCESSOR,
-            multi: true,
-            useExisting: forwardRef(() => AutocompleteComponent)
-        },
-        {
-            provide: NG_VALIDATORS,
-            multi: true,
-            useExisting: forwardRef(() => AutocompleteComponent)
-        }
-    ], viewQueries: [{ propertyName: "i0", first: true, predicate: ["i0"], descendants: true, static: true }, { propertyName: "completeDiv", first: true, predicate: ["completeDiv"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"lux-autocomplete\" (blur)=\"toggleCompletion(false, i0.value)\">\n  <div class=\"lux-autocomplete-box\">\n    <input\n      #i0\n      [id]=\"inputId\"\n      [(ngModel)]=\"label\"\n      [placeholder]=\"placeholder\"\n      [attr.disabled]=\"disabled || null\"\n      [attr.readonly]=\"readonly || null\"\n      (keydown)=\"onKeydown($event, i0.value)\"\n      (keypress)=\"onKeypress($event, i0.value)\"\n      (keyup)=\"onKeyup($event, i0.value)\"\n      (blur)=\"onLostFocus(i0.value)\"\n      (focus)=\"toggleCompletion(true, i0.value)\"\n      (click)=\"toggleCompletion(true, i0.value)\"\n      (resized)=\"onInputResized()\"\n      (window:resize)=\"onInputResized()\"\n      role=\"combobox\"\n      aria-autocomplete=\"list\"\n      [attr.aria-expanded]=\"showCompletion\"\n      aria-haspopup=\"true\"\n      attr.aria-owns=\"{{ inputId + '_list' }}\"\n      [attr.aria-activedescendant]=\"selectedOption\"\n    />\n    <div *ngIf=\"canAddNewValues\" class=\"icon-suggestions\"></div>\n    <div *ngIf=\"showSpinner; else noLoading\" class=\"icon-spinner\"></div>\n    <ng-template #noLoading>\n      <button\n        *ngIf=\"!disabled && i0.value && !showCompletion; else dropdown\"\n        type=\"button\"\n        class=\"icon-clear\"\n        aria-label=\"Clear\"\n        (click)=\"clear()\"\n      ></button>\n      <ng-template #dropdown>\n        <div\n          class=\"icon-dropdown\"\n          (click)=\"toggleCompletion(!showCompletion, i0.value)\"\n        ></div>\n      </ng-template>\n    </ng-template>\n  </div>\n  <div\n    #completeDiv\n    [class.showCompletion]=\"showCompletion\"\n    class=\"lux-completion-list\"\n    id=\"{{ inputId + '_list' }}\"\n  >\n    <ul>\n      <li\n        *ngFor=\"let item of completionList; let index = index\"\n        id=\"{{ inputId + '_' + index }}\"\n        class=\"lux-completion-item\"\n        [class.selected]=\"focusItem && item.key === focusItem.key\"\n        (click)=\"complete(item)\"\n        [attr.aria-label]=\"item.label\"\n      >\n        <span class=\"preserve-white-space\">{{ item.labelPrefix }}</span>\n        <span class=\"preserve-white-space bold\">{{ item.labelMatch }}</span>\n        <span class=\"preserve-white-space\">{{ item.labelPostfix }}</span>\n      </li>\n    </ul>\n  </div>\n</div>\n", styles: [":focus{z-index:1}input,select,textarea{border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057);margin:var(--lux-input-margin, 0rem);padding:var(--lux-input-padding, 0rem .5rem)}.alert{padding:.2rem 2rem;background:var(--lux-alert-background, #fe2e2e);color:var(--lux-alert-color, white);font-family:Consolas,monospace;width:45%;margin-right:1rem;display:inline-block}.symbol{display:inline-block;align-items:baseline;padding:0rem .5rem;margin-bottom:0;font-weight:400;color:var(--lux-symbol-color, default);text-align:center;white-space:nowrap;background:var(--lux-symbol-background, default);font-size:var(--lux-symbol-font-size, 1rem)}.bordered,.symbol{border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:var(--lux-border-radius, .25rem)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none;display:flex;align-items:center}.monospace{font-family:monospace}.default-font{color:var(--lux-font-color, black)}.lux-autocomplete .lux-autocomplete-box{display:grid;grid-template-columns:1fr max-content}.lux-autocomplete input{padding:var(--lux-autocomplete-input-padding, .1rem 1.5rem .1rem .5rem);text-overflow:ellipsis;grid-row:1;grid-column-start:1;grid-column-end:3}.lux-autocomplete .icon-suggestions{grid-row:1;grid-column:2;width:1.5rem;border:none;background-color:transparent;background:url(/assets/img/suggestions.svg) no-repeat center;background-size:.5rem .5rem;z-index:1;position:relative;left:-1rem}.lux-autocomplete .icon-clear{grid-row:1;grid-column:2;width:var(--lux-autocomplete-icon-width, 1.5rem);border:none;background-color:transparent;background:var(--lux-autocomplete-icon-clear, url(/assets/img/filter-clear.png) no-repeat center);background-size:var(--lux-autocomplete-icon-bg-size, .5rem .5rem);z-index:1}.lux-autocomplete .icon-dropdown{grid-row:1;grid-column:2;width:var(--lux-autocomplete-icon-width, 1.5rem);height:var(--lux-autocomplete-icon-height, 1.3rem);border:none;background-color:transparent;background:var(--lux-autocomplete-icon-dropdown, url(/assets/img/drop-down-arrow.svg) no-repeat center);background-size:var(--lux-autocomplete-icon-bg-size, .5rem .5rem);z-index:1}.lux-autocomplete .icon-spinner{grid-row:1;grid-column:2;width:1.5rem;border:none;background-color:transparent;background:url(/assets/img/spinner.svg) no-repeat center;background-size:1.2rem 1.2rem;z-index:1}.lux-completion-list{visibility:collapse;position:absolute;border:1px solid #ccc;margin:0rem;padding:0rem;max-height:10rem;overflow:auto;z-index:2}.lux-completion-list ul{list-style:none;margin:0rem;padding:0rem}.showCompletion{visibility:visible}.lux-completion-item{background-color:#fff;color:#000;padding:.1rem .5rem;cursor:pointer}.selected{background-color:#2e2eac;color:#fff}.disabled{background-color:#f0f0f0;color:#444}.disabled .selected{background-color:#9898ec;color:#fff}.bold{font-weight:700}.preserve-white-space{white-space:pre}\n"], dependencies: [{ kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", 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 class=\"preserve-white-space\">{{ item.labelPrefix }}</span>\n        <span class=\"preserve-white-space bold\">{{ item.labelMatch }}</span>\n        <span class=\"preserve-white-space\">{{ item.labelPostfix }}</span>\n      </li>\n    </ul>\n  </div>\n</div>\n", styles: [":focus{z-index:1}input,select,textarea{border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057);margin:var(--lux-input-margin, 0rem);padding:var(--lux-input-padding, 0rem .5rem)}.alert{padding:.2rem 2rem;background:var(--lux-alert-background, #fe2e2e);color:var(--lux-alert-color, white);font-family:Consolas,monospace;width:45%;margin-right:1rem;display:inline-block}.symbol{display:inline-block;align-items:baseline;padding:0rem .5rem;margin-bottom:0;font-weight:400;color:var(--lux-symbol-color, default);text-align:center;white-space:nowrap;background:var(--lux-symbol-background, default);font-size:var(--lux-symbol-font-size, 1rem)}.bordered,.symbol{border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:var(--lux-border-radius, .25rem)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none;display:flex;align-items:center}.monospace{font-family:monospace}.default-font{color:var(--lux-font-color, black)}.lux-autocomplete .lux-autocomplete-box{display:grid;grid-template-columns:1fr max-content}.lux-autocomplete input{padding:var(--lux-autocomplete-input-padding, .1rem 1.5rem .1rem .5rem);text-overflow:ellipsis;grid-row:1;grid-column-start:1;grid-column-end:3}.lux-autocomplete .icon-suggestions{grid-row:1;grid-column:2;width:1.5rem;border:none;background-color:transparent;background:url(/assets/img/suggestions.svg) no-repeat center;background-size:.5rem .5rem;z-index:1;position:relative;left:-1rem}.lux-autocomplete .icon-clear{grid-row:1;grid-column:2;width:var(--lux-autocomplete-icon-width, 1.5rem);border:none;background-color:transparent;background:var(--lux-autocomplete-icon-clear, url(/assets/img/filter-clear.png) no-repeat center);background-size:var(--lux-autocomplete-icon-bg-size, .5rem .5rem);z-index:1}.lux-autocomplete .icon-dropdown{grid-row:1;grid-column:2;width:var(--lux-autocomplete-icon-width, 1.5rem);height:var(--lux-autocomplete-icon-height, 1.3rem);border:none;background-color:transparent;background:var(--lux-autocomplete-icon-dropdown, url(/assets/img/drop-down-arrow.svg) no-repeat center);background-size:var(--lux-autocomplete-icon-bg-size, .5rem .5rem);z-index:1}.lux-autocomplete .icon-spinner{grid-row:1;grid-column:2;width:1.5rem;border:none;background-color:transparent;background:url(/assets/img/spinner.svg) no-repeat center;background-size:1.2rem 1.2rem;z-index:1}.lux-completion-list{visibility:collapse;position:absolute;border:1px solid #ccc;margin:0rem;padding:0rem;max-height:10rem;overflow:auto;z-index:2}.lux-completion-list ul{list-style:none;margin:0rem;padding:0rem}.showCompletion{visibility:visible}.lux-completion-item{background-color:#fff;color:#000;padding:.1rem .5rem;cursor:pointer}.selected{background-color:#2e2eac;color:#fff}.disabled{background-color:#f0f0f0;color:#444}.disabled .selected{background-color:#9898ec;color:#fff}.bold{font-weight:700}.preserve-white-space{white-space:pre}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { i0: [{
-                type: ViewChild,
-                args: ['i0', { static: true }]
-            }], 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: "15.2.2", ngImport: i0, type: AutocompleteListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AutocompleteListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: AutocompleteListComponent, selector: "lux-autocomplete-list", inputs: { value: "value", lang: "lang", inputId: "inputId", dataSource: "dataSource", placeholder: "placeholder", disabled: "disabled", deleteLabelTemplate: "deleteLabelTemplate", addMessage: "addMessage", required: "required", resolveLabelsFunction: "resolveLabelsFunction", populateFunction: "populateFunction", instance: "instance" }, outputs: { valueChange: "valueChange" }, providers: [
-        {
-            provide: NG_VALUE_ACCESSOR,
-            multi: true,
-            useExisting: forwardRef(() => AutocompleteListComponent)
-        },
-        {
-            provide: NG_VALIDATORS,
-            multi: true,
-            useExisting: forwardRef(() => AutocompleteListComponent)
-        }
-    ], viewQueries: [{ propertyName: "auto", first: true, predicate: ["auto"], descendants: true }], ngImport: i0, template: "<div [id]=\"inputId\">\n  <ul>\n    <li *ngFor=\"let label of labels; let index = index\">\n      <span>{{ label }}</span>\n      <button\n        *ngIf=\"!disabled\"\n        class=\"remove-item\"\n        (click)=\"removeAt(index)\"\n        attr.aria-label=\"{{ getDeleteMessage(label) }}\"\n      ></button>\n    </li>\n  </ul>\n  <div *ngIf=\"!disabled\" class=\"new-entry\">\n    <lux-autocomplete\n      #auto\n      [dataSource]=\"internalDataSource\"\n      [placeholder]=\"placeholder ?? literals[lang].placeholder\"\n      [(value)]=\"newEntry\"\n      (valueChange)=\"onValueChange()\"\n      (keypress)=\"onNewEntryChange($event, auto)\"\n    >\n    </lux-autocomplete>\n    <button\n      *ngIf=\"canAdd\"\n      type=\"button\"\n      class=\"add-item\"\n      aria-label=\"addMessage ?? literals[lang].addMessage\"\n      (click)=\"addNew(auto)\"\n    ></button>\n  </div>\n</div>\n", styles: [".new-entry{margin-left:1.5rem;display:grid;grid-template-columns:max-content max-content}.new-entry lux-autocomplete{grid-column:1;grid-row:1}.new-entry .add-item{grid-column:2;grid-row:1;border:none;background:var(--lux-autocomplete-list-add-icon, url(/assets/img/create.png) no-repeat .2rem .2rem);background-size:var(--lux-autocomplete-list-add-icon-size, 1.1rem);height:var(--lux-autocomplete-list-add-icon-height, 1.4rem);width:var(--lux-autocomplete-list-add-icon-width, 1.4rem)}.remove-item{margin-left:.5rem;border:none;background:var(--lux-autocomplete-list-remove-icon, url(/assets/img/delete.svg) no-repeat .2rem .1rem);height:var(--lux-autocomplete-list-remove-icon-height, 1.2rem);width:var(--lux-autocomplete-list-remove-icon-width, 1.3rem);position:relative;top:var(--lux-autocomplete-list-remove-icon-top, .2rem);background-size:var(--lux-autocomplete-list-remove-icon-size, 1rem 1rem)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AutocompleteComponent, selector: "lux-autocomplete", inputs: ["inputId", "disabled", "readonly", "label", "canAddNewValues", "keepOpenAfterDelete", "value", "dataSource", "required", "placeholder", "resolveLabelsFunction", "populateFunction", "instance"], outputs: ["valueChange", "dataSourceChange"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", 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      aria-label=\"addMessage ?? literals[lang].addMessage\"\n      (click)=\"addNew(auto)\"\n    ></button>\n  </div>\n</div>\n", styles: [".new-entry{margin-left:1.5rem;display:grid;grid-template-columns:max-content max-content}.new-entry lux-autocomplete{grid-column:1;grid-row:1}.new-entry .add-item{grid-column:2;grid-row:1;border:none;background:var(--lux-autocomplete-list-add-icon, url(/assets/img/create.png) no-repeat .2rem .2rem);background-size:var(--lux-autocomplete-list-add-icon-size, 1.1rem);height:var(--lux-autocomplete-list-add-icon-height, 1.4rem);width:var(--lux-autocomplete-list-add-icon-width, 1.4rem)}.remove-item{margin-left:.5rem;border:none;background:var(--lux-autocomplete-list-remove-icon, url(/assets/img/delete.svg) no-repeat .2rem .1rem);height:var(--lux-autocomplete-list-remove-icon-height, 1.2rem);width:var(--lux-autocomplete-list-remove-icon-width, 1.3rem);position:relative;top:var(--lux-autocomplete-list-remove-icon-top, .2rem);background-size:var(--lux-autocomplete-list-remove-icon-size, 1rem 1rem)}\n"] }]
-        }], propDecorators: { auto: [{
-                type: ViewChild,
-                args: ['auto']
-            }], 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: "15.2.2", ngImport: i0, type: LuxBreadcrumbComponent, deps: [{ token: i1$2.Router }, { token: i1$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
-LuxBreadcrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: LuxBreadcrumbComponent, selector: "lux-breadcrumb", ngImport: i0, template: "<ul class=\"lux-breadcrumb\">\n  <li *ngFor=\"let breadcrumb of breadcrumbs; last as isLast; first as isFirst\"\n      class=\"lux-breadcrumb-item\">\n    <a [class.first]=\"isFirst\" routerLink=\"{{ breadcrumb.url }}\">{{ breadcrumb.label }}</a>\n    <div *ngIf=\"!isLast\" class=\"lux-breadcrumb-separator\"></div>\n  </li>\n</ul>\n", styles: [".lux-breadcrumb{padding:10px 12px;list-style:none;list-style-type:none}.lux-breadcrumb li{display:inline;font-size:.8em}.lux-breadcrumb li a.first{font-weight:700}.lux-breadcrumb li+li:before{padding:8px;color:#000}.lux-breadcrumb li a,ol.lux-breadcrumb li a:hover{text-decoration:underline}.lux-breadcrumb a{cursor:hand}.lux-breadcrumb-separator{color:red;position:relative;top:5px;height:16px;padding:0 8px;background-image:url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 512 512%22%3E    %3Cpath d%3D%22M294.1 256L167 129c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.3 34 0L345 239c9.1 9.1 9.3 23.7.7 33.1L201.1 417c-4.7 4.7-10.9 7-17 7s-12.3-2.3-17-7c-9.4-9.4-9.4-24.6 0-33.9l127-127.1z%22%2F%3E%3C%2Fsvg%3E\");background-repeat:no-repeat;display:inline-block}\n"], dependencies: [{ kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: LuxBreadcrumbComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lux-breadcrumb', template: "<ul class=\"lux-breadcrumb\">\n  <li *ngFor=\"let breadcrumb of breadcrumbs; last as isLast; first as isFirst\"\n      class=\"lux-breadcrumb-item\">\n    <a [class.first]=\"isFirst\" routerLink=\"{{ breadcrumb.url }}\">{{ breadcrumb.label }}</a>\n    <div *ngIf=\"!isLast\" class=\"lux-breadcrumb-separator\"></div>\n  </li>\n</ul>\n", styles: [".lux-breadcrumb{padding:10px 12px;list-style:none;list-style-type:none}.lux-breadcrumb li{display:inline;font-size:.8em}.lux-breadcrumb li a.first{font-weight:700}.lux-breadcrumb li+li:before{padding:8px;color:#000}.lux-breadcrumb li a,ol.lux-breadcrumb li a:hover{text-decoration:underline}.lux-breadcrumb a{cursor:hand}.lux-breadcrumb-separator{color:red;position:relative;top:5px;height:16px;padding:0 8px;background-image:url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 512 512%22%3E    %3Cpath d%3D%22M294.1 256L167 129c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.3 34 0L345 239c9.1 9.1 9.3 23.7.7 33.1L201.1 417c-4.7 4.7-10.9 7-17 7s-12.3-2.3-17-7c-9.4-9.4-9.4-24.6 0-33.9l127-127.1z%22%2F%3E%3C%2Fsvg%3E\");background-repeat:no-repeat;display:inline-block}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$2.Router }, { type: i1$2.ActivatedRoute }]; } });
-
-const KEY_SPACE = ' ';
-class CheckboxComponent {
-    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();
-    }
-    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 = () => { };
-    }
-    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: "15.2.2", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: CheckboxComponent, selector: "lux-checkbox", inputs: { lang: "lang", value: "value", label: "label", name: "name", disabled: "disabled", inputId: "inputId" }, outputs: { valueChange: "valueChange" }, providers: [
-        {
-            provide: NG_VALUE_ACCESSOR,
-            multi: true,
-            useExisting: forwardRef(() => CheckboxComponent)
-        }
-    ], viewQueries: [{ propertyName: "ck", first: true, predicate: ["ck"], descendants: true }], ngImport: i0, template: "<div class=\"switch\">\n  <div>\n    <label *ngIf=\"label\" [for]=\"inputId\">{{ label }}</label>\n  </div>\n  <div *ngIf=\"!disabled\" class=\"switch-item\" (click)=\"clicked()\">\n    <input #ck [name]=\"name\" type=\"checkbox\" [id]=\"inputId\" />\n    <div\n      class=\"slider round\"\n      [class.on]=\"value\"\n      [class.disabled]=\"disabled\"\n      [tabindex]=\"tabindexValue\"\n      (keyup)=\"onKey($event)\"\n    ></div>\n  </div>\n  <div>\n    <span class=\"checkbox-label\" *ngIf=\"value\">{{\n      literals[lang].yesLabel\n    }}</span>\n    <span class=\"checkbox-label\" *ngIf=\"!value\">{{\n      literals[lang].noLabel\n    }}</span>\n  </div>\n</div>\n", styles: [".switch{display:flex;flex-flow:row wrap;align-items:center}label{padding-right:1.1rem}.switch-item{padding-right:.5em}.slider.round{border-radius:.7rem;width:3.1rem;height:1.4rem}.slider.round:before{border-radius:50%}.switch input{opacity:0;width:0;height:0}.slider{cursor:pointer;position:relative;top:-.7rem;background-color:#ccc;transition:.4s}.slider.on{background-color:#2196f3}.slider:before{position:absolute;content:\"\";height:1rem;width:1rem;left:.2rem;bottom:.2rem;background-color:#fff;transition:.4s}.slider.on:before{transform:translate(26px)}input:focus+.slider{box-shadow:0 0 1px #2196f3}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", 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 {
-    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;
-    }
-    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 = () => { };
-    }
-    // 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;
-        }
-        if (!newDate || !newTime) {
-            this.value = null;
-        }
-        else {
-            const newValue = `${newDate}T${newTime}`;
-            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: "15.2.2", ngImport: i0, type: DatetimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DatetimeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: DatetimeComponent, selector: "lux-datetime", inputs: { min: "min", max: "max", includeSeconds: "includeSeconds", localTime: "localTime", lang: "lang", inlineErrors: "inlineErrors", inputId: "inputId", ariaLabel: ["aria-label", "ariaLabel"], readonly: "readonly", disabled: "disabled", required: "required", value: "value" }, outputs: { valueChange: "valueChange", keyPress: "keyPress" }, providers: [
-        {
-            provide: NG_VALUE_ACCESSOR,
-            multi: true,
-            useExisting: forwardRef(() => DatetimeComponent)
-        },
-        {
-            provide: NG_VALIDATORS,
-            multi: true,
-            useExisting: forwardRef(() => DatetimeComponent)
-        }
-    ], viewQueries: [{ propertyName: "dateInput", first: true, predicate: ["dateInput"], descendants: true, static: true }, { propertyName: "timeInput", first: true, predicate: ["timeInput"], descendants: true, static: true }], ngImport: i0, template: "<input\n  #dateInput\n  class=\"rounded-left prefix\"\n  [ngClass]=\"className\"\n  type=\"date\"\n  [id]=\"inputId + '$date'\"\n  [(ngModel)]=\"dateValue\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.disabled]=\"disabled === true ? 'true' : undefined\"\n  [attr.readonly]=\"readonly === true ? 'true' : undefined\"\n  [placeholder]=\"\"\n  (keyup)=\"onEventDatetime(dateInput.value, timeInput.value)\"\n  (change)=\"onEventDatetime(dateInput.value, timeInput.value)\"\n  (keypress)=\"onKeyPress($event)\"\n  (blur)=\"onLostFocus()\"\n/>\n<input\n  #timeInput\n  [class]=\"(disabled || readonly || !isClearable()) && localTime ? 'rounded-right' : ''\"\n  [ngClass]=\"className\"\n  type=\"time\"\n  [id]=\"inputId + '$time'\"\n  [(ngModel)]=\"timeValue\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.disabled]=\"disabled === true ? 'true' : undefined\"\n  [attr.readonly]=\"readonly === true ? 'true' : undefined\"\n  [placeholder]=\"\"\n  [step]=\"includeSeconds ? 1 : 60\"\n  (keyup)=\"onEventDatetime(dateInput.value, timeInput.value)\"\n  (change)=\"onEventDatetime(dateInput.value, timeInput.value)\"\n  (keypress)=\"onKeyPress($event)\"\n  (blur)=\"onLostFocus()\"\n/>\n<ng-container\n  *ngIf=\"!localTime\"\n>\n  <div\n    [class]=\"disabled || readonly || !isClearable() ? 'rounded-right postfix symbol' : 'postfix symbol'\"\n    [ngClass]=\"className\"\n  >\n    <span>{{ localTime ? '' : 'UTC' }}</span>\n  </div>\n</ng-container>\n<button\n  #clearButton\n  *ngIf=\"!disabled && !readonly && isClearable()\"\n  type=\"button\"\n  class=\"rounded-right postfix bordered icon-clear\"\n  [id]=\"inputId + '$clear'\"\n  (click)=\"clear()\"\n  aria-label=\"clear\"\n></button>\n\n<div *ngIf=\"inlineErrors && lastErrors && (dirty || touched)\" class=\"alert\">\n  <div *ngIf=\"lastErrors.required\">\n    {{ userErrors[lang].required }}\n  </div>\n  <div *ngIf=\"lastErrors.min\">\n    {{ userErrors[lang].min.replace('$min', lastErrors.min.min) }}\n  </div>\n  <div *ngIf=\"lastErrors.max\">\n    {{ userErrors[lang].max.replace('$max', lastErrors.max.max) }}\n  </div>\n</div>\n", styles: [":focus{z-index:1}input,select,textarea{border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057);margin:var(--lux-input-margin, 0rem);padding:var(--lux-input-padding, 0rem .5rem)}.alert{padding:.2rem 2rem;background:var(--lux-alert-background, #fe2e2e);color:var(--lux-alert-color, white);font-family:Consolas,monospace;width:45%;margin-right:1rem;display:inline-block}.symbol{display:inline-block;align-items:baseline;padding:0rem .5rem;margin-bottom:0;font-weight:400;color:var(--lux-symbol-color, default);text-align:center;white-space:nowrap;background:var(--lux-symbol-background, default);font-size:var(--lux-symbol-font-size, 1rem)}.bordered,.symbol{border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:var(--lux-border-radius, .25rem)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none;display:flex;align-items:center}.monospace{font-family:monospace}.default-font{color:var(--lux-font-color, black)}:host{display:flex;align-items:stretch}.readonly{border:none}.readonly:focus{border:none;outline:none}.disabled{background-color:var(--lux-disabled-color, #f1f1f1);border-color:var(--lux-disabled-border-color, #6d6d6d)}.icon-clear{grid-row:1;grid-column:2;width:var(--lux-autocomplete-icon-width, 1.5rem);background:var(--lux-autocomplete-icon-clear, url(/assets/img/filter-clear.png) no-repeat center);background-size:var(--lux-autocomplete-icon-bg-size, .5rem .5rem);z-index:1}\n"], dependencies: [{ kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", 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:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057);margin:var(--lux-input-margin, 0rem);padding:var(--lux-input-padding, 0rem .5rem)}.alert{padding:.2rem 2rem;background:var(--lux-alert-background, #fe2e2e);color:var(--lux-alert-color, white);font-family:Consolas,monospace;width:45%;margin-right:1rem;display:inline-block}.symbol{display:inline-block;align-items:baseline;padding:0rem .5rem;margin-bottom:0;font-weight:400;color:var(--lux-symbol-color, default);text-align:center;white-space:nowrap;background:var(--lux-symbol-background, default);font-size:var(--lux-symbol-font-size, 1rem)}.bordered,.symbol{border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:var(--lux-border-radius, .25rem)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none;display:flex;align-items:center}.monospace{font-family:monospace}.default-font{color:var(--lux-font-color, black)}:host{display:flex;align-items:stretch}.readonly{border:none}.readonly:focus{border:none;outline:none}.disabled{background-color:var(--lux-disabled-color, #f1f1f1);border-color:var(--lux-disabled-border-color, #6d6d6d)}.icon-clear{grid-row:1;grid-column:2;width:var(--lux-autocomplete-icon-width, 1.5rem);background:var(--lux-autocomplete-icon-clear, url(/assets/img/filter-clear.png) no-repeat center);background-size:var(--lux-autocomplete-icon-bg-size, .5rem .5rem);z-index:1}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { dateInput: [{
-                type: ViewChild,
-                args: ['dateInput', { static: true }]
-            }], 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 {
-    /** 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;
-    }
-    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();
-    }
-    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: "15.2.2", ngImport: i0, type: FilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: FilterComponent, selector: "lux-filter", inputs: { disabled: "disabled", inputId: "inputId", placeholder: "placeholder", searchValue: "searchValue", searchOnType: "searchOnType", ariaLabel: ["aria-label", "ariaLabel"], debounce: "debounce" }, outputs: { searchValueChange: "searchValueChange" }, providers: [
-        {
-            provide: NG_VALUE_ACCESSOR,
-            multi: true,
-            useExisting: forwardRef(() => FilterComponent)
-        }
-    ], ngImport: i0, template: "<div class=\"filter\">\n  <input\n    #i0\n    type=\"text\"\n    [attr.aria-label]=\"ariaLabel\"\n    [placeholder]=\"placeholder\"\n    [id]=\"inputId\"\n    [disabled]=\"disabled\"\n    [value]=\"searchValue\"\n    (valueChange)=\"onInputValueChange(i0.value)\"\n    (keyup)=\"keyup($event, i0.value)\"\n  />\n\n  <button\n    [class.hide]=\"!searchValue\"\n    aria-label=\"Clear\"\n    class=\"clear-indicator icon icon-clear\"\n    type=\"button\"\n    (click)=\"clear()\"\n  ></button>\n  <i *ngIf=\"1 || searchOnType\" class=\"search-indicator icon icon-search\"></i>\n  <button\n    class=\"btn-search\"\n    *ngIf=\"!searchOnType\"\n    type=\"button\"\n    [disabled]=\"disabled\"\n    (click)=\"search()\"\n  >\n    Search\n  </button>\n</div>\n", styles: [":focus{z-index:1}input,select,textarea{border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057);margin:var(--lux-input-margin, 0rem);padding:var(--lux-input-padding, 0rem .5rem)}.alert{padding:.2rem 2rem;background:var(--lux-alert-background, #fe2e2e);color:var(--lux-alert-color, white);font-family:Consolas,monospace;width:45%;margin-right:1rem;display:inline-block}.symbol{display:inline-block;align-items:baseline;padding:0rem .5rem;margin-bottom:0;font-weight:400;color:var(--lux-symbol-color, default);text-align:center;white-space:nowrap;background:var(--lux-symbol-background, default);font-size:var(--lux-symbol-font-size, 1rem)}.bordered,.symbol{border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:var(--lux-border-radius, .25rem)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none;display:flex;align-items:center}.monospace{font-family:monospace}.default-font{color:var(--lux-font-color, black)}.filter{display:grid;grid-template-columns:auto 1.5rem 1.5rem .5rem auto}.filter input{grid-row:1;grid-column-start:1;grid-column-end:4}.filter .hide{visibility:collapse}.filter .clear-indicator{grid-row:1;grid-column:2;border:none}.filter .search-indicator{grid-row:1;grid-column:3}.filter .btn-search{grid-row:1;grid-column:5}.filter .icon-search{background:var(--lux-filter-icon-search, url(/assets/img/filter-search.png) no-repeat center);background-size:var(--lux-filter-icon-bg-size, 1rem);background-position:center;width:var(--lux-filter-icon-width, 1rem)}.filter .icon-clear{background:var(--lux-filter-icon-clear, url(/assets/img/filter-clear.png) no-repeat center);background-size:var(--lux-filter-icon-bg-size, 1rem);background-position:center}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", 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:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057);margin:var(--lux-input-margin, 0rem);padding:var(--lux-input-padding, 0rem .5rem)}.alert{padding:.2rem 2rem;background:var(--lux-alert-background, #fe2e2e);color:var(--lux-alert-color, white);font-family:Consolas,monospace;width:45%;margin-right:1rem;display:inline-block}.symbol{display:inline-block;align-items:baseline;padding:0rem .5rem;margin-bottom:0;font-weight:400;color:var(--lux-symbol-color, default);text-align:center;white-space:nowrap;background:var(--lux-symbol-background, default);font-size:var(--lux-symbol-font-size, 1rem)}.bordered,.symbol{border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:var(--lux-border-radius, .25rem)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none;display:flex;align-items:center}.monospace{font-family:monospace}.default-font{color:var(--lux-font-color, black)}.filter{display:grid;grid-template-columns:auto 1.5rem 1.5rem .5rem auto}.filter input{grid-row:1;grid-column-start:1;grid-column-end:4}.filter .hide{visibility:collapse}.filter .clear-indicator{grid-row:1;grid-column:2;border:none}.filter .search-indicator{grid-row:1;grid-column:3}.filter .btn-search{grid-row:1;grid-column:5}.filter .icon-search{background:var(--lux-filter-icon-search, url(/assets/img/filter-search.png) no-repeat center);background-size:var(--lux-filter-icon-bg-size, 1rem);background-position:center;width:var(--lux-filter-icon-width, 1rem)}.filter .icon-clear{background:var(--lux-filter-icon-clear, url(/assets/img/filter-clear.png) no-repeat center);background-size:var(--lux-filter-icon-bg-size, 1rem);background-position:center}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { disabled: [{
-                type: Input
-            }], inputId: [{
-                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 {
-    /**
-     * 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;
-        }
-    }
-    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, () => { });
-    }
-    /**
-     * 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 {
-    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);
-        }
-    }
-    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;
-    }
-    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: "15.2.2", ngImport: i0, type: LuxModalWindowComponent, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-LuxModalWindowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: LuxModalWindowComponent, selector: "lux-modal-window", inputs: { ariaDescribedBy: "ariaDescribedBy", ariaLabelledBy: "ariaLabelledBy", backdrop: "backdrop", keyboard: "keyboard", windowClass: "windowClass" }, outputs: { dismissEvent: "dismissEvent" }, host: { listeners: { "click": "backdropClick($event.target)", "keyup.esc": "escKey($event)" }, properties: { "class": "this.class", "attr.role": "this.role", "tabindex": "this.tabindex", "attr.aria-modal": "this.ariamodal", "attr.aria-labelledby": "this.hostAriaLabelledBy", "attr.aria-describedby": "this.hostAriaDescribedBy" } }, ngImport: i0, template: `
-    <div class="modal-dialog" role="document">
-      <div class="modal-content"><ng-content></ng-content></div>
-    </div>
-  `, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", 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: "15.2.2", ngImport: i0, type: LuxModalBackdropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-LuxModalBackdropComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: LuxModalBackdropComponent, selector: "lux-modal-backdrop", inputs: { backdropClass: "backdropClass" }, host: { properties: { "class": "this.class", "style": "this.style" } }, ngImport: i0, template: '', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: LuxModalBackdropComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'lux-modal-backdrop',
-                    template: ''
-                }]
-        }], propDecorators: { backdropClass: [{
-                type: Input
-            }], class: [{
-                type: HostBinding,
-                args: ['class']
-            }], style: [{
-                type: HostBinding,
-                args: ['style']
-            }] } });
-
-class LuxModalConfig {
-    constructor() {
-        this.backdrop = true;
-    }
-}
-LuxModalConfig.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: LuxModalConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-LuxModalConfig.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: LuxModalConfig, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", 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: "15.2.2", ngImport: i0, type: ModalStack, deps: [{ token: i0.ApplicationRef }, { token: DOCUMENT }, { token: i0.Injector }, { token: i0.RendererFactory2 }, { token: LuxModalConfig }], target: i0.ɵɵFactoryTarget.Injectable });
-ModalStack.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ModalStack, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", 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: "15.2.2", ngImport: i0, type: ModalService, deps: [{ token: ModalStack }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Injectable });
-ModalService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ModalService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", 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: "15.2.2", ngImport: i0, type: GeolocationService, deps: [{ token: i1$3.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
-GeolocationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: GeolocationService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: GeolocationService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: function () { return [{ type: i1$3.HttpClient }]; } });
-const samePosition = (searchResult, keys) => {
-    let found = false;
-    keys.forEach((item) => {
-        if (searchResult.lon === item.coordinates[0] &&
-            searchResult.lat === item.coordinates[1]) {
-            found = true;
-        }
-    });
-    return found;
-};
-const distinct = (data) => {
-    const unique = {};
-    return data.filter((r) => {
-        if (unique[r.display_name]) {
-            return false;
-        }
-        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: "15.2.2", ngImport: i0, type: OpenLayerLoaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-OpenLayerLoaderService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: OpenLayerLoaderService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", 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 {
-    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
-        };
-    }
-    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);
-        });
-    }
-    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: "15.2.2", ngImport: i0, type: MapComponent, deps: [{ token: OpenLayerLoaderService }], target: i0.ɵɵFactoryTarget.Component });
-MapComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: MapComponent, selector: "lux-map", inputs: { mapId: "mapId", zoom: "zoom", center: "center", readonly: "readonly", markerCoordinates: "markerCoordinates", markerPoint: "markerPoint" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div [id]=\"mapId\" class=\"map\" (resized)=\"onResize()\"></div>\n", styles: [".map{min-height:100px;height:100%;min-width:160px;width:100%}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: MapComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lux-map', template: "<div [id]=\"mapId\" class=\"map\" (resized)=\"onResize()\"></div>\n", styles: [".map{min-height:100px;height:100%;min-width:160px;width:100%}\n"] }]
-        }], ctorParameters: function () { return [{ type: OpenLayerLoaderService }]; }, propDecorators: { mapId: [{
-                type: Input
-            }], zoom: [{
-                type: Input
-            }], center: [{
-                type: Input
-            }], readonly: [{
-                type: Input
-            }], markerCoordinates: [{
-                type: Input
-            }], markerPoint: [{
-                type: Input
-            }], valueChange: [{
-                type: Output
-            }] } });
-
-class GeolocationComponent {
-    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;
-    }
-    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 = () => { };
-    }
-    // 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: "15.2.2", ngImport: i0, type: GeolocationComponent, deps: [{ token: ModalService }, { token: GeolocationService }], target: i0.ɵɵFactoryTarget.Component });
-GeolocationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: GeolocationComponent, selector: "lux-geolocation", inputs: { minLatitude: "minLatitude", maxLatitude: "maxLatitude", minLongitude: "minLongitude", maxLongitude: "maxLongitude", step: "step", zoom: "zoom", lang: "lang", inlineErrors: "inlineErrors", inputId: "inputId", ariaLabel: ["aria-label", "ariaLabel"], readonly: "readonly", disabled: "disabled", required: "required", value: "value" }, outputs: { valueChange: "valueChange", keyPress: "keyPress" }, providers: [
-        {
-            provide: NG_VALUE_ACCESSOR,
-            multi: true,
-            useExisting: forwardRef(() => GeolocationComponent)
-        },
-        {
-            provide: NG_VALIDATORS,
-            multi: true,
-            useExisting: forwardRef(() => GeolocationComponent)
-        }
-    ], viewQueries: [{ propertyName: "latitude", first: true, predicate: ["latitude"], descendants: true, static: true }, { propertyName: "longitude", first: true, predicate: ["longitude"], descendants: true, static: true }, { propertyName: "map", first: true, predicate: ["map"], descendants: true }], ngImport: i0, template: "<input\n  #latitude\n  class=\"rounded-left prefix\"\n  [ngClass]=\"className\"\n  type=\"number\"\n  [id]=\"inputId + '$latitude'\"\n  [(ngModel)]=\"latitudeValue\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.disabled]=\"disabled === true ? 'true' : undefined\"\n  [attr.readonly]=\"readonly === true ? 'true' : undefined\"\n  [attr.min]=\"\n    minLatitude !== undefined && minLatitude !== null\n      ? minLatitude.toString()\n      : undefined\n  \"\n  [attr.max]=\"\n    maxLatitude !== undefined && maxLatitude !== null\n      ? maxLatitude.toString()\n      : undefined\n  \"\n  [attr.step]=\"\n    step !== undefined && step !== null ? step.toString() : undefined\n  \"\n  [placeholder]=\"i18n[lang].lat\"\n  (keyup)=\"onEventLatitude(latitude.value)\"\n  (change)=\"onEventLatitude(latitude.value)\"\n  (keypress)=\"onKeyPress($event)\"\n  (blur)=\"onLostFocus()\"\n/>\n<div\n  class=\"infix symbol monospace clickable\"\n  [ngClass]=\"className\"\n  (click)=\"openModalMap(modalMap)\">\n  <span *ngIf=\"isValidNumber(latitudeValue) && latitudeValue >= 0\">{{\n    i18n[lang].cardinalPoints.north\n  }}</span>\n  <span *ngIf=\"isValidNumber(latitudeValue) && latitudeValue < 0\">{{\n    i18n[lang].cardinalPoints.south\n  }}</span>\n  <span *ngIf=\"!isValidNumber(latitudeValue)\">-</span>\n</div>\n<input\n  #longitude\n  class=\"prefix\"\n  [ngClass]=\"className\"\n  type=\"number\"\n  [id]=\"inputId + '$longitude'\"\n  [(ngModel)]=\"longitudeValue\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.disabled]=\"disabled === true ? 'true' : undefined\"\n  [attr.readonly]=\"readonly === true ? 'true' : undefined\"\n  [attr.min]=\"\n    minLongitude !== undefined && minLongitude !== null\n      ? minLongitude.toString()\n      : undefined\n  \"\n  [attr.max]=\"\n    maxLongitude !== undefined && maxLongitude !== null\n      ? maxLongitude.toString()\n      : undefined\n  \"\n  [attr.step]=\"\n    step !== undefined && step !== null ? step.toString() : undefined\n  \"\n  [placeholder]=\"i18n[lang].lon\"\n  (keyup)=\"onEventLongitude(longitude.value)\"\n  (change)=\"onEventLongitude(longitude.value)\"\n  (keypress)=\"onKeyPress($event)\"\n  (blur)=\"onLostFocus()\"\n/>\n<div\n  class=\"infix symbol monospace clickable\"\n  [ngClass]=\"className\"\n  (click)=\"openModalMap(modalMap)\"\n>\n  <span *ngIf=\"isValidNumber(longitudeValue) && longitudeValue >= 0\">{{\n    i18n[lang].cardinalPoints.east\n  }}</span>\n  <span *ngIf=\"isValidNumber(longitudeValue) && longitudeValue < 0\">{{\n    i18n[lang].cardinalPoints.west\n  }}</span>\n  <span *ngIf=\"!isValidNumber(longitudeValue)\">-</span>\n</div>\n<div\n  [class]=\"\n    disabled || readonly || !isClearable()\n      ? 'clickable rounded-right postfix symbol'\n      : 'clickable postfix symbol'\n  \"\n  [ngClass]=\"className\"\n  (click)=\"openModalMap(modalMap)\"\n>\n  <span class=\"icon-globe\"></span>\n</div>\n<button\n  #clearButton\n  *ngIf=\"!disabled && !readonly && isClearable()\"\n  class=\"rounded-right postfix bordered icon icon-clear\"\n  [id]=\"inputId + '$clear'\"\n  type=\"button\"\n  (click)=\"clear()\"\n  aria-label=\"clear\"\n></button>\n\n<div *ngIf=\"inlineErrors && lastErrors && (dirty || touched)\" class=\"alert\">\n  <div *ngIf=\"lastErrors.required\">\n    {{ i18n[lang].userErrors.required }}\n  </div>\n  <div *ngIf=\"lastErrors.minLatitude\">\n    {{\n      i18n[lang].userErrors.minLatitude.replace(\n        '$minLatitude',\n        lastErrors.minLatitude.min\n      )\n    }}\n  </div>\n  <div *ngIf=\"lastErrors.maxLatitude\">\n    {{\n      i18n[lang].userErrors.maxLatitude.replace(\n        '$maxLatitude',\n        lastErrors.maxLatitude.max\n      )\n    }}\n  </div>\n  <div *ngIf=\"lastErrors.minLongitude\">\n    {{\n      i18n[lang].userErrors.minLongitude.replace(\n        '$minLongitude',\n        lastErrors.minLongitude.min\n      )\n    }}\n  </div>\n  <div *ngIf=\"lastErrors.maxLongitude\">\n    {{\n      i18n[lang].userErrors.maxLongitude.replace(\n        '$maxLongitude',\n        lastErrors.maxLongitude.max\n      )\n    }}\n  </div>\n</div>\n\n<ng-template #modalMap let-modal>\n  <div class=\"lux-modal-header\">\n    <h4 class=\"modal-title default-font\" id=\"modal-basic-title\">{{ mapTitle }}</h4>\n    <button\n      type=\"button\"\n      class=\"close\"\n      aria-label=\"Close\"\n      (click)=\"modal.dismiss('Cross click')\"\n    >\n      <span aria-hidden=\"true\">\u00D7</span>\n    </button>\n  </div>\n  <div class=\"lux-modal-body content\">\n    <lux-autocomplete\n      #searchBar\n      [attr.aria-label]=\"i18n[lang].typeToSearch\"\n      [placeholder]=\"i18n[lang].typeToSearch\"\n      *ngIf=\"!disabled && !readonly\"\n      [instance]=\"self\"\n      [resolveLabelsFunction]=\"getLabels\"\n      [populateFunction]=\"getData\"\n      (valueChange)=\"onSearchLocationChanged(searchBar.value, map)\"\n    ></lux-autocomplete>\n    <div class=\"map-container\">\n      <lux-map\n        #map\n        [center]=\"value\"\n        [markerPoint]=\"value\"\n        [zoom]=\"zoom\"\n        [readonly]=\"readonly === true || disabled === true ? true : false\"\n      ></lux-map>\n    </div>\n  </div>\n  <div class=\"lux-modal-footer\">\n    <button\n      *ngIf=\"disabled || readonly\"\n      type=\"button\"\n      class=\"btn btn-cancel\"\n      (click)=\"modal.close('cancel')\"\n    >\n      {{ i18n[lang].closeAction }}\n    </button>\n    <button\n      *ngIf=\"!disabled && !readonly\"\n      type=\"button\"\n      class=\"btn btn-cancel\"\n      (click)=\"modal.close('cancel')\"\n    >\n      {{ i18n[lang].cancelAction }}\n    </button>\n    <button\n      *ngIf=\"!disabled && !readonly\"\n      type=\"button\"\n      class=\"btn btn-select\"\n      (click)=\"modal.close(map.markerPoint.coordinates)\"\n    >\n      {{ i18n[lang].selectAction }}\n    </button>\n  </div>\n</ng-template>\n", styles: [":focus{z-index:1}input,select,textarea{border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057);margin:var(--lux-input-margin, 0rem);padding:var(--lux-input-padding, 0rem .5rem)}.alert{padding:.2rem 2rem;background:var(--lux-alert-background, #fe2e2e);color:var(--lux-alert-color, white);font-family:Consolas,monospace;width:45%;margin-right:1rem;display:inline-block}.symbol{display:inline-block;align-items:baseline;padding:0rem .5rem;margin-bottom:0;font-weight:400;color:var(--lux-symbol-color, default);text-align:center;white-space:nowrap;background:var(--lux-symbol-background, default);font-size:var(--lux-symbol-font-size, 1rem)}.bordered,.symbol{border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:var(--lux-border-radius, .25rem)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none;display:flex;align-items:center}.monospace{font-family:monospace}.default-font{color:var(--lux-font-color, black)}:host{display:flex;align-items:stretch}.btn-select{color:#fff;background-color:#4242d1;margin-left:2rem}.btn-cancel{color:#fff;background-color:#c22929}.readonly{border:none}.readonly:focus{border:none;outline:none}.disabled{background-color:var(--lux-disabled-color, #f1f1f1);border-color:var(--lux-disabled-border-color, #6d6d6d)}.icon,.icon-clear,.icon-globe{display:inline-block;background-size:1rem 1rem;background-position:center;background-repeat:no-repeat;min-width:1rem;min-height:1rem;width:var(--lux-autocomplete-icon-width, 1.5rem);z-index:1}.clickable{cursor:pointer}.icon-globe{background:var(--lux-autocomplete-icon-globe, url(/assets/img/globe.svg) no-repeat center);background-size:1rem;height:100%}.icon-clear{width:var(--lux-autocomplete-icon-width, 1.5rem);background:var(--lux-autocomplete-icon-clear, url(/assets/img/filter-clear.png) no-repeat center);background-size:var(--lux-autocomplete-icon-bg-size, .5rem .5rem);z-index:1}.lux-modal-body{padding:0}.map-container{height:var(--lux-geolocation-map-height, 45vh);width:var(--lux-geolocation-map-width, 90vw);max-width:100%}\n"], dependencies: [{ kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AutocompleteComponent, selector: "lux-autocomplete", inputs: ["inputId", "disabled", "readonly", "label", "canAddNewValues", "keepOpenAfterDelete", "value", "dataSource", "required", "placeholder", "resolveLabelsFunction", "populateFunction", "instance"], outputs: ["valueChange", "dataSourceChange"] }, { kind: "component", type: MapComponent, selector: "lux-map", inputs: ["mapId", "zoom", "center", "readonly", "markerCoordinates", "markerPoint"], outputs: ["valueChange"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", 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:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057);margin:var(--lux-input-margin, 0rem);padding:var(--lux-input-padding, 0rem .5rem)}.alert{padding:.2rem 2rem;background:var(--lux-alert-background, #fe2e2e);color:var(--lux-alert-color, white);font-family:Consolas,monospace;width:45%;margin-right:1rem;display:inline-block}.symbol{display:inline-block;align-items:baseline;padding:0rem .5rem;margin-bottom:0;font-weight:400;color:var(--lux-symbol-color, default);text-align:center;white-space:nowrap;background:var(--lux-symbol-background, default);font-size:var(--lux-symbol-font-size, 1rem)}.bordered,.symbol{border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:var(--lux-border-radius, .25rem)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none;display:flex;align-items:center}.monospace{font-family:monospace}.default-font{color:var(--lux-font-color, black)}:host{display:flex;align-items:stretch}.btn-select{color:#fff;background-color:#4242d1;margin-left:2rem}.btn-cancel{color:#fff;background-color:#c22929}.readonly{border:none}.readonly:focus{border:none;outline:none}.disabled{background-color:var(--lux-disabled-color, #f1f1f1);border-color:var(--lux-disabled-border-color, #6d6d6d)}.icon,.icon-clear,.icon-globe{display:inline-block;background-size:1rem 1rem;background-position:center;background-repeat:no-repeat;min-width:1rem;min-height:1rem;width:var(--lux-autocomplete-icon-width, 1.5rem);z-index:1}.clickable{cursor:pointer}.icon-globe{background:var(--lux-autocomplete-icon-globe, url(/assets/img/globe.svg) no-repeat center);background-size:1rem;height:100%}.icon-clear{width:var(--lux-autocomplete-icon-width, 1.5rem);background:var(--lux-autocomplete-icon-clear, url(/assets/img/filter-clear.png) no-repeat center);background-size:var(--lux-autocomplete-icon-bg-size, .5rem .5rem);z-index:1}.lux-modal-body{padding:0}.map-container{height:var(--lux-geolocation-map-height, 45vh);width:var(--lux-geolocation-map-width, 90vw);max-width:100%}\n"] }]
-        }], ctorParameters: function () { return [{ type: ModalService }, { type: GeolocationService }]; }, propDecorators: { latitude: [{
-                type: ViewChild,
-                args: ['latitude', { static: true }]
-            }], 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: "15.2.2", ngImport: i0, type: RegexpService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-RegexpService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: RegexpService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: RegexpService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: function () { return []; } });
-
-class InputComponent {
-    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;
-    }
-    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 = () => { };
-    }
-    // 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) && !isValidRelativeUrl(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: "15.2.2", ngImport: i0, type: InputComponent, deps: [{ token: RegexpService }], target: i0.ɵɵFactoryTarget.Component });
-InputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: InputComponent, selector: "lux-input", inputs: { rows: "rows", cols: "cols", step: "step", min: "min", max: "max", lang: "lang", inlineErrors: "inlineErrors", inputId: "inputId", ariaLabel: ["aria-label", "ariaLabel"], readonly: "readonly", disabled: "disabled", pattern: "pattern", currency: "currency", placeholder: "placeholder", required: "required", type: "type", value: "value" }, outputs: { valueChange: "valueChange", keyPress: "keyPress" }, providers: [
-        {
-            provide: NG_VALUE_ACCESSOR,
-            multi: true,
-            useExisting: forwardRef(() => InputComponent)
-        },
-        {
-            provide: NG_VALIDATORS,
-            multi: true,
-            useExisting: forwardRef(() => InputComponent)
-        }
-    ], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "textarea", first: true, predicate: ["textarea"], descendants: true }, { propertyName: "colorpicker", first: true, predicate: ["colorpicker"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"currency && currency === 'USD'\" class=\"prefix rounded-left symbol\" [ngClass]=\"className\">\n  <span>$</span>\n</div>\n<input\n  #input\n  *ngIf=\"type !== 'textarea'\"\n  [class]=\"hasPrefix() ? (hasPostfix() ? 'infix' : 'postfix rounded-right') : (hasPostfix() ? 'prefix rounded-left' : 'rounded')\"\n  [ngClass]=\"className\"\n  placement=\"top\"\n  [id]=\"inputId\"\n  [type]=\"domain\"\n  [attr.value]=\"value\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.disabled]=\"disabled === true ? 'true' : undefined\"\n  [attr.readonly]=\"readonly === true ? 'true' : undefined\"\n  [attr.min]=\"min?.toString() || undefined\"\n  [attr.max]=\"max?.toString() || undefined\"\n  [attr.step]=\"step?.toString() || undefined\"\n  [attr.pattern]=\"pattern || undefined\"\n  [placeholder]=\"placeholder\"\n  (keyup)=\"onKeyUp(input.value)\"\n  (change)=\"onChangeValue(input.value)\"\n  (keypress)=\"onKeyPress($event)\"\n  (blur)=\"onLostFocus()\"\n/>\n<textarea\n  #textarea\n  *ngIf=\"type === 'textarea'\"\n  class=\"rounded\"\n  [ngClass]=\"className\"\n  placement=\"top\"\n  [id]=\"inputId\"\n  [attr.value]=\"value\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.disabled]=\"disabled === true ? 'true' : undefined\"\n  [attr.readonly]=\"readonly === true ? 'true' : undefined\"\n  [attr.cols]=\"cols?.toString() || undefined\"\n  [attr.rows]=\"rows?.toString() || undefined\"\n  [placeholder]=\"placeholder\"\n  (keyup)=\"onKeyUp(textarea.value)\"\n  (change)=\"onChangeValue(textarea.value)\"\n  (keypress)=\"onKeyPress($event)\"\n  (blur)=\"onLostFocus()\"\n></textarea>\n<div *ngIf=\"currency && currency === 'EUR'\" class=\"postfix rounded-right symbol\" [ngClass]=\"className\">\n  <span>\u20AC</span>\n</div>\n<div *ngIf=\"isPercentage()\" class=\"postfix rounded-right symbol\" [ngClass]=\"className\">\n  <span>%</span>\n</div>\n<div *ngIf=\"isPermillage()\" class=\"postfix rounded-right symbol\" [ngClass]=\"className\">\n  <span>\u2030</span>\n</div>\n<div *ngIf=\"isUrl() && !!value\" class=\"postfix rounded-right symbol clickable\" [ngClass]=\"className\">\n  <a href=\"{{ value }}\" target=\"_blank\">\n    <span class=\"icon-external\"></span>\n  </a>\n</div>\n<div *ngIf=\"isColor()\" class=\"postfix rounded-right bordered transparency\" [ngClass]=\"className\">\n  <div class=\"rounded-right full-space\" [ngStyle]=\"{'background-color': color}\">\n    <input\n      #colorpicker\n      class=\"minimal-space clickable invisible rounded-right full-space\"\n      [id]=\"inputId + '$colorpicker'\"\n      type=\"color\"\n      [attr.value]=\"value\"\n      [attr.disabled]=\"disabled === true ? 'true' : undefined\"\n      [attr.readonly]=\"readonly === true ? 'true' : undefined\"\n      (change)=\"onColorPicked(colorpicker.value)\"\n      (keypress)=\"onKeyPress($event)\"\n      (blur)=\"onLostFocus()\"\n    />\n  </div>\n</div>\n\n<div *ngIf=\"inlineErrors && lastErrors && (dirty || touched)\" class=\"alert\">\n  <div *ngIf=\"lastErrors.required\">\n    {{ userErrors[this.lang].required }}\n  </div>\n  <div *ngIf=\"lastErrors.email\">{{ userErrors[this.lang].email }}</div>\n  <div *ngIf=\"lastErrors.url\">{{ userErrors[this.lang].url }}</div>\n  <div *ngIf=\"lastErrors.min\">\n    {{ userErrors[this.lang].min.replace('$min', lastErrors.min.min) }}\n  </div>\n  <div *ngIf=\"lastErrors.max\">\n    {{ userErrors[this.lang].max.replace('$max', lastErrors.max.max) }}\n  </div>\n</div>\n", styles: [":focus{z-index:1}input,select,textarea{border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057);margin:var(--lux-input-margin, 0rem);padding:var(--lux-input-padding, 0rem .5rem)}.alert{padding:.2rem 2rem;background:var(--lux-alert-background, #fe2e2e);color:var(--lux-alert-color, white);font-family:Consolas,monospace;width:45%;margin-right:1rem;display:inline-block}.symbol{display:inline-block;align-items:baseline;padding:0rem .5rem;margin-bottom:0;font-weight:400;color:var(--lux-symbol-color, default);text-align:center;white-space:nowrap;background:var(--lux-symbol-background, default);font-size:var(--lux-symbol-font-size, 1rem)}.bordered,.symbol{border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:var(--lux-border-radius, .25rem)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none;display:flex;align-items:center}.monospace{font-family:monospace}.default-font{color:var(--lux-font-color, black)}:host{display:flex;align-items:stretch;min-height:1.5rem}input[type=color]{min-height:100%;height:0}.readonly{border:none}.readonly:focus{border:none;outline:none}.disabled{background-color:var(--lux-disabled-color, #f1f1f1);border-color:var(--lux-disabled-border-color, #6d6d6d)}.clickable{cursor:pointer}.full-space{width:100%;height:100%;margin:0;border:0;padding:0}.minimal-space,.icon,.icon-external{min-width:1rem;min-height:1rem}.icon,.icon-external{display:inline-block;background-size:1rem 1rem;background-position:center;background-repeat:no-repeat;width:var(--lux-autocomplete-icon-width, 1.5rem);z-index:1}.icon-external{background:var(--lux-input-icon-external, url(/assets/img/external.svg) no-repeat center);background-size:1rem;background-position-y:.1rem;height:100%}.invisible{opacity:0}.transparency{background-image:conic-gradient(white 0deg 90deg,lightgray 90deg 180deg,white 180deg 270deg,lightgray 270deg 360deg)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", 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:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057);margin:var(--lux-input-margin, 0rem);padding:var(--lux-input-padding, 0rem .5rem)}.alert{padding:.2rem 2rem;background:var(--lux-alert-background, #fe2e2e);color:var(--lux-alert-color, white);font-family:Consolas,monospace;width:45%;margin-right:1rem;display:inline-block}.symbol{display:inline-block;align-items:baseline;padding:0rem .5rem;margin-bottom:0;font-weight:400;color:var(--lux-symbol-color, default);text-align:center;white-space:nowrap;background:var(--lux-symbol-background, default);font-size:var(--lux-symbol-font-size, 1rem)}.bordered,.symbol{border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:var(--lux-border-radius, .25rem)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none;display:flex;align-items:center}.monospace{font-family:monospace}.default-font{color:var(--lux-font-color, black)}:host{display:flex;align-items:stretch;min-height:1.5rem}input[type=color]{min-height:100%;height:0}.readonly{border:none}.readonly:focus{border:none;outline:none}.disabled{background-color:var(--lux-disabled-color, #f1f1f1);border-color:var(--lux-disabled-border-color, #6d6d6d)}.clickable{cursor:pointer}.full-space{width:100%;height:100%;margin:0;border:0;padding:0}.minimal-space,.icon,.icon-external{min-width:1rem;min-height:1rem}.icon,.icon-external{display:inline-block;background-size:1rem 1rem;background-position:center;background-repeat:no-repeat;width:var(--lux-autocomplete-icon-width, 1.5rem);z-index:1}.icon-external{background:var(--lux-input-icon-external, url(/assets/img/external.svg) no-repeat center);background-size:1rem;background-position-y:.1rem;height:100%}.invisible{opacity:0}.transparency{background-image:conic-gradient(white 0deg 90deg,lightgray 90deg 180deg,white 180deg 270deg,lightgray 270deg 360deg)}\n"] }]
-        }], ctorParameters: function () { return [{ type: RegexpService }]; }, propDecorators: { input: [{
-                type: ViewChild,
-                args: ['input', { static: false }]
-            }], 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: "15.2.2", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: TooltipComponent, selector: "ng-component", inputs: { context: "context" }, ngImport: i0, template: `
-        <span class="lux-tooltip" style="transition: opacity 200ms">{{context.message}}</span>
-    `, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", 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: "15.2.2", ngImport: i0, type: TooltipService, deps: [{ token: i0.Injector }, { token: i0.ComponentFactoryResolver }, { token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Injectable });
-TooltipService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: TooltipService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", 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: "15.2.2", ngImport: i0, type: LuxTooltipDirective, deps: [{ token: i0.ElementRef }, { token: TooltipService }], target: i0.ɵɵFactoryTarget.Directive });
-LuxTooltipDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.2", type: LuxTooltipDirective, selector: "[luxTooltip]", inputs: { luxTooltip: "luxTooltip", content: "content", placement: "placement" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "click": "onClick()" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", 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 {
-    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;
-    }
-    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();
-    }
-    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: "15.2.2", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: PaginationComponent, selector: "lux-pagination", inputs: { lang: "lang", paginationInfo: "paginationInfo" }, outputs: { goToPage: "goToPage", pageSizeChange: "pageSizeChange" }, ngImport: i0, template: "<div class=\"lux-pagination\" *ngIf=\"showPagination\">\n  <ng-container *ngIf=\"!hidePrevious\">\n    <a\n      luxTooltip\n      [content]=\"first\"\n      placement=\"top\"\n      delay=\"500\"\n      (click)=\"onFirst()\"\n      [ngClass]=\"{\n        enabledFirstLast: !hidePrevious\n      }\"\n      class=\"button-pagination icon arrow-left-end\"\n    ></a>\n    <a\n      luxTooltip\n      [content]=\"previous\"\n      placement=\"top\"\n      delay=\"500\"\n      (click)=\"onPrevious()\"\n      [ngClass]=\"{\n        enabledFirstLast: !hidePrevious\n      }\"\n      class=\"button-pagination icon arrow-left\"\n    ></a>\n  </ng-container>\n\n  <span class=\"ellipsis\" *ngIf=\"displayPreviousEllipsis\">...</span>\n\n  <ng-container *ngFor=\"let pageNum of pages\">\n    <a\n      placement=\"top\"\n      delay=\"500\"\n      [ngClass]=\"{\n        disabled: pageNum === paginationInfo.page,\n        enabled: pageNum !== paginationInfo.page\n      }\"\n      class=\"button-pagination\"\n      (click)=\"onPage(pageNum)\"\n      >{{ pageNum + 1 }}</a\n    >\n  </ng-container>\n\n  <span class=\"ellipsis\" *ngIf=\"displayNextEllipsis\">...</span>\n\n  <ng-container *ngIf=\"!lastPage\">\n    <a\n      luxTooltip\n      [content]=\"next\"\n      placement=\"top\"\n      delay=\"500\"\n      (click)=\"onNext()\"\n      [ngClass]=\"{\n        enabledFirstLast: !lastPage\n      }\"\n      class=\"button-pagination icon arrow-right\"\n    ></a>\n    <a\n      luxTooltip\n      [content]=\"last\"\n      placement=\"top\"\n      delay=\"500\"\n      (click)=\"onLast()\"\n      [ngClass]=\"{\n        enabledFirstLast: !lastPage\n      }\"\n      class=\"button-pagination icon arrow-right-end\"\n    ></a>\n  </ng-container>\n</div>\n", styles: [":focus{z-index:1}input,select,textarea{border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057);margin:var(--lux-input-margin, 0rem);padding:var(--lux-input-padding, 0rem .5rem)}.alert{padding:.2rem 2rem;background:var(--lux-alert-background, #fe2e2e);color:var(--lux-alert-color, white);font-family:Consolas,monospace;width:45%;margin-right:1rem;display:inline-block}.symbol{display:inline-block;align-items:baseline;padding:0rem .5rem;margin-bottom:0;font-weight:400;color:var(--lux-symbol-color, default);text-align:center;white-space:nowrap;background:var(--lux-symbol-background, default);font-size:var(--lux-symbol-font-size, 1rem)}.bordered,.symbol{border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:var(--lux-border-radius, .25rem)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none;display:flex;align-items:center}.monospace{font-family:monospace}.default-font{color:var(--lux-font-color, black)}.lux-pagination{display:flex;flex-direction:row;margin:2% 0;width:100%;background:white;align-items:center}.disabled{cursor:not-allowed;border:var(--lux-pagination-disabled-border, 1px solid #325c81);border-radius:var(--lux-pagination-disabled-border-radius, 10%);padding:1%;margin:0 .7%;color:var(--lux-pagination-disabled-color, white);background-color:var(--lux-pagination-disabled-background-color, #325c81);text-decoration:none;pointer-events:none}.enabled{border:var(--lux-pagination-enabled-border, 1px solid rgb(207, 207, 207));border-radius:var(--lux-pagination-enabled-border-radius, 10%);padding:1%;margin:0 .7%;color:var(--lux-pagination-enabled-color, #325c81);width:min-content;cursor:pointer}.enabledFirstLast{border:1px solid rgb(207,207,207);border-radius:10%;padding:1%;color:#325c81;margin:0 .7%;width:min-content;cursor:pointer}.ellipsis{margin:0rem .5rem;padding:0rem;color:#325c81;width:min-content}.button-pagination{width:var(--lux-pagination-button-width, 1em);height:var(--lux-pagination-button-height, 1.2em);font-size:var(--lux-pagination-font-size, 80%);text-align:center}.icon{background-size:1.3em 1.4em;background-position:center;background-repeat:no-repeat}.arrow-right{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2268%22 height%3D%2248%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E %3Cg%3E  %3Ctitle%3Ebackground%3C%2Ftitle%3E  %3Crect fill%3D%22none%22 id%3D%22canvas_background%22 height%3D%22402%22 width%3D%221082%22 y%3D%22-1%22 x%3D%22-1%22%2F%3E %3C%2Fg%3E %3Cg%3E  %3Ctitle%3ELayer 1%3C%2Ftitle%3E  %3Cpolygon fill%3D%22%23325C81%22 id%3D%22svg_2%22 points%3D%2221.8%2C45.7 10.4%2C44.3 30.8%2C24 10.4%2C3.7 21.8%2C2.3 43.5%2C24  %22%2F%3E %3C%2Fg%3E%3C%2Fsvg%3E\");background-position:.4em}.arrow-left{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2268%22 height%3D%2248%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E %3Cg%3E  %3Ctitle%3Ebackground%3C%2Ftitle%3E  %3Crect fill%3D%22none%22 id%3D%22canvas_background%22 height%3D%22402%22 width%3D%221082%22 y%3D%22-1%22 x%3D%22-1%22%2F%3E %3C%2Fg%3E %3Cg%3E  %3Ctitle%3ELayer 1%3C%2Ftitle%3E  %3Cpolygon fill%3D%22%23325C81%22 id%3D%22svg_2%22 points%3D%2221.8%2C45.7 10.4%2C44.3 30.8%2C24 10.4%2C3.7 21.8%2C2.3 43.5%2C24  %22%2F%3E %3C%2Fg%3E%3C%2Fsvg%3E\");transform:rotate(180deg);background-position:.4em}.arrow-right-end{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2268%22 height%3D%2248%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E %3Cg%3E  %3Ctitle%3Ebackground%3C%2Ftitle%3E  %3Crect fill%3D%22none%22 id%3D%22canvas_background%22 height%3D%22402%22 width%3D%221082%22 y%3D%22-1%22 x%3D%22-1%22%2F%3E %3C%2Fg%3E %3Cg%3E  %3Ctitle%3ELayer 1%3C%2Ftitle%3E  %3Cpolygon fill%3D%22%23325C81%22 id%3D%22svg_2%22 points%3D%2221.8%2C45.7 10.4%2C44.3 30.8%2C24 10.4%2C3.7 21.8%2C2.3 43.5%2C24  %22%2F%3E    %3Cpolygon fill%3D%22%23325C81%22 id%3D%22svg_3%22 points%3D%2241.8%2C45.7 30.4%2C44.3 50.8%2C24 30.4%2C3.7 41.8%2C2.3 63.5%2C24  %22%2F%3E %3C%2Fg%3E%3C%2Fsvg%3E\");background-position:.1em}.arrow-left-end{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2268%22 height%3D%2248%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E %3Cg%3E  %3Ctitle%3Ebackground%3C%2Ftitle%3E  %3Crect fill%3D%22none%22 id%3D%22canvas_background%22 height%3D%22402%22 width%3D%221082%22 y%3D%22-1%22 x%3D%22-1%22%2F%3E %3C%2Fg%3E %3Cg%3E  %3Ctitle%3ELayer 1%3C%2Ftitle%3E  %3Cpolygon fill%3D%22%23325C81%22 id%3D%22svg_2%22 points%3D%2221.8%2C45.7 10.4%2C44.3 30.8%2C24 10.4%2C3.7 21.8%2C2.3 43.5%2C24  %22%2F%3E    %3Cpolygon fill%3D%22%23325C81%22 id%3D%22svg_3%22 points%3D%2241.8%2C45.7 30.4%2C44.3 50.8%2C24 30.4%2C3.7 41.8%2C2.3 63.5%2C24  %22%2F%3E %3C%2Fg%3E%3C%2Fsvg%3E\");background-position:.1em;transform:rotate(180deg)}@media only screen and (min-width: 300px) and (max-width: 500px){.arrow-right,.arrow-left{background-position:.2em}.arrow-right-end,.arrow-left-end{background-position:0em}}@media only screen and (min-width: 500px) and (max-width: 850px){.arrow-right,.arrow-left{background-position:.3em}.arrow-right-end,.arrow-left-end{background-position:0em}}@media only screen and (min-width: 900px){.arrow-right,.arrow-left{background-position:.2em}.arrow-right-end,.arrow-left-end{background-position:0em}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: LuxTooltipDirective, selector: "[luxTooltip]", inputs: ["luxTooltip", "content", "placement"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: PaginationComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lux-pagination', template: "<div class=\"lux-pagination\" *ngIf=\"showPagination\">\n  <ng-container *ngIf=\"!hidePrevious\">\n    <a\n      luxTooltip\n      [content]=\"first\"\n      placement=\"top\"\n      delay=\"500\"\n      (click)=\"onFirst()\"\n      [ngClass]=\"{\n        enabledFirstLast: !hidePrevious\n      }\"\n      class=\"button-pagination icon arrow-left-end\"\n    ></a>\n    <a\n      luxTooltip\n      [content]=\"previous\"\n      placement=\"top\"\n      delay=\"500\"\n      (click)=\"onPrevious()\"\n      [ngClass]=\"{\n        enabledFirstLast: !hidePrevious\n      }\"\n      class=\"button-pagination icon arrow-left\"\n    ></a>\n  </ng-container>\n\n  <span class=\"ellipsis\" *ngIf=\"displayPreviousEllipsis\">...</span>\n\n  <ng-container *ngFor=\"let pageNum of pages\">\n    <a\n      placement=\"top\"\n      delay=\"500\"\n      [ngClass]=\"{\n        disabled: pageNum === paginationInfo.page,\n        enabled: pageNum !== paginationInfo.page\n      }\"\n      class=\"button-pagination\"\n      (click)=\"onPage(pageNum)\"\n      >{{ pageNum + 1 }}</a\n    >\n  </ng-container>\n\n  <span class=\"ellipsis\" *ngIf=\"displayNextEllipsis\">...</span>\n\n  <ng-container *ngIf=\"!lastPage\">\n    <a\n      luxTooltip\n      [content]=\"next\"\n      placement=\"top\"\n      delay=\"500\"\n      (click)=\"onNext()\"\n      [ngClass]=\"{\n        enabledFirstLast: !lastPage\n      }\"\n      class=\"button-pagination icon arrow-right\"\n    ></a>\n    <a\n      luxTooltip\n      [content]=\"last\"\n      placement=\"top\"\n      delay=\"500\"\n      (click)=\"onLast()\"\n      [ngClass]=\"{\n        enabledFirstLast: !lastPage\n      }\"\n      class=\"button-pagination icon arrow-right-end\"\n    ></a>\n  </ng-container>\n</div>\n", styles: [":focus{z-index:1}input,select,textarea{border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057);margin:var(--lux-input-margin, 0rem);padding:var(--lux-input-padding, 0rem .5rem)}.alert{padding:.2rem 2rem;background:var(--lux-alert-background, #fe2e2e);color:var(--lux-alert-color, white);font-family:Consolas,monospace;width:45%;margin-right:1rem;display:inline-block}.symbol{display:inline-block;align-items:baseline;padding:0rem .5rem;margin-bottom:0;font-weight:400;color:var(--lux-symbol-color, default);text-align:center;white-space:nowrap;background:var(--lux-symbol-background, default);font-size:var(--lux-symbol-font-size, 1rem)}.bordered,.symbol{border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:var(--lux-border-radius, .25rem)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none;display:flex;align-items:center}.monospace{font-family:monospace}.default-font{color:var(--lux-font-color, black)}.lux-pagination{display:flex;flex-direction:row;margin:2% 0;width:100%;background:white;align-items:center}.disabled{cursor:not-allowed;border:var(--lux-pagination-disabled-border, 1px solid #325c81);border-radius:var(--lux-pagination-disabled-border-radius, 10%);padding:1%;margin:0 .7%;color:var(--lux-pagination-disabled-color, white);background-color:var(--lux-pagination-disabled-background-color, #325c81);text-decoration:none;pointer-events:none}.enabled{border:var(--lux-pagination-enabled-border, 1px solid rgb(207, 207, 207));border-radius:var(--lux-pagination-enabled-border-radius, 10%);padding:1%;margin:0 .7%;color:var(--lux-pagination-enabled-color, #325c81);width:min-content;cursor:pointer}.enabledFirstLast{border:1px solid rgb(207,207,207);border-radius:10%;padding:1%;color:#325c81;margin:0 .7%;width:min-content;cursor:pointer}.ellipsis{margin:0rem .5rem;padding:0rem;color:#325c81;width:min-content}.button-pagination{width:var(--lux-pagination-button-width, 1em);height:var(--lux-pagination-button-height, 1.2em);font-size:var(--lux-pagination-font-size, 80%);text-align:center}.icon{background-size:1.3em 1.4em;background-position:center;background-repeat:no-repeat}.arrow-right{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2268%22 height%3D%2248%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E %3Cg%3E  %3Ctitle%3Ebackground%3C%2Ftitle%3E  %3Crect fill%3D%22none%22 id%3D%22canvas_background%22 height%3D%22402%22 width%3D%221082%22 y%3D%22-1%22 x%3D%22-1%22%2F%3E %3C%2Fg%3E %3Cg%3E  %3Ctitle%3ELayer 1%3C%2Ftitle%3E  %3Cpolygon fill%3D%22%23325C81%22 id%3D%22svg_2%22 points%3D%2221.8%2C45.7 10.4%2C44.3 30.8%2C24 10.4%2C3.7 21.8%2C2.3 43.5%2C24  %22%2F%3E %3C%2Fg%3E%3C%2Fsvg%3E\");background-position:.4em}.arrow-left{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2268%22 height%3D%2248%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E %3Cg%3E  %3Ctitle%3Ebackground%3C%2Ftitle%3E  %3Crect fill%3D%22none%22 id%3D%22canvas_background%22 height%3D%22402%22 width%3D%221082%22 y%3D%22-1%22 x%3D%22-1%22%2F%3E %3C%2Fg%3E %3Cg%3E  %3Ctitle%3ELayer 1%3C%2Ftitle%3E  %3Cpolygon fill%3D%22%23325C81%22 id%3D%22svg_2%22 points%3D%2221.8%2C45.7 10.4%2C44.3 30.8%2C24 10.4%2C3.7 21.8%2C2.3 43.5%2C24  %22%2F%3E %3C%2Fg%3E%3C%2Fsvg%3E\");transform:rotate(180deg);background-position:.4em}.arrow-right-end{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2268%22 height%3D%2248%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E %3Cg%3E  %3Ctitle%3Ebackground%3C%2Ftitle%3E  %3Crect fill%3D%22none%22 id%3D%22canvas_background%22 height%3D%22402%22 width%3D%221082%22 y%3D%22-1%22 x%3D%22-1%22%2F%3E %3C%2Fg%3E %3Cg%3E  %3Ctitle%3ELayer 1%3C%2Ftitle%3E  %3Cpolygon fill%3D%22%23325C81%22 id%3D%22svg_2%22 points%3D%2221.8%2C45.7 10.4%2C44.3 30.8%2C24 10.4%2C3.7 21.8%2C2.3 43.5%2C24  %22%2F%3E    %3Cpolygon fill%3D%22%23325C81%22 id%3D%22svg_3%22 points%3D%2241.8%2C45.7 30.4%2C44.3 50.8%2C24 30.4%2C3.7 41.8%2C2.3 63.5%2C24  %22%2F%3E %3C%2Fg%3E%3C%2Fsvg%3E\");background-position:.1em}.arrow-left-end{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2268%22 height%3D%2248%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E %3Cg%3E  %3Ctitle%3Ebackground%3C%2Ftitle%3E  %3Crect fill%3D%22none%22 id%3D%22canvas_background%22 height%3D%22402%22 width%3D%221082%22 y%3D%22-1%22 x%3D%22-1%22%2F%3E %3C%2Fg%3E %3Cg%3E  %3Ctitle%3ELayer 1%3C%2Ftitle%3E  %3Cpolygon fill%3D%22%23325C81%22 id%3D%22svg_2%22 points%3D%2221.8%2C45.7 10.4%2C44.3 30.8%2C24 10.4%2C3.7 21.8%2C2.3 43.5%2C24  %22%2F%3E    %3Cpolygon fill%3D%22%23325C81%22 id%3D%22svg_3%22 points%3D%2241.8%2C45.7 30.4%2C44.3 50.8%2C24 30.4%2C3.7 41.8%2C2.3 63.5%2C24  %22%2F%3E %3C%2Fg%3E%3C%2Fsvg%3E\");background-position:.1em;transform:rotate(180deg)}@media only screen and (min-width: 300px) and (max-width: 500px){.arrow-right,.arrow-left{background-position:.2em}.arrow-right-end,.arrow-left-end{background-position:0em}}@media only screen and (min-width: 500px) and (max-width: 850px){.arrow-right,.arrow-left{background-position:.3em}.arrow-right-end,.arrow-left-end{background-position:0em}}@media only screen and (min-width: 900px){.arrow-right,.arrow-left{background-position:.2em}.arrow-right-end,.arrow-left-end{background-position:0em}}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { goToPage: [{
-                type: Output
-            }], pageSizeChange: [{
-                type: Output
-            }], lang: [{
-                type: Input
-            }], paginationInfo: [{
-                type: Input
-            }] } });
-
-class RadiogroupComponent {
-    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;
-    }
-    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 = () => { };
-    }
-    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: "15.2.2", ngImport: i0, type: RadiogroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-RadiogroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: RadiogroupComponent, selector: "lux-radiogroup", inputs: { name: "name", disabled: "disabled", readonly: "readonly", required: "required", items: "items", value: "value" }, outputs: { itemsChange: "itemsChange", valueChange: "valueChange" }, providers: [
-        {
-            provide: NG_VALUE_ACCESSOR,
-            multi: true,
-            useExisting: forwardRef(() => RadiogroupComponent)
-        },
-        {
-            provide: NG_VALIDATORS,
-            multi: true,
-            useExisting: forwardRef(() => RadiogroupComponent)
-        }
-    ], ngImport: i0, template: "<div class=\"radiogroup\"\n    [class.disabled]=\"disabled || readonly\"\n    >\n  <ng-container *ngFor=\"let item of items; let first=first; let last=last\">\n    <div [class.radio-start]=\"first\"\n         [class.radio-end]=\"last\"\n         class=\"radio-item\"\n         [class.selected]=\"item.value === value\"\n         (click)=\"setValue($event, item)\"\n      >\n      <input [id]=\"item.name\"\n             type=\"radio\"\n             [name]=\"name\"\n             [attr.disabled]=\"disabled || null\"\n             [attr.readonly]=\"readonly || null\"\n             [value]=\"item.value\">\n      <label [for]=\"item.name\"\n             class=\"unselectable\"\n             >{{ item.label }}</label>\n  </div>\n</ng-container>\n</div>\n", styles: [":focus{z-index:1}input,select,textarea{border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057);margin:var(--lux-input-margin, 0rem);padding:var(--lux-input-padding, 0rem .5rem)}.alert{padding:.2rem 2rem;background:var(--lux-alert-background, #fe2e2e);color:var(--lux-alert-color, white);font-family:Consolas,monospace;width:45%;margin-right:1rem;display:inline-block}.symbol{display:inline-block;align-items:baseline;padding:0rem .5rem;margin-bottom:0;font-weight:400;color:var(--lux-symbol-color, default);text-align:center;white-space:nowrap;background:var(--lux-symbol-background, default);font-size:var(--lux-symbol-font-size, 1rem)}.bordered,.symbol{border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:var(--lux-border-radius, .25rem)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none;display:flex;align-items:center}.monospace{font-family:monospace}.default-font{color:var(--lux-font-color, black)}.radiogroup{display:flex}.radio-item{border-radius:0;border:1px solid #ccc;padding:var(--lux-radiogroup-padding, 0rem .5rem)}.radio-item input{display:none}.radio-item label{color:var(--lux-radiogroup-color, initial);font-size:var(--lux-radiogroup-font-size, initial);margin-top:.3rem;margin-bottom:.3rem}.radio-item.selected{background-color:var(--lux-radiogroup-selected-background-color, rgb(46, 46, 172))}.radio-item.selected label{font-size:var(--lux-radiogroup-font-size, initial);color:var(--lux-radiogroup-selected-color, white)}.radio-start{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}.radio-end{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}.disabled .radio-item{background-color:#f0f0f0;color:#444}.disabled .selected{font-size:var(--lux-radiogroup-selected-disabled-font-size, initial);color:var(--lux-radiogroup-selected-disabled-color, white);background-color:var(--lux-radiogroup-selected-disabled-background-color, rgb(152, 152, 236))}.unselectable{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", 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:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057);margin:var(--lux-input-margin, 0rem);padding:var(--lux-input-padding, 0rem .5rem)}.alert{padding:.2rem 2rem;background:var(--lux-alert-background, #fe2e2e);color:var(--lux-alert-color, white);font-family:Consolas,monospace;width:45%;margin-right:1rem;display:inline-block}.symbol{display:inline-block;align-items:baseline;padding:0rem .5rem;margin-bottom:0;font-weight:400;color:var(--lux-symbol-color, default);text-align:center;white-space:nowrap;background:var(--lux-symbol-background, default);font-size:var(--lux-symbol-font-size, 1rem)}.bordered,.symbol{border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:var(--lux-border-radius, .25rem)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none;display:flex;align-items:center}.monospace{font-family:monospace}.default-font{color:var(--lux-font-color, black)}.radiogroup{display:flex}.radio-item{border-radius:0;border:1px solid #ccc;padding:var(--lux-radiogroup-padding, 0rem .5rem)}.radio-item input{display:none}.radio-item label{color:var(--lux-radiogroup-color, initial);font-size:var(--lux-radiogroup-font-size, initial);margin-top:.3rem;margin-bottom:.3rem}.radio-item.selected{background-color:var(--lux-radiogroup-selected-background-color, rgb(46, 46, 172))}.radio-item.selected label{font-size:var(--lux-radiogroup-font-size, initial);color:var(--lux-radiogroup-selected-color, white)}.radio-start{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}.radio-end{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}.disabled .radio-item{background-color:#f0f0f0;color:#444}.disabled .selected{font-size:var(--lux-radiogroup-selected-disabled-font-size, initial);color:var(--lux-radiogroup-selected-disabled-color, white);background-color:var(--lux-radiogroup-selected-disabled-background-color, rgb(152, 152, 236))}.unselectable{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { name: [{
-                type: Input
-            }], disabled: [{
-                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: "15.2.2", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: SelectComponent, selector: "lux-select", inputs: { id: "id", disabled: "disabled", required: "required", multiple: "multiple", value: "value", placeholder: "placeholder", unique: "unique", validateItem: "validateItem" }, outputs: { valueChange: "valueChange" }, providers: [
-        {
-            provide: NG_VALUE_ACCESSOR,
-            multi: true,
-            useExisting: forwardRef(() => SelectComponent)
-        },
-        {
-            provide: NG_VALIDATORS,
-            multi: true,
-            useExisting: forwardRef(() => SelectComponent)
-        }
-    ], ngImport: i0, template: "<div class=\"lux-select\">\n  <ul class=\"list\">\n    <li *ngFor=\"let item of value; let i = index\">\n      <span>{{ item }}</span>\n      <button *ngIf=\"!disabled\"\n            class=\"remove\"\n            type=\"button\"\n            (click)=\"remove(i)\"\n            [attr.aria-label]=\"'Remove ' + item\"\n            >Remove</button>\n    </li>\n  </ul>\n  <div class=\"add-new-item\" *ngIf=\"!disabled\">\n    <lux-input\n      id=\"{{ id + 'addNew' }}\"\n      type=\"string\"\n      [placeholder]=\"placeholder\"\n      [attr.aria-label]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [(value)]=\"newEntry\"\n      (keyPress)=\"onKeyPress($event)\"\n      (valueChange)=\"onChangeNewEntry($event)\"\n    >\n    </lux-input>\n    <div *ngIf=\"canAdd\">\n      <button *ngIf=\"isValidNewEntry\" type=\"button\" (click)=\"add(newEntry)\">Add</button>\n    </div>\n    <div class=\"error\">\n      {{ error }}\n    </div>\n  </div>\n</div>\n", styles: [".lux-select{margin-bottom:.5em}.lux-select .list{margin:1em;padding-bottom:.2em;list-style-type:square}.lux-select .list span{margin-bottom:.3em}.remove{margin-left:2em;font-size:.65em;color:#b22222;background:transparent;border:2px solid #BBB}.add-new-item{display:inline-flex;margin-left:2.2em;height:1.6em}.error{margin:.5em 0;color:#b22222}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InputComponent, selector: "lux-input", inputs: ["rows", "cols", "step", "min", "max", "lang", "inlineErrors", "inputId", "aria-label", "readonly", "disabled", "pattern", "currency", "placeholder", "required", "type", "value"], outputs: ["valueChange", "keyPress"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", 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: "15.2.2", ngImport: i0, type: VoiceRecognitionDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-VoiceRecognitionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.2", type: VoiceRecognitionDirective, selector: "[luxVoiceRecognition]", inputs: { language: "language" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", 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: "15.2.2", ngImport: i0, type: LuxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-LuxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.2", ngImport: i0, type: LuxModule, declarations: [AutocompleteComponent,
-        AutocompleteListComponent,
-        FilterComponent,
-        CheckboxComponent,
-        DatetimeComponent,
-        InputComponent,
-        GeolocationComponent,
-        LuxTooltipDirective,
-        LuxModalWindowComponent,
-        LuxModalBackdropComponent,
-        LuxBreadcrumbComponent,
-        MapComponent,
-        SelectComponent,
-        TooltipComponent,
-        PaginationComponent,
-        RadiogroupComponent,
-        VoiceRecognitionDirective], imports: [FormsModule,
-        HttpClientModule,
-        ReactiveFormsModule,
-        RouterModule,
-        CommonModule], exports: [AutocompleteComponent,
-        AutocompleteListComponent,
-        FilterComponent,
-        CheckboxComponent,
-        DatetimeComponent,
-        InputComponent,
-        GeolocationComponent,
-        LuxTooltipDirective,
-        LuxBreadcrumbComponent,
-        LuxBreadcrumbComponent,
-        MapComponent,
-        SelectComponent,
-        PaginationComponent,
-        RadiogroupComponent,
-        VoiceRecognitionDirective] });
-LuxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: LuxModule, providers: [ModalService, TooltipService, WINDOW_PROVIDERS], imports: [FormsModule,
-        HttpClientModule,
-        ReactiveFormsModule,
-        RouterModule,
-        CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", 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: [
-                        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