@tilde-nlp/ngx-common 2.0.0 → 2.0.1

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

@@ -1,21 +1,40 @@
 import * as i0 from '@angular/core';
-import { Injectable, Directive, Input, HostListener, NgModule, Component, Pipe, EventEmitter, Output, ViewChild } 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 i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2$1 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import * as i1$2 from '@ngx-translate/core';
-import { TranslateModule } from '@ngx-translate/core';
-import { Observable, of } from 'rxjs';
-import * as i1$3 from '@angular/material/button';
+import { TranslateModule, TranslatePipe } from '@ngx-translate/core';
+import { Observable, of, take } from 'rxjs';
+import * as i5 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$2 from '@angular/flex-layout/flex';
 import * as i3 from '@angular/flex-layout/extended';
+import * as i2$3 from '@angular/material/progress-bar';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import * as i2$4 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i3$1 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i5$1 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import * as i6$1 from '@angular/material/core';
+import * as i7 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { MatSort, MatSortModule } from '@angular/material/sort';
+import * as i4 from '@angular/material/table';
+import { MatNoDataRow, MatHeaderRowDef, MatRowDef, MatColumnDef, MatTable, MatTableModule } from '@angular/material/table';
+import * as i6$2 from '@angular/material/menu';
+import { MatMenuModule } from '@angular/material/menu';
+import * as i7$1 from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
 
 class IconService {
     constructor(iconRegistry, sanitizer) {
@@ -347,6 +366,137 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 }]
         }] });
 
+const DateAgoSettingsToken = "DATE_AGO_SETTINGS";
+
+/**
+ * Pipe that converts date to date ago and returns translated string.
+ */
+class DateAgoPipe {
+    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
+        };
+    }
+    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; }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    transform(value, enableMultiplePostfix = true) {
+        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) // 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;
+    }
+}
+DateAgoPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DateAgoPipe, deps: [{ token: i1$2.TranslateService }, { token: i0.ChangeDetectorRef }, { token: DateAgoSettingsToken, optional: true }], target: i0.ɵɵFactoryTarget.Pipe });
+DateAgoPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: DateAgoPipe, name: "dateAgo", pure: false });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DateAgoPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'dateAgo',
+                    pure: false
+                }]
+        }], ctorParameters: function () { return [{ type: i1$2.TranslateService }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DateAgoSettingsToken]
+                }, {
+                    type: Optional
+                }] }]; } });
+
+class DateAgoModule {
+}
+DateAgoModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DateAgoModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DateAgoModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: DateAgoModule, declarations: [DateAgoPipe], imports: [CommonModule,
+        TranslateModule], exports: [DateAgoPipe] });
+DateAgoModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DateAgoModule, imports: [CommonModule,
+        TranslateModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DateAgoModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        DateAgoPipe
+                    ],
+                    imports: [
+                        CommonModule,
+                        TranslateModule
+                    ],
+                    exports: [
+                        DateAgoPipe
+                    ]
+                }]
+        }] });
+
 class ClickOutsideDirective {
     constructor(elementRef) {
         this.elementRef = elementRef;
@@ -394,6 +544,86 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 }]
         }] });
 
+class DragAndDropDirective {
+    constructor(element) {
+        this.element = element;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.fileDropped = new EventEmitter();
+    }
+    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);
+        }
+    }
+}
+DragAndDropDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DragAndDropDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+DragAndDropDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", 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: "14.3.0", 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 {
+}
+DragAndDropModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DragAndDropModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DragAndDropModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: DragAndDropModule, declarations: [DragAndDropDirective], imports: [CommonModule], exports: [DragAndDropDirective] });
+DragAndDropModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DragAndDropModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DragAndDropModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        DragAndDropDirective
+                    ],
+                    imports: [
+                        CommonModule
+                    ],
+                    exports: [
+                        DragAndDropDirective
+                    ]
+                }]
+        }] });
+
 class CloseButtonComponent {
     constructor() {
         // any type because emitter doesn't really need a value
@@ -406,7 +636,7 @@ class CloseButtonComponent {
     }
 }
 CloseButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CloseButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CloseButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", 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$3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i2$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] });
+CloseButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", 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: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i2$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", 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>" }]
@@ -478,10 +708,10 @@ class NotificationMessageComponent {
     }
 }
 NotificationMessageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NotificationMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NotificationMessageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", 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: [".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: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.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$2.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$2.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$2.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$3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i6.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] });
+NotificationMessageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", 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: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.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$2.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$2.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$2.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: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i6.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", 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: [".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"] }]
+            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: [{
@@ -570,6 +800,31 @@ class MissingTranslationHelper {
     }
 }
 
+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) {
+        const csv_data = [];
+        const rows = tableElement.querySelectorAll('tr');
+        for (let i = 0; i < rows.length; i++) {
+            const cols = rows[i].querySelectorAll('td,th');
+            // 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 = "";
@@ -663,6 +918,473 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 }]
         }] });
 
+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;
+        }
+    }
+}
+FileUploadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FileUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", 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-stroked-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: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.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: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-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: "14.3.0", 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-stroked-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 {
+}
+FileUploadModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FileUploadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FileUploadModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: FileUploadModule, declarations: [FileUploadComponent], imports: [CommonModule,
+        MatProgressBarModule,
+        FlexLayoutModule,
+        MatButtonModule,
+        DragAndDropModule,
+        MatIconModule], exports: [FileUploadComponent] });
+FileUploadModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FileUploadModule, imports: [CommonModule,
+        MatProgressBarModule,
+        FlexLayoutModule,
+        MatButtonModule,
+        DragAndDropModule,
+        MatIconModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FileUploadModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [FileUploadComponent],
+                    imports: [
+                        CommonModule,
+                        MatProgressBarModule,
+                        FlexLayoutModule,
+                        MatButtonModule,
+                        DragAndDropModule,
+                        MatIconModule
+                    ],
+                    exports: [
+                        FileUploadComponent
+                    ]
+                }]
+        }] });
+
+class FilterBarComponent {
+    constructor(cdref) {
+        this.cdref = cdref;
+        this._inputText = "";
+        this.filters = {
+            filters: {},
+            input: ""
+        };
+        this.filterOverflow = false;
+        this.filterBarChange = new EventEmitter();
+        this.defaultScrollWidth = 180;
+    }
+    get inputText() {
+        return this._inputText;
+    }
+    set inputText(value) {
+        this._inputText = value;
+        this.filters.input = this._inputText;
+        this.emitFilters();
+    }
+    get showSearch() {
+        return !this.settings?.hideSearch;
+    }
+    get fields() {
+        return this.settings?.filters ?? [];
+    }
+    onResize() {
+        this.checkOverflow();
+    }
+    ngOnInit() {
+        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();
+    }
+    filterChange(filter, event) {
+        this.filters.filters[filter.fieldName] = event.value.map(item => item.value);
+        this.emitFilters();
+    }
+    emitFilters() {
+        this.filterBarChange.next(this.filters);
+    }
+    scrollRight() {
+        this.filterWrapper.nativeElement.scrollTo({ left: (this.filterWrapper.nativeElement.scrollLeft + this.defaultScrollWidth), behavior: 'smooth' });
+    }
+    scrollLeft() {
+        this.filterWrapper.nativeElement.scrollTo({ left: (this.filterWrapper.nativeElement.scrollLeft - this.defaultScrollWidth), behavior: 'smooth' });
+    }
+    checkOverflow() {
+        this.filterOverflow = this.filterWrapper.nativeElement.clientWidth < this.filterWrapper.nativeElement.scrollWidth;
+    }
+}
+FilterBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FilterBarComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+FilterBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FilterBarComponent, selector: "tld-filter-bar", inputs: { settings: "settings" }, outputs: { filterBarChange: "filterBarChange" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "filterWrapper", first: true, predicate: ["filterWrapper"], descendants: true }], ngImport: i0, template: "<button mat-icon-button (click)=\"scrollLeft()\" *ngIf=\"filterOverflow\">\r\n  <span class=\"material-icons-outlined\">\r\n    arrow_back_ios\r\n  </span>\r\n</button>\r\n<div fxLayout=\"row\" class=\"filter-wrapper\" #filterWrapper>\r\n  <mat-form-field fxFlex *ngIf=\"showSearch\" 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 [(ngModel)]=\"inputText\" [placeholder]=\"searchTitle | translate\">\r\n  </mat-form-field>\r\n  <mat-form-field *ngFor=\"let filter of fields\">\r\n    <mat-label>{{filter.title | translate}}</mat-label>\r\n    <mat-select multiple (selectionChange)=\"filterChange(filter, $event)\">\r\n      <mat-option *ngFor=\"let value of filter.values\" [value]=\"value\">\r\n        {{value.key | translate : {default: value.value | titlecase } }}\r\n      </mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n</div>\r\n<button mat-icon-button *ngIf=\"filterOverflow\" (click)=\"scrollRight()\">\r\n  <span class=\"material-icons-outlined\">\r\n    arrow_forward_ios\r\n  </span>\r\n</button>\r\n", styles: [":host{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}:host ::ng-deep .mat-form-field-wrapper{padding-bottom:0!important}:host ::ng-deep .mat-form-field-underline{bottom:0!important}.search-input{background-color:unset;border:none}mat-form-field+mat-form-field{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}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$4.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i2$4.MatSuffix, selector: "[matSuffix]" }, { 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: "directive", type: i2$2.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$2.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: i5$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i6$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i7.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: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "pipe", type: i1$1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FilterBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tld-filter-bar', template: "<button mat-icon-button (click)=\"scrollLeft()\" *ngIf=\"filterOverflow\">\r\n  <span class=\"material-icons-outlined\">\r\n    arrow_back_ios\r\n  </span>\r\n</button>\r\n<div fxLayout=\"row\" class=\"filter-wrapper\" #filterWrapper>\r\n  <mat-form-field fxFlex *ngIf=\"showSearch\" 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 [(ngModel)]=\"inputText\" [placeholder]=\"searchTitle | translate\">\r\n  </mat-form-field>\r\n  <mat-form-field *ngFor=\"let filter of fields\">\r\n    <mat-label>{{filter.title | translate}}</mat-label>\r\n    <mat-select multiple (selectionChange)=\"filterChange(filter, $event)\">\r\n      <mat-option *ngFor=\"let value of filter.values\" [value]=\"value\">\r\n        {{value.key | translate : {default: value.value | titlecase } }}\r\n      </mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n</div>\r\n<button mat-icon-button *ngIf=\"filterOverflow\" (click)=\"scrollRight()\">\r\n  <span class=\"material-icons-outlined\">\r\n    arrow_forward_ios\r\n  </span>\r\n</button>\r\n", styles: [":host{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}:host ::ng-deep .mat-form-field-wrapper{padding-bottom:0!important}:host ::ng-deep .mat-form-field-underline{bottom:0!important}.search-input{background-color:unset;border:none}mat-form-field+mat-form-field{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}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { filterBarChange: [{
+                type: Output
+            }], settings: [{
+                type: Input
+            }], filterWrapper: [{
+                type: ViewChild,
+                args: ["filterWrapper"]
+            }], onResize: [{
+                type: HostListener,
+                args: ['window:resize', []]
+            }] } });
+
+class FilterBarModule {
+}
+FilterBarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FilterBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FilterBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: FilterBarModule, declarations: [FilterBarComponent], imports: [CommonModule,
+        TranslateModule,
+        MatInputModule,
+        MatFormFieldModule,
+        FlexLayoutModule,
+        MatSelectModule,
+        FormsModule,
+        MatTooltipModule,
+        MatButtonModule], exports: [FilterBarComponent] });
+FilterBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FilterBarModule, imports: [CommonModule,
+        TranslateModule,
+        MatInputModule,
+        MatFormFieldModule,
+        FlexLayoutModule,
+        MatSelectModule,
+        FormsModule,
+        MatTooltipModule,
+        MatButtonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FilterBarModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        FilterBarComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        TranslateModule,
+                        MatInputModule,
+                        MatFormFieldModule,
+                        FlexLayoutModule,
+                        MatSelectModule,
+                        FormsModule,
+                        MatTooltipModule,
+                        MatButtonModule
+                    ],
+                    exports: [
+                        FilterBarComponent
+                    ]
+                }]
+        }] });
+
+var ExportFormat;
+(function (ExportFormat) {
+    ExportFormat["CSV"] = "csv";
+})(ExportFormat || (ExportFormat = {}));
+
+class MultiFunctionalTableComponent {
+    constructor(domService, translateService) {
+        this.domService = domService;
+        this.translateService = translateService;
+        //#region Output properties
+        this.filterBarChange = new EventEmitter();
+        this.exported = new EventEmitter();
+    }
+    ngOnInit() {
+        this.readFromLocalStorage();
+        this.setColumnProperties();
+        this.setFilterProperties();
+        this.setExportProperties();
+    }
+    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;
+    }
+    updateDisplayColumns(initial = false) {
+        this.displayColumns = [];
+        this.columns = this.config.columnSelect?.columns ?? [];
+        if (!this.columns.length) {
+            return;
+        }
+        const localStorageValue = this.localStorageValue ?? {};
+        if (!localStorageValue.columns) {
+            localStorageValue.columns = {};
+        }
+        this.columns.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();
+        }
+    }
+    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);
+                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 {
+            }
+        }
+    }
+    setFilterProperties() {
+        if (this.config.columnSelect?.enabled) {
+            this.columnSelectActive = true;
+            this.updateDisplayColumns(true);
+        }
+    }
+    setColumnProperties() {
+        if (this.config.filter?.enabled) {
+            this.filterActive = true;
+            this.filterBarVisible = this.localStorageValue?.filter?.visible ?? this.config.filter.visible ?? false;
+            this.filterSettings = this.config.filter.settings;
+        }
+    }
+    setExportProperties() {
+        if (this.config.export?.enabled) {
+            this.exportActive = true;
+        }
+    }
+}
+MultiFunctionalTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MultiFunctionalTableComponent, deps: [{ token: DOMService }, { token: i1$2.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+MultiFunctionalTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: MultiFunctionalTableComponent, selector: "tld-multi-functional-table", inputs: { config: "config" }, outputs: { filterBarChange: "filterBarChange", exported: "exported" }, queries: [{ propertyName: "noDataRow", first: true, predicate: MatNoDataRow, descendants: true }, { propertyName: "headerRowDefs", predicate: MatHeaderRowDef }, { propertyName: "rowDefs", predicate: MatRowDef }, { 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 columns\">\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=\"filterBarVisible\" [settings]=\"filterSettings\" (filterBarChange)=\"filtersChanged($event)\">\r\n  </tld-filter-bar>\r\n  <table #table mat-table [dataSource]=\"config.dataSource\">\r\n    <ng-content></ng-content>\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"displayColumns\"></tr>\r\n    <tr mat-row *matRowDef=\"let row; columns: displayColumns\"></tr>\r\n  </table>\r\n\r\n</div>\r\n", styles: ["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}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: i4.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "directive", type: i6$2.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: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.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"], outputs: ["filterBarChange"] }, { kind: "directive", type: i2$2.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$2.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$2.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: "pipe", type: i1$2.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", 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 columns\">\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=\"filterBarVisible\" [settings]=\"filterSettings\" (filterBarChange)=\"filtersChanged($event)\">\r\n  </tld-filter-bar>\r\n  <table #table mat-table [dataSource]=\"config.dataSource\">\r\n    <ng-content></ng-content>\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"displayColumns\"></tr>\r\n    <tr mat-row *matRowDef=\"let row; columns: displayColumns\"></tr>\r\n  </table>\r\n\r\n</div>\r\n", styles: ["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}\n"] }]
+        }], ctorParameters: function () { return [{ type: DOMService }, { type: i1$2.TranslateService }]; }, propDecorators: { config: [{
+                type: Input
+            }], filterBarChange: [{
+                type: Output
+            }], exported: [{
+                type: Output
+            }], headerRowDefs: [{
+                type: ContentChildren,
+                args: [MatHeaderRowDef]
+            }], rowDefs: [{
+                type: ContentChildren,
+                args: [MatRowDef]
+            }], 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 {
+}
+MultiFunctionalTableModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MultiFunctionalTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+MultiFunctionalTableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: MultiFunctionalTableModule, declarations: [MultiFunctionalTableComponent], imports: [CommonModule,
+        MatTableModule,
+        MatButtonModule,
+        TranslateModule,
+        MatMenuModule,
+        MatCheckboxModule,
+        FormsModule,
+        FilterBarModule,
+        FlexLayoutModule,
+        MatSortModule], exports: [MultiFunctionalTableComponent] });
+MultiFunctionalTableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MultiFunctionalTableModule, imports: [CommonModule,
+        MatTableModule,
+        MatButtonModule,
+        TranslateModule,
+        MatMenuModule,
+        MatCheckboxModule,
+        FormsModule,
+        FilterBarModule,
+        FlexLayoutModule,
+        MatSortModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MultiFunctionalTableModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        MultiFunctionalTableComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        MatTableModule,
+                        MatButtonModule,
+                        TranslateModule,
+                        MatMenuModule,
+                        MatCheckboxModule,
+                        FormsModule,
+                        FilterBarModule,
+                        FlexLayoutModule,
+                        MatSortModule
+                    ],
+                    exports: [
+                        MultiFunctionalTableComponent
+                    ]
+                }]
+        }] });
+
 /*
  * Public API Surface of ngx-common
  */
@@ -671,5 +1393,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ClickOutsideDirective, ClickOutsideModule, CloseButtonComponent, CloseButtonModule, CompanyProductComponent, CompanyProductModule, DOMService, FilterWithHighlightModule, FilterWithHighlightPipe, FooterComponent, FooterModule, IconService, InlineMessageComponent, InlineMessageIconPosition, InlineMessageModule, InlineMessageType, MissingTranslationHelper, NotificationMessageComponent, NotificationMessageModule, NotificationMessageType, PlausibleEventDirective, PlausibleHelper, PlausibleModule, SortTranslationsModule, SortTranslationsPipe, TldLoaderComponent, TldLoaderModule };
+export { ClickOutsideDirective, ClickOutsideModule, CloseButtonComponent, CloseButtonModule, CompanyProductComponent, CompanyProductModule, DOMService, DateAgoModule, DateAgoPipe, DragAndDropDirective, DragAndDropModule, ExportFormat, FileUploadComponent, FileUploadErrorTypeEnum, FileUploadModule, FilterBarComponent, FilterBarModule, FilterWithHighlightModule, FilterWithHighlightPipe, FooterComponent, FooterModule, HtmlElementParseHelper, IconService, InlineMessageComponent, InlineMessageIconPosition, InlineMessageModule, InlineMessageType, MissingTranslationHelper, MultiFunctionalTableComponent, MultiFunctionalTableModule, NotificationMessageComponent, NotificationMessageModule, NotificationMessageType, PlausibleEventDirective, PlausibleHelper, PlausibleModule, SaveFileHelper, SortTranslationsModule, SortTranslationsPipe, TldLoaderComponent, TldLoaderModule };
 //# sourceMappingURL=tilde-nlp-ngx-common.mjs.map