@lenne.tech/ng-base 18.1.2 → 22.0.0

package/fesm2022/lenne.tech-ng-base-base-components.mjs

@@ -1,2917 +0,0 @@
-import * as i0 from '@angular/core';
-import { EventEmitter, Directive, Inject, Input, Output, HostListener, Pipe, Component, ViewChild, ViewContainerRef } from '@angular/core';
-import { DOCUMENT, NgClass, NgStyle, AsyncPipe, DatePipe } from '@angular/common';
-import * as i1 from '@lenne.tech/ng-base/shared';
-import { Sort, ToastType, SortOrderEnum, GraphQLRequestType, BasicUser, fullEmail, securePasswordValidator, Validation } from '@lenne.tech/ng-base/shared';
-import * as i1$1 from '@angular/forms';
-import { ReactiveFormsModule, FormControl, FormsModule, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
-import { trigger, transition, query, style, animate } from '@angular/animations';
-import { Subscription } from 'rxjs';
-import * as i2 from '@angular/router';
-import { RouterLink } from '@angular/router';
-import { ImageCropperComponent } from 'ngx-image-cropper';
-import * as i1$2 from '@angular/common/http';
-
-class SortDirective {
-    renderer;
-    targetElem;
-    baseSort;
-    baseSorted = new EventEmitter();
-    constructor(renderer, targetElem, document) {
-        this.renderer = renderer;
-        this.targetElem = targetElem;
-    }
-    /**
-     * Sorts columns on click
-     */
-    sortColumn() {
-        const items = document.getElementsByTagName('th');
-        for (let i = 0; i < items.length; i++) {
-            items[i].classList.remove('asc');
-            items[i].classList.remove('desc');
-        }
-        const sort = new Sort();
-        const elem = this.targetElem.nativeElement;
-        const order = elem.getAttribute('data-order');
-        const type = elem.getAttribute('data-type');
-        const property = elem.getAttribute('data-name');
-        if (order === 'desc') {
-            this.baseSorted.emit([...this.baseSort].sort(sort.startSort(property, order, type)));
-            elem.setAttribute('data-order', 'asc');
-            elem.classList.remove('desc');
-            elem.classList.add('asc');
-        }
-        else {
-            this.baseSorted.emit([...this.baseSort].sort(sort.startSort(property, order, type)));
-            elem.setAttribute('data-order', 'desc');
-            elem.classList.remove('asc');
-            elem.classList.add('desc');
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: SortDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.2", type: SortDirective, isStandalone: true, selector: "[baseSort]", inputs: { baseSort: "baseSort" }, outputs: { baseSorted: "baseSorted" }, host: { listeners: { "click": "sortColumn()" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: SortDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[baseSort]',
-                    standalone: true,
-                }]
-        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: Document, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }], propDecorators: { baseSort: [{
-                type: Input
-            }], baseSorted: [{
-                type: Output
-            }], sortColumn: [{
-                type: HostListener,
-                args: ['click']
-            }] } });
-
-class BackButtonDirective {
-    navigation;
-    constructor(navigation) {
-        this.navigation = navigation;
-    }
-    onClick() {
-        this.navigation.back();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: BackButtonDirective, deps: [{ token: i1.NavigationService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.2", type: BackButtonDirective, isStandalone: true, selector: "[baseBackButton]", host: { listeners: { "click": "onClick()" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: BackButtonDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[baseBackButton]',
-                    standalone: true,
-                }]
-        }], ctorParameters: () => [{ type: i1.NavigationService }], propDecorators: { onClick: [{
-                type: HostListener,
-                args: ['click']
-            }] } });
-
-/**
- * Directive vor context menu
- * See https://stackblitz.com/edit/angular-custom-context-menu
- */
-class ContextMenuDirective {
-    el;
-    contextMenuData;
-    ltContextMenu;
-    xGap = 0;
-    yGap = 0;
-    overflowSpace = 10;
-    selectors = '*';
-    clickedElement = null;
-    previousDisplayStatus = null;
-    constructor(el) {
-        this.el = el;
-    }
-    ngOnInit() {
-        if (this.ltContextMenu) {
-            this.previousDisplayStatus = this.ltContextMenu.style.display;
-        }
-        // Add a click listener to the window,
-        // so that we can close the context menu on left click
-        window.addEventListener('click', () => {
-            this.showContextMenu(null, false);
-        });
-        // Close context menu when escape is pressed
-        window.addEventListener('keydown', (e) => {
-            if (e.code === 'Escape') {
-                this.showContextMenu(null, false);
-            }
-        });
-        // Add an event listener to listen to the 'contextmenu' event
-        this.el.nativeElement.addEventListener('contextmenu', (e) => {
-            // Prevent the default context menu to popup
-            if (e.preventDefault) {
-                e.preventDefault();
-            }
-            // Shows our own context menu
-            this.showContextMenu(e, true);
-        });
-    }
-    // Shows or hides our custom context menu, which is specified as a input
-    showContextMenu(event, show) {
-        const cm = this.ltContextMenu;
-        if (cm) {
-            // Try to open context menu
-            if (show && event && event instanceof MouseEvent) {
-                // Get valid clicked structureElement
-                const clickedElement = event?.target?.closest(this.selectors);
-                if (clickedElement) {
-                    this.clickedElement = clickedElement;
-                    setTimeout(() => {
-                        // Set display status
-                        cm.style.display = 'block';
-                        // Calculate top position
-                        let top = event.y + this.yGap;
-                        if (top + cm.offsetHeight + 10 > document.documentElement.clientHeight) {
-                            top = document.documentElement.clientHeight - cm.offsetHeight - this.overflowSpace;
-                        }
-                        // Calculate left position
-                        let left = event.x + this.xGap;
-                        if (left + cm.offsetWidth + 10 > document.documentElement.clientWidth) {
-                            left = document.documentElement.clientWidth - cm.offsetWidth - this.overflowSpace;
-                        }
-                        // Set position
-                        cm.style.top = top + 'px';
-                        cm.style.left = left + 'px';
-                        // Show
-                        cm.style.opacity = '1.0';
-                        cm.style['pointer-events'] = 'auto';
-                    }, 1);
-                    return;
-                }
-            }
-            // Close context menu
-            this.clickedElement = null;
-            if (this.previousDisplayStatus) {
-                cm.style.display = this.previousDisplayStatus;
-            }
-            cm.style.opacity = '0.01';
-            cm.style['pointer-events'] = 'none';
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ContextMenuDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.2", type: ContextMenuDirective, isStandalone: true, selector: "[ltContextMenu]", inputs: { contextMenuData: "contextMenuData", ltContextMenu: "ltContextMenu", xGap: "xGap", yGap: "yGap", overflowSpace: "overflowSpace", selectors: "selectors" }, outputs: { clickedElement: "clickedElement" }, exportAs: ["contextMenuData"], ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ContextMenuDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[ltContextMenu]',
-                    exportAs: 'contextMenuData',
-                    standalone: true,
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { contextMenuData: [{
-                type: Input
-            }], ltContextMenu: [{
-                type: Input
-            }], xGap: [{
-                type: Input
-            }], yGap: [{
-                type: Input
-            }], overflowSpace: [{
-                type: Input
-            }], selectors: [{
-                type: Input
-            }], clickedElement: [{
-                type: Output
-            }] } });
-
-/**
- * Stops propagation of click events
- * Inspired by https://stackoverflow.com/a/41001184
- */
-class StopPropagationDirective {
-    onClick(event) {
-        event.stopPropagation();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: StopPropagationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.2", type: StopPropagationDirective, isStandalone: true, selector: "[baseStopPropagation]", host: { listeners: { "click": "onClick($event)" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: StopPropagationDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[baseStopPropagation]',
-                    standalone: true,
-                }]
-        }], propDecorators: { onClick: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }] } });
-
-/**
- * Truncate string with ellipses
- */
-class EllipsesPipe {
-    transform(value, limit) {
-        if (!value) {
-            return null;
-        }
-        return value.length > limit ? value.substring(0, limit) + '...' : value;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: EllipsesPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.0.2", ngImport: i0, type: EllipsesPipe, isStandalone: true, name: "baseEllipses" });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: EllipsesPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'baseEllipses',
-                    standalone: true,
-                }]
-        }] });
-
-class InputComponent {
-    id;
-    name;
-    infoText;
-    label;
-    placeholder = '';
-    autocomplete;
-    tabIndex;
-    control;
-    type = 'text';
-    required = false;
-    eyeButton = false;
-    objectPath = '';
-    enter = new EventEmitter();
-    /**
-     * If the control has a value, emit the enter event
-     */
-    enterEvent() {
-        if (this.control?.value) {
-            this.enter.emit();
-        }
-    }
-    /**
-     * Switch input type
-     */
-    togglePasswordType() {
-        if (this.type === 'password') {
-            this.type = 'text';
-        }
-        else {
-            this.type = 'password';
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: InputComponent, isStandalone: true, selector: "base-input", inputs: { id: "id", name: "name", infoText: "infoText", label: "label", placeholder: "placeholder", autocomplete: "autocomplete", tabIndex: "tabIndex", control: "control", type: "type", required: "required", eyeButton: "eyeButton", objectPath: "objectPath" }, outputs: { enter: "enter" }, ngImport: i0, template: "<div class=\"form-group mb-3\">\n  <div class=\"d-flex justify-content-between align-items-center\">\n    @if (label) {\n      <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\">{{ label }}</label>\n    }\n    @if (infoText) {\n      <i class=\"bi bi-info-circle\" [ngbTooltip]=\"infoText\" placement=\"start\"></i>\n    }\n  </div>\n  <div class=\"input-group\">\n    <input\n      [id]=\"objectPath ? objectPath + '.' + id : id\"\n      [name]=\"name\"\n      class=\"form-control\"\n      [type]=\"type\"\n      [formControl]=\"control\"\n      [required]=\"required\"\n      [placeholder]=\"placeholder\"\n      [autocomplete]=\"autocomplete ?? null\"\n      [tabIndex]=\"tabIndex ?? null\"\n      [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n      (keyup.enter)=\"enterEvent()\"\n      [attr.aria-describedby]=\"id + 'eye-button'\"\n      [attr.data-cy]=\"name\"\n      />\n    @if (eyeButton) {\n      <button\n        class=\"btn btn-outline-primary\"\n        type=\"button\"\n        [id]=\"id + 'eye-button'\"\n        (click)=\"togglePasswordType()\"\n        >\n        @if (type === 'password') {\n          <i class=\"bi bi-eye\"></i>\n        }\n        @if (type === 'text') {\n          <i class=\"bi bi-eye-slash\"></i>\n        }\n      </button>\n    }\n\n    @if (control?.invalid && (control?.dirty || control?.touched)) {\n      <div class=\"invalid-feedback m-2\">\n        @if (control?.errors?.['required']) {\n          <div>Dieses Feld ist ein Pflichtfeld.</div>\n        }\n        @if (control?.errors?.['minlength']) {\n          <div>\n            Die Mindestl\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n            {{control.errors?.['minlength']?.requiredLength}} Zeichen.\n          </div>\n        }\n        @if (control?.errors?.['maxlength']) {\n          <div>\n            Die maximale L\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n            {{control.errors?.['maxlength']?.requiredLength}} Zeichen.\n          </div>\n        }\n        @if (control?.errors?.['email']) {\n          <div>Bitte eine g\u00FCltige E-Mail Adresse angeben.</div>\n        }\n        @if (control?.errors?.['pattern'] && type === 'tel') {\n          <div>Bitte eine g\u00FCltige Telefonnummer angeben.</div>\n        }\n        @if (control?.errors?.['invalidEmail']) {\n          <div>Bitte eine g\u00FCltige E-Mail Adresse angeben.</div>\n        }\n        @if (control?.errors?.['matching']) {\n          <div>Die Passw\u00F6rter m\u00FCssen \u00FCberein stimmen.</div>\n        }\n        @if (control?.errors?.['invalidSecurePassword']) {\n          <div>\n            Das Passwort ist zu unsicher. Es muss mind. 8 Zeichen lang sein, ein Gro\u00DFbustabe, ein Kleinbuchstabe, eine Zahl\n            und ein Sonderzeichen enthalten.\n          </div>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [".required:after{content:\" *\"}.input-group>.btn{min-width:100px}button{height:100%}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: InputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'base-input', standalone: true, imports: [
-                        ReactiveFormsModule,
-                        NgClass
-                    ], template: "<div class=\"form-group mb-3\">\n  <div class=\"d-flex justify-content-between align-items-center\">\n    @if (label) {\n      <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\">{{ label }}</label>\n    }\n    @if (infoText) {\n      <i class=\"bi bi-info-circle\" [ngbTooltip]=\"infoText\" placement=\"start\"></i>\n    }\n  </div>\n  <div class=\"input-group\">\n    <input\n      [id]=\"objectPath ? objectPath + '.' + id : id\"\n      [name]=\"name\"\n      class=\"form-control\"\n      [type]=\"type\"\n      [formControl]=\"control\"\n      [required]=\"required\"\n      [placeholder]=\"placeholder\"\n      [autocomplete]=\"autocomplete ?? null\"\n      [tabIndex]=\"tabIndex ?? null\"\n      [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n      (keyup.enter)=\"enterEvent()\"\n      [attr.aria-describedby]=\"id + 'eye-button'\"\n      [attr.data-cy]=\"name\"\n      />\n    @if (eyeButton) {\n      <button\n        class=\"btn btn-outline-primary\"\n        type=\"button\"\n        [id]=\"id + 'eye-button'\"\n        (click)=\"togglePasswordType()\"\n        >\n        @if (type === 'password') {\n          <i class=\"bi bi-eye\"></i>\n        }\n        @if (type === 'text') {\n          <i class=\"bi bi-eye-slash\"></i>\n        }\n      </button>\n    }\n\n    @if (control?.invalid && (control?.dirty || control?.touched)) {\n      <div class=\"invalid-feedback m-2\">\n        @if (control?.errors?.['required']) {\n          <div>Dieses Feld ist ein Pflichtfeld.</div>\n        }\n        @if (control?.errors?.['minlength']) {\n          <div>\n            Die Mindestl\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n            {{control.errors?.['minlength']?.requiredLength}} Zeichen.\n          </div>\n        }\n        @if (control?.errors?.['maxlength']) {\n          <div>\n            Die maximale L\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n            {{control.errors?.['maxlength']?.requiredLength}} Zeichen.\n          </div>\n        }\n        @if (control?.errors?.['email']) {\n          <div>Bitte eine g\u00FCltige E-Mail Adresse angeben.</div>\n        }\n        @if (control?.errors?.['pattern'] && type === 'tel') {\n          <div>Bitte eine g\u00FCltige Telefonnummer angeben.</div>\n        }\n        @if (control?.errors?.['invalidEmail']) {\n          <div>Bitte eine g\u00FCltige E-Mail Adresse angeben.</div>\n        }\n        @if (control?.errors?.['matching']) {\n          <div>Die Passw\u00F6rter m\u00FCssen \u00FCberein stimmen.</div>\n        }\n        @if (control?.errors?.['invalidSecurePassword']) {\n          <div>\n            Das Passwort ist zu unsicher. Es muss mind. 8 Zeichen lang sein, ein Gro\u00DFbustabe, ein Kleinbuchstabe, eine Zahl\n            und ein Sonderzeichen enthalten.\n          </div>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [".required:after{content:\" *\"}.input-group>.btn{min-width:100px}button{height:100%}\n"] }]
-        }], propDecorators: { id: [{
-                type: Input
-            }], name: [{
-                type: Input
-            }], infoText: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], autocomplete: [{
-                type: Input
-            }], tabIndex: [{
-                type: Input
-            }], control: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }], required: [{
-                type: Input
-            }], eyeButton: [{
-                type: Input
-            }], objectPath: [{
-                type: Input
-            }], enter: [{
-                type: Output
-            }] } });
-
-class SelectComponent {
-    select;
-    id;
-    name;
-    infoText;
-    label;
-    placeholder = '';
-    objectPath = '';
-    control;
-    tabIndex;
-    required = false;
-    multiple = false;
-    search = false;
-    options = [];
-    ngOnInit() {
-        if (this.multiple) {
-            this.select.nativeElement.setAttribute('multiple', true);
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: SelectComponent, isStandalone: true, selector: "base-select", inputs: { id: "id", name: "name", infoText: "infoText", label: "label", placeholder: "placeholder", objectPath: "objectPath", control: "control", tabIndex: "tabIndex", required: "required", multiple: "multiple", search: "search", options: "options" }, viewQueries: [{ propertyName: "select", first: true, predicate: ["select"], descendants: true }], ngImport: i0, template: "<div class=\"form-group mb-3\">\n  <div class=\"d-flex justify-content-between align-items-center\">\n    @if (label) {\n      <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\">{{ label }}</label>\n    }\n    @if (infoText) {\n      <i class=\"bi bi-info-circle\" [ngbTooltip]=\"infoText\" placement=\"start\"></i>\n    }\n  </div>\n  <select\n    #select\n    [id]=\"objectPath ? objectPath + '.' + id : id\"\n    [name]=\"name\"\n    class=\"form-select\"\n    [attr.aria-label]=\"placeholder\"\n    [attr.data-live-search]=\"search\"\n    [formControl]=\"control\"\n    [required]=\"required\"\n    [tabIndex]=\"tabIndex ?? null\"\n    [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n    >\n    <option [ngValue]=\"null\" disabled selected>{{ placeholder }}</option>\n    @for (option of options; track option) {\n      <option [ngValue]=\"option.value\">\n        {{ option.text }}\n      </option>\n    }\n  </select>\n\n  @if (control?.invalid && (control?.dirty || control?.touched)) {\n    <div class=\"invalid-feedback m-2\">\n      @if (control?.errors?.['required']) {\n        <div>Dieses Feld ist ein Pflichtfeld.</div>\n      }\n      @if (control?.errors?.['minlength']) {\n        <div>\n          Die Mindestl\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n          {{control?.errors?.['minlength']?.requiredLength}} Zeichen.\n        </div>\n      }\n      @if (control?.errors?.['maxlength']) {\n        <div>\n          Die maximale L\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n          {{control?.errors?.['maxlength']?.requiredLength}} Zeichen.\n        </div>\n      }\n      @if (control?.errors?.['email']) {\n        <div>Bitte eine g\u00FCltige E-Mail Adresse angeben.</div>\n      }\n    </div>\n  }\n</div>\n", styles: [".required:after{content:\" *\"}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: SelectComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'base-select', standalone: true, imports: [
-                        NgClass,
-                        ReactiveFormsModule,
-                    ], template: "<div class=\"form-group mb-3\">\n  <div class=\"d-flex justify-content-between align-items-center\">\n    @if (label) {\n      <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\">{{ label }}</label>\n    }\n    @if (infoText) {\n      <i class=\"bi bi-info-circle\" [ngbTooltip]=\"infoText\" placement=\"start\"></i>\n    }\n  </div>\n  <select\n    #select\n    [id]=\"objectPath ? objectPath + '.' + id : id\"\n    [name]=\"name\"\n    class=\"form-select\"\n    [attr.aria-label]=\"placeholder\"\n    [attr.data-live-search]=\"search\"\n    [formControl]=\"control\"\n    [required]=\"required\"\n    [tabIndex]=\"tabIndex ?? null\"\n    [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n    >\n    <option [ngValue]=\"null\" disabled selected>{{ placeholder }}</option>\n    @for (option of options; track option) {\n      <option [ngValue]=\"option.value\">\n        {{ option.text }}\n      </option>\n    }\n  </select>\n\n  @if (control?.invalid && (control?.dirty || control?.touched)) {\n    <div class=\"invalid-feedback m-2\">\n      @if (control?.errors?.['required']) {\n        <div>Dieses Feld ist ein Pflichtfeld.</div>\n      }\n      @if (control?.errors?.['minlength']) {\n        <div>\n          Die Mindestl\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n          {{control?.errors?.['minlength']?.requiredLength}} Zeichen.\n        </div>\n      }\n      @if (control?.errors?.['maxlength']) {\n        <div>\n          Die maximale L\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n          {{control?.errors?.['maxlength']?.requiredLength}} Zeichen.\n        </div>\n      }\n      @if (control?.errors?.['email']) {\n        <div>Bitte eine g\u00FCltige E-Mail Adresse angeben.</div>\n      }\n    </div>\n  }\n</div>\n", styles: [".required:after{content:\" *\"}\n"] }]
-        }], propDecorators: { select: [{
-                type: ViewChild,
-                args: ['select']
-            }], id: [{
-                type: Input
-            }], name: [{
-                type: Input
-            }], infoText: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], objectPath: [{
-                type: Input
-            }], control: [{
-                type: Input
-            }], tabIndex: [{
-                type: Input
-            }], required: [{
-                type: Input
-            }], multiple: [{
-                type: Input
-            }], search: [{
-                type: Input
-            }], options: [{
-                type: Input
-            }] } });
-
-class CheckboxComponent {
-    id;
-    name;
-    label;
-    value;
-    control;
-    required = false;
-    objectPath = '';
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: CheckboxComponent, isStandalone: true, selector: "base-checkbox", inputs: { id: "id", name: "name", label: "label", value: "value", control: "control", required: "required", objectPath: "objectPath" }, ngImport: i0, template: "<div class=\"form-check\">\n  <input\n    class=\"form-check-input\"\n    type=\"checkbox\"\n    [formControl]=\"control\"\n    [required]=\"required\"\n    [value]=\"value\"\n    [id]=\"objectPath ? objectPath + '.' + id : id\"\n    [name]=\"name\"\n    [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n    />\n  <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\">\n    @if (label) {\n      {{ label }}\n    }\n    <ng-content></ng-content>\n  </label>\n\n  @if (control?.invalid && (control?.dirty || control?.touched)) {\n    <div class=\"invalid-feedback ms-0 m-2\">\n      @if (control?.errors?.['required']) {\n        <div>Dieses Feld ist ein Pflichtfeld.</div>\n      }\n    </div>\n  }\n</div>\n", styles: [".required:after{content:\" *\"}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: CheckboxComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'base-checkbox', standalone: true, imports: [
-                        ReactiveFormsModule,
-                        NgClass
-                    ], template: "<div class=\"form-check\">\n  <input\n    class=\"form-check-input\"\n    type=\"checkbox\"\n    [formControl]=\"control\"\n    [required]=\"required\"\n    [value]=\"value\"\n    [id]=\"objectPath ? objectPath + '.' + id : id\"\n    [name]=\"name\"\n    [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n    />\n  <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\">\n    @if (label) {\n      {{ label }}\n    }\n    <ng-content></ng-content>\n  </label>\n\n  @if (control?.invalid && (control?.dirty || control?.touched)) {\n    <div class=\"invalid-feedback ms-0 m-2\">\n      @if (control?.errors?.['required']) {\n        <div>Dieses Feld ist ein Pflichtfeld.</div>\n      }\n    </div>\n  }\n</div>\n", styles: [".required:after{content:\" *\"}\n"] }]
-        }], propDecorators: { id: [{
-                type: Input
-            }], name: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], control: [{
-                type: Input
-            }], required: [{
-                type: Input
-            }], objectPath: [{
-                type: Input
-            }] } });
-
-class TextareaComponent {
-    textarea;
-    id;
-    name;
-    infoText;
-    label = '';
-    placeholder = '';
-    control;
-    rows = 5;
-    required = false;
-    autoHeight = true;
-    tabIndex;
-    objectPath = '';
-    ngOnChanges(changes) {
-        if (changes['control'] && this.autoHeight) {
-            setTimeout(() => {
-                this.adjustInitHeight();
-            }, 350);
-        }
-    }
-    adjustInitHeight() {
-        if (!this.textarea || !this.autoHeight) {
-            return;
-        }
-        this.textarea.nativeElement.style.cssText = 'height:auto;';
-        this.textarea.nativeElement.style.cssText = 'height:' + (this.textarea.nativeElement.scrollHeight + 5) + 'px';
-    }
-    adjustHeight(event) {
-        if (!this.autoHeight) {
-            return;
-        }
-        setTimeout(() => {
-            event.target.style.cssText = 'height:auto;';
-            // for box-sizing other than "content-box" use:
-            // el.style.cssText = '-moz-box-sizing:content-box';
-            event.target.style.cssText = 'height:' + (event.target.scrollHeight + 5) + 'px';
-        }, 0);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: TextareaComponent, isStandalone: true, selector: "base-textarea", inputs: { id: "id", name: "name", infoText: "infoText", label: "label", placeholder: "placeholder", control: "control", rows: "rows", required: "required", autoHeight: "autoHeight", tabIndex: "tabIndex", objectPath: "objectPath" }, viewQueries: [{ propertyName: "textarea", first: true, predicate: ["textarea"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"form-group mb-3\">\n  <div class=\"d-flex justify-content-between align-items-center\">\n    @if (label) {\n      <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\">{{ label }}</label>\n    }\n    @if (infoText) {\n      <i class=\"bi bi-info-circle\" [ngbTooltip]=\"infoText\" placement=\"start\"></i>\n    }\n  </div>\n\n  <textarea\n    #textarea\n    class=\"form-control\"\n    [id]=\"objectPath ? objectPath + '.' + id : id\"\n    [name]=\"name\"\n    [rows]=\"rows\"\n    (input)=\"adjustHeight($event)\"\n    [placeholder]=\"placeholder\"\n    [formControl]=\"control\"\n    [tabIndex]=\"tabIndex ?? null\"\n    [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n  ></textarea>\n\n  @if (control?.invalid && (control?.dirty || control?.touched)) {\n    <div class=\"invalid-feedback m-2\">\n      @if (control?.errors?.['required']) {\n        <div>Dieses Feld ist ein Pflichtfeld.</div>\n      }\n      @if (control?.errors?.['minlength']) {\n        <div>\n          Die Mindestl\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n          {{control?.errors?.['minlength']?.requiredLength}} Zeichen.\n        </div>\n      }\n      @if (control?.errors?.['maxlength']) {\n        <div>\n          Die maximale L\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n          {{control?.errors?.['maxlength']?.requiredLength}} Zeichen.\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [".required:after{content:\" *\"}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: TextareaComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'base-textarea', standalone: true, imports: [
-                        NgClass,
-                        ReactiveFormsModule
-                    ], template: "<div class=\"form-group mb-3\">\n  <div class=\"d-flex justify-content-between align-items-center\">\n    @if (label) {\n      <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\">{{ label }}</label>\n    }\n    @if (infoText) {\n      <i class=\"bi bi-info-circle\" [ngbTooltip]=\"infoText\" placement=\"start\"></i>\n    }\n  </div>\n\n  <textarea\n    #textarea\n    class=\"form-control\"\n    [id]=\"objectPath ? objectPath + '.' + id : id\"\n    [name]=\"name\"\n    [rows]=\"rows\"\n    (input)=\"adjustHeight($event)\"\n    [placeholder]=\"placeholder\"\n    [formControl]=\"control\"\n    [tabIndex]=\"tabIndex ?? null\"\n    [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n  ></textarea>\n\n  @if (control?.invalid && (control?.dirty || control?.touched)) {\n    <div class=\"invalid-feedback m-2\">\n      @if (control?.errors?.['required']) {\n        <div>Dieses Feld ist ein Pflichtfeld.</div>\n      }\n      @if (control?.errors?.['minlength']) {\n        <div>\n          Die Mindestl\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n          {{control?.errors?.['minlength']?.requiredLength}} Zeichen.\n        </div>\n      }\n      @if (control?.errors?.['maxlength']) {\n        <div>\n          Die maximale L\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n          {{control?.errors?.['maxlength']?.requiredLength}} Zeichen.\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [".required:after{content:\" *\"}\n"] }]
-        }], propDecorators: { textarea: [{
-                type: ViewChild,
-                args: ['textarea']
-            }], id: [{
-                type: Input
-            }], name: [{
-                type: Input
-            }], infoText: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], control: [{
-                type: Input
-            }], rows: [{
-                type: Input
-            }], required: [{
-                type: Input
-            }], autoHeight: [{
-                type: Input
-            }], tabIndex: [{
-                type: Input
-            }], objectPath: [{
-                type: Input
-            }] } });
-
-class TagsComponent {
-    id;
-    name;
-    infoText;
-    label = '';
-    placeholder = '';
-    autocomplete;
-    tabIndex;
-    control;
-    options;
-    custom = true;
-    removeByKey = true;
-    required = false;
-    objectPath = '';
-    validators = [];
-    inputValue = '';
-    selectedElement;
-    /**
-     * Convert id into text field
-     */
-    getReadableTag(tag) {
-        if (this.control?.value && this.options) {
-            const foundElement = this.options.find((e) => e.value === tag);
-            if (foundElement) {
-                return foundElement.text;
-            }
-            else {
-                return tag;
-            }
-        }
-        else {
-            return tag;
-        }
-    }
-    /**
-     * Listen to enter keys
-     *
-     * @param event
-     */
-    enterKey(event) {
-        this.selectedElement = event.target;
-        if (this.removeByKey && event.code === 'Backspace' && !this.inputValue) {
-            this.removeTag();
-            return;
-        }
-        else {
-            if (event.code === 'Comma' || event.code === 'Space' || event.code === 'Enter') {
-                this.addTag(this.inputValue);
-            }
-        }
-    }
-    /**
-     * Add new tag
-     *
-     * @param tag
-     * @param reset
-     * @param isOption
-     */
-    addTag(tag, reset = true, isOption = false) {
-        if (tag.endsWith(',') || tag.endsWith(' ')) {
-            tag = tag.slice(0, -1);
-        }
-        const temp = new FormControl(tag, this.validators);
-        this.control.setErrors({ ...this.control.errors, ...temp.errors });
-        if (temp.invalid) {
-            return;
-        }
-        // Check if user copy string into input
-        if (tag.split(' ').length > 1 && !isOption) {
-            const tags = tag.split(' ');
-            for (let i = 0; i < tags.length; i++) {
-                this.addTag(tags[i], i + 1 === tags.length);
-            }
-            return;
-        }
-        // Check if user copy string into input
-        if (tag.split(',').length > 1 && !isOption) {
-            const tags = tag.split(',');
-            for (let i = 0; i < tags.length; i++) {
-                this.addTag(tags[i], i + 1 === tags.length);
-            }
-            return;
-        }
-        let foundOption;
-        if (!this.options) {
-            foundOption = { value: tag, text: tag };
-        }
-        else {
-            foundOption = this.options.find((e) => e.text === tag);
-        }
-        if (!this.custom && !foundOption) {
-            return;
-        }
-        this.selectedElement = null;
-        if (!this.control.value) {
-            this.control.setValue([]);
-        }
-        if (this.control.value?.length === 0) {
-            this.control.setValue([foundOption.value]);
-            if (reset) {
-                this.inputValue = '';
-            }
-            this.control.setErrors(null);
-            return;
-        }
-        if (tag.length > 0 &&
-            this.control.value &&
-            !this.control.value.some((item) => item === foundOption.value)) {
-            this.control.setValue([...this.control.value, foundOption.value]);
-            if (reset) {
-                this.inputValue = '';
-            }
-            this.control.setErrors(null);
-        }
-        if (this.control.value.some((item) => item === foundOption.value)) {
-            if (reset) {
-                this.inputValue = '';
-            }
-        }
-    }
-    /**
-     * Remove tag
-     *
-     * @param tag
-     */
-    removeTag(tag) {
-        let foundOption;
-        if (!this.options) {
-            foundOption = { value: tag, text: tag };
-        }
-        else {
-            foundOption = this.options.find((e) => e.value === tag);
-        }
-        this.control.markAsTouched();
-        if (foundOption) {
-            this.control.setValue(this.control.value?.filter((item) => item !== foundOption.value));
-        }
-        else if (this.control.value) {
-            this.control.value.splice(-1);
-        }
-        if (this.control.value?.length === 0) {
-            this.control.setErrors({ ...this.control.errors, required: true });
-        }
-    }
-    /**
-     * Filter options for drop down
-     */
-    filterOptions() {
-        return this.options
-            ? this.options.filter((e) => (!this.inputValue || e?.text?.includes(this.inputValue)) && !this.control.value?.includes(e.value))
-            : [];
-    }
-    /**
-     * Show dropdown focus
-     */
-    onFocus(event) {
-        if (event) {
-            this.control.setErrors(null);
-            this.selectedElement = event.target;
-        }
-        else {
-            if (this.inputValue) {
-                this.addTag(this.inputValue);
-            }
-            this.control.markAsTouched();
-            setTimeout(() => {
-                if (this.options && this.inputValue) {
-                    if (this.options.find((e) => e.text === this.inputValue)) {
-                        this.addTag(this.inputValue);
-                        this.control.setErrors(null);
-                    }
-                    else {
-                        this.inputValue = '';
-                    }
-                }
-                if (!this.control.value || this.control.value?.length === 0) {
-                    this.control.setErrors({ ...this.control.errors, required: true });
-                }
-                this.selectedElement = null;
-            }, 250);
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: TagsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: TagsComponent, isStandalone: true, selector: "base-tags", inputs: { id: "id", name: "name", infoText: "infoText", label: "label", placeholder: "placeholder", autocomplete: "autocomplete", tabIndex: "tabIndex", control: "control", options: "options", custom: "custom", removeByKey: "removeByKey", required: "required", objectPath: "objectPath", validators: "validators" }, ngImport: i0, template: "@if (control) {\n  <div class=\"form-group position-relative\">\n    <div class=\"d-flex justify-content-between align-items-center\">\n      @if (label) {\n        <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\">{{ label }}</label>\n      }\n      @if (infoText) {\n        <i class=\"bi bi-info-circle\" [ngbTooltip]=\"infoText\" placement=\"start\"></i>\n      }\n    </div>\n    @if (control?.value) {\n      <div class=\"tag-wrapper\">\n        @for (tag of control?.value; track tag) {\n          <div class=\"tag\">\n            {{ getReadableTag(tag) }}\n            <span (click)=\"removeTag(tag)\" data-cy=\"input-tags-item-remove\"><i class=\"bi bi-x-circle\"></i></span>\n          </div>\n        }\n      </div>\n    }\n    <input [formControl]=\"control\" hidden />\n    <input\n      [id]=\"objectPath ? objectPath + '.' + id : id\"\n      [name]=\"name\"\n      [placeholder]=\"placeholder\"\n      [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n      [(ngModel)]=\"inputValue\"\n      [autocomplete]=\"autocomplete ?? null\"\n      [tabIndex]=\"tabIndex ?? null\"\n      (focus)=\"onFocus($event)\"\n      (blur)=\"onFocus()\"\n      type=\"text\"\n      class=\"form-control\"\n      (keyup)=\"enterKey($event)\"\n      [attr.data-cy]=\"'input-tags-field'\"\n      />\n    @if (options && selectedElement) {\n      <div class=\"tag-options\">\n        @for (option of filterOptions(); track option) {\n          <div class=\"tag-option-item\" (click)=\"addTag(option?.text, true, true)\">\n            {{ option?.text }}\n          </div>\n        }\n      </div>\n    }\n    @if (control?.invalid && (control?.dirty || control?.touched)) {\n      <div class=\"invalid-feedback m-2\">\n        @if (control?.errors?.['required']) {\n          <div>Dieses Feld ist ein Pflichtfeld.</div>\n        }\n        @if (control?.errors?.['invalidReference'] && inputValue) {\n          <div>\n            {{ inputValue }} ist kein g\u00FCltiger Wert f\u00FCr {{ label }}.\n          </div>\n        }\n        @if (control?.errors?.['email']) {\n          <div>Bitte gib eine g\u00FCltige E-Mail Adresse ein.</div>\n        }\n      </div>\n    }\n  </div>\n}\n", styles: [".required:after{content:\" *\"}.tag-options{position:absolute;display:block;top:100%;left:0;right:0;border-top:0;background-color:#fff;box-shadow:0 2px 5px #00000029,0 2px 10px #0000001f;transition:all .5s;z-index:999;max-height:200px;overflow-y:scroll}.tag-options .tag-option-item{padding:10px;cursor:pointer}.tag-options .tag-option-item:hover{color:var(--bs-primary)}.tag-wrapper{display:flex;flex-direction:row;justify-content:flex-start;column-gap:10px;row-gap:10px;flex-wrap:wrap;margin-bottom:10px;position:relative}.tag-wrapper .tag{background-color:var(--bs-light);color:var(--bs-dark);padding:10px 15px;font-style:normal;font-weight:300;font-size:14px;line-height:140%}.tag-wrapper .tag span{margin-left:20px;cursor:pointer}.tag-wrapper .tag span .bi{color:var(--bs-black)}.tag-wrapper .tag span .bi:before{vertical-align:-.175em}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: TagsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'base-tags', standalone: true, imports: [
-                        NgClass,
-                        ReactiveFormsModule,
-                        FormsModule
-                    ], template: "@if (control) {\n  <div class=\"form-group position-relative\">\n    <div class=\"d-flex justify-content-between align-items-center\">\n      @if (label) {\n        <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\">{{ label }}</label>\n      }\n      @if (infoText) {\n        <i class=\"bi bi-info-circle\" [ngbTooltip]=\"infoText\" placement=\"start\"></i>\n      }\n    </div>\n    @if (control?.value) {\n      <div class=\"tag-wrapper\">\n        @for (tag of control?.value; track tag) {\n          <div class=\"tag\">\n            {{ getReadableTag(tag) }}\n            <span (click)=\"removeTag(tag)\" data-cy=\"input-tags-item-remove\"><i class=\"bi bi-x-circle\"></i></span>\n          </div>\n        }\n      </div>\n    }\n    <input [formControl]=\"control\" hidden />\n    <input\n      [id]=\"objectPath ? objectPath + '.' + id : id\"\n      [name]=\"name\"\n      [placeholder]=\"placeholder\"\n      [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n      [(ngModel)]=\"inputValue\"\n      [autocomplete]=\"autocomplete ?? null\"\n      [tabIndex]=\"tabIndex ?? null\"\n      (focus)=\"onFocus($event)\"\n      (blur)=\"onFocus()\"\n      type=\"text\"\n      class=\"form-control\"\n      (keyup)=\"enterKey($event)\"\n      [attr.data-cy]=\"'input-tags-field'\"\n      />\n    @if (options && selectedElement) {\n      <div class=\"tag-options\">\n        @for (option of filterOptions(); track option) {\n          <div class=\"tag-option-item\" (click)=\"addTag(option?.text, true, true)\">\n            {{ option?.text }}\n          </div>\n        }\n      </div>\n    }\n    @if (control?.invalid && (control?.dirty || control?.touched)) {\n      <div class=\"invalid-feedback m-2\">\n        @if (control?.errors?.['required']) {\n          <div>Dieses Feld ist ein Pflichtfeld.</div>\n        }\n        @if (control?.errors?.['invalidReference'] && inputValue) {\n          <div>\n            {{ inputValue }} ist kein g\u00FCltiger Wert f\u00FCr {{ label }}.\n          </div>\n        }\n        @if (control?.errors?.['email']) {\n          <div>Bitte gib eine g\u00FCltige E-Mail Adresse ein.</div>\n        }\n      </div>\n    }\n  </div>\n}\n", styles: [".required:after{content:\" *\"}.tag-options{position:absolute;display:block;top:100%;left:0;right:0;border-top:0;background-color:#fff;box-shadow:0 2px 5px #00000029,0 2px 10px #0000001f;transition:all .5s;z-index:999;max-height:200px;overflow-y:scroll}.tag-options .tag-option-item{padding:10px;cursor:pointer}.tag-options .tag-option-item:hover{color:var(--bs-primary)}.tag-wrapper{display:flex;flex-direction:row;justify-content:flex-start;column-gap:10px;row-gap:10px;flex-wrap:wrap;margin-bottom:10px;position:relative}.tag-wrapper .tag{background-color:var(--bs-light);color:var(--bs-dark);padding:10px 15px;font-style:normal;font-weight:300;font-size:14px;line-height:140%}.tag-wrapper .tag span{margin-left:20px;cursor:pointer}.tag-wrapper .tag span .bi{color:var(--bs-black)}.tag-wrapper .tag span .bi:before{vertical-align:-.175em}\n"] }]
-        }], propDecorators: { id: [{
-                type: Input
-            }], name: [{
-                type: Input
-            }], infoText: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], autocomplete: [{
-                type: Input
-            }], tabIndex: [{
-                type: Input
-            }], control: [{
-                type: Input
-            }], options: [{
-                type: Input
-            }], custom: [{
-                type: Input
-            }], removeByKey: [{
-                type: Input
-            }], required: [{
-                type: Input
-            }], objectPath: [{
-                type: Input
-            }], validators: [{
-                type: Input
-            }] } });
-
-const toastAnimation = trigger('toastAnimation', [
-    transition('* <=> *', [
-        query(':enter', [style({ transform: 'translateX({{ x }})' }), animate('200ms ease-in', style({ transform: 'translateX(0%)' }))], { optional: true }),
-        query(':leave', animate('200ms ease-in', style({ transform: 'translateX({{ x }})' })), { optional: true }),
-    ]),
-]);
-class ToastComponent {
-    toastService;
-    toasts = [];
-    ToastType = ToastType;
-    subscriptions = new Subscription();
-    position = 'bottom-right';
-    constructor(toastService) {
-        this.toastService = toastService;
-    }
-    ngOnInit() {
-        this.subscriptions.add(this.toastService.toastsAsObservable.subscribe({
-            next: (value) => {
-                this.toasts = value;
-            },
-        }));
-    }
-    ngOnDestroy() {
-        this.subscriptions.unsubscribe();
-    }
-    getDefaultTitle(toast) {
-        switch (toast.type) {
-            case ToastType.ERROR:
-                return 'Irgendetwas ist schiefgelaufen';
-            case ToastType.INFO:
-                return 'Info';
-            case ToastType.WARNING:
-                return 'Achtung';
-            case ToastType.SUCCESS:
-                return 'Erfolgreich';
-        }
-    }
-    getDefaultDescription(toast) {
-        switch (toast.type) {
-            case ToastType.ERROR:
-                return 'Sollte das Problem länger bestehen bleiben, dann wenden Sie sich bitte\n' + '        an den Support.';
-            case ToastType.INFO:
-                return 'Info';
-            case ToastType.WARNING:
-                return 'Warning';
-            case ToastType.SUCCESS:
-                return 'Die Änderungen wurden erfolgreich gespeichert.';
-        }
-    }
-    reload() {
-        location.reload();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ToastComponent, deps: [{ token: i1.ToastService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: ToastComponent, isStandalone: true, selector: "base-toast", inputs: { position: "position" }, ngImport: i0, template: "<div\n  class=\"toast-container position-fixed\"\n  [ngClass]=\"position\"\n  [@toastAnimation]=\"{ value: toasts.length, params: { x: position.includes('left') ? '-100%' : '100%' } }\"\n  >\n  @for (toast of toasts; track toast) {\n    <div\n      class=\"toast show\"\n      role=\"alert\"\n      aria-live=\"assertive\"\n      aria-atomic=\"true\"\n      [ngClass]=\"toast.type\"\n      >\n      <div class=\"toast-header\">\n        <strong class=\"me-auto\">{{ toast?.title ?? getDefaultTitle(toast) }}</strong>\n        <button type=\"button\" class=\"btn-close btn-close-white\" data-bs-dismiss=\"toast\" aria-label=\"Close\"></button>\n      </div>\n      <div class=\"toast-body\">\n        {{ toast?.description ?? getDefaultDescription(toast) }}\n        @if (toast?.errorCode) {\n          <div class=\"mt-2\">\n            <code>ERROR: {{ toast.errorCode }}</code>\n          </div>\n        }\n        @if (toast.type === ToastType.ERROR) {\n          <div class=\"mt-2\">\n            <a class=\"color-secondary\" href=\"#\" (click)=\"reload()\">Seite neu laden</a>\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{--base-toast-z-index: 999}.toast-container{padding:10px;z-index:var(--base-toast-z-index)}.bottom-right{bottom:0;right:0}.top-right{top:0;right:0}.bottom-left{bottom:0;left:0}.top-left{top:0;left:0}.toast{border-radius:0;border:0}.toast a{text-decoration:none;font-weight:600}.toast .toast-header{border-radius:0}.error .toast-header{background-color:var(--bs-danger);color:var(--bs-white)}.warning .toast-header{background-color:var(--bs-warning);color:var(--bs-white)}.info .toast-header{background-color:var(--bs-info);color:var(--bs-white)}.success .toast-header{background-color:var(--bs-success);color:var(--bs-white)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [toastAnimation] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ToastComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'base-toast', animations: [toastAnimation], standalone: true, imports: [NgClass], template: "<div\n  class=\"toast-container position-fixed\"\n  [ngClass]=\"position\"\n  [@toastAnimation]=\"{ value: toasts.length, params: { x: position.includes('left') ? '-100%' : '100%' } }\"\n  >\n  @for (toast of toasts; track toast) {\n    <div\n      class=\"toast show\"\n      role=\"alert\"\n      aria-live=\"assertive\"\n      aria-atomic=\"true\"\n      [ngClass]=\"toast.type\"\n      >\n      <div class=\"toast-header\">\n        <strong class=\"me-auto\">{{ toast?.title ?? getDefaultTitle(toast) }}</strong>\n        <button type=\"button\" class=\"btn-close btn-close-white\" data-bs-dismiss=\"toast\" aria-label=\"Close\"></button>\n      </div>\n      <div class=\"toast-body\">\n        {{ toast?.description ?? getDefaultDescription(toast) }}\n        @if (toast?.errorCode) {\n          <div class=\"mt-2\">\n            <code>ERROR: {{ toast.errorCode }}</code>\n          </div>\n        }\n        @if (toast.type === ToastType.ERROR) {\n          <div class=\"mt-2\">\n            <a class=\"color-secondary\" href=\"#\" (click)=\"reload()\">Seite neu laden</a>\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{--base-toast-z-index: 999}.toast-container{padding:10px;z-index:var(--base-toast-z-index)}.bottom-right{bottom:0;right:0}.top-right{top:0;right:0}.bottom-left{bottom:0;left:0}.top-left{top:0;left:0}.toast{border-radius:0;border:0}.toast a{text-decoration:none;font-weight:600}.toast .toast-header{border-radius:0}.error .toast-header{background-color:var(--bs-danger);color:var(--bs-white)}.warning .toast-header{background-color:var(--bs-warning);color:var(--bs-white)}.info .toast-header{background-color:var(--bs-info);color:var(--bs-white)}.success .toast-header{background-color:var(--bs-success);color:var(--bs-white)}\n"] }]
-        }], ctorParameters: () => [{ type: i1.ToastService }], propDecorators: { position: [{
-                type: Input
-            }] } });
-
-class LoadingBarComponent {
-    ngZone;
-    changeDetectorRef;
-    loaderService;
-    manuallyLoading = false;
-    loading = false;
-    subscription = new Subscription();
-    constructor(ngZone, changeDetectorRef, loaderService) {
-        this.ngZone = ngZone;
-        this.changeDetectorRef = changeDetectorRef;
-        this.loaderService = loaderService;
-    }
-    ngOnInit() {
-        this.ngZone.runOutsideAngular(() => {
-            this.subscription.add(this.loaderService.isLoading.subscribe((value) => {
-                this.loading = value;
-                this.changeDetectorRef.detectChanges();
-            }));
-        });
-    }
-    ngOnDestroy() {
-        this.subscription.unsubscribe();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: LoadingBarComponent, deps: [{ token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i1.LoaderService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: LoadingBarComponent, selector: "base-loading-bar", inputs: { manuallyLoading: "manuallyLoading" }, ngImport: i0, template: "@if (loading || manuallyLoading) {\n  <div class=\"slider\">\n    <div class=\"line\"></div>\n    <div class=\"subline inc\"></div>\n    <div class=\"subline dec\"></div>\n  </div>\n}\n", styles: [":host{--base-loading-bar-color: #f28c18;--base-loading-bar-height: 5px;--base-loading-bar-z-index: 999999999}.slider{position:fixed;left:0;right:0;height:var(--base-loading-bar-height);overflow-x:hidden;z-index:var(--base-loading-bar-z-index);background-color:#fff}.line{position:absolute;opacity:.6;background:var(--base-loading-bar-color);width:150%;height:var(--base-loading-bar-height)}.subline{position:absolute;background:var(--base-loading-bar-color);height:var(--base-loading-bar-height)}.inc{animation:increase 2s infinite}.dec{animation:decrease 2s .5s infinite}@keyframes increase{0%{left:-5%;width:5%}to{left:130%;width:100%}}@keyframes decrease{0%{left:-80%;width:80%}to{left:110%;width:10%}}\n"] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: LoadingBarComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'base-loading-bar', template: "@if (loading || manuallyLoading) {\n  <div class=\"slider\">\n    <div class=\"line\"></div>\n    <div class=\"subline inc\"></div>\n    <div class=\"subline dec\"></div>\n  </div>\n}\n", styles: [":host{--base-loading-bar-color: #f28c18;--base-loading-bar-height: 5px;--base-loading-bar-z-index: 999999999}.slider{position:fixed;left:0;right:0;height:var(--base-loading-bar-height);overflow-x:hidden;z-index:var(--base-loading-bar-z-index);background-color:#fff}.line{position:absolute;opacity:.6;background:var(--base-loading-bar-color);width:150%;height:var(--base-loading-bar-height)}.subline{position:absolute;background:var(--base-loading-bar-color);height:var(--base-loading-bar-height)}.inc{animation:increase 2s infinite}.dec{animation:decrease 2s .5s infinite}@keyframes increase{0%{left:-5%;width:5%}to{left:130%;width:100%}}@keyframes decrease{0%{left:-80%;width:80%}to{left:110%;width:10%}}\n"] }]
-        }], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i1.LoaderService }], propDecorators: { manuallyLoading: [{
-                type: Input
-            }] } });
-
-class SkeletonLoaderComponent {
-    type;
-    count = 1;
-    size = 18;
-    convertToArray(value) {
-        if (!value) {
-            return [];
-        }
-        const res = [];
-        for (let i = 0; i < value; i++) {
-            res.push(i);
-        }
-        return res;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: SkeletonLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: SkeletonLoaderComponent, isStandalone: true, selector: "base-skeleton-loader", inputs: { type: "type", count: "count", size: "size" }, ngImport: i0, template: "@if (type) {\n  @switch (type) {\n    @case ('LINE') {\n      <div>\n        <div class=\"line-loader-wrapper\">\n          @for (key of convertToArray(count); track key) {\n            <div class=\"line-loader\"></div>\n          }\n        </div>\n      </div>\n    }\n    @case ('RECTANGLE') {\n      <div>\n        <div class=\"line-rectangle\" [ngStyle]=\"{ height: size + 'px' }\"></div>\n      </div>\n    }\n    @case ('AVATAR') {\n      <div>\n        <div class=\"line-avatar\" [ngStyle]=\"{ height: size + 'px', width: size + 'px' }\"></div>\n      </div>\n    }\n  }\n}\n", styles: ["@keyframes shine{to{background-position-x:-200%}}.line-loader-wrapper>:not(:first-of-type){margin-top:10px}.line-loader-wrapper .line-loader{background:linear-gradient(110deg,#ececec 8%,#f5f5f5 18%,#ececec 33%);background-size:200% 100%;animation:1.5s shine linear infinite;height:18px;border-radius:5px}.line-rectangle{background:linear-gradient(110deg,#ececec 8%,#f5f5f5 18%,#ececec 33%);background-size:200% 100%;animation:1.5s shine linear infinite;border-radius:5px}.line-avatar{background:linear-gradient(110deg,#ececec 8%,#f5f5f5 18%,#ececec 33%);background-size:200% 100%;animation:1.5s shine linear infinite;border-radius:50%}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: SkeletonLoaderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'base-skeleton-loader', standalone: true, imports: [
-                        NgStyle
-                    ], template: "@if (type) {\n  @switch (type) {\n    @case ('LINE') {\n      <div>\n        <div class=\"line-loader-wrapper\">\n          @for (key of convertToArray(count); track key) {\n            <div class=\"line-loader\"></div>\n          }\n        </div>\n      </div>\n    }\n    @case ('RECTANGLE') {\n      <div>\n        <div class=\"line-rectangle\" [ngStyle]=\"{ height: size + 'px' }\"></div>\n      </div>\n    }\n    @case ('AVATAR') {\n      <div>\n        <div class=\"line-avatar\" [ngStyle]=\"{ height: size + 'px', width: size + 'px' }\"></div>\n      </div>\n    }\n  }\n}\n", styles: ["@keyframes shine{to{background-position-x:-200%}}.line-loader-wrapper>:not(:first-of-type){margin-top:10px}.line-loader-wrapper .line-loader{background:linear-gradient(110deg,#ececec 8%,#f5f5f5 18%,#ececec 33%);background-size:200% 100%;animation:1.5s shine linear infinite;height:18px;border-radius:5px}.line-rectangle{background:linear-gradient(110deg,#ececec 8%,#f5f5f5 18%,#ececec 33%);background-size:200% 100%;animation:1.5s shine linear infinite;border-radius:5px}.line-avatar{background:linear-gradient(110deg,#ececec 8%,#f5f5f5 18%,#ececec 33%);background-size:200% 100%;animation:1.5s shine linear infinite;border-radius:50%}\n"] }]
-        }], propDecorators: { type: [{
-                type: Input
-            }], count: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }] } });
-
-class BreadcrumbComponent {
-    breadcrumbService;
-    breadcrumbs$;
-    constructor(breadcrumbService) {
-        this.breadcrumbService = breadcrumbService;
-        this.breadcrumbs$ = breadcrumbService.breadcrumbsObservable;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: BreadcrumbComponent, deps: [{ token: i1.BreadcrumbService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: BreadcrumbComponent, isStandalone: true, selector: "base-breadcrumb", ngImport: i0, template: "<ul class=\"pt-3\">\n  @for (breadcrumb of breadcrumbs$ | async; track breadcrumb) {\n    <li>\n      <a [routerLink]=\"breadcrumb.url\">{{ breadcrumb.label }}</a>\n    </li>\n  }\n</ul>\n", styles: ["ul{list-style:none;margin:0;padding:0}ul li{display:inline}ul li:before{content:\"|\";margin:0 6px}ul li:first-child:before{content:\"\";margin:0}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: BreadcrumbComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'base-breadcrumb', standalone: true, imports: [
-                        RouterLink,
-                        AsyncPipe
-                    ], template: "<ul class=\"pt-3\">\n  @for (breadcrumb of breadcrumbs$ | async; track breadcrumb) {\n    <li>\n      <a [routerLink]=\"breadcrumb.url\">{{ breadcrumb.label }}</a>\n    </li>\n  }\n</ul>\n", styles: ["ul{list-style:none;margin:0;padding:0}ul li{display:inline}ul li:before{content:\"|\";margin:0 6px}ul li:first-child:before{content:\"\";margin:0}\n"] }]
-        }], ctorParameters: () => [{ type: i1.BreadcrumbService }] });
-
-class FabButtonComponent {
-    fabIcon = 'bi-list';
-    buttons;
-    toggle = false;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: FabButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: FabButtonComponent, isStandalone: true, selector: "base-fab-button", inputs: { fabIcon: "fabIcon", buttons: "buttons" }, ngImport: i0, template: "<div class=\"fab-container\" [ngClass]=\"{ 'fab-container-active': toggle }\">\n  <div class=\"fab shadow\">\n    <div class=\"fab-content\" (click)=\"toggle = !toggle\">\n      @if (toggle) {\n        <i class=\"bi bi-x-lg\"></i>\n      }\n      @if (!toggle) {\n        <i class=\"bi\" [ngClass]=\"fabIcon\"></i>\n      }\n    </div>\n  </div>\n  @for (button of buttons; track button) {\n    <div\n      class=\"sub-button shadow\"\n      (click)=\"button.event.emit(true); toggle = !toggle\"\n      [ngStyle]=\"{ backgroundColor: button.color }\"\n      >\n      <a [routerLink]=\"button.routerLink\">\n        <i class=\"bi\" [ngClass]=\"button.icon\"></i>\n      </a>\n    </div>\n  }\n</div>\n", styles: [".fab-container{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;-webkit-user-select:none;user-select:none;position:absolute;bottom:10px;right:10px}.fab-container-active{height:100%}.fab-container-active .sub-button:nth-child(2){transform:translateY(-80px)}.fab-container-active .sub-button:nth-child(3){transform:translateY(-140px)}.fab-container-active .sub-button:nth-child(4){transform:translateY(-200px)}.fab-container-active .sub-button:nth-child(5){transform:translateY(-260px)}.fab-container-active .sub-button:nth-child(6){transform:translateY(-320px)}.fab-container .fab{position:relative;height:60px;width:60px;background-color:var(--bs-primary);border-radius:50%;z-index:2}.fab-container .fab:before{content:\" \";position:absolute;bottom:0;right:0;height:30px;width:30px;background-color:inherit;border-radius:0 0 10px;z-index:-1}.fab-container .fab .fab-content{display:flex;align-items:center;justify-content:center;height:inherit;width:inherit;border-radius:50%}.fab-container .fab .fab-content .bi{color:#fff;font-size:32px}.fab-container .sub-button{position:absolute;display:flex;align-items:center;justify-content:center;bottom:10px;right:10px;height:40px;width:40px;background-color:var(--bs-primary);border-radius:50%;transition:all .3s ease}.fab-container .sub-button:hover{cursor:pointer}.fab-container .sub-button .bi{color:#fff;padding-top:6px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: FabButtonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'base-fab-button', standalone: true, imports: [
-                        NgClass,
-                        NgStyle,
-                        RouterLink
-                    ], template: "<div class=\"fab-container\" [ngClass]=\"{ 'fab-container-active': toggle }\">\n  <div class=\"fab shadow\">\n    <div class=\"fab-content\" (click)=\"toggle = !toggle\">\n      @if (toggle) {\n        <i class=\"bi bi-x-lg\"></i>\n      }\n      @if (!toggle) {\n        <i class=\"bi\" [ngClass]=\"fabIcon\"></i>\n      }\n    </div>\n  </div>\n  @for (button of buttons; track button) {\n    <div\n      class=\"sub-button shadow\"\n      (click)=\"button.event.emit(true); toggle = !toggle\"\n      [ngStyle]=\"{ backgroundColor: button.color }\"\n      >\n      <a [routerLink]=\"button.routerLink\">\n        <i class=\"bi\" [ngClass]=\"button.icon\"></i>\n      </a>\n    </div>\n  }\n</div>\n", styles: [".fab-container{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;-webkit-user-select:none;user-select:none;position:absolute;bottom:10px;right:10px}.fab-container-active{height:100%}.fab-container-active .sub-button:nth-child(2){transform:translateY(-80px)}.fab-container-active .sub-button:nth-child(3){transform:translateY(-140px)}.fab-container-active .sub-button:nth-child(4){transform:translateY(-200px)}.fab-container-active .sub-button:nth-child(5){transform:translateY(-260px)}.fab-container-active .sub-button:nth-child(6){transform:translateY(-320px)}.fab-container .fab{position:relative;height:60px;width:60px;background-color:var(--bs-primary);border-radius:50%;z-index:2}.fab-container .fab:before{content:\" \";position:absolute;bottom:0;right:0;height:30px;width:30px;background-color:inherit;border-radius:0 0 10px;z-index:-1}.fab-container .fab .fab-content{display:flex;align-items:center;justify-content:center;height:inherit;width:inherit;border-radius:50%}.fab-container .fab .fab-content .bi{color:#fff;font-size:32px}.fab-container .sub-button{position:absolute;display:flex;align-items:center;justify-content:center;bottom:10px;right:10px;height:40px;width:40px;background-color:var(--bs-primary);border-radius:50%;transition:all .3s ease}.fab-container .sub-button:hover{cursor:pointer}.fab-container .sub-button .bi{color:#fff;padding-top:6px}\n"] }]
-        }], propDecorators: { fabIcon: [{
-                type: Input
-            }], buttons: [{
-                type: Input
-            }] } });
-
-class UploadImageComponent {
-    httpClient;
-    authService;
-    fileService;
-    toastService;
-    fileInput;
-    id;
-    name;
-    infoText;
-    label;
-    supportText = 'Supports: JPEG, JPG, PNG';
-    required = false;
-    defaultDragText = 'Drag & Drop';
-    defaultReleaseText = 'Release to Upload';
-    preButtonText = 'or';
-    buttonText = 'browse';
-    validExtensions = ['image/jpeg', 'image/jpg', 'image/png', 'image/webp'];
-    control;
-    url = 'http://localhost:3000';
-    uploadPath = '/files/upload';
-    deletePath = '/files/';
-    path = '/files/';
-    compressOptions;
-    maxSize;
-    uploadDirectly = false;
-    croppingImage = false;
-    croppingOptions;
-    objectPath;
-    mode = 'file';
-    imageUploaded = new EventEmitter();
-    imageDeleted = new EventEmitter();
-    fileChanged = new EventEmitter();
-    dragActive = false;
-    dragText = 'Drag & Drop';
-    selectedFile;
-    croppedFile;
-    fileUrl;
-    loading = false;
-    croppedInProgress = false;
-    fileEvent;
-    cOptions;
-    constructor(httpClient, authService, fileService, toastService) {
-        this.httpClient = httpClient;
-        this.authService = authService;
-        this.fileService = fileService;
-        this.toastService = toastService;
-    }
-    ngOnInit() {
-        // Set default options for cropping
-        this.cOptions = {
-            maintainAspectRatio: true,
-            aspectRatio: 4 / 3,
-            onlyScaleDown: false,
-            imageQuality: 92,
-            autoCrop: true,
-            alignImage: 'center',
-            format: 'jpeg',
-            ...this.croppingOptions,
-        };
-    }
-    /**
-     * The dragOver function is called when the user drags a file over the dropzone. It prevents the default action of the
-     * event, and sets the dragText to 'Release to Upload' and the dragActive to true
-     *
-     * @param event - any - This is the event that is triggered when the user drags a file over the dropzone.
-     */
-    dragOver(event) {
-        event.preventDefault();
-        this.dragText = this.defaultReleaseText;
-        this.dragActive = true;
-    }
-    /**
-     * When the user drags a file over the drop zone, the dragActive variable is set to true, which will change the color of
-     * the drop zone to green
-     *
-     * @param event - The event object that is passed to the dragLeave event.
-     */
-    dragLeave(event) {
-        this.dragText = this.defaultDragText;
-        this.dragActive = false;
-    }
-    /**
-     * The function takes an event as a parameter, prevents the default action of the event, sets the URL of the image to the
-     * file that was dragged and dropped, sets the text of the drag and drop area to the default text, and sets the
-     * dragActive variable to false
-     *
-     * @param event - any - This is the event that is triggered when the user drags and drops a file.
-     */
-    drop(event) {
-        event.preventDefault();
-        this.fileInput.nativeElement.files = event.dataTransfer.files;
-        const e = new Event('change');
-        this.fileInput.nativeElement.dispatchEvent(e);
-        this.dragText = 'Drag & Drop';
-        this.dragActive = false;
-    }
-    /**
-     * It takes a file as an argument, checks if the file type is valid, and if it is, it creates a new FileReader object,
-     * sets the onload function to set the fileUrl to the result of the fileReader, sets the selectedFile to the file, and
-     * calls the upload function
-     *
-     * @param file - any - this is the file that is selected by the user.
-     */
-    setUrl(file) {
-        const fileReader = new FileReader();
-        fileReader.onload = (result) => {
-            this.loading = true;
-            this.fileUrl = fileReader.result;
-            this.selectedFile = file;
-            this.upload();
-        };
-        fileReader.readAsDataURL(file);
-    }
-    checkFile(file) {
-        if (this.maxSize && file.size > this.maxSize) {
-            this.toastService.show({
-                id: 'image-invalid-size',
-                type: ToastType.ERROR,
-                title: 'Fehlgeschlagen',
-                description: 'Die Datei ist zu groß. Die Datei darf nicht größer als ' +
-                    (this.maxSize / (1024 * 1024)).toFixed(2) +
-                    'MB sein.',
-            }, 3500);
-            return false;
-        }
-        else {
-            if (this.validExtensions.includes(file?.type)) {
-                return true;
-            }
-            else {
-                this.toastService.show({
-                    id: 'image-invalid-format',
-                    type: ToastType.ERROR,
-                    title: 'Fehlgeschlagen',
-                    description: 'Das Format der Datei wird nicht unterstützt.',
-                }, 3500);
-                return false;
-            }
-        }
-    }
-    /**
-     * The function takes an event as an argument, and then sets the url of the file to the first file in the event's
-     * target's files array
-     *
-     * @param event - any - The event that is triggered when the user selects a file.
-     */
-    selectFile(event) {
-        if (!this.checkFile(event.target.files[0])) {
-            return;
-        }
-        if (this.croppingImage) {
-            this.croppedInProgress = true;
-            this.fileEvent = event;
-        }
-        else {
-            this.setUrl(event.target.files[0]);
-        }
-    }
-    /**
-     * We create a new FormData object, append the selected file to it, and then send it to the server
-     */
-    async upload() {
-        // Prepare file data
-        let file = this.selectedFile;
-        if (this.compressOptions) {
-            file = await this.fileService.compress(file, this.compressOptions);
-        }
-        const fileData = {
-            field: this.objectPath ? this.objectPath + '.' + this.id : this.id,
-            file,
-            base64: await this.getBase64(file),
-        };
-        // Emit file data
-        this.fileChanged.emit(fileData);
-        // Set control value and upload directly if required
-        if (this.uploadDirectly) {
-            const result = await this.fileService.upload(this.url, this.uploadPath, this.selectedFile);
-            if (result?.id) {
-                this.control.setValue(result.id);
-                this.imageUploaded.emit(result.id);
-            }
-        }
-        else {
-            this.control.setValue(this.mode === 'base64' ? fileData.base64 : this.selectedFile);
-        }
-        // Final processes
-        this.control.markAsTouched();
-        this.loading = false;
-    }
-    /**
-     * It deletes the file from the server and sets the selectedFile and fileUrl to null
-     *
-     * @param [id] - The id of the file to delete.
-     */
-    async deleteFile(id) {
-        if (!this.uploadDirectly) {
-            this.selectedFile = null;
-            this.fileUrl = null;
-            this.control.setValue('');
-            this.control.markAsTouched();
-            this.fileChanged.emit({
-                field: this.objectPath ? this.objectPath + '.' + this.id : this.id,
-                file: null,
-                base64: null,
-            });
-            return;
-        }
-        this.loading = true;
-        this.selectedFile = null;
-        this.fileUrl = null;
-        if (id) {
-            const result = await this.fileService.delete(this.url, this.deletePath, id);
-            if (result) {
-                this.selectedFile = null;
-                this.fileUrl = null;
-                this.control.setValue('');
-                this.imageDeleted.emit();
-                this.loading = false;
-            }
-        }
-    }
-    /**
-     * Convert a file into a BASE64 encoded string
-     */
-    getBase64(file) {
-        return new Promise((resolve, reject) => {
-            if (!file) {
-                return resolve(null);
-            }
-            const reader = new FileReader();
-            reader.readAsDataURL(file);
-            reader.onload = () => {
-                if (!reader.result) {
-                    return reject(new Error('Conversion failed'));
-                }
-                resolve(reader.result.toString());
-            };
-            reader.onerror = (error) => {
-                reject(error);
-            };
-        });
-    }
-    base64ToFile(base64, fileName, fileType) {
-        return new Promise((resolve, reject) => {
-            fetch(base64)
-                .then((res) => res.blob())
-                .then((blob) => {
-                resolve(new File([blob], fileName, { type: fileType }));
-            }, (err) => {
-                reject(err);
-            });
-        });
-    }
-    async imageCropped($event, fileEvent) {
-        const file = fileEvent.target.files[0];
-        this.croppedFile = await this.base64ToFile($event.base64, file.name, file.type);
-    }
-    finishedCropping() {
-        this.fileEvent = null;
-        this.setUrl(this.croppedFile);
-        this.croppedInProgress = false;
-        this.croppedFile = null;
-    }
-    loadImageFailed() {
-        this.toastService.show({
-            id: 'image-invalid-cropped',
-            type: ToastType.ERROR,
-            title: 'Fehlgeschlagen',
-            description: 'Es ist ein Fehler aufgetreten. Bitte probieren Sie es später erneut oder wenden Sie sich an den Support.',
-        }, 3500);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: UploadImageComponent, deps: [{ token: i1$2.HttpClient }, { token: i1.AuthService }, { token: i1.FileService }, { token: i1.ToastService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: UploadImageComponent, isStandalone: true, selector: "base-upload-image", inputs: { id: "id", name: "name", infoText: "infoText", label: "label", supportText: "supportText", required: "required", defaultDragText: "defaultDragText", defaultReleaseText: "defaultReleaseText", preButtonText: "preButtonText", buttonText: "buttonText", validExtensions: "validExtensions", control: "control", url: "url", uploadPath: "uploadPath", deletePath: "deletePath", path: "path", compressOptions: "compressOptions", maxSize: "maxSize", uploadDirectly: "uploadDirectly", croppingImage: "croppingImage", croppingOptions: "croppingOptions", objectPath: "objectPath", mode: "mode" }, outputs: { imageUploaded: "imageUploaded", imageDeleted: "imageDeleted", fileChanged: "fileChanged" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"form-group mt-3\" [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\">\n  <div class=\"d-flex justify-content-between align-items-center\">\n    @if (label) {\n      <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\">{{ label }}</label>\n    }\n    @if (infoText) {\n      <i class=\"bi bi-info-circle\" [ngbTooltip]=\"infoText\" placement=\"start\"></i>\n    }\n  </div>\n\n  <div\n    [id]=\"objectPath ? objectPath + '.' + id : id\"\n    class=\"drag-area\"\n    (dragover)=\"dragOver($event)\"\n    (dragleave)=\"dragLeave($event)\"\n    (drop)=\"drop($event)\"\n    [ngClass]=\"{ active: dragActive, pointer: !loading, 'is-invalid': control?.invalid && control?.touched }\"\n    (click)=\"!croppedInProgress && !loading && fileInput.click()\"\n    >\n    @if (loading) {\n      <div class=\"d-flex justify-content-center\">\n        <div class=\"spinner-border text-primary\" role=\"status\">\n          <span class=\"visually-hidden\">Loading...</span>\n        </div>\n      </div>\n    }\n\n    @if (selectedFile && !fileEvent && !croppedInProgress && !loading) {\n      @if (selectedFile) {\n        <img [src]=\"fileUrl\" />\n      }\n      <button class=\"btn btn-danger\" type=\"button\" (click)=\"deleteFile()\" baseStopPropagation>L\u00F6schen</button>\n    }\n\n    @if (control?.value && !fileEvent && !selectedFile && !loading && !croppedInProgress) {\n      <img [src]=\"control?.value.startsWith('data:') ? control?.value : url + path + control?.value\" />\n      <button class=\"btn btn-danger\" type=\"button\" (click)=\"deleteFile(control?.value)\" baseStopPropagation>\n        L\u00F6schen\n      </button>\n    }\n\n    @if (!selectedFile && !control?.value && !loading && !fileEvent) {\n      <div class=\"icon\">\n        <i class=\"bi bi-images\"></i>\n      </div>\n      <span class=\"header\">{{ dragText }}</span>\n      <span class=\"header\"\n        >{{ preButtonText }}\n        <span class=\"button\" (click)=\"fileInput.click()\" baseStopPropagation>{{ buttonText }}</span></span\n        >\n        <span class=\"support\" [innerText]=\"supportText\"></span>\n      }\n\n      <input type=\"file\" (change)=\"selectFile($event)\" [attr.accept]=\"validExtensions?.join(',')\" hidden #fileInput />\n\n      @if (croppedInProgress && fileEvent) {\n        <image-cropper\n          [imageChangedEvent]=\"fileEvent\"\n          [maintainAspectRatio]=\"cOptions.maintainAspectRatio\"\n          [aspectRatio]=\"cOptions.aspectRatio\"\n          [alignImage]=\"cOptions.alignImage\"\n          [resizeToWidth]=\"cOptions.resizeToWidth\"\n          [resizeToHeight]=\"cOptions.resizeToHeight\"\n          [autoCrop]=\"cOptions.autoCrop\"\n          [imageQuality]=\"cOptions.imageQuality\"\n          [onlyScaleDown]=\"cOptions.onlyScaleDown\"\n          [format]=\"cOptions.format\"\n          (imageCropped)=\"imageCropped($event, fileEvent)\"\n          (loadImageFailed)=\"loadImageFailed()\"\n        ></image-cropper>\n        <button class=\"btn btn-primary mt-2\" type=\"button\" (click)=\"finishedCropping()\" baseStopPropagation>\n          Zuschneiden\n        </button>\n      }\n    </div>\n\n    @if (control?.invalid && (control?.dirty || control?.touched)) {\n      <div class=\"invalid-feedback m-2\">\n        @if (control?.errors?.['required']) {\n          <div>Dieses Feld ist ein Pflichtfeld.</div>\n        }\n      </div>\n    }\n  </div>\n", styles: [":host{--base-upload-image-area-bg: #ffffff;--base-upload-image-area-border-color: #e1e1e1;--base-upload-image-area-height: 400px}.is-invalid .drag-area{border-color:var(--bs-danger)}.is-invalid .invalid-feedback{display:block}.required:after{content:\" *\"}.drag-area{height:var(--base-upload-image-area-height);border:2px dashed var(--base-upload-image-area-border-color);background-color:var(--base-upload-image-area-bg);display:flex;flex-direction:column;justify-content:center;align-items:center;margin:10px auto;padding:20px}.drag-area img{height:100%;max-height:280px;max-width:100%;object-fit:scale-down}.drag-area .btn-danger{margin-top:auto}.drag-area .icon{font-size:50px;color:var(--bs-primary)}.drag-area .header{font-size:20px;font-weight:500}.drag-area .support{font-size:12px;color:#e1e1e1;margin:10px 0 15px}.drag-area .button{font-size:20px;font-weight:500;color:var(--bs-primary);cursor:pointer}.active{border:2px solid var(--bs-primary)}.pointer{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "cropperFrameAriaLabel", "output", "format", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "autoCrop", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "cropper", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange"] }, { kind: "directive", type: StopPropagationDirective, selector: "[baseStopPropagation]" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: UploadImageComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'base-upload-image', standalone: true, imports: [
-                        NgClass,
-                        ImageCropperComponent,
-                        StopPropagationDirective
-                    ], template: "<div class=\"form-group mt-3\" [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\">\n  <div class=\"d-flex justify-content-between align-items-center\">\n    @if (label) {\n      <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\">{{ label }}</label>\n    }\n    @if (infoText) {\n      <i class=\"bi bi-info-circle\" [ngbTooltip]=\"infoText\" placement=\"start\"></i>\n    }\n  </div>\n\n  <div\n    [id]=\"objectPath ? objectPath + '.' + id : id\"\n    class=\"drag-area\"\n    (dragover)=\"dragOver($event)\"\n    (dragleave)=\"dragLeave($event)\"\n    (drop)=\"drop($event)\"\n    [ngClass]=\"{ active: dragActive, pointer: !loading, 'is-invalid': control?.invalid && control?.touched }\"\n    (click)=\"!croppedInProgress && !loading && fileInput.click()\"\n    >\n    @if (loading) {\n      <div class=\"d-flex justify-content-center\">\n        <div class=\"spinner-border text-primary\" role=\"status\">\n          <span class=\"visually-hidden\">Loading...</span>\n        </div>\n      </div>\n    }\n\n    @if (selectedFile && !fileEvent && !croppedInProgress && !loading) {\n      @if (selectedFile) {\n        <img [src]=\"fileUrl\" />\n      }\n      <button class=\"btn btn-danger\" type=\"button\" (click)=\"deleteFile()\" baseStopPropagation>L\u00F6schen</button>\n    }\n\n    @if (control?.value && !fileEvent && !selectedFile && !loading && !croppedInProgress) {\n      <img [src]=\"control?.value.startsWith('data:') ? control?.value : url + path + control?.value\" />\n      <button class=\"btn btn-danger\" type=\"button\" (click)=\"deleteFile(control?.value)\" baseStopPropagation>\n        L\u00F6schen\n      </button>\n    }\n\n    @if (!selectedFile && !control?.value && !loading && !fileEvent) {\n      <div class=\"icon\">\n        <i class=\"bi bi-images\"></i>\n      </div>\n      <span class=\"header\">{{ dragText }}</span>\n      <span class=\"header\"\n        >{{ preButtonText }}\n        <span class=\"button\" (click)=\"fileInput.click()\" baseStopPropagation>{{ buttonText }}</span></span\n        >\n        <span class=\"support\" [innerText]=\"supportText\"></span>\n      }\n\n      <input type=\"file\" (change)=\"selectFile($event)\" [attr.accept]=\"validExtensions?.join(',')\" hidden #fileInput />\n\n      @if (croppedInProgress && fileEvent) {\n        <image-cropper\n          [imageChangedEvent]=\"fileEvent\"\n          [maintainAspectRatio]=\"cOptions.maintainAspectRatio\"\n          [aspectRatio]=\"cOptions.aspectRatio\"\n          [alignImage]=\"cOptions.alignImage\"\n          [resizeToWidth]=\"cOptions.resizeToWidth\"\n          [resizeToHeight]=\"cOptions.resizeToHeight\"\n          [autoCrop]=\"cOptions.autoCrop\"\n          [imageQuality]=\"cOptions.imageQuality\"\n          [onlyScaleDown]=\"cOptions.onlyScaleDown\"\n          [format]=\"cOptions.format\"\n          (imageCropped)=\"imageCropped($event, fileEvent)\"\n          (loadImageFailed)=\"loadImageFailed()\"\n        ></image-cropper>\n        <button class=\"btn btn-primary mt-2\" type=\"button\" (click)=\"finishedCropping()\" baseStopPropagation>\n          Zuschneiden\n        </button>\n      }\n    </div>\n\n    @if (control?.invalid && (control?.dirty || control?.touched)) {\n      <div class=\"invalid-feedback m-2\">\n        @if (control?.errors?.['required']) {\n          <div>Dieses Feld ist ein Pflichtfeld.</div>\n        }\n      </div>\n    }\n  </div>\n", styles: [":host{--base-upload-image-area-bg: #ffffff;--base-upload-image-area-border-color: #e1e1e1;--base-upload-image-area-height: 400px}.is-invalid .drag-area{border-color:var(--bs-danger)}.is-invalid .invalid-feedback{display:block}.required:after{content:\" *\"}.drag-area{height:var(--base-upload-image-area-height);border:2px dashed var(--base-upload-image-area-border-color);background-color:var(--base-upload-image-area-bg);display:flex;flex-direction:column;justify-content:center;align-items:center;margin:10px auto;padding:20px}.drag-area img{height:100%;max-height:280px;max-width:100%;object-fit:scale-down}.drag-area .btn-danger{margin-top:auto}.drag-area .icon{font-size:50px;color:var(--bs-primary)}.drag-area .header{font-size:20px;font-weight:500}.drag-area .support{font-size:12px;color:#e1e1e1;margin:10px 0 15px}.drag-area .button{font-size:20px;font-weight:500;color:var(--bs-primary);cursor:pointer}.active{border:2px solid var(--bs-primary)}.pointer{cursor:pointer}\n"] }]
-        }], ctorParameters: () => [{ type: i1$2.HttpClient }, { type: i1.AuthService }, { type: i1.FileService }, { type: i1.ToastService }], propDecorators: { fileInput: [{
-                type: ViewChild,
-                args: ['fileInput']
-            }], id: [{
-                type: Input
-            }], name: [{
-                type: Input
-            }], infoText: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], supportText: [{
-                type: Input
-            }], required: [{
-                type: Input
-            }], defaultDragText: [{
-                type: Input
-            }], defaultReleaseText: [{
-                type: Input
-            }], preButtonText: [{
-                type: Input
-            }], buttonText: [{
-                type: Input
-            }], validExtensions: [{
-                type: Input
-            }], control: [{
-                type: Input
-            }], url: [{
-                type: Input
-            }], uploadPath: [{
-                type: Input
-            }], deletePath: [{
-                type: Input
-            }], path: [{
-                type: Input
-            }], compressOptions: [{
-                type: Input
-            }], maxSize: [{
-                type: Input
-            }], uploadDirectly: [{
-                type: Input
-            }], croppingImage: [{
-                type: Input
-            }], croppingOptions: [{
-                type: Input
-            }], objectPath: [{
-                type: Input
-            }], mode: [{
-                type: Input
-            }], imageUploaded: [{
-                type: Output
-            }], imageDeleted: [{
-                type: Output
-            }], fileChanged: [{
-                type: Output
-            }] } });
-
-class RefenceInputComponent {
-    graphQLService;
-    router;
-    id;
-    name;
-    infoText;
-    label;
-    isList = false;
-    search = true;
-    useParamAsArg = false;
-    param;
-    placeholder = '';
-    autocomplete;
-    tabIndex;
-    control;
-    required = false;
-    method = 'find';
-    fields = ['id', 'name'];
-    valueField = 'id';
-    objectPath = '';
-    nameField = 'name';
-    creationLink = '';
-    objects = [];
-    currentValue;
-    optionsForTagInput = [];
-    selectedElement;
-    subscription = new Subscription();
-    constructor(graphQLService, router) {
-        this.graphQLService = graphQLService;
-        this.router = router;
-    }
-    async ngOnInit() {
-        this.getReferences();
-        this.subscription.add(this.control.valueChanges.subscribe(() => {
-            if (!this.currentValue) {
-                this.setValue();
-            }
-        }));
-    }
-    ngOnDestroy() {
-        this.subscription.unsubscribe();
-    }
-    /**
-     * Open creation link for new reference if enabled
-     */
-    openLink() {
-        this.router.navigate([this.creationLink]);
-    }
-    /**
-     * It gets the references from the GraphQL server and sets the value of the select
-     */
-    getReferences() {
-        const fields = [...this.fields];
-        if (Array.isArray(this.nameField)) {
-            for (const field of this.nameField) {
-                if (!fields.includes(field)) {
-                    fields.push(field);
-                }
-            }
-        }
-        else {
-            if (!fields.includes(this.nameField)) {
-                fields.push(this.nameField);
-            }
-        }
-        let args;
-        if (!this.useParamAsArg) {
-            args = { sort: [{ field: fields.includes('name') ? 'name' : fields[0], order: SortOrderEnum.ASC }] };
-        }
-        else {
-            args = {
-                id: this.param,
-                sort: [{ field: fields.includes('name') ? 'name' : fields[0], order: SortOrderEnum.ASC }],
-            };
-        }
-        this.graphQLService
-            .graphQl(this.method, {
-            fields,
-            arguments: args,
-            type: GraphQLRequestType.QUERY,
-        })
-            .subscribe(async (result) => {
-            if (result) {
-                this.objects = result;
-                this.setObjectsAsOptions();
-                if (!this.currentValue) {
-                    this.setValue();
-                }
-            }
-        });
-    }
-    /**
-     * If the current value is not valid, set the control to an invalid state
-     */
-    checkValidReference() {
-        if (!this.currentValue) {
-            this.control.markAsTouched();
-            this.control.markAsDirty();
-            this.control.setValue('');
-            this.control.setErrors(null);
-            return;
-        }
-        const foundElement = this.objects.find((e) => this.checkForNameFields(e));
-        if (!foundElement) {
-            this.control.setValue(null);
-            this.control.markAsTouched();
-            this.control.markAsDirty();
-            this.control.setErrors({ invalidReference: true });
-        }
-        else {
-            this.control.setErrors(null);
-        }
-    }
-    /**
-     * If the user presses the enter key, mark the control as touched
-     */
-    enterKey(event) {
-        this.selectedElement = event.target;
-        this.control.markAsTouched();
-    }
-    /**
-     * If the control has a value and the objects array is not empty, then find the object in the array that has the same
-     * value as the control's value and set the currentValue to the textField of that object. If the control has a value but
-     * the objects array is empty, then set the currentValue to the control's value
-     */
-    setValue() {
-        if (this.control?.value && this.objects?.length > 0) {
-            if (this.control?.value?.id) {
-                this.control.setValue(this.control.value.id);
-            }
-            const foundElement = this.objects.find((e) => e[this.valueField] === this.control.value);
-            if (foundElement) {
-                this.currentValue = this.prepareNameField(foundElement);
-            }
-        }
-    }
-    /**
-     * It sets the value of the control to the id of the selected option
-     */
-    set(id) {
-        this.control.markAsTouched();
-        this.control.markAsDirty();
-        this.control.setValue(id);
-        this.setValue();
-        this.selectedElement = null;
-    }
-    /**
-     * Filter options for drop down
-     */
-    filterOptions() {
-        return this.objects
-            ? this.objects.filter((e) => (!this.currentValue || this.checkForNameFields(e)) && !this.control?.value?.includes(e?.value))
-            : [];
-    }
-    /**
-     * It takes an array of objects and returns an array of objects with the text and value fields specified
-     */
-    setObjectsAsOptions() {
-        this.optionsForTagInput = this.objects.map((e) => {
-            return {
-                text: this.prepareNameField(e),
-                value: e[this.valueField],
-            };
-        });
-    }
-    /**
-     * Show dropdown focus
-     */
-    onFocus(event) {
-        if (event) {
-            this.selectedElement = event.target;
-        }
-        else {
-            this.checkValidReference();
-            setTimeout(() => {
-                this.selectedElement = null;
-            }, 250);
-        }
-    }
-    /**
-     * Prepare string function if name fields is an array
-     */
-    prepareNameField(object) {
-        let result;
-        if (Array.isArray(this.nameField)) {
-            for (const field of this.nameField) {
-                if (!result) {
-                    result = object[field];
-                }
-                else if (object[field]) {
-                    result = result + ' ' + object[field];
-                }
-            }
-        }
-        else {
-            result = object[this.nameField];
-        }
-        return result;
-    }
-    /**
-     * Check function if name fields is an array
-     */
-    checkForNameFields(object) {
-        if (Array.isArray(this.nameField)) {
-            let result = false;
-            for (const field of this.nameField) {
-                const check = object[field].includes(this.currentValue);
-                if (check) {
-                    result = check;
-                }
-            }
-            return result;
-        }
-        else {
-            return object[this.nameField]?.includes(this.currentValue);
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: RefenceInputComponent, deps: [{ token: i1.GraphQLService }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: RefenceInputComponent, isStandalone: true, selector: "base-refence-input", inputs: { id: "id", name: "name", infoText: "infoText", label: "label", isList: "isList", search: "search", useParamAsArg: "useParamAsArg", param: "param", placeholder: "placeholder", autocomplete: "autocomplete", tabIndex: "tabIndex", control: "control", required: "required", method: "method", fields: "fields", valueField: "valueField", objectPath: "objectPath", nameField: "nameField", creationLink: "creationLink" }, ngImport: i0, template: "@if (!isList) {\n  <div class=\"form-group mb-3\">\n    <div class=\"d-flex justify-content-between align-items-center\">\n      @if (label) {\n        <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\">{{ label }}</label>\n      }\n      @if (infoText) {\n        <i class=\"bi bi-info-circle\" [ngbTooltip]=\"infoText\" placement=\"start\"></i>\n      }\n    </div>\n    @if (search) {\n      <div class=\"position-relative\">\n        <div class=\"d-flex flex-row\">\n          <input [formControl]=\"control\" hidden />\n          <input\n            [id]=\"objectPath ? objectPath + '.' + id : id\"\n            [name]=\"name\"\n            class=\"form-control\"\n            [(ngModel)]=\"currentValue\"\n            [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n            (focus)=\"onFocus($event)\"\n            (blur)=\"onFocus()\"\n            [required]=\"required\"\n            [placeholder]=\"placeholder\"\n            [autocomplete]=\"autocomplete ?? null\"\n            [tabIndex]=\"tabIndex ?? null\"\n            (keyup)=\"enterKey($event)\"\n            />\n          @if (creationLink) {\n            <button class=\"btn btn-primary\" (click)=\"openLink()\">Erstellen</button>\n          }\n        </div>\n        @if (objects && selectedElement) {\n          <div class=\"options\">\n            @for (object of filterOptions(); track object) {\n              <div class=\"option-item\" (click)=\"set(object[valueField])\">\n                {{ prepareNameField(object) }}\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n    @if (!search) {\n      <div>\n        <div class=\"d-flex flex-row\">\n          <select\n            [id]=\"objectPath ? objectPath + '.' + id : id\"\n            [name]=\"name\"\n            class=\"form-select\"\n            [attr.aria-label]=\"placeholder\"\n            [formControl]=\"control\"\n            [required]=\"required\"\n            [tabIndex]=\"tabIndex ?? null\"\n            [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n            >\n            <option [ngValue]=\"null\" selected>{{ placeholder }}</option>\n            @for (object of objects; track object) {\n              <option [ngValue]=\"object[valueField]\">\n                {{ prepareNameField(object) }}\n              </option>\n            }\n          </select>\n          @if (creationLink) {\n            <button class=\"btn btn-primary\" (click)=\"openLink()\">Erstellen</button>\n          }\n        </div>\n      </div>\n    }\n    @if (control?.invalid && (control?.dirty || control?.touched) && !selectedElement) {\n      <div\n        class=\"d-block invalid-feedback m-2\"\n        >\n        @if (control?.errors?.['required']) {\n          <div>Dieses Feld ist ein Pflichtfeld.</div>\n        }\n        @if (control?.errors?.['invalidReference'] && currentValue) {\n          <div>\n            {{ currentValue }} ist kein g\u00FCltiger Wert f\u00FCr {{ label }}.\n          </div>\n        }\n        @if (control?.errors?.['minlength']) {\n          <div>\n            Die Mindestl\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n            {{control.errors?.['minlength']?.requiredLength}} Zeichen.\n          </div>\n        }\n        @if (control?.errors?.['maxlength']) {\n          <div>\n            Die maximale L\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n            {{control.errors?.['maxlength']?.requiredLength}} Zeichen.\n          </div>\n        }\n        @if (control?.errors?.['email']) {\n          <div>Bitte eine g\u00FCltige E-Mail Adresse angeben.</div>\n        }\n        @if (control?.errors?.['matching']) {\n          <div>Die Passw\u00F6rter m\u00FCssen \u00FCberein stimmen.</div>\n        }\n      </div>\n    }\n  </div>\n}\n\n@if (isList) {\n  <base-tags\n    [id]=\"id\"\n    [label]=\"label\"\n    [name]=\"name\"\n    [control]=\"control\"\n    [required]=\"required\"\n    [placeholder]=\"placeholder\"\n    [custom]=\"false\"\n    [options]=\"optionsForTagInput\"\n  ></base-tags>\n}\n", styles: [".options{position:absolute;display:block;top:100%;left:0;right:0;border-top:0;background-color:#fff;box-shadow:0 2px 5px #00000029,0 2px 10px #0000001f;transition:all .5s;z-index:999;max-height:200px;overflow-y:scroll}.options .option-item{padding:10px;cursor:pointer}.options .option-item:hover{color:var(--bs-primary)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TagsComponent, selector: "base-tags", inputs: ["id", "name", "infoText", "label", "placeholder", "autocomplete", "tabIndex", "control", "options", "custom", "removeByKey", "required", "objectPath", "validators"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: RefenceInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'base-refence-input', standalone: true, imports: [
-                        NgClass,
-                        ReactiveFormsModule,
-                        FormsModule,
-                        TagsComponent
-                    ], template: "@if (!isList) {\n  <div class=\"form-group mb-3\">\n    <div class=\"d-flex justify-content-between align-items-center\">\n      @if (label) {\n        <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\">{{ label }}</label>\n      }\n      @if (infoText) {\n        <i class=\"bi bi-info-circle\" [ngbTooltip]=\"infoText\" placement=\"start\"></i>\n      }\n    </div>\n    @if (search) {\n      <div class=\"position-relative\">\n        <div class=\"d-flex flex-row\">\n          <input [formControl]=\"control\" hidden />\n          <input\n            [id]=\"objectPath ? objectPath + '.' + id : id\"\n            [name]=\"name\"\n            class=\"form-control\"\n            [(ngModel)]=\"currentValue\"\n            [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n            (focus)=\"onFocus($event)\"\n            (blur)=\"onFocus()\"\n            [required]=\"required\"\n            [placeholder]=\"placeholder\"\n            [autocomplete]=\"autocomplete ?? null\"\n            [tabIndex]=\"tabIndex ?? null\"\n            (keyup)=\"enterKey($event)\"\n            />\n          @if (creationLink) {\n            <button class=\"btn btn-primary\" (click)=\"openLink()\">Erstellen</button>\n          }\n        </div>\n        @if (objects && selectedElement) {\n          <div class=\"options\">\n            @for (object of filterOptions(); track object) {\n              <div class=\"option-item\" (click)=\"set(object[valueField])\">\n                {{ prepareNameField(object) }}\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n    @if (!search) {\n      <div>\n        <div class=\"d-flex flex-row\">\n          <select\n            [id]=\"objectPath ? objectPath + '.' + id : id\"\n            [name]=\"name\"\n            class=\"form-select\"\n            [attr.aria-label]=\"placeholder\"\n            [formControl]=\"control\"\n            [required]=\"required\"\n            [tabIndex]=\"tabIndex ?? null\"\n            [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n            >\n            <option [ngValue]=\"null\" selected>{{ placeholder }}</option>\n            @for (object of objects; track object) {\n              <option [ngValue]=\"object[valueField]\">\n                {{ prepareNameField(object) }}\n              </option>\n            }\n          </select>\n          @if (creationLink) {\n            <button class=\"btn btn-primary\" (click)=\"openLink()\">Erstellen</button>\n          }\n        </div>\n      </div>\n    }\n    @if (control?.invalid && (control?.dirty || control?.touched) && !selectedElement) {\n      <div\n        class=\"d-block invalid-feedback m-2\"\n        >\n        @if (control?.errors?.['required']) {\n          <div>Dieses Feld ist ein Pflichtfeld.</div>\n        }\n        @if (control?.errors?.['invalidReference'] && currentValue) {\n          <div>\n            {{ currentValue }} ist kein g\u00FCltiger Wert f\u00FCr {{ label }}.\n          </div>\n        }\n        @if (control?.errors?.['minlength']) {\n          <div>\n            Die Mindestl\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n            {{control.errors?.['minlength']?.requiredLength}} Zeichen.\n          </div>\n        }\n        @if (control?.errors?.['maxlength']) {\n          <div>\n            Die maximale L\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n            {{control.errors?.['maxlength']?.requiredLength}} Zeichen.\n          </div>\n        }\n        @if (control?.errors?.['email']) {\n          <div>Bitte eine g\u00FCltige E-Mail Adresse angeben.</div>\n        }\n        @if (control?.errors?.['matching']) {\n          <div>Die Passw\u00F6rter m\u00FCssen \u00FCberein stimmen.</div>\n        }\n      </div>\n    }\n  </div>\n}\n\n@if (isList) {\n  <base-tags\n    [id]=\"id\"\n    [label]=\"label\"\n    [name]=\"name\"\n    [control]=\"control\"\n    [required]=\"required\"\n    [placeholder]=\"placeholder\"\n    [custom]=\"false\"\n    [options]=\"optionsForTagInput\"\n  ></base-tags>\n}\n", styles: [".options{position:absolute;display:block;top:100%;left:0;right:0;border-top:0;background-color:#fff;box-shadow:0 2px 5px #00000029,0 2px 10px #0000001f;transition:all .5s;z-index:999;max-height:200px;overflow-y:scroll}.options .option-item{padding:10px;cursor:pointer}.options .option-item:hover{color:var(--bs-primary)}\n"] }]
-        }], ctorParameters: () => [{ type: i1.GraphQLService }, { type: i2.Router }], propDecorators: { id: [{
-                type: Input
-            }], name: [{
-                type: Input
-            }], infoText: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], isList: [{
-                type: Input
-            }], search: [{
-                type: Input
-            }], useParamAsArg: [{
-                type: Input
-            }], param: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], autocomplete: [{
-                type: Input
-            }], tabIndex: [{
-                type: Input
-            }], control: [{
-                type: Input
-            }], required: [{
-                type: Input
-            }], method: [{
-                type: Input
-            }], fields: [{
-                type: Input
-            }], valueField: [{
-                type: Input
-            }], objectPath: [{
-                type: Input
-            }], nameField: [{
-                type: Input
-            }], creationLink: [{
-                type: Input
-            }] } });
-
-class ModelFormSubComponent {
-    authService;
-    id;
-    parentKey;
-    fields;
-    form;
-    config;
-    imageChanged = new EventEmitter();
-    fileChanged = new EventEmitter();
-    keys = [];
-    user;
-    objectPath;
-    constructor(authService) {
-        this.authService = authService;
-    }
-    ngOnInit() {
-        // Get keys
-        const unsortedKeys = Object.keys(this.fields);
-        // Sort keys by config order
-        this.keys = unsortedKeys.sort((a, b) => {
-            return ((this.config[a]?.order ? this.config[a]?.order : 99) - (this.config[b]?.order ? this.config[b]?.order : 99));
-        });
-        // Set user for roles check
-        this.user = BasicUser.map(this.authService.currentUser);
-        if (this.parentKey) {
-            if (!this.objectPath) {
-                this.objectPath = this.parentKey;
-            }
-            else {
-                this.objectPath = this.objectPath + '.' + this.parentKey;
-            }
-        }
-    }
-    /**
-     * If the field has fields, return true, otherwise return false.
-     */
-    checkFieldHasFields(field) {
-        return Object.keys(field.fields)?.length !== 0;
-    }
-    /**
-     * It takes a string, capitalizes the first letter, and returns the new string
-     *
-     * @param value - The string that you want to capitalize the first letter of.
-     * @returns The first letter of the string is being capitalized and the rest of the string is being returned.
-     */
-    capitalizeFirstLetter(value) {
-        return value.charAt(0).toUpperCase() + value.slice(1);
-    }
-    /**
-     * It takes an array of values and returns an array of objects with a value and text property
-     *
-     * @param values - any[] - the array of values that you want to convert to a selectable list
-     * @param config
-     * @returns An array of objects with a value and text property.
-     */
-    prepareEnumForSelect(values, config = {}) {
-        return values
-            .filter((i) => {
-            return !(config && config[i]?.roles && !this.user.hasAllRoles(config[i]?.roles));
-        })
-            .map((e) => {
-            return {
-                value: e,
-                text: config && config[e]?.text ? config[e].text : e,
-            };
-        });
-    }
-    /**
-     * It takes an AbstractControl and returns a FormControl
-     *
-     * @param control - AbstractControl | null | undefined
-     * @returns A FormControl
-     */
-    transformToControl(control) {
-        return control;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ModelFormSubComponent, deps: [{ token: i1.AuthService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: ModelFormSubComponent, isStandalone: true, selector: "base-model-form-sub", inputs: { id: "id", parentKey: "parentKey", fields: "fields", form: "form", config: "config" }, outputs: { imageChanged: "imageChanged", fileChanged: "fileChanged" }, ngImport: i0, template: "@for (key of keys; track key) {\n  <div class=\"mt-3\">\n    @if (checkFieldHasFields(fields[key]) && (config[key]?.roles ? user?.hasAllRoles(config[key]?.roles) : true)) {\n      <fieldset class=\"border rounded-3 p-3 mt-3\">\n        <legend class=\"float-none w-auto px-3\">\n          {{ config[key]?.label ? config[key].label : capitalizeFirstLetter(key) }}\n        </legend>\n        <base-model-form-sub\n          [parentKey]=\"key\"\n          [fields]=\"fields[key].fields\"\n          [config]=\"config[key]?.fields || {}\"\n          [form]=\"form.get(key)\"\n          (imageChanged)=\"imageChanged.emit($event)\"\n          (fileChanged)=\"fileChanged.emit($event)\"\n        ></base-model-form-sub>\n      </fieldset>\n    }\n    @if (!checkFieldHasFields(fields[key]) && (config[key]?.roles ? user?.hasAllRoles(config[key]?.roles) : true)) {\n      @if (fields[key]?.isEnum && !config[key]?.exclude) {\n        <base-select\n          [id]=\"key\"\n          [name]=\"key\"\n          [infoText]=\"config[key]?.infoText ? config[key].infoText : null\"\n          [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n          [placeholder]=\"config[key]?.placeholder || 'Bitte einen Wert ausw\u00E4hlen'\"\n          [options]=\"prepareEnumForSelect(fields[key]?.validEnums, config[key]?.enumValues)\"\n          [control]=\"transformToControl(form?.get(key))\"\n          [required]=\"config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\"\n          [objectPath]=\"objectPath\"\n        ></base-select>\n      }\n      @if (!fields[key]?.isEnum && !config[key]?.exclude) {\n        @switch (config[key]?.type ? config[key]?.type : fields[key]?.type) {\n          @case ('String') {\n            @if (fields[key]?.isList && !config[key]?.exclude) {\n              <base-tags\n                [id]=\"key\"\n                [name]=\"key\"\n                [infoText]=\"config[key]?.infoText ? config[key].infoText : null\"\n                [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n                [placeholder]=\"config[key]?.placeholder || ''\"\n                [control]=\"transformToControl(form?.get(key))\"\n              [required]=\"\n                config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n              \"\n                [validators]=\"config[key]?.validators\"\n                [objectPath]=\"objectPath\"\n              ></base-tags>\n            }\n            @if (!fields[key]?.isList && !config[key]?.exclude) {\n              <base-input\n                [id]=\"key\"\n                [name]=\"key\"\n                [infoText]=\"config[key]?.infoText ? config[key].infoText : null\"\n                [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n                [placeholder]=\"config[key]?.placeholder || ''\"\n                [type]=\"'text'\"\n                [control]=\"transformToControl(form?.get(key))\"\n              [required]=\"\n                config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n              \"\n                [objectPath]=\"objectPath\"\n              ></base-input>\n            }\n          }\n          @case ('Image') {\n            <base-upload-image\n              [id]=\"key\"\n              [name]=\"key\"\n              [infoText]=\"config[key]?.infoText ? config[key].infoText : null\"\n              [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n              [control]=\"transformToControl(form?.get(key))\"\n              [url]=\"config[key]?.url\"\n              [path]=\"config[key]?.path || '/files/'\"\n              [uploadPath]=\"config[key]?.uploadPath || '/files/upload'\"\n              [deletePath]=\"config[key]?.deletePath || '/files/'\"\n              [supportText]=\"config[key]?.supportText || 'Unterst\u00FCtzte Formate: JPEG, JPG, PNG'\"\n              [defaultDragText]=\"config[key]?.dragText || 'Drag & Drop'\"\n              [defaultReleaseText]=\"config[key]?.releaseText || 'Loslassen zum hochladen'\"\n              [preButtonText]=\"config[key]?.preButtonText || 'or'\"\n              [buttonText]=\"config[key]?.buttonText || 'browse'\"\n              [validExtensions]=\"config[key]?.validExtensions || ['image/jpeg', 'image/jpg', 'image/png', 'image/webp']\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n              [compressOptions]=\"config[key]?.compressOptions\"\n              [croppingOptions]=\"config[key]?.croppingOptions\"\n              [croppingImage]=\"config[key]?.croppingImage\"\n              [maxSize]=\"config[key]?.maxSize\"\n              [uploadDirectly]=\"false\"\n              [objectPath]=\"objectPath\"\n              [mode]=\"config[key]?.imageMode || 'base64'\"\n              (fileChanged)=\"fileChanged.emit($event)\"\n              (imageDeleted)=\"imageChanged.emit(key)\"\n              (imageUploaded)=\"imageChanged.emit(key)\"\n            ></base-upload-image>\n          }\n          @case ('Upload') {\n            <base-upload-image\n              [id]=\"key\"\n              [name]=\"key\"\n              [infoText]=\"config[key]?.infoText ? config[key].infoText : null\"\n              [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n              [control]=\"transformToControl(form?.get(key))\"\n              [supportText]=\"config[key]?.supportText || 'Unterst\u00FCtzte Formate: JPEG, JPG, PNG'\"\n              [defaultDragText]=\"config[key]?.dragText || 'Drag & Drop'\"\n              [defaultReleaseText]=\"config[key]?.releaseText || 'Loslassen zum hochladen'\"\n              [preButtonText]=\"config[key]?.preButtonText || 'or'\"\n              [buttonText]=\"config[key]?.buttonText || 'browse'\"\n              [validExtensions]=\"config[key]?.validExtensions || ['image/jpeg', 'image/jpg', 'image/png', 'image/webp']\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n              [compressOptions]=\"config[key]?.compressOptions\"\n              [maxSize]=\"config[key]?.maxSize\"\n              [objectPath]=\"objectPath\"\n              [mode]=\"'file'\"\n            ></base-upload-image>\n          }\n          @case ('Reference') {\n            <base-refence-input\n              [id]=\"key\"\n              [name]=\"key\"\n              [infoText]=\"config[key]?.infoText ? config[key].infoText : null\"\n              [isList]=\"fields[key]?.isList\"\n              [useParamAsArg]=\"config[key]?.useParamAsArg ?? false\"\n              [param]=\"id\"\n              [search]=\"config[key]?.searchable ?? true\"\n              [placeholder]=\"config[key]?.placeholder || 'Bitte einen Wert ausw\u00E4hlen'\"\n              [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n              [control]=\"transformToControl(form?.get(key))\"\n              [method]=\"config[key]?.method || 'find'\"\n              [fields]=\"config[key]?.requestFields || ['id', 'name']\"\n              [valueField]=\"config[key]?.valueField || 'id'\"\n              [nameField]=\"config[key]?.nameField || 'name'\"\n              [creationLink]=\"config[key]?.creationLink || ''\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n              [objectPath]=\"objectPath\"\n            ></base-refence-input>\n          }\n          @case ('Boolean') {\n            <base-checkbox\n              [id]=\"key\"\n              [name]=\"key\"\n              [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n              [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n              [objectPath]=\"objectPath\"\n            ></base-checkbox>\n          }\n          @case ('LongText') {\n            <base-textarea\n              [id]=\"key\"\n              [name]=\"key\"\n              [infoText]=\"config[key]?.infoText ? config[key].infoText : null\"\n              [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n              [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n              [objectPath]=\"objectPath\"\n            ></base-textarea>\n          }\n          @case ('Float') {\n            <base-input\n              [id]=\"key\"\n              [name]=\"key\"\n              [infoText]=\"config[key]?.infoText ? config[key].infoText : null\"\n              [type]=\"'number'\"\n              [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n              [placeholder]=\"config[key]?.placeholder || ''\"\n              [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n              [objectPath]=\"objectPath\"\n            ></base-input>\n          }\n          @case ('Password') {\n            <base-input\n              [id]=\"key\"\n              [name]=\"key\"\n              [infoText]=\"config[key]?.infoText ? config[key].infoText : null\"\n              [type]=\"'password'\"\n              [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n              [placeholder]=\"config[key]?.placeholder || ''\"\n              [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n              [objectPath]=\"objectPath\"\n            ></base-input>\n          }\n          @case ('Color') {\n            <base-input\n              [id]=\"key\"\n              [name]=\"key\"\n              [infoText]=\"config[key]?.infoText ? config[key].infoText : null\"\n              [type]=\"'color'\"\n              [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n              [placeholder]=\"config[key]?.placeholder || ''\"\n              [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n              [objectPath]=\"objectPath\"\n            ></base-input>\n          }\n          @case ('URL') {\n            <base-input\n              [id]=\"key\"\n              [name]=\"key\"\n              [infoText]=\"config[key]?.infoText ? config[key].infoText : null\"\n              [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n              [placeholder]=\"config[key]?.placeholder || ''\"\n              [type]=\"'url'\"\n              [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n              [objectPath]=\"objectPath\"\n            ></base-input>\n          }\n          @case ('Email') {\n            <base-input\n              [id]=\"key\"\n              [name]=\"key\"\n              [infoText]=\"config[key]?.infoText ? config[key].infoText : null\"\n              [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n              [placeholder]=\"config[key]?.placeholder || ''\"\n              [type]=\"'email'\"\n              [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n              [objectPath]=\"objectPath\"\n            ></base-input>\n          }\n          @case ('DateTime') {\n            <base-input\n              [id]=\"key\"\n              [name]=\"key\"\n              [infoText]=\"config[key]?.infoText ? config[key].infoText : null\"\n              [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n              [placeholder]=\"config[key]?.placeholder || ''\"\n              [type]=\"'datetime-local'\"\n              [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n              [objectPath]=\"objectPath\"\n            ></base-input>\n          }\n        }\n      }\n    }\n  </div>\n}\n", styles: [""], dependencies: [{ kind: "component", type: ModelFormSubComponent, selector: "base-model-form-sub", inputs: ["id", "parentKey", "fields", "form", "config"], outputs: ["imageChanged", "fileChanged"] }, { kind: "component", type: InputComponent, selector: "base-input", inputs: ["id", "name", "infoText", "label", "placeholder", "autocomplete", "tabIndex", "control", "type", "required", "eyeButton", "objectPath"], outputs: ["enter"] }, { kind: "component", type: SelectComponent, selector: "base-select", inputs: ["id", "name", "infoText", "label", "placeholder", "objectPath", "control", "tabIndex", "required", "multiple", "search", "options"] }, { kind: "component", type: TagsComponent, selector: "base-tags", inputs: ["id", "name", "infoText", "label", "placeholder", "autocomplete", "tabIndex", "control", "options", "custom", "removeByKey", "required", "objectPath", "validators"] }, { kind: "component", type: UploadImageComponent, selector: "base-upload-image", inputs: ["id", "name", "infoText", "label", "supportText", "required", "defaultDragText", "defaultReleaseText", "preButtonText", "buttonText", "validExtensions", "control", "url", "uploadPath", "deletePath", "path", "compressOptions", "maxSize", "uploadDirectly", "croppingImage", "croppingOptions", "objectPath", "mode"], outputs: ["imageUploaded", "imageDeleted", "fileChanged"] }, { kind: "component", type: RefenceInputComponent, selector: "base-refence-input", inputs: ["id", "name", "infoText", "label", "isList", "search", "useParamAsArg", "param", "placeholder", "autocomplete", "tabIndex", "control", "required", "method", "fields", "valueField", "objectPath", "nameField", "creationLink"] }, { kind: "component", type: CheckboxComponent, selector: "base-checkbox", inputs: ["id", "name", "label", "value", "control", "required", "objectPath"] }, { kind: "component", type: TextareaComponent, selector: "base-textarea", inputs: ["id", "name", "infoText", "label", "placeholder", "control", "rows", "required", "autoHeight", "tabIndex", "objectPath"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ModelFormSubComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'base-model-form-sub', standalone: true, imports: [
-                        InputComponent,
-                        SelectComponent,
-                        TagsComponent,
-                        UploadImageComponent,
-                        RefenceInputComponent,
-                        CheckboxComponent,
-                        TextareaComponent
-                    ], template: "@for (key of keys; track key) {\n  <div class=\"mt-3\">\n    @if (checkFieldHasFields(fields[key]) && (config[key]?.roles ? user?.hasAllRoles(config[key]?.roles) : true)) {\n      <fieldset class=\"border rounded-3 p-3 mt-3\">\n        <legend class=\"float-none w-auto px-3\">\n          {{ config[key]?.label ? config[key].label : capitalizeFirstLetter(key) }}\n        </legend>\n        <base-model-form-sub\n          [parentKey]=\"key\"\n          [fields]=\"fields[key].fields\"\n          [config]=\"config[key]?.fields || {}\"\n          [form]=\"form.get(key)\"\n          (imageChanged)=\"imageChanged.emit($event)\"\n          (fileChanged)=\"fileChanged.emit($event)\"\n        ></base-model-form-sub>\n      </fieldset>\n    }\n    @if (!checkFieldHasFields(fields[key]) && (config[key]?.roles ? user?.hasAllRoles(config[key]?.roles) : true)) {\n      @if (fields[key]?.isEnum && !config[key]?.exclude) {\n        <base-select\n          [id]=\"key\"\n          [name]=\"key\"\n          [infoText]=\"config[key]?.infoText ? config[key].infoText : null\"\n          [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n          [placeholder]=\"config[key]?.placeholder || 'Bitte einen Wert ausw\u00E4hlen'\"\n          [options]=\"prepareEnumForSelect(fields[key]?.validEnums, config[key]?.enumValues)\"\n          [control]=\"transformToControl(form?.get(key))\"\n          [required]=\"config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\"\n          [objectPath]=\"objectPath\"\n        ></base-select>\n      }\n      @if (!fields[key]?.isEnum && !config[key]?.exclude) {\n        @switch (config[key]?.type ? config[key]?.type : fields[key]?.type) {\n          @case ('String') {\n            @if (fields[key]?.isList && !config[key]?.exclude) {\n              <base-tags\n                [id]=\"key\"\n                [name]=\"key\"\n                [infoText]=\"config[key]?.infoText ? config[key].infoText : null\"\n                [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n                [placeholder]=\"config[key]?.placeholder || ''\"\n                [control]=\"transformToControl(form?.get(key))\"\n              [required]=\"\n                config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n              \"\n                [validators]=\"config[key]?.validators\"\n                [objectPath]=\"objectPath\"\n              ></base-tags>\n            }\n            @if (!fields[key]?.isList && !config[key]?.exclude) {\n              <base-input\n                [id]=\"key\"\n                [name]=\"key\"\n                [infoText]=\"config[key]?.infoText ? config[key].infoText : null\"\n                [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n                [placeholder]=\"config[key]?.placeholder || ''\"\n                [type]=\"'text'\"\n                [control]=\"transformToControl(form?.get(key))\"\n              [required]=\"\n                config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n              \"\n                [objectPath]=\"objectPath\"\n              ></base-input>\n            }\n          }\n          @case ('Image') {\n            <base-upload-image\n              [id]=\"key\"\n              [name]=\"key\"\n              [infoText]=\"config[key]?.infoText ? config[key].infoText : null\"\n              [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n              [control]=\"transformToControl(form?.get(key))\"\n              [url]=\"config[key]?.url\"\n              [path]=\"config[key]?.path || '/files/'\"\n              [uploadPath]=\"config[key]?.uploadPath || '/files/upload'\"\n              [deletePath]=\"config[key]?.deletePath || '/files/'\"\n              [supportText]=\"config[key]?.supportText || 'Unterst\u00FCtzte Formate: JPEG, JPG, PNG'\"\n              [defaultDragText]=\"config[key]?.dragText || 'Drag & Drop'\"\n              [defaultReleaseText]=\"config[key]?.releaseText || 'Loslassen zum hochladen'\"\n              [preButtonText]=\"config[key]?.preButtonText || 'or'\"\n              [buttonText]=\"config[key]?.buttonText || 'browse'\"\n              [validExtensions]=\"config[key]?.validExtensions || ['image/jpeg', 'image/jpg', 'image/png', 'image/webp']\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n              [compressOptions]=\"config[key]?.compressOptions\"\n              [croppingOptions]=\"config[key]?.croppingOptions\"\n              [croppingImage]=\"config[key]?.croppingImage\"\n              [maxSize]=\"config[key]?.maxSize\"\n              [uploadDirectly]=\"false\"\n              [objectPath]=\"objectPath\"\n              [mode]=\"config[key]?.imageMode || 'base64'\"\n              (fileChanged)=\"fileChanged.emit($event)\"\n              (imageDeleted)=\"imageChanged.emit(key)\"\n              (imageUploaded)=\"imageChanged.emit(key)\"\n            ></base-upload-image>\n          }\n          @case ('Upload') {\n            <base-upload-image\n              [id]=\"key\"\n              [name]=\"key\"\n              [infoText]=\"config[key]?.infoText ? config[key].infoText : null\"\n              [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n              [control]=\"transformToControl(form?.get(key))\"\n              [supportText]=\"config[key]?.supportText || 'Unterst\u00FCtzte Formate: JPEG, JPG, PNG'\"\n              [defaultDragText]=\"config[key]?.dragText || 'Drag & Drop'\"\n              [defaultReleaseText]=\"config[key]?.releaseText || 'Loslassen zum hochladen'\"\n              [preButtonText]=\"config[key]?.preButtonText || 'or'\"\n              [buttonText]=\"config[key]?.buttonText || 'browse'\"\n              [validExtensions]=\"config[key]?.validExtensions || ['image/jpeg', 'image/jpg', 'image/png', 'image/webp']\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n              [compressOptions]=\"config[key]?.compressOptions\"\n              [maxSize]=\"config[key]?.maxSize\"\n              [objectPath]=\"objectPath\"\n              [mode]=\"'file'\"\n            ></base-upload-image>\n          }\n          @case ('Reference') {\n            <base-refence-input\n              [id]=\"key\"\n              [name]=\"key\"\n              [infoText]=\"config[key]?.infoText ? config[key].infoText : null\"\n              [isList]=\"fields[key]?.isList\"\n              [useParamAsArg]=\"config[key]?.useParamAsArg ?? false\"\n              [param]=\"id\"\n              [search]=\"config[key]?.searchable ?? true\"\n              [placeholder]=\"config[key]?.placeholder || 'Bitte einen Wert ausw\u00E4hlen'\"\n              [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n              [control]=\"transformToControl(form?.get(key))\"\n              [method]=\"config[key]?.method || 'find'\"\n              [fields]=\"config[key]?.requestFields || ['id', 'name']\"\n              [valueField]=\"config[key]?.valueField || 'id'\"\n              [nameField]=\"config[key]?.nameField || 'name'\"\n              [creationLink]=\"config[key]?.creationLink || ''\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n              [objectPath]=\"objectPath\"\n            ></base-refence-input>\n          }\n          @case ('Boolean') {\n            <base-checkbox\n              [id]=\"key\"\n              [name]=\"key\"\n              [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n              [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n              [objectPath]=\"objectPath\"\n            ></base-checkbox>\n          }\n          @case ('LongText') {\n            <base-textarea\n              [id]=\"key\"\n              [name]=\"key\"\n              [infoText]=\"config[key]?.infoText ? config[key].infoText : null\"\n              [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n              [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n              [objectPath]=\"objectPath\"\n            ></base-textarea>\n          }\n          @case ('Float') {\n            <base-input\n              [id]=\"key\"\n              [name]=\"key\"\n              [infoText]=\"config[key]?.infoText ? config[key].infoText : null\"\n              [type]=\"'number'\"\n              [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n              [placeholder]=\"config[key]?.placeholder || ''\"\n              [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n              [objectPath]=\"objectPath\"\n            ></base-input>\n          }\n          @case ('Password') {\n            <base-input\n              [id]=\"key\"\n              [name]=\"key\"\n              [infoText]=\"config[key]?.infoText ? config[key].infoText : null\"\n              [type]=\"'password'\"\n              [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n              [placeholder]=\"config[key]?.placeholder || ''\"\n              [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n              [objectPath]=\"objectPath\"\n            ></base-input>\n          }\n          @case ('Color') {\n            <base-input\n              [id]=\"key\"\n              [name]=\"key\"\n              [infoText]=\"config[key]?.infoText ? config[key].infoText : null\"\n              [type]=\"'color'\"\n              [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n              [placeholder]=\"config[key]?.placeholder || ''\"\n              [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n              [objectPath]=\"objectPath\"\n            ></base-input>\n          }\n          @case ('URL') {\n            <base-input\n              [id]=\"key\"\n              [name]=\"key\"\n              [infoText]=\"config[key]?.infoText ? config[key].infoText : null\"\n              [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n              [placeholder]=\"config[key]?.placeholder || ''\"\n              [type]=\"'url'\"\n              [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n              [objectPath]=\"objectPath\"\n            ></base-input>\n          }\n          @case ('Email') {\n            <base-input\n              [id]=\"key\"\n              [name]=\"key\"\n              [infoText]=\"config[key]?.infoText ? config[key].infoText : null\"\n              [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n              [placeholder]=\"config[key]?.placeholder || ''\"\n              [type]=\"'email'\"\n              [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n              [objectPath]=\"objectPath\"\n            ></base-input>\n          }\n          @case ('DateTime') {\n            <base-input\n              [id]=\"key\"\n              [name]=\"key\"\n              [infoText]=\"config[key]?.infoText ? config[key].infoText : null\"\n              [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n              [placeholder]=\"config[key]?.placeholder || ''\"\n              [type]=\"'datetime-local'\"\n              [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n              [objectPath]=\"objectPath\"\n            ></base-input>\n          }\n        }\n      }\n    }\n  </div>\n}\n" }]
-        }], ctorParameters: () => [{ type: i1.AuthService }], propDecorators: { id: [{
-                type: Input
-            }], parentKey: [{
-                type: Input
-            }], fields: [{
-                type: Input
-            }], form: [{
-                type: Input
-            }], config: [{
-                type: Input
-            }], imageChanged: [{
-                type: Output
-            }], fileChanged: [{
-                type: Output
-            }] } });
-
-/**
- * ModelFormComponent
- *
- * Hint for handling extensions of this component in project:
- * If you want to use complete custom services and methods, extend ModelFormBaseComponent instead of ModelFormComponent
- */
-class ModelFormComponent {
-    graphQLMetaService;
-    graphQLService;
-    formsService;
-    authService;
-    router;
-    route;
-    cmsService;
-    toastService;
-    fileService;
-    modelName;
-    label;
-    id;
-    delete = true;
-    onlyUpdateMode = false;
-    duplicate = false;
-    logging = false;
-    config;
-    showFavButton = true;
-    finished = new EventEmitter();
-    meta;
-    form;
-    _loading = false;
-    fields;
-    operation;
-    keys = [];
-    user;
-    object;
-    fabButtons = [];
-    fileChanges;
-    set loading(value) {
-        if (!value) {
-            setTimeout(() => {
-                this._loading = value;
-            }, 400);
-        }
-        else {
-            this._loading = value;
-        }
-    }
-    constructor(graphQLMetaService, graphQLService, formsService, authService, router, route, cmsService, toastService, fileService) {
-        this.graphQLMetaService = graphQLMetaService;
-        this.graphQLService = graphQLService;
-        this.formsService = formsService;
-        this.authService = authService;
-        this.router = router;
-        this.route = route;
-        this.cmsService = cmsService;
-        this.toastService = toastService;
-        this.fileService = fileService;
-    }
-    ngOnInit() {
-        // Set user for roles check
-        this.user = BasicUser.map(this.authService.currentUser);
-        this.graphQLMetaService.getMeta().subscribe((meta) => {
-            this.meta = meta;
-            if (this.modelName) {
-                this.init();
-            }
-        });
-        this.initFabActions();
-    }
-    ngOnChanges(changes) {
-        // Reinit form for new model or load and patch form with new id
-        if (changes['modelName'] || changes['id']) {
-            this.init();
-        }
-    }
-    /**
-     * > If the model name and metadata are present, set the operation to update or create, get the fields from the
-     * metadata, create the form, and if the value is present, patch the form with the value
-     */
-    init(id) {
-        if (id) {
-            this.id = id;
-        }
-        if (!this.id && this.onlyUpdateMode) {
-            return;
-        }
-        if (this.modelName && this.meta) {
-            this.operation = this.id ? 'update' : 'create';
-            if (this.logging) {
-                console.log('ModelFormComponent::init->operation', this.operation);
-                console.log('ModelFormComponent::init->meta.getArgs', this.operation + this.capitalizeFirstLetter(this.modelName));
-            }
-            this.fields = this.meta.getArgs(this.operation + this.capitalizeFirstLetter(this.modelName), {
-                type: GraphQLRequestType.MUTATION,
-            }).fields;
-            this.fields = this.fields['input'].fields;
-            this.keys = Object.keys(this.fields);
-            if (this.logging) {
-                console.log('ModelFormComponent::init->id', this.id);
-                console.log('ModelFormComponent::init->fields', this.fields);
-                console.log('ModelFormComponent::init->keys', this.keys);
-            }
-            this.form = this.createForm(this.fields);
-            if (this.id) {
-                this.getObjectById(this.id);
-            }
-        }
-    }
-    /**
-     * It takes a key as an argument, and returns an array of keys from the sub-object
-     */
-    getKeysFromSubObject(key) {
-        return Object.keys(this.fields[key]);
-    }
-    /**
-     * It takes an id, and then calls the graphQLService to get the object from the database
-     *
-     * @param id - The id of the object to be loaded
-     */
-    getObjectById(id) {
-        if (!id) {
-            return;
-        }
-        if (this.logging) {
-            console.log('ModelFormComponent::getObjectById->id', id);
-            console.log('ModelFormComponent::getObjectById->requestFields', this.createRequestObject(this.fields));
-        }
-        this.graphQLService
-            .graphQl('get' + this.capitalizeFirstLetter(this.modelName), {
-            arguments: { id },
-            fields: this.createRequestObject(this.fields),
-            type: GraphQLRequestType.QUERY,
-        })
-            .subscribe({
-            next: (response) => {
-                if (this.logging) {
-                    console.log('ModelFormComponent::get->value', response);
-                }
-                this.object = response;
-                this.form.patchValue({ ...{}, ...response });
-                // Process patchFields for reference input
-                for (const [key, value] of Object.entries(this.fields)) {
-                    if (this.nestedObject(key, this.fields)?.type === 'DateTime' ||
-                        this.nestedObject(key, this.config)?.type === 'DateTime') {
-                        this.form.get(key).patchValue(this.formatDate(this.nestedObject(key, response)));
-                    }
-                    // If it not an array
-                    if (this.nestedObject(key, this.config)?.type === 'Reference' &&
-                        !this.nestedObject(key, this.fields)?.isList) {
-                        if (this.form.get(key)) {
-                            this.form
-                                .get(key)
-                                .patchValue(response[this.nestedObject(key, this.config)?.patchField
-                                ? this.nestedObject(key, this.config)?.patchField
-                                : key]?.id);
-                        }
-                    }
-                    // If value is an array
-                    if (this.nestedObject(key, this.config)?.type === 'Reference' &&
-                        this.nestedObject(key, this.fields)?.isList) {
-                        if (this.form.get(key)) {
-                            this.form
-                                .get(key)
-                                .patchValue(response[this.nestedObject(key, this.config)?.patchField
-                                ? this.nestedObject(key, this.config)?.patchField
-                                : key]?.map((e) => e?.id));
-                        }
-                    }
-                }
-                if (this.logging) {
-                    console.log('ModelFormComponent::getObjectById->patchedForm', this.form);
-                }
-            },
-            error: (err) => {
-                console.error('Error on load object', err);
-                this.finished.emit(null);
-            },
-        });
-    }
-    /**
-     * It takes a GraphQL type collection and returns an array of strings and objects
-     *
-     * @param fields - IGraphQLTypeCollection - This is the object that is returned from the
-     * introspection query.
-     * @returns An array of strings and objects.
-     */
-    createRequestObject(fields) {
-        const requestFields = [];
-        for (const [key, value] of Object.entries(fields)) {
-            if (this.config[key]?.exclude !== undefined && this.config[key]?.exclude) {
-                continue;
-            }
-            if (Object.keys(fields[key]?.fields)?.length === 0) {
-                if (this.config[key]?.type !== 'Reference') {
-                    requestFields.push(key);
-                }
-                else {
-                    requestFields.push({ [this.config[key]?.patchField ? this.config[key]?.patchField : key]: ['id'] });
-                }
-            }
-            else {
-                const subkeys = this.createRequestObject(fields[key].fields);
-                const resultObject = {};
-                resultObject[key] = subkeys;
-                requestFields.push(resultObject);
-            }
-        }
-        if (this.logging) {
-            console.log('ModelFormComponent::createRequestObject->requestFields', requestFields);
-        }
-        return requestFields;
-    }
-    /**
-     * It takes a collection of GraphQL types and creates a form group with a form control for each type
-     *
-     * @param fields - IGraphQLTypeCollection
-     * @param parents
-     */
-    createForm(fields, parents = []) {
-        const group = {};
-        let internParents = [...[], ...parents];
-        for (const [key, value] of Object.entries(fields)) {
-            if (Object.keys(value?.fields)?.length === 0) {
-                group[key] = new UntypedFormControl(null, this.processValidators(this.nestedObject(internParents.length ? internParents.join('.') + '.' + key : key, this.config), value));
-            }
-            else {
-                internParents.push(key);
-                group[key] = this.createForm(fields[key].fields, internParents);
-                internParents = [];
-            }
-        }
-        if (this.logging) {
-            console.log('ModelFormComponent::createForm->group', group);
-        }
-        return new UntypedFormGroup(group);
-    }
-    /**
-     * Process form validators for control
-     */
-    processValidators(config, value) {
-        const validators = [];
-        if (config) {
-            if (config?.required !== undefined ? config?.required : value.isRequired) {
-                validators.push(Validators.required);
-            }
-            if (config?.type === 'Email') {
-                validators.push(fullEmail());
-            }
-            if (config?.type === 'Password') {
-                validators.push(Validators.minLength(6));
-            }
-            if (typeof config?.min === 'number') {
-                validators.push(Validators.min(config.min));
-            }
-            if (typeof config?.max === 'number') {
-                validators.push(Validators.max(config.max));
-            }
-            if (Array.isArray(config?.validators)) {
-                validators.push(...config?.validators);
-            }
-        }
-        return validators;
-    }
-    /**
-     * It calls the graphQLService to delete the object with the id of the object that is currently being edited
-     */
-    deleteObject() {
-        this.cmsService.deleteObject(this.id, this.modelName).then(() => {
-            this.toastService.show({
-                id: this.modelName + '-success',
-                type: ToastType.SUCCESS,
-                title: 'Erfolgreich',
-                description: this.label + ' wurde erfolgreich gelöscht.',
-            });
-            this.finished.emit(null);
-        });
-    }
-    /**
-     * It sends a GraphQL mutation to the server to duplicate the object
-     */
-    async duplicateObject() {
-        this.cmsService.duplicateObject(this.id, this.modelName).then(async (value) => {
-            if (value?.id) {
-                await this.router.navigate(['../'], { relativeTo: this.route });
-                this.toastService.show({
-                    id: this.modelName + '-success',
-                    type: ToastType.SUCCESS,
-                    title: 'Erfolgreich',
-                    description: this.label + ' wurde erfolgreich dupliziert.',
-                });
-            }
-            else {
-                this.finished.emit(null);
-            }
-        });
-    }
-    /**
-     * It takes a string, capitalizes the first letter, and returns the modified string
-     *
-     * @param value - The string to capitalize.
-     * @returns The first letter of the string is being capitalized and the rest of the string is being returned.
-     */
-    capitalizeFirstLetter(value) {
-        return this.cmsService.capitalizeFirstLetter(value);
-    }
-    /**
-     * It takes an AbstractControl and returns a FormControl
-     *
-     * @param control - AbstractControl | null | undefined
-     * @returns A FormControl
-     */
-    transformToControl(control) {
-        return control;
-    }
-    /**
-     * It takes the key of the form control that has changed, gets the value of that form control, creates an object with the
-     * key and value, and then sends that object to the GraphQL server to update the database
-     */
-    imageChanged(key) {
-        const data = {};
-        data[key] = this.form.get(key).value;
-        if (this.logging) {
-            console.log('ModelFormComponent::imageChanged->body', data);
-        }
-        if (this.id) {
-            try {
-                this.graphQLService
-                    .graphQl('update' + this.capitalizeFirstLetter(this.modelName), {
-                    arguments: { id: this.id, input: data },
-                    fields: ['id'],
-                    type: GraphQLRequestType.MUTATION,
-                })
-                    .subscribe({
-                    next: (value) => {
-                        if (this.logging) {
-                            console.log('ModelFormComponent::imageChanged->success', value);
-                        }
-                    },
-                });
-            }
-            catch (e) {
-                if (this.logging) {
-                    console.log('ModelFormComponent::imageChanged->error', e);
-                }
-            }
-        }
-    }
-    /**
-     * It takes the form, validates it, and then sends it to the GraphQL server
-     *
-     * @returns The id of the newly created or updated object.
-     */
-    submit(secret = false) {
-        return new Promise(async (resolve, reject) => {
-            if (!secret) {
-                this.loading = true;
-            }
-            if (this.form.invalid && !secret) {
-                this.formsService.validateAllFormFields(this.form);
-                this.formsService.scrollToInvalidControl(this.form);
-                this.loading = false;
-                resolve(null);
-                return;
-            }
-            if (this.operation === 'update' && !this.id) {
-                console.error('ID is missing for update!');
-                this.loading = false;
-                resolve(null);
-                return;
-            }
-            if (this.logging) {
-                console.log('ModelFormComponent::submit->formValue', this.form.value);
-            }
-            // Prepare data for server request
-            let data = Object.assign({}, this.form.value);
-            data = this.prepareDataForRequest(this.config, this.fields, data);
-            if (this.logging) {
-                console.log('ModelFormComponent::submit->valueToGraphql', data);
-                console.log('ModelFormComponent::submit->fileChanges', this.fileChanges);
-            }
-            if (this.fileChanges?.length) {
-                for (const fileChange of this.fileChanges) {
-                    const key = fileChange.field;
-                    const config = this.nestedObject(key, this.config);
-                    if (fileChange.file) {
-                        // Upload
-                        const value = this.form.get(key).value;
-                        // Check if file is an ID or a base64 string
-                        if (typeof value === 'string') {
-                            // Delete if ID
-                            if (!this.form.get(key).value?.startsWith('data:')) {
-                                const deleteResult = await this.fileService.delete(this.nestedObject(key, this.config)?.url, this.nestedObject(key, this.config)?.deletePath || '/files/', this.nestedObject(key, this.object));
-                                if (deleteResult) {
-                                    this.nestedObject(key, data, '');
-                                }
-                            }
-                            const uploadResult = await this.fileService.upload(this.nestedObject(key, this.config)?.url, this.nestedObject(key, this.config)?.uploadPath || '/files/upload', fileChange.file);
-                            if (uploadResult?.id) {
-                                this.nestedObject(key, data, uploadResult.id);
-                            }
-                        }
-                        else if (config?.imageMode && config?.imageMode !== 'file') {
-                            // Delete
-                            const result = await this.fileService.delete(config?.url, this.nestedObject(key, this.config)?.deletePath || '/files/', this.nestedObject(key, this.object));
-                            if (result) {
-                                this.nestedObject(key, data, '');
-                            }
-                        }
-                    }
-                }
-            }
-            this.graphQLService
-                .graphQl(this.operation + this.capitalizeFirstLetter(this.modelName), {
-                arguments: this.operation === 'update' ? { id: this.id, input: data } : { input: data },
-                fields: ['id'],
-                type: GraphQLRequestType.MUTATION,
-            })
-                .subscribe({
-                next: (value) => {
-                    if (!secret) {
-                        this.loading = false;
-                        this.finished.emit(null);
-                        this.toastService.show({
-                            id: this.modelName + '-success',
-                            type: ToastType.SUCCESS,
-                            title: 'Erfolgreich',
-                            description: this.label + ' wurde erfolgreich ' + (this.operation === 'create' ? 'erstellt.' : 'aktualisiert.'),
-                        });
-                    }
-                    resolve(value);
-                },
-                error: (err) => {
-                    if (!secret) {
-                        console.error('Failed on ' + this.operation, err);
-                        this.loading = false;
-                        this.toastService.show({
-                            id: this.modelName + '-success',
-                            type: ToastType.ERROR,
-                            description: 'Beim ' +
-                                (this.operation === 'create' ? 'erstellen' : 'aktualisieren') +
-                                ' von ' +
-                                this.label +
-                                ' ist etwas schiefgelaufen.',
-                        });
-                    }
-                    reject();
-                },
-            });
-        });
-    }
-    /**
-     * Prepare data for server
-     */
-    prepareDataForRequest(config, fieldsConfig, data) {
-        if (!data) {
-            return data;
-        }
-        for (const [key, value] of Object.entries(data)) {
-            if ((this.fields[key]?.type === 'DateTime' || this.config[key]?.type === 'DateTime') && value === '') {
-                data[key] = null;
-                continue;
-            }
-            if ((config[key]?.roles ? !this.user.hasAllRoles(config[key]?.roles) : false) || config[key]?.exclude) {
-                delete data[key];
-                continue;
-            }
-            if (value && typeof value === 'object' && !Array.isArray(value) && this.fields[key]?.type !== 'Upload') {
-                data[key] = Object.keys(data[key])
-                    .filter((k) => data[key][k] != null)
-                    .reduce((a, k) => ({ ...a, [k]: data[key][k] }), {});
-                if (Object.keys(data[key])?.length === 0) {
-                    if (this.logging) {
-                        console.log('Object is empty from result');
-                    }
-                    data[key] = null;
-                }
-            }
-            // Set type for graphql method
-            if (fieldsConfig[key]?.type === 'Float') {
-                if (value) {
-                    data[key] = Number(value);
-                }
-                else {
-                    data[key] = null;
-                }
-            }
-            if (fieldsConfig[key]?.fields && Object.keys(fieldsConfig[key]?.fields).length > 0) {
-                data[key] = this.prepareDataForRequest(config[key]?.fields, fieldsConfig[key]?.fields, data[key]);
-            }
-        }
-        return data;
-    }
-    /**
-     * Init fab buttons for mobile devices
-     */
-    initFabActions() {
-        const saveEvent = new EventEmitter();
-        this.fabButtons.push({ icon: 'bi-check-lg', color: 'var(--bs-success)', event: saveEvent });
-        saveEvent.subscribe(() => this.submit(false));
-        if (this.duplicate && this.operation === 'update') {
-            const event = new EventEmitter();
-            this.fabButtons.push({ icon: 'bi-back', color: 'var(--bs-info)', event });
-            event.subscribe(() => this.duplicateObject());
-        }
-        if (this.operation === 'update' && this.delete) {
-            const event = new EventEmitter();
-            this.fabButtons.push({ icon: 'bi-trash3', color: 'var(--bs-danger)', event });
-            event.subscribe(() => this.deleteObject());
-        }
-    }
-    /**
-     * Set file changes for process
-     */
-    processFileChanges(event) {
-        const index = this.fileChanges?.findIndex((e) => e.field === event.field);
-        if (index !== undefined && index !== -1) {
-            this.fileChanges[index] = event;
-        }
-        else if (this.fileChanges) {
-            this.fileChanges.push(event);
-        }
-        else {
-            this.fileChanges = [event];
-        }
-    }
-    formatDate(date) {
-        if (!date) {
-            return null;
-        }
-        const newDate = new Date(date);
-        return newDate.toISOString().substring(0, 16);
-    }
-    nestedObject(key, nestedObject, value) {
-        const props = key.split('.');
-        let result = nestedObject;
-        for (let i = 0; i < props.length; i++) {
-            if (value && i === props.length - 1) {
-                result[props[i]] = value;
-                return result[props[i]];
-            }
-            result =
-                result[props[i]]?.fields && Object.keys(result[props[i]]?.fields)?.length > 0
-                    ? result[props[i]]?.fields
-                    : result[props[i]];
-        }
-        return result;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ModelFormComponent, deps: [{ token: i1.GraphQLMetaService }, { token: i1.GraphQLService }, { token: i1.FormsService }, { token: i1.AuthService }, { token: i2.Router }, { token: i2.ActivatedRoute }, { token: i1.CmsService }, { token: i1.ToastService }, { token: i1.FileService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: ModelFormComponent, isStandalone: true, selector: "base-model-form", inputs: { modelName: "modelName", label: "label", id: "id", delete: "delete", onlyUpdateMode: "onlyUpdateMode", duplicate: "duplicate", logging: "logging", config: "config", showFavButton: "showFavButton" }, outputs: { finished: "finished" }, usesOnChanges: true, ngImport: i0, template: "@if (form) {\n  <div class=\"w-100\">\n    <div class=\"d-flex flex-row justify-content-between mt-3\">\n      <div class=\"responsive-back d-flex d-lg-none\">\n        <i class=\"bi bi-arrow-left\" routerLink=\"../\"></i>\n      </div>\n      <h2 class=\"mb-0\">\n        {{ label ? label : capitalizeFirstLetter(modelName) }} {{ operation === 'update' ? 'bearbeiten' : 'erstellen' }}\n      </h2>\n      <div class=\"d-none d-lg-flex flex-row align-items-center justify-content-end\">\n        @if (id && duplicate && !_loading) {\n          <button class=\"btn btn-outline-primary me-2\" (click)=\"duplicateObject()\">\n            Duplizieren\n          </button>\n        }\n        @if (!_loading) {\n          <button\n            class=\"btn btn-primary\"\n            type=\"button\"\n            [disabled]=\"!form.touched && !form.dirty\"\n            (click)=\"submit(false)\"\n            >\n            {{ operation === 'create' ? 'Erstellen' : 'Speichern' }}\n          </button>\n        }\n        @if (_loading) {\n          <button class=\"btn btn-primary\" type=\"button\" disabled>\n            <span class=\"spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span>\n            {{ operation === 'create' ? 'Erstellen' : 'Speichern' }}...\n          </button>\n        }\n      </div>\n    </div>\n    <form [formGroup]=\"form\">\n      <base-model-form-sub\n        [id]=\"id\"\n        [fields]=\"fields\"\n        [config]=\"config\"\n        [form]=\"form\"\n        (imageChanged)=\"imageChanged($event)\"\n        (fileChanged)=\"processFileChanges($event)\"\n      ></base-model-form-sub>\n      <div class=\"d-none d-lg-flex mt-4\" [ngClass]=\"id && delete ? 'justify-content-between' : 'justify-content-end'\">\n        @if (id && delete) {\n          <div>\n            <button class=\"btn btn-danger\" type=\"button\" (click)=\"deleteObject()\">L\u00F6schen</button>\n          </div>\n        }\n        <div>\n          @if (!_loading) {\n            <button\n              class=\"btn btn-primary\"\n              type=\"button\"\n              [disabled]=\"!form.touched && !form.dirty\"\n              (click)=\"submit(false)\"\n              >\n            {{ operation === 'create' ? 'Erstellen' : 'Speichern' }}\n          </button>\n        }\n        @if (_loading) {\n          <button class=\"btn btn-primary\" type=\"button\" disabled>\n            <span class=\"spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span>\n            {{ operation === 'create' ? 'Erstellen' : 'Speichern' }}...\n          </button>\n        }\n      </div>\n    </div>\n  </form>\n</div>\n}\n\n@if (showFavButton) {\n  <div class=\"d-block d-lg-none responsive-action-button\">\n    <base-fab-button [buttons]=\"fabButtons\"></base-fab-button>\n  </div>\n}\n", styles: [".responsive-back{display:flex;align-items:center;margin-right:6px}.responsive-back .bi-arrow-left{font-size:28px}h2{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.responsive-action-button{position:fixed;bottom:15px;right:15px;z-index:100}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: ModelFormSubComponent, selector: "base-model-form-sub", inputs: ["id", "parentKey", "fields", "form", "config"], outputs: ["imageChanged", "fileChanged"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: FabButtonComponent, selector: "base-fab-button", inputs: ["fabIcon", "buttons"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ModelFormComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'base-model-form', standalone: true, imports: [
-                        RouterLink,
-                        ReactiveFormsModule,
-                        ModelFormSubComponent,
-                        NgClass,
-                        FabButtonComponent
-                    ], template: "@if (form) {\n  <div class=\"w-100\">\n    <div class=\"d-flex flex-row justify-content-between mt-3\">\n      <div class=\"responsive-back d-flex d-lg-none\">\n        <i class=\"bi bi-arrow-left\" routerLink=\"../\"></i>\n      </div>\n      <h2 class=\"mb-0\">\n        {{ label ? label : capitalizeFirstLetter(modelName) }} {{ operation === 'update' ? 'bearbeiten' : 'erstellen' }}\n      </h2>\n      <div class=\"d-none d-lg-flex flex-row align-items-center justify-content-end\">\n        @if (id && duplicate && !_loading) {\n          <button class=\"btn btn-outline-primary me-2\" (click)=\"duplicateObject()\">\n            Duplizieren\n          </button>\n        }\n        @if (!_loading) {\n          <button\n            class=\"btn btn-primary\"\n            type=\"button\"\n            [disabled]=\"!form.touched && !form.dirty\"\n            (click)=\"submit(false)\"\n            >\n            {{ operation === 'create' ? 'Erstellen' : 'Speichern' }}\n          </button>\n        }\n        @if (_loading) {\n          <button class=\"btn btn-primary\" type=\"button\" disabled>\n            <span class=\"spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span>\n            {{ operation === 'create' ? 'Erstellen' : 'Speichern' }}...\n          </button>\n        }\n      </div>\n    </div>\n    <form [formGroup]=\"form\">\n      <base-model-form-sub\n        [id]=\"id\"\n        [fields]=\"fields\"\n        [config]=\"config\"\n        [form]=\"form\"\n        (imageChanged)=\"imageChanged($event)\"\n        (fileChanged)=\"processFileChanges($event)\"\n      ></base-model-form-sub>\n      <div class=\"d-none d-lg-flex mt-4\" [ngClass]=\"id && delete ? 'justify-content-between' : 'justify-content-end'\">\n        @if (id && delete) {\n          <div>\n            <button class=\"btn btn-danger\" type=\"button\" (click)=\"deleteObject()\">L\u00F6schen</button>\n          </div>\n        }\n        <div>\n          @if (!_loading) {\n            <button\n              class=\"btn btn-primary\"\n              type=\"button\"\n              [disabled]=\"!form.touched && !form.dirty\"\n              (click)=\"submit(false)\"\n              >\n            {{ operation === 'create' ? 'Erstellen' : 'Speichern' }}\n          </button>\n        }\n        @if (_loading) {\n          <button class=\"btn btn-primary\" type=\"button\" disabled>\n            <span class=\"spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span>\n            {{ operation === 'create' ? 'Erstellen' : 'Speichern' }}...\n          </button>\n        }\n      </div>\n    </div>\n  </form>\n</div>\n}\n\n@if (showFavButton) {\n  <div class=\"d-block d-lg-none responsive-action-button\">\n    <base-fab-button [buttons]=\"fabButtons\"></base-fab-button>\n  </div>\n}\n", styles: [".responsive-back{display:flex;align-items:center;margin-right:6px}.responsive-back .bi-arrow-left{font-size:28px}h2{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.responsive-action-button{position:fixed;bottom:15px;right:15px;z-index:100}\n"] }]
-        }], ctorParameters: () => [{ type: i1.GraphQLMetaService }, { type: i1.GraphQLService }, { type: i1.FormsService }, { type: i1.AuthService }, { type: i2.Router }, { type: i2.ActivatedRoute }, { type: i1.CmsService }, { type: i1.ToastService }, { type: i1.FileService }], propDecorators: { modelName: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], id: [{
-                type: Input
-            }], delete: [{
-                type: Input
-            }], onlyUpdateMode: [{
-                type: Input
-            }], duplicate: [{
-                type: Input
-            }], logging: [{
-                type: Input
-            }], config: [{
-                type: Input
-            }], showFavButton: [{
-                type: Input
-            }], finished: [{
-                type: Output
-            }] } });
-
-/**
- * Abstract Component for inputs and outputs only
- *
- * Hint for handling extensions of this component in project:
- * If you want to use complete custom services and methods, extend ModelFormComponent instead of ModelFormBaseComponent
- */
-class ModelFormBaseComponent {
-    cmsService;
-    toastService;
-    router;
-    route;
-    modelName;
-    label;
-    id;
-    delete = true;
-    onlyUpdateMode = false;
-    duplicate = false;
-    logging = false;
-    config = null;
-    showFavButton = true;
-    finished = new EventEmitter();
-    fabButtons = [];
-    operation;
-    constructor(cmsService, toastService, router, route) {
-        this.cmsService = cmsService;
-        this.toastService = toastService;
-        this.router = router;
-        this.route = route;
-    }
-    ngOnInit() {
-        this.initFabActions();
-    }
-    /**
-     * Init fab buttons for mobile devices
-     */
-    initFabActions() {
-        const saveEvent = new EventEmitter();
-        this.fabButtons.push({ icon: 'bi-check-lg', color: 'var(--bs-success)', event: saveEvent });
-        saveEvent.subscribe(() => this.submit());
-        if (this.duplicate && this.operation === 'update') {
-            const event = new EventEmitter();
-            this.fabButtons.push({ icon: 'bi-back', color: 'var(--bs-info)', event });
-            event.subscribe(() => this.duplicateObject());
-        }
-        if (this.operation === 'update' && this.delete) {
-            const event = new EventEmitter();
-            this.fabButtons.push({ icon: 'bi-trash3', color: 'var(--bs-danger)', event });
-            event.subscribe(() => this.deleteObject());
-        }
-    }
-    submit() { }
-    /**
-     * It calls the graphQLService to delete the object with the id of the object that is currently being edited
-     */
-    deleteObject() {
-        this.cmsService.deleteObject(this.id, this.modelName).then(() => {
-            this.toastService.show({
-                id: this.modelName + '-success',
-                type: ToastType.SUCCESS,
-                title: 'Erfolgreich',
-                description: this.label + ' wurde erfolgreich gelöscht.',
-            });
-            this.finished.emit(null);
-        });
-    }
-    /**
-     * It sends a GraphQL mutation to the server to duplicate the object
-     */
-    async duplicateObject() {
-        this.cmsService.duplicateObject(this.id, this.modelName).then(async (value) => {
-            if (value?.id) {
-                await this.router.navigate(['../'], { relativeTo: this.route });
-                this.toastService.show({
-                    id: this.modelName + '-success',
-                    type: ToastType.SUCCESS,
-                    title: 'Erfolgreich',
-                    description: this.label + ' wurde erfolgreich dupliziert.',
-                });
-            }
-            else {
-                this.finished.emit(null);
-            }
-        });
-    }
-    /**
-     * It takes a string, capitalizes the first letter, and returns the modified string
-     *
-     * @param value - The string to capitalize.
-     * @returns The first letter of the string is being capitalized and the rest of the string is being returned.
-     */
-    capitalizeFirstLetter(value) {
-        return this.cmsService.capitalizeFirstLetter(value);
-    }
-    /**
-     * It takes an AbstractControl and returns a FormControl
-     *
-     * @param control - AbstractControl | null | undefined
-     * @returns A FormControl
-     */
-    transformToControl(control) {
-        return control;
-    }
-    formatDate(date) {
-        if (!date) {
-            return null;
-        }
-        const newDate = new Date(date);
-        return newDate.toISOString().substring(0, 16);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ModelFormBaseComponent, deps: [{ token: i1.CmsService }, { token: i1.ToastService }, { token: i2.Router }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.2", type: ModelFormBaseComponent, isStandalone: true, selector: "ng-component", inputs: { modelName: "modelName", label: "label", id: "id", delete: "delete", onlyUpdateMode: "onlyUpdateMode", duplicate: "duplicate", logging: "logging", config: "config", showFavButton: "showFavButton" }, outputs: { finished: "finished" }, ngImport: i0, template: '', isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ModelFormBaseComponent, decorators: [{
-            type: Component,
-            args: [{
-                    template: '',
-                    standalone: true,
-                }]
-        }], ctorParameters: () => [{ type: i1.CmsService }, { type: i1.ToastService }, { type: i2.Router }, { type: i2.ActivatedRoute }], propDecorators: { modelName: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], id: [{
-                type: Input
-            }], delete: [{
-                type: Input
-            }], onlyUpdateMode: [{
-                type: Input
-            }], duplicate: [{
-                type: Input
-            }], logging: [{
-                type: Input
-            }], config: [{
-                type: Input
-            }], showFavButton: [{
-                type: Input
-            }], finished: [{
-                type: Output
-            }] } });
-
-class ModelTableComponent {
-    graphQLMetaService;
-    graphQLService;
-    cmsService;
-    toastService;
-    scrollService;
-    storageService;
-    modelName;
-    objectId;
-    createMode = false;
-    logging = false;
-    create = true;
-    update = true;
-    delete = true;
-    import = true;
-    export = true;
-    duplicate = true;
-    modelConfig = null;
-    config;
-    showFavButton = false;
-    idSelected = new EventEmitter();
-    createModeChanged = new EventEmitter();
-    customFormTemplate;
-    uniqueField = 'id';
-    tableFields = {
-        id: { label: 'ID' },
-        name: { label: 'Name' },
-        title: { label: 'Titel' },
-        description: { label: 'Beschreibung' },
-        email: { label: 'E-Mail' },
-        createdAt: { label: 'Erstellt am', dateFormat: 'dd.MM.YYYY HH:mm' },
-        updatedAt: { label: 'Bearbeitet am', dateFormat: 'dd.MM.YYYY HH:mm' },
-    };
-    meta;
-    objects = [];
-    availableFields = [];
-    id = '';
-    queryName = null;
-    camelModelName;
-    possibleFields = {};
-    componentRef = undefined;
-    totalCount;
-    selectedPageIndex = 0;
-    pages = [];
-    pageItemsLimitControl = new FormControl(25);
-    pageOptions = [
-        {
-            text: '25',
-            value: 25,
-        },
-        {
-            text: '50',
-            value: 50,
-        },
-        {
-            text: '75',
-            value: 75,
-        },
-        {
-            text: '100',
-            value: 100,
-        },
-        {
-            text: '200',
-            value: 200,
-        },
-    ];
-    subscription = new Subscription();
-    constructor(graphQLMetaService, graphQLService, cmsService, toastService, scrollService, storageService) {
-        this.graphQLMetaService = graphQLMetaService;
-        this.graphQLService = graphQLService;
-        this.cmsService = cmsService;
-        this.toastService = toastService;
-        this.scrollService = scrollService;
-        this.storageService = storageService;
-    }
-    ngAfterViewInit() {
-        // Needed time out to prevent ExpressionChangedAfterItHasBeenCheckedError
-        setTimeout(() => {
-            this.integrateCustomFormComponent();
-        }, 10);
-    }
-    ngOnInit() {
-        const pageItemsLimit = this.storageService.load('pageItemsLimit');
-        this.pageItemsLimitControl.setValue(pageItemsLimit ? pageItemsLimit : 25, { onlySelf: true, emitEvent: false });
-        this.graphQLMetaService.getMeta().subscribe((meta) => {
-            this.meta = meta;
-            if (this.modelName) {
-                this.init();
-            }
-            if (this.objectId) {
-                this.id = this.objectId;
-                // Needed time out for rerender
-                setTimeout(() => {
-                    this.integrateCustomFormComponent();
-                }, 10);
-            }
-        });
-    }
-    ngOnChanges(changes) {
-        if (changes['modelName'] && this.meta) {
-            this.init();
-        }
-        if (changes['objectId'] && this.meta) {
-            if (this.id !== this.objectId) {
-                if (this.logging) {
-                    console.log('ModelTableComponent::ngOnChanges->selectedId', this.id);
-                }
-                this.id = this.objectId;
-            }
-        }
-        this.setChangesInComponentRef();
-    }
-    ngOnDestroy() {
-        this.subscription.unsubscribe();
-    }
-    /**
-     * We're using the `meta` service to get the fields that are available for the `find` query for the model we're working
-     * with. We're then using that information to populate the `availableFields` array
-     */
-    async init() {
-        this.availableFields = [];
-        this.pages = [];
-        this.totalCount = null;
-        this.camelModelName = this.kebabToCamelCase(this.modelName);
-        // Set query name
-        if (!this.modelConfig?.queryName) {
-            this.queryName = 'findAndCount' + this.capitalizeFirstLetter(this.camelModelName) + 's';
-        }
-        else {
-            this.queryName = this.modelConfig?.queryName;
-        }
-        if (this.modelConfig?.tableFields) {
-            this.tableFields = this.modelConfig.tableFields;
-        }
-        if (this.logging) {
-            console.log('ModelTableComponent::init->modelName', this.modelName);
-            console.log('ModelTableComponent::init->camelModelName', this.camelModelName);
-            console.log('ModelTableComponent::init->queryName', this.queryName);
-            console.log('ModelTableComponent::init->tableFields', this.tableFields);
-        }
-        this.possibleFields = this.meta.getFields(this.queryName).fields;
-        let keys;
-        if (this.possibleFields?.items && Object.keys(this.possibleFields?.items?.fields).length > 0) {
-            keys = Object.keys(this.possibleFields.items.fields);
-        }
-        else {
-            keys = Object.keys(this.possibleFields);
-        }
-        const tableFieldKeys = Object.keys(this.tableFields);
-        tableFieldKeys?.forEach((field) => {
-            if (keys.includes(field)) {
-                this.availableFields.push(field);
-            }
-        });
-        if (this.logging) {
-            console.log('ModelTableComponent::init->possibleFields', this.possibleFields);
-            console.log('ModelTableComponent::init->keys', keys);
-            console.log('ModelTableComponent::init->availableFields', this.availableFields);
-        }
-        this.selectedPageIndex = this.storageService.load('pageIndex') ? this.storageService.load('pageIndex') : 0;
-        this.objects = await this.loadObjects(this.availableFields, 0, this.pageItemsLimitControl.value);
-        this.subscribeToPageItems();
-    }
-    subscribeToPageItems() {
-        this.subscription.add(this.pageItemsLimitControl.valueChanges.subscribe({
-            next: async (value) => {
-                this.selectedPageIndex = 0;
-                this.storageService.save('pageIndex', this.selectedPageIndex);
-                this.objects = await this.loadObjects(this.availableFields, 0, value);
-                this.storageService.save('pageItemsLimit', value);
-            },
-        }));
-    }
-    integrateCustomFormComponent() {
-        if (!this.customFormTemplate || this.componentRef) {
-            return;
-        }
-        const customComponent = this.modelConfig?.customTemplateComponent;
-        if (customComponent) {
-            this.componentRef = this.customFormTemplate?.createComponent(customComponent);
-            this.setChangesInComponentRef();
-            this.componentRef.instance.finished.subscribe(() => {
-                this.selectId('');
-            });
-        }
-    }
-    setChangesInComponentRef() {
-        if (this.componentRef) {
-            const data = {
-                config: this.config,
-                delete: this.delete,
-                duplicate: this.duplicate,
-                id: this.id,
-                label: this.modelConfig?.label,
-                logging: this.logging,
-                modelName: this.camelModelName,
-                showFavButton: this.showFavButton,
-            };
-            for (const [key, value] of Object.entries(data)) {
-                this.componentRef.setInput(key, value);
-            }
-        }
-    }
-    /**
-     * When the user clicks the "Create New" button, the createModeChanged event is emitted, which is then handled by the
-     * parent component
-     */
-    createNewObject() {
-        this.createMode = true;
-        this.createModeChanged.emit(true);
-    }
-    /**
-     * It loads the objects from the database and stores them in the objects variable
-     *
-     * @param fields - string[] - The fields you want to load from the database.
-     * @param skip
-     * @param limit
-     */
-    loadObjects(fields, skip = 0, limit = 25) {
-        return new Promise((resolve, reject) => {
-            const requestFields = [...fields];
-            const idInFields = requestFields.find((e) => e === 'id');
-            if (!idInFields) {
-                requestFields.push('id');
-            }
-            const isFindAndCount = this.queryName.includes('findAndCount');
-            this.graphQLService
-                .graphQl(this.queryName, {
-                arguments: {
-                    limit: isFindAndCount ? limit : null,
-                    skip: isFindAndCount ? skip : null,
-                },
-                fields: isFindAndCount ? ['totalCount', { items: requestFields }] : requestFields,
-                type: GraphQLRequestType.QUERY,
-            })
-                .subscribe({
-                next: (value) => {
-                    let items;
-                    if (this.logging) {
-                        console.log('ModelTableComponent::loadObjects->value', value);
-                    }
-                    if (value?.totalCount >= 0) {
-                        items = value.items;
-                        this.totalCount = value.totalCount;
-                        this.pages = [];
-                        let numbers = 0;
-                        while (numbers < this.totalCount) {
-                            this.pages.push({
-                                skip: numbers,
-                                limit: this.pageItemsLimitControl.value,
-                            });
-                            numbers = numbers + this.pageItemsLimitControl.value;
-                        }
-                        const loadedIndex = this.storageService.load('pageIndex');
-                        if (loadedIndex) {
-                            if (loadedIndex > this.pages.length) {
-                                this.selectedPageIndex = 0;
-                                this.storageService.save('pageIndex');
-                            }
-                        }
-                    }
-                    else {
-                        items = value;
-                    }
-                    resolve(items);
-                },
-                error: (err) => {
-                    console.log('Error on loading objects', err);
-                    reject(err);
-                },
-            });
-        });
-    }
-    /**
-     * If the update property is true, then set the selectedId property to the id of the object passed in, and emit the
-     * selectedId property
-     */
-    selectId(object) {
-        if (!object) {
-            this.createMode = false;
-            this.createModeChanged.emit(false);
-        }
-        if (this.update) {
-            this.id = object['id'];
-            this.idSelected.emit(this.id);
-        }
-    }
-    openNewTab(object) {
-        window.open(location.href + '/' + object['id'], '_blank');
-    }
-    /**
-     * It calls the duplicateObject function in the cmsService, passing in the id of the object to be duplicated and the
-     * modelName of the object
-     */
-    async duplicateObject(id) {
-        await this.cmsService.duplicateObject(id, this.camelModelName);
-        this.selectedPageIndex = this.storageService.load('pageIndex') ? this.storageService.load('pageIndex') : 0;
-        this.objects = await this.loadObjects(this.availableFields, this.pages[this.selectedPageIndex].skip, this.pages[this.selectedPageIndex].limit);
-    }
-    /**
-     * It calls the deleteObject function in the cmsService, passing in the id of the object to delete and the name of the
-     * model
-     */
-    async deleteObject(id) {
-        await this.cmsService.deleteObject(id, this.camelModelName);
-        this.selectedPageIndex = this.storageService.load('pageIndex') ? this.storageService.load('pageIndex') : 0;
-        this.objects = await this.loadObjects(this.availableFields, this.pages[this.selectedPageIndex].skip, this.pages[this.selectedPageIndex].limit);
-    }
-    /**
-     * It takes a string, capitalizes the first letter, and returns the modified string
-     */
-    capitalizeFirstLetter(value) {
-        return this.cmsService.capitalizeFirstLetter(value);
-    }
-    /**
-     * Kebab to camel case string
-     */
-    kebabToCamelCase(str) {
-        return str.replace(/-./g, (match) => match[1].toUpperCase());
-    }
-    /**
-     * Import objects from json file
-     */
-    processImport(event) {
-        // Create a new FileReader() object
-        const reader = new FileReader();
-        // Setup the callback event to run when the file is read
-        reader.onload = async (readerEvent) => {
-            let jsonResult = JSON.parse(readerEvent.target.result);
-            if (!Array.isArray(jsonResult)) {
-                jsonResult = [jsonResult];
-            }
-            for (let i = 0; i < jsonResult.length; i++) {
-                try {
-                    this.graphQLService
-                        .graphQl('create' + this.capitalizeFirstLetter(this.modelName), {
-                        arguments: { input: jsonResult[i] },
-                        fields: ['id'],
-                        type: GraphQLRequestType.MUTATION,
-                    })
-                        .subscribe({
-                        next: async () => {
-                            this.toastService.show({
-                                id: this.modelName + '-' + i + '-success',
-                                type: ToastType.SUCCESS,
-                                title: 'Erfolgreich',
-                                description: 'Element ' + (i + 1) + ' von ' + jsonResult.length + ' erfolgreich importiert.',
-                            });
-                            if (i === jsonResult.length - 1) {
-                                this.selectedPageIndex = this.storageService.load('pageIndex')
-                                    ? this.storageService.load('pageIndex')
-                                    : 0;
-                                this.objects = await this.loadObjects(this.availableFields, this.pages[this.selectedPageIndex].skip, this.pages[this.selectedPageIndex].limit);
-                            }
-                        },
-                        error: () => {
-                            this.toastService.show({
-                                id: this.modelName + '-' + i + '-error',
-                                type: ToastType.ERROR,
-                                title: 'Error',
-                                description: 'Element ' + (i + 1) + ' von ' + jsonResult.length + ' konnte nicht importiert werden.',
-                            });
-                        },
-                    });
-                }
-                catch (e) {
-                    this.toastService.show({
-                        id: this.modelName + '-' + i + '-error',
-                        type: ToastType.ERROR,
-                        title: 'Error',
-                        description: 'Element ' + (i + 1) + ' von ' + jsonResult.length + ' konnte nicht importiert werden.',
-                    });
-                }
-            }
-        };
-        // Read the file
-        reader.readAsText(event.target.files[0]);
-    }
-    /**
-     * Export objects as json
-     */
-    async processExport() {
-        const keys = this.getAllKeys();
-        const items = await this.loadObjects(keys, this.pages[this.selectedPageIndex].skip, this.pages[this.selectedPageIndex].limit);
-        const data = JSON.stringify(items);
-        const blob = new Blob([data], { type: 'text/json;charset=utf-8;' });
-        const url = URL.createObjectURL(blob);
-        const link = document.createElement('a');
-        link.setAttribute('href', url);
-        link.setAttribute('download', this.modelName + 's.json');
-        document.body.appendChild(link);
-        link.click();
-    }
-    /**
-     * Get all keys for request to export objects as json
-     */
-    getAllKeys() {
-        const items = [];
-        for (const [key, value] of Object.entries(this.possibleFields)) {
-            if (!this.possibleFields[key].fields || Object.keys(this.possibleFields[key].fields).length === 0) {
-                items.push(key);
-            }
-        }
-        return items;
-    }
-    async selectPage(i) {
-        if (!this.pages[i]) {
-            return;
-        }
-        this.selectedPageIndex = i;
-        await this.scrollService.scrollTo('model-table-top');
-        this.storageService.save('pageIndex', this.selectedPageIndex);
-        this.objects = await this.loadObjects(this.availableFields, this.pages[this.selectedPageIndex].skip, this.pages[this.selectedPageIndex].limit);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ModelTableComponent, deps: [{ token: i1.GraphQLMetaService }, { token: i1.GraphQLService }, { token: i1.CmsService }, { token: i1.ToastService }, { token: i1.ScrollService }, { token: i1.StorageService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: ModelTableComponent, isStandalone: true, selector: "base-model-table", inputs: { modelName: "modelName", objectId: "objectId", createMode: "createMode", logging: "logging", create: "create", update: "update", delete: "delete", import: "import", export: "export", duplicate: "duplicate", modelConfig: "modelConfig", config: "config", showFavButton: "showFavButton" }, outputs: { idSelected: "idSelected", createModeChanged: "createModeChanged" }, viewQueries: [{ propertyName: "customFormTemplate", first: true, predicate: ["customFormTemplate"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: "@if (!id && !createMode) {\n  <div>\n    <div class=\"w-100 d-flex flex-row justify-content-between align-items-center mb-2 mb-lg-4\">\n      @if (modelName) {\n        <h2 id=\"model-table-top\" class=\"mb-0\">\n          {{\n          modelConfig?.plural\n          ? modelConfig?.plural\n          : modelConfig?.label\n          ? modelConfig?.label\n          : capitalizeFirstLetter(camelModelName) + 's'\n          }}\n        </h2>\n      }\n      <div class=\"d-flex align-items-center d-none d-lg-block\">\n        <input #importFile type=\"file\" accept=\".json\" class=\"d-none\" (change)=\"processImport($event)\" />\n        @if (import || export) {\n          <div class=\"btn-group me-4\">\n            <i\n              class=\"bi bi-three-dots-vertical\"\n              id=\"settingsDropdown\"\n              type=\"button\"\n              data-bs-toggle=\"dropdown\"\n              data-bs-auto-close=\"true\"\n              aria-expanded=\"false\"\n            ></i>\n            <ul class=\"dropdown-menu dropdown-menu-end\" aria-labelledby=\"settingsDropdown\">\n              <li>@if (export) {\n                <a class=\"dropdown-item cursor-pointer\" (click)=\"processExport()\">Export</a>\n              }</li>\n              <li>@if (import) {\n                <a class=\"dropdown-item cursor-pointer\" (click)=\"importFile.click()\"> Import </a>\n              }</li>\n            </ul>\n          </div>\n        }\n        @if (create) {\n          <button class=\"btn btn-primary\" (click)=\"createNewObject()\">Erstellen</button>\n        }\n      </div>\n    </div>\n    @if (totalCount >= 0) {\n      <div class=\"container-fluid\">\n        <nav class=\"d-flex row\">\n          <div class=\"col-12 col-md-2\"></div>\n          <ul class=\"pagination justify-content-center col-12 col-md-8\">\n            <li class=\"page-item\">\n              <a\n                class=\"page-link\"\n                (click)=\"selectPage(selectedPageIndex - 1)\"\n                aria-label=\"Previous\"\n                [ngClass]=\"{ disabled: selectedPageIndex - 1 > 0 }\"\n                >\n                <span aria-hidden=\"true\">&laquo;</span>\n              </a>\n            </li>\n            @for (page of pages; track page; let i = $index) {\n              <li class=\"page-item\">\n                <a class=\"page-link\" [ngClass]=\"{ active: selectedPageIndex === i }\" (click)=\"selectPage(i)\">{{ i + 1 }}</a>\n              </li>\n            }\n            <li class=\"page-item\">\n              <a\n                class=\"page-link\"\n                (click)=\"selectPage(selectedPageIndex + 1)\"\n                aria-label=\"Next\"\n                [ngClass]=\"{ disabled: pages[selectedPageIndex + 1] }\"\n                >\n                <span aria-hidden=\"true\">&raquo;</span>\n              </a>\n            </li>\n          </ul>\n          <div class=\"col-12 col-md-2\">\n            <base-select [options]=\"pageOptions\" [control]=\"pageItemsLimitControl\"></base-select>\n          </div>\n        </nav>\n      </div>\n    }\n    <div\n      class=\"table-responsive\"\n      [ltContextMenu]=\"contextMenu\"\n      [selectors]=\"'.object-col'\"\n      #contextMenuData=\"contextMenuData\"\n      >\n      <table class=\"table table-hover bg-white d-none d-lg-table\">\n        <thead>\n          <tr>\n            @for (field of availableFields; track field) {\n              <th\n                scope=\"col\"\n                [baseSort]=\"objects\"\n                (baseSorted)=\"objects = $event\"\n                data-order=\"desc\"\n                [attr.data-name]=\"field\"\n                >\n                {{ tableFields[field]?.label ? tableFields[field]?.label : capitalizeFirstLetter(field) }}\n              </th>\n            }\n          </tr>\n        </thead>\n        <tbody>\n          @for (object of objects; track object) {\n            <tr class=\"object-col\" [id]=\"object[uniqueField]\">\n              @for (field of availableFields; track field) {\n                <td class=\"cursor-pointer\" (click)=\"selectId(object)\">\n                  @if (tableFields[field]?.dateFormat) {\n                    {{ object[field] | date : tableFields[field]?.dateFormat }} Uhr\n                  }\n                  @if (tableFields[field]?.enumValues) {\n                    {{ tableFields[field]?.enumValues[object[field]]?.text }}\n                  }\n                  @if (!tableFields[field]?.dateFormat && !tableFields[field]?.enumValues) {\n                    {{ object[field] | baseEllipses : 60 }}\n                  }\n                </td>\n              }\n            </tr>\n          }\n        </tbody>\n      </table>\n      <div class=\"d-flex d-lg-none flex-column flex-grow-1\">\n        @for (object of objects; track object) {\n          <div class=\"table-card\" [id]=\"object[uniqueField]\">\n            @for (field of availableFields; track field; let i = $index) {\n              <div class=\"table-card-entry\" (click)=\"selectId(object)\">\n                @if (i > 0) {\n                  <b\n                    >{{ tableFields[field]?.label ? tableFields[field]?.label : capitalizeFirstLetter(field) }}:</b\n                    >\n                  }\n                  <p [ngClass]=\"{ 'table-card-entry-first': i === 0 }\">\n                    @if (tableFields[field]?.dateFormat) {\n                      {{ object[field] | date : tableFields[field]?.dateFormat }} Uhr\n                    }\n                    @if (tableFields[field]?.enumValues) {\n                      {{ tableFields[field]?.enumValues[object[field]]?.text }}\n                    }\n                    @if (!tableFields[field]?.dateFormat && !tableFields[field]?.enumValues) {\n                      {{ object[field] | baseEllipses : 60 }}\n                    }\n                  </p>\n                </div>\n              }\n            </div>\n          }\n        </div>\n        @if (totalCount >= 0) {\n          <div class=\"container-fluid\">\n            <nav class=\"d-flex row\">\n              <div class=\"col-12 col-md-2\"></div>\n              <ul class=\"pagination justify-content-center col-12 col-md-8\">\n                <li class=\"page-item\">\n                  <a\n                    class=\"page-link\"\n                    (click)=\"selectPage(selectedPageIndex - 1)\"\n                    aria-label=\"Previous\"\n                    [ngClass]=\"{ disabled: selectedPageIndex - 1 > 0 }\"\n                    >\n                    <span aria-hidden=\"true\">&laquo;</span>\n                  </a>\n                </li>\n                @for (page of pages; track page; let i = $index) {\n                  <li class=\"page-item\">\n                    <a class=\"page-link\" [ngClass]=\"{ active: selectedPageIndex === i }\" (click)=\"selectPage(i)\">{{ i + 1 }}</a>\n                  </li>\n                }\n                <li class=\"page-item\">\n                  <a\n                    class=\"page-link\"\n                    (click)=\"selectPage(selectedPageIndex + 1)\"\n                    aria-label=\"Next\"\n                    [ngClass]=\"{ disabled: pages[selectedPageIndex + 1] }\"\n                    >\n                    <span aria-hidden=\"true\">&raquo;</span>\n                  </a>\n                </li>\n              </ul>\n              <div class=\"col-12 col-md-2\">\n                <base-select [options]=\"pageOptions\" [control]=\"pageItemsLimitControl\"></base-select>\n              </div>\n            </nav>\n          </div>\n        }\n        <div class=\"context-menu\" #contextMenu>\n          <div class=\"context-menu-item\" (click)=\"selectId({ id: contextMenuData.clickedElement?.id })\">Bearbeiten</div>\n          <div class=\"context-menu-item\" (click)=\"openNewTab({ id: contextMenuData.clickedElement?.id })\">\n            In neuen Tab \u00F6ffnen\n          </div>\n          @if (duplicate) {\n            <div class=\"context-menu-item\" (click)=\"duplicateObject(contextMenuData.clickedElement?.id)\">\n              Duplizieren\n            </div>\n          }\n          @if (delete) {\n            <div class=\"context-menu-item\" (click)=\"deleteObject(contextMenuData.clickedElement?.id)\">\n              L\u00F6schen\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  }\n\n  @if (id || createMode) {\n    <div class=\"w-100\">\n      <button class=\"d-none d-lg-block btn btn-outline-primary mb-3\" (click)=\"selectId('')\">Zur\u00FCck</button>\n      @if (!modelConfig?.customTemplateComponent) {\n        <base-model-form\n          [modelName]=\"camelModelName\"\n          [label]=\"modelConfig?.label\"\n          [config]=\"config\"\n          [logging]=\"logging\"\n          [id]=\"id\"\n          (finished)=\"selectId('')\"\n          [delete]=\"delete\"\n          [duplicate]=\"duplicate\"\n          [showFavButton]=\"showFavButton\"\n        ></base-model-form>\n      }\n      @if (modelConfig?.customTemplateComponent) {\n        <ng-template #customFormTemplate></ng-template>\n      }\n    </div>\n  }\n\n  <div class=\"responsive-action-button d-block d-lg-none\">\n    @if (!(id || createMode) && showFavButton) {\n      <base-fab-button\n        [fabIcon]=\"'bi-plus'\"\n        (click)=\"createNewObject()\"\n      ></base-fab-button>\n    }\n  </div>\n", styles: [".cursor-pointer{cursor:pointer}.asc:after,.desc:after{border-style:solid;border-width:.2em .2em 0 0;content:\"\";display:inline-block;height:.45em;left:5px;position:relative;transform:rotate(-45deg);vertical-align:middle;width:.45em}.asc:after{transform:rotate(135deg)}td{vertical-align:middle}.bi,th{cursor:pointer;-webkit-user-select:none;user-select:none}.table>:not(:first-child){border-top:0}table{border-radius:.25rem;border-color:#e2e8f0!important}table thead{text-transform:uppercase;font-size:12px}table thead th{padding:12px 24px}table tbody tr td{font-weight:400!important;font-size:16px;padding:16px 24px}.context-menu{opacity:.01%;pointer-events:none;background-color:#fff;border:1px solid #ccc;box-shadow:1px 1px 10px #0000001a;padding:10px 0;position:fixed;top:0;left:0;width:200px;z-index:999}.context-menu-item{cursor:pointer;padding:8px 15px}.context-menu-item:hover{color:var(--bs-primary)}.table-card{background:var(--bs-white);padding:10px;margin-bottom:10px}.table-card-entry{margin-top:4px}.table-card-entry-first{font-size:18px;font-weight:800;color:var(--bs-primary)}.responsive-action-button{position:fixed;bottom:15px;right:15px}.bi-three-dots-vertical{font-size:18px;line-height:18px}.page-item{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SelectComponent, selector: "base-select", inputs: ["id", "name", "infoText", "label", "placeholder", "objectPath", "control", "tabIndex", "required", "multiple", "search", "options"] }, { kind: "directive", type: ContextMenuDirective, selector: "[ltContextMenu]", inputs: ["contextMenuData", "ltContextMenu", "xGap", "yGap", "overflowSpace", "selectors"], outputs: ["clickedElement"], exportAs: ["contextMenuData"] }, { kind: "directive", type: SortDirective, selector: "[baseSort]", inputs: ["baseSort"], outputs: ["baseSorted"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: EllipsesPipe, name: "baseEllipses" }, { kind: "component", type: ModelFormComponent, selector: "base-model-form", inputs: ["modelName", "label", "id", "delete", "onlyUpdateMode", "duplicate", "logging", "config", "showFavButton"], outputs: ["finished"] }, { kind: "component", type: FabButtonComponent, selector: "base-fab-button", inputs: ["fabIcon", "buttons"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ModelTableComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'base-model-table', standalone: true, imports: [
-                        NgClass,
-                        SelectComponent,
-                        ContextMenuDirective,
-                        SortDirective,
-                        DatePipe,
-                        EllipsesPipe,
-                        ModelFormComponent,
-                        FabButtonComponent,
-                    ], template: "@if (!id && !createMode) {\n  <div>\n    <div class=\"w-100 d-flex flex-row justify-content-between align-items-center mb-2 mb-lg-4\">\n      @if (modelName) {\n        <h2 id=\"model-table-top\" class=\"mb-0\">\n          {{\n          modelConfig?.plural\n          ? modelConfig?.plural\n          : modelConfig?.label\n          ? modelConfig?.label\n          : capitalizeFirstLetter(camelModelName) + 's'\n          }}\n        </h2>\n      }\n      <div class=\"d-flex align-items-center d-none d-lg-block\">\n        <input #importFile type=\"file\" accept=\".json\" class=\"d-none\" (change)=\"processImport($event)\" />\n        @if (import || export) {\n          <div class=\"btn-group me-4\">\n            <i\n              class=\"bi bi-three-dots-vertical\"\n              id=\"settingsDropdown\"\n              type=\"button\"\n              data-bs-toggle=\"dropdown\"\n              data-bs-auto-close=\"true\"\n              aria-expanded=\"false\"\n            ></i>\n            <ul class=\"dropdown-menu dropdown-menu-end\" aria-labelledby=\"settingsDropdown\">\n              <li>@if (export) {\n                <a class=\"dropdown-item cursor-pointer\" (click)=\"processExport()\">Export</a>\n              }</li>\n              <li>@if (import) {\n                <a class=\"dropdown-item cursor-pointer\" (click)=\"importFile.click()\"> Import </a>\n              }</li>\n            </ul>\n          </div>\n        }\n        @if (create) {\n          <button class=\"btn btn-primary\" (click)=\"createNewObject()\">Erstellen</button>\n        }\n      </div>\n    </div>\n    @if (totalCount >= 0) {\n      <div class=\"container-fluid\">\n        <nav class=\"d-flex row\">\n          <div class=\"col-12 col-md-2\"></div>\n          <ul class=\"pagination justify-content-center col-12 col-md-8\">\n            <li class=\"page-item\">\n              <a\n                class=\"page-link\"\n                (click)=\"selectPage(selectedPageIndex - 1)\"\n                aria-label=\"Previous\"\n                [ngClass]=\"{ disabled: selectedPageIndex - 1 > 0 }\"\n                >\n                <span aria-hidden=\"true\">&laquo;</span>\n              </a>\n            </li>\n            @for (page of pages; track page; let i = $index) {\n              <li class=\"page-item\">\n                <a class=\"page-link\" [ngClass]=\"{ active: selectedPageIndex === i }\" (click)=\"selectPage(i)\">{{ i + 1 }}</a>\n              </li>\n            }\n            <li class=\"page-item\">\n              <a\n                class=\"page-link\"\n                (click)=\"selectPage(selectedPageIndex + 1)\"\n                aria-label=\"Next\"\n                [ngClass]=\"{ disabled: pages[selectedPageIndex + 1] }\"\n                >\n                <span aria-hidden=\"true\">&raquo;</span>\n              </a>\n            </li>\n          </ul>\n          <div class=\"col-12 col-md-2\">\n            <base-select [options]=\"pageOptions\" [control]=\"pageItemsLimitControl\"></base-select>\n          </div>\n        </nav>\n      </div>\n    }\n    <div\n      class=\"table-responsive\"\n      [ltContextMenu]=\"contextMenu\"\n      [selectors]=\"'.object-col'\"\n      #contextMenuData=\"contextMenuData\"\n      >\n      <table class=\"table table-hover bg-white d-none d-lg-table\">\n        <thead>\n          <tr>\n            @for (field of availableFields; track field) {\n              <th\n                scope=\"col\"\n                [baseSort]=\"objects\"\n                (baseSorted)=\"objects = $event\"\n                data-order=\"desc\"\n                [attr.data-name]=\"field\"\n                >\n                {{ tableFields[field]?.label ? tableFields[field]?.label : capitalizeFirstLetter(field) }}\n              </th>\n            }\n          </tr>\n        </thead>\n        <tbody>\n          @for (object of objects; track object) {\n            <tr class=\"object-col\" [id]=\"object[uniqueField]\">\n              @for (field of availableFields; track field) {\n                <td class=\"cursor-pointer\" (click)=\"selectId(object)\">\n                  @if (tableFields[field]?.dateFormat) {\n                    {{ object[field] | date : tableFields[field]?.dateFormat }} Uhr\n                  }\n                  @if (tableFields[field]?.enumValues) {\n                    {{ tableFields[field]?.enumValues[object[field]]?.text }}\n                  }\n                  @if (!tableFields[field]?.dateFormat && !tableFields[field]?.enumValues) {\n                    {{ object[field] | baseEllipses : 60 }}\n                  }\n                </td>\n              }\n            </tr>\n          }\n        </tbody>\n      </table>\n      <div class=\"d-flex d-lg-none flex-column flex-grow-1\">\n        @for (object of objects; track object) {\n          <div class=\"table-card\" [id]=\"object[uniqueField]\">\n            @for (field of availableFields; track field; let i = $index) {\n              <div class=\"table-card-entry\" (click)=\"selectId(object)\">\n                @if (i > 0) {\n                  <b\n                    >{{ tableFields[field]?.label ? tableFields[field]?.label : capitalizeFirstLetter(field) }}:</b\n                    >\n                  }\n                  <p [ngClass]=\"{ 'table-card-entry-first': i === 0 }\">\n                    @if (tableFields[field]?.dateFormat) {\n                      {{ object[field] | date : tableFields[field]?.dateFormat }} Uhr\n                    }\n                    @if (tableFields[field]?.enumValues) {\n                      {{ tableFields[field]?.enumValues[object[field]]?.text }}\n                    }\n                    @if (!tableFields[field]?.dateFormat && !tableFields[field]?.enumValues) {\n                      {{ object[field] | baseEllipses : 60 }}\n                    }\n                  </p>\n                </div>\n              }\n            </div>\n          }\n        </div>\n        @if (totalCount >= 0) {\n          <div class=\"container-fluid\">\n            <nav class=\"d-flex row\">\n              <div class=\"col-12 col-md-2\"></div>\n              <ul class=\"pagination justify-content-center col-12 col-md-8\">\n                <li class=\"page-item\">\n                  <a\n                    class=\"page-link\"\n                    (click)=\"selectPage(selectedPageIndex - 1)\"\n                    aria-label=\"Previous\"\n                    [ngClass]=\"{ disabled: selectedPageIndex - 1 > 0 }\"\n                    >\n                    <span aria-hidden=\"true\">&laquo;</span>\n                  </a>\n                </li>\n                @for (page of pages; track page; let i = $index) {\n                  <li class=\"page-item\">\n                    <a class=\"page-link\" [ngClass]=\"{ active: selectedPageIndex === i }\" (click)=\"selectPage(i)\">{{ i + 1 }}</a>\n                  </li>\n                }\n                <li class=\"page-item\">\n                  <a\n                    class=\"page-link\"\n                    (click)=\"selectPage(selectedPageIndex + 1)\"\n                    aria-label=\"Next\"\n                    [ngClass]=\"{ disabled: pages[selectedPageIndex + 1] }\"\n                    >\n                    <span aria-hidden=\"true\">&raquo;</span>\n                  </a>\n                </li>\n              </ul>\n              <div class=\"col-12 col-md-2\">\n                <base-select [options]=\"pageOptions\" [control]=\"pageItemsLimitControl\"></base-select>\n              </div>\n            </nav>\n          </div>\n        }\n        <div class=\"context-menu\" #contextMenu>\n          <div class=\"context-menu-item\" (click)=\"selectId({ id: contextMenuData.clickedElement?.id })\">Bearbeiten</div>\n          <div class=\"context-menu-item\" (click)=\"openNewTab({ id: contextMenuData.clickedElement?.id })\">\n            In neuen Tab \u00F6ffnen\n          </div>\n          @if (duplicate) {\n            <div class=\"context-menu-item\" (click)=\"duplicateObject(contextMenuData.clickedElement?.id)\">\n              Duplizieren\n            </div>\n          }\n          @if (delete) {\n            <div class=\"context-menu-item\" (click)=\"deleteObject(contextMenuData.clickedElement?.id)\">\n              L\u00F6schen\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  }\n\n  @if (id || createMode) {\n    <div class=\"w-100\">\n      <button class=\"d-none d-lg-block btn btn-outline-primary mb-3\" (click)=\"selectId('')\">Zur\u00FCck</button>\n      @if (!modelConfig?.customTemplateComponent) {\n        <base-model-form\n          [modelName]=\"camelModelName\"\n          [label]=\"modelConfig?.label\"\n          [config]=\"config\"\n          [logging]=\"logging\"\n          [id]=\"id\"\n          (finished)=\"selectId('')\"\n          [delete]=\"delete\"\n          [duplicate]=\"duplicate\"\n          [showFavButton]=\"showFavButton\"\n        ></base-model-form>\n      }\n      @if (modelConfig?.customTemplateComponent) {\n        <ng-template #customFormTemplate></ng-template>\n      }\n    </div>\n  }\n\n  <div class=\"responsive-action-button d-block d-lg-none\">\n    @if (!(id || createMode) && showFavButton) {\n      <base-fab-button\n        [fabIcon]=\"'bi-plus'\"\n        (click)=\"createNewObject()\"\n      ></base-fab-button>\n    }\n  </div>\n", styles: [".cursor-pointer{cursor:pointer}.asc:after,.desc:after{border-style:solid;border-width:.2em .2em 0 0;content:\"\";display:inline-block;height:.45em;left:5px;position:relative;transform:rotate(-45deg);vertical-align:middle;width:.45em}.asc:after{transform:rotate(135deg)}td{vertical-align:middle}.bi,th{cursor:pointer;-webkit-user-select:none;user-select:none}.table>:not(:first-child){border-top:0}table{border-radius:.25rem;border-color:#e2e8f0!important}table thead{text-transform:uppercase;font-size:12px}table thead th{padding:12px 24px}table tbody tr td{font-weight:400!important;font-size:16px;padding:16px 24px}.context-menu{opacity:.01%;pointer-events:none;background-color:#fff;border:1px solid #ccc;box-shadow:1px 1px 10px #0000001a;padding:10px 0;position:fixed;top:0;left:0;width:200px;z-index:999}.context-menu-item{cursor:pointer;padding:8px 15px}.context-menu-item:hover{color:var(--bs-primary)}.table-card{background:var(--bs-white);padding:10px;margin-bottom:10px}.table-card-entry{margin-top:4px}.table-card-entry-first{font-size:18px;font-weight:800;color:var(--bs-primary)}.responsive-action-button{position:fixed;bottom:15px;right:15px}.bi-three-dots-vertical{font-size:18px;line-height:18px}.page-item{cursor:pointer}\n"] }]
-        }], ctorParameters: () => [{ type: i1.GraphQLMetaService }, { type: i1.GraphQLService }, { type: i1.CmsService }, { type: i1.ToastService }, { type: i1.ScrollService }, { type: i1.StorageService }], propDecorators: { modelName: [{
-                type: Input
-            }], objectId: [{
-                type: Input
-            }], createMode: [{
-                type: Input
-            }], logging: [{
-                type: Input
-            }], create: [{
-                type: Input
-            }], update: [{
-                type: Input
-            }], delete: [{
-                type: Input
-            }], import: [{
-                type: Input
-            }], export: [{
-                type: Input
-            }], duplicate: [{
-                type: Input
-            }], modelConfig: [{
-                type: Input
-            }], config: [{
-                type: Input
-            }], showFavButton: [{
-                type: Input
-            }], idSelected: [{
-                type: Output
-            }], createModeChanged: [{
-                type: Output
-            }], customFormTemplate: [{
-                type: ViewChild,
-                args: ['customFormTemplate', { read: ViewContainerRef }]
-            }] } });
-
-class ChangePasswordComponent {
-    formsService;
-    userService;
-    authService;
-    toastService;
-    form;
-    loading = false;
-    constructor(formsService, userService, authService, toastService) {
-        this.formsService = formsService;
-        this.userService = userService;
-        this.authService = authService;
-        this.toastService = toastService;
-    }
-    ngOnInit() {
-        this.createForm();
-    }
-    /**
-     * Create password change form
-     */
-    createForm() {
-        this.form = new UntypedFormGroup({
-            current: new FormControl('', [Validators.required]),
-            password: new FormControl('', [Validators.required, securePasswordValidator()]),
-            passwordConfirm: new FormControl('', [Validators.required, securePasswordValidator()]),
-        }, Validation.match('password', 'passwordConfirm'));
-    }
-    /**
-     * Submit form and change password of user
-     */
-    submit() {
-        this.loading = true;
-        this.userService
-            .login({
-            email: this.authService.currentUser.email,
-            password: this.form.get('current').value,
-        })
-            .subscribe({
-            next: () => {
-                if (this.form.invalid) {
-                    this.formsService.validateAllFormFields(this.form);
-                    this.loading = false;
-                    return;
-                }
-                this.userService.changePassword(this.authService.currentUser.id, this.form.get('password').value).subscribe({
-                    next: (response) => {
-                        if (response) {
-                            this.form.reset();
-                            this.toastService.show({
-                                id: 'password-change-success',
-                                title: 'Erfolgreich',
-                                description: 'Passwort wurde erfolgreich geändert.',
-                                type: ToastType.SUCCESS,
-                            });
-                        }
-                        this.loading = false;
-                    },
-                    error: () => {
-                        this.loading = false;
-                        this.toastService.show({
-                            id: 'password-change-error',
-                            title: 'Fehlgeschlagen',
-                            description: 'Passwort ändern ist fehlgeschlagen, bitte versuche es später erneut.',
-                            type: ToastType.ERROR,
-                        });
-                    },
-                });
-            },
-            error: () => {
-                this.loading = false;
-                this.toastService.show({
-                    id: 'password-change-error',
-                    title: 'Fehlgeschlagen',
-                    description: 'Passwort ändern ist fehlgeschlagen. Falsches Passwort.',
-                    type: ToastType.ERROR,
-                    errorCode: '401',
-                });
-            },
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ChangePasswordComponent, deps: [{ token: i1.FormsService }, { token: i1.UserService }, { token: i1.AuthService }, { token: i1.ToastService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: ChangePasswordComponent, isStandalone: true, selector: "base-change-password", ngImport: i0, template: "<h3>Passwort \u00E4ndern</h3>\n\n<form [formGroup]=\"form\">\n  <base-input\n    [id]=\"'Aktuelles Passwort'\"\n    [label]=\"'Passwort'\"\n    [required]=\"true\"\n    [type]=\"'password'\"\n    [control]=\"form.get('current')\"\n    [tabIndex]=\"1\"\n    [eyeButton]=\"true\"\n  ></base-input>\n  <base-input\n    [id]=\"'password'\"\n    [label]=\"'Neues Passwort'\"\n    [required]=\"true\"\n    [type]=\"'password'\"\n    [control]=\"form.get('password')\"\n    [tabIndex]=\"2\"\n    [eyeButton]=\"true\"\n  ></base-input>\n  <base-input\n    [id]=\"'password-confirm'\"\n    [label]=\"'Neues Passwort best\u00E4tigen'\"\n    [required]=\"true\"\n    [type]=\"'password'\"\n    [control]=\"form.get('passwordConfirm')\"\n    [tabIndex]=\"3\"\n    [eyeButton]=\"true\"\n  ></base-input>\n\n  <div class=\"d-flex justify-content-end\">\n    <div>\n      @if (!loading) {\n        <button class=\"btn btn-primary\" (click)=\"submit()\">Passwort \u00E4ndern</button>\n      }\n      @if (loading) {\n        <button class=\"btn btn-primary\" type=\"button\" disabled>\n          <span class=\"spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span>\n          Loading...\n        </button>\n      }\n    </div>\n  </div>\n</form>\n", styles: [""], dependencies: [{ kind: "component", type: InputComponent, selector: "base-input", inputs: ["id", "name", "infoText", "label", "placeholder", "autocomplete", "tabIndex", "control", "type", "required", "eyeButton", "objectPath"], outputs: ["enter"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ChangePasswordComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'base-change-password', standalone: true, imports: [
-                        InputComponent,
-                        ReactiveFormsModule
-                    ], template: "<h3>Passwort \u00E4ndern</h3>\n\n<form [formGroup]=\"form\">\n  <base-input\n    [id]=\"'Aktuelles Passwort'\"\n    [label]=\"'Passwort'\"\n    [required]=\"true\"\n    [type]=\"'password'\"\n    [control]=\"form.get('current')\"\n    [tabIndex]=\"1\"\n    [eyeButton]=\"true\"\n  ></base-input>\n  <base-input\n    [id]=\"'password'\"\n    [label]=\"'Neues Passwort'\"\n    [required]=\"true\"\n    [type]=\"'password'\"\n    [control]=\"form.get('password')\"\n    [tabIndex]=\"2\"\n    [eyeButton]=\"true\"\n  ></base-input>\n  <base-input\n    [id]=\"'password-confirm'\"\n    [label]=\"'Neues Passwort best\u00E4tigen'\"\n    [required]=\"true\"\n    [type]=\"'password'\"\n    [control]=\"form.get('passwordConfirm')\"\n    [tabIndex]=\"3\"\n    [eyeButton]=\"true\"\n  ></base-input>\n\n  <div class=\"d-flex justify-content-end\">\n    <div>\n      @if (!loading) {\n        <button class=\"btn btn-primary\" (click)=\"submit()\">Passwort \u00E4ndern</button>\n      }\n      @if (loading) {\n        <button class=\"btn btn-primary\" type=\"button\" disabled>\n          <span class=\"spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span>\n          Loading...\n        </button>\n      }\n    </div>\n  </div>\n</form>\n" }]
-        }], ctorParameters: () => [{ type: i1.FormsService }, { type: i1.UserService }, { type: i1.AuthService }, { type: i1.ToastService }] });
-
-class DeleteAccountComponent {
-    userService;
-    authService;
-    toastService;
-    router;
-    description = 'Mit dem Löschen Deines Kontos werden alle persönlichen Daten sofort gelöscht und sind nicht wiederherstellbar.';
-    loading = false;
-    constructor(userService, authService, toastService, router) {
-        this.userService = userService;
-        this.authService = authService;
-        this.toastService = toastService;
-        this.router = router;
-    }
-    deleteAccount() {
-        this.loading = true;
-        if (!confirm('Willst Du wirklich ein Konto unwiderruflich löschen?')) {
-            this.loading = false;
-            return;
-        }
-        this.userService.delete(this.authService.currentUser.id).subscribe({
-            next: (response) => {
-                if (response) {
-                    this.toastService.show({
-                        id: 'delete-user-success',
-                        title: 'Erfolgreich',
-                        description: 'Dein Konto wurde erfolgreich gelöscht.',
-                        type: ToastType.SUCCESS,
-                    });
-                }
-                this.authService.logout();
-                this.router.navigate(['/']);
-                this.loading = false;
-            },
-            error: (error) => {
-                this.loading = false;
-                this.toastService.show({
-                    id: 'delete-user-error',
-                    title: 'Fehlgeschlagen',
-                    description: 'Konto löschen ist fehlgeschlagen, bitte versuche es später erneut.',
-                    type: ToastType.ERROR,
-                });
-            },
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: DeleteAccountComponent, deps: [{ token: i1.UserService }, { token: i1.AuthService }, { token: i1.ToastService }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: DeleteAccountComponent, isStandalone: true, selector: "base-delete-account", inputs: { description: "description" }, ngImport: i0, template: "<div>\n  <h3>Konto l\u00F6schen</h3>\n\n  <p>{{ description }}</p>\n\n  <div class=\"d-flex justify-content-end mt-3\">\n    <div>\n      @if (!loading) {\n        <button class=\"btn btn-primary\" (click)=\"deleteAccount()\">Konto l\u00F6schen</button>\n      }\n      @if (loading) {\n        <button class=\"btn btn-primary\" type=\"button\" disabled>\n          <span class=\"spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span>\n          Loading...\n        </button>\n      }\n    </div>\n  </div>\n</div>\n", styles: [""] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: DeleteAccountComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'base-delete-account', standalone: true, template: "<div>\n  <h3>Konto l\u00F6schen</h3>\n\n  <p>{{ description }}</p>\n\n  <div class=\"d-flex justify-content-end mt-3\">\n    <div>\n      @if (!loading) {\n        <button class=\"btn btn-primary\" (click)=\"deleteAccount()\">Konto l\u00F6schen</button>\n      }\n      @if (loading) {\n        <button class=\"btn btn-primary\" type=\"button\" disabled>\n          <span class=\"spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span>\n          Loading...\n        </button>\n      }\n    </div>\n  </div>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1.UserService }, { type: i1.AuthService }, { type: i1.ToastService }, { type: i2.Router }], propDecorators: { description: [{
-                type: Input
-            }] } });
-
-/**
- * Exports for public API
- */
-// Directives
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { BackButtonDirective, BreadcrumbComponent, ChangePasswordComponent, CheckboxComponent, ContextMenuDirective, DeleteAccountComponent, EllipsesPipe, FabButtonComponent, InputComponent, LoadingBarComponent, ModelFormBaseComponent, ModelFormComponent, ModelFormSubComponent, ModelTableComponent, RefenceInputComponent, SelectComponent, SkeletonLoaderComponent, SortDirective, StopPropagationDirective, TagsComponent, TextareaComponent, ToastComponent, UploadImageComponent };
-//# sourceMappingURL=lenne.tech-ng-base-base-components.mjs.map