@tilde-nlp/ngx-common 3.0.2 → 4.0.1

package/fesm2022/tilde-nlp-ngx-common.mjs

@@ -0,0 +1,1712 @@
+import * as i0 from '@angular/core';
+import { Injectable, Directive, Input, HostListener, NgModule, Component, Pipe, Inject, Optional, EventEmitter, Output, HostBinding, ViewChild, ElementRef, ContentChildren, ContentChild } from '@angular/core';
+import * as i1 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i2 from '@angular/platform-browser';
+import * as i2$1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i2$2 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import * as i1$1 from '@ngx-translate/core';
+import { TranslateModule, TranslatePipe } from '@ngx-translate/core';
+import { Observable, of, map, take } from 'rxjs';
+import * as i11 from '@angular/material/progress-spinner';
+import { MatProgressSpinner, MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import * as i1$2 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import * as i6 from '@angular/router';
+import { RouterModule } from '@angular/router';
+import * as i2$3 from '@angular/flex-layout/flex';
+import * as i3 from '@angular/flex-layout/extended';
+import * as i2$4 from '@angular/material/progress-bar';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import * as i9 from '@angular/forms';
+import { FormGroup, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i3$1 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i4 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i7 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import * as i8 from '@angular/material/core';
+import * as i12 from '@angular/material/chips';
+import { MatChipsModule } from '@angular/material/chips';
+import { SelectionModel } from '@angular/cdk/collections';
+import { MatSort, MatSortModule } from '@angular/material/sort';
+import * as i4$1 from '@angular/material/table';
+import { MatNoDataRow, MatHeaderRowDef, MatRowDef, MatColumnDef, MatTable, MatTableModule } from '@angular/material/table';
+import * as i6$1 from '@angular/material/menu';
+import { MatMenuModule } from '@angular/material/menu';
+import * as i7$1 from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import * as i1$3 from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+
+class IconService {
+    constructor(iconRegistry, sanitizer) {
+        this.iconRegistry = iconRegistry;
+        this.sanitizer = sanitizer;
+    }
+    //https://material.angular.io/components/icon/examples
+    /** Registers svg icons to mat icon registry. Icon SVG's should be under some key in object. Icon name can be used with property name in lowercase. */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    registerIcons(icons) {
+        for (const key in icons) {
+            this.iconRegistry.addSvgIconLiteral(key.toLowerCase(), this.sanitizer.bypassSecurityTrustHtml(icons[key]));
+        }
+    }
+    registerIconFromUrl(name, url) {
+        this.iconRegistry.addSvgIcon(name, this.sanitizer.bypassSecurityTrustResourceUrl(url));
+    }
+    addSvgIconSet(path, namespace) {
+        namespace ?
+            this.iconRegistry.addSvgIconSetInNamespace(namespace, this.sanitizer.bypassSecurityTrustResourceUrl(path)) :
+            this.iconRegistry.addSvgIconSet(this.sanitizer.bypassSecurityTrustResourceUrl(path));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: IconService, deps: [{ token: i1.MatIconRegistry }, { token: i2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: IconService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: IconService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: i1.MatIconRegistry }, { type: i2.DomSanitizer }]; } });
+
+const _localStorage = typeof localStorage !== 'undefined' ? localStorage : null;
+const _window = typeof window !== 'undefined' ? window : null;
+class DOMService {
+    get window() {
+        return _window;
+    }
+    get localStorage() {
+        return _localStorage;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: DOMService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: DOMService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: DOMService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+class PlausibleHelper {
+    /**
+     * Adds plausible for selected domain and adds additional script for custom event (goal) triggering
+     * @param domain domain that is registered in your plausible account
+     * @returns
+     */
+    static addPlausible(domain) {
+        const domService = new DOMService();
+        const windowObj = domService.window;
+        if (!windowObj || !domain) {
+            return;
+        }
+        const plausibleSrc = "https://plausible.io/js/plausible.js";
+        const script = document.createElement("script");
+        script.src = plausibleSrc;
+        script.setAttribute("data-domain", domain);
+        document.head.append(script);
+        // Add plausible custom event functionality https://plausible.io/docs/custom-event-goals#code-example-for-tracking-link-clicks
+        windowObj.plausible = windowObj.plausible || ((...params) => { (windowObj.plausible.q = windowObj.plausible.q || []).push(params); });
+    }
+    /**
+     * Emits custom plausible event
+     * @param id plausible event id that should be the same as registered in plausible
+     * @param properties an object with custom properties for the event
+     * @returns
+     */
+    static customEvent(id, properties) {
+        const windowObj = window;
+        if (!windowObj?.plausible) {
+            return;
+        }
+        windowObj.plausible(id, { props: properties });
+    }
+}
+
+class PlausibleEventDirective {
+    constructor() {
+        this.id = "";
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.properties = null;
+    }
+    /** Plausible event id. */
+    set libPlausibleEvent(value) {
+        if (!value) {
+            return;
+        }
+        this.id = value.eventId;
+        if (value.properties) {
+            this.properties = {};
+            value.properties.forEach(item => this.properties[item.key] = item.value);
+        }
+    }
+    onClick() {
+        if (this.id.length) {
+            PlausibleHelper.customEvent(this.id, this.properties);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: PlausibleEventDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.6", type: PlausibleEventDirective, selector: "[libPlausibleEvent]", inputs: { libPlausibleEvent: "libPlausibleEvent" }, host: { listeners: { "click": "onClick()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: PlausibleEventDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[libPlausibleEvent]'
+                }]
+        }], propDecorators: { libPlausibleEvent: [{
+                type: Input
+            }], onClick: [{
+                type: HostListener,
+                args: ["click"]
+            }] } });
+
+class PlausibleModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: PlausibleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.6", ngImport: i0, type: PlausibleModule, declarations: [PlausibleEventDirective], imports: [CommonModule], exports: [PlausibleEventDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: PlausibleModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: PlausibleModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        PlausibleEventDirective
+                    ],
+                    imports: [
+                        CommonModule
+                    ],
+                    exports: [
+                        PlausibleEventDirective
+                    ]
+                }]
+        }] });
+
+var InlineMessageIconPosition;
+(function (InlineMessageIconPosition) {
+    InlineMessageIconPosition[InlineMessageIconPosition["START"] = 0] = "START";
+    InlineMessageIconPosition[InlineMessageIconPosition["END"] = 1] = "END";
+})(InlineMessageIconPosition || (InlineMessageIconPosition = {}));
+
+class InlineMessageComponent {
+    constructor() {
+        this.END_ICON_POSITION = InlineMessageIconPosition.END;
+        this.iconName = "info";
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: InlineMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: InlineMessageComponent, selector: "lib-inline-message", inputs: { iconName: "iconName", message: "message" }, ngImport: i0, template: "<div class=\"tld-inline-message {{message.type}}\">\r\n  <span class=\"material-icons\" [class.order-end]=\"message.iconPosition === END_ICON_POSITION\"\r\n    [matTooltip]=\"message.iconTooltip? (message.iconTooltip | translate: message.localizationParams) : ''\" *ngIf=\"iconName\">{{iconName}}</span>\r\n  <section *ngIf=\"message\">\r\n    <div class=\"text-s-semi-bold title\" *ngIf=\"message.title\"\r\n      [innerHtml]=\"message.title | translate: message.localizationParams\">\r\n    </div>\r\n    <p class=\"text-s description\" *ngIf=\"message.description\" [innerHtml]=\"message.description | translate:\r\n    message.localizationParams\"></p>\r\n  </section>\r\n</div>", styles: [":host{display:block}.tld-inline-message{display:flex;flex-direction:row}.tld-inline-message.error .material-icons{color:var(--error-dark)}.tld-inline-message.info .material-icons{color:var(--base-40)}.tld-inline-message.warning .material-icons{color:var(--warning-dark)}.tld-inline-message .material-icons{font-size:16px;margin-right:.5rem;display:inline-block}.tld-inline-message .material-icons.order-end{order:2}.tld-inline-message .title,.tld-inline-message .description{margin:0}.tld-inline-message .title+.description{margin-top:.5rem}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: InlineMessageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-inline-message', template: "<div class=\"tld-inline-message {{message.type}}\">\r\n  <span class=\"material-icons\" [class.order-end]=\"message.iconPosition === END_ICON_POSITION\"\r\n    [matTooltip]=\"message.iconTooltip? (message.iconTooltip | translate: message.localizationParams) : ''\" *ngIf=\"iconName\">{{iconName}}</span>\r\n  <section *ngIf=\"message\">\r\n    <div class=\"text-s-semi-bold title\" *ngIf=\"message.title\"\r\n      [innerHtml]=\"message.title | translate: message.localizationParams\">\r\n    </div>\r\n    <p class=\"text-s description\" *ngIf=\"message.description\" [innerHtml]=\"message.description | translate:\r\n    message.localizationParams\"></p>\r\n  </section>\r\n</div>", styles: [":host{display:block}.tld-inline-message{display:flex;flex-direction:row}.tld-inline-message.error .material-icons{color:var(--error-dark)}.tld-inline-message.info .material-icons{color:var(--base-40)}.tld-inline-message.warning .material-icons{color:var(--warning-dark)}.tld-inline-message .material-icons{font-size:16px;margin-right:.5rem;display:inline-block}.tld-inline-message .material-icons.order-end{order:2}.tld-inline-message .title,.tld-inline-message .description{margin:0}.tld-inline-message .title+.description{margin-top:.5rem}\n"] }]
+        }], propDecorators: { iconName: [{
+                type: Input
+            }], message: [{
+                type: Input
+            }] } });
+
+class InlineMessageModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: InlineMessageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.6", ngImport: i0, type: InlineMessageModule, declarations: [InlineMessageComponent], imports: [CommonModule,
+            TranslateModule,
+            MatTooltipModule], exports: [InlineMessageComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: InlineMessageModule, imports: [CommonModule,
+            TranslateModule,
+            MatTooltipModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: InlineMessageModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        InlineMessageComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        TranslateModule,
+                        MatTooltipModule
+                    ],
+                    exports: [
+                        InlineMessageComponent
+                    ]
+                }]
+        }] });
+
+var InlineMessageType;
+(function (InlineMessageType) {
+    InlineMessageType["INFO"] = "info";
+    InlineMessageType["WARNING"] = "warning";
+    InlineMessageType["ERROR"] = "error";
+})(InlineMessageType || (InlineMessageType = {}));
+
+class FilterWithHighlightPipe {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    transform(value, filter, key) {
+        if (!filter.length) {
+            return [...value];
+        }
+        const filteredArr = [];
+        const regex = new RegExp(filter, 'gi');
+        for (let element of value) {
+            const elementText = key ? element[key] : element;
+            const match = elementText.match(regex);
+            if (!match) {
+                continue;
+            }
+            let newElement;
+            const textWithHighlight = elementText.replace(regex, (match) => `<span class="filter-highlight">${match}</span>`);
+            if (key) {
+                newElement = { ...element };
+                newElement[key] = textWithHighlight;
+            }
+            else {
+                element = textWithHighlight;
+            }
+            filteredArr.push(newElement ?? element);
+        }
+        return filteredArr;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: FilterWithHighlightPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.6", ngImport: i0, type: FilterWithHighlightPipe, name: "filterWithHighlight" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: FilterWithHighlightPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'filterWithHighlight'
+                }]
+        }] });
+
+class FilterWithHighlightModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: FilterWithHighlightModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.6", ngImport: i0, type: FilterWithHighlightModule, declarations: [FilterWithHighlightPipe], imports: [CommonModule], exports: [FilterWithHighlightPipe] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: FilterWithHighlightModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: FilterWithHighlightModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        FilterWithHighlightPipe
+                    ],
+                    imports: [
+                        CommonModule
+                    ],
+                    exports: [
+                        FilterWithHighlightPipe
+                    ]
+                }]
+        }] });
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/**
+ * Pipe used to sort translated values.
+ */
+class SortTranslationsPipe {
+    constructor(translate) {
+        this.translate = translate;
+    }
+    /**
+     *
+     * @param objects array of objects to be sorted
+     * @param localizationPrefix prefix for localization code. This is used to get necessary object translations.
+     * @param key Which object property needs to be used for sorting.
+     * @param currentLanguage This is necessary to update values if language is changed.
+     * @returns
+     */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    transform(objects, localizationPrefix, key = null, currentLanguage, translationKey = null) {
+        const arrayCopy = [...objects];
+        if (localizationPrefix) {
+            return new Observable((subscriber) => {
+                this.translate.get(localizationPrefix ?? "").subscribe((translations) => {
+                    const array = this.sortObjects(arrayCopy, key, translations);
+                    subscriber.next(array);
+                    subscriber.complete();
+                });
+            });
+        }
+        else {
+            return of(this.sortObjects(arrayCopy, key));
+        }
+    }
+    sortObjects(array, key, translations) {
+        return array.sort((a, b) => {
+            const aValue = key ? a[key] : a;
+            const aTranslation = translations ? translations[aValue.toUpperCase()] : aValue;
+            const bValue = key ? b[key] : b;
+            const bTranslation = translations ? translations[bValue.toUpperCase()] : bValue;
+            if (aTranslation < bTranslation)
+                return -1;
+            else if (aTranslation > bTranslation)
+                return 1;
+            else
+                return 0;
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: SortTranslationsPipe, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.6", ngImport: i0, type: SortTranslationsPipe, name: "sortTranslations" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: SortTranslationsPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'sortTranslations'
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.TranslateService }]; } });
+
+class SortTranslationsModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: SortTranslationsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.6", ngImport: i0, type: SortTranslationsModule, declarations: [SortTranslationsPipe], imports: [CommonModule], exports: [SortTranslationsPipe] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: SortTranslationsModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: SortTranslationsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SortTranslationsPipe],
+                    imports: [
+                        CommonModule
+                    ],
+                    exports: [
+                        SortTranslationsPipe
+                    ]
+                }]
+        }] });
+
+/**
+ * Pipe transforms an array of objects by sorting them based on a provided localization key in A-Z order.
+ * Unlike the "sortTranslations" pipe, it does not require knowledge of the current language, and it does not require the use of the async pipe.
+ */
+class SortTranslationsByPropertyPipe {
+    constructor(translate) {
+        this.translate = translate;
+    }
+    /**
+     * Transforms the input array of objects by sorting them based on the specified sortingValueKey.
+     * @param values An array of objects to be sorted.
+     * @param sortingValueKey The key by which the provided values should be sorted.
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    transform(values, sortingValueKey) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        values.sort((a, b) => {
+            const aTranslated = this.translate.instant(a[sortingValueKey]).toLowerCase();
+            const bTranslated = this.translate.instant(b[sortingValueKey]).toLowerCase();
+            if (aTranslated < bTranslated)
+                return -1;
+            if (aTranslated > bTranslated)
+                return 1;
+            return 0;
+        });
+        return values;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: SortTranslationsByPropertyPipe, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.6", ngImport: i0, type: SortTranslationsByPropertyPipe, name: "sortTranslationsByProperty" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: SortTranslationsByPropertyPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'sortTranslationsByProperty',
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.TranslateService }]; } });
+
+class SortTranslationsByPropertyModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: SortTranslationsByPropertyModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.6", ngImport: i0, type: SortTranslationsByPropertyModule, declarations: [SortTranslationsByPropertyPipe], imports: [CommonModule], exports: [SortTranslationsByPropertyPipe] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: SortTranslationsByPropertyModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: SortTranslationsByPropertyModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SortTranslationsByPropertyPipe],
+                    imports: [CommonModule],
+                    exports: [SortTranslationsByPropertyPipe],
+                }]
+        }] });
+
+const DateAgoSettingsToken = "DATE_AGO_SETTINGS";
+
+/**
+ * Pipe that converts date to date ago and returns translated string.
+ */
+class DateAgoPipe {
+    get intervals() { return this.settings?.intervals ?? this.defaultSettings.intervals; }
+    get multiplePostfix() { return this.settings?.multiplePostfix ?? this.defaultSettings.multiplePostfix; }
+    get localizationPrefix() { return this.settings?.localizationPrefix ?? this.defaultSettings.localizationPrefix; }
+    get justNowKey() { return this.settings?.justNowKey ?? this.defaultSettings.justNowKey; }
+    get justNowSeconds() { return this.settings?.justNowSeconds ?? this.defaultSettings.justNowSeconds; }
+    constructor(translate, _ref, settings) {
+        this.translate = translate;
+        this._ref = _ref;
+        this.settings = settings;
+        this.defaultSettings = {
+            intervals: [
+                {
+                    key: "YEAR",
+                    interval: 31536000,
+                    min: 1
+                },
+                {
+                    key: "MONTH",
+                    interval: 2592000,
+                    min: 1
+                },
+                {
+                    key: "WEEK",
+                    interval: 604800,
+                    min: 2
+                },
+                {
+                    key: "DAY",
+                    interval: 86400,
+                    min: 1
+                },
+                {
+                    key: "HOUR",
+                    interval: 3600,
+                    min: 1
+                },
+                {
+                    key: "MINUTE",
+                    interval: 60,
+                    min: 1
+                },
+                {
+                    key: "SECOND",
+                    interval: 1,
+                    min: 10
+                }
+            ],
+            localizationPrefix: "DATE_AGO",
+            multiplePostfix: "S",
+            justNowKey: "JUST_NOW",
+            justNowSeconds: 29
+        };
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    transform(value, enableMultiplePostfix = true) {
+        if (!value) {
+            return "";
+        }
+        const dateAgo = this.calculateDateAgo(value, enableMultiplePostfix);
+        if (!dateAgo) {
+            return "";
+        }
+        const translatePipe = new TranslatePipe(this.translate, this._ref);
+        return translatePipe.transform(`${this.localizationPrefix}.${dateAgo.key}`, { value: dateAgo.howMany });
+    }
+    calculateDateAgo(value, enableMultiplePostfix) {
+        if (value) {
+            const seconds = Math.floor((new Date().getTime() - new Date(value).getTime()) / 1000);
+            if (seconds < this.justNowSeconds || Number.isNaN(seconds)) // less than 30 seconds ago will show as 'Just now'
+                return { key: this.justNowKey };
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            let counter;
+            let type;
+            for (let i = 0; i < this.intervals.length; i++) {
+                const interval = this.intervals[i];
+                counter = Math.floor(seconds / interval.interval);
+                if (counter >= interval.min) {
+                    type = interval.key;
+                    if (enableMultiplePostfix && counter > 1) {
+                        // add "S" in the end of localization key
+                        type += this.multiplePostfix;
+                    }
+                    break;
+                }
+            }
+            return { key: type, howMany: counter };
+        }
+        return null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: DateAgoPipe, deps: [{ token: i1$1.TranslateService }, { token: i0.ChangeDetectorRef }, { token: DateAgoSettingsToken, optional: true }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.6", ngImport: i0, type: DateAgoPipe, name: "dateAgo", pure: false }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: DateAgoPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'dateAgo',
+                    pure: false
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.TranslateService }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DateAgoSettingsToken]
+                }, {
+                    type: Optional
+                }] }]; } });
+
+class DateAgoModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: DateAgoModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.6", ngImport: i0, type: DateAgoModule, declarations: [DateAgoPipe], imports: [CommonModule,
+            TranslateModule], exports: [DateAgoPipe] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: DateAgoModule, imports: [CommonModule,
+            TranslateModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: DateAgoModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        DateAgoPipe
+                    ],
+                    imports: [
+                        CommonModule,
+                        TranslateModule
+                    ],
+                    exports: [
+                        DateAgoPipe
+                    ]
+                }]
+        }] });
+
+class ClickOutsideDirective {
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+        this.clickOutside = new EventEmitter();
+    }
+    onClick(target) {
+        const clickedInside = this.elementRef.nativeElement.contains(target);
+        if (!clickedInside) {
+            this.clickOutside.emit();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: ClickOutsideDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.6", type: ClickOutsideDirective, selector: "[clickOutside]", outputs: { clickOutside: "clickOutside" }, host: { listeners: { "document:click": "onClick($event.target)" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: ClickOutsideDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: '[clickOutside]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { clickOutside: [{
+                type: Output
+            }], onClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event.target']]
+            }] } });
+
+class ClickOutsideModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: ClickOutsideModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.6", ngImport: i0, type: ClickOutsideModule, declarations: [ClickOutsideDirective], imports: [CommonModule], exports: [ClickOutsideDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: ClickOutsideModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: ClickOutsideModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        ClickOutsideDirective
+                    ],
+                    imports: [
+                        CommonModule
+                    ],
+                    exports: [
+                        ClickOutsideDirective
+                    ]
+                }]
+        }] });
+
+class DragAndDropDirective {
+    get disabled() { return this.element.nativeElement.disabled; }
+    // Dragover listener
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    onDragOver(evt) {
+        evt.preventDefault();
+        evt.stopPropagation();
+        this.active = !this.disabled;
+    }
+    // Dragleave listener
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    onDragLeave(evt) {
+        evt.preventDefault();
+        evt.stopPropagation();
+        this.active = false;
+    }
+    // Drop listener
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    ondrop(evt) {
+        evt.preventDefault();
+        evt.stopPropagation();
+        this.active = false;
+        if (this.disabled) {
+            return;
+        }
+        const files = evt.dataTransfer.files;
+        if (files.length > 0) {
+            this.fileDropped.emit(files);
+        }
+    }
+    constructor(element) {
+        this.element = element;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.fileDropped = new EventEmitter();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: DragAndDropDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.6", type: DragAndDropDirective, selector: "[tldDragAndDrop]", outputs: { fileDropped: "fileDropped" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "ondrop($event)" }, properties: { "class.tld-file-over": "this.active" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: DragAndDropDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: '[tldDragAndDrop]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { active: [{
+                type: HostBinding,
+                args: ['class.tld-file-over']
+            }], fileDropped: [{
+                type: Output
+            }], onDragOver: [{
+                type: HostListener,
+                args: ['dragover', ['$event']]
+            }], onDragLeave: [{
+                type: HostListener,
+                args: ['dragleave', ['$event']]
+            }], ondrop: [{
+                type: HostListener,
+                args: ['drop', ['$event']]
+            }] } });
+
+class DragAndDropModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: DragAndDropModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.6", ngImport: i0, type: DragAndDropModule, declarations: [DragAndDropDirective], imports: [CommonModule], exports: [DragAndDropDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: DragAndDropModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: DragAndDropModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        DragAndDropDirective
+                    ],
+                    imports: [
+                        CommonModule
+                    ],
+                    exports: [
+                        DragAndDropDirective
+                    ]
+                }]
+        }] });
+
+class MatButtonLoadingDirective {
+    set loading(value) {
+        if (value != this._loading) {
+            this._loading = value;
+            this.updateState();
+        }
+    }
+    constructor(matButton, viewContainerRef, renderer) {
+        this.matButton = matButton;
+        this.viewContainerRef = viewContainerRef;
+        this.renderer = renderer;
+        this._loading = false;
+    }
+    get nativeElement() {
+        return this.matButton._elementRef.nativeElement;
+    }
+    updateState() {
+        if (this._loading) {
+            this.nativeElement.classList.add('mat-loading');
+            this.matButton.disabled = true;
+            this.createSpinner();
+            return;
+        }
+        this.nativeElement.classList.remove('mat-loading');
+        this.matButton.disabled = false;
+        this.destroySpinner();
+    }
+    createSpinner() {
+        if (!this.spinner) {
+            this.spinner = this.viewContainerRef.createComponent(MatProgressSpinner);
+            this.spinner.instance.color = this.matButton.color;
+            this.spinner.instance.diameter = 20;
+            this.spinner.instance.mode = 'indeterminate';
+            this.renderer.appendChild(this.matButton._elementRef.nativeElement, this.spinner.instance._elementRef.nativeElement);
+        }
+    }
+    destroySpinner() {
+        if (this.spinner) {
+            this.spinner.destroy();
+            this.spinner = null;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MatButtonLoadingDirective, deps: [{ token: i1$2.MatButton }, { token: i0.ViewContainerRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.6", type: MatButtonLoadingDirective, selector: "button[mat-button][loading],\n  button[mat-raised-button][loading],\n  button[mat-icon-button][loading],\n  button[mat-fab][loading],\n  button[mat-mini-fab][loading],\n  button[mat-stroked-button][loading],\n  button[mat-flat-button][loading]", inputs: { loading: "loading" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MatButtonLoadingDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: `button[mat-button][loading],
+  button[mat-raised-button][loading],
+  button[mat-icon-button][loading],
+  button[mat-fab][loading],
+  button[mat-mini-fab][loading],
+  button[mat-stroked-button][loading],
+  button[mat-flat-button][loading]`
+                }]
+        }], ctorParameters: function () { return [{ type: i1$2.MatButton }, { type: i0.ViewContainerRef }, { type: i0.Renderer2 }]; }, propDecorators: { loading: [{
+                type: Input
+            }] } });
+
+class MatButtonLoadingModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MatButtonLoadingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.6", ngImport: i0, type: MatButtonLoadingModule, declarations: [MatButtonLoadingDirective], imports: [CommonModule], exports: [MatButtonLoadingDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MatButtonLoadingModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MatButtonLoadingModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [MatButtonLoadingDirective],
+                    imports: [
+                        CommonModule
+                    ],
+                    exports: [MatButtonLoadingDirective]
+                }]
+        }] });
+
+class CloseButtonComponent {
+    constructor() {
+        // any type because emitter doesn't really need a value
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.tldClick = new EventEmitter();
+        this.ariaCode = "CLOSE_BUTTON";
+    }
+    clicked() {
+        this.tldClick.emit(null);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: CloseButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: CloseButtonComponent, selector: "tld-close-button", inputs: { ariaCode: "ariaCode", disabled: "disabled", tooltip: "tooltip" }, outputs: { tldClick: "tldClick" }, viewQueries: [{ propertyName: "clearButton", first: true, predicate: ["clearButton"], descendants: true }], ngImport: i0, template: "<button [matTooltip]=\"tooltip | translate\"\r\n#clearButton mat-icon-button (click)=\"clicked()\" [attr.aria-label]=\"'ARIA_LABELS.'+ariaCode | translate\"\r\n    [disabled]=\"disabled\">\r\n    <span class=\"material-icons\">\r\n        close\r\n    </span>\r\n</button>", dependencies: [{ kind: "component", type: i1$2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i2$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: CloseButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tld-close-button', template: "<button [matTooltip]=\"tooltip | translate\"\r\n#clearButton mat-icon-button (click)=\"clicked()\" [attr.aria-label]=\"'ARIA_LABELS.'+ariaCode | translate\"\r\n    [disabled]=\"disabled\">\r\n    <span class=\"material-icons\">\r\n        close\r\n    </span>\r\n</button>" }]
+        }], propDecorators: { tldClick: [{
+                type: Output
+            }], ariaCode: [{
+                type: Input
+            }], clearButton: [{
+                type: ViewChild,
+                args: ["clearButton"]
+            }], disabled: [{
+                type: Input
+            }], tooltip: [{
+                type: Input
+            }] } });
+
+class CloseButtonModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: CloseButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.6", ngImport: i0, type: CloseButtonModule, declarations: [CloseButtonComponent], imports: [CommonModule,
+            MatButtonModule,
+            TranslateModule,
+            MatTooltipModule], exports: [CloseButtonComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: CloseButtonModule, imports: [CommonModule,
+            MatButtonModule,
+            TranslateModule,
+            MatTooltipModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: CloseButtonModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        CloseButtonComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        MatButtonModule,
+                        TranslateModule,
+                        MatTooltipModule
+                    ],
+                    exports: [
+                        CloseButtonComponent
+                    ]
+                }]
+        }] });
+
+class NotificationMessageComponent {
+    constructor() {
+        this.buttonClicked = new EventEmitter();
+        this.closeClicked = new EventEmitter();
+        this.linkClicked = new EventEmitter();
+        this.iconNames = {
+            "BASIC": "info",
+            "ERROR": "error",
+            "SUCCESS": "check_circle",
+            "WARNING": "info",
+        };
+    }
+    ngOnInit() {
+        this.className = this.message.type.toLocaleLowerCase();
+    }
+    buttonClick() {
+        this.buttonClicked.next(null);
+    }
+    closeClick() {
+        this.closeClicked.next(null);
+    }
+    linkClick() {
+        this.linkClicked.next(null);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: NotificationMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: NotificationMessageComponent, selector: "lib-tld-notification-message", inputs: { message: "message", inline: "inline" }, outputs: { buttonClicked: "buttonClicked", closeClicked: "closeClicked", linkClicked: "linkClicked" }, ngImport: i0, template: "<div class=\"notification-message {{className}}\">\r\n  <div class=\"notification-message-container tld-default-border\" [ngClass.lt-md]=\"'mobile'\" [class.inline]=\"inline\"\r\n    fxLayout=\"row\" fxLayoutAlign=\"start start\" [attr.id]=\"message.id\" aria-live=\"polite\" fxLayout=\"row\">\r\n    <span class=\"material-icons message-icon\">\r\n      {{iconNames[message.type]}}\r\n    </span>\r\n    <div class=\"items-container\" fxFlex>\r\n      <div fxLayout=\"row\">\r\n        <div class=\"text-container\" fxFlex>\r\n          <h1 *ngIf=\"message.title\" class=\"message-title\"\r\n            [innerHtml]=\"message.title | translate: message.localizationParams\"></h1>\r\n          <p *ngIf=\"message.body\" class=\"message-body\">\r\n            <span [innerHtml]=\"message.body | translate: message.localizationParams\"></span>\r\n            <span *ngIf=\"message.support\" [innerHtml]=\"message.support | translate: message.localizationParams\"></span>\r\n          </p>\r\n        </div>\r\n        <tld-close-button *ngIf=\"!message.hideClose\" class=\"close-button\" (tldClick)=\"closeClick()\">\r\n        </tld-close-button>\r\n      </div>\r\n      <div fxLayout=\"row\" fxLayoutGap=\"16px\" fxLayoutAlign=\"start center\"\r\n        *ngIf=\"message.buttonText || message.linkHref || message.routerLink\">\r\n        <button class=\"message-action-button\" color=\"accent\" mat-flat-button *ngIf=\"message.buttonText\"\r\n          (click)=\"buttonClick()\">{{message.buttonText | translate}} </button>\r\n        <a class=\"message-action-link\" *ngIf=\"message.linkHref && message.linkText\" (click)=\"linkClick()\"\r\n          [attr.href]=\"message.linkHref\">{{message.linkText |\r\n          translate}}</a>\r\n        <a class=\"message-action-link\" *ngIf=\"message.routerLink && message.linkText\" (click)=\"linkClick()\"\r\n          [routerLink]=\"[message.routerLink]\">{{message.linkText |\r\n          translate}}</a>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:inline-block;width:100%}.notification-message.basic .notification-message-container{background-color:var(--base-100);border-color:var(--base-100)}.notification-message.basic .notification-message-container .message-icon{color:var(--base-40)}.notification-message.basic .notification-message-container .message-action-button{background-color:var(--base-40)}.notification-message.error .notification-message-container{background-color:var(--error-light);border-color:var(--base-100)}.notification-message.error .notification-message-container .message-icon{color:var(--error-dark)}.notification-message.error .notification-message-container .message-action-button{background-color:var(--base-40)}.notification-message.warning .notification-message-container{background-color:var(--warning-light);border-color:var(--base-100)}.notification-message.warning .notification-message-container .message-icon{color:var(--warning-dark)}.notification-message.warning .notification-message-container .message-action-button{background-color:var(--base-40)}.notification-message.success .notification-message-container{background-color:var(--success-light);border-color:var(--base-100)}.notification-message.success .notification-message-container .message-icon{color:var(--success-dark)}.notification-message.success .notification-message-container .message-action-button{background-color:var(--base-40)}.notification-message .notification-message-container{border:1px solid var(--base-95);border-radius:.5em}.notification-message .notification-message-container.mobile{padding:.6em .4em!important}.notification-message .notification-message-container.mobile .items-container{margin-left:.4em!important}.notification-message .notification-message-container.mobile .items-container div+div{margin-top:.2em!important}.notification-message .notification-message-container.mobile .items-container .message-title+.message-body{margin-top:0!important}.notification-message .notification-message-container .text-container:first-child{line-height:1.5em}.notification-message .notification-message-container .text-container .message-title{font-weight:500;margin:0}.notification-message .notification-message-container .text-container .message-body{margin:0}.notification-message .notification-message-container:not(.inline){padding:1.5em}.notification-message .notification-message-container:not(.inline) .items-container{margin-left:1em}.notification-message .notification-message-container:not(.inline) .items-container div+div,.notification-message .notification-message-container:not(.inline) .items-container .message-title+.message-body{margin-top:1em}.notification-message .notification-message-container:not(.inline) .message-title{font-size:1.25em}.notification-message .notification-message-container:not(.inline) .message-body{line-height:1.5em}.notification-message .notification-message-container.inline{padding:.75em 1em}.notification-message .notification-message-container.inline .items-container{margin-left:.75em}.notification-message .notification-message-container.inline .items-container div+div{margin-top:.5em}.notification-message .notification-message-container.inline .items-container .message-title+.message-body{margin-top:.2em}.notification-message .notification-message-container.inline .message-title{font-size:1em}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i3.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: CloseButtonComponent, selector: "tld-close-button", inputs: ["ariaCode", "disabled", "tooltip"], outputs: ["tldClick"] }, { kind: "component", type: i1$2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i6.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: NotificationMessageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-tld-notification-message', template: "<div class=\"notification-message {{className}}\">\r\n  <div class=\"notification-message-container tld-default-border\" [ngClass.lt-md]=\"'mobile'\" [class.inline]=\"inline\"\r\n    fxLayout=\"row\" fxLayoutAlign=\"start start\" [attr.id]=\"message.id\" aria-live=\"polite\" fxLayout=\"row\">\r\n    <span class=\"material-icons message-icon\">\r\n      {{iconNames[message.type]}}\r\n    </span>\r\n    <div class=\"items-container\" fxFlex>\r\n      <div fxLayout=\"row\">\r\n        <div class=\"text-container\" fxFlex>\r\n          <h1 *ngIf=\"message.title\" class=\"message-title\"\r\n            [innerHtml]=\"message.title | translate: message.localizationParams\"></h1>\r\n          <p *ngIf=\"message.body\" class=\"message-body\">\r\n            <span [innerHtml]=\"message.body | translate: message.localizationParams\"></span>\r\n            <span *ngIf=\"message.support\" [innerHtml]=\"message.support | translate: message.localizationParams\"></span>\r\n          </p>\r\n        </div>\r\n        <tld-close-button *ngIf=\"!message.hideClose\" class=\"close-button\" (tldClick)=\"closeClick()\">\r\n        </tld-close-button>\r\n      </div>\r\n      <div fxLayout=\"row\" fxLayoutGap=\"16px\" fxLayoutAlign=\"start center\"\r\n        *ngIf=\"message.buttonText || message.linkHref || message.routerLink\">\r\n        <button class=\"message-action-button\" color=\"accent\" mat-flat-button *ngIf=\"message.buttonText\"\r\n          (click)=\"buttonClick()\">{{message.buttonText | translate}} </button>\r\n        <a class=\"message-action-link\" *ngIf=\"message.linkHref && message.linkText\" (click)=\"linkClick()\"\r\n          [attr.href]=\"message.linkHref\">{{message.linkText |\r\n          translate}}</a>\r\n        <a class=\"message-action-link\" *ngIf=\"message.routerLink && message.linkText\" (click)=\"linkClick()\"\r\n          [routerLink]=\"[message.routerLink]\">{{message.linkText |\r\n          translate}}</a>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:inline-block;width:100%}.notification-message.basic .notification-message-container{background-color:var(--base-100);border-color:var(--base-100)}.notification-message.basic .notification-message-container .message-icon{color:var(--base-40)}.notification-message.basic .notification-message-container .message-action-button{background-color:var(--base-40)}.notification-message.error .notification-message-container{background-color:var(--error-light);border-color:var(--base-100)}.notification-message.error .notification-message-container .message-icon{color:var(--error-dark)}.notification-message.error .notification-message-container .message-action-button{background-color:var(--base-40)}.notification-message.warning .notification-message-container{background-color:var(--warning-light);border-color:var(--base-100)}.notification-message.warning .notification-message-container .message-icon{color:var(--warning-dark)}.notification-message.warning .notification-message-container .message-action-button{background-color:var(--base-40)}.notification-message.success .notification-message-container{background-color:var(--success-light);border-color:var(--base-100)}.notification-message.success .notification-message-container .message-icon{color:var(--success-dark)}.notification-message.success .notification-message-container .message-action-button{background-color:var(--base-40)}.notification-message .notification-message-container{border:1px solid var(--base-95);border-radius:.5em}.notification-message .notification-message-container.mobile{padding:.6em .4em!important}.notification-message .notification-message-container.mobile .items-container{margin-left:.4em!important}.notification-message .notification-message-container.mobile .items-container div+div{margin-top:.2em!important}.notification-message .notification-message-container.mobile .items-container .message-title+.message-body{margin-top:0!important}.notification-message .notification-message-container .text-container:first-child{line-height:1.5em}.notification-message .notification-message-container .text-container .message-title{font-weight:500;margin:0}.notification-message .notification-message-container .text-container .message-body{margin:0}.notification-message .notification-message-container:not(.inline){padding:1.5em}.notification-message .notification-message-container:not(.inline) .items-container{margin-left:1em}.notification-message .notification-message-container:not(.inline) .items-container div+div,.notification-message .notification-message-container:not(.inline) .items-container .message-title+.message-body{margin-top:1em}.notification-message .notification-message-container:not(.inline) .message-title{font-size:1.25em}.notification-message .notification-message-container:not(.inline) .message-body{line-height:1.5em}.notification-message .notification-message-container.inline{padding:.75em 1em}.notification-message .notification-message-container.inline .items-container{margin-left:.75em}.notification-message .notification-message-container.inline .items-container div+div{margin-top:.5em}.notification-message .notification-message-container.inline .items-container .message-title+.message-body{margin-top:.2em}.notification-message .notification-message-container.inline .message-title{font-size:1em}\n"] }]
+        }], propDecorators: { message: [{
+                type: Input
+            }], buttonClicked: [{
+                type: Output
+            }], closeClicked: [{
+                type: Output
+            }], linkClicked: [{
+                type: Output
+            }], inline: [{
+                type: Input
+            }] } });
+
+class NotificationMessageModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: NotificationMessageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.6", ngImport: i0, type: NotificationMessageModule, declarations: [NotificationMessageComponent], imports: [CommonModule,
+            FlexLayoutModule,
+            CloseButtonModule,
+            MatButtonModule,
+            TranslateModule,
+            RouterModule], exports: [NotificationMessageComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: NotificationMessageModule, imports: [CommonModule,
+            FlexLayoutModule,
+            CloseButtonModule,
+            MatButtonModule,
+            TranslateModule,
+            RouterModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: NotificationMessageModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        NotificationMessageComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        FlexLayoutModule,
+                        CloseButtonModule,
+                        MatButtonModule,
+                        TranslateModule,
+                        RouterModule
+                    ],
+                    exports: [
+                        NotificationMessageComponent
+                    ]
+                }]
+        }] });
+
+var NotificationMessageType;
+(function (NotificationMessageType) {
+    NotificationMessageType["BASIC"] = "BASIC";
+    NotificationMessageType["WARNING"] = "WARNING";
+    NotificationMessageType["SUCCESS"] = "SUCCESS";
+    NotificationMessageType["ERROR"] = "ERROR";
+})(NotificationMessageType || (NotificationMessageType = {}));
+
+class TldLoaderComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: TldLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: TldLoaderComponent, selector: "lib-tld-loader", ngImport: i0, template: "<div class=\"tld-loader accent-color\" fxLayout=\"row\" fxLayoutGap=\"10px\">\r\n  <div class=\"accent-bg-color tld-loader-element element-1\"></div>\r\n  <div class=\"accent-bg-color tld-loader-element element-2\"></div>\r\n  <div class=\"accent-bg-color tld-loader-element element-3\"></div>\r\n</div>\r\n", styles: [".tld-loader .tld-loader-element{will-change:transform;border-radius:50%;animation:grow .6s ease-in-out infinite alternate;width:24px;height:24px}.tld-loader .tld-loader-element.element-2{animation-delay:.2s}.tld-loader .tld-loader-element.element-3{animation-delay:.4s}@keyframes grow{to{transform:translate(-50%) scale(0)}}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: TldLoaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-tld-loader', template: "<div class=\"tld-loader accent-color\" fxLayout=\"row\" fxLayoutGap=\"10px\">\r\n  <div class=\"accent-bg-color tld-loader-element element-1\"></div>\r\n  <div class=\"accent-bg-color tld-loader-element element-2\"></div>\r\n  <div class=\"accent-bg-color tld-loader-element element-3\"></div>\r\n</div>\r\n", styles: [".tld-loader .tld-loader-element{will-change:transform;border-radius:50%;animation:grow .6s ease-in-out infinite alternate;width:24px;height:24px}.tld-loader .tld-loader-element.element-2{animation-delay:.2s}.tld-loader .tld-loader-element.element-3{animation-delay:.4s}@keyframes grow{to{transform:translate(-50%) scale(0)}}\n"] }]
+        }] });
+
+class TldLoaderModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: TldLoaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.6", ngImport: i0, type: TldLoaderModule, declarations: [TldLoaderComponent], exports: [TldLoaderComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: TldLoaderModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: TldLoaderModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        TldLoaderComponent
+                    ],
+                    exports: [
+                        TldLoaderComponent
+                    ]
+                }]
+        }] });
+
+class MissingTranslationHelper {
+    handle(params) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        return params.interpolateParams?.default || params.key;
+    }
+}
+
+class SaveFileHelper {
+    static saveFile(content, fileName) {
+        const file = new Blob([content]);
+        const link = document.createElement("a");
+        link.href = URL.createObjectURL(file);
+        link.download = fileName;
+        link.click();
+        link.remove();
+    }
+}
+
+class HtmlElementParseHelper {
+    static tableAsCsv(tableElement, ignoreAttributeName) {
+        const csv_data = [];
+        const rows = tableElement.querySelectorAll('tr');
+        const columnSelector = ignoreAttributeName ? `td:not([${ignoreAttributeName}]),th:not([${ignoreAttributeName}])` : `td,th`;
+        for (let i = 0; i < rows.length; i++) {
+            const cols = rows[i].querySelectorAll(columnSelector);
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const csvrow = Array.from(cols).map((element) => `"${element.innerText}"`);
+            csv_data.push(csvrow.join(","));
+        }
+        return csv_data.join('\n');
+    }
+}
+
+class CompanyProductComponent {
+    constructor() {
+        this.company = "";
+        this.product = "";
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: CompanyProductComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: CompanyProductComponent, selector: "lib-company-product", inputs: { company: "company", product: "product" }, ngImport: i0, template: "<div fxHide.lt-md class=\"tilde-product-title\">\r\n    <span class=\"company\">\r\n        {{company | uppercase}}\r\n    </span>\r\n    <span class=\"product\">\r\n        {{product}}\r\n    </span>\r\n</div>", styles: [".tilde-product-title{font-family:Roboto;text-decoration:none!important}.tilde-product-title .company{font-weight:700;font-size:.75rem;line-height:1rem;color:#616e7c;letter-spacing:1px;display:block}.tilde-product-title .product{font-weight:500;font-size:1.25rem;line-height:1.5rem;color:#1f2933;display:block}\n"], dependencies: [{ kind: "pipe", type: i2$1.UpperCasePipe, name: "uppercase" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: CompanyProductComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-company-product', template: "<div fxHide.lt-md class=\"tilde-product-title\">\r\n    <span class=\"company\">\r\n        {{company | uppercase}}\r\n    </span>\r\n    <span class=\"product\">\r\n        {{product}}\r\n    </span>\r\n</div>", styles: [".tilde-product-title{font-family:Roboto;text-decoration:none!important}.tilde-product-title .company{font-weight:700;font-size:.75rem;line-height:1rem;color:#616e7c;letter-spacing:1px;display:block}.tilde-product-title .product{font-weight:500;font-size:1.25rem;line-height:1.5rem;color:#1f2933;display:block}\n"] }]
+        }], propDecorators: { company: [{
+                type: Input
+            }], product: [{
+                type: Input
+            }] } });
+
+class CompanyProductModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: CompanyProductModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.6", ngImport: i0, type: CompanyProductModule, declarations: [CompanyProductComponent], imports: [CommonModule], exports: [CompanyProductComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: CompanyProductModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: CompanyProductModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        CompanyProductComponent
+                    ],
+                    imports: [
+                        CommonModule
+                    ],
+                    exports: [CompanyProductComponent]
+                }]
+        }] });
+
+class FooterComponent {
+    constructor() {
+        this.defaultTermsRoute = "terms-of-use";
+        this.defaultPrivacyRoute = "privacy-policy";
+        this.privacyRoute = this.defaultPrivacyRoute;
+        this.termsOfUseRoute = this.defaultTermsRoute;
+        this.contactUsRoute = "https://tilde.com/about/get-in-touch";
+        this.currentYear = new Date().getFullYear();
+    }
+    ngOnInit() {
+        if (this.baseUrl) {
+            this.privacyRoute = this.baseUrl + this.privacyRoute;
+            this.termsOfUseRoute = this.baseUrl + this.termsOfUseRoute;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: FooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: FooterComponent, selector: "tld-footer", inputs: { privacyRoute: "privacyRoute", termsOfUseRoute: "termsOfUseRoute", contactUsRoute: "contactUsRoute", baseUrl: "baseUrl" }, ngImport: i0, template: "<footer fxLayout=\"row\" class=\"text-m\">\r\n  <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start center\" fxLayoutAlign.xs=\"center center\" fxLayout.xs=\"column\"\r\n    fxLayoutGap=\"16px\">\r\n    <div>\r\n      {{ 'FOOTER.TITLE' | translate: {currentYear: currentYear} }}\r\n    </div>\r\n    <div fxLayoutGap=\"1rem\">\r\n      <ng-container *ngIf=\"baseUrl; else localRoutes\">\r\n        <a class=\"semi-bold\" *ngIf=\"termsOfUseRoute\" [attr.href]=\"termsOfUseRoute\" target=\"_blank\"> {{\r\n          'FOOTER.TERMS_OF_USE' |\r\n          translate }}</a>\r\n        <a class=\"semi-bold\" *ngIf=\"privacyRoute\" [attr.href]=\"privacyRoute\" target=\"_blank\"> {{ 'FOOTER.PRIVACY'\r\n          | translate }}</a>\r\n        <a class=\"semi-bold\" *ngIf=\"contactUsRoute\" [routerLink]=\"[contactUsRoute]\"> {{ 'FOOTER.CONTACT_US'| translate\r\n          }}</a>\r\n\r\n      </ng-container>\r\n      <ng-template #localRoutes>\r\n        <a class=\"semi-bold\" *ngIf=\"termsOfUseRoute\" [routerLink]=\"[termsOfUseRoute]\"> {{ 'FOOTER.TERMS_OF_USE' |\r\n          translate }}</a>\r\n        <a class=\"semi-bold\" *ngIf=\"privacyRoute\" [routerLink]=\"[privacyRoute]\"> {{ 'FOOTER.PRIVACY'| translate }}</a>\r\n        <a class=\"semi-bold\" *ngIf=\"contactUsRoute\" [routerLink]=\"[contactUsRoute]\"> {{ 'FOOTER.CONTACT_US'| translate\r\n          }}</a>\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</footer>\r\n", styles: [":host footer{color:var(--base-30);padding:1rem 2rem;margin-bottom:0;border-top:1px solid var(--base-70);margin-top:1rem}:host footer a{color:var(--base-30);text-decoration:none}:host footer a:hover{color:var(--base-30);text-decoration:underline}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i6.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: FooterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tld-footer', template: "<footer fxLayout=\"row\" class=\"text-m\">\r\n  <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start center\" fxLayoutAlign.xs=\"center center\" fxLayout.xs=\"column\"\r\n    fxLayoutGap=\"16px\">\r\n    <div>\r\n      {{ 'FOOTER.TITLE' | translate: {currentYear: currentYear} }}\r\n    </div>\r\n    <div fxLayoutGap=\"1rem\">\r\n      <ng-container *ngIf=\"baseUrl; else localRoutes\">\r\n        <a class=\"semi-bold\" *ngIf=\"termsOfUseRoute\" [attr.href]=\"termsOfUseRoute\" target=\"_blank\"> {{\r\n          'FOOTER.TERMS_OF_USE' |\r\n          translate }}</a>\r\n        <a class=\"semi-bold\" *ngIf=\"privacyRoute\" [attr.href]=\"privacyRoute\" target=\"_blank\"> {{ 'FOOTER.PRIVACY'\r\n          | translate }}</a>\r\n        <a class=\"semi-bold\" *ngIf=\"contactUsRoute\" [routerLink]=\"[contactUsRoute]\"> {{ 'FOOTER.CONTACT_US'| translate\r\n          }}</a>\r\n\r\n      </ng-container>\r\n      <ng-template #localRoutes>\r\n        <a class=\"semi-bold\" *ngIf=\"termsOfUseRoute\" [routerLink]=\"[termsOfUseRoute]\"> {{ 'FOOTER.TERMS_OF_USE' |\r\n          translate }}</a>\r\n        <a class=\"semi-bold\" *ngIf=\"privacyRoute\" [routerLink]=\"[privacyRoute]\"> {{ 'FOOTER.PRIVACY'| translate }}</a>\r\n        <a class=\"semi-bold\" *ngIf=\"contactUsRoute\" [routerLink]=\"[contactUsRoute]\"> {{ 'FOOTER.CONTACT_US'| translate\r\n          }}</a>\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</footer>\r\n", styles: [":host footer{color:var(--base-30);padding:1rem 2rem;margin-bottom:0;border-top:1px solid var(--base-70);margin-top:1rem}:host footer a{color:var(--base-30);text-decoration:none}:host footer a:hover{color:var(--base-30);text-decoration:underline}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { privacyRoute: [{
+                type: Input
+            }], termsOfUseRoute: [{
+                type: Input
+            }], contactUsRoute: [{
+                type: Input
+            }], baseUrl: [{
+                type: Input
+            }] } });
+
+class FooterModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: FooterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.6", ngImport: i0, type: FooterModule, declarations: [FooterComponent], imports: [CommonModule,
+            FlexLayoutModule,
+            TranslateModule,
+            RouterModule], exports: [FooterComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: FooterModule, imports: [CommonModule,
+            FlexLayoutModule,
+            TranslateModule,
+            RouterModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: FooterModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        FooterComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        FlexLayoutModule,
+                        TranslateModule,
+                        RouterModule
+                    ],
+                    exports: [FooterComponent]
+                }]
+        }] });
+
+var FileUploadErrorTypeEnum;
+(function (FileUploadErrorTypeEnum) {
+    FileUploadErrorTypeEnum["FILE_UPLOAD_UNSUPPORTED_FORMAT"] = "FILE_UPLOAD_UNSUPPORTED_FORMAT";
+    FileUploadErrorTypeEnum["FILE_UPLOAD_UNSUPPORTED_FORMAT_REGISTER"] = "FILE_UPLOAD_UNSUPPORTED_FORMAT_REGISTER";
+    FileUploadErrorTypeEnum["MAX_SIZE"] = "FILE_UPLOAD_MAX_SIZE";
+    FileUploadErrorTypeEnum["FILE_EMPTY"] = "FILE_UPLOAD_EMPTY";
+})(FileUploadErrorTypeEnum || (FileUploadErrorTypeEnum = {}));
+
+class FileUploadComponent {
+    constructor() {
+        this.fileChange = new EventEmitter();
+        this.errorEvent = new EventEmitter();
+        this._accept = [];
+        this.multiple = false;
+    }
+    set accept(val) {
+        this._accept = val;
+        this.allowedExtensions = val ? val.join(",") : "";
+    }
+    get accept() { return this._accept; }
+    handleFileInput(event) {
+        const target = event.target;
+        const files = target.files;
+        this.validate(files);
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    onFileDrop(files) {
+        this.validate(files);
+    }
+    emit(files) {
+        if (files && files.length > 0) {
+            this.fileChange.emit(files);
+        }
+    }
+    emitError(error) {
+        this.errorEvent.emit(error);
+    }
+    validate(files) {
+        //let size = 0;
+        const validFiles = [];
+        for (let i = 0; i < files.length; i++) {
+            const file = files[i];
+            if (!this.allowEmpty && file.size == 0) {
+                this.emitError({ code: FileUploadErrorTypeEnum.FILE_EMPTY, error: "File is empty", fileName: file.name });
+                return;
+            }
+            //size += file.size;
+            const extensionErrorCode = this.getExtensionErrorCode(file.name);
+            if (extensionErrorCode) {
+                const error = { code: extensionErrorCode, error: "Not valid extension.", fileName: file.name };
+                this.emitError(error);
+            }
+            else if (this.maxSize && file.size > this.maxSize) {
+                const error = { code: FileUploadErrorTypeEnum.MAX_SIZE, error: "Maximum allowed file size exceeded.", fileName: file.name };
+                this.emitError(error);
+            }
+            else {
+                validFiles.push(file);
+            }
+        }
+        this.emit(validFiles);
+        this.fileInput.nativeElement.value = '';
+    }
+    getExtensionErrorCode(fileName) {
+        const extension = fileName.slice(fileName.lastIndexOf('.')).toLowerCase();
+        if (this.accept.length == 0 || (this.accept.length == 1 && this.accept[0] == '*') || this.accept.includes(extension)) {
+            return null;
+        }
+        else {
+            return this.extendedAcceptList?.includes(extension) ? FileUploadErrorTypeEnum.FILE_UPLOAD_UNSUPPORTED_FORMAT_REGISTER : FileUploadErrorTypeEnum.FILE_UPLOAD_UNSUPPORTED_FORMAT;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: FileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: FileUploadComponent, selector: "tld-file-upload", inputs: { accept: "accept", maxSize: "maxSize", multiple: "multiple", filePreviewProgress: "filePreviewProgress", allowEmpty: "allowEmpty", disabled: "disabled", uploadIconName: "uploadIconName", extendedAcceptList: "extendedAcceptList" }, outputs: { fileChange: "fileChange", errorEvent: "errorEvent" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }, { propertyName: "inputButton", first: true, predicate: ["inputButton"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"file-upload\" [ngClass.lt-sm]=\"'file-upload-mobile'\">\r\n  <mat-progress-bar class=\"tld-file-upload-progress\" color=\"primary\" [value]=\"filePreviewProgress\"\r\n    *ngIf=\"filePreviewProgress\"></mat-progress-bar>\r\n  <button tldDragAndDrop #inputButton mat-button (fileDropped)=\"onFileDrop($event)\" [disabled]=\"disabled\" type=\"button\"\r\n    (click)=\"fileInput.click()\" class=\"upload-button text-l\">\r\n    <mat-icon *ngIf=\"uploadIconName\">{{uploadIconName}}</mat-icon>\r\n    <ng-content></ng-content>\r\n  </button>\r\n</div>\r\n<input #fileInput type=\"file\" (change)=\"handleFileInput($event)\" name=\"files\" class=\"native-file-input\"\r\n  [accept]=\"allowedExtensions\" [multiple]=\"multiple\" />\r\n", styles: [".file-upload{max-width:100%;width:100%}.file-upload .upload-button{width:100%;font-size:1em;border:1px dashed #9aa5b1;border-radius:16px;background-color:#fff;font-family:var(--tld-font);padding:1em;white-space:normal;line-height:normal;text-align:left}.file-upload-mobile .upload-button{border:2px solid var(--base-70);padding:.5em 1em!important}.tld-file-over{background-color:#e5e7e8!important;border-color:#00f!important}.mat-icon{color:var(--accent);margin-right:16px}.mat-mdc-outlined-button .mat-button-wrapper{pointer-events:none}.native-file-input{display:none}.tld-file-upload-progress ::ng-deep .mat-progress-bar-fill:after{background-color:#1e457c}.tld-file-upload-progress ::ng-deep .mat-progress-bar-buffer{background:white}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$4.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i3.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: i1$2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: DragAndDropDirective, selector: "[tldDragAndDrop]", outputs: ["fileDropped"] }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: FileUploadComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tld-file-upload', template: "<div class=\"file-upload\" [ngClass.lt-sm]=\"'file-upload-mobile'\">\r\n  <mat-progress-bar class=\"tld-file-upload-progress\" color=\"primary\" [value]=\"filePreviewProgress\"\r\n    *ngIf=\"filePreviewProgress\"></mat-progress-bar>\r\n  <button tldDragAndDrop #inputButton mat-button (fileDropped)=\"onFileDrop($event)\" [disabled]=\"disabled\" type=\"button\"\r\n    (click)=\"fileInput.click()\" class=\"upload-button text-l\">\r\n    <mat-icon *ngIf=\"uploadIconName\">{{uploadIconName}}</mat-icon>\r\n    <ng-content></ng-content>\r\n  </button>\r\n</div>\r\n<input #fileInput type=\"file\" (change)=\"handleFileInput($event)\" name=\"files\" class=\"native-file-input\"\r\n  [accept]=\"allowedExtensions\" [multiple]=\"multiple\" />\r\n", styles: [".file-upload{max-width:100%;width:100%}.file-upload .upload-button{width:100%;font-size:1em;border:1px dashed #9aa5b1;border-radius:16px;background-color:#fff;font-family:var(--tld-font);padding:1em;white-space:normal;line-height:normal;text-align:left}.file-upload-mobile .upload-button{border:2px solid var(--base-70);padding:.5em 1em!important}.tld-file-over{background-color:#e5e7e8!important;border-color:#00f!important}.mat-icon{color:var(--accent);margin-right:16px}.mat-mdc-outlined-button .mat-button-wrapper{pointer-events:none}.native-file-input{display:none}.tld-file-upload-progress ::ng-deep .mat-progress-bar-fill:after{background-color:#1e457c}.tld-file-upload-progress ::ng-deep .mat-progress-bar-buffer{background:white}\n"] }]
+        }], propDecorators: { fileInput: [{
+                type: ViewChild,
+                args: ['fileInput']
+            }], inputButton: [{
+                type: ViewChild,
+                args: ['inputButton', { read: ElementRef }]
+            }], fileChange: [{
+                type: Output
+            }], errorEvent: [{
+                type: Output
+            }], accept: [{
+                type: Input
+            }], maxSize: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }], filePreviewProgress: [{
+                type: Input
+            }], allowEmpty: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], uploadIconName: [{
+                type: Input
+            }], extendedAcceptList: [{
+                type: Input
+            }] } });
+
+class FileUploadModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: FileUploadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.6", ngImport: i0, type: FileUploadModule, declarations: [FileUploadComponent], imports: [CommonModule,
+            MatProgressBarModule,
+            FlexLayoutModule,
+            MatButtonModule,
+            DragAndDropModule,
+            MatIconModule], exports: [FileUploadComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: FileUploadModule, imports: [CommonModule,
+            MatProgressBarModule,
+            FlexLayoutModule,
+            MatButtonModule,
+            DragAndDropModule,
+            MatIconModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: FileUploadModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [FileUploadComponent],
+                    imports: [
+                        CommonModule,
+                        MatProgressBarModule,
+                        FlexLayoutModule,
+                        MatButtonModule,
+                        DragAndDropModule,
+                        MatIconModule
+                    ],
+                    exports: [
+                        FileUploadComponent
+                    ]
+                }]
+        }] });
+
+class FilterBarComponent {
+    onResize() {
+        this.checkOverflow();
+    }
+    set filterRowVisible(value) {
+        this._filterRowVisible = value;
+        this.cdref.detectChanges();
+        this.checkOverflow();
+    }
+    // getter for cleaner template html
+    get filterFormGroupValue() {
+        return this.filterFormGroup.value;
+    }
+    // eslint-disable-next-line @typescript-eslint/adjacent-overload-signatures
+    get filterRowVisible() { return this._filterRowVisible; }
+    get inputText() {
+        return this._inputText;
+    }
+    get showSearch() {
+        return !this.settings?.hideSearch;
+    }
+    // eslint-disable-next-line @typescript-eslint/adjacent-overload-signatures
+    set inputText(value) {
+        this._inputText = value;
+        this.filters.input = this._inputText;
+        this.emitFilters();
+    }
+    constructor(cdref, translate) {
+        this.cdref = cdref;
+        this.translate = translate;
+        this.filterBarChange = new EventEmitter();
+        this._inputText = "";
+        /** To hide filters, but leave chips visible */
+        this.inputFormControlName = "input";
+        this.filterFormGroup = new FormGroup({});
+        this.form = new FormGroup({
+            [this.inputFormControlName]: new FormControl(""),
+            filters: this.filterFormGroup
+        });
+        this.filters = {
+            filters: {},
+            input: ""
+        };
+        this.filterOverflow = false;
+        this.activeFilterIndex = 0;
+        // when to show filter by name or id on mobile
+        this.searchIndex = -1;
+    }
+    ngOnInit() {
+        this.settings.filters?.forEach((field) => {
+            this.filterFormGroup.addControl(field.fieldName, new FormControl([]));
+        });
+        this.subscribeToFormValueChanges();
+        this.searchTooltip = this.settings?.searchTooltip ?? 'FILTER_BAR.SEARCH_TOOLTIP';
+        this.searchTitle = this.settings?.searchTitle ?? 'FILTER_BAR.SEARCH';
+        this.prefixIcon = this.settings?.prefixIcon ?? "filter_alt";
+        this.suffixIcon = this.settings?.suffixIcon ?? "question_mark";
+        this.showSuffixIcon = this.settings?.showSuffixIcon ?? true;
+    }
+    ngAfterViewInit() {
+        this.checkOverflow();
+        this.cdref.detectChanges();
+    }
+    ngOnDestroy() {
+        this.formChangesSubscription.unsubscribe();
+    }
+    emitFilters() {
+        this.filterBarChange.next(this.filters);
+    }
+    switchRight() {
+        if (this.settings?.filters && this.settings?.filters.length === this.activeFilterIndex + 1) {
+            return;
+        }
+        this.activeFilterIndex += 1;
+    }
+    switchLeft() {
+        if (this.activeFilterIndex === this.searchIndex) {
+            return;
+        }
+        this.activeFilterIndex -= 1;
+    }
+    removeFilter(key, ix) {
+        const control = this.filterFormGroup.get(key);
+        if (!control) {
+            return;
+        }
+        const newArray = control.value;
+        newArray.splice(ix, 1);
+        control.setValue(newArray);
+    }
+    checkOverflow() {
+        if (this.filterWrapper) {
+            this.filterOverflow = this.filterWrapper.nativeElement.clientWidth < this.filterWrapper.nativeElement.scrollWidth;
+        }
+    }
+    subscribeToFormValueChanges() {
+        this.formChangesSubscription = this.form.valueChanges.subscribe(() => {
+            this.filters = {
+                input: this.form.value.input ?? "",
+                filters: {}
+            };
+            for (const filterKey in this.form.value.filters) {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const filter = this.form.value.filters[filterKey];
+                this.filters.filters[filterKey] = filter.map((item) => item.value);
+            }
+            this.emitFilters();
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: FilterBarComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: FilterBarComponent, selector: "tld-filter-bar", inputs: { settings: "settings", filterRowVisible: "filterRowVisible" }, outputs: { filterBarChange: "filterBarChange" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "filterWrapper", first: true, predicate: ["filterWrapper"], descendants: true }], ngImport: i0, template: "<div class=\"filter-row\" *ngIf=\"filterRowVisible\">\r\n  <div fxLayout=\"row\" class=\"filter-wrapper\" #filterWrapper [formGroup]=\"form\">\r\n    <mat-form-field fxFlex *ngIf=\"showSearch && !filterOverflow || activeFilterIndex === searchIndex\" class=\"filter-bar-search-input\">\r\n      <span matPrefix class=\"material-icons-outlined\">\r\n        {{prefixIcon}}\r\n      </span>\r\n      <span matSuffix class=\"material-icons-outlined\" *ngIf=\"showSuffixIcon\" [matTooltip]=\"searchTooltip | translate\">\r\n        {{suffixIcon}}\r\n      </span>\r\n      <input class=\"search-input\" matInput [placeholder]=\"searchTitle | translate\"\r\n        [formControlName]=\"inputFormControlName\">\r\n    </mat-form-field>\r\n    <ng-container [formGroup]=\"filterFormGroup\">\r\n\r\n      <mat-form-field [ngClass]=\"{'hidden': filterOverflow && activeFilterIndex !== i, 'engine-filter': !filterOverflow}\" *ngFor=\"let filter of settings?.filters; let i = index\">\r\n        <mat-label>{{filter.title | translate}}</mat-label>\r\n        <mat-select multiple [formControlName]=\"filter.fieldName\">\r\n          <ng-container *ngIf=\"filter.values.length\">\r\n            <mat-option *ngFor=\"let value of filter.values | sortTranslationsByProperty:'key'\" [value]=\"value\">\r\n              {{value.key | translate : {default: value.value | titlecase } }}\r\n            </mat-option>\r\n          </ng-container>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </ng-container>\r\n  </div>\r\n  <button mat-icon-button (click)=\"switchLeft()\" *ngIf=\"filterOverflow\">\r\n    <span class=\"material-icons-outlined\">\r\n      arrow_back_ios\r\n    </span>\r\n  </button>\r\n  <button mat-icon-button *ngIf=\"filterOverflow\" (click)=\"switchRight()\">\r\n    <span class=\"material-icons-outlined\">\r\n      arrow_forward_ios\r\n    </span>\r\n  </button>\r\n</div>\r\n<mat-chip-listbox>\r\n  <div *ngFor=\"let filter of settings?.filters\">\r\n    <mat-chip-option *ngFor=\"let filterValue of filterFormGroupValue[filter.fieldName]; let ix=index\"\r\n      (removed)=\"removeFilter(filter.fieldName, ix)\" class=\"text-s\">\r\n      <button matChipRemove>\r\n        <mat-icon>close</mat-icon>\r\n      </button>\r\n      <span class=\"chip-filter-title\">{{filter.title | translate}}:</span>\r\n      <span class=\"chip-value semi-bold\"> {{filterValue.key | translate : {default: filterValue.value | titlecase }\r\n        }}</span>\r\n    </mat-chip-option>\r\n  </div>\r\n</mat-chip-listbox>\r\n", styles: [":host{display:inline-block}.filter-row{display:flex;background-color:var(--base-95);min-height:40px;min-width:100%;border-radius:.5rem;padding:.5rem 1.25rem 1rem;max-width:100%;align-items:baseline;margin-bottom:.5rem}.filter-row ::ng-deep .mat-form-field-wrapper{padding-bottom:0!important}.filter-row ::ng-deep .mat-form-field-underline{bottom:0!important}.search-input{background-color:unset;border:none}.engine-filter{margin-left:1rem}.filter-bar-search-input{width:100%}.filter-bar-search-input::ng-deep .material-icons-outlined{vertical-align:bottom}.material-icons-outlined{color:var(--base-40)}.filter-wrapper{max-width:100%;overflow-x:hidden;overflow-y:hidden;display:flex;flex:1}.mat-mdc-chip.mat-mdc-standard-chip{background-color:var(--base-95);padding-left:.5em;padding-right:.75em;border:.5px solid var(--base-70)}.mat-mdc-chip.mat-mdc-standard-chip span{display:inline-block}.mat-mdc-chip.mat-mdc-standard-chip .chip-filter-title+.chip-value{margin-left:.25rem}.mat-mdc-chip .mat-chip-remove{margin-left:0;margin-right:.5em;color:var(--base-40);opacity:1}.hidden{display:none}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i3.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i8.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i9.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: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i9.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i1$2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i12.MatChipListbox, selector: "mat-chip-listbox", inputs: ["tabIndex", "multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i12.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "selectable", "selected"], outputs: ["selectionChange"] }, { kind: "directive", type: i12.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i9.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i2$1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: SortTranslationsByPropertyPipe, name: "sortTranslationsByProperty" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: FilterBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tld-filter-bar', template: "<div class=\"filter-row\" *ngIf=\"filterRowVisible\">\r\n  <div fxLayout=\"row\" class=\"filter-wrapper\" #filterWrapper [formGroup]=\"form\">\r\n    <mat-form-field fxFlex *ngIf=\"showSearch && !filterOverflow || activeFilterIndex === searchIndex\" class=\"filter-bar-search-input\">\r\n      <span matPrefix class=\"material-icons-outlined\">\r\n        {{prefixIcon}}\r\n      </span>\r\n      <span matSuffix class=\"material-icons-outlined\" *ngIf=\"showSuffixIcon\" [matTooltip]=\"searchTooltip | translate\">\r\n        {{suffixIcon}}\r\n      </span>\r\n      <input class=\"search-input\" matInput [placeholder]=\"searchTitle | translate\"\r\n        [formControlName]=\"inputFormControlName\">\r\n    </mat-form-field>\r\n    <ng-container [formGroup]=\"filterFormGroup\">\r\n\r\n      <mat-form-field [ngClass]=\"{'hidden': filterOverflow && activeFilterIndex !== i, 'engine-filter': !filterOverflow}\" *ngFor=\"let filter of settings?.filters; let i = index\">\r\n        <mat-label>{{filter.title | translate}}</mat-label>\r\n        <mat-select multiple [formControlName]=\"filter.fieldName\">\r\n          <ng-container *ngIf=\"filter.values.length\">\r\n            <mat-option *ngFor=\"let value of filter.values | sortTranslationsByProperty:'key'\" [value]=\"value\">\r\n              {{value.key | translate : {default: value.value | titlecase } }}\r\n            </mat-option>\r\n          </ng-container>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </ng-container>\r\n  </div>\r\n  <button mat-icon-button (click)=\"switchLeft()\" *ngIf=\"filterOverflow\">\r\n    <span class=\"material-icons-outlined\">\r\n      arrow_back_ios\r\n    </span>\r\n  </button>\r\n  <button mat-icon-button *ngIf=\"filterOverflow\" (click)=\"switchRight()\">\r\n    <span class=\"material-icons-outlined\">\r\n      arrow_forward_ios\r\n    </span>\r\n  </button>\r\n</div>\r\n<mat-chip-listbox>\r\n  <div *ngFor=\"let filter of settings?.filters\">\r\n    <mat-chip-option *ngFor=\"let filterValue of filterFormGroupValue[filter.fieldName]; let ix=index\"\r\n      (removed)=\"removeFilter(filter.fieldName, ix)\" class=\"text-s\">\r\n      <button matChipRemove>\r\n        <mat-icon>close</mat-icon>\r\n      </button>\r\n      <span class=\"chip-filter-title\">{{filter.title | translate}}:</span>\r\n      <span class=\"chip-value semi-bold\"> {{filterValue.key | translate : {default: filterValue.value | titlecase }\r\n        }}</span>\r\n    </mat-chip-option>\r\n  </div>\r\n</mat-chip-listbox>\r\n", styles: [":host{display:inline-block}.filter-row{display:flex;background-color:var(--base-95);min-height:40px;min-width:100%;border-radius:.5rem;padding:.5rem 1.25rem 1rem;max-width:100%;align-items:baseline;margin-bottom:.5rem}.filter-row ::ng-deep .mat-form-field-wrapper{padding-bottom:0!important}.filter-row ::ng-deep .mat-form-field-underline{bottom:0!important}.search-input{background-color:unset;border:none}.engine-filter{margin-left:1rem}.filter-bar-search-input{width:100%}.filter-bar-search-input::ng-deep .material-icons-outlined{vertical-align:bottom}.material-icons-outlined{color:var(--base-40)}.filter-wrapper{max-width:100%;overflow-x:hidden;overflow-y:hidden;display:flex;flex:1}.mat-mdc-chip.mat-mdc-standard-chip{background-color:var(--base-95);padding-left:.5em;padding-right:.75em;border:.5px solid var(--base-70)}.mat-mdc-chip.mat-mdc-standard-chip span{display:inline-block}.mat-mdc-chip.mat-mdc-standard-chip .chip-filter-title+.chip-value{margin-left:.25rem}.mat-mdc-chip .mat-chip-remove{margin-left:0;margin-right:.5em;color:var(--base-40);opacity:1}.hidden{display:none}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$1.TranslateService }]; }, propDecorators: { filterWrapper: [{
+                type: ViewChild,
+                args: ["filterWrapper"]
+            }], onResize: [{
+                type: HostListener,
+                args: ['window:resize', []]
+            }], settings: [{
+                type: Input
+            }], filterRowVisible: [{
+                type: Input
+            }], filterBarChange: [{
+                type: Output
+            }] } });
+
+class FilterBarModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: FilterBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.6", ngImport: i0, type: FilterBarModule, declarations: [FilterBarComponent], imports: [CommonModule,
+            TranslateModule,
+            MatInputModule,
+            MatFormFieldModule,
+            FlexLayoutModule,
+            MatSelectModule,
+            FormsModule,
+            MatTooltipModule,
+            MatButtonModule,
+            MatChipsModule,
+            MatIconModule,
+            ReactiveFormsModule,
+            SortTranslationsByPropertyModule], exports: [FilterBarComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: FilterBarModule, imports: [CommonModule,
+            TranslateModule,
+            MatInputModule,
+            MatFormFieldModule,
+            FlexLayoutModule,
+            MatSelectModule,
+            FormsModule,
+            MatTooltipModule,
+            MatButtonModule,
+            MatChipsModule,
+            MatIconModule,
+            ReactiveFormsModule,
+            SortTranslationsByPropertyModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: FilterBarModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        FilterBarComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        TranslateModule,
+                        MatInputModule,
+                        MatFormFieldModule,
+                        FlexLayoutModule,
+                        MatSelectModule,
+                        FormsModule,
+                        MatTooltipModule,
+                        MatButtonModule,
+                        MatChipsModule,
+                        MatIconModule,
+                        ReactiveFormsModule,
+                        SortTranslationsByPropertyModule
+                    ],
+                    exports: [
+                        FilterBarComponent
+                    ]
+                }]
+        }] });
+
+const DISABLE_EXPORT_ATTRIBUTE_NAME = "disable-export";
+
+var ExportFormat;
+(function (ExportFormat) {
+    ExportFormat["CSV"] = "csv";
+})(ExportFormat || (ExportFormat = {}));
+
+class MultiFunctionalTableComponent {
+    set selection(value) {
+        this.matSelection.setSelection(...(value ?? []));
+    }
+    get ignoreAttributeName() { return DISABLE_EXPORT_ATTRIBUTE_NAME; }
+    get filterActive() { return this.config.filter?.enabled; }
+    constructor(domService, translateService) {
+        this.domService = domService;
+        this.translateService = translateService;
+        this.matSelection = new SelectionModel(true, []);
+        //#region Output properties
+        this.filterBarChange = new EventEmitter();
+        this.exported = new EventEmitter();
+        this.selectionChange = this.matSelection.changed.asObservable().pipe(map(() => { return this.matSelection.selected; }));
+        this.noDataRowIcon = "manage_search";
+        this.batchColumnName = "batch";
+    }
+    //#region Angular lifecycle hooks
+    ngOnInit() {
+        this.readFromLocalStorage();
+        this.setFilterVisibility();
+        this.setColumnSelectProperties();
+        this.setExportProperties();
+        this.setNoDataRowProperties();
+    }
+    ngAfterContentInit() {
+        this.columnDefs.forEach(columnDef => this.table.addColumnDef(columnDef));
+        this.rowDefs.forEach(rowDef => this.table.addRowDef(rowDef));
+        this.headerRowDefs.forEach(headerRowDef => this.table.addHeaderRowDef(headerRowDef));
+        this.headerRowDefs.forEach(headerRowDef => this.table.addHeaderRowDef(headerRowDef));
+        this.table.setNoDataRow(this.noDataRow);
+    }
+    ngAfterViewInit() {
+        this.config.dataSource.sort = this.sort;
+    }
+    //#endregion
+    updateDisplayColumns(initial = false) {
+        this.batchSelectedEnabled = this.config.batchConfig?.enabled ? true : false;
+        const allColumns = this.config.columnSelect?.columns ?? [];
+        this.displayColumns = [];
+        this.configurableColumns = allColumns.filter(column => !column.notConfigurable);
+        if (this.batchSelectedEnabled) {
+            this.displayColumns.push(this.batchColumnName);
+        }
+        if (!allColumns.length) {
+            return;
+        }
+        const localStorageValue = this.localStorageValue ?? {};
+        if (!localStorageValue.columns) {
+            localStorageValue.columns = {};
+        }
+        allColumns.forEach((column) => {
+            if (initial) {
+                column.selected = localStorageValue.columns?.[column.name] ?? column.selected;
+            }
+            else {
+                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                localStorageValue.columns[column.name] = column.selected;
+            }
+            if (column.selected) {
+                this.displayColumns.push(column.name);
+            }
+        });
+        if (!initial) {
+            this.updateLocalStorage(localStorageValue);
+        }
+    }
+    toggleFilterBar() {
+        const localstorageObject = this.localStorageValue ?? {};
+        if (!localstorageObject.filter) {
+            localstorageObject.filter = {};
+        }
+        this.filterBarVisible = !this.filterBarVisible;
+        localstorageObject.filter.visible = this.filterBarVisible;
+        this.updateLocalStorage(localstorageObject);
+    }
+    filtersChanged(filters) {
+        this.filterBarChange.emit(filters);
+    }
+    export() {
+        this.config.dataSource.connect().pipe(take(1)).subscribe((data) => {
+            this.exported.emit(data);
+        });
+        if (this.config.export?.fileOptions) {
+            this.exportToFile();
+        }
+    }
+    highlightElement(element) {
+        return this.highlightedElements?.includes(element);
+    }
+    //#region Methods for batch selection
+    isAllSelected() {
+        const numSelected = this.matSelection.selected.length;
+        const numRows = this.config.dataSource.data.length;
+        return numSelected === numRows;
+    }
+    toggleAllRowSelection() {
+        if (this.isAllSelected()) {
+            this.matSelection.clear();
+            return;
+        }
+        this.matSelection.select(...this.config.dataSource.data);
+    }
+    toggleElementSelection(element) {
+        this.matSelection.toggle(element);
+    }
+    //#endregion
+    exportToFile() {
+        if (!this.config.export?.fileOptions?.saveToFile) {
+            return;
+        }
+        let fileString = "";
+        let extension;
+        switch (this.config.export.fileOptions.format) {
+            case ExportFormat.CSV:
+            default:
+                extension = ExportFormat.CSV;
+                fileString = HtmlElementParseHelper.tableAsCsv(this.tableElementRef.nativeElement, this.ignoreAttributeName);
+                break;
+        }
+        const translatedFileName = this.translateService.instant(this.config.export.fileOptions.fileName);
+        SaveFileHelper.saveFile(fileString, `${translatedFileName}.${extension}`);
+    }
+    updateLocalStorage(newValue) {
+        this.localStorageValue = newValue;
+        if (this.config.localStorageKey && newValue) {
+            this.domService.localStorage?.setItem(this.config.localStorageKey, JSON.stringify(newValue));
+        }
+    }
+    readFromLocalStorage() {
+        if (this.config.localStorageKey) {
+            try {
+                const localStorageString = this.domService.localStorage?.getItem(this.config.localStorageKey);
+                if (localStorageString) {
+                    this.localStorageValue = JSON.parse(localStorageString);
+                }
+            }
+            // eslint-disable-next-line no-empty
+            catch {
+            }
+        }
+    }
+    setColumnSelectProperties() {
+        this.columnSelectActive = this.config.columnSelect?.enabled ? true : false;
+        this.updateDisplayColumns(true);
+    }
+    setFilterVisibility() {
+        this.filterBarVisible = this.localStorageValue?.filter?.visible ?? this.config?.filter?.visible ?? false;
+    }
+    setNoDataRowProperties() {
+        if (this.config.noDataRow) {
+            this.noDataRowActive = true;
+            this.noDataRowConfig = this.config.noDataRow;
+            if (this.noDataRowConfig.icon) {
+                this.noDataRowIcon = this.noDataRowConfig.icon;
+            }
+        }
+    }
+    setExportProperties() {
+        if (this.config.export?.enabled) {
+            this.exportActive = true;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MultiFunctionalTableComponent, deps: [{ token: DOMService }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: MultiFunctionalTableComponent, selector: "tld-multi-functional-table", inputs: { config: "config", highlightedElements: "highlightedElements", selection: "selection" }, outputs: { filterBarChange: "filterBarChange", exported: "exported", selectionChange: "selectionChange" }, queries: [{ propertyName: "noDataRow", first: true, predicate: MatNoDataRow, descendants: true }, { propertyName: "headerRowDefs", predicate: MatHeaderRowDef }, { propertyName: "rowDefs", predicate: MatRowDef, descendants: true }, { propertyName: "columnDefs", predicate: MatColumnDef }], viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true, static: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "tableElementRef", first: true, predicate: MatTable, descendants: true, read: ElementRef }], ngImport: i0, template: "<div fxLayout=\"column\" fxLayoutGap=\"1rem\">\r\n\r\n  <div fxLayout=\"row\">\r\n    <div fxFlex fxLayoutGap=\"1rem\">\r\n      <button mat-button [matMenuTriggerFor]=\"columnMenu\" *ngIf=\"columnSelectActive\">\r\n        <span class=\"material-icons column-select-icon\">menu</span>\r\n        <span>{{'MULTI_FUNCTIONAL_TABLE.COLUMN_SELECT' | translate}}</span>\r\n      </button>\r\n\r\n       <button mat-button *ngIf=\"filterActive\" (click)=\"toggleFilterBar()\">\r\n        <span class=\"material-icons\">filter_list</span>\r\n        <span>{{'MULTI_FUNCTIONAL_TABLE.FILTER_TOGGLE' | translate}}</span>\r\n      </button>\r\n\r\n      <button mat-stroked-button *ngIf=\"exportActive\" (click)=\"export()\">\r\n        <span class=\"material-icons-outlined\">cloud_download</span>\r\n        <span>{{'MULTI_FUNCTIONAL_TABLE.EXPORT' | translate}}</span>\r\n      </button>\r\n    </div>\r\n\r\n    <ng-content select=\"[additionalActions]\"></ng-content>\r\n  </div>\r\n\r\n  <mat-menu #columnMenu=\"matMenu\">\r\n    <div class=\"column-select-wrapper\" (click)=\"$event.stopPropagation()\">\r\n      <div *ngFor=\"let column of configurableColumns\">\r\n        <mat-checkbox [(ngModel)]=\"column.selected\" (change)=\"updateDisplayColumns()\">\r\n          {{column.displayName | translate}}\r\n        </mat-checkbox>\r\n      </div>\r\n    </div>\r\n  </mat-menu>\r\n\r\n  <tld-filter-bar *ngIf=\"config.filter && config.filter.enabled\" [filterRowVisible]=\"!filterBarVisible\" [settings]=\"config.filter.settings\" \r\n    (filterBarChange)=\"filtersChanged($event)\">\r\n  </tld-filter-bar>\r\n\r\n  <div class=\"table-overflow\">\r\n    <table #table mat-table [dataSource]=\"config.dataSource\">\r\n      <ng-content></ng-content>\r\n      <ng-container [matColumnDef]=\"batchColumnName\">\r\n        <th class=\"row-select\" mat-header-cell *matHeaderCellDef disable-export>\r\n          <mat-checkbox [disabled]=\"config.batchConfig!.checkBoxesDisabled\" (change)=\"toggleAllRowSelection()\"\r\n            [checked]=\"matSelection.hasValue() && isAllSelected()\"\r\n            [indeterminate]=\"matSelection.hasValue() && !isAllSelected()\">\r\n          </mat-checkbox>\r\n        </th>\r\n        <td class=\"row-select\" mat-cell *matCellDef=\"let element\" disable-export>\r\n          <mat-checkbox *ngIf=\"hoveredRow === element || matSelection.isSelected(element)\" [disabled]=\"config.batchConfig!.checkBoxesDisabled\" (click)=\"$event.stopPropagation()\"\r\n            (change)=\"toggleElementSelection(element)\" [checked]=\"matSelection.isSelected(element)\">\r\n          </mat-checkbox>\r\n        </td>\r\n      </ng-container>\r\n      <tr mat-header-row *matHeaderRowDef=\"displayColumns\" sticky></tr>\r\n      <tr mat-row *matRowDef=\"let row; columns: displayColumns\" (mouseover)=\"hoveredRow = row\" (mouseleave)=\"hoveredRow = null\" [class.highlight]=\"highlightElement(row)\"></tr>\r\n\r\n      <ng-container *ngIf=\"noDataRowActive\">\r\n        <tr *matNoDataRow>\r\n          <!-- add random number to make sure it takes full width -->\r\n          <td colspan=\"99\">\r\n            <div class=\"no-engines-wrapper\">\r\n              <ng-container *ngIf=\"!noDataRowConfig.loading; else loading\">\r\n                <div>\r\n                  <span class=\"material-icons-outlined\">\r\n                    {{noDataRowIcon}}\r\n                  </span>\r\n                </div>\r\n                <div class=\"text-xl-semi-bold\" *ngIf=\"noDataRowConfig.title\"\r\n                  [innerHtml]=\"noDataRowConfig.title | translate: noDataRowConfig.titleParams\">\r\n                </div>\r\n                <div class=\"text-l\" *ngIf=\"noDataRowConfig.description\"\r\n                  [innerHtml]=\"noDataRowConfig.description | translate: noDataRowConfig.descriptionParams\"></div>\r\n              </ng-container>\r\n              <ng-template #loading>\r\n                <mat-spinner color=\"accent\"></mat-spinner>\r\n              </ng-template>\r\n            </div>\r\n          </td>\r\n        </tr>\r\n      </ng-container>\r\n    </table>\r\n  </div>\r\n</div>\r\n", styles: [":host ::ng-deep th,:host ::ng-deep tr{white-space:nowrap}:host ::ng-deep td{padding-right:10px!important}:host ::ng-deep tr.mat-mdc-row:hover,:host ::ng-deep tr.mat-mdc-row.highlight{background-color:var(--base-95)}table{width:100%}.column-select-icon{rotate:90deg}.column-select-wrapper{padding:1rem}.material-icons,.material-icons-outlined{margin-right:.5rem}.table-action-button{margin-bottom:1rem}.mat-no-data-row{text-align:center}.mat-no-data-row .no-engines-wrapper{margin-top:4rem}.mat-no-data-row .material-icons-outlined{font-size:4rem;color:var(--base-70)}mat-spinner{margin:auto}th.mat-mdc-header-cell:first-of-type,td.mat-mdc-cell:first-of-type,td.mat-mdc-footer-cell:first-of-type{padding:0 22px}.row-select{width:0}.mat-mdc-checkbox{padding-top:8px}.table-overflow{overflow-x:auto}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i4$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i4$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i4$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i4$1.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "component", type: i1$2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "directive", type: i6$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i7$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i9.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FilterBarComponent, selector: "tld-filter-bar", inputs: ["settings", "filterRowVisible"], outputs: ["filterBarChange"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: i11.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MultiFunctionalTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tld-multi-functional-table', template: "<div fxLayout=\"column\" fxLayoutGap=\"1rem\">\r\n\r\n  <div fxLayout=\"row\">\r\n    <div fxFlex fxLayoutGap=\"1rem\">\r\n      <button mat-button [matMenuTriggerFor]=\"columnMenu\" *ngIf=\"columnSelectActive\">\r\n        <span class=\"material-icons column-select-icon\">menu</span>\r\n        <span>{{'MULTI_FUNCTIONAL_TABLE.COLUMN_SELECT' | translate}}</span>\r\n      </button>\r\n\r\n       <button mat-button *ngIf=\"filterActive\" (click)=\"toggleFilterBar()\">\r\n        <span class=\"material-icons\">filter_list</span>\r\n        <span>{{'MULTI_FUNCTIONAL_TABLE.FILTER_TOGGLE' | translate}}</span>\r\n      </button>\r\n\r\n      <button mat-stroked-button *ngIf=\"exportActive\" (click)=\"export()\">\r\n        <span class=\"material-icons-outlined\">cloud_download</span>\r\n        <span>{{'MULTI_FUNCTIONAL_TABLE.EXPORT' | translate}}</span>\r\n      </button>\r\n    </div>\r\n\r\n    <ng-content select=\"[additionalActions]\"></ng-content>\r\n  </div>\r\n\r\n  <mat-menu #columnMenu=\"matMenu\">\r\n    <div class=\"column-select-wrapper\" (click)=\"$event.stopPropagation()\">\r\n      <div *ngFor=\"let column of configurableColumns\">\r\n        <mat-checkbox [(ngModel)]=\"column.selected\" (change)=\"updateDisplayColumns()\">\r\n          {{column.displayName | translate}}\r\n        </mat-checkbox>\r\n      </div>\r\n    </div>\r\n  </mat-menu>\r\n\r\n  <tld-filter-bar *ngIf=\"config.filter && config.filter.enabled\" [filterRowVisible]=\"!filterBarVisible\" [settings]=\"config.filter.settings\" \r\n    (filterBarChange)=\"filtersChanged($event)\">\r\n  </tld-filter-bar>\r\n\r\n  <div class=\"table-overflow\">\r\n    <table #table mat-table [dataSource]=\"config.dataSource\">\r\n      <ng-content></ng-content>\r\n      <ng-container [matColumnDef]=\"batchColumnName\">\r\n        <th class=\"row-select\" mat-header-cell *matHeaderCellDef disable-export>\r\n          <mat-checkbox [disabled]=\"config.batchConfig!.checkBoxesDisabled\" (change)=\"toggleAllRowSelection()\"\r\n            [checked]=\"matSelection.hasValue() && isAllSelected()\"\r\n            [indeterminate]=\"matSelection.hasValue() && !isAllSelected()\">\r\n          </mat-checkbox>\r\n        </th>\r\n        <td class=\"row-select\" mat-cell *matCellDef=\"let element\" disable-export>\r\n          <mat-checkbox *ngIf=\"hoveredRow === element || matSelection.isSelected(element)\" [disabled]=\"config.batchConfig!.checkBoxesDisabled\" (click)=\"$event.stopPropagation()\"\r\n            (change)=\"toggleElementSelection(element)\" [checked]=\"matSelection.isSelected(element)\">\r\n          </mat-checkbox>\r\n        </td>\r\n      </ng-container>\r\n      <tr mat-header-row *matHeaderRowDef=\"displayColumns\" sticky></tr>\r\n      <tr mat-row *matRowDef=\"let row; columns: displayColumns\" (mouseover)=\"hoveredRow = row\" (mouseleave)=\"hoveredRow = null\" [class.highlight]=\"highlightElement(row)\"></tr>\r\n\r\n      <ng-container *ngIf=\"noDataRowActive\">\r\n        <tr *matNoDataRow>\r\n          <!-- add random number to make sure it takes full width -->\r\n          <td colspan=\"99\">\r\n            <div class=\"no-engines-wrapper\">\r\n              <ng-container *ngIf=\"!noDataRowConfig.loading; else loading\">\r\n                <div>\r\n                  <span class=\"material-icons-outlined\">\r\n                    {{noDataRowIcon}}\r\n                  </span>\r\n                </div>\r\n                <div class=\"text-xl-semi-bold\" *ngIf=\"noDataRowConfig.title\"\r\n                  [innerHtml]=\"noDataRowConfig.title | translate: noDataRowConfig.titleParams\">\r\n                </div>\r\n                <div class=\"text-l\" *ngIf=\"noDataRowConfig.description\"\r\n                  [innerHtml]=\"noDataRowConfig.description | translate: noDataRowConfig.descriptionParams\"></div>\r\n              </ng-container>\r\n              <ng-template #loading>\r\n                <mat-spinner color=\"accent\"></mat-spinner>\r\n              </ng-template>\r\n            </div>\r\n          </td>\r\n        </tr>\r\n      </ng-container>\r\n    </table>\r\n  </div>\r\n</div>\r\n", styles: [":host ::ng-deep th,:host ::ng-deep tr{white-space:nowrap}:host ::ng-deep td{padding-right:10px!important}:host ::ng-deep tr.mat-mdc-row:hover,:host ::ng-deep tr.mat-mdc-row.highlight{background-color:var(--base-95)}table{width:100%}.column-select-icon{rotate:90deg}.column-select-wrapper{padding:1rem}.material-icons,.material-icons-outlined{margin-right:.5rem}.table-action-button{margin-bottom:1rem}.mat-no-data-row{text-align:center}.mat-no-data-row .no-engines-wrapper{margin-top:4rem}.mat-no-data-row .material-icons-outlined{font-size:4rem;color:var(--base-70)}mat-spinner{margin:auto}th.mat-mdc-header-cell:first-of-type,td.mat-mdc-cell:first-of-type,td.mat-mdc-footer-cell:first-of-type{padding:0 22px}.row-select{width:0}.mat-mdc-checkbox{padding-top:8px}.table-overflow{overflow-x:auto}\n"] }]
+        }], ctorParameters: function () { return [{ type: DOMService }, { type: i1$1.TranslateService }]; }, propDecorators: { config: [{
+                type: Input
+            }], highlightedElements: [{
+                type: Input
+            }], selection: [{
+                type: Input
+            }], filterBarChange: [{
+                type: Output
+            }], exported: [{
+                type: Output
+            }], selectionChange: [{
+                type: Output
+            }], headerRowDefs: [{
+                type: ContentChildren,
+                args: [MatHeaderRowDef]
+            }], rowDefs: [{
+                type: ContentChildren,
+                args: [MatRowDef, { descendants: true }]
+            }], columnDefs: [{
+                type: ContentChildren,
+                args: [MatColumnDef]
+            }], noDataRow: [{
+                type: ContentChild,
+                args: [MatNoDataRow]
+            }], table: [{
+                type: ViewChild,
+                args: [MatTable, { static: true }]
+            }], sort: [{
+                type: ViewChild,
+                args: [MatSort]
+            }], tableElementRef: [{
+                type: ViewChild,
+                args: [MatTable, { read: ElementRef }]
+            }] } });
+
+class MultiFunctionalTableModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MultiFunctionalTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.6", ngImport: i0, type: MultiFunctionalTableModule, declarations: [MultiFunctionalTableComponent], imports: [CommonModule,
+            MatTableModule,
+            MatButtonModule,
+            TranslateModule,
+            MatMenuModule,
+            MatCheckboxModule,
+            FormsModule,
+            FilterBarModule,
+            FlexLayoutModule,
+            MatSortModule,
+            MatProgressSpinnerModule], exports: [MultiFunctionalTableComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MultiFunctionalTableModule, imports: [CommonModule,
+            MatTableModule,
+            MatButtonModule,
+            TranslateModule,
+            MatMenuModule,
+            MatCheckboxModule,
+            FormsModule,
+            FilterBarModule,
+            FlexLayoutModule,
+            MatSortModule,
+            MatProgressSpinnerModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MultiFunctionalTableModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        MultiFunctionalTableComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        MatTableModule,
+                        MatButtonModule,
+                        TranslateModule,
+                        MatMenuModule,
+                        MatCheckboxModule,
+                        FormsModule,
+                        FilterBarModule,
+                        FlexLayoutModule,
+                        MatSortModule,
+                        MatProgressSpinnerModule
+                    ],
+                    exports: [
+                        MultiFunctionalTableComponent
+                    ]
+                }]
+        }] });
+
+var Confirmation;
+(function (Confirmation) {
+    Confirmation[Confirmation["PRIMARY"] = 1] = "PRIMARY";
+    Confirmation[Confirmation["SECONDARY"] = 2] = "SECONDARY";
+})(Confirmation || (Confirmation = {}));
+
+class ConfirmationModalComponent {
+    constructor(dialogRef, data) {
+        this.dialogRef = dialogRef;
+        this.data = data;
+        this.confirmation = Confirmation;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: ConfirmationModalComponent, deps: [{ token: i1$3.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: ConfirmationModalComponent, selector: "lib-confirmation-modal", ngImport: i0, template: "<h1 mat-dialog-title>{{ data.title | translate }}</h1>\r\n<div mat-dialog-content>\r\n  <p>{{ data.descriptioon | translate }}</p>\r\n  \r\n  <ul *ngIf=\"data.details\">\r\n    <li *ngFor=\"let extraData of data.details\">\r\n      {{ extraData }}\r\n    </li>\r\n  </ul>\r\n</div>\r\n<div class=\"d-flex justify-content-center\" mat-dialog-actions>\r\n  <button mat-flat-button color=\"accent\" [mat-dialog-close]=\"confirmation.PRIMARY\">\r\n    {{ data.confirmationText | translate }}\r\n  </button>\r\n  <button mat-stroked-button color=\"accent\" class=\"ml-3\" [mat-dialog-close]=\"confirmation.SECONDARY\">\r\n    {{ data.rejectionText | translate }}\r\n  </button>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i1$2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: ConfirmationModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-confirmation-modal', template: "<h1 mat-dialog-title>{{ data.title | translate }}</h1>\r\n<div mat-dialog-content>\r\n  <p>{{ data.descriptioon | translate }}</p>\r\n  \r\n  <ul *ngIf=\"data.details\">\r\n    <li *ngFor=\"let extraData of data.details\">\r\n      {{ extraData }}\r\n    </li>\r\n  </ul>\r\n</div>\r\n<div class=\"d-flex justify-content-center\" mat-dialog-actions>\r\n  <button mat-flat-button color=\"accent\" [mat-dialog-close]=\"confirmation.PRIMARY\">\r\n    {{ data.confirmationText | translate }}\r\n  </button>\r\n  <button mat-stroked-button color=\"accent\" class=\"ml-3\" [mat-dialog-close]=\"confirmation.SECONDARY\">\r\n    {{ data.rejectionText | translate }}\r\n  </button>\r\n</div>\r\n" }]
+        }], ctorParameters: function () { return [{ type: i1$3.MatDialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }]; } });
+
+class ConfirmationModalModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: ConfirmationModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.6", ngImport: i0, type: ConfirmationModalModule, declarations: [ConfirmationModalComponent], imports: [CommonModule, MatDialogModule, MatButtonModule, TranslateModule], exports: [ConfirmationModalComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: ConfirmationModalModule, imports: [CommonModule, MatDialogModule, MatButtonModule, TranslateModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: ConfirmationModalModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ConfirmationModalComponent],
+                    imports: [CommonModule, MatDialogModule, MatButtonModule, TranslateModule],
+                    exports: [ConfirmationModalComponent],
+                }]
+        }] });
+
+class ConfirmationService {
+    constructor(dialog) {
+        this.dialog = dialog;
+    }
+    openDialog(data) {
+        const dialogRef = this.dialog.open(ConfirmationModalComponent, {
+            data: data,
+            width: '40rem'
+        });
+        return dialogRef.afterClosed();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: ConfirmationService, deps: [{ token: i1$3.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: ConfirmationService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: ConfirmationService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: i1$3.MatDialog }]; } });
+
+/*
+ * Public API Surface of ngx-common
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ClickOutsideDirective, ClickOutsideModule, CloseButtonComponent, CloseButtonModule, CompanyProductComponent, CompanyProductModule, Confirmation, ConfirmationModalComponent, ConfirmationModalModule, ConfirmationService, DISABLE_EXPORT_ATTRIBUTE_NAME, DOMService, DateAgoModule, DateAgoPipe, DragAndDropDirective, DragAndDropModule, ExportFormat, FileUploadComponent, FileUploadErrorTypeEnum, FileUploadModule, FilterBarComponent, FilterBarModule, FilterWithHighlightModule, FilterWithHighlightPipe, FooterComponent, FooterModule, HtmlElementParseHelper, IconService, InlineMessageComponent, InlineMessageIconPosition, InlineMessageModule, InlineMessageType, MatButtonLoadingDirective, MatButtonLoadingModule, MissingTranslationHelper, MultiFunctionalTableComponent, MultiFunctionalTableModule, NotificationMessageComponent, NotificationMessageModule, NotificationMessageType, PlausibleEventDirective, PlausibleHelper, PlausibleModule, SaveFileHelper, SortTranslationsByPropertyModule, SortTranslationsByPropertyPipe, SortTranslationsModule, SortTranslationsPipe, TldLoaderComponent, TldLoaderModule };
+//# sourceMappingURL=tilde-nlp-ngx-common.mjs.map