@simpleangularcontrols/sac-bootstrap5 13.0.0-rc.2

package/fesm2020/simpleangularcontrols-sac-bootstrap5.mjs

@@ -0,0 +1,2678 @@
+import * as i2 from '@angular/common';
+import { CommonModule, DOCUMENT } from '@angular/common';
+import * as i1$1 from '@angular/common/http';
+import { HttpClientModule } from '@angular/common/http';
+import * as i0 from '@angular/core';
+import { Component, ComponentFactoryResolver, Injectable, Inject, NgModule, forwardRef, Directive, HostBinding, SkipSelf, Host, Optional, ViewChild, TemplateRef, ContentChild, Input, ContentChildren } from '@angular/core';
+import * as i9 from '@angular/forms';
+import { ControlContainer, NgForm, FormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
+import * as i1 from '@simpleangularcontrols/sac-common';
+import { SacDialogCommon, SacButtonCommon, SacConfirmCommon, ServiceConfirmCommon, isDefined, SacConfirmButton, SacContextMenuContrainerCommon, SacContextmenuAnchorCommon, SacContextmenuCommon, SacContextmenuItemButtonCommon, SacContextmenuItemCommon, SacFormCommon, SacDropzoneMultipleCommon, SacDropzoneSingleCommon, SacUploadSingleCommon, SacUploadMultipleCommon, SacFileBrowserCommon, SacCheckboxCommon, SacRadiobuttonsCommon, SacRadiobuttonCommon, SacDateSelectorCommon, SacDateCommon, SacDateTimeCommon, SacTimeCommon, SacPagingCommon, SacGridCommon, SacGridButtonCommon, SacGridColumnCommon, SacGridColumnBaseCommon, SacGridColumnActionCommon, SacGridImageCommon, SacInputCommon, SacInputEmailCommon, SacInputAreaCommon, SacInputCurrencyCommon, SacInputDecimalCommon, SacInputIntegerCommon, SacInputPasswordCommon, SacInputSearchCommon, SacListboxCommon, SacListboxOptionCommon, SacDropdownCommon, SacDropdownOptionCommon, SacMultilanguageInputCommon, IconType, SacMultilanguageInputAreaCommon, SacStaticLabelCommon, SacStaticFormContainerCommon, SacTabItemCommon, SacTabCommon, SacTinyMceCommon, SacValidationSummaryCommon, SacWizardItemCommon, SacWizardCommon } from '@simpleangularcontrols/sac-common';
+import { Observable, forkJoin } from 'rxjs';
+import * as moment_ from 'moment';
+import * as i4 from 'angular-imask';
+import { IMaskModule } from 'angular-imask';
+import * as i2$1 from '@tinymce/tinymce-angular';
+import { EditorModule } from '@tinymce/tinymce-angular';
+
+/**
+ * Dialog Komponente
+ */
+class SacDialogComponent extends SacDialogCommon {
+    /**
+     * Konstruktor
+     * @param el DOM Element Referenz
+     * @param cdRef Change Detection Service
+     */
+    constructor(el, cdRef) {
+        super(cdRef);
+        this.element = el.nativeElement;
+    }
+    /**
+     * Event wenn Komponente initialisiert wird
+     */
+    ngOnInit() {
+        // Element an Body für korrektes Styling unter Bootstrap 3 verschieben
+        document.body.appendChild(this.element);
+    }
+    /**
+     * Event wenn Element entfernt wird
+     */
+    ngOnDestroy() {
+        this.hide();
+        if (document.body.contains(this.element)) {
+            document.body.removeChild(this.element);
+        }
+        super.ngOnDestroy();
+    }
+}
+SacDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacDialogComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+SacDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacDialogComponent, selector: "sac-dialog", usesInheritance: true, ngImport: i0, template: "<div\r\n  #dialog\r\n  class=\"modal show\"\r\n  style=\"display: block\"\r\n  tabindex=\"-1\"\r\n  role=\"dialog\"\r\n  *ngIf=\"_show\"\r\n>\r\n  <div\r\n    class=\"modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable\"\r\n    role=\"document\"\r\n    [class.modal-xl]=\"_size === 'extralarge'\"\r\n    [class.modal-lg]=\"_size === 'large'\"\r\n    [class.modal-sm]=\"_size === 'small'\"\r\n  >\r\n    <div class=\"modal-content\">\r\n      <div class=\"modal-header\">\r\n        <h5 class=\"modal-title\">{{title}}</h5>\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn-close\"\r\n          data-dismiss=\"modal\"\r\n          aria-label=\"Close\"\r\n          (click)=\"hide()\"\r\n          *ngIf=\"closebutton\"\r\n        ></button>\r\n      </div>\r\n      <div class=\"modal-body\" [style.height]=\"height\">\r\n        <ng-content select=\"[dialogbody]\"></ng-content>\r\n      </div>\r\n      <div class=\"modal-footer\">\r\n        <ng-content select=\"[dialogfooter]\"></ng-content>\r\n      </div>\r\n    </div>\r\n    <!-- /.modal-content -->\r\n  </div>\r\n  <!-- /.modal-dialog -->\r\n</div>\r\n<!-- /.modal -->\r\n<div class=\"modal-backdrop show\" *ngIf=\"_show && backdrop\" #backdrop></div>\r\n", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sac-dialog', template: "<div\r\n  #dialog\r\n  class=\"modal show\"\r\n  style=\"display: block\"\r\n  tabindex=\"-1\"\r\n  role=\"dialog\"\r\n  *ngIf=\"_show\"\r\n>\r\n  <div\r\n    class=\"modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable\"\r\n    role=\"document\"\r\n    [class.modal-xl]=\"_size === 'extralarge'\"\r\n    [class.modal-lg]=\"_size === 'large'\"\r\n    [class.modal-sm]=\"_size === 'small'\"\r\n  >\r\n    <div class=\"modal-content\">\r\n      <div class=\"modal-header\">\r\n        <h5 class=\"modal-title\">{{title}}</h5>\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn-close\"\r\n          data-dismiss=\"modal\"\r\n          aria-label=\"Close\"\r\n          (click)=\"hide()\"\r\n          *ngIf=\"closebutton\"\r\n        ></button>\r\n      </div>\r\n      <div class=\"modal-body\" [style.height]=\"height\">\r\n        <ng-content select=\"[dialogbody]\"></ng-content>\r\n      </div>\r\n      <div class=\"modal-footer\">\r\n        <ng-content select=\"[dialogfooter]\"></ng-content>\r\n      </div>\r\n    </div>\r\n    <!-- /.modal-content -->\r\n  </div>\r\n  <!-- /.modal-dialog -->\r\n</div>\r\n<!-- /.modal -->\r\n<div class=\"modal-backdrop show\" *ngIf=\"_show && backdrop\" #backdrop></div>\r\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
+
+/**
+ * Button Component
+ *
+ * <example-url>http://localhost/demo/mysample.component.html</example-url>
+ */
+class SacButtonComponent extends SacButtonCommon {
+}
+SacButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+SacButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacButtonComponent, selector: "sac-button", usesInheritance: true, ngImport: i0, template: "<button [id]=\"name\" type=\"button\" class=\"btn d-flex justify-content-center align-items-center\" [attr.disabled]=\"_isdisabled ? 'disabled' : null\" (click)=\"buttonClick()\"\r\n        [class.btn-primary]=\"role === 'primary'\"\r\n        [class.btn-secondary]=\"role === 'secondary' || role === 'default'\"\r\n        [class.btn-success]=\"role === 'success'\"\r\n        [class.btn-danger]=\"role === 'danger'\"\r\n        [class.btn-warning]=\"role === 'warning'\"\r\n        [class.btn-info]=\"role === 'info'\"\r\n        [class.btn-link]=\"role === 'link'\">\r\n  <i *ngIf=\"icon !== ''\" [ngClass]=\"icon\" class=\"me-2\"></i>{{text}}\r\n</button>\r\n", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sac-button', template: "<button [id]=\"name\" type=\"button\" class=\"btn d-flex justify-content-center align-items-center\" [attr.disabled]=\"_isdisabled ? 'disabled' : null\" (click)=\"buttonClick()\"\r\n        [class.btn-primary]=\"role === 'primary'\"\r\n        [class.btn-secondary]=\"role === 'secondary' || role === 'default'\"\r\n        [class.btn-success]=\"role === 'success'\"\r\n        [class.btn-danger]=\"role === 'danger'\"\r\n        [class.btn-warning]=\"role === 'warning'\"\r\n        [class.btn-info]=\"role === 'info'\"\r\n        [class.btn-link]=\"role === 'link'\">\r\n  <i *ngIf=\"icon !== ''\" [ngClass]=\"icon\" class=\"me-2\"></i>{{text}}\r\n</button>\r\n" }]
+        }] });
+
+/**
+ * Confirm Komponente
+ */
+class SacConfirmComponent extends SacConfirmCommon {
+}
+SacConfirmComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacConfirmComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+SacConfirmComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacConfirmComponent, selector: "sac-confirm", usesInheritance: true, ngImport: i0, template: "<sac-dialog\r\n  [(isvisible)]=\"isvisible\"\r\n  [title]=\"title\"\r\n  [allowesc]=\"false\"\r\n  [closebutton]=\"false\"\r\n  dialogsize=\"small\"\r\n>\r\n  <div dialogbody>\r\n    <div class=\"d-flex align-items-center\">\r\n      <div class=\"me-2\">\r\n        <img\r\n          [attr.src]=\"image\"\r\n          class=\"align-self-center mr-3\"\r\n          *ngIf=\"hasImage()\"\r\n        />\r\n      </div>\r\n      <div class=\"flex-grow-1\">{{message}}</div>\r\n    </div>\r\n  </div>\r\n  <ng-container dialogfooter>\r\n    <ng-container *ngFor=\"let button of buttons\">\r\n      <sac-button\r\n        [name]=\"button.key\"\r\n        [text]=\"button.text\"\r\n        (clicked)=\"confirm(button.key)\"\r\n      ></sac-button>\r\n    </ng-container>\r\n  </ng-container>\r\n</sac-dialog>\r\n", components: [{ type: SacDialogComponent, selector: "sac-dialog" }, { type: SacButtonComponent, selector: "sac-button" }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacConfirmComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sac-confirm', template: "<sac-dialog\r\n  [(isvisible)]=\"isvisible\"\r\n  [title]=\"title\"\r\n  [allowesc]=\"false\"\r\n  [closebutton]=\"false\"\r\n  dialogsize=\"small\"\r\n>\r\n  <div dialogbody>\r\n    <div class=\"d-flex align-items-center\">\r\n      <div class=\"me-2\">\r\n        <img\r\n          [attr.src]=\"image\"\r\n          class=\"align-self-center mr-3\"\r\n          *ngIf=\"hasImage()\"\r\n        />\r\n      </div>\r\n      <div class=\"flex-grow-1\">{{message}}</div>\r\n    </div>\r\n  </div>\r\n  <ng-container dialogfooter>\r\n    <ng-container *ngFor=\"let button of buttons\">\r\n      <sac-button\r\n        [name]=\"button.key\"\r\n        [text]=\"button.text\"\r\n        (clicked)=\"confirm(button.key)\"\r\n      ></sac-button>\r\n    </ng-container>\r\n  </ng-container>\r\n</sac-dialog>\r\n" }]
+        }] });
+
+/**
+ * Service für Confirm Messages in TypeScript Code
+ *
+ * @example
+ * // Beispiel für ConfirmMessage mit Standard Buttons (Ja / Nein).
+ * confirmService.ConfirmMessage('titel', 'frage').subscribe(action => { // Action Code });
+ *
+ * @example
+ * // Beispiel für ConfirmMessage mit eigenen Buttons
+ * let buttons: SacConfirmButton[] = [];
+ * buttons.push(new SacConfirmButton('ActionKey','Text Primary'));
+ * buttons.push(new SacConfirmButton('ActionKey2','Text Button 2'));
+ * confirmService.ConfirmMessage('titel', 'frage', buttons).subscribe(action => { // Action Code });
+ */
+class ServiceConfirm extends ServiceConfirmCommon {
+    /**
+     * Konstruktor
+     * @param componentFactoryResolver Component Factory Resolver Instanz
+     * @param appRef Application Referenz. Wird benötigt um den Dialog am Body anzuhängen
+     * @param injector Injector. Wird benötigt um den Dialog dynamisch zu erzeugen
+     */
+    constructor(componentFactoryResolver, appRef, injector) {
+        super(appRef, injector);
+        this.componentFactoryResolver = componentFactoryResolver;
+        /**
+         * Titel der im Dialog angezeigt werden soll.
+         */
+        this.title = '';
+        /**
+         * Message die in Dialog angezeigt werden soll.
+         */
+        this.message = '';
+        /**
+         * Collection von Buttons die angezeigt werden müssen.
+         */
+        this.buttons = [];
+    }
+    /**
+     * Erzeugen einer Component Factory für einen Dialog
+     */
+    GetComponentFactory() {
+        return this.componentFactoryResolver.resolveComponentFactory(SacConfirmComponent);
+    }
+    /**
+     * Confirm Dialog anzeigen
+     * @param message Nachricht die angezeigt werden soll.
+     * @returns EventEmitter mit Key des Buttons, welcher geklickt wurde.
+     */
+    ConfirmMessage(title, message, buttons = null) {
+        this.title = title;
+        this.message = message;
+        // Default Buttons setzen, wenn keine Buttons angegeben sind
+        if (!isDefined(buttons)) {
+            // TODO: Text von Localisation Service beziehen
+            this.buttons = [];
+            this.buttons.push(new SacConfirmButton('yes', 'Ja'));
+            this.buttons.push(new SacConfirmButton('no', 'Nein'));
+        }
+        else {
+            this.buttons = buttons;
+        }
+        return super.Confirm();
+    }
+    /**
+     * Konfiguration des Dialogs
+     * @param instance Instanz eines SacConfirm Dialogs
+     */
+    ConfigureDialog(instance) {
+        // Text in Dialog setzen
+        instance.title = this.title;
+        instance.message = this.message;
+        instance.buttons = this.buttons;
+        instance.image = this.iconService.ConfirmDefaultImage;
+    }
+}
+ServiceConfirm.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ServiceConfirm, deps: [{ token: ComponentFactoryResolver }, { token: i0.ApplicationRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
+ServiceConfirm.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ServiceConfirm });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ServiceConfirm, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver, decorators: [{
+                    type: Inject,
+                    args: [ComponentFactoryResolver]
+                }] }, { type: i0.ApplicationRef }, { type: i0.Injector }]; } });
+
+class SACBootstrap5DialogModule {
+}
+SACBootstrap5DialogModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5DialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SACBootstrap5DialogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5DialogModule, declarations: [SacDialogComponent], imports: [CommonModule], exports: [SacDialogComponent] });
+SACBootstrap5DialogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5DialogModule, imports: [[
+            CommonModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5DialogModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SacDialogComponent],
+                    imports: [
+                        CommonModule
+                    ],
+                    exports: [SacDialogComponent]
+                }]
+        }] });
+
+class SACBootstrap5ButtonModule {
+}
+SACBootstrap5ButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5ButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SACBootstrap5ButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5ButtonModule, declarations: [SacButtonComponent], imports: [CommonModule], exports: [SacButtonComponent] });
+SACBootstrap5ButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5ButtonModule, imports: [[
+            CommonModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5ButtonModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SacButtonComponent],
+                    imports: [
+                        CommonModule
+                    ],
+                    exports: [SacButtonComponent]
+                }]
+        }] });
+
+/**
+ *  Module für Confirm Messages
+ *
+ *  In NgModule der Applikation folgenden Eintrag bei Imports einfügen: SACBootstrap5ConfirmModule.forRoot()
+ *
+ */
+class SACBootstrap5ConfirmModule {
+    static forRoot() {
+        return {
+            ngModule: SACBootstrap5ConfirmModule,
+            providers: [ServiceConfirm]
+        };
+    }
+}
+SACBootstrap5ConfirmModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5ConfirmModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SACBootstrap5ConfirmModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5ConfirmModule, declarations: [SacConfirmComponent], imports: [CommonModule, SACBootstrap5DialogModule, SACBootstrap5ButtonModule], exports: [SacConfirmComponent] });
+SACBootstrap5ConfirmModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5ConfirmModule, imports: [[CommonModule, SACBootstrap5DialogModule, SACBootstrap5ButtonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5ConfirmModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SacConfirmComponent],
+                    imports: [CommonModule, SACBootstrap5DialogModule, SACBootstrap5ButtonModule],
+                    exports: [SacConfirmComponent]
+                }]
+        }] });
+
+/**
+ * Marker Komponente für Context Menü
+ */
+class SacContextmenuContainerDirective extends SacContextMenuContrainerCommon {
+    /**
+     * Konstruktor
+     * @param _elementRef Referenz auf DOM Element
+     */
+    constructor(_elementRef) {
+        super(_elementRef);
+    }
+}
+SacContextmenuContainerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacContextmenuContainerDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+SacContextmenuContainerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: SacContextmenuContainerDirective, selector: "[sacContextMenuContainer]", providers: [
+        {
+            provide: SacContextMenuContrainerCommon,
+            useExisting: forwardRef(() => SacContextmenuContainerDirective),
+        },
+    ], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacContextmenuContainerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[sacContextMenuContainer]',
+                    providers: [
+                        {
+                            provide: SacContextMenuContrainerCommon,
+                            useExisting: forwardRef(() => SacContextmenuContainerDirective),
+                        },
+                    ],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
+
+/**
+ * Anker Komponente für Context Menü. Wird zum positionieren des Context Menü in der Page benötigt.
+ */
+class SacContextmenuAnchorDirective extends SacContextmenuAnchorCommon {
+    /**
+     * Konstruktor
+     * @param _elementRef HTML DOM Referenz
+     */
+    constructor(_elementRef) {
+        super(_elementRef);
+    }
+}
+SacContextmenuAnchorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacContextmenuAnchorDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+SacContextmenuAnchorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: SacContextmenuAnchorDirective, selector: "[sacContextMenuAnchor]", providers: [
+        {
+            provide: SacContextmenuAnchorCommon,
+            useExisting: forwardRef(() => SacContextmenuAnchorDirective),
+        },
+    ], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacContextmenuAnchorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[sacContextMenuAnchor]',
+                    providers: [
+                        {
+                            provide: SacContextmenuAnchorCommon,
+                            useExisting: forwardRef(() => SacContextmenuAnchorDirective),
+                        },
+                    ],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
+
+/**
+ * Component für Contextmenü
+ */
+class SacContextmenuComponent extends SacContextmenuCommon {
+    /**
+     * Constructor
+     * @param _document Referenz auf HTML Document
+     * @param _ngZone Angular Zone Service
+     * @param _elementRef Referenz auf HTML Element der aktuellen Komponente
+     * @param _renderer Render Service von Angular
+     * @param _injector  injector to resolve services
+     */
+    constructor(_document, _ngZone, _elementRef, _renderer, _injector) {
+        super(_document, _ngZone, _elementRef, _renderer, _injector);
+    }
+}
+SacContextmenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacContextmenuComponent, deps: [{ token: DOCUMENT }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+SacContextmenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacContextmenuComponent, selector: "sac-contextmenu", providers: [
+        {
+            provide: SacContextmenuCommon,
+            useExisting: forwardRef(() => SacContextmenuComponent),
+        },
+    ], usesInheritance: true, ngImport: i0, template: "<div class=\"dropdown\" [ngClass]=\"cssclass\">\r\n  <ng-container\r\n    [ngTemplateOutlet]=\"buttontemplate || defaultButtonTemplate\"\r\n  ></ng-container>\r\n\r\n  <ul\r\n    class=\"dropdown-menu dropdown-menu-end\"\r\n    sacContextMenuContainer\r\n    [class.show]=\"isopen\"\r\n  >\r\n    <ng-content></ng-content>\r\n  </ul>\r\n</div>\r\n\r\n<ng-template #defaultButtonTemplate>\r\n  <button\r\n    sacContextMenuAnchor\r\n    class=\"btn btn-sm btn-link text-secondary text-decoration-none\"\r\n    type=\"button\"\r\n    (click)=\"toggle()\"\r\n  >\r\n    <i [class]=\"IconContextMenu\"></i>\r\n  </button>\r\n</ng-template>\r\n", directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: SacContextmenuContainerDirective, selector: "[sacContextMenuContainer]" }, { type: SacContextmenuAnchorDirective, selector: "[sacContextMenuAnchor]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacContextmenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sac-contextmenu', providers: [
+                        {
+                            provide: SacContextmenuCommon,
+                            useExisting: forwardRef(() => SacContextmenuComponent),
+                        },
+                    ], template: "<div class=\"dropdown\" [ngClass]=\"cssclass\">\r\n  <ng-container\r\n    [ngTemplateOutlet]=\"buttontemplate || defaultButtonTemplate\"\r\n  ></ng-container>\r\n\r\n  <ul\r\n    class=\"dropdown-menu dropdown-menu-end\"\r\n    sacContextMenuContainer\r\n    [class.show]=\"isopen\"\r\n  >\r\n    <ng-content></ng-content>\r\n  </ul>\r\n</div>\r\n\r\n<ng-template #defaultButtonTemplate>\r\n  <button\r\n    sacContextMenuAnchor\r\n    class=\"btn btn-sm btn-link text-secondary text-decoration-none\"\r\n    type=\"button\"\r\n    (click)=\"toggle()\"\r\n  >\r\n    <i [class]=\"IconContextMenu\"></i>\r\n  </button>\r\n</ng-template>\r\n" }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }, { type: i0.NgZone }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.Injector }]; } });
+
+/**
+ * Component für Menü Eintrag in Context Menü
+ */
+class SacContextmenuItemButtonComponent extends SacContextmenuItemButtonCommon {
+    /**
+     * Constructor
+     * @param contextmenu Instance von Context Menü
+     */
+    constructor(contextmenu) {
+        super(contextmenu);
+    }
+}
+SacContextmenuItemButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacContextmenuItemButtonComponent, deps: [{ token: i1.SacContextmenuCommon }], target: i0.ɵɵFactoryTarget.Component });
+SacContextmenuItemButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacContextmenuItemButtonComponent, selector: "sac-contextmenubutton", usesInheritance: true, ngImport: i0, template: "<li>\r\n  <button\r\n    type=\"button\"\r\n    class=\"dropdown-item\"\r\n    (click)=\"callaction($event)\"\r\n    [class.disabled]=\"isdisabled\"\r\n    [class]=\"cssclass\"\r\n    [attr.disabled]=\"isdisabled ? 'disabled' : null\"\r\n  >\r\n    <div class=\"d-flex\">\r\n      <div *ngIf=\"!isicondisabled\" style=\"min-width: 1.5rem\">\r\n        <img *ngIf=\"image\" [src]=\"image\" class=\"align-baseline\" />\r\n        <i *ngIf=\"icon\" [class]=\"iconstyle + ' ' + icon\"></i>\r\n      </div>\r\n      <div class=\"flex-grow-1\">{{ text }}</div>\r\n    </div>\r\n  </button>\r\n</li>\r\n", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacContextmenuItemButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sac-contextmenubutton', template: "<li>\r\n  <button\r\n    type=\"button\"\r\n    class=\"dropdown-item\"\r\n    (click)=\"callaction($event)\"\r\n    [class.disabled]=\"isdisabled\"\r\n    [class]=\"cssclass\"\r\n    [attr.disabled]=\"isdisabled ? 'disabled' : null\"\r\n  >\r\n    <div class=\"d-flex\">\r\n      <div *ngIf=\"!isicondisabled\" style=\"min-width: 1.5rem\">\r\n        <img *ngIf=\"image\" [src]=\"image\" class=\"align-baseline\" />\r\n        <i *ngIf=\"icon\" [class]=\"iconstyle + ' ' + icon\"></i>\r\n      </div>\r\n      <div class=\"flex-grow-1\">{{ text }}</div>\r\n    </div>\r\n  </button>\r\n</li>\r\n" }]
+        }], ctorParameters: function () { return [{ type: i1.SacContextmenuCommon }]; } });
+
+/**
+ * Splitter Komponente in Context Menü
+ */
+class SacContextmenuItemSplitterComponent extends SacContextmenuItemCommon {
+}
+SacContextmenuItemSplitterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacContextmenuItemSplitterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+SacContextmenuItemSplitterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacContextmenuItemSplitterComponent, selector: "sac-contextmenusplitter", usesInheritance: true, ngImport: i0, template: "<li><div class=\"dropdown-divider\"></div></li>\r\n" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacContextmenuItemSplitterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sac-contextmenusplitter', template: "<li><div class=\"dropdown-divider\"></div></li>\r\n" }]
+        }] });
+
+class SACBootstrap5ContextmenuModule {
+}
+SACBootstrap5ContextmenuModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5ContextmenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SACBootstrap5ContextmenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5ContextmenuModule, declarations: [SacContextmenuComponent,
+        SacContextmenuItemButtonComponent,
+        SacContextmenuItemSplitterComponent,
+        SacContextmenuAnchorDirective,
+        SacContextmenuContainerDirective], imports: [CommonModule], exports: [SacContextmenuComponent,
+        SacContextmenuItemButtonComponent,
+        SacContextmenuItemSplitterComponent,
+        SacContextmenuAnchorDirective] });
+SACBootstrap5ContextmenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5ContextmenuModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5ContextmenuModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SacContextmenuComponent,
+                        SacContextmenuItemButtonComponent,
+                        SacContextmenuItemSplitterComponent,
+                        SacContextmenuAnchorDirective,
+                        SacContextmenuContainerDirective,
+                    ],
+                    imports: [CommonModule],
+                    exports: [
+                        SacContextmenuComponent,
+                        SacContextmenuItemButtonComponent,
+                        SacContextmenuItemSplitterComponent,
+                        SacContextmenuAnchorDirective,
+                    ],
+                }]
+        }] });
+
+/**
+ * Erweiterung / Hooking für automatismen in Formular. Wird als Container für alle Controls benötigt.
+ *
+ * @example Beispiel über Div Container
+ *
+ * <div ngForm></div>
+ *
+ * @example Beispiel über Form Tag
+ *
+ * <form></form>
+ *
+ */
+class SacFormDirective extends SacFormCommon {
+    /**
+     * Konstruktor
+     * @param form Instanz von NgForm für eigene automatische Formular Logik
+     */
+    constructor(form) {
+        super(form);
+        /**
+         * Setzt die Standard CSS Klasse für auf dem Form Container
+         */
+        this.cssClassForm = true;
+    }
+    /**
+     * Setzt die CSS Klasse 'form-horizontal' wenn die Orientation auf Horizontal eingestellt ist
+     */
+    get orientientationHorizontal() { return this.getOrientation() === 'horizontal'; }
+    /**
+     *  Setzt die CSS Klasse 'form-vertical' wenn die Orientation auf Vertical eingestellt ist
+     */
+    get orientientationVertical() { return this.getOrientation() === 'vertical'; }
+}
+SacFormDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacFormDirective, deps: [{ token: i9.NgForm }], target: i0.ɵɵFactoryTarget.Directive });
+SacFormDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: SacFormDirective, selector: "form:not([ngNoForm]):not([formGroup]),[ngForm]", host: { properties: { "class.form": "this.cssClassForm", "class.form-horizontal": "this.orientientationHorizontal", "class.form-vertical": "this.orientientationVertical" } }, exportAs: ["sacform"], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacFormDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'form:not([ngNoForm]):not([formGroup]),[ngForm]',
+                    exportAs: 'sacform'
+                }]
+        }], ctorParameters: function () { return [{ type: i9.NgForm }]; }, propDecorators: { cssClassForm: [{
+                type: HostBinding,
+                args: ['class.form']
+            }], orientientationHorizontal: [{
+                type: HostBinding,
+                args: ['class.form-horizontal']
+            }], orientientationVertical: [{
+                type: HostBinding,
+                args: ['class.form-vertical']
+            }] } });
+
+/**
+ * Factory Methode für SacForm
+ * @param form SacFormular
+ */
+function SACFORM_FACTORY(form) {
+    return form;
+}
+/**
+ * Factory Methode für NgForm
+ * @param form NgForm
+ */
+function NGFORM_FACTORY(form) {
+    return form;
+}
+/**
+ * Directive zum erben eines NgForm/NgFormular einer übergeordneten Komponente
+ *
+ * @example Implementation in Markup
+ *
+ * <div sacInheritForm>
+ * </div>
+ *
+ * @example Model an Sub-Komponente übergeben
+ *
+ * <div sacInheritForm>
+ * <div>SubForm</div>
+ * <div>
+ *  <ngInput [(ngModel)]="mymodel.fieldarea2" name="subformField3" label="field 3" [isrequired]="true"></ngInput>
+ * </div>
+ * </div>
+ *
+ *
+ * (at)Component({
+ * selector: 'sacInheritForm',
+ * templateUrl: './subform.component.html'
+ * })
+ * export class SubFormComponent implements DoCheck {
+ *
+ * (at)Input() mymodel;
+ * (at)Output() mymodelChange = new EventEmitter();
+ *
+ * ngDoCheck() {
+ *   this.mymodelChange.next(this.mymodel);
+ * }
+ *}
+ *
+ */
+class SacInheritFormDirective {
+}
+SacInheritFormDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacInheritFormDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+SacInheritFormDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: SacInheritFormDirective, selector: "[sacInheritForm]", providers: [
+        {
+            provide: SacFormDirective,
+            useFactory: SACFORM_FACTORY,
+            deps: [[new SkipSelf(), SacFormDirective]]
+        }, {
+            provide: ControlContainer,
+            useFactory: NGFORM_FACTORY,
+            deps: [NgForm]
+        }
+    ], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacInheritFormDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[sacInheritForm]',
+                    providers: [
+                        {
+                            provide: SacFormDirective,
+                            useFactory: SACFORM_FACTORY,
+                            deps: [[new SkipSelf(), SacFormDirective]]
+                        }, {
+                            provide: ControlContainer,
+                            useFactory: NGFORM_FACTORY,
+                            deps: [NgForm]
+                        }
+                    ]
+                }]
+        }] });
+
+class SACBootstrap5FormModule {
+}
+SACBootstrap5FormModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5FormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SACBootstrap5FormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5FormModule, declarations: [SacFormDirective, SacInheritFormDirective], imports: [CommonModule,
+        FormsModule], exports: [SacFormDirective, SacInheritFormDirective] });
+SACBootstrap5FormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5FormModule, imports: [[
+            CommonModule,
+            FormsModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5FormModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SacFormDirective, SacInheritFormDirective],
+                    imports: [
+                        CommonModule,
+                        FormsModule
+                    ],
+                    exports: [
+                        SacFormDirective, SacInheritFormDirective
+                    ]
+                }]
+        }] });
+
+/**
+ * Dropzone Komponente für mehrere Uploads
+ * @see https://github.com/kukhariev/ngx-uploadx/
+ */
+class SacDropzoneMultipleComponent extends SacDropzoneMultipleCommon {
+    /**
+     * Konstruktor
+     * @param parent Formular
+     * @param injector Angular Dependency Injection Service
+     * @param renderer Angular Rendering Engine
+     * @param ngZone ngZone
+     */
+    constructor(parent, injector, renderer, ngZone) {
+        super(parent, injector, renderer, ngZone);
+    }
+    /**
+     * Initialisiert das Control
+     */
+    ngOnInit() {
+        super.ngOnInit();
+    }
+}
+SacDropzoneMultipleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacDropzoneMultipleComponent, deps: [{ token: SacFormDirective, host: true, optional: true }, { token: i0.Injector }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+SacDropzoneMultipleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacDropzoneMultipleComponent, selector: "sac-dropzonemultiple", providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            multi: true,
+            useExisting: SacDropzoneMultipleComponent,
+        },
+        {
+            provide: NG_VALIDATORS,
+            multi: true,
+            useExisting: forwardRef(() => SacDropzoneMultipleComponent),
+        },
+    ], usesInheritance: true, ngImport: i0, template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isadaptivelabel\"\r\n    id=\"{{name}}_label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[labelsize !== 12 ?  'col-md-' + labelsize : 'sr-only']\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ? 'col-md-' + _inputsize : 'col-md-12']\"\r\n  >\r\n    <div\r\n      class=\"dropzone d-flex justify-content-center position-relative\"\r\n      (drop)=\"dropHandler($event)\"\r\n      (dragover)=\"onDragOver($event)\"\r\n      (dragleave)=\"onDragLeave($event)\"\r\n      [class.active]=\"active\"\r\n      [style.min-height]=\"uploadheight\"\r\n      [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n    >\r\n      <div\r\n        class=\"content d-flex justify-content-center\"\r\n        *ngIf=\"uploads.length === 0\"\r\n      >\r\n        <div class=\"align-self-center text-center\">\r\n          <div\r\n            [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n          >\r\n            <ng-content></ng-content>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div\r\n        class=\"content d-flex justify-content-center align-items-center w-50 my-3\"\r\n        *ngIf=\"uploads.length > 0\"\r\n      >\r\n        <div class=\"flex-fill progress-container\">\r\n          <div\r\n            class=\"dropzone-uploadstates\"\r\n            [class.mt-1]=\"i > 0\"\r\n            *ngFor=\"let file of uploads; let i = index\"\r\n          >\r\n            <div class=\"input-group upload-component upload-component-multiple\">\r\n              <div class=\"form-control upload-progress border-secondary\">\r\n                <div class=\"progress\">\r\n                  <div\r\n                    class=\"progress-bar\"\r\n                    [class.progress-bar-success]=\"file.progress===100\"\r\n                    role=\"progressbar\"\r\n                    [attr.aria-valuenow]=\"file.progress\"\r\n                    aria-valuemin=\"0\"\r\n                    aria-valuemax=\"100\"\r\n                    [style.width.%]=\"file.progress\"\r\n                  >\r\n                    <span class=\"progress-text text-dark\">{{ file.name }}</span>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <a\r\n                class=\"btn\"\r\n                (click)=\"cancel(file.uploadId)\"\r\n                [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n              >\r\n                <span [class]=\"IconDelete\"></span>\r\n              </a>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <input\r\n        #files\r\n        multiple\r\n        id=\"{{ name }}_uploadinput\"\r\n        type=\"file\"\r\n        class=\"custom-file-input\"\r\n        (click)=\"files.value = ''\"\r\n        (uploadxState)=\"onUpload($event)\"\r\n        [disabled]=\"HasQueueItem()\"\r\n      />\r\n    </div>\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".dropzone{min-height:9.75rem;border:.125rem dashed lightgray;border-radius:.5rem;background:transparent}.dropzone.is-invalid{border-color:var(--bs-form-invalid-border-color)}.dropzone .content{position:relative;inset:0}.dropzone .content .is-invalid{color:var(--bs-form-invalid-border-color)}.dropzone .content .progress-container{min-width:50%;z-index:100}.dropzone .content .dropzone-uploadstates .upload-progress{padding:0}.dropzone .content .dropzone-uploadstates .upload-progress .progress{height:100%;border-top-right-radius:0;border-bottom-right-radius:0}.dropzone .content .dropzone-uploadstates .upload-progress .progress .progress-text{left:0;right:0;position:absolute}.dropzone .custom-file-input{min-height:100%;height:unset;width:100%;opacity:0;position:absolute}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i2.AsyncPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacDropzoneMultipleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sac-dropzonemultiple', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            multi: true,
+                            useExisting: SacDropzoneMultipleComponent,
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            multi: true,
+                            useExisting: forwardRef(() => SacDropzoneMultipleComponent),
+                        },
+                    ], template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isadaptivelabel\"\r\n    id=\"{{name}}_label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[labelsize !== 12 ?  'col-md-' + labelsize : 'sr-only']\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ? 'col-md-' + _inputsize : 'col-md-12']\"\r\n  >\r\n    <div\r\n      class=\"dropzone d-flex justify-content-center position-relative\"\r\n      (drop)=\"dropHandler($event)\"\r\n      (dragover)=\"onDragOver($event)\"\r\n      (dragleave)=\"onDragLeave($event)\"\r\n      [class.active]=\"active\"\r\n      [style.min-height]=\"uploadheight\"\r\n      [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n    >\r\n      <div\r\n        class=\"content d-flex justify-content-center\"\r\n        *ngIf=\"uploads.length === 0\"\r\n      >\r\n        <div class=\"align-self-center text-center\">\r\n          <div\r\n            [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n          >\r\n            <ng-content></ng-content>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div\r\n        class=\"content d-flex justify-content-center align-items-center w-50 my-3\"\r\n        *ngIf=\"uploads.length > 0\"\r\n      >\r\n        <div class=\"flex-fill progress-container\">\r\n          <div\r\n            class=\"dropzone-uploadstates\"\r\n            [class.mt-1]=\"i > 0\"\r\n            *ngFor=\"let file of uploads; let i = index\"\r\n          >\r\n            <div class=\"input-group upload-component upload-component-multiple\">\r\n              <div class=\"form-control upload-progress border-secondary\">\r\n                <div class=\"progress\">\r\n                  <div\r\n                    class=\"progress-bar\"\r\n                    [class.progress-bar-success]=\"file.progress===100\"\r\n                    role=\"progressbar\"\r\n                    [attr.aria-valuenow]=\"file.progress\"\r\n                    aria-valuemin=\"0\"\r\n                    aria-valuemax=\"100\"\r\n                    [style.width.%]=\"file.progress\"\r\n                  >\r\n                    <span class=\"progress-text text-dark\">{{ file.name }}</span>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <a\r\n                class=\"btn\"\r\n                (click)=\"cancel(file.uploadId)\"\r\n                [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n              >\r\n                <span [class]=\"IconDelete\"></span>\r\n              </a>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <input\r\n        #files\r\n        multiple\r\n        id=\"{{ name }}_uploadinput\"\r\n        type=\"file\"\r\n        class=\"custom-file-input\"\r\n        (click)=\"files.value = ''\"\r\n        (uploadxState)=\"onUpload($event)\"\r\n        [disabled]=\"HasQueueItem()\"\r\n      />\r\n    </div>\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".dropzone{min-height:9.75rem;border:.125rem dashed lightgray;border-radius:.5rem;background:transparent}.dropzone.is-invalid{border-color:var(--bs-form-invalid-border-color)}.dropzone .content{position:relative;inset:0}.dropzone .content .is-invalid{color:var(--bs-form-invalid-border-color)}.dropzone .content .progress-container{min-width:50%;z-index:100}.dropzone .content .dropzone-uploadstates .upload-progress{padding:0}.dropzone .content .dropzone-uploadstates .upload-progress .progress{height:100%;border-top-right-radius:0;border-bottom-right-radius:0}.dropzone .content .dropzone-uploadstates .upload-progress .progress .progress-text{left:0;right:0;position:absolute}.dropzone .custom-file-input{min-height:100%;height:unset;width:100%;opacity:0;position:absolute}\n"] }]
+        }], ctorParameters: function () { return [{ type: SacFormDirective, decorators: [{
+                    type: Host
+                }, {
+                    type: Optional
+                }] }, { type: i0.Injector }, { type: i0.Renderer2 }, { type: i0.NgZone }]; } });
+
+/**
+ * Dropzone Komponente für den Upload eines Files
+ * @see https://github.com/kukhariev/ngx-uploadx/
+ */
+class SacDropzoneSingleComponent extends SacDropzoneSingleCommon {
+    /**
+     * Konstruktor
+     * @param parent Formular
+     * @param injector Angular Dependency Injection Service
+     * @param renderer Angular Rendering Engine
+     * @param ngZone ngZone
+     */
+    constructor(parent, injector, renderer, ngZone) {
+        super(parent, injector, renderer, ngZone);
+    }
+    /**
+     * Initialisiert das Control
+     */
+    ngOnInit() {
+        super.ngOnInit();
+    }
+}
+SacDropzoneSingleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacDropzoneSingleComponent, deps: [{ token: SacFormDirective, host: true, optional: true }, { token: i0.Injector }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+SacDropzoneSingleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacDropzoneSingleComponent, selector: "sac-dropzonesingle", providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            multi: true,
+            useExisting: SacDropzoneSingleComponent,
+        },
+        {
+            provide: NG_VALIDATORS,
+            multi: true,
+            useExisting: forwardRef(() => SacDropzoneSingleComponent),
+        },
+    ], usesInheritance: true, ngImport: i0, template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isadaptivelabel\"\r\n    id=\"{{name}}_label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[labelsize !== 12 ?  'col-md-' + labelsize : 'sr-only']\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ? 'col-md-' + _inputsize : 'col-md-12']\"\r\n  >\r\n    <div\r\n      class=\"dropzone d-flex justify-content-center position-relative\"\r\n      (drop)=\"dropHandler($event)\"\r\n      (dragover)=\"onDragOver($event)\"\r\n      (dragleave)=\"onDragLeave($event)\"\r\n      [style.min-height]=\"uploadheight\"\r\n      [class.active]=\"active\"\r\n      [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n    >\r\n      <div\r\n        class=\"content d-flex justify-content-center position-relative\"\r\n        *ngIf=\"uploads.length === 0\"\r\n      >\r\n        <div class=\"align-self-center text-center\">\r\n          <div\r\n            [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n          >\r\n            <ng-content></ng-content>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div\r\n        class=\"content d-flex justify-content-center align-items-center w-50 my-3\"\r\n        *ngIf=\"uploads.length > 0\"\r\n      >\r\n        <div class=\"flex-fill progress-container\">\r\n          <div class=\"dropzone-uploadstates\" *ngFor=\"let file of uploads\">\r\n            <div class=\"input-group upload-component upload-component-multiple\">\r\n              <div class=\"form-control upload-progress border-secondary\">\r\n                <div class=\"progress\">\r\n                  <div\r\n                    class=\"progress-bar\"\r\n                    [class.progress-bar-success]=\"file.progress===100\"\r\n                    role=\"progressbar\"\r\n                    [attr.aria-valuenow]=\"file.progress\"\r\n                    aria-valuemin=\"0\"\r\n                    aria-valuemax=\"100\"\r\n                    [style.width.%]=\"file.progress\"\r\n                  >\r\n                    <span class=\"progress-text text-dark\">{{ file.name }}</span>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <a\r\n                class=\"btn\"\r\n                (click)=\"cancel(file.uploadId)\"\r\n                [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n              >\r\n                <span [class]=\"IconDelete\"></span>\r\n              </a>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <input\r\n        #files\r\n        id=\"{{ name }}_uploadinput\"\r\n        type=\"file\"\r\n        class=\"custom-file-input\"\r\n        (click)=\"files.value = ''\"\r\n        (uploadxState)=\"onUpload($event)\"\r\n        [disabled]=\"HasQueueItem()\"\r\n      />\r\n    </div>\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".dropzone{min-height:9.75rem;border:.125rem dashed lightgray;border-radius:.5rem;background:transparent}.dropzone.is-invalid{border-color:var(--bs-form-invalid-border-color)}.dropzone .content{position:relative;inset:0}.dropzone .content .is-invalid{color:var(--bs-form-invalid-border-color)}.dropzone .content .progress-container{min-width:50%;z-index:100}.dropzone .content .dropzone-uploadstates .upload-progress{padding:0}.dropzone .content .dropzone-uploadstates .upload-progress .progress{height:100%;border-top-right-radius:0;border-bottom-right-radius:0}.dropzone .content .dropzone-uploadstates .upload-progress .progress .progress-text{left:0;right:0;position:absolute}.dropzone .custom-file-input{min-height:100%;height:unset;width:100%;opacity:0;position:absolute}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i2.AsyncPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacDropzoneSingleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sac-dropzonesingle', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            multi: true,
+                            useExisting: SacDropzoneSingleComponent,
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            multi: true,
+                            useExisting: forwardRef(() => SacDropzoneSingleComponent),
+                        },
+                    ], template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isadaptivelabel\"\r\n    id=\"{{name}}_label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[labelsize !== 12 ?  'col-md-' + labelsize : 'sr-only']\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ? 'col-md-' + _inputsize : 'col-md-12']\"\r\n  >\r\n    <div\r\n      class=\"dropzone d-flex justify-content-center position-relative\"\r\n      (drop)=\"dropHandler($event)\"\r\n      (dragover)=\"onDragOver($event)\"\r\n      (dragleave)=\"onDragLeave($event)\"\r\n      [style.min-height]=\"uploadheight\"\r\n      [class.active]=\"active\"\r\n      [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n    >\r\n      <div\r\n        class=\"content d-flex justify-content-center position-relative\"\r\n        *ngIf=\"uploads.length === 0\"\r\n      >\r\n        <div class=\"align-self-center text-center\">\r\n          <div\r\n            [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n          >\r\n            <ng-content></ng-content>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div\r\n        class=\"content d-flex justify-content-center align-items-center w-50 my-3\"\r\n        *ngIf=\"uploads.length > 0\"\r\n      >\r\n        <div class=\"flex-fill progress-container\">\r\n          <div class=\"dropzone-uploadstates\" *ngFor=\"let file of uploads\">\r\n            <div class=\"input-group upload-component upload-component-multiple\">\r\n              <div class=\"form-control upload-progress border-secondary\">\r\n                <div class=\"progress\">\r\n                  <div\r\n                    class=\"progress-bar\"\r\n                    [class.progress-bar-success]=\"file.progress===100\"\r\n                    role=\"progressbar\"\r\n                    [attr.aria-valuenow]=\"file.progress\"\r\n                    aria-valuemin=\"0\"\r\n                    aria-valuemax=\"100\"\r\n                    [style.width.%]=\"file.progress\"\r\n                  >\r\n                    <span class=\"progress-text text-dark\">{{ file.name }}</span>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <a\r\n                class=\"btn\"\r\n                (click)=\"cancel(file.uploadId)\"\r\n                [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n              >\r\n                <span [class]=\"IconDelete\"></span>\r\n              </a>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <input\r\n        #files\r\n        id=\"{{ name }}_uploadinput\"\r\n        type=\"file\"\r\n        class=\"custom-file-input\"\r\n        (click)=\"files.value = ''\"\r\n        (uploadxState)=\"onUpload($event)\"\r\n        [disabled]=\"HasQueueItem()\"\r\n      />\r\n    </div>\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".dropzone{min-height:9.75rem;border:.125rem dashed lightgray;border-radius:.5rem;background:transparent}.dropzone.is-invalid{border-color:var(--bs-form-invalid-border-color)}.dropzone .content{position:relative;inset:0}.dropzone .content .is-invalid{color:var(--bs-form-invalid-border-color)}.dropzone .content .progress-container{min-width:50%;z-index:100}.dropzone .content .dropzone-uploadstates .upload-progress{padding:0}.dropzone .content .dropzone-uploadstates .upload-progress .progress{height:100%;border-top-right-radius:0;border-bottom-right-radius:0}.dropzone .content .dropzone-uploadstates .upload-progress .progress .progress-text{left:0;right:0;position:absolute}.dropzone .custom-file-input{min-height:100%;height:unset;width:100%;opacity:0;position:absolute}\n"] }]
+        }], ctorParameters: function () { return [{ type: SacFormDirective, decorators: [{
+                    type: Host
+                }, {
+                    type: Optional
+                }] }, { type: i0.Injector }, { type: i0.Renderer2 }, { type: i0.NgZone }]; } });
+
+/**
+ * Upload Komponten
+ * @see https://github.com/kukhariev/ngx-uploadx/
+ */
+class SacUploadComponent extends SacUploadSingleCommon {
+    /**
+     * Konstruktor
+     * @param parent Formular
+     * @param injector Angular Dependency Injection Service
+     * @param renderer Angular Rendering Engine
+     * @param ngZone ngZone Referenz
+     */
+    constructor(parent, injector, renderer, ngZone) {
+        super(parent, injector, renderer, ngZone);
+    }
+}
+SacUploadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacUploadComponent, deps: [{ token: SacFormDirective, host: true, optional: true }, { token: i0.Injector }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+SacUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacUploadComponent, selector: "sac-upload", providers: [
+        { provide: NG_VALUE_ACCESSOR, multi: true, useExisting: SacUploadComponent },
+        {
+            provide: NG_VALIDATORS,
+            multi: true,
+            useExisting: forwardRef(() => SacUploadComponent),
+        },
+    ], usesInheritance: true, ngImport: i0, template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isadaptivelabel\"\r\n    id=\"{{name}}_label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[labelsize !== 12 ?  'col-md-' + labelsize : 'sr-only']\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ? 'col-md-' + _inputsize : 'col-md-12']\"\r\n  >\r\n    <div\r\n      class=\"input-group upload-component upload-single\"\r\n      [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      <!-- image-preview-input -->\r\n      <div\r\n        class=\"btn upload-input custom-file\"\r\n        [class.disabled]=\"HasQueueItem()\"\r\n        [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n        [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n      >\r\n        <i class=\"pe-2\" [class]=\"IconBrowse\"></i>\r\n        <span class=\"upload-browse\"\r\n          >{{ lngResourceService.GetString('UPLOAD_BUTTON_BROWSE') | async\r\n          }}</span\r\n        >\r\n        <input\r\n          type=\"file\"\r\n          class=\"custom-file-input\"\r\n          #files\r\n          (click)=\"files.value = ''\"\r\n          (uploadxState)=\"onUpload($event)\"\r\n          multiple\r\n          [disabled]=\"HasQueueItem()\"\r\n        />\r\n      </div>\r\n      <div\r\n        class=\"form-control upload-progress\"\r\n        [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n      >\r\n        <div class=\"progress\">\r\n          <div\r\n            class=\"progress-bar\"\r\n            [class.progress-bar-success]=\"Progress()===100\"\r\n            role=\"progressbar\"\r\n            [attr.aria-valuenow]=\"Progress()\"\r\n            aria-valuemin=\"0\"\r\n            aria-valuemax=\"100\"\r\n            [style.width.%]=\"Progress()\"\r\n          >\r\n            <span class=\"progress-text text-dark\"\r\n              >{{ Filename() | async }}</span\r\n            >\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <button\r\n        class=\"btn\"\r\n        (click)=\"cancelAll()\"\r\n        [attr.disabled]=\"HasQueueItem() === false ? 'disabled' : null\"\r\n        [class.disabled]=\"HasQueueItem() === false ? 'disabled' : null\"\r\n        [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n        [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n      >\r\n        <span [class]=\"IconDelete\"></span>\r\n      </button>\r\n      <button\r\n        *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && IsPaused() === false)\"\r\n        class=\"btn\"\r\n        (click)=\"pauseAll()\"\r\n        [attr.disabled]=\"IsUploading() === false ? 'disabled' : null\"\r\n        [class.disabled]=\"IsUploading() === false ? 'disabled' : null\"\r\n        [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n        [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n      >\r\n        <span [class]=\"IconPause\"></span>\r\n      </button>\r\n      <button\r\n        *ngIf=\"autoupload && enablepause && IsPaused()\"\r\n        class=\"btn\"\r\n        (click)=\"uploadAll()\"\r\n        [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n        [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n      >\r\n        <span [class]=\"IconContinue\"></span>\r\n      </button>\r\n      <button\r\n        *ngIf=\"autoupload === false\"\r\n        class=\"btn text-nowrap\"\r\n        (click)=\"uploadAll()\"\r\n        [attr.disabled]=\"IsStateToUpload() === false ?  'disabled' : null\"\r\n        [class.disabled]=\"IsStateToUpload() === false ?  'disabled' : null\"\r\n        [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n        [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n      >\r\n        <span [class]=\"IconUpload\" class=\"pe-2\"></span>{{\r\n        lngResourceService.GetString('UPLOAD_BUTTON_UPLOAD') | async }}\r\n      </button>\r\n    </div>\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".upload-component .custom-file .custom-file-input{inset:0;position:absolute;opacity:0}.upload-component.upload-multiple .upload-progress .progress{border-top-right-radius:0;border-bottom-right-radius:0}.upload-component.upload-single .upload-progress .progress{border-radius:0}.upload-component .upload-progress{padding:0;border:0}.upload-component .upload-progress .progress{height:calc(2.25rem + 2px)}.upload-component .upload-progress .progress .progress-text{position:absolute;left:0;right:0}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "async": i2.AsyncPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacUploadComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sac-upload', providers: [
+                        { provide: NG_VALUE_ACCESSOR, multi: true, useExisting: SacUploadComponent },
+                        {
+                            provide: NG_VALIDATORS,
+                            multi: true,
+                            useExisting: forwardRef(() => SacUploadComponent),
+                        },
+                    ], template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isadaptivelabel\"\r\n    id=\"{{name}}_label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[labelsize !== 12 ?  'col-md-' + labelsize : 'sr-only']\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ? 'col-md-' + _inputsize : 'col-md-12']\"\r\n  >\r\n    <div\r\n      class=\"input-group upload-component upload-single\"\r\n      [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      <!-- image-preview-input -->\r\n      <div\r\n        class=\"btn upload-input custom-file\"\r\n        [class.disabled]=\"HasQueueItem()\"\r\n        [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n        [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n      >\r\n        <i class=\"pe-2\" [class]=\"IconBrowse\"></i>\r\n        <span class=\"upload-browse\"\r\n          >{{ lngResourceService.GetString('UPLOAD_BUTTON_BROWSE') | async\r\n          }}</span\r\n        >\r\n        <input\r\n          type=\"file\"\r\n          class=\"custom-file-input\"\r\n          #files\r\n          (click)=\"files.value = ''\"\r\n          (uploadxState)=\"onUpload($event)\"\r\n          multiple\r\n          [disabled]=\"HasQueueItem()\"\r\n        />\r\n      </div>\r\n      <div\r\n        class=\"form-control upload-progress\"\r\n        [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n      >\r\n        <div class=\"progress\">\r\n          <div\r\n            class=\"progress-bar\"\r\n            [class.progress-bar-success]=\"Progress()===100\"\r\n            role=\"progressbar\"\r\n            [attr.aria-valuenow]=\"Progress()\"\r\n            aria-valuemin=\"0\"\r\n            aria-valuemax=\"100\"\r\n            [style.width.%]=\"Progress()\"\r\n          >\r\n            <span class=\"progress-text text-dark\"\r\n              >{{ Filename() | async }}</span\r\n            >\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <button\r\n        class=\"btn\"\r\n        (click)=\"cancelAll()\"\r\n        [attr.disabled]=\"HasQueueItem() === false ? 'disabled' : null\"\r\n        [class.disabled]=\"HasQueueItem() === false ? 'disabled' : null\"\r\n        [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n        [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n      >\r\n        <span [class]=\"IconDelete\"></span>\r\n      </button>\r\n      <button\r\n        *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && IsPaused() === false)\"\r\n        class=\"btn\"\r\n        (click)=\"pauseAll()\"\r\n        [attr.disabled]=\"IsUploading() === false ? 'disabled' : null\"\r\n        [class.disabled]=\"IsUploading() === false ? 'disabled' : null\"\r\n        [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n        [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n      >\r\n        <span [class]=\"IconPause\"></span>\r\n      </button>\r\n      <button\r\n        *ngIf=\"autoupload && enablepause && IsPaused()\"\r\n        class=\"btn\"\r\n        (click)=\"uploadAll()\"\r\n        [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n        [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n      >\r\n        <span [class]=\"IconContinue\"></span>\r\n      </button>\r\n      <button\r\n        *ngIf=\"autoupload === false\"\r\n        class=\"btn text-nowrap\"\r\n        (click)=\"uploadAll()\"\r\n        [attr.disabled]=\"IsStateToUpload() === false ?  'disabled' : null\"\r\n        [class.disabled]=\"IsStateToUpload() === false ?  'disabled' : null\"\r\n        [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n        [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n      >\r\n        <span [class]=\"IconUpload\" class=\"pe-2\"></span>{{\r\n        lngResourceService.GetString('UPLOAD_BUTTON_UPLOAD') | async }}\r\n      </button>\r\n    </div>\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".upload-component .custom-file .custom-file-input{inset:0;position:absolute;opacity:0}.upload-component.upload-multiple .upload-progress .progress{border-top-right-radius:0;border-bottom-right-radius:0}.upload-component.upload-single .upload-progress .progress{border-radius:0}.upload-component .upload-progress{padding:0;border:0}.upload-component .upload-progress .progress{height:calc(2.25rem + 2px)}.upload-component .upload-progress .progress .progress-text{position:absolute;left:0;right:0}\n"] }]
+        }], ctorParameters: function () { return [{ type: SacFormDirective, decorators: [{
+                    type: Host
+                }, {
+                    type: Optional
+                }] }, { type: i0.Injector }, { type: i0.Renderer2 }, { type: i0.NgZone }]; } });
+
+/**
+ * Upload Komponente für den Upload mehrer Files
+ * @see https://github.com/kukhariev/ngx-uploadx/
+ */
+class SacUploadMultipleComponent extends SacUploadMultipleCommon {
+    /**
+     * Konstruktor
+     * @param parent Formular
+     * @param injector Angular Dependency Injection Service
+     * @param renderer Angular Rendering Engine
+     * @param ngZone ngZone
+     */
+    constructor(parent, injector, renderer, ngZone) {
+        super(parent, injector, renderer, ngZone);
+    }
+}
+SacUploadMultipleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacUploadMultipleComponent, deps: [{ token: SacFormDirective, host: true, optional: true }, { token: i0.Injector }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+SacUploadMultipleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacUploadMultipleComponent, selector: "sac-uploadmultiple", providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            multi: true,
+            useExisting: SacUploadMultipleComponent,
+        },
+        {
+            provide: NG_VALIDATORS,
+            multi: true,
+            useExisting: forwardRef(() => SacUploadMultipleComponent),
+        },
+    ], usesInheritance: true, ngImport: i0, template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isadaptivelabel\"\r\n    id=\"{{name}}_label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[labelsize !== 12 ?  'col-md-' + labelsize : 'sr-only']\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ? 'col-md-' + _inputsize : 'col-sm-12']\"\r\n  >\r\n    <div class=\"upload-component\">\r\n      <div class=\"row\">\r\n        <div class=\"col-12\">\r\n          <div\r\n            class=\"btn-group\"\r\n            [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n          >\r\n            <div\r\n              class=\"btn upload-input custom-file\"\r\n              [class.disabled]=\"maxfiles > 0 &&  uploads.length >= maxfiles\"\r\n              [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n              [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n            >\r\n              <i [class]=\"IconBrowse\" class=\"pe-2\"></i>\r\n              <span class=\"upload-browse\">Browse</span>\r\n              <input\r\n                type=\"file\"\r\n                class=\"custom-file-input\"\r\n                #files\r\n                (click)=\"files.value = ''\"\r\n                (uploadxState)=\"onUpload($event)\"\r\n                multiple\r\n                [disabled]=\"maxfiles > 0 &&  uploads.length >= maxfiles\"\r\n              />\r\n            </div>\r\n\r\n            <div class=\"btn-group\">\r\n              <!-- image-preview-clear button -->\r\n              <button\r\n                class=\"btn\"\r\n                (click)=\"cancelAll()\"\r\n                [attr.disabled]=\"HasQueueItem() === false ? 'disabled' : null\"\r\n                [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n              >\r\n                <span [class]=\"IconDelete\"></span>\r\n              </button>\r\n              <button\r\n                *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && IsPaused() === false)\"\r\n                class=\"btn\"\r\n                (click)=\"pauseAll()\"\r\n                [attr.disabled]=\"IsUploading() === false ? 'disabled' : null\"\r\n                [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n              >\r\n                <span [class]=\"IconPause\"></span>\r\n              </button>\r\n              <button\r\n                *ngIf=\"autoupload && enablepause && IsPaused() === true\"\r\n                class=\"btn\"\r\n                (click)=\"uploadAll()\"\r\n                [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n              >\r\n                <span [class]=\"IconContinue\"></span>\r\n              </button>\r\n              <button\r\n                *ngIf=\"autoupload === false\"\r\n                class=\"btn text-nowrap\"\r\n                (click)=\"uploadAll()\"\r\n                [attr.disabled]=\"IsStateToUpload() === false ?  'disabled' : null\"\r\n                [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n              >\r\n                <span [class]=\"IconUpload\" class=\"pe-2\"></span> {{\r\n                lngResourceService.GetString('UPLOAD_BUTTON_UPLOAD') | async }}\r\n              </button>\r\n            </div>\r\n          </div>\r\n          <div\r\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n            class=\"invalid-feedback\"\r\n          >\r\n            {{ GetErrorMessage() | async }}\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngFor=\"let file of uploads\" style=\"margin-top: 5px\">\r\n        <div class=\"input-group upload-component upload-multiple\">\r\n          <div\r\n            class=\"form-control upload-progress\"\r\n            [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n          >\r\n            <div class=\"progress\">\r\n              <div\r\n                class=\"progress-bar\"\r\n                [class.progress-bar-success]=\"file.progress===100\"\r\n                role=\"progressbar\"\r\n                [attr.aria-valuenow]=\"file.progress\"\r\n                aria-valuemin=\"0\"\r\n                aria-valuemax=\"100\"\r\n                [style.width.%]=\"file.progress\"\r\n              >\r\n                <span class=\"progress-text text-dark\">{{ file.name }}</span>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <button\r\n            class=\"btn\"\r\n            (click)=\"cancel(file.uploadId)\"\r\n            [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n            [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n          >\r\n            <span [class]=\"IconDelete\"></span>\r\n          </button>\r\n          <button\r\n            *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && file.status !== 'paused')\"\r\n            class=\"btn\"\r\n            (click)=\"pause(file.uploadId)\"\r\n            [attr.disabled]=\"file.status !== 'uploading' ? 'disabled' : null\"\r\n            [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n            [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n          >\r\n            <span [class]=\"IconPause\"></span>\r\n          </button>\r\n          <button\r\n            *ngIf=\"autoupload && enablepause && file.status === 'paused'\"\r\n            class=\"btn\"\r\n            (click)=\"upload(file.uploadId)\"\r\n            [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n            [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n          >\r\n            <span [class]=\"IconContinue\"></span>\r\n          </button>\r\n          <button\r\n            *ngIf=\"autoupload === false\"\r\n            class=\"btn text-nowrap\"\r\n            (click)=\"upload(file.uploadId)\"\r\n            [attr.disabled]=\"file.status !== 'added' && file.status !== 'paused' ?  'disabled' : null\"\r\n            [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n            [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n          >\r\n            <span [class]=\"IconUpload\" class=\"pe-2\"></span>{{\r\n            lngResourceService.GetString('UPLOAD_BUTTON_UPLOAD') | async }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".upload-component .custom-file .custom-file-input{inset:0;position:absolute;opacity:0}.upload-component.upload-multiple .upload-progress .progress{border-top-right-radius:0;border-bottom-right-radius:0}.upload-component.upload-single .upload-progress .progress{border-radius:0}.upload-component .upload-progress{padding:0;border:0}.upload-component .upload-progress .progress{height:calc(2.25rem + 2px)}.upload-component .upload-progress .progress .progress-text{position:absolute;left:0;right:0}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i2.AsyncPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacUploadMultipleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sac-uploadmultiple', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            multi: true,
+                            useExisting: SacUploadMultipleComponent,
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            multi: true,
+                            useExisting: forwardRef(() => SacUploadMultipleComponent),
+                        },
+                    ], template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isadaptivelabel\"\r\n    id=\"{{name}}_label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[labelsize !== 12 ?  'col-md-' + labelsize : 'sr-only']\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ? 'col-md-' + _inputsize : 'col-sm-12']\"\r\n  >\r\n    <div class=\"upload-component\">\r\n      <div class=\"row\">\r\n        <div class=\"col-12\">\r\n          <div\r\n            class=\"btn-group\"\r\n            [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n          >\r\n            <div\r\n              class=\"btn upload-input custom-file\"\r\n              [class.disabled]=\"maxfiles > 0 &&  uploads.length >= maxfiles\"\r\n              [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n              [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n            >\r\n              <i [class]=\"IconBrowse\" class=\"pe-2\"></i>\r\n              <span class=\"upload-browse\">Browse</span>\r\n              <input\r\n                type=\"file\"\r\n                class=\"custom-file-input\"\r\n                #files\r\n                (click)=\"files.value = ''\"\r\n                (uploadxState)=\"onUpload($event)\"\r\n                multiple\r\n                [disabled]=\"maxfiles > 0 &&  uploads.length >= maxfiles\"\r\n              />\r\n            </div>\r\n\r\n            <div class=\"btn-group\">\r\n              <!-- image-preview-clear button -->\r\n              <button\r\n                class=\"btn\"\r\n                (click)=\"cancelAll()\"\r\n                [attr.disabled]=\"HasQueueItem() === false ? 'disabled' : null\"\r\n                [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n              >\r\n                <span [class]=\"IconDelete\"></span>\r\n              </button>\r\n              <button\r\n                *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && IsPaused() === false)\"\r\n                class=\"btn\"\r\n                (click)=\"pauseAll()\"\r\n                [attr.disabled]=\"IsUploading() === false ? 'disabled' : null\"\r\n                [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n              >\r\n                <span [class]=\"IconPause\"></span>\r\n              </button>\r\n              <button\r\n                *ngIf=\"autoupload && enablepause && IsPaused() === true\"\r\n                class=\"btn\"\r\n                (click)=\"uploadAll()\"\r\n                [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n              >\r\n                <span [class]=\"IconContinue\"></span>\r\n              </button>\r\n              <button\r\n                *ngIf=\"autoupload === false\"\r\n                class=\"btn text-nowrap\"\r\n                (click)=\"uploadAll()\"\r\n                [attr.disabled]=\"IsStateToUpload() === false ?  'disabled' : null\"\r\n                [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n              >\r\n                <span [class]=\"IconUpload\" class=\"pe-2\"></span> {{\r\n                lngResourceService.GetString('UPLOAD_BUTTON_UPLOAD') | async }}\r\n              </button>\r\n            </div>\r\n          </div>\r\n          <div\r\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n            class=\"invalid-feedback\"\r\n          >\r\n            {{ GetErrorMessage() | async }}\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngFor=\"let file of uploads\" style=\"margin-top: 5px\">\r\n        <div class=\"input-group upload-component upload-multiple\">\r\n          <div\r\n            class=\"form-control upload-progress\"\r\n            [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n          >\r\n            <div class=\"progress\">\r\n              <div\r\n                class=\"progress-bar\"\r\n                [class.progress-bar-success]=\"file.progress===100\"\r\n                role=\"progressbar\"\r\n                [attr.aria-valuenow]=\"file.progress\"\r\n                aria-valuemin=\"0\"\r\n                aria-valuemax=\"100\"\r\n                [style.width.%]=\"file.progress\"\r\n              >\r\n                <span class=\"progress-text text-dark\">{{ file.name }}</span>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <button\r\n            class=\"btn\"\r\n            (click)=\"cancel(file.uploadId)\"\r\n            [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n            [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n          >\r\n            <span [class]=\"IconDelete\"></span>\r\n          </button>\r\n          <button\r\n            *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && file.status !== 'paused')\"\r\n            class=\"btn\"\r\n            (click)=\"pause(file.uploadId)\"\r\n            [attr.disabled]=\"file.status !== 'uploading' ? 'disabled' : null\"\r\n            [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n            [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n          >\r\n            <span [class]=\"IconPause\"></span>\r\n          </button>\r\n          <button\r\n            *ngIf=\"autoupload && enablepause && file.status === 'paused'\"\r\n            class=\"btn\"\r\n            (click)=\"upload(file.uploadId)\"\r\n            [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n            [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n          >\r\n            <span [class]=\"IconContinue\"></span>\r\n          </button>\r\n          <button\r\n            *ngIf=\"autoupload === false\"\r\n            class=\"btn text-nowrap\"\r\n            (click)=\"upload(file.uploadId)\"\r\n            [attr.disabled]=\"file.status !== 'added' && file.status !== 'paused' ?  'disabled' : null\"\r\n            [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n            [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n          >\r\n            <span [class]=\"IconUpload\" class=\"pe-2\"></span>{{\r\n            lngResourceService.GetString('UPLOAD_BUTTON_UPLOAD') | async }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".upload-component .custom-file .custom-file-input{inset:0;position:absolute;opacity:0}.upload-component.upload-multiple .upload-progress .progress{border-top-right-radius:0;border-bottom-right-radius:0}.upload-component.upload-single .upload-progress .progress{border-radius:0}.upload-component .upload-progress{padding:0;border:0}.upload-component .upload-progress .progress{height:calc(2.25rem + 2px)}.upload-component .upload-progress .progress .progress-text{position:absolute;left:0;right:0}\n"] }]
+        }], ctorParameters: function () { return [{ type: SacFormDirective, decorators: [{
+                    type: Host
+                }, {
+                    type: Optional
+                }] }, { type: i0.Injector }, { type: i0.Renderer2 }, { type: i0.NgZone }]; } });
+
+class SACBootstrap5UploadModule {
+}
+SACBootstrap5UploadModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5UploadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SACBootstrap5UploadModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5UploadModule, declarations: [SacUploadComponent,
+        SacUploadMultipleComponent,
+        SacDropzoneSingleComponent,
+        SacDropzoneMultipleComponent], imports: [CommonModule, FormsModule], exports: [SacUploadComponent,
+        SacUploadMultipleComponent,
+        SacDropzoneSingleComponent,
+        SacDropzoneMultipleComponent] });
+SACBootstrap5UploadModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5UploadModule, imports: [[CommonModule, FormsModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5UploadModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SacUploadComponent,
+                        SacUploadMultipleComponent,
+                        SacDropzoneSingleComponent,
+                        SacDropzoneMultipleComponent,
+                    ],
+                    imports: [CommonModule, FormsModule],
+                    exports: [
+                        SacUploadComponent,
+                        SacUploadMultipleComponent,
+                        SacDropzoneSingleComponent,
+                        SacDropzoneMultipleComponent,
+                    ],
+                }]
+        }] });
+
+/**
+ * Server File Browser Komponente
+ */
+class SacBrowserComponent extends SacFileBrowserCommon {
+    /**
+     * Konstruktor
+     * @param httpClient HTTP Client
+     * @param injector Angular Dependency Injection Service
+     * @param confirmService Confirm Service
+     */
+    constructor(httpClient, injector, confirmService) {
+        super(httpClient, injector);
+        this.confirmService = confirmService;
+    }
+    /**
+     * Erzeugt ein Array von einer bestimmten grösse
+     * @param anzahl Grösse des Array
+     * @returns Array
+     */
+    count(anzahl) {
+        return new Array(anzahl);
+    }
+    /**
+     * Confirm Action wenn ein File gelöscht werden soll
+     * @param file File das gelöscht werden soll.
+     * @returns Observable ob File gelöscht werden kann.
+     */
+    confirmDeleteFile(file) {
+        return new Observable((observer) => {
+            forkJoin({
+                title: this.lngResourceService.GetString('FILEBROWSER_DELETE'),
+                message: this.lngResourceService.GetString('FILEBROWSER_CONFIRM_DELETEFILE'),
+            }).subscribe((text) => {
+                this.confirmService
+                    .ConfirmMessage(text.title, text.message)
+                    .subscribe((result) => {
+                    if (result === 'yes') {
+                        observer.next(true);
+                    }
+                    else {
+                        observer.next(false);
+                    }
+                    observer.complete();
+                });
+            });
+        });
+    }
+    /**
+     * Confirm Action wenn ein Ordner gelöscht werden soll
+     * @param node Ordner der gelöscht werden soll
+     * @returns Observable ob Ordner gelöscht kann.
+     */
+    confirmDeleteNode(node) {
+        return new Observable((observer) => {
+            forkJoin({
+                title: this.lngResourceService.GetString('FILEBROWSER_DELETE'),
+                message: this.lngResourceService.GetString('FILEBROWSER_CONFIRM_DELETEFOLDER'),
+            }).subscribe((text) => {
+                this.confirmService
+                    .ConfirmMessage(text.title, text.message)
+                    .subscribe((result) => {
+                    if (result === 'yes') {
+                        observer.next(true);
+                    }
+                    else {
+                        observer.next(false);
+                    }
+                    observer.complete();
+                });
+            });
+        });
+    }
+    /**
+     * Methode wird aufgerufen, wenn eine Datei verschoben wird
+     * @param uploadid Upload ID
+     */
+    uploadedFileMoved(uploadid) {
+        const item = this.uploadComponent.uploads.find((itm) => itm.documentid === uploadid);
+        if (item) {
+            this.uploadComponent.cancel(item.uploadId);
+        }
+    }
+}
+SacBrowserComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacBrowserComponent, deps: [{ token: i1$1.HttpClient }, { token: i0.Injector }, { token: ServiceConfirm }], target: i0.ɵɵFactoryTarget.Component });
+SacBrowserComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacBrowserComponent, selector: "sac-filebrowser", providers: [ServiceConfirm], viewQueries: [{ propertyName: "uploadComponent", first: true, predicate: SacDropzoneMultipleComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\r\n  <div class=\"col-12 col-md-5 col-lg-4\">\r\n    <ul class=\"list-group list-group-flush\">\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"treeItem\"\r\n        [ngTemplateOutletContext]=\"{node: rootNode, deep: 0}\"\r\n      ></ng-template>\r\n    </ul>\r\n\r\n    <ng-template #treeItem let-node=\"node\" let-deep=\"deep\">\r\n      <li\r\n        class=\"list-group-item py-1 px-2 d-flex align-items-center\"\r\n        [class.list-group-item-secondary]=\"node === selectedNode\"\r\n        (click)=\"selectNode(node)\"\r\n        style=\"cursor: pointer\"\r\n      >\r\n        <div class=\"mx-3\" *ngFor=\"let i of count(deep)\"></div>\r\n        <div\r\n          (click)=\"switchExpandNode(node);$event.stopPropagation();\"\r\n          class=\"me-2\"\r\n          [ngClass]=\"node.ChildNodes.length === 0 ? iconFolderEmpty: (!node.IsExpanded && node.ChildNodes.length > 0 ? iconFolderCollabsed : (node.IsExpanded && node.ChildNodes.length > 0 ? iconFolderOpen : ''))\"\r\n        ></div>\r\n        <ng-container *ngIf=\"!node.IsEditMode\">\r\n          <div class=\"flex-grow-1\">{{ node.Name }}</div>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"node.IsEditMode\">\r\n          <div class=\"flex-grow-1\" ngForm>\r\n            <input\r\n              name=\"editFolder\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"node.Name\"\r\n              [ngModelOptions]=\"{updateOn: 'blur'}\"\r\n              (ngModelChange)=\"renameNode(node, $event)\"\r\n              (keydown.enter)=\"$event.target.blur();false;\"\r\n              (blur)=\"renameNode(node, null)\"\r\n              (click)=\"$event.stopPropagation()\"\r\n            />\r\n          </div>\r\n        </ng-container>\r\n        <div class=\"flex-shrink-0\">\r\n          <a\r\n            *ngIf=\"node.Path !== '/' && allowfolderrename\"\r\n            class=\"btn btn-sm btn-link text-secondary\"\r\n            (click)=\"editNode(node);$event.stopPropagation();\"\r\n          >\r\n            <i [class]=\"iconEdit\"></i>\r\n          </a>\r\n          <sac-contextmenu cssclass=\"d-inline-block\">\r\n            <sac-contextmenubutton\r\n              *ngIf=\"allowfoldercreate\"\r\n              text=\"{{ lngResourceService.GetString('FILEBROWSER_NEWFOLDER') | async }}\"\r\n              [icon]=\"iconFolderNew\"\r\n              (clicked)=\"newNode(node)\"\r\n            ></sac-contextmenubutton>\r\n            <sac-contextmenubutton\r\n              *ngIf=\"node.Path !== '/' && allowfolderdelete\"\r\n              text=\"{{ lngResourceService.GetString('FILEBROWSER_DELETE') | async }}\"\r\n              [icon]=\"iconDelete\"\r\n              (clicked)=\"deleteNode(node)\"\r\n            ></sac-contextmenubutton>\r\n            <sac-contextmenusplitter\r\n              *ngIf=\"allowfoldercreate || (node.Path !== '/' && allowfolderdelete)\"\r\n            ></sac-contextmenusplitter>\r\n            <sac-contextmenubutton\r\n              text=\"{{ lngResourceService.GetString('FILEBROWSER_REFRESH') | async }}\"\r\n              [icon]=\"iconRefresh\"\r\n              (clicked)=\"refreshNode(node)\"\r\n            ></sac-contextmenubutton>\r\n          </sac-contextmenu>\r\n        </div>\r\n      </li>\r\n\r\n      <ng-container *ngIf=\"node.IsExpanded\">\r\n        <ng-template\r\n          *ngFor=\"let child of node.ChildNodes\"\r\n          [ngTemplateOutlet]=\"treeItem\"\r\n          [ngTemplateOutletContext]=\"{node: child, deep: deep + 1}\"\r\n        ></ng-template>\r\n      </ng-container>\r\n    </ng-template>\r\n  </div>\r\n  <div class=\"col-12 col-md-7 col-lg-8\">\r\n    <ng-container *ngIf=\"selectedNode && selectedNode.Files\">\r\n      <div *ngIf=\"allowfileupload\" ngForm>\r\n        <sac-dropzonemultiple\r\n          [disablelabel]=\"true\"\r\n          [endpoint]=\"apiurl + '/uploadregister'\"\r\n          name=\"upload\"\r\n          uploadheight=\"5rem\"\r\n          [ngModel]=\"uploads\"\r\n          (ngModelChange)=\"uploadComplete(selectedNode,$event)\"\r\n          [allowedtypes]=\"allowedtypes\"\r\n          >{{ lngResourceService.GetString('FILEBROWSER_UPLOAD') | async\r\n          }}</sac-dropzonemultiple\r\n        >\r\n      </div>\r\n      <div class=\"table-responsive\">\r\n        <table class=\"table table-striped table-hover align-middle\">\r\n          <thead>\r\n            <th>\r\n              {{ lngResourceService.GetString('FILEBROWSER_GRID_FILE') | async\r\n              }}\r\n            </th>\r\n            <th>\r\n              {{ lngResourceService.GetString('FILEBROWSER_GRID_SIZE') | async\r\n              }}\r\n            </th>\r\n            <th style=\"width: 80px\"></th>\r\n          </thead>\r\n          <tbody>\r\n            <ng-container *ngIf=\"selectedNode.Files.length === 0\">\r\n              <tr>\r\n                <td colspan=\"3\">\r\n                  {{ lngResourceService.GetString('FILEBROWSER_NO_FILES') |\r\n                  async }}\r\n                </td>\r\n              </tr>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"selectedNode.Files.length > 0\">\r\n              <tr\r\n                *ngFor=\"let item of selectedNode.Files\"\r\n                (click)=\"selectFile(item)\"\r\n                [class.table-primary]=\"selectedFileItem === item\"\r\n              >\r\n                <td [class.p-2]=\"item.IsEditMode\">\r\n                  <ng-container *ngIf=\"!item.IsEditMode\">\r\n                    {{ item.Filename }}\r\n                  </ng-container>\r\n                  <ng-container *ngIf=\"item.IsEditMode\">\r\n                    <div>\r\n                      <input\r\n                        name=\"editFolder\"\r\n                        class=\"form-control form-control-sm\"\r\n                        [ngModel]=\"item.Filename\"\r\n                        [ngModelOptions]=\"{updateOn: 'blur'}\"\r\n                        (ngModelChange)=\"renameFile(item, $event)\"\r\n                        (keydown.enter)=\"$event.target.blur();false\"\r\n                        (blur)=\"renameFile(item, null)\"\r\n                        (click)=\"$event.stopPropagation();\"\r\n                      />\r\n                    </div>\r\n                  </ng-container>\r\n                </td>\r\n                <td>{{ item.Size}}</td>\r\n                <td class=\"p-2\">\r\n                  <div class=\"btn-toolbar\" role=\"toolbar\">\r\n                    <div class=\"btn-group ml-auto\" role=\"group\">\r\n                      <a\r\n                        *ngIf=\"allowfilerename\"\r\n                        class=\"btn btn-sm btn-link text-secondary\"\r\n                        (click)=\"editFile(item);$event.stopPropagation();\"\r\n                        ><i [class]=\"iconEdit\"></i\r\n                      ></a>\r\n                    </div>\r\n                    <div class=\"btn-group\" role=\"group\">\r\n                      <a\r\n                        *ngIf=\"allowfiledelete\"\r\n                        class=\"btn btn-sm btn-link text-secondary\"\r\n                        (click)=\"deleteFile(item);$event.stopPropagation();\"\r\n                        ><i [class]=\"iconDelete\"></i\r\n                      ></a>\r\n                    </div>\r\n                  </div>\r\n                </td>\r\n              </tr>\r\n            </ng-container>\r\n          </tbody>\r\n        </table>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</div>\r\n", components: [{ type: SacContextmenuComponent, selector: "sac-contextmenu" }, { type: SacContextmenuItemButtonComponent, selector: "sac-contextmenubutton" }, { type: SacContextmenuItemSplitterComponent, selector: "sac-contextmenusplitter" }, { type: SacDropzoneMultipleComponent, selector: "sac-dropzonemultiple" }], directives: [{ type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: SacFormDirective, selector: "form:not([ngNoForm]):not([formGroup]),[ngForm]", exportAs: ["sacform"] }, { type: i9.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i9.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i9.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i9.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "async": i2.AsyncPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacBrowserComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sac-filebrowser', providers: [ServiceConfirm], template: "<div class=\"row\">\r\n  <div class=\"col-12 col-md-5 col-lg-4\">\r\n    <ul class=\"list-group list-group-flush\">\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"treeItem\"\r\n        [ngTemplateOutletContext]=\"{node: rootNode, deep: 0}\"\r\n      ></ng-template>\r\n    </ul>\r\n\r\n    <ng-template #treeItem let-node=\"node\" let-deep=\"deep\">\r\n      <li\r\n        class=\"list-group-item py-1 px-2 d-flex align-items-center\"\r\n        [class.list-group-item-secondary]=\"node === selectedNode\"\r\n        (click)=\"selectNode(node)\"\r\n        style=\"cursor: pointer\"\r\n      >\r\n        <div class=\"mx-3\" *ngFor=\"let i of count(deep)\"></div>\r\n        <div\r\n          (click)=\"switchExpandNode(node);$event.stopPropagation();\"\r\n          class=\"me-2\"\r\n          [ngClass]=\"node.ChildNodes.length === 0 ? iconFolderEmpty: (!node.IsExpanded && node.ChildNodes.length > 0 ? iconFolderCollabsed : (node.IsExpanded && node.ChildNodes.length > 0 ? iconFolderOpen : ''))\"\r\n        ></div>\r\n        <ng-container *ngIf=\"!node.IsEditMode\">\r\n          <div class=\"flex-grow-1\">{{ node.Name }}</div>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"node.IsEditMode\">\r\n          <div class=\"flex-grow-1\" ngForm>\r\n            <input\r\n              name=\"editFolder\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"node.Name\"\r\n              [ngModelOptions]=\"{updateOn: 'blur'}\"\r\n              (ngModelChange)=\"renameNode(node, $event)\"\r\n              (keydown.enter)=\"$event.target.blur();false;\"\r\n              (blur)=\"renameNode(node, null)\"\r\n              (click)=\"$event.stopPropagation()\"\r\n            />\r\n          </div>\r\n        </ng-container>\r\n        <div class=\"flex-shrink-0\">\r\n          <a\r\n            *ngIf=\"node.Path !== '/' && allowfolderrename\"\r\n            class=\"btn btn-sm btn-link text-secondary\"\r\n            (click)=\"editNode(node);$event.stopPropagation();\"\r\n          >\r\n            <i [class]=\"iconEdit\"></i>\r\n          </a>\r\n          <sac-contextmenu cssclass=\"d-inline-block\">\r\n            <sac-contextmenubutton\r\n              *ngIf=\"allowfoldercreate\"\r\n              text=\"{{ lngResourceService.GetString('FILEBROWSER_NEWFOLDER') | async }}\"\r\n              [icon]=\"iconFolderNew\"\r\n              (clicked)=\"newNode(node)\"\r\n            ></sac-contextmenubutton>\r\n            <sac-contextmenubutton\r\n              *ngIf=\"node.Path !== '/' && allowfolderdelete\"\r\n              text=\"{{ lngResourceService.GetString('FILEBROWSER_DELETE') | async }}\"\r\n              [icon]=\"iconDelete\"\r\n              (clicked)=\"deleteNode(node)\"\r\n            ></sac-contextmenubutton>\r\n            <sac-contextmenusplitter\r\n              *ngIf=\"allowfoldercreate || (node.Path !== '/' && allowfolderdelete)\"\r\n            ></sac-contextmenusplitter>\r\n            <sac-contextmenubutton\r\n              text=\"{{ lngResourceService.GetString('FILEBROWSER_REFRESH') | async }}\"\r\n              [icon]=\"iconRefresh\"\r\n              (clicked)=\"refreshNode(node)\"\r\n            ></sac-contextmenubutton>\r\n          </sac-contextmenu>\r\n        </div>\r\n      </li>\r\n\r\n      <ng-container *ngIf=\"node.IsExpanded\">\r\n        <ng-template\r\n          *ngFor=\"let child of node.ChildNodes\"\r\n          [ngTemplateOutlet]=\"treeItem\"\r\n          [ngTemplateOutletContext]=\"{node: child, deep: deep + 1}\"\r\n        ></ng-template>\r\n      </ng-container>\r\n    </ng-template>\r\n  </div>\r\n  <div class=\"col-12 col-md-7 col-lg-8\">\r\n    <ng-container *ngIf=\"selectedNode && selectedNode.Files\">\r\n      <div *ngIf=\"allowfileupload\" ngForm>\r\n        <sac-dropzonemultiple\r\n          [disablelabel]=\"true\"\r\n          [endpoint]=\"apiurl + '/uploadregister'\"\r\n          name=\"upload\"\r\n          uploadheight=\"5rem\"\r\n          [ngModel]=\"uploads\"\r\n          (ngModelChange)=\"uploadComplete(selectedNode,$event)\"\r\n          [allowedtypes]=\"allowedtypes\"\r\n          >{{ lngResourceService.GetString('FILEBROWSER_UPLOAD') | async\r\n          }}</sac-dropzonemultiple\r\n        >\r\n      </div>\r\n      <div class=\"table-responsive\">\r\n        <table class=\"table table-striped table-hover align-middle\">\r\n          <thead>\r\n            <th>\r\n              {{ lngResourceService.GetString('FILEBROWSER_GRID_FILE') | async\r\n              }}\r\n            </th>\r\n            <th>\r\n              {{ lngResourceService.GetString('FILEBROWSER_GRID_SIZE') | async\r\n              }}\r\n            </th>\r\n            <th style=\"width: 80px\"></th>\r\n          </thead>\r\n          <tbody>\r\n            <ng-container *ngIf=\"selectedNode.Files.length === 0\">\r\n              <tr>\r\n                <td colspan=\"3\">\r\n                  {{ lngResourceService.GetString('FILEBROWSER_NO_FILES') |\r\n                  async }}\r\n                </td>\r\n              </tr>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"selectedNode.Files.length > 0\">\r\n              <tr\r\n                *ngFor=\"let item of selectedNode.Files\"\r\n                (click)=\"selectFile(item)\"\r\n                [class.table-primary]=\"selectedFileItem === item\"\r\n              >\r\n                <td [class.p-2]=\"item.IsEditMode\">\r\n                  <ng-container *ngIf=\"!item.IsEditMode\">\r\n                    {{ item.Filename }}\r\n                  </ng-container>\r\n                  <ng-container *ngIf=\"item.IsEditMode\">\r\n                    <div>\r\n                      <input\r\n                        name=\"editFolder\"\r\n                        class=\"form-control form-control-sm\"\r\n                        [ngModel]=\"item.Filename\"\r\n                        [ngModelOptions]=\"{updateOn: 'blur'}\"\r\n                        (ngModelChange)=\"renameFile(item, $event)\"\r\n                        (keydown.enter)=\"$event.target.blur();false\"\r\n                        (blur)=\"renameFile(item, null)\"\r\n                        (click)=\"$event.stopPropagation();\"\r\n                      />\r\n                    </div>\r\n                  </ng-container>\r\n                </td>\r\n                <td>{{ item.Size}}</td>\r\n                <td class=\"p-2\">\r\n                  <div class=\"btn-toolbar\" role=\"toolbar\">\r\n                    <div class=\"btn-group ml-auto\" role=\"group\">\r\n                      <a\r\n                        *ngIf=\"allowfilerename\"\r\n                        class=\"btn btn-sm btn-link text-secondary\"\r\n                        (click)=\"editFile(item);$event.stopPropagation();\"\r\n                        ><i [class]=\"iconEdit\"></i\r\n                      ></a>\r\n                    </div>\r\n                    <div class=\"btn-group\" role=\"group\">\r\n                      <a\r\n                        *ngIf=\"allowfiledelete\"\r\n                        class=\"btn btn-sm btn-link text-secondary\"\r\n                        (click)=\"deleteFile(item);$event.stopPropagation();\"\r\n                        ><i [class]=\"iconDelete\"></i\r\n                      ></a>\r\n                    </div>\r\n                  </div>\r\n                </td>\r\n              </tr>\r\n            </ng-container>\r\n          </tbody>\r\n        </table>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</div>\r\n" }]
+        }], ctorParameters: function () { return [{ type: i1$1.HttpClient }, { type: i0.Injector }, { type: ServiceConfirm }]; }, propDecorators: { uploadComponent: [{
+                type: ViewChild,
+                args: [SacDropzoneMultipleComponent, { static: false }]
+            }] } });
+
+class SACBootstrap5BrowserModule {
+}
+SACBootstrap5BrowserModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5BrowserModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SACBootstrap5BrowserModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5BrowserModule, bootstrap: [SacBrowserComponent], declarations: [SacBrowserComponent], imports: [CommonModule,
+        HttpClientModule,
+        SACBootstrap5ConfirmModule,
+        SACBootstrap5ContextmenuModule,
+        SACBootstrap5UploadModule,
+        SACBootstrap5FormModule,
+        FormsModule], exports: [SacBrowserComponent] });
+SACBootstrap5BrowserModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5BrowserModule, imports: [[
+            CommonModule,
+            HttpClientModule,
+            SACBootstrap5ConfirmModule,
+            SACBootstrap5ContextmenuModule,
+            SACBootstrap5UploadModule,
+            SACBootstrap5FormModule,
+            FormsModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5BrowserModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SacBrowserComponent],
+                    imports: [
+                        CommonModule,
+                        HttpClientModule,
+                        SACBootstrap5ConfirmModule,
+                        SACBootstrap5ContextmenuModule,
+                        SACBootstrap5UploadModule,
+                        SACBootstrap5FormModule,
+                        FormsModule,
+                    ],
+                    exports: [SacBrowserComponent],
+                    bootstrap: [SacBrowserComponent],
+                }]
+        }] });
+
+/**
+ * Checkbox Kompontente
+ */
+class SacCheckboxComponent extends SacCheckboxCommon {
+    /**
+     * Konstruktor
+     * @param parent Formular
+     * @param injector Angular Dependency Injection Service
+     */
+    constructor(parent, injector) {
+        super(parent, injector);
+    }
+}
+SacCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacCheckboxComponent, deps: [{ token: SacFormDirective, host: true, optional: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+SacCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacCheckboxComponent, selector: "sac-checkbox", providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            multi: true,
+            useExisting: SacCheckboxComponent,
+        },
+        {
+            provide: NG_VALIDATORS,
+            useExisting: forwardRef(() => SacCheckboxComponent),
+            multi: true,
+        },
+    ], usesInheritance: true, ngImport: i0, template: "<div class=\"row mb-3 align-items-center\" [class.g-0]=\"disablelabel\">\r\n  <div class=\"col-12 col-form-label col-form-label-sm\" [ngClass]=\"[disablelabel === false ?  'col-sm-' + labelsize : 'sr-only' ]\">\r\n    <ng-container *ngIf=\"!disablelabel\">{{label}}</ng-container>\r\n  </div>\r\n  <div class=\"col-12\" [ngClass]=\"[disablelabel === false ? 'col-sm-' + _inputsize : 'col-sm-12']\">\r\n    <div class=\"form-check\">\r\n      <input class=\"form-check-input form-check-input-sm\" id=\"{{name}}\" name=\"{{name}}\" type=\"checkbox\" [checked]=\"value\"\r\n        (blur)=\"onTouch()\" (change)=\"setValue($event.target.checked)\" [disabled]=\"isdisabled\" />\r\n      <label for=\"{{name}}\" class=\"form-check-label\">\r\n        <ng-container *ngIf=\"checkboxtext\">{{checkboxtext}}</ng-container>\r\n      </label>\r\n    </div>\r\n  </div>\r\n</div>", directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], viewProviders: [
+        { provide: ControlContainer, useExisting: SacFormDirective },
+    ] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacCheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sac-checkbox', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            multi: true,
+                            useExisting: SacCheckboxComponent,
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: forwardRef(() => SacCheckboxComponent),
+                            multi: true,
+                        },
+                    ], viewProviders: [
+                        { provide: ControlContainer, useExisting: SacFormDirective },
+                    ], template: "<div class=\"row mb-3 align-items-center\" [class.g-0]=\"disablelabel\">\r\n  <div class=\"col-12 col-form-label col-form-label-sm\" [ngClass]=\"[disablelabel === false ?  'col-sm-' + labelsize : 'sr-only' ]\">\r\n    <ng-container *ngIf=\"!disablelabel\">{{label}}</ng-container>\r\n  </div>\r\n  <div class=\"col-12\" [ngClass]=\"[disablelabel === false ? 'col-sm-' + _inputsize : 'col-sm-12']\">\r\n    <div class=\"form-check\">\r\n      <input class=\"form-check-input form-check-input-sm\" id=\"{{name}}\" name=\"{{name}}\" type=\"checkbox\" [checked]=\"value\"\r\n        (blur)=\"onTouch()\" (change)=\"setValue($event.target.checked)\" [disabled]=\"isdisabled\" />\r\n      <label for=\"{{name}}\" class=\"form-check-label\">\r\n        <ng-container *ngIf=\"checkboxtext\">{{checkboxtext}}</ng-container>\r\n      </label>\r\n    </div>\r\n  </div>\r\n</div>" }]
+        }], ctorParameters: function () { return [{ type: SacFormDirective, decorators: [{
+                    type: Host
+                }, {
+                    type: Optional
+                }] }, { type: i0.Injector }]; } });
+
+/**
+ * Radiobuttons Group Komponente
+ */
+class SacRadiobuttonsComponent extends SacRadiobuttonsCommon {
+    /**
+     * Konstruktor
+     * @param parent Formular
+     * @param injector Angular Dependency Injection Service
+     */
+    constructor(parent, injector) {
+        super(parent, injector);
+    }
+}
+SacRadiobuttonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacRadiobuttonsComponent, deps: [{ token: SacFormDirective, host: true, optional: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+SacRadiobuttonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacRadiobuttonsComponent, selector: "sac-radiobuttons", providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => SacRadiobuttonsComponent),
+            multi: true,
+        },
+        {
+            provide: NG_VALIDATORS,
+            useExisting: forwardRef(() => SacRadiobuttonsComponent),
+            multi: true,
+        },
+    ], usesInheritance: true, ngImport: i0, template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <div *ngIf=\"disablelabel === false\" class=\"col-form-label col-form-label-sm col-12 pt-0\"\r\n    [ngClass]=\"[labelsize !== 12 ?  'col-sm-' + labelsize : 'sr-only']\">\r\n    <ng-container *ngIf=\"!disablelabel\">{{label}}</ng-container>\r\n  </div>\r\n  <div [ngClass]=\"[disablelabel === false ? 'col-sm-' + _inputsize : 'col-sm-12']\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], viewProviders: [
+        { provide: ControlContainer, useExisting: SacFormDirective },
+    ] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacRadiobuttonsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sac-radiobuttons', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SacRadiobuttonsComponent),
+                            multi: true,
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: forwardRef(() => SacRadiobuttonsComponent),
+                            multi: true,
+                        },
+                    ], viewProviders: [
+                        { provide: ControlContainer, useExisting: SacFormDirective },
+                    ], template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <div *ngIf=\"disablelabel === false\" class=\"col-form-label col-form-label-sm col-12 pt-0\"\r\n    [ngClass]=\"[labelsize !== 12 ?  'col-sm-' + labelsize : 'sr-only']\">\r\n    <ng-container *ngIf=\"!disablelabel\">{{label}}</ng-container>\r\n  </div>\r\n  <div [ngClass]=\"[disablelabel === false ? 'col-sm-' + _inputsize : 'col-sm-12']\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>" }]
+        }], ctorParameters: function () { return [{ type: SacFormDirective, decorators: [{
+                    type: Host
+                }, {
+                    type: Optional
+                }] }, { type: i0.Injector }]; } });
+
+/**
+ * Radiobutton Komponente
+ */
+class SacRadiobuttonComponent extends SacRadiobuttonCommon {
+    /**
+     * Konstruktor
+     * @param SacRadioButtons Radio Buttons Group Komponente
+     */
+    constructor(sacRadioButtons) {
+        super(sacRadioButtons);
+    }
+}
+SacRadiobuttonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacRadiobuttonComponent, deps: [{ token: SacRadiobuttonsComponent, host: true }], target: i0.ɵɵFactoryTarget.Component });
+SacRadiobuttonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacRadiobuttonComponent, selector: "sac-radiobutton", usesInheritance: true, ngImport: i0, template: "<div class=\"form-check\" *ngIf=\"hidden===false\">\r\n  <input id=\"{{getName}}_{{getIndex}}\" name=\"{{getName}}\" type=\"radio\" class=\"form-check-input\" [value]=\"value\"\r\n    [checked]=\"checked\" (change)=\"ChangeEvent()\" [disabled]=\"isDisabled\" />\r\n  <label for=\"{{getName}}_{{getIndex}}\" class=\"form-check-label\">\r\n    <ng-template *ngTemplateOutlet=\"labeltemplate || defaultItemLabelTemplate;context:{ label: label }\">\r\n    </ng-template>\r\n  </label>\r\n</div>\r\n\r\n<ng-template #defaultItemLabelTemplate let-label=\"label\">{{label}}</ng-template>", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacRadiobuttonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sac-radiobutton', template: "<div class=\"form-check\" *ngIf=\"hidden===false\">\r\n  <input id=\"{{getName}}_{{getIndex}}\" name=\"{{getName}}\" type=\"radio\" class=\"form-check-input\" [value]=\"value\"\r\n    [checked]=\"checked\" (change)=\"ChangeEvent()\" [disabled]=\"isDisabled\" />\r\n  <label for=\"{{getName}}_{{getIndex}}\" class=\"form-check-label\">\r\n    <ng-template *ngTemplateOutlet=\"labeltemplate || defaultItemLabelTemplate;context:{ label: label }\">\r\n    </ng-template>\r\n  </label>\r\n</div>\r\n\r\n<ng-template #defaultItemLabelTemplate let-label=\"label\">{{label}}</ng-template>" }]
+        }], ctorParameters: function () { return [{ type: SacRadiobuttonsComponent, decorators: [{
+                    type: Host
+                }] }]; } });
+
+class SACBootstrap5CheckboxModule {
+}
+SACBootstrap5CheckboxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5CheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SACBootstrap5CheckboxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5CheckboxModule, declarations: [SacCheckboxComponent, SacRadiobuttonComponent, SacRadiobuttonsComponent], imports: [CommonModule], exports: [SacCheckboxComponent, SacRadiobuttonComponent, SacRadiobuttonsComponent] });
+SACBootstrap5CheckboxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5CheckboxModule, imports: [[
+            CommonModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5CheckboxModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SacCheckboxComponent, SacRadiobuttonComponent, SacRadiobuttonsComponent],
+                    imports: [
+                        CommonModule
+                    ],
+                    exports: [SacCheckboxComponent, SacRadiobuttonComponent, SacRadiobuttonsComponent]
+                }]
+        }] });
+
+/**
+ * DateTime Selektor Komponente
+ */
+class SacDateSelectorComponent extends SacDateSelectorCommon {
+}
+SacDateSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacDateSelectorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+SacDateSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacDateSelectorComponent, selector: "sac-dateselector", usesInheritance: true, ngImport: i0, template: "<div class=\"calendar-selector\">\r\n  <div *ngIf=\"dateselection\">\r\n    <div class=\"container\">\r\n      <div class=\"row\">\r\n        <div class=\"col text-start\">\r\n          <a (click)=\"monthBack()\"><span [class]=\"iconMonthPrev\"></span></a>\r\n        </div>\r\n        <div class=\"col text-center\">{{month+1}}/{{year}}</div>\r\n        <div class=\"col text-end\">\r\n          <a (click)=\"monthNext()\"><span [class]=\"iconMonthNext\"></span></a>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div></div>\r\n    <div class=\"container\">\r\n      <div class=\"row\">\r\n        <ng-container *ngFor=\"let week of dates; let i=index\">\r\n          <ng-container *ngFor=\"let item of week\">\r\n            <div\r\n              class=\"p-2 col text-center\"\r\n              [ngStyle]=\"{'cursor': item.isenabled ? 'pointer' : null}\"\r\n              [ngClass]=\"{'day-current': item.iscurrent, 'day-selected': item.isselected, 'day-new': item.isnew, 'day-disabled': !item.isenabled}\"\r\n              (click)=\"selectDate(item)\"\r\n            >\r\n              {{ item.displaytext }}\r\n            </div>\r\n          </ng-container>\r\n          <div class=\"w-100\"></div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"d-flex justify-content-start\" *ngIf=\"timeselection\">\r\n    <div class=\"p-2\">\r\n      <div class=\"form-group\">\r\n        <label>Stunde</label>\r\n        <input\r\n          type=\"number\"\r\n          class=\"form-control form-control-sm\"\r\n          [value]=\"getHours()\"\r\n          (input)=\"setHours($event.target.value)\"\r\n          min=\"0\"\r\n          max=\"23\"\r\n        />\r\n      </div>\r\n    </div>\r\n    <div class=\"p-2\">\r\n      <div class=\"form-group\">\r\n        <label>Minute</label>\r\n        <input\r\n          type=\"number\"\r\n          class=\"form-control form-control-sm\"\r\n          [value]=\"getMinutes()\"\r\n          (input)=\"setMinutes($event.target.value)\"\r\n          min=\"0\"\r\n          max=\"59\"\r\n        />\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"d-flex flex-row\">\r\n    <div class=\"flex-grow-1 p-2\">\r\n      <button type=\"button\" class=\"btn btn-secondary\" (click)=\"setToday()\">\r\n        Heute\r\n      </button>\r\n    </div>\r\n    <div class=\"p-2\">\r\n      <button\r\n        type=\"button\"\r\n        class=\"btn btn-secondary\"\r\n        (click)=\"resetSelection()\"\r\n      >\r\n        Reset\r\n      </button>\r\n    </div>\r\n    <div class=\"p-2\">\r\n      <button type=\"button\" class=\"btn btn-primary\" (click)=\"applySelection()\">\r\n        Apply\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacDateSelectorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sac-dateselector', template: "<div class=\"calendar-selector\">\r\n  <div *ngIf=\"dateselection\">\r\n    <div class=\"container\">\r\n      <div class=\"row\">\r\n        <div class=\"col text-start\">\r\n          <a (click)=\"monthBack()\"><span [class]=\"iconMonthPrev\"></span></a>\r\n        </div>\r\n        <div class=\"col text-center\">{{month+1}}/{{year}}</div>\r\n        <div class=\"col text-end\">\r\n          <a (click)=\"monthNext()\"><span [class]=\"iconMonthNext\"></span></a>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div></div>\r\n    <div class=\"container\">\r\n      <div class=\"row\">\r\n        <ng-container *ngFor=\"let week of dates; let i=index\">\r\n          <ng-container *ngFor=\"let item of week\">\r\n            <div\r\n              class=\"p-2 col text-center\"\r\n              [ngStyle]=\"{'cursor': item.isenabled ? 'pointer' : null}\"\r\n              [ngClass]=\"{'day-current': item.iscurrent, 'day-selected': item.isselected, 'day-new': item.isnew, 'day-disabled': !item.isenabled}\"\r\n              (click)=\"selectDate(item)\"\r\n            >\r\n              {{ item.displaytext }}\r\n            </div>\r\n          </ng-container>\r\n          <div class=\"w-100\"></div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"d-flex justify-content-start\" *ngIf=\"timeselection\">\r\n    <div class=\"p-2\">\r\n      <div class=\"form-group\">\r\n        <label>Stunde</label>\r\n        <input\r\n          type=\"number\"\r\n          class=\"form-control form-control-sm\"\r\n          [value]=\"getHours()\"\r\n          (input)=\"setHours($event.target.value)\"\r\n          min=\"0\"\r\n          max=\"23\"\r\n        />\r\n      </div>\r\n    </div>\r\n    <div class=\"p-2\">\r\n      <div class=\"form-group\">\r\n        <label>Minute</label>\r\n        <input\r\n          type=\"number\"\r\n          class=\"form-control form-control-sm\"\r\n          [value]=\"getMinutes()\"\r\n          (input)=\"setMinutes($event.target.value)\"\r\n          min=\"0\"\r\n          max=\"59\"\r\n        />\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"d-flex flex-row\">\r\n    <div class=\"flex-grow-1 p-2\">\r\n      <button type=\"button\" class=\"btn btn-secondary\" (click)=\"setToday()\">\r\n        Heute\r\n      </button>\r\n    </div>\r\n    <div class=\"p-2\">\r\n      <button\r\n        type=\"button\"\r\n        class=\"btn btn-secondary\"\r\n        (click)=\"resetSelection()\"\r\n      >\r\n        Reset\r\n      </button>\r\n    </div>\r\n    <div class=\"p-2\">\r\n      <button type=\"button\" class=\"btn btn-primary\" (click)=\"applySelection()\">\r\n        Apply\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+        }] });
+
+/**
+ * Referenz auf Moment.JS
+ */
+const moment = moment_["default"];
+/**
+ * Komponente für Datumauswahl
+ */
+class SacDateComponent extends SacDateCommon {
+    /**
+     * Konstruktor
+     * @param parent Formular
+     * @param injector Angular Dependency Injection Service
+     * @param _elementRef Referenz auf HTML DOM Element
+     */
+    constructor(parent, injector, _elementRef) {
+        super(parent, injector, _elementRef);
+    }
+}
+SacDateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacDateComponent, deps: [{ token: SacFormDirective, host: true, optional: true }, { token: i0.Injector }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+SacDateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacDateComponent, selector: "sac-date", providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            multi: true,
+            useExisting: forwardRef(() => SacDateComponent),
+        },
+        {
+            provide: NG_VALIDATORS,
+            multi: true,
+            useExisting: forwardRef(() => SacDateComponent),
+        },
+    ], usesInheritance: true, ngImport: i0, template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[disablelabel === false ?  'col-sm-' + labelsize : 'sr-only' ]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12 position-relative\"\r\n    [ngClass]=\"[disablelabel === false ? 'col-sm-' + _inputsize : 'col-sm-12']\"\r\n  >\r\n    <div\r\n      class=\"input-group input-group-sm\"\r\n      [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      <input\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        [imask]=\"imaskDate\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        [value]=\"valuestring\"\r\n        [ngClass]=\"{'is-invalid': invalid && (dirty || touched) }\"\r\n        (blur)=\"onTouch()\"\r\n        (accept)=\"setValueString($event)\"\r\n        [disabled]=\"isdisabled\"\r\n      />\r\n      <button\r\n        class=\"btn btn-sm btn-secondary\"\r\n        type=\"button\"\r\n        (click)=\"showDateSelector()\"\r\n        [disabled]=\"isdisabled\"\r\n      >\r\n        <i [class]=\"IconSelector\"></i>\r\n      </button>\r\n      <div\r\n        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n        class=\"invalid-feedback\"\r\n      >\r\n        {{ GetErrorMessage() | async }}\r\n      </div>\r\n    </div>\r\n    <div\r\n      class=\"popover fade bs-popover-bottom show position-absolute\"\r\n      role=\"tooltip\"\r\n      *ngIf=\"_showselector\"\r\n      style=\"\r\n        display: block;\r\n        left: unset;\r\n        right: 0px;\r\n        top: 34px;\r\n        max-width: 325px;\r\n      \"\r\n    >\r\n      <div\r\n        class=\"popover-arrow position-absolute\"\r\n        style=\"left: unset; right: 18px\"\r\n      ></div>\r\n      <h3 class=\"popover-header\" style=\"display: none\"></h3>\r\n      <div class=\"popover-body\">\r\n        <sac-dateselector\r\n          [initialvalue]=\"value\"\r\n          (selectdate)=\"dateselect($event)\"\r\n          dateselection=\"true\"\r\n        ></sac-dateselector>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", components: [{ type: SacDateSelectorComponent, selector: "sac-dateselector" }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.IMaskDirective, selector: "[imask]", inputs: ["imaskElement", "imask", "unmask"], outputs: ["accept", "complete"], exportAs: ["imask"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i2.AsyncPipe }, viewProviders: [
+        { provide: ControlContainer, useExisting: SacFormDirective },
+    ] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacDateComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sac-date', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            multi: true,
+                            useExisting: forwardRef(() => SacDateComponent),
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            multi: true,
+                            useExisting: forwardRef(() => SacDateComponent),
+                        },
+                    ], viewProviders: [
+                        { provide: ControlContainer, useExisting: SacFormDirective },
+                    ], template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[disablelabel === false ?  'col-sm-' + labelsize : 'sr-only' ]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12 position-relative\"\r\n    [ngClass]=\"[disablelabel === false ? 'col-sm-' + _inputsize : 'col-sm-12']\"\r\n  >\r\n    <div\r\n      class=\"input-group input-group-sm\"\r\n      [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      <input\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        [imask]=\"imaskDate\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        [value]=\"valuestring\"\r\n        [ngClass]=\"{'is-invalid': invalid && (dirty || touched) }\"\r\n        (blur)=\"onTouch()\"\r\n        (accept)=\"setValueString($event)\"\r\n        [disabled]=\"isdisabled\"\r\n      />\r\n      <button\r\n        class=\"btn btn-sm btn-secondary\"\r\n        type=\"button\"\r\n        (click)=\"showDateSelector()\"\r\n        [disabled]=\"isdisabled\"\r\n      >\r\n        <i [class]=\"IconSelector\"></i>\r\n      </button>\r\n      <div\r\n        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n        class=\"invalid-feedback\"\r\n      >\r\n        {{ GetErrorMessage() | async }}\r\n      </div>\r\n    </div>\r\n    <div\r\n      class=\"popover fade bs-popover-bottom show position-absolute\"\r\n      role=\"tooltip\"\r\n      *ngIf=\"_showselector\"\r\n      style=\"\r\n        display: block;\r\n        left: unset;\r\n        right: 0px;\r\n        top: 34px;\r\n        max-width: 325px;\r\n      \"\r\n    >\r\n      <div\r\n        class=\"popover-arrow position-absolute\"\r\n        style=\"left: unset; right: 18px\"\r\n      ></div>\r\n      <h3 class=\"popover-header\" style=\"display: none\"></h3>\r\n      <div class=\"popover-body\">\r\n        <sac-dateselector\r\n          [initialvalue]=\"value\"\r\n          (selectdate)=\"dateselect($event)\"\r\n          dateselection=\"true\"\r\n        ></sac-dateselector>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+        }], ctorParameters: function () { return [{ type: SacFormDirective, decorators: [{
+                    type: Host
+                }, {
+                    type: Optional
+                }] }, { type: i0.Injector }, { type: i0.ElementRef }]; } });
+
+/**
+ * Date und Time Komponente
+ */
+class SacDateTimeComponent extends SacDateTimeCommon {
+    /**
+     * Konstruktor
+     * @param parent Formular
+     * @param injector Angular Dependency Injection Service
+     * @param _elementRef DOM Element Referenz
+     */
+    constructor(parent, injector, _elementRef) {
+        super(parent, injector, _elementRef);
+    }
+}
+SacDateTimeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacDateTimeComponent, deps: [{ token: SacFormDirective, host: true, optional: true }, { token: i0.Injector }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+SacDateTimeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacDateTimeComponent, selector: "sac-datetime", providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            multi: true,
+            useExisting: forwardRef(() => SacDateTimeComponent),
+        },
+        {
+            provide: NG_VALIDATORS,
+            multi: true,
+            useExisting: forwardRef(() => SacDateTimeComponent),
+        },
+    ], usesInheritance: true, ngImport: i0, template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[disablelabel === false ?  'col-sm-' + labelsize : 'sr-only' ]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12 position-relative\"\r\n    [ngClass]=\"[disablelabel === false ? 'col-sm-' + _inputsize : 'col-sm-12']\"\r\n  >\r\n    <div\r\n      class=\"input-group input-group-sm\"\r\n      [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      <input\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        [imask]=\"imaskDate\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        [value]=\"valuestring\"\r\n        [ngClass]=\"{'is-invalid': invalid && (dirty || touched) }\"\r\n        (blur)=\"onTouch()\"\r\n        (accept)=\"setValueString($event)\"\r\n        [disabled]=\"isdisabled\"\r\n      />\r\n      <button\r\n        class=\"btn btn-secondary\"\r\n        type=\"button\"\r\n        (click)=\"showDateSelector()\"\r\n        [disabled]=\"isdisabled\"\r\n      >\r\n        <i [class]=\"IconSelector\"></i>\r\n      </button>\r\n      <div\r\n        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n        class=\"invalid-feedback\"\r\n      >\r\n        {{ GetErrorMessage() | async }}\r\n      </div>\r\n    </div>\r\n    <div\r\n      class=\"popover fade bs-popover-bottom show position-absolute\"\r\n      role=\"tooltip\"\r\n      *ngIf=\"_showselector\"\r\n      style=\"\r\n        display: block;\r\n        left: unset;\r\n        right: 0px;\r\n        top: 34px;\r\n        max-width: 325px;\r\n      \"\r\n    >\r\n      <div\r\n        class=\"popover-arrow position-absolute\"\r\n        style=\"left: unset; right: 18px\"\r\n      ></div>\r\n      <h3 class=\"popover-header\" style=\"display: none\"></h3>\r\n      <div class=\"popover-body\">\r\n        <sac-dateselector\r\n          [initialvalue]=\"value\"\r\n          (selectdate)=\"dateselect($event)\"\r\n          dateselection=\"true\"\r\n          timeselection=\"true\"\r\n        ></sac-dateselector>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", components: [{ type: SacDateSelectorComponent, selector: "sac-dateselector" }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.IMaskDirective, selector: "[imask]", inputs: ["imaskElement", "imask", "unmask"], outputs: ["accept", "complete"], exportAs: ["imask"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i2.AsyncPipe }, viewProviders: [
+        { provide: ControlContainer, useExisting: SacFormDirective },
+    ] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacDateTimeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sac-datetime', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            multi: true,
+                            useExisting: forwardRef(() => SacDateTimeComponent),
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            multi: true,
+                            useExisting: forwardRef(() => SacDateTimeComponent),
+                        },
+                    ], viewProviders: [
+                        { provide: ControlContainer, useExisting: SacFormDirective },
+                    ], template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[disablelabel === false ?  'col-sm-' + labelsize : 'sr-only' ]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12 position-relative\"\r\n    [ngClass]=\"[disablelabel === false ? 'col-sm-' + _inputsize : 'col-sm-12']\"\r\n  >\r\n    <div\r\n      class=\"input-group input-group-sm\"\r\n      [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      <input\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        [imask]=\"imaskDate\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        [value]=\"valuestring\"\r\n        [ngClass]=\"{'is-invalid': invalid && (dirty || touched) }\"\r\n        (blur)=\"onTouch()\"\r\n        (accept)=\"setValueString($event)\"\r\n        [disabled]=\"isdisabled\"\r\n      />\r\n      <button\r\n        class=\"btn btn-secondary\"\r\n        type=\"button\"\r\n        (click)=\"showDateSelector()\"\r\n        [disabled]=\"isdisabled\"\r\n      >\r\n        <i [class]=\"IconSelector\"></i>\r\n      </button>\r\n      <div\r\n        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n        class=\"invalid-feedback\"\r\n      >\r\n        {{ GetErrorMessage() | async }}\r\n      </div>\r\n    </div>\r\n    <div\r\n      class=\"popover fade bs-popover-bottom show position-absolute\"\r\n      role=\"tooltip\"\r\n      *ngIf=\"_showselector\"\r\n      style=\"\r\n        display: block;\r\n        left: unset;\r\n        right: 0px;\r\n        top: 34px;\r\n        max-width: 325px;\r\n      \"\r\n    >\r\n      <div\r\n        class=\"popover-arrow position-absolute\"\r\n        style=\"left: unset; right: 18px\"\r\n      ></div>\r\n      <h3 class=\"popover-header\" style=\"display: none\"></h3>\r\n      <div class=\"popover-body\">\r\n        <sac-dateselector\r\n          [initialvalue]=\"value\"\r\n          (selectdate)=\"dateselect($event)\"\r\n          dateselection=\"true\"\r\n          timeselection=\"true\"\r\n        ></sac-dateselector>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+        }], ctorParameters: function () { return [{ type: SacFormDirective, decorators: [{
+                    type: Host
+                }, {
+                    type: Optional
+                }] }, { type: i0.Injector }, { type: i0.ElementRef }]; } });
+
+/**
+ * Time Auswahl Komponente
+ */
+class SacTimeComponent extends SacTimeCommon {
+    /**
+     * Konstruktor
+     * @param parent Formular
+     * @param injector Angular Dependency Injection Service
+     * @param _elementRef DOM Element Referenz
+     */
+    constructor(parent, injector, _elementRef) {
+        super(parent, injector, _elementRef);
+    }
+}
+SacTimeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacTimeComponent, deps: [{ token: SacFormDirective, host: true, optional: true }, { token: i0.Injector }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+SacTimeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacTimeComponent, selector: "sac-time", providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            multi: true,
+            useExisting: forwardRef(() => SacTimeComponent),
+        },
+        {
+            provide: NG_VALIDATORS,
+            multi: true,
+            useExisting: forwardRef(() => SacTimeComponent),
+        },
+    ], usesInheritance: true, ngImport: i0, template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[disablelabel === false ?  'col-sm-' + labelsize : 'sr-only' ]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12 position-relative\"\r\n    [ngClass]=\"[disablelabel === false ? 'col-sm-' + _inputsize : 'col-sm-12']\"\r\n  >\r\n    <div\r\n      class=\"input-group input-group-sm\"\r\n      [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      <input\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        [imask]=\"imaskDate\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        [value]=\"valuestring\"\r\n        [ngClass]=\"{'is-invalid': invalid && (dirty || touched) }\"\r\n        (blur)=\"onTouch()\"\r\n        (accept)=\"setValueString($event)\"\r\n        [disabled]=\"isdisabled\"\r\n      />\r\n      <button\r\n        class=\"btn btn-secondary\"\r\n        type=\"button\"\r\n        (click)=\"showTimeSelector()\"\r\n        [disabled]=\"isdisabled\"\r\n      >\r\n        <i [class]=\"IconSelector\"></i>\r\n      </button>\r\n      <div\r\n        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n        class=\"invalid-feedback\"\r\n      >\r\n        {{ GetErrorMessage() | async }}\r\n      </div>\r\n    </div>\r\n    <div\r\n      class=\"popover fade bs-popover-bottom show position-absolute\"\r\n      role=\"tooltip\"\r\n      *ngIf=\"_showselector\"\r\n      style=\"\r\n        display: block;\r\n        left: unset;\r\n        right: 0px;\r\n        top: 34px;\r\n        max-width: 325px;\r\n      \"\r\n    >\r\n      <div\r\n        class=\"popover-arrow position-absolute\"\r\n        style=\"left: unset; right: 18px\"\r\n      ></div>\r\n      <h3 class=\"popover-header\" style=\"display: none\"></h3>\r\n      <div class=\"popover-body\">\r\n        <sac-dateselector\r\n          [initialvalue]=\"value\"\r\n          (selectdate)=\"timeselect($event)\"\r\n          timeselection=\"true\"\r\n        ></sac-dateselector>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", components: [{ type: SacDateSelectorComponent, selector: "sac-dateselector" }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.IMaskDirective, selector: "[imask]", inputs: ["imaskElement", "imask", "unmask"], outputs: ["accept", "complete"], exportAs: ["imask"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i2.AsyncPipe }, viewProviders: [
+        { provide: ControlContainer, useExisting: SacFormDirective },
+    ] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacTimeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sac-time', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            multi: true,
+                            useExisting: forwardRef(() => SacTimeComponent),
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            multi: true,
+                            useExisting: forwardRef(() => SacTimeComponent),
+                        },
+                    ], viewProviders: [
+                        { provide: ControlContainer, useExisting: SacFormDirective },
+                    ], template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[disablelabel === false ?  'col-sm-' + labelsize : 'sr-only' ]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12 position-relative\"\r\n    [ngClass]=\"[disablelabel === false ? 'col-sm-' + _inputsize : 'col-sm-12']\"\r\n  >\r\n    <div\r\n      class=\"input-group input-group-sm\"\r\n      [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      <input\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        [imask]=\"imaskDate\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        [value]=\"valuestring\"\r\n        [ngClass]=\"{'is-invalid': invalid && (dirty || touched) }\"\r\n        (blur)=\"onTouch()\"\r\n        (accept)=\"setValueString($event)\"\r\n        [disabled]=\"isdisabled\"\r\n      />\r\n      <button\r\n        class=\"btn btn-secondary\"\r\n        type=\"button\"\r\n        (click)=\"showTimeSelector()\"\r\n        [disabled]=\"isdisabled\"\r\n      >\r\n        <i [class]=\"IconSelector\"></i>\r\n      </button>\r\n      <div\r\n        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n        class=\"invalid-feedback\"\r\n      >\r\n        {{ GetErrorMessage() | async }}\r\n      </div>\r\n    </div>\r\n    <div\r\n      class=\"popover fade bs-popover-bottom show position-absolute\"\r\n      role=\"tooltip\"\r\n      *ngIf=\"_showselector\"\r\n      style=\"\r\n        display: block;\r\n        left: unset;\r\n        right: 0px;\r\n        top: 34px;\r\n        max-width: 325px;\r\n      \"\r\n    >\r\n      <div\r\n        class=\"popover-arrow position-absolute\"\r\n        style=\"left: unset; right: 18px\"\r\n      ></div>\r\n      <h3 class=\"popover-header\" style=\"display: none\"></h3>\r\n      <div class=\"popover-body\">\r\n        <sac-dateselector\r\n          [initialvalue]=\"value\"\r\n          (selectdate)=\"timeselect($event)\"\r\n          timeselection=\"true\"\r\n        ></sac-dateselector>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+        }], ctorParameters: function () { return [{ type: SacFormDirective, decorators: [{
+                    type: Host
+                }, {
+                    type: Optional
+                }] }, { type: i0.Injector }, { type: i0.ElementRef }]; } });
+
+class SACBootstrap5DateTimeModule {
+}
+SACBootstrap5DateTimeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5DateTimeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SACBootstrap5DateTimeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5DateTimeModule, declarations: [SacDateComponent, SacDateTimeComponent, SacTimeComponent, SacDateSelectorComponent], imports: [CommonModule, IMaskModule], exports: [SacDateComponent, SacDateTimeComponent, SacTimeComponent, SacDateSelectorComponent] });
+SACBootstrap5DateTimeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5DateTimeModule, imports: [[
+            CommonModule, IMaskModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5DateTimeModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SacDateComponent, SacDateTimeComponent, SacTimeComponent, SacDateSelectorComponent],
+                    imports: [
+                        CommonModule, IMaskModule
+                    ],
+                    exports: [SacDateComponent, SacDateTimeComponent, SacTimeComponent, SacDateSelectorComponent]
+                }]
+        }] });
+
+/**
+ * Paging Komponente
+ */
+class SacPagingComponent extends SacPagingCommon {
+    /**
+     * Konstruktor
+     * @param injector Angular Dependency Injection Service
+     */
+    constructor(injector) {
+        super(injector);
+    }
+}
+SacPagingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacPagingComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+SacPagingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacPagingComponent, selector: "sac-paging", providers: [
+        { provide: NG_VALUE_ACCESSOR, multi: true, useExisting: SacPagingComponent },
+        {
+            provide: NG_VALIDATORS,
+            multi: true,
+            useExisting: forwardRef(() => SacPagingComponent),
+        },
+    ], usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"d-flex justify-content-between align-items-center flex-wrap\"\r\n  id=\"{{name}}\"\r\n>\r\n  <div class=\"col-pagination order-2 order-md-1\" id=\"{{name}}_pages\">\r\n    <ul class=\"pagination mb-4 mb-md-0\">\r\n      <li\r\n        class=\"page-item\"\r\n        [ngClass]=\"{'aspNetDisabled disabled': activePageIndex === firstPageIndex}\"\r\n      >\r\n        <a class=\"page-link\" (click)=\"firstPage()\">\u00AB</a>\r\n      </li>\r\n      <li\r\n        class=\"page-item\"\r\n        *ngFor=\"let page of paginators; let i = index\"\r\n        [ngClass]=\"{'active': page === activePageIndex}\"\r\n      >\r\n        <a class=\"page-link\" (click)=\"changePage(page)\">{{page + 1 }}</a>\r\n      </li>\r\n      <li\r\n        class=\"page-item\"\r\n        [ngClass]=\"{'aspNetDisabled disabled': activePageIndex === lastPageIndex}\"\r\n      >\r\n        <a class=\"page-link\" (click)=\"lastPage()\">\u00BB</a>\r\n      </li>\r\n    </ul>\r\n  </div>\r\n  <div class=\"col-summary order-1 order-md-2\">\r\n    <div class=\"mb-4 mb-md-0 mr-4 mb-md-0\">{{ PagingText | async }}</div>\r\n  </div>\r\n  <div class=\"col-pagesize order-3\" *ngIf=\"!pagesizedisabled\">\r\n    <div class=\"d-flex align-items-center\" id=\"{{name}}_size\">\r\n      <select\r\n        class=\"form-select form-select-sm\"\r\n        style=\"width: 85px\"\r\n        [ngModel]=\"pageSize\"\r\n        (ngModelChange)=\"changePageSize($event)\"\r\n      >\r\n        <option [ngValue]=\"size\" *ngFor=\"let size of getPageSizes\">\r\n          {{size}}\r\n        </option>\r\n      </select>\r\n      <div class=\"ms-2\">{{ PageSizeText | async }}</div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i9.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i9.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i9.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }], pipes: { "async": i2.AsyncPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacPagingComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sac-paging', providers: [
+                        { provide: NG_VALUE_ACCESSOR, multi: true, useExisting: SacPagingComponent },
+                        {
+                            provide: NG_VALIDATORS,
+                            multi: true,
+                            useExisting: forwardRef(() => SacPagingComponent),
+                        },
+                    ], template: "<div\r\n  class=\"d-flex justify-content-between align-items-center flex-wrap\"\r\n  id=\"{{name}}\"\r\n>\r\n  <div class=\"col-pagination order-2 order-md-1\" id=\"{{name}}_pages\">\r\n    <ul class=\"pagination mb-4 mb-md-0\">\r\n      <li\r\n        class=\"page-item\"\r\n        [ngClass]=\"{'aspNetDisabled disabled': activePageIndex === firstPageIndex}\"\r\n      >\r\n        <a class=\"page-link\" (click)=\"firstPage()\">\u00AB</a>\r\n      </li>\r\n      <li\r\n        class=\"page-item\"\r\n        *ngFor=\"let page of paginators; let i = index\"\r\n        [ngClass]=\"{'active': page === activePageIndex}\"\r\n      >\r\n        <a class=\"page-link\" (click)=\"changePage(page)\">{{page + 1 }}</a>\r\n      </li>\r\n      <li\r\n        class=\"page-item\"\r\n        [ngClass]=\"{'aspNetDisabled disabled': activePageIndex === lastPageIndex}\"\r\n      >\r\n        <a class=\"page-link\" (click)=\"lastPage()\">\u00BB</a>\r\n      </li>\r\n    </ul>\r\n  </div>\r\n  <div class=\"col-summary order-1 order-md-2\">\r\n    <div class=\"mb-4 mb-md-0 mr-4 mb-md-0\">{{ PagingText | async }}</div>\r\n  </div>\r\n  <div class=\"col-pagesize order-3\" *ngIf=\"!pagesizedisabled\">\r\n    <div class=\"d-flex align-items-center\" id=\"{{name}}_size\">\r\n      <select\r\n        class=\"form-select form-select-sm\"\r\n        style=\"width: 85px\"\r\n        [ngModel]=\"pageSize\"\r\n        (ngModelChange)=\"changePageSize($event)\"\r\n      >\r\n        <option [ngValue]=\"size\" *ngFor=\"let size of getPageSizes\">\r\n          {{size}}\r\n        </option>\r\n      </select>\r\n      <div class=\"ms-2\">{{ PageSizeText | async }}</div>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }]; } });
+
+/**
+ * Grid Komponente
+ */
+class SacGridComponent extends SacGridCommon {
+    /**
+     * Konstrukor
+     * @param cdRef Change Detection Reference
+     */
+    constructor(cdRef) {
+        super(cdRef);
+        /**
+         * Setzt die Ellipsis Funktion auf der Column
+         */
+        this.ellipsis = false;
+    }
+}
+SacGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacGridComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+SacGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacGridComponent, selector: "sac-grid", providers: [
+        { provide: NG_VALUE_ACCESSOR, multi: true, useExisting: SacGridComponent },
+        {
+            provide: NG_VALIDATORS,
+            multi: true,
+            useExisting: forwardRef(() => SacGridComponent),
+        },
+    ], queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"table-responsive\">\r\n  <table class=\"table table-striped table-hover\" id={{name}}>\r\n    <thead class=\"thead-light\">\r\n      <tr>\r\n        <ng-container *ngTemplateOutlet=\"template; context { row: {}, type: 'header'}\">\r\n        </ng-container>\r\n      </tr>\r\n    </thead>\r\n    <tbody>\r\n      <ng-container *ngFor=\"let item of value; let i=index\">\r\n        <tr>\r\n          <ng-container *ngTemplateOutlet=\"template; context { row: item, type: 'body'}\">\r\n          </ng-container>\r\n        </tr>\r\n      </ng-container>\r\n      <tr *ngIf=\"value === undefined || value === null || value.length===0\">\r\n        <td [attr.colspan]=\"ColumnCount\">{{emptytext}}</td>\r\n      </tr>\r\n      <tr>\r\n        <td [attr.colspan]=\"ColumnCount\">\r\n          <div class=\"container-fluid\">\r\n            <sac-paging name=\"{{name}}Paging\" (paging)=\"pageChange($event)\" [pagerdata]=\"pagerdata\" [pagesizes]=\"pagesizes\" [pagingtext]=\"pagingtext\" [pagesizetext]=\"pagesizetext\" [pagesizedisabled]=\"pagesizedisabled\"></sac-paging>\r\n          </div>\r\n        </td>\r\n      </tr>\r\n    </tbody>\r\n  </table>\r\n</div>\r\n", components: [{ type: SacPagingComponent, selector: "sac-paging" }], directives: [{ type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacGridComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sac-grid', providers: [
+                        { provide: NG_VALUE_ACCESSOR, multi: true, useExisting: SacGridComponent },
+                        {
+                            provide: NG_VALIDATORS,
+                            multi: true,
+                            useExisting: forwardRef(() => SacGridComponent),
+                        },
+                    ], template: "<div class=\"table-responsive\">\r\n  <table class=\"table table-striped table-hover\" id={{name}}>\r\n    <thead class=\"thead-light\">\r\n      <tr>\r\n        <ng-container *ngTemplateOutlet=\"template; context { row: {}, type: 'header'}\">\r\n        </ng-container>\r\n      </tr>\r\n    </thead>\r\n    <tbody>\r\n      <ng-container *ngFor=\"let item of value; let i=index\">\r\n        <tr>\r\n          <ng-container *ngTemplateOutlet=\"template; context { row: item, type: 'body'}\">\r\n          </ng-container>\r\n        </tr>\r\n      </ng-container>\r\n      <tr *ngIf=\"value === undefined || value === null || value.length===0\">\r\n        <td [attr.colspan]=\"ColumnCount\">{{emptytext}}</td>\r\n      </tr>\r\n      <tr>\r\n        <td [attr.colspan]=\"ColumnCount\">\r\n          <div class=\"container-fluid\">\r\n            <sac-paging name=\"{{name}}Paging\" (paging)=\"pageChange($event)\" [pagerdata]=\"pagerdata\" [pagesizes]=\"pagesizes\" [pagingtext]=\"pagingtext\" [pagesizetext]=\"pagesizetext\" [pagesizedisabled]=\"pagesizedisabled\"></sac-paging>\r\n          </div>\r\n        </td>\r\n      </tr>\r\n    </tbody>\r\n  </table>\r\n</div>\r\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { template: [{
+                type: ContentChild,
+                args: [TemplateRef, { static: false }]
+            }] } });
+
+/**
+ * Grid Action Button
+ *
+ * @example Standard Action
+ *
+ * <ngGridButton icon="edit" (clicked)="action('edit')" [isdisabled]="true"></ngGridButton>
+ *
+ * @example Custom Action
+ *
+ * <ngGridButton iconstyle="sprite" icon="icon-sprite-base-main_info" (clicked)="action("info")"></ngGridButton>
+ *
+ */
+class SacGridButtonComponent extends SacGridButtonCommon {
+    /**
+     * Gibt das Icon für den Button zurück
+     */
+    getIconClass() {
+        let iconset = this.iconstyle;
+        let iconcss = this.icon;
+        if (iconset === '') {
+            switch (this.icon) {
+                case 'edit':
+                    iconset = 'sprite';
+                    iconcss = 'icon-sprite-base-main_edit';
+                    break;
+                case 'delete':
+                    iconset = 'sprite';
+                    iconcss = 'icon-sprite-base-main_delete';
+                    break;
+            }
+        }
+        if (this._isdisabledvalue) {
+            iconcss += '_disabled';
+        }
+        const result = iconset + ' ' + iconcss;
+        return result.trim();
+    }
+}
+SacGridButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacGridButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+SacGridButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacGridButtonComponent, selector: "sac-gridbutton", usesInheritance: true, ngImport: i0, template: "<a (click)=\"callaction()\" style=\"padding-right: 5px;\" [class.disabled]=\"isdisabled\" [attr.disabled]=\"isdisabled ? 'disabled' : null\"><span class=\"{{getIconClass()}}\"></span></a>\r\n" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacGridButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sac-gridbutton', template: "<a (click)=\"callaction()\" style=\"padding-right: 5px;\" [class.disabled]=\"isdisabled\" [attr.disabled]=\"isdisabled ? 'disabled' : null\"><span class=\"{{getIconClass()}}\"></span></a>\r\n" }]
+        }] });
+
+/**
+ * Grid Column Komponente
+ */
+class SacGridColumnComponent extends SacGridColumnCommon {
+    /**
+     * Konstruktor
+     * @param grid Grid Referenz
+     * @param el HTML DOM Element
+     */
+    constructor(grid, injector, el) {
+        super(grid, injector, el);
+    }
+}
+SacGridColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacGridColumnComponent, deps: [{ token: SacGridComponent }, { token: i0.Injector }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+SacGridColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacGridColumnComponent, selector: "sac-gridcolumn", providers: [
+        {
+            provide: SacGridColumnBaseCommon,
+            useExisting: forwardRef(() => SacGridColumnComponent),
+        },
+    ], usesInheritance: true, ngImport: i0, template: "<th\r\n  scope=\"col\"\r\n  *ngIf=\"IsHeader()\"\r\n  [style.width]=\"width\"\r\n  (click)=\"SortByColumn()\"\r\n>\r\n  <span>{{header}}</span>\r\n  <span\r\n    class=\"ps-2\"\r\n    [class]=\"IconSortUp\"\r\n    *ngIf=\"IsSortedColumn() && GetSortDirection() ==='asc'\"\r\n  ></span>\r\n  <span\r\n    class=\"ps-2\"\r\n    [class]=\"IconSortDown\"\r\n    *ngIf=\"IsSortedColumn() && GetSortDirection() ==='desc'\"\r\n  ></span>\r\n</th>\r\n<td\r\n  scope=\"col\"\r\n  *ngIf=\"IsBody()\"\r\n  [style.width]=\"width\"\r\n  [class.ellipsis]=\"IsEllipsis()\"\r\n>\r\n  <span [attr.title]=\"IsEllipsis() ? value : null\"> {{value}} </span>\r\n</td>\r\n", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacGridColumnComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sac-gridcolumn', providers: [
+                        {
+                            provide: SacGridColumnBaseCommon,
+                            useExisting: forwardRef(() => SacGridColumnComponent),
+                        },
+                    ], template: "<th\r\n  scope=\"col\"\r\n  *ngIf=\"IsHeader()\"\r\n  [style.width]=\"width\"\r\n  (click)=\"SortByColumn()\"\r\n>\r\n  <span>{{header}}</span>\r\n  <span\r\n    class=\"ps-2\"\r\n    [class]=\"IconSortUp\"\r\n    *ngIf=\"IsSortedColumn() && GetSortDirection() ==='asc'\"\r\n  ></span>\r\n  <span\r\n    class=\"ps-2\"\r\n    [class]=\"IconSortDown\"\r\n    *ngIf=\"IsSortedColumn() && GetSortDirection() ==='desc'\"\r\n  ></span>\r\n</th>\r\n<td\r\n  scope=\"col\"\r\n  *ngIf=\"IsBody()\"\r\n  [style.width]=\"width\"\r\n  [class.ellipsis]=\"IsEllipsis()\"\r\n>\r\n  <span [attr.title]=\"IsEllipsis() ? value : null\"> {{value}} </span>\r\n</td>\r\n" }]
+        }], ctorParameters: function () { return [{ type: SacGridComponent }, { type: i0.Injector }, { type: i0.ElementRef }]; } });
+
+/**
+ * Grid Action Komponent
+ */
+class SacGridColumnActionComponent extends SacGridColumnActionCommon {
+    /**
+     * Konstruktor
+     * @param grid Referenz auf Grid
+     * @param el HTML Element Referenz
+     */
+    constructor(grid, injector, el) {
+        super(grid, injector, el);
+        this.width = '60px';
+    }
+}
+SacGridColumnActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacGridColumnActionComponent, deps: [{ token: SacGridComponent }, { token: i0.Injector }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+SacGridColumnActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacGridColumnActionComponent, selector: "sac-gridcolumnaction", providers: [
+        {
+            provide: SacGridColumnBaseCommon,
+            useExisting: forwardRef(() => SacGridColumnActionComponent),
+        },
+    ], usesInheritance: true, ngImport: i0, template: "<th scope=\"col\" *ngIf=\"IsHeader()\" [style.width]=\"width\"><span></span></th>\r\n<td scope=\"col\" class=\"px-2\" *ngIf=\"IsBody()\">\r\n   <ng-content></ng-content>\r\n</td>\r\n", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacGridColumnActionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sac-gridcolumnaction', providers: [
+                        {
+                            provide: SacGridColumnBaseCommon,
+                            useExisting: forwardRef(() => SacGridColumnActionComponent),
+                        },
+                    ], template: "<th scope=\"col\" *ngIf=\"IsHeader()\" [style.width]=\"width\"><span></span></th>\r\n<td scope=\"col\" class=\"px-2\" *ngIf=\"IsBody()\">\r\n   <ng-content></ng-content>\r\n</td>\r\n" }]
+        }], ctorParameters: function () { return [{ type: SacGridComponent }, { type: i0.Injector }, { type: i0.ElementRef }]; } });
+
+/**
+ * Image Item für Grid
+ */
+class SacGridImageComponent extends SacGridImageCommon {
+    /**
+     * Gibt die CSS Klassen für Sprite Images zurück
+     * @returns CSS Klasse
+     */
+    getIconClass() {
+        switch (this.iconstyle) {
+            case 'edit':
+                return 'sprite icon-sprite-base-main_edit';
+            case 'delete':
+                return 'sprite icon-sprite-base-main_delete';
+            default:
+                return this.iconstyle;
+        }
+    }
+}
+SacGridImageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacGridImageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+SacGridImageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacGridImageComponent, selector: "sac-gridimage", usesInheritance: true, ngImport: i0, template: "<span><span class=\"{{getIconClass()}}\"></span></span>\r\n" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacGridImageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sac-gridimage', template: "<span><span class=\"{{getIconClass()}}\"></span></span>\r\n" }]
+        }] });
+
+class SACBootstrap5GridModule {
+}
+SACBootstrap5GridModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5GridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SACBootstrap5GridModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5GridModule, declarations: [SacGridComponent, SacGridColumnComponent, SacGridColumnActionComponent, SacPagingComponent, SacGridButtonComponent, SacGridImageComponent], imports: [CommonModule, FormsModule], exports: [SacGridComponent, SacGridColumnComponent, SacGridColumnActionComponent, SacPagingComponent, SacGridButtonComponent, SacGridImageComponent] });
+SACBootstrap5GridModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5GridModule, imports: [[
+            CommonModule, FormsModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5GridModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SacGridComponent, SacGridColumnComponent, SacGridColumnActionComponent, SacPagingComponent, SacGridButtonComponent, SacGridImageComponent],
+                    imports: [
+                        CommonModule, FormsModule
+                    ],
+                    exports: [SacGridComponent, SacGridColumnComponent, SacGridColumnActionComponent, SacPagingComponent, SacGridButtonComponent, SacGridImageComponent]
+                }]
+        }] });
+
+/**
+ * Input Komponente
+ */
+class SacInputComponent extends SacInputCommon {
+    /**
+     * Konstruktor
+     * @param parent Formular
+     * @param injector Angular Dependency Injection Service
+     */
+    constructor(parent, injector) {
+        super(parent, injector);
+    }
+}
+SacInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacInputComponent, deps: [{ token: SacFormDirective, host: true, optional: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+SacInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacInputComponent, selector: "sac-input", providers: [
+        { provide: NG_VALUE_ACCESSOR, multi: true, useExisting: SacInputComponent },
+        {
+            provide: NG_VALIDATORS,
+            multi: true,
+            useExisting: forwardRef(() => SacInputComponent),
+        },
+    ], usesInheritance: true, ngImport: i0, template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[disablelabel === false ?  'col-sm-' + labelsize : 'sr-only' ]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ? 'col-sm-' + _inputsize : 'col-sm-12']\"\r\n  >\r\n    <input\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      type=\"text\"\r\n      class=\"form-control form-control-sm\"\r\n      [value]=\"value\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      [readonly]=\"readonly\"\r\n      (blur)=\"onTouch()\"\r\n      (input)=\"setValue($event.target.value)\"\r\n      (keypress)=\"onKeyPress($event)\"\r\n      [attr.maxlength]=\"maxlength\"\r\n      [ngClass]=\"{'is-invalid': invalid && (dirty || touched) }\"\r\n      [disabled]=\"isdisabled\"\r\n    />\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n", directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i2.AsyncPipe }, viewProviders: [{ provide: ControlContainer, useExisting: SacFormDirective }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sac-input', providers: [
+                        { provide: NG_VALUE_ACCESSOR, multi: true, useExisting: SacInputComponent },
+                        {
+                            provide: NG_VALIDATORS,
+                            multi: true,
+                            useExisting: forwardRef(() => SacInputComponent),
+                        },
+                    ], viewProviders: [{ provide: ControlContainer, useExisting: SacFormDirective }], template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[disablelabel === false ?  'col-sm-' + labelsize : 'sr-only' ]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ? 'col-sm-' + _inputsize : 'col-sm-12']\"\r\n  >\r\n    <input\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      type=\"text\"\r\n      class=\"form-control form-control-sm\"\r\n      [value]=\"value\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      [readonly]=\"readonly\"\r\n      (blur)=\"onTouch()\"\r\n      (input)=\"setValue($event.target.value)\"\r\n      (keypress)=\"onKeyPress($event)\"\r\n      [attr.maxlength]=\"maxlength\"\r\n      [ngClass]=\"{'is-invalid': invalid && (dirty || touched) }\"\r\n      [disabled]=\"isdisabled\"\r\n    />\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+        }], ctorParameters: function () { return [{ type: SacFormDirective, decorators: [{
+                    type: Host
+                }, {
+                    type: Optional
+                }] }, { type: i0.Injector }]; } });
+
+/**
+ * Input Box für E-Mail Adressen
+ */
+class SacInputEmailComponent extends SacInputEmailCommon {
+    /**
+     * Konstruktor
+     * @param parent Formular
+     * @param injector Angular Dependency Injection Service
+     */
+    constructor(parent, injector) {
+        super(parent, injector);
+    }
+}
+SacInputEmailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacInputEmailComponent, deps: [{ token: SacFormDirective, host: true, optional: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+SacInputEmailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacInputEmailComponent, selector: "sac-inputemail", providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            multi: true,
+            useExisting: forwardRef(() => SacInputEmailComponent),
+        },
+        {
+            provide: NG_VALIDATORS,
+            multi: true,
+            useExisting: forwardRef(() => SacInputEmailComponent),
+        },
+    ], usesInheritance: true, ngImport: i0, template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[disablelabel === false ?  'col-sm-' + labelsize : 'sr-only' ]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ? 'col-sm-' + _inputsize : 'col-sm-12']\"\r\n  >\r\n    <div\r\n      class=\"input-group input-group-sm\"\r\n      [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      <span class=\"input-group-text\">@</span>\r\n      <input\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        [value]=\"value\"\r\n        (blur)=\"onTouch()\"\r\n        (input)=\"setValue($event.target.value)\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        autocomplete=\"email\"\r\n        [ngClass]=\"{'is-invalid': invalid && (dirty || touched) }\"\r\n        [disabled]=\"isdisabled\"\r\n        [readonly]=\"readonly\"\r\n      />\r\n      <div\r\n        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n        class=\"invalid-feedback\"\r\n      >\r\n        {{ GetErrorMessage() | async }}\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i2.AsyncPipe }, viewProviders: [
+        { provide: ControlContainer, useExisting: SacFormDirective },
+    ] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacInputEmailComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sac-inputemail', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            multi: true,
+                            useExisting: forwardRef(() => SacInputEmailComponent),
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            multi: true,
+                            useExisting: forwardRef(() => SacInputEmailComponent),
+                        },
+                    ], viewProviders: [
+                        { provide: ControlContainer, useExisting: SacFormDirective },
+                    ], template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[disablelabel === false ?  'col-sm-' + labelsize : 'sr-only' ]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ? 'col-sm-' + _inputsize : 'col-sm-12']\"\r\n  >\r\n    <div\r\n      class=\"input-group input-group-sm\"\r\n      [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      <span class=\"input-group-text\">@</span>\r\n      <input\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        [value]=\"value\"\r\n        (blur)=\"onTouch()\"\r\n        (input)=\"setValue($event.target.value)\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        autocomplete=\"email\"\r\n        [ngClass]=\"{'is-invalid': invalid && (dirty || touched) }\"\r\n        [disabled]=\"isdisabled\"\r\n        [readonly]=\"readonly\"\r\n      />\r\n      <div\r\n        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n        class=\"invalid-feedback\"\r\n      >\r\n        {{ GetErrorMessage() | async }}\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+        }], ctorParameters: function () { return [{ type: SacFormDirective, decorators: [{
+                    type: Host
+                }, {
+                    type: Optional
+                }] }, { type: i0.Injector }]; } });
+
+/**
+ * Input Box für lange Texte
+ */
+class SacInputAreaComponent extends SacInputAreaCommon {
+    /**
+     * Konstruktor
+     * @param parent Formular
+     * @param injector Angular Dependency Injection Service
+     */
+    constructor(parent, injector) {
+        super(parent, injector);
+    }
+}
+SacInputAreaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacInputAreaComponent, deps: [{ token: SacFormDirective, host: true, optional: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+SacInputAreaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacInputAreaComponent, selector: "sac-inputarea", providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            multi: true,
+            useExisting: forwardRef(() => SacInputAreaComponent),
+        },
+        {
+            provide: NG_VALIDATORS,
+            multi: true,
+            useExisting: forwardRef(() => SacInputAreaComponent),
+        },
+    ], usesInheritance: true, ngImport: i0, template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[disablelabel === false ?  'col-sm-' + labelsize : 'sr-only' ]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ? 'col-sm-' + _inputsize : 'col-sm-12']\"\r\n  >\r\n    <textarea\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      type=\"\"\r\n      class=\"form-control form-control-sm\"\r\n      [value]=\"value\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      (blur)=\"onTouch()\"\r\n      (input)=\"setValue($event.target.value)\"\r\n      (keypress)=\"onKeyPress($event)\"\r\n      [attr.rows]=\"rows\"\r\n      [ngClass]=\"{'is-invalid': invalid && (dirty || touched) }\"\r\n      [disabled]=\"isdisabled\"\r\n      [attr.maxlength]=\"maxlength\"\r\n      [readonly]=\"readonly\"\r\n    ></textarea>\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n", directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i2.AsyncPipe }, viewProviders: [
+        { provide: ControlContainer, useExisting: SacFormDirective },
+    ] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacInputAreaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sac-inputarea', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            multi: true,
+                            useExisting: forwardRef(() => SacInputAreaComponent),
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            multi: true,
+                            useExisting: forwardRef(() => SacInputAreaComponent),
+                        },
+                    ], viewProviders: [
+                        { provide: ControlContainer, useExisting: SacFormDirective },
+                    ], template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[disablelabel === false ?  'col-sm-' + labelsize : 'sr-only' ]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ? 'col-sm-' + _inputsize : 'col-sm-12']\"\r\n  >\r\n    <textarea\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      type=\"\"\r\n      class=\"form-control form-control-sm\"\r\n      [value]=\"value\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      (blur)=\"onTouch()\"\r\n      (input)=\"setValue($event.target.value)\"\r\n      (keypress)=\"onKeyPress($event)\"\r\n      [attr.rows]=\"rows\"\r\n      [ngClass]=\"{'is-invalid': invalid && (dirty || touched) }\"\r\n      [disabled]=\"isdisabled\"\r\n      [attr.maxlength]=\"maxlength\"\r\n      [readonly]=\"readonly\"\r\n    ></textarea>\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+        }], ctorParameters: function () { return [{ type: SacFormDirective, decorators: [{
+                    type: Host
+                }, {
+                    type: Optional
+                }] }, { type: i0.Injector }]; } });
+
+/**
+ * Input Control für Währungen
+ */
+class SacInputCurrencyComponent extends SacInputCurrencyCommon {
+    /**
+     * Konstruktor
+     * @param parent Formular
+     * @param injector Angular Dependency Injection Service
+     */
+    constructor(parent, injector) {
+        super(parent, injector);
+    }
+}
+SacInputCurrencyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacInputCurrencyComponent, deps: [{ token: SacFormDirective, host: true, optional: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+SacInputCurrencyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacInputCurrencyComponent, selector: "sac-inputcurrency", providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            multi: true,
+            useExisting: forwardRef(() => SacInputCurrencyComponent),
+        },
+        {
+            provide: NG_VALIDATORS,
+            multi: true,
+            useExisting: forwardRef(() => SacInputCurrencyComponent),
+        },
+    ], usesInheritance: true, ngImport: i0, template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[disablelabel === false ?  'col-sm-' + labelsize : 'sr-only' ]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ? 'col-sm-' + _inputsize : 'col-sm-12']\"\r\n  >\r\n    <div\r\n      class=\"input-group input-group-sm\"\r\n      [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      <input\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        [value]=\"value\"\r\n        (blur)=\"onTouch()\"\r\n        (input)=\"setValue($event.target.value)\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        (keypress)=\"onKeyPress($event)\"\r\n        [disabled]=\"isdisabled\"\r\n        [readonly]=\"readonly\"\r\n        [ngClass]=\"{'is-invalid': invalid && (dirty || touched) }\"\r\n      />\r\n      <span class=\"input-group-text\">CHF</span>\r\n      <div\r\n        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n        class=\"invalid-feedback\"\r\n      >\r\n        {{ GetErrorMessage() | async }}\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i2.AsyncPipe }, viewProviders: [
+        { provide: ControlContainer, useExisting: SacFormDirective },
+    ] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacInputCurrencyComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sac-inputcurrency', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            multi: true,
+                            useExisting: forwardRef(() => SacInputCurrencyComponent),
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            multi: true,
+                            useExisting: forwardRef(() => SacInputCurrencyComponent),
+                        },
+                    ], viewProviders: [
+                        { provide: ControlContainer, useExisting: SacFormDirective },
+                    ], template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[disablelabel === false ?  'col-sm-' + labelsize : 'sr-only' ]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ? 'col-sm-' + _inputsize : 'col-sm-12']\"\r\n  >\r\n    <div\r\n      class=\"input-group input-group-sm\"\r\n      [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      <input\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        [value]=\"value\"\r\n        (blur)=\"onTouch()\"\r\n        (input)=\"setValue($event.target.value)\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        (keypress)=\"onKeyPress($event)\"\r\n        [disabled]=\"isdisabled\"\r\n        [readonly]=\"readonly\"\r\n        [ngClass]=\"{'is-invalid': invalid && (dirty || touched) }\"\r\n      />\r\n      <span class=\"input-group-text\">CHF</span>\r\n      <div\r\n        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n        class=\"invalid-feedback\"\r\n      >\r\n        {{ GetErrorMessage() | async }}\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+        }], ctorParameters: function () { return [{ type: SacFormDirective, decorators: [{
+                    type: Host
+                }, {
+                    type: Optional
+                }] }, { type: i0.Injector }]; } });
+
+/**
+ * Input Komponente für Zahlen
+ */
+class SacInputDecimalComponent extends SacInputDecimalCommon {
+    /**
+     * Konstruktor
+     * @param parent Formular
+     * @param injector Angular Dependency Injection Service
+     */
+    constructor(parent, injector) {
+        super(parent, injector);
+    }
+}
+SacInputDecimalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacInputDecimalComponent, deps: [{ token: SacFormDirective, host: true, optional: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+SacInputDecimalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacInputDecimalComponent, selector: "sac-inputdecimal", providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            multi: true,
+            useExisting: forwardRef(() => SacInputDecimalComponent),
+        },
+        {
+            provide: NG_VALIDATORS,
+            multi: true,
+            useExisting: forwardRef(() => SacInputDecimalComponent),
+        },
+    ], usesInheritance: true, ngImport: i0, template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[disablelabel === false ?  'col-sm-' + labelsize : 'sr-only' ]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ? 'col-sm-' + _inputsize : 'col-sm-12']\"\r\n  >\r\n    <input\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      type=\"text\"\r\n      class=\"form-control form-control-sm\"\r\n      [value]=\"value\"\r\n      (blur)=\"onTouch()\"\r\n      (input)=\"setValue($event.target.value)\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      [readonly]=\"readonly\"\r\n      (keypress)=\"onKeyPress($event)\"\r\n      [disabled]=\"isdisabled\"\r\n      [ngClass]=\"{'is-invalid': invalid && (dirty || touched) }\"\r\n    />\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n", directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i2.AsyncPipe }, viewProviders: [
+        { provide: ControlContainer, useExisting: SacFormDirective },
+    ] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacInputDecimalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sac-inputdecimal', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            multi: true,
+                            useExisting: forwardRef(() => SacInputDecimalComponent),
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            multi: true,
+                            useExisting: forwardRef(() => SacInputDecimalComponent),
+                        },
+                    ], viewProviders: [
+                        { provide: ControlContainer, useExisting: SacFormDirective },
+                    ], template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[disablelabel === false ?  'col-sm-' + labelsize : 'sr-only' ]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ? 'col-sm-' + _inputsize : 'col-sm-12']\"\r\n  >\r\n    <input\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      type=\"text\"\r\n      class=\"form-control form-control-sm\"\r\n      [value]=\"value\"\r\n      (blur)=\"onTouch()\"\r\n      (input)=\"setValue($event.target.value)\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      [readonly]=\"readonly\"\r\n      (keypress)=\"onKeyPress($event)\"\r\n      [disabled]=\"isdisabled\"\r\n      [ngClass]=\"{'is-invalid': invalid && (dirty || touched) }\"\r\n    />\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+        }], ctorParameters: function () { return [{ type: SacFormDirective, decorators: [{
+                    type: Host
+                }, {
+                    type: Optional
+                }] }, { type: i0.Injector }]; } });
+
+/**
+ * Input Komponten für Ganzzahlen
+ */
+class SacInputIntegerComponent extends SacInputIntegerCommon {
+    /**
+     * Konstruktor
+     * @param parent Formular
+     * @param injector Angular Dependency Injection Service
+     */
+    constructor(parent, injector) {
+        super(parent, injector);
+    }
+}
+SacInputIntegerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacInputIntegerComponent, deps: [{ token: SacFormDirective, host: true, optional: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+SacInputIntegerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacInputIntegerComponent, selector: "sac-inputinteger", providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            multi: true,
+            useExisting: SacInputIntegerComponent,
+        },
+        {
+            provide: NG_VALIDATORS,
+            multi: true,
+            useExisting: forwardRef(() => SacInputIntegerComponent),
+        },
+    ], usesInheritance: true, ngImport: i0, template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[disablelabel === false ?  'col-sm-' + labelsize : 'sr-only' ]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ? 'col-sm-' + _inputsize : 'col-sm-12']\"\r\n  >\r\n    <input\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      type=\"text\"\r\n      class=\"form-control form-control-sm\"\r\n      [value]=\"value\"\r\n      (blur)=\"onTouch()\"\r\n      (input)=\"setValue($event.target.value)\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      (keypress)=\"onKeyPress($event)\"\r\n      [disabled]=\"isdisabled\"\r\n      [readonly]=\"readonly\"\r\n      [ngClass]=\"{'is-invalid': invalid && (dirty || touched) }\"\r\n    />\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n", directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i2.AsyncPipe }, viewProviders: [
+        { provide: ControlContainer, useExisting: SacFormDirective },
+    ] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacInputIntegerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sac-inputinteger', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            multi: true,
+                            useExisting: SacInputIntegerComponent,
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            multi: true,
+                            useExisting: forwardRef(() => SacInputIntegerComponent),
+                        },
+                    ], viewProviders: [
+                        { provide: ControlContainer, useExisting: SacFormDirective },
+                    ], template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[disablelabel === false ?  'col-sm-' + labelsize : 'sr-only' ]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ? 'col-sm-' + _inputsize : 'col-sm-12']\"\r\n  >\r\n    <input\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      type=\"text\"\r\n      class=\"form-control form-control-sm\"\r\n      [value]=\"value\"\r\n      (blur)=\"onTouch()\"\r\n      (input)=\"setValue($event.target.value)\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      (keypress)=\"onKeyPress($event)\"\r\n      [disabled]=\"isdisabled\"\r\n      [readonly]=\"readonly\"\r\n      [ngClass]=\"{'is-invalid': invalid && (dirty || touched) }\"\r\n    />\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+        }], ctorParameters: function () { return [{ type: SacFormDirective, decorators: [{
+                    type: Host
+                }, {
+                    type: Optional
+                }] }, { type: i0.Injector }]; } });
+
+/**
+ * Input Box für Passwörter
+ */
+class SacInputPasswordComponent extends SacInputPasswordCommon {
+    /**
+     * Konstruktor
+     * @param parent Formular
+     * @param injector Angular Dependency Injection Service
+     */
+    constructor(parent, injector) {
+        super(parent, injector);
+    }
+}
+SacInputPasswordComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacInputPasswordComponent, deps: [{ token: SacFormDirective, host: true, optional: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+SacInputPasswordComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacInputPasswordComponent, selector: "sac-inputpassword", providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            multi: true,
+            useExisting: SacInputPasswordComponent,
+        },
+        {
+            provide: NG_VALIDATORS,
+            multi: true,
+            useExisting: forwardRef(() => SacInputPasswordComponent),
+        },
+    ], usesInheritance: true, ngImport: i0, template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[disablelabel === false ?  'col-sm-' + labelsize : 'sr-only' ]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ? 'col-sm-' + _inputsize : 'col-sm-12']\"\r\n  >\r\n    <input\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      type=\"password\"\r\n      class=\"form-control form-control-sm\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      [value]=\"value\"\r\n      (blur)=\"onTouch()\"\r\n      (input)=\"setValue($event.target.value)\"\r\n      [attr.maxlength]=\"maxlength\"\r\n      autocomplete=\"new-password\"\r\n      [ngClass]=\"{'is-invalid': invalid && (dirty || touched) }\"\r\n      [disabled]=\"isdisabled\"\r\n      [readonly]=\"readonly\"\r\n    />\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n", directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i2.AsyncPipe }, viewProviders: [
+        { provide: ControlContainer, useExisting: SacFormDirective },
+    ] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacInputPasswordComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sac-inputpassword', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            multi: true,
+                            useExisting: SacInputPasswordComponent,
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            multi: true,
+                            useExisting: forwardRef(() => SacInputPasswordComponent),
+                        },
+                    ], viewProviders: [
+                        { provide: ControlContainer, useExisting: SacFormDirective },
+                    ], template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[disablelabel === false ?  'col-sm-' + labelsize : 'sr-only' ]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ? 'col-sm-' + _inputsize : 'col-sm-12']\"\r\n  >\r\n    <input\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      type=\"password\"\r\n      class=\"form-control form-control-sm\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      [value]=\"value\"\r\n      (blur)=\"onTouch()\"\r\n      (input)=\"setValue($event.target.value)\"\r\n      [attr.maxlength]=\"maxlength\"\r\n      autocomplete=\"new-password\"\r\n      [ngClass]=\"{'is-invalid': invalid && (dirty || touched) }\"\r\n      [disabled]=\"isdisabled\"\r\n      [readonly]=\"readonly\"\r\n    />\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+        }], ctorParameters: function () { return [{ type: SacFormDirective, decorators: [{
+                    type: Host
+                }, {
+                    type: Optional
+                }] }, { type: i0.Injector }]; } });
+
+/**
+ * Input Box für Suche
+ */
+class SacInputSearchComponent extends SacInputSearchCommon {
+    /**
+     * Konstruktor
+     * @param parent Formular
+     * @param injector Angular Dependency Injection Service
+     */
+    constructor(parent, injector) {
+        super(parent, injector);
+    }
+}
+SacInputSearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacInputSearchComponent, deps: [{ token: SacFormDirective, host: true, optional: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+SacInputSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacInputSearchComponent, selector: "sac-inputsearch", providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            multi: true,
+            useExisting: SacInputSearchComponent,
+        },
+        {
+            provide: NG_VALIDATORS,
+            multi: true,
+            useExisting: forwardRef(() => SacInputSearchComponent),
+        },
+    ], usesInheritance: true, ngImport: i0, template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isadaptivelabel\"\r\n    id=\"{{name}}_label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[labelsize !== 12 ?  'col-sm-' + labelsize : 'sr-only']\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    [ngClass]=\"[disablelabel === false ? 'col-sm-' + _inputsize : 'col-sm-12']\"\r\n  >\r\n    <div class=\"input-group input-group-sm\">\r\n      <input\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        [value]=\"value\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        (blur)=\"onTouch()\"\r\n        (input)=\"setValue($event.target.value)\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        [ngClass]=\"{'language-specific': islanguagespecific,'is-invalid': invalid && (dirty || touched) }\"\r\n        [disabled]=\"isdisabled\"\r\n        [readonly]=\"readonly\"\r\n      />\r\n      <input\r\n        type=\"submit\"\r\n        class=\"btn btn-secondary\"\r\n        id=\"{{name}}_search\"\r\n        (click)=\"searchClick()\"\r\n        [value]=\"buttontext\"\r\n      />\r\n    </div>\r\n  </div>\r\n</div>\r\n", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacInputSearchComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sac-inputsearch', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            multi: true,
+                            useExisting: SacInputSearchComponent,
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            multi: true,
+                            useExisting: forwardRef(() => SacInputSearchComponent),
+                        },
+                    ], template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isadaptivelabel\"\r\n    id=\"{{name}}_label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[labelsize !== 12 ?  'col-sm-' + labelsize : 'sr-only']\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    [ngClass]=\"[disablelabel === false ? 'col-sm-' + _inputsize : 'col-sm-12']\"\r\n  >\r\n    <div class=\"input-group input-group-sm\">\r\n      <input\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        [value]=\"value\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        (blur)=\"onTouch()\"\r\n        (input)=\"setValue($event.target.value)\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        [ngClass]=\"{'language-specific': islanguagespecific,'is-invalid': invalid && (dirty || touched) }\"\r\n        [disabled]=\"isdisabled\"\r\n        [readonly]=\"readonly\"\r\n      />\r\n      <input\r\n        type=\"submit\"\r\n        class=\"btn btn-secondary\"\r\n        id=\"{{name}}_search\"\r\n        (click)=\"searchClick()\"\r\n        [value]=\"buttontext\"\r\n      />\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+        }], ctorParameters: function () { return [{ type: SacFormDirective, decorators: [{
+                    type: Host
+                }, {
+                    type: Optional
+                }] }, { type: i0.Injector }]; } });
+
+class SACBootstrap5InputModule {
+}
+SACBootstrap5InputModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5InputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SACBootstrap5InputModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5InputModule, declarations: [SacInputComponent, SacInputAreaComponent, SacInputCurrencyComponent, SacInputDecimalComponent, SacInputEmailComponent, SacInputIntegerComponent, SacInputPasswordComponent, SacInputSearchComponent], imports: [CommonModule], exports: [SacInputComponent, SacInputAreaComponent, SacInputCurrencyComponent, SacInputDecimalComponent, SacInputEmailComponent, SacInputIntegerComponent, SacInputPasswordComponent, SacInputSearchComponent] });
+SACBootstrap5InputModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5InputModule, imports: [[
+            CommonModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5InputModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SacInputComponent, SacInputAreaComponent, SacInputCurrencyComponent, SacInputDecimalComponent, SacInputEmailComponent, SacInputIntegerComponent, SacInputPasswordComponent, SacInputSearchComponent],
+                    imports: [
+                        CommonModule
+                    ],
+                    exports: [SacInputComponent, SacInputAreaComponent, SacInputCurrencyComponent, SacInputDecimalComponent, SacInputEmailComponent, SacInputIntegerComponent, SacInputPasswordComponent, SacInputSearchComponent]
+                }]
+        }] });
+
+/**
+ * Listbox Komponente
+ */
+class SacListboxComponent extends SacListboxCommon {
+    /**
+     * Konstruktor
+     * @param parent Formular
+     * @param injector Angular Dependiency Injection Service
+     */
+    constructor(parent, injector) {
+        super(parent, injector);
+    }
+}
+SacListboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacListboxComponent, deps: [{ token: SacFormDirective, host: true, optional: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+SacListboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacListboxComponent, selector: "sac-listbox", providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            multi: true,
+            useExisting: SacListboxComponent,
+        },
+        {
+            provide: NG_VALIDATORS,
+            multi: true,
+            useExisting: forwardRef(() => SacListboxComponent),
+        },
+    ], usesInheritance: true, ngImport: i0, template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[disablelabel === false ?  'col-sm-' + labelsize : 'sr-only' ]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ? 'col-sm-' + _inputsize : 'col-sm-12']\"\r\n  >\r\n    <select\r\n      multiple\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      class=\"form-select form-select-sm\"\r\n      [size]=\"rowsize\"\r\n      [ngClass]=\"{'is-invalid': invalid && (dirty || touched) }\"\r\n      (blur)=\"onTouch()\"\r\n      (change)=\"getSelectedItems($event.target)\"\r\n      [disabled]=\"isdisabled\"\r\n    >\r\n      <ng-content></ng-content>\r\n      <ng-container *ngIf=\"groupitems === ''\">\r\n        <option\r\n          *ngFor=\"let option of options\"\r\n          [value]=\"option[optionvalue]\"\r\n          [disabled]=\"optionenabled !== '' && option[optionenabled] === false\"\r\n        >\r\n          {{option[optionlabel]}}\r\n        </option>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"groupitems !== ''\">\r\n        <optgroup\r\n          *ngFor=\"let option of options\"\r\n          [attr.label]=\"option[grouplabel]\"\r\n        >\r\n          <option\r\n            *ngFor=\"let item of option[groupitems]\"\r\n            [value]=\"item[optionvalue]\"\r\n            [disabled]=\"optionenabled !== '' && item[optionenabled] === false\"\r\n          >\r\n            {{item[optionlabel]}}\r\n          </option>\r\n        </optgroup>\r\n      </ng-container>\r\n    </select>\r\n    <div\r\n      class=\"invalid-feedback\"\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n", directives: [{ type: i0.forwardRef(function () { return i2.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i0.forwardRef(function () { return i2.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i0.forwardRef(function () { return i2.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i0.forwardRef(function () { return SacListboxOptionDirective; }), selector: "[sacOption],option" }], pipes: { "async": i0.forwardRef(function () { return i2.AsyncPipe; }) }, viewProviders: [
+        { provide: ControlContainer, useExisting: SacFormDirective },
+    ] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacListboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sac-listbox', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            multi: true,
+                            useExisting: SacListboxComponent,
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            multi: true,
+                            useExisting: forwardRef(() => SacListboxComponent),
+                        },
+                    ], viewProviders: [
+                        { provide: ControlContainer, useExisting: SacFormDirective },
+                    ], template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[disablelabel === false ?  'col-sm-' + labelsize : 'sr-only' ]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ? 'col-sm-' + _inputsize : 'col-sm-12']\"\r\n  >\r\n    <select\r\n      multiple\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      class=\"form-select form-select-sm\"\r\n      [size]=\"rowsize\"\r\n      [ngClass]=\"{'is-invalid': invalid && (dirty || touched) }\"\r\n      (blur)=\"onTouch()\"\r\n      (change)=\"getSelectedItems($event.target)\"\r\n      [disabled]=\"isdisabled\"\r\n    >\r\n      <ng-content></ng-content>\r\n      <ng-container *ngIf=\"groupitems === ''\">\r\n        <option\r\n          *ngFor=\"let option of options\"\r\n          [value]=\"option[optionvalue]\"\r\n          [disabled]=\"optionenabled !== '' && option[optionenabled] === false\"\r\n        >\r\n          {{option[optionlabel]}}\r\n        </option>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"groupitems !== ''\">\r\n        <optgroup\r\n          *ngFor=\"let option of options\"\r\n          [attr.label]=\"option[grouplabel]\"\r\n        >\r\n          <option\r\n            *ngFor=\"let item of option[groupitems]\"\r\n            [value]=\"item[optionvalue]\"\r\n            [disabled]=\"optionenabled !== '' && item[optionenabled] === false\"\r\n          >\r\n            {{item[optionlabel]}}\r\n          </option>\r\n        </optgroup>\r\n      </ng-container>\r\n    </select>\r\n    <div\r\n      class=\"invalid-feedback\"\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+        }], ctorParameters: function () { return [{ type: SacFormDirective, decorators: [{
+                    type: Host
+                }, {
+                    type: Optional
+                }] }, { type: i0.Injector }]; } });
+/**
+ * Option Item in Listbox
+ */
+class SacListboxOptionDirective extends SacListboxOptionCommon {
+    /**
+     * Konstruktor
+     * @param _elementRef Referenz auf DOM Element
+     * @param _renderer Angular Rendering Engine
+     * @param listbox Referenz auf Listbox Komponente
+     */
+    constructor(_elementRef, _renderer, listbox) {
+        super(_elementRef, _renderer, listbox);
+    }
+}
+SacListboxOptionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacListboxOptionDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: SacListboxComponent, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+SacListboxOptionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: SacListboxOptionDirective, selector: "[sacOption],option", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacListboxOptionDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[sacOption],option' }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: SacListboxComponent, decorators: [{
+                    type: Optional
+                }, {
+                    type: Host
+                }] }]; } });
+
+class SACBootstrap5ListModule {
+}
+SACBootstrap5ListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5ListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SACBootstrap5ListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5ListModule, declarations: [SacListboxComponent, SacListboxOptionDirective], imports: [CommonModule], exports: [SacListboxComponent, SacListboxOptionDirective] });
+SACBootstrap5ListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5ListModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5ListModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SacListboxComponent, SacListboxOptionDirective],
+                    imports: [CommonModule],
+                    exports: [SacListboxComponent, SacListboxOptionDirective],
+                }]
+        }] });
+
+/**
+ * Dropdown Komponente
+ */
+class SacDropdownComponent extends SacDropdownCommon {
+    /**
+     * Konstruktor
+     * @param parent Formular
+     * @param injector Dependency Injection Service
+     * @param _renderer Angular Rendering Engine
+     * @param _elementRef Referenz auf HTML DOM Element
+     */
+    constructor(parent, injector, _renderer, _elementRef) {
+        super(parent, injector, _renderer, _elementRef);
+    }
+}
+SacDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacDropdownComponent, deps: [{ token: SacFormDirective, host: true, optional: true }, { token: i0.Injector }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+SacDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacDropdownComponent, selector: "sac-dropdown", providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            multi: true,
+            useExisting: SacDropdownComponent,
+        },
+        {
+            provide: NG_VALIDATORS,
+            multi: true,
+            useExisting: forwardRef(() => SacDropdownComponent),
+        },
+    ], usesInheritance: true, ngImport: i0, template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[disablelabel === false ?  'col-sm-' + labelsize : 'sr-only' ]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    [ngClass]=\"[disablelabel === false ? 'col-sm-' + _inputsize : 'col-sm-12']\"\r\n  >\r\n    <select\r\n      #dropdownitem\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      class=\"form-select form-select-sm\"\r\n      [ngClass]=\"{'is-invalid': invalid && (dirty || touched) }\"\r\n      (blur)=\"onTouch()\"\r\n      (change)=\"setValue(dropdownitem.value)\"\r\n      [disabled]=\"isdisabled\"\r\n    >\r\n      <option *ngIf=\"emptylabel !== ''\" [ngValue]=\"emptyvalue\">\r\n        {{emptylabel}}\r\n      </option>\r\n\r\n      <ng-content></ng-content>\r\n\r\n      <ng-container *ngIf=\"groupitems === ''\">\r\n        <option\r\n          *ngFor=\"let item of options\"\r\n          [ngValue]=\"optionvalue ? item[optionvalue] : item\"\r\n          [disabled]=\"optionenabled !== '' && item[optionenabled] === false\"\r\n        >\r\n          <ng-template\r\n            *ngTemplateOutlet=\"optionlabeltemplate || defaultItemLabelTemplate;context:{ label: item[optionlabel], item: item }\"\r\n          >\r\n          </ng-template>\r\n        </option>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"groupitems !== ''\">\r\n        <optgroup\r\n          *ngFor=\"let group of options\"\r\n          [attr.label]=\"group[grouplabel]\"\r\n        >\r\n          <option\r\n            *ngFor=\"let item of group[groupitems]\"\r\n            [ngValue]=\"optionvalue ? item[optionvalue] : item\"\r\n            [disabled]=\"optionenabled !== '' && item[optionenabled] === false\"\r\n          >\r\n            <ng-template\r\n              *ngTemplateOutlet=\"optionlabeltemplate || defaultItemLabelTemplate;context:{ label: item[optionlabel], item: item }\"\r\n            >\r\n            </ng-template>\r\n          </option>\r\n        </optgroup>\r\n      </ng-container>\r\n    </select>\r\n    <div\r\n      class=\"invalid-feedback\"\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #defaultItemLabelTemplate let-label=\"label\">\r\n  {{label}}\r\n</ng-template>\r\n", directives: [{ type: i0.forwardRef(function () { return i2.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i0.forwardRef(function () { return i2.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i0.forwardRef(function () { return SacDropdownOptionDirective; }), selector: "[sacOption],option" }, { type: i0.forwardRef(function () { return i2.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i0.forwardRef(function () { return i2.NgTemplateOutlet; }), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i0.forwardRef(function () { return i2.AsyncPipe; }) } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacDropdownComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sac-dropdown', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            multi: true,
+                            useExisting: SacDropdownComponent,
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            multi: true,
+                            useExisting: forwardRef(() => SacDropdownComponent),
+                        },
+                    ], template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[disablelabel === false ?  'col-sm-' + labelsize : 'sr-only' ]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    [ngClass]=\"[disablelabel === false ? 'col-sm-' + _inputsize : 'col-sm-12']\"\r\n  >\r\n    <select\r\n      #dropdownitem\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      class=\"form-select form-select-sm\"\r\n      [ngClass]=\"{'is-invalid': invalid && (dirty || touched) }\"\r\n      (blur)=\"onTouch()\"\r\n      (change)=\"setValue(dropdownitem.value)\"\r\n      [disabled]=\"isdisabled\"\r\n    >\r\n      <option *ngIf=\"emptylabel !== ''\" [ngValue]=\"emptyvalue\">\r\n        {{emptylabel}}\r\n      </option>\r\n\r\n      <ng-content></ng-content>\r\n\r\n      <ng-container *ngIf=\"groupitems === ''\">\r\n        <option\r\n          *ngFor=\"let item of options\"\r\n          [ngValue]=\"optionvalue ? item[optionvalue] : item\"\r\n          [disabled]=\"optionenabled !== '' && item[optionenabled] === false\"\r\n        >\r\n          <ng-template\r\n            *ngTemplateOutlet=\"optionlabeltemplate || defaultItemLabelTemplate;context:{ label: item[optionlabel], item: item }\"\r\n          >\r\n          </ng-template>\r\n        </option>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"groupitems !== ''\">\r\n        <optgroup\r\n          *ngFor=\"let group of options\"\r\n          [attr.label]=\"group[grouplabel]\"\r\n        >\r\n          <option\r\n            *ngFor=\"let item of group[groupitems]\"\r\n            [ngValue]=\"optionvalue ? item[optionvalue] : item\"\r\n            [disabled]=\"optionenabled !== '' && item[optionenabled] === false\"\r\n          >\r\n            <ng-template\r\n              *ngTemplateOutlet=\"optionlabeltemplate || defaultItemLabelTemplate;context:{ label: item[optionlabel], item: item }\"\r\n            >\r\n            </ng-template>\r\n          </option>\r\n        </optgroup>\r\n      </ng-container>\r\n    </select>\r\n    <div\r\n      class=\"invalid-feedback\"\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #defaultItemLabelTemplate let-label=\"label\">\r\n  {{label}}\r\n</ng-template>\r\n" }]
+        }], ctorParameters: function () { return [{ type: SacFormDirective, decorators: [{
+                    type: Host
+                }, {
+                    type: Optional
+                }] }, { type: i0.Injector }, { type: i0.Renderer2 }, { type: i0.ElementRef }]; } });
+/**
+ * Direktive für Dropdown Option List
+ */
+class SacDropdownOptionDirective extends SacDropdownOptionCommon {
+    /**
+     * Konstruktor
+     * @param _elementRef Referenz auf HTML DOM Element
+     * @param _renderer Angular Rendering Engine
+     * @param dropdownList Referenz auf DropDown Komponente
+     */
+    constructor(_elementRef, _renderer, dropdownList) {
+        super(_elementRef, _renderer, dropdownList);
+    }
+}
+SacDropdownOptionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacDropdownOptionDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: SacDropdownComponent, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+SacDropdownOptionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: SacDropdownOptionDirective, selector: "[sacOption],option", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacDropdownOptionDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[sacOption],option' }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: SacDropdownComponent, decorators: [{
+                    type: Optional
+                }, {
+                    type: Host
+                }] }]; } });
+
+class SACBootstrap5DropdownModule {
+}
+SACBootstrap5DropdownModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5DropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SACBootstrap5DropdownModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5DropdownModule, declarations: [SacDropdownComponent,
+        SacDropdownOptionDirective], imports: [CommonModule], exports: [SacDropdownComponent,
+        SacDropdownOptionDirective] });
+SACBootstrap5DropdownModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5DropdownModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5DropdownModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SacDropdownComponent,
+                        SacDropdownOptionDirective,
+                    ],
+                    imports: [CommonModule],
+                    exports: [
+                        SacDropdownComponent,
+                        SacDropdownOptionDirective,
+                    ],
+                }]
+        }] });
+
+/**
+ * Marker Komponente für Context Menü
+ */
+class SacMultilanguagemenuContainerDirective extends SacContextMenuContrainerCommon {
+    /**
+     * Konstruktor
+     * @param _elementRef Referenz auf DOM Element
+     */
+    constructor(_elementRef) {
+        super(_elementRef);
+    }
+}
+SacMultilanguagemenuContainerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacMultilanguagemenuContainerDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+SacMultilanguagemenuContainerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: SacMultilanguagemenuContainerDirective, selector: "[sacMultilanguageMenuContainer]", providers: [
+        {
+            provide: SacContextMenuContrainerCommon,
+            useExisting: forwardRef(() => SacMultilanguagemenuContainerDirective),
+        },
+    ], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacMultilanguagemenuContainerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[sacMultilanguageMenuContainer]',
+                    providers: [
+                        {
+                            provide: SacContextMenuContrainerCommon,
+                            useExisting: forwardRef(() => SacMultilanguagemenuContainerDirective),
+                        },
+                    ],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
+
+/**
+ * Anker Komponente für Context Menü. Wird zum positionieren des Context Menü in der Page benötigt.
+ */
+class SacMultilanguagemenuAnchorDirective extends SacContextmenuAnchorCommon {
+    /**
+     * Konstruktor
+     * @param _elementRef HTML DOM Referenz
+     */
+    constructor(_elementRef) {
+        super(_elementRef);
+    }
+}
+SacMultilanguagemenuAnchorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacMultilanguagemenuAnchorDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+SacMultilanguagemenuAnchorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: SacMultilanguagemenuAnchorDirective, selector: "[sacMultilanguageMenuAnchor]", providers: [
+        {
+            provide: SacContextmenuAnchorCommon,
+            useExisting: forwardRef(() => SacMultilanguagemenuAnchorDirective),
+        },
+    ], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacMultilanguagemenuAnchorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[sacMultilanguageMenuAnchor]',
+                    providers: [
+                        {
+                            provide: SacContextmenuAnchorCommon,
+                            useExisting: forwardRef(() => SacMultilanguagemenuAnchorDirective),
+                        },
+                    ],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
+
+/**
+ * Component für Contextmenü
+ */
+class SacMultilanguagemenuComponent extends SacContextmenuCommon {
+    /**
+     * Constructor
+     * @param _document Referenz auf HTML Document
+     * @param _ngZone Angular Zone Service
+     * @param _elementRef Referenz auf HTML Element der aktuellen Komponente
+     * @param _renderer Render Service von Angular
+     * @param _injector injector to resolve services in base component
+     */
+    constructor(_document, _ngZone, _elementRef, _renderer, _injector) {
+        super(_document, _ngZone, _elementRef, _renderer, _injector);
+    }
+}
+SacMultilanguagemenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacMultilanguagemenuComponent, deps: [{ token: DOCUMENT }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+SacMultilanguagemenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacMultilanguagemenuComponent, selector: "[sac-multilanguagemenu]", inputs: { inputtemplate: "inputtemplate", validationtemplate: "validationtemplate" }, providers: [
+        {
+            provide: SacContextmenuCommon,
+            useExisting: forwardRef(() => SacMultilanguagemenuComponent),
+        },
+    ], usesInheritance: true, ngImport: i0, template: "<ng-container\r\n  [ngTemplateOutlet]=\"inputtemplate || defaultInputTemplate\"\r\n></ng-container>\r\n<ng-container\r\n  [ngTemplateOutlet]=\"buttontemplate || defaultButtonTemplate\"\r\n></ng-container>\r\n<ng-container\r\n  [ngTemplateOutlet]=\"validationtemplate || defaultValidationTemplate\"\r\n></ng-container>\r\n\r\n<ul\r\n  class=\"dropdown-menu dropdown-menu-right\"\r\n  sacMultilanguageMenuContainer\r\n  [class.show]=\"isopen\"\r\n>\r\n  <ng-content></ng-content>\r\n</ul>\r\n\r\n<ng-template #defaultButtonTemplate>\r\n  <button\r\n    sacMultilanguageMenuAnchor\r\n    class=\"btn btn-secondary dropdown-toggle\"\r\n    type=\"button\"\r\n    (click)=\"toggle()\"\r\n  ></button>\r\n</ng-template>\r\n\r\n<ng-template #defaultInputTemplate>\r\n  <input type=\"text\" class=\"form-control form-control-sm\" />\r\n</ng-template>\r\n\r\n<ng-template #defaultValidationTemplate></ng-template>\r\n", directives: [{ type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: SacMultilanguagemenuContainerDirective, selector: "[sacMultilanguageMenuContainer]" }, { type: SacMultilanguagemenuAnchorDirective, selector: "[sacMultilanguageMenuAnchor]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacMultilanguagemenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: '[sac-multilanguagemenu]', providers: [
+                        {
+                            provide: SacContextmenuCommon,
+                            useExisting: forwardRef(() => SacMultilanguagemenuComponent),
+                        },
+                    ], template: "<ng-container\r\n  [ngTemplateOutlet]=\"inputtemplate || defaultInputTemplate\"\r\n></ng-container>\r\n<ng-container\r\n  [ngTemplateOutlet]=\"buttontemplate || defaultButtonTemplate\"\r\n></ng-container>\r\n<ng-container\r\n  [ngTemplateOutlet]=\"validationtemplate || defaultValidationTemplate\"\r\n></ng-container>\r\n\r\n<ul\r\n  class=\"dropdown-menu dropdown-menu-right\"\r\n  sacMultilanguageMenuContainer\r\n  [class.show]=\"isopen\"\r\n>\r\n  <ng-content></ng-content>\r\n</ul>\r\n\r\n<ng-template #defaultButtonTemplate>\r\n  <button\r\n    sacMultilanguageMenuAnchor\r\n    class=\"btn btn-secondary dropdown-toggle\"\r\n    type=\"button\"\r\n    (click)=\"toggle()\"\r\n  ></button>\r\n</ng-template>\r\n\r\n<ng-template #defaultInputTemplate>\r\n  <input type=\"text\" class=\"form-control form-control-sm\" />\r\n</ng-template>\r\n\r\n<ng-template #defaultValidationTemplate></ng-template>\r\n" }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }, { type: i0.NgZone }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.Injector }]; }, propDecorators: { inputtemplate: [{
+                type: Input
+            }], validationtemplate: [{
+                type: Input
+            }] } });
+
+/**
+ * Component für Menü Eintrag in Context Menü
+ */
+class SacMultilanguagemenuItemButtonComponent extends SacContextmenuItemButtonCommon {
+    /**
+     * Constructor
+     * @param contextmenu Instance von Context Menü
+     */
+    constructor(contextmenu) {
+        super(contextmenu);
+    }
+}
+SacMultilanguagemenuItemButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacMultilanguagemenuItemButtonComponent, deps: [{ token: i1.SacContextmenuCommon }], target: i0.ɵɵFactoryTarget.Component });
+SacMultilanguagemenuItemButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacMultilanguagemenuItemButtonComponent, selector: "sac-multilanguagemenubutton", usesInheritance: true, ngImport: i0, template: "<li>\r\n  <button\r\n    type=\"button\"\r\n    class=\"dropdown-item\"\r\n    (click)=\"callaction($event)\"\r\n    [class.disabled]=\"isdisabled\"\r\n    [class]=\"cssclass\"\r\n    [attr.disabled]=\"isdisabled ? 'disabled' : null\"\r\n  >\r\n    <div class=\"d-flex\">\r\n      <div *ngIf=\"!isicondisabled\" style=\"min-width: 1.5rem\">\r\n        <img *ngIf=\"image\" [src]=\"image\" class=\"align-baseline\" />\r\n        <i *ngIf=\"icon\" [class]=\"iconstyle + ' ' + icon\"></i>\r\n      </div>\r\n      <div class=\"flex-grow-1\">{{ text }}</div>\r\n    </div>\r\n  </button>\r\n</li>\r\n", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacMultilanguagemenuItemButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sac-multilanguagemenubutton', template: "<li>\r\n  <button\r\n    type=\"button\"\r\n    class=\"dropdown-item\"\r\n    (click)=\"callaction($event)\"\r\n    [class.disabled]=\"isdisabled\"\r\n    [class]=\"cssclass\"\r\n    [attr.disabled]=\"isdisabled ? 'disabled' : null\"\r\n  >\r\n    <div class=\"d-flex\">\r\n      <div *ngIf=\"!isicondisabled\" style=\"min-width: 1.5rem\">\r\n        <img *ngIf=\"image\" [src]=\"image\" class=\"align-baseline\" />\r\n        <i *ngIf=\"icon\" [class]=\"iconstyle + ' ' + icon\"></i>\r\n      </div>\r\n      <div class=\"flex-grow-1\">{{ text }}</div>\r\n    </div>\r\n  </button>\r\n</li>\r\n" }]
+        }], ctorParameters: function () { return [{ type: i1.SacContextmenuCommon }]; } });
+
+/**
+ * Componente für Mehrsprache Texte
+ */
+class SacMultilanguageInputComponent extends SacMultilanguageInputCommon {
+    /**
+     * Konstruktor
+     * @param parent Formular Inject
+     * @param injector Default Injector
+     */
+    constructor(parent, injector) {
+        super(parent, injector);
+        /**
+         * Enum für IconType in HTML Template
+         */
+        this.IconType = IconType;
+    }
+}
+SacMultilanguageInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacMultilanguageInputComponent, deps: [{ token: SacFormDirective, host: true, optional: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+SacMultilanguageInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacMultilanguageInputComponent, selector: "sac-multilanguageinput", providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            multi: true,
+            useExisting: SacMultilanguageInputComponent,
+        },
+        {
+            provide: NG_VALIDATORS,
+            multi: true,
+            useExisting: forwardRef(() => SacMultilanguageInputComponent),
+        },
+    ], usesInheritance: true, ngImport: i0, template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[disablelabel === false ?  'col-sm-' + labelsize : 'sr-only' ]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ? 'col-sm-' + _inputsize : 'col-sm-12']\"\r\n  >\r\n    <div\r\n      class=\"input-group input-group-sm\"\r\n      [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      placement=\"bottom-right\"\r\n      sac-multilanguagemenu\r\n      [buttontemplate]=\"menuButton\"\r\n      [inputtemplate]=\"menuInput\"\r\n      [validationtemplate]=\"validationMessage\"\r\n      #contextmenu\r\n    >\r\n      <ng-template #menuInput>\r\n        <input\r\n          id=\"{{name}}\"\r\n          name=\"{{name}}\"\r\n          type=\"text\"\r\n          class=\"form-control form-control-sm\"\r\n          [value]=\"LanguageValue\"\r\n          [attr.placeholder]=\"placeholder\"\r\n          (blur)=\"onTouch()\"\r\n          (input)=\"SetLanguageValue($event.target.value)\"\r\n          [attr.maxlength]=\"maxlength\"\r\n          [ngClass]=\"{'is-invalid': invalid && (dirty || touched) }\"\r\n          [disabled]=\"isdisabled\"\r\n        />\r\n      </ng-template>\r\n\r\n      <ng-template #menuButton>\r\n        <button\r\n          sacMultilanguageMenuAnchor\r\n          [id]=\"name + '_dropdownitem'\"\r\n          type=\"button\"\r\n          class=\"btn dropdown-toggle\"\r\n          (click)=\"contextmenu.toggle()\"\r\n          [ngClass]=\"[IsAnyEmpty() ? 'btn-warning' : 'btn-secondary']\"\r\n        >\r\n          <img\r\n            src=\"{{SelectedIcon}}\"\r\n            class=\"align-baseline mr-1 ml-1\"\r\n            *ngIf=\"SelectedIconType === IconType.Image\"\r\n          />\r\n          <span\r\n            [ngClass]=\"SelectedIcon\"\r\n            class=\"align-baseline mr-1 ml-1\"\r\n            *ngIf=\"SelectedIconType === IconType.CssSprite\"\r\n          ></span>\r\n        </button>\r\n      </ng-template>\r\n\r\n      <ng-template #validationMessage>\r\n        <div\r\n          *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n          class=\"invalid-feedback\"\r\n        >\r\n          {{ GetErrorMessage() | async }}\r\n        </div></ng-template\r\n      >\r\n\r\n      <ng-container *ngFor=\"let sprache of Languages\">\r\n        <sac-multilanguagemenubutton\r\n          *ngIf=\"sprache.IconType === IconType.Image\"\r\n          text=\"{{sprache.Text}}\"\r\n          image=\"{{sprache.Icon}}\"\r\n          [cssclass]=\"IsEmpty(sprache) ? 'text-danger border-left border-danger': ''\"\r\n          (clicked)=\"SelectLanguage(sprache)\"\r\n        ></sac-multilanguagemenubutton>\r\n        <sac-multilanguagemenubutton\r\n          *ngIf=\"sprache.IconType === IconType.CssSprite\"\r\n          text=\"{{sprache.Text}}\"\r\n          icon=\"{{sprache.Icon}}\"\r\n          [cssclass]=\"IsEmpty(sprache) ? 'text-danger border-left border-danger': ''\"\r\n          (clicked)=\"SelectLanguage(sprache)\"\r\n        ></sac-multilanguagemenubutton>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n<div class=\"row\">\r\n  <div class=\"col text-right\"></div>\r\n</div>\r\n", components: [{ type: SacMultilanguagemenuComponent, selector: "[sac-multilanguagemenu]", inputs: ["inputtemplate", "validationtemplate"] }, { type: SacMultilanguagemenuItemButtonComponent, selector: "sac-multilanguagemenubutton" }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: SacMultilanguagemenuAnchorDirective, selector: "[sacMultilanguageMenuAnchor]" }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i2.AsyncPipe }, viewProviders: [
+        { provide: ControlContainer, useExisting: SacFormDirective },
+    ] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacMultilanguageInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sac-multilanguageinput', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            multi: true,
+                            useExisting: SacMultilanguageInputComponent,
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            multi: true,
+                            useExisting: forwardRef(() => SacMultilanguageInputComponent),
+                        },
+                    ], viewProviders: [
+                        { provide: ControlContainer, useExisting: SacFormDirective },
+                    ], template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[disablelabel === false ?  'col-sm-' + labelsize : 'sr-only' ]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ? 'col-sm-' + _inputsize : 'col-sm-12']\"\r\n  >\r\n    <div\r\n      class=\"input-group input-group-sm\"\r\n      [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      placement=\"bottom-right\"\r\n      sac-multilanguagemenu\r\n      [buttontemplate]=\"menuButton\"\r\n      [inputtemplate]=\"menuInput\"\r\n      [validationtemplate]=\"validationMessage\"\r\n      #contextmenu\r\n    >\r\n      <ng-template #menuInput>\r\n        <input\r\n          id=\"{{name}}\"\r\n          name=\"{{name}}\"\r\n          type=\"text\"\r\n          class=\"form-control form-control-sm\"\r\n          [value]=\"LanguageValue\"\r\n          [attr.placeholder]=\"placeholder\"\r\n          (blur)=\"onTouch()\"\r\n          (input)=\"SetLanguageValue($event.target.value)\"\r\n          [attr.maxlength]=\"maxlength\"\r\n          [ngClass]=\"{'is-invalid': invalid && (dirty || touched) }\"\r\n          [disabled]=\"isdisabled\"\r\n        />\r\n      </ng-template>\r\n\r\n      <ng-template #menuButton>\r\n        <button\r\n          sacMultilanguageMenuAnchor\r\n          [id]=\"name + '_dropdownitem'\"\r\n          type=\"button\"\r\n          class=\"btn dropdown-toggle\"\r\n          (click)=\"contextmenu.toggle()\"\r\n          [ngClass]=\"[IsAnyEmpty() ? 'btn-warning' : 'btn-secondary']\"\r\n        >\r\n          <img\r\n            src=\"{{SelectedIcon}}\"\r\n            class=\"align-baseline mr-1 ml-1\"\r\n            *ngIf=\"SelectedIconType === IconType.Image\"\r\n          />\r\n          <span\r\n            [ngClass]=\"SelectedIcon\"\r\n            class=\"align-baseline mr-1 ml-1\"\r\n            *ngIf=\"SelectedIconType === IconType.CssSprite\"\r\n          ></span>\r\n        </button>\r\n      </ng-template>\r\n\r\n      <ng-template #validationMessage>\r\n        <div\r\n          *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n          class=\"invalid-feedback\"\r\n        >\r\n          {{ GetErrorMessage() | async }}\r\n        </div></ng-template\r\n      >\r\n\r\n      <ng-container *ngFor=\"let sprache of Languages\">\r\n        <sac-multilanguagemenubutton\r\n          *ngIf=\"sprache.IconType === IconType.Image\"\r\n          text=\"{{sprache.Text}}\"\r\n          image=\"{{sprache.Icon}}\"\r\n          [cssclass]=\"IsEmpty(sprache) ? 'text-danger border-left border-danger': ''\"\r\n          (clicked)=\"SelectLanguage(sprache)\"\r\n        ></sac-multilanguagemenubutton>\r\n        <sac-multilanguagemenubutton\r\n          *ngIf=\"sprache.IconType === IconType.CssSprite\"\r\n          text=\"{{sprache.Text}}\"\r\n          icon=\"{{sprache.Icon}}\"\r\n          [cssclass]=\"IsEmpty(sprache) ? 'text-danger border-left border-danger': ''\"\r\n          (clicked)=\"SelectLanguage(sprache)\"\r\n        ></sac-multilanguagemenubutton>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n<div class=\"row\">\r\n  <div class=\"col text-right\"></div>\r\n</div>\r\n" }]
+        }], ctorParameters: function () { return [{ type: SacFormDirective, decorators: [{
+                    type: Host
+                }, {
+                    type: Optional
+                }] }, { type: i0.Injector }]; } });
+
+/**
+ * Componente für Mehrsprache Texte als mehrzeiliger Text
+ */
+class SacMultilanguageInputAreaComponent extends SacMultilanguageInputAreaCommon {
+    /**
+     * Konstruktor
+     * @param parent Formular Inject
+     * @param injector Default Injector
+     */
+    constructor(parent, injector) {
+        super(parent, injector);
+        /**
+         * Enum für IconType in HTML Template
+         */
+        this.IconType = IconType;
+    }
+}
+SacMultilanguageInputAreaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacMultilanguageInputAreaComponent, deps: [{ token: SacFormDirective, host: true, optional: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+SacMultilanguageInputAreaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacMultilanguageInputAreaComponent, selector: "sac-multilanguageinputarea", providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            multi: true,
+            useExisting: SacMultilanguageInputAreaComponent,
+        },
+        {
+            provide: NG_VALIDATORS,
+            multi: true,
+            useExisting: forwardRef(() => SacMultilanguageInputAreaComponent),
+        },
+    ], usesInheritance: true, ngImport: i0, template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[disablelabel === false ?  'col-sm-' + labelsize : 'sr-only' ]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ? 'col-sm-' + _inputsize : 'col-sm-12']\"\r\n  >\r\n    <div\r\n      class=\"input-group input-group-sm\"\r\n      [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      placement=\"bottom-right\"\r\n      sac-multilanguagemenu\r\n      [buttontemplate]=\"menuButton\"\r\n      [inputtemplate]=\"menuInput\"\r\n      [validationtemplate]=\"validationMessage\"\r\n      #contextmenu\r\n    >\r\n      <ng-template #menuInput>\r\n        <textarea\r\n          id=\"{{name}}\"\r\n          name=\"{{name}}\"\r\n          type=\"text\"\r\n          class=\"form-control form-control-sm\"\r\n          [value]=\"LanguageValue\"\r\n          [attr.placeholder]=\"placeholder\"\r\n          (blur)=\"onTouch()\"\r\n          style=\"height: auto\"\r\n          (input)=\"SetLanguageValue($event.target.value)\"\r\n          [attr.rows]=\"rows\"\r\n          [attr.maxlength]=\"maxlength\"\r\n          [ngClass]=\"{'is-invalid': invalid && (dirty || touched) }\"\r\n          [disabled]=\"isdisabled\"\r\n        ></textarea>\r\n      </ng-template>\r\n\r\n      <ng-template #menuButton>\r\n        <button\r\n          sacMultilanguageMenuAnchor\r\n          [id]=\"name + '_dropdownitem'\"\r\n          type=\"button\"\r\n          class=\"btn dropdown-toggle\"\r\n          (click)=\"contextmenu.toggle()\"\r\n          [ngClass]=\"[IsAnyEmpty() ? 'btn-warning' : 'btn-secondary']\"\r\n        >\r\n          <img\r\n            src=\"{{SelectedIcon}}\"\r\n            class=\"align-baseline mr-1 ml-1\"\r\n            *ngIf=\"SelectedIconType === IconType.Image\"\r\n          />\r\n          <i\r\n            [ngClass]=\"SelectedIcon\"\r\n            class=\"align-baseline mr-1 ml-1\"\r\n            *ngIf=\"SelectedIconType === IconType.CssSprite\"\r\n          ></i>\r\n        </button>\r\n      </ng-template>\r\n\r\n      <ng-template #validationMessage>\r\n        <div\r\n          *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n          class=\"invalid-feedback\"\r\n        >\r\n          {{ GetErrorMessage() | async }}\r\n        </div></ng-template\r\n      >\r\n\r\n      <ng-container *ngFor=\"let sprache of Languages\">\r\n        <sac-multilanguagemenubutton\r\n          *ngIf=\"sprache.IconType === IconType.Image\"\r\n          text=\"{{sprache.Text}}\"\r\n          image=\"{{sprache.Icon}}\"\r\n          [cssclass]=\"IsEmpty(sprache) ? 'text-danger border-left border-danger': ''\"\r\n          (clicked)=\"SelectLanguage(sprache)\"\r\n        ></sac-multilanguagemenubutton>\r\n        <sac-multilanguagemenubutton\r\n          *ngIf=\"sprache.IconType === IconType.CssSprite\"\r\n          text=\"{{sprache.Text}}\"\r\n          icon=\"{{sprache.Icon}}\"\r\n          [cssclass]=\"IsEmpty(sprache) ? 'text-danger border-left border-danger': ''\"\r\n          (clicked)=\"SelectLanguage(sprache)\"\r\n        ></sac-multilanguagemenubutton>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n<div class=\"row\">\r\n  <div class=\"col text-right\"></div>\r\n</div>\r\n", components: [{ type: SacMultilanguagemenuComponent, selector: "[sac-multilanguagemenu]", inputs: ["inputtemplate", "validationtemplate"] }, { type: SacMultilanguagemenuItemButtonComponent, selector: "sac-multilanguagemenubutton" }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: SacMultilanguagemenuAnchorDirective, selector: "[sacMultilanguageMenuAnchor]" }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i2.AsyncPipe }, viewProviders: [
+        { provide: ControlContainer, useExisting: SacFormDirective },
+    ] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacMultilanguageInputAreaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sac-multilanguageinputarea', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            multi: true,
+                            useExisting: SacMultilanguageInputAreaComponent,
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            multi: true,
+                            useExisting: forwardRef(() => SacMultilanguageInputAreaComponent),
+                        },
+                    ], viewProviders: [
+                        { provide: ControlContainer, useExisting: SacFormDirective },
+                    ], template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[disablelabel === false ?  'col-sm-' + labelsize : 'sr-only' ]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ? 'col-sm-' + _inputsize : 'col-sm-12']\"\r\n  >\r\n    <div\r\n      class=\"input-group input-group-sm\"\r\n      [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      placement=\"bottom-right\"\r\n      sac-multilanguagemenu\r\n      [buttontemplate]=\"menuButton\"\r\n      [inputtemplate]=\"menuInput\"\r\n      [validationtemplate]=\"validationMessage\"\r\n      #contextmenu\r\n    >\r\n      <ng-template #menuInput>\r\n        <textarea\r\n          id=\"{{name}}\"\r\n          name=\"{{name}}\"\r\n          type=\"text\"\r\n          class=\"form-control form-control-sm\"\r\n          [value]=\"LanguageValue\"\r\n          [attr.placeholder]=\"placeholder\"\r\n          (blur)=\"onTouch()\"\r\n          style=\"height: auto\"\r\n          (input)=\"SetLanguageValue($event.target.value)\"\r\n          [attr.rows]=\"rows\"\r\n          [attr.maxlength]=\"maxlength\"\r\n          [ngClass]=\"{'is-invalid': invalid && (dirty || touched) }\"\r\n          [disabled]=\"isdisabled\"\r\n        ></textarea>\r\n      </ng-template>\r\n\r\n      <ng-template #menuButton>\r\n        <button\r\n          sacMultilanguageMenuAnchor\r\n          [id]=\"name + '_dropdownitem'\"\r\n          type=\"button\"\r\n          class=\"btn dropdown-toggle\"\r\n          (click)=\"contextmenu.toggle()\"\r\n          [ngClass]=\"[IsAnyEmpty() ? 'btn-warning' : 'btn-secondary']\"\r\n        >\r\n          <img\r\n            src=\"{{SelectedIcon}}\"\r\n            class=\"align-baseline mr-1 ml-1\"\r\n            *ngIf=\"SelectedIconType === IconType.Image\"\r\n          />\r\n          <i\r\n            [ngClass]=\"SelectedIcon\"\r\n            class=\"align-baseline mr-1 ml-1\"\r\n            *ngIf=\"SelectedIconType === IconType.CssSprite\"\r\n          ></i>\r\n        </button>\r\n      </ng-template>\r\n\r\n      <ng-template #validationMessage>\r\n        <div\r\n          *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n          class=\"invalid-feedback\"\r\n        >\r\n          {{ GetErrorMessage() | async }}\r\n        </div></ng-template\r\n      >\r\n\r\n      <ng-container *ngFor=\"let sprache of Languages\">\r\n        <sac-multilanguagemenubutton\r\n          *ngIf=\"sprache.IconType === IconType.Image\"\r\n          text=\"{{sprache.Text}}\"\r\n          image=\"{{sprache.Icon}}\"\r\n          [cssclass]=\"IsEmpty(sprache) ? 'text-danger border-left border-danger': ''\"\r\n          (clicked)=\"SelectLanguage(sprache)\"\r\n        ></sac-multilanguagemenubutton>\r\n        <sac-multilanguagemenubutton\r\n          *ngIf=\"sprache.IconType === IconType.CssSprite\"\r\n          text=\"{{sprache.Text}}\"\r\n          icon=\"{{sprache.Icon}}\"\r\n          [cssclass]=\"IsEmpty(sprache) ? 'text-danger border-left border-danger': ''\"\r\n          (clicked)=\"SelectLanguage(sprache)\"\r\n        ></sac-multilanguagemenubutton>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n<div class=\"row\">\r\n  <div class=\"col text-right\"></div>\r\n</div>\r\n" }]
+        }], ctorParameters: function () { return [{ type: SacFormDirective, decorators: [{
+                    type: Host
+                }, {
+                    type: Optional
+                }] }, { type: i0.Injector }]; } });
+
+class SACBootstrap5MultilanguageModule {
+}
+SACBootstrap5MultilanguageModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5MultilanguageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SACBootstrap5MultilanguageModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5MultilanguageModule, declarations: [SacMultilanguageInputComponent,
+        SacMultilanguageInputAreaComponent,
+        SacMultilanguagemenuComponent,
+        SacMultilanguagemenuAnchorDirective,
+        SacMultilanguagemenuContainerDirective,
+        SacMultilanguagemenuItemButtonComponent], imports: [CommonModule], exports: [SacMultilanguageInputComponent, SacMultilanguageInputAreaComponent] });
+SACBootstrap5MultilanguageModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5MultilanguageModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5MultilanguageModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SacMultilanguageInputComponent,
+                        SacMultilanguageInputAreaComponent,
+                        SacMultilanguagemenuComponent,
+                        SacMultilanguagemenuAnchorDirective,
+                        SacMultilanguagemenuContainerDirective,
+                        SacMultilanguagemenuItemButtonComponent,
+                    ],
+                    imports: [CommonModule],
+                    exports: [SacMultilanguageInputComponent, SacMultilanguageInputAreaComponent],
+                }]
+        }] });
+
+/**
+ * Komponente für statischen Text in einem Formular
+ */
+class SacStaticLabelComponent extends SacStaticLabelCommon {
+    /**
+     * Konstruktor
+     * @param parent Formular
+     * @param injector Angular Dependency Injection Service
+     */
+    constructor(parent, injector) {
+        super(parent, injector);
+    }
+}
+SacStaticLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacStaticLabelComponent, deps: [{ token: SacFormDirective, host: true, optional: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+SacStaticLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacStaticLabelComponent, selector: "sac-staticlabel", providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            multi: true,
+            useExisting: SacStaticLabelComponent,
+        },
+        {
+            provide: NG_VALIDATORS,
+            multi: true,
+            useExisting: forwardRef(() => SacStaticLabelComponent),
+        },
+    ], usesInheritance: true, ngImport: i0, template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isadaptivelabel\"\r\n    id=\"{{name}}_label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[labelsize !== 12 ?  'col-sm-' + labelsize : 'sr-only']\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    [ngClass]=\"[disablelabel === false ? 'col-sm-' + _inputsize : 'col-sm-12']\"\r\n  >\r\n    <div class=\"form-control-plaintext\" [innerHTML]=\"value\"></div>\r\n    <label\r\n      for=\"{{name}}\"\r\n      class=\"col-left control-label\"\r\n      *ngIf=\"isadaptivelabel && !disablelabel\"\r\n      >{{label}}</label\r\n    >\r\n  </div>\r\n</div>\r\n", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacStaticLabelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sac-staticlabel', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            multi: true,
+                            useExisting: SacStaticLabelComponent,
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            multi: true,
+                            useExisting: forwardRef(() => SacStaticLabelComponent),
+                        },
+                    ], template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isadaptivelabel\"\r\n    id=\"{{name}}_label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[labelsize !== 12 ?  'col-sm-' + labelsize : 'sr-only']\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    [ngClass]=\"[disablelabel === false ? 'col-sm-' + _inputsize : 'col-sm-12']\"\r\n  >\r\n    <div class=\"form-control-plaintext\" [innerHTML]=\"value\"></div>\r\n    <label\r\n      for=\"{{name}}\"\r\n      class=\"col-left control-label\"\r\n      *ngIf=\"isadaptivelabel && !disablelabel\"\r\n      >{{label}}</label\r\n    >\r\n  </div>\r\n</div>\r\n" }]
+        }], ctorParameters: function () { return [{ type: SacFormDirective, decorators: [{
+                    type: Host
+                }, {
+                    type: Optional
+                }] }, { type: i0.Injector }]; } });
+
+/**
+ * Component für einbindung eines beliebigen Controls in die Form Struktur
+ *
+ * @example
+ *  <ngStaticFormContainer name='myformcontainer' label="My Custom Form Control" [isrequired]='false'>
+ *      <input type="range" class="form-control form-control-sm" />
+ *  </ngStaticFormContainer>
+ *
+ * @example
+ * <ngStaticFormContainer name='myformcintainer' label="My Custom Form Control" [isrequired]='false' tooltiptext="Dies ist ein Tooltip Text">
+ *     <input type="range" class="form-control form-control-sm" />
+ * </ngStaticFormContainer>
+ *
+ **/
+class SacStaticFormContainerComponent extends SacStaticFormContainerCommon {
+    /**
+     * Konsturktor
+     * @param parent Parent SacFormular Instanz
+     * @param injector Injector Instanz
+     */
+    constructor(parent, injector) {
+        super(parent, injector);
+    }
+}
+SacStaticFormContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacStaticFormContainerComponent, deps: [{ token: SacFormDirective, host: true, optional: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+SacStaticFormContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacStaticFormContainerComponent, selector: "sac-staticformcontainer", providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            multi: true,
+            useExisting: SacStaticFormContainerComponent,
+        },
+        {
+            provide: NG_VALIDATORS,
+            multi: true,
+            useExisting: forwardRef(() => SacStaticFormContainerComponent),
+        },
+    ], usesInheritance: true, ngImport: i0, template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isadaptivelabel\"\r\n    id=\"{{name}}_label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[labelsize !== 12 ?  'col-sm-' + labelsize : 'sr-only']\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    [ngClass]=\"[disablelabel === false ? 'col-sm-' + _inputsize : 'col-sm-12']\"\r\n  >\r\n    <ng-content></ng-content>\r\n    <label\r\n      for=\"{{name}}\"\r\n      class=\"form-label-adaptive form-label-fixed\"\r\n      [ngClass]=\"{ 'required': isrequired }\"\r\n      *ngIf=\"isadaptivelabel && !disablelabel\"\r\n      >{{label}}</label\r\n    >\r\n    <div\r\n      class=\"invalid-feedback\"\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "async": i2.AsyncPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacStaticFormContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sac-staticformcontainer', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            multi: true,
+                            useExisting: SacStaticFormContainerComponent,
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            multi: true,
+                            useExisting: forwardRef(() => SacStaticFormContainerComponent),
+                        },
+                    ], template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isadaptivelabel\"\r\n    id=\"{{name}}_label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[labelsize !== 12 ?  'col-sm-' + labelsize : 'sr-only']\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    [ngClass]=\"[disablelabel === false ? 'col-sm-' + _inputsize : 'col-sm-12']\"\r\n  >\r\n    <ng-content></ng-content>\r\n    <label\r\n      for=\"{{name}}\"\r\n      class=\"form-label-adaptive form-label-fixed\"\r\n      [ngClass]=\"{ 'required': isrequired }\"\r\n      *ngIf=\"isadaptivelabel && !disablelabel\"\r\n      >{{label}}</label\r\n    >\r\n    <div\r\n      class=\"invalid-feedback\"\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+        }], ctorParameters: function () { return [{ type: SacFormDirective, decorators: [{
+                    type: Host
+                }, {
+                    type: Optional
+                }] }, { type: i0.Injector }]; } });
+
+class SACBootstrap5StaticLabelModule {
+}
+SACBootstrap5StaticLabelModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5StaticLabelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SACBootstrap5StaticLabelModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5StaticLabelModule, declarations: [SacStaticLabelComponent, SacStaticFormContainerComponent], imports: [CommonModule], exports: [SacStaticLabelComponent, SacStaticFormContainerComponent] });
+SACBootstrap5StaticLabelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5StaticLabelModule, imports: [[
+            CommonModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5StaticLabelModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SacStaticLabelComponent, SacStaticFormContainerComponent],
+                    imports: [
+                        CommonModule
+                    ],
+                    exports: [SacStaticLabelComponent, SacStaticFormContainerComponent]
+                }]
+        }] });
+
+/**
+ * Tab Item Komponente
+ */
+class SacTabItemComponent extends SacTabItemCommon {
+}
+SacTabItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacTabItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+SacTabItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacTabItemComponent, selector: "sac-tabitem", usesInheritance: true, ngImport: i0, template: "<div [id]=\"id\" [hidden]=\"unloadwhenhidden === false && active === false\" *ngIf=\"(unloadwhenhidden === true && active === true) || unloadwhenhidden === false\" class=\"tab-pane\">\r\n  <ng-template [ngTemplateOutlet]=\"templateRef\"></ng-template>\r\n</div>\r\n", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacTabItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sac-tabitem', template: "<div [id]=\"id\" [hidden]=\"unloadwhenhidden === false && active === false\" *ngIf=\"(unloadwhenhidden === true && active === true) || unloadwhenhidden === false\" class=\"tab-pane\">\r\n  <ng-template [ngTemplateOutlet]=\"templateRef\"></ng-template>\r\n</div>\r\n" }]
+        }] });
+
+/**
+ * Komponente für Tabs
+ */
+class SacTabComponent extends SacTabCommon {
+    /**
+     * Gibt die TabItems zurück
+     * @returns Array von TabItems
+     */
+    tabItems() {
+        return this._tabItems.toArray();
+    }
+}
+SacTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacTabComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+SacTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacTabComponent, selector: "sac-tab", queries: [{ propertyName: "_tabItems", predicate: SacTabItemComponent }], usesInheritance: true, ngImport: i0, template: "<!-- Nav tabs -->\r\n<ul class=\"nav nav-tabs\" role=\"tablist\">\r\n  <li class=\"nav-item\" *ngFor=\"let item of _tabItems\">\r\n    <a\r\n      role=\"tab\"\r\n      class=\"nav-link\"\r\n      data-toggle=\"tab\"\r\n      [ngClass]=\"{ 'active': item.active, 'disabled': item.disabled }\"\r\n      (click)=\"selectTab(item)\"\r\n      [ngStyle]=\"{'cursor': item.disabled ? 'not-allowed' : 'pointer'}\"\r\n      >{{item.label}}</a\r\n    >\r\n  </li>\r\n</ul>\r\n\r\n<!-- Tab panes -->\r\n<div class=\"tab-content pl-3 pt-2\">\r\n  <ng-content></ng-content>\r\n</div>\r\n", directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacTabComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sac-tab', template: "<!-- Nav tabs -->\r\n<ul class=\"nav nav-tabs\" role=\"tablist\">\r\n  <li class=\"nav-item\" *ngFor=\"let item of _tabItems\">\r\n    <a\r\n      role=\"tab\"\r\n      class=\"nav-link\"\r\n      data-toggle=\"tab\"\r\n      [ngClass]=\"{ 'active': item.active, 'disabled': item.disabled }\"\r\n      (click)=\"selectTab(item)\"\r\n      [ngStyle]=\"{'cursor': item.disabled ? 'not-allowed' : 'pointer'}\"\r\n      >{{item.label}}</a\r\n    >\r\n  </li>\r\n</ul>\r\n\r\n<!-- Tab panes -->\r\n<div class=\"tab-content pl-3 pt-2\">\r\n  <ng-content></ng-content>\r\n</div>\r\n" }]
+        }], propDecorators: { _tabItems: [{
+                type: ContentChildren,
+                args: [SacTabItemComponent]
+            }] } });
+
+class SACBootstrap5TabsModule {
+}
+SACBootstrap5TabsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5TabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SACBootstrap5TabsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5TabsModule, declarations: [SacTabComponent, SacTabItemComponent], imports: [CommonModule], exports: [SacTabComponent, SacTabItemComponent] });
+SACBootstrap5TabsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5TabsModule, imports: [[
+            CommonModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5TabsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SacTabComponent, SacTabItemComponent],
+                    imports: [
+                        CommonModule
+                    ],
+                    exports: [SacTabComponent, SacTabItemComponent]
+                }]
+        }] });
+
+/**
+ * TinyMCE Komponente
+ */
+class SacTinyMceComponent extends SacTinyMceCommon {
+    /**
+     * Konstruktor
+     * @param parent Formular
+     * @param injector Angular Dependency Injection Service
+     * @param ngZone ngZone
+     */
+    constructor(parent, injector, ngZone) {
+        super(parent, injector, ngZone);
+    }
+    /**
+     * overwrite tinymce defaults
+     * @returns boostrap4 has no overwrites
+     */
+    overwriteDefaultSettings() {
+        return {};
+    }
+}
+SacTinyMceComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacTinyMceComponent, deps: [{ token: SacFormDirective, host: true, optional: true }, { token: i0.Injector }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+SacTinyMceComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacTinyMceComponent, selector: "sac-tinymce", providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            multi: true,
+            useExisting: SacTinyMceComponent,
+        },
+        {
+            provide: NG_VALIDATORS,
+            useExisting: forwardRef(() => SacTinyMceComponent),
+            multi: true,
+        },
+    ], usesInheritance: true, ngImport: i0, template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <div\r\n    class=\"col\"\r\n    [ngClass]=\"[disablelabel === false ?  'col-md-' + labelsize : 'sr-only' ]\"\r\n  >\r\n    <label for=\"{{name}}\" class=\"form-control-label col-form-label-sm\"\r\n      >{{label}}</label\r\n    >\r\n  </div>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ? 'col-md-' + _inputsize : 'col-md-12']\"\r\n  >\r\n    <editor\r\n      [id]=\"name + '_tinymce'\"\r\n      [init]=\"_config\"\r\n      [initialValue]=\"value\"\r\n      ngModel\r\n      [ngModelOptions]=\"{standalone: true}\"\r\n      (ngModelChange)=\"setValue($event)\"\r\n      (onSaveContent)=\"save($event.event.content)\"\r\n      [disabled]=\"disabled\"\r\n      [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    ></editor>\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<sac-dialog\r\n  *ngIf=\"selectdialogvisible\"\r\n  [allowesc]=\"false\"\r\n  [backdrop]=\"true\"\r\n  [(isvisible)]=\"selectdialogvisible\"\r\n  title=\"{{ lngResourceService.GetString('TINYMCE_FILESELECT_DIALOGTITLE') | async }}\"\r\n  size=\"large\"\r\n  height=\"500px\"\r\n>\r\n  <ng-container dialogbody>\r\n    <sac-filebrowser\r\n      [apiurl]=\"filebrowserapiurl\"\r\n      (file)=\"selectDialogSettings.value = $event\"\r\n      [allowfoldercreate]=\"allowfoldercreate\"\r\n      [allowfolderrename]=\"allowfolderrename\"\r\n      [allowfolderdelete]=\"allowfolderdelete\"\r\n      [allowfileupload]=\"allowfileupload\"\r\n      [allowfilerename]=\"allowfilerename\"\r\n      [allowfiledelete]=\"allowfiledelete\"\r\n      [selectedfile]=\"selectDialogSettings.value\"\r\n      [allowedtypes]=\"selectDialogSettings.allowedtypes\"\r\n    ></sac-filebrowser>\r\n  </ng-container>\r\n  <ng-container dialogfooter>\r\n    <sac-button\r\n      role=\"primary\"\r\n      [name]=\"name + '_modalOk'\"\r\n      text=\"{{ lngResourceService.GetString('TINYMCE_FILESELECT_OK') | async }}\"\r\n      (clicked)=\"setSelectDialogResult()\"\r\n    ></sac-button>\r\n    <sac-button\r\n      [name]=\"name + '_modalClose'\"\r\n      text=\"{{ lngResourceService.GetString('TINYMCE_FILESELECT_CANCEL') | async }}\"\r\n      (clicked)=\"closeSelectDialog()\"\r\n    ></sac-button>\r\n  </ng-container>\r\n</sac-dialog>\r\n", styles: [".is-invalid{border:1px solid var(--bs-form-invalid-border-color)}\n"], components: [{ type: i2$1.EditorComponent, selector: "editor", inputs: ["cloudChannel", "apiKey", "init", "id", "initialValue", "outputFormat", "inline", "tagName", "plugins", "toolbar", "modelEvents", "allowedEvents", "ignoreEvents", "disabled"] }, { type: SacDialogComponent, selector: "sac-dialog" }, { type: SacBrowserComponent, selector: "sac-filebrowser" }, { type: SacButtonComponent, selector: "sac-button" }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i9.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i2.AsyncPipe }, viewProviders: [{ provide: ControlContainer, useExisting: SacFormDirective }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacTinyMceComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sac-tinymce', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            multi: true,
+                            useExisting: SacTinyMceComponent,
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: forwardRef(() => SacTinyMceComponent),
+                            multi: true,
+                        },
+                    ], viewProviders: [{ provide: ControlContainer, useExisting: SacFormDirective }], template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <div\r\n    class=\"col\"\r\n    [ngClass]=\"[disablelabel === false ?  'col-md-' + labelsize : 'sr-only' ]\"\r\n  >\r\n    <label for=\"{{name}}\" class=\"form-control-label col-form-label-sm\"\r\n      >{{label}}</label\r\n    >\r\n  </div>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ? 'col-md-' + _inputsize : 'col-md-12']\"\r\n  >\r\n    <editor\r\n      [id]=\"name + '_tinymce'\"\r\n      [init]=\"_config\"\r\n      [initialValue]=\"value\"\r\n      ngModel\r\n      [ngModelOptions]=\"{standalone: true}\"\r\n      (ngModelChange)=\"setValue($event)\"\r\n      (onSaveContent)=\"save($event.event.content)\"\r\n      [disabled]=\"disabled\"\r\n      [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    ></editor>\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<sac-dialog\r\n  *ngIf=\"selectdialogvisible\"\r\n  [allowesc]=\"false\"\r\n  [backdrop]=\"true\"\r\n  [(isvisible)]=\"selectdialogvisible\"\r\n  title=\"{{ lngResourceService.GetString('TINYMCE_FILESELECT_DIALOGTITLE') | async }}\"\r\n  size=\"large\"\r\n  height=\"500px\"\r\n>\r\n  <ng-container dialogbody>\r\n    <sac-filebrowser\r\n      [apiurl]=\"filebrowserapiurl\"\r\n      (file)=\"selectDialogSettings.value = $event\"\r\n      [allowfoldercreate]=\"allowfoldercreate\"\r\n      [allowfolderrename]=\"allowfolderrename\"\r\n      [allowfolderdelete]=\"allowfolderdelete\"\r\n      [allowfileupload]=\"allowfileupload\"\r\n      [allowfilerename]=\"allowfilerename\"\r\n      [allowfiledelete]=\"allowfiledelete\"\r\n      [selectedfile]=\"selectDialogSettings.value\"\r\n      [allowedtypes]=\"selectDialogSettings.allowedtypes\"\r\n    ></sac-filebrowser>\r\n  </ng-container>\r\n  <ng-container dialogfooter>\r\n    <sac-button\r\n      role=\"primary\"\r\n      [name]=\"name + '_modalOk'\"\r\n      text=\"{{ lngResourceService.GetString('TINYMCE_FILESELECT_OK') | async }}\"\r\n      (clicked)=\"setSelectDialogResult()\"\r\n    ></sac-button>\r\n    <sac-button\r\n      [name]=\"name + '_modalClose'\"\r\n      text=\"{{ lngResourceService.GetString('TINYMCE_FILESELECT_CANCEL') | async }}\"\r\n      (clicked)=\"closeSelectDialog()\"\r\n    ></sac-button>\r\n  </ng-container>\r\n</sac-dialog>\r\n", styles: [".is-invalid{border:1px solid var(--bs-form-invalid-border-color)}\n"] }]
+        }], ctorParameters: function () { return [{ type: SacFormDirective, decorators: [{
+                    type: Host
+                }, {
+                    type: Optional
+                }] }, { type: i0.Injector }, { type: i0.NgZone }]; } });
+
+class SACBootstrap5TinyMceModule {
+}
+SACBootstrap5TinyMceModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5TinyMceModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SACBootstrap5TinyMceModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5TinyMceModule, declarations: [SacTinyMceComponent], imports: [CommonModule,
+        FormsModule,
+        EditorModule,
+        SACBootstrap5ButtonModule,
+        SACBootstrap5DialogModule,
+        SACBootstrap5BrowserModule], exports: [SacTinyMceComponent] });
+SACBootstrap5TinyMceModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5TinyMceModule, imports: [[
+            CommonModule,
+            FormsModule,
+            EditorModule,
+            SACBootstrap5ButtonModule,
+            SACBootstrap5DialogModule,
+            SACBootstrap5BrowserModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5TinyMceModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SacTinyMceComponent],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        EditorModule,
+                        SACBootstrap5ButtonModule,
+                        SACBootstrap5DialogModule,
+                        SACBootstrap5BrowserModule,
+                    ],
+                    exports: [SacTinyMceComponent],
+                }]
+        }] });
+
+/**
+ * Validation Summary Kompontente
+ */
+class SacValidationSummaryComponent extends SacValidationSummaryCommon {
+    /**
+     * Konstruktor
+     * @param parent Formular
+     * @param injector Angular Dependency Injection Service
+     */
+    constructor(parent, injector) {
+        super(parent, injector);
+    }
+}
+SacValidationSummaryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacValidationSummaryComponent, deps: [{ token: SacFormDirective, host: true, optional: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+SacValidationSummaryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacValidationSummaryComponent, selector: "sac-validationsummary", providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            multi: true,
+            useExisting: SacValidationSummaryComponent,
+        },
+    ], usesInheritance: true, ngImport: i0, template: "<div class=\"alert alert-danger\" role=\"alert\" *ngIf=\"hasErrors\">\r\n  <ul class=\"mb-0\">\r\n    <li *ngFor=\"let error of formErrors\">{{error | async}}</li>\r\n  </ul>\r\n</div>\r\n", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i2.AsyncPipe }, viewProviders: [
+        { provide: ControlContainer, useExisting: SacFormDirective },
+    ] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacValidationSummaryComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sac-validationsummary', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            multi: true,
+                            useExisting: SacValidationSummaryComponent,
+                        },
+                    ], viewProviders: [
+                        { provide: ControlContainer, useExisting: SacFormDirective },
+                    ], template: "<div class=\"alert alert-danger\" role=\"alert\" *ngIf=\"hasErrors\">\r\n  <ul class=\"mb-0\">\r\n    <li *ngFor=\"let error of formErrors\">{{error | async}}</li>\r\n  </ul>\r\n</div>\r\n" }]
+        }], ctorParameters: function () { return [{ type: SacFormDirective, decorators: [{
+                    type: Host
+                }, {
+                    type: Optional
+                }] }, { type: i0.Injector }]; } });
+
+class SACBootstrap5ValidationSummaryModule {
+}
+SACBootstrap5ValidationSummaryModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5ValidationSummaryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SACBootstrap5ValidationSummaryModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5ValidationSummaryModule, declarations: [SacValidationSummaryComponent], imports: [CommonModule], exports: [SacValidationSummaryComponent] });
+SACBootstrap5ValidationSummaryModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5ValidationSummaryModule, imports: [[
+            CommonModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5ValidationSummaryModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SacValidationSummaryComponent],
+                    imports: [
+                        CommonModule
+                    ],
+                    exports: [SacValidationSummaryComponent]
+                }]
+        }] });
+
+/**
+ * Wizard Komponente Item
+ */
+class SacWizardItemComponent extends SacWizardItemCommon {
+}
+SacWizardItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacWizardItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+SacWizardItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacWizardItemComponent, selector: "sac-wizarditem", usesInheritance: true, ngImport: i0, template: "" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacWizardItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sac-wizarditem', template: "" }]
+        }] });
+
+/**
+ * Wizard Komponente
+ */
+class SacWizardComponent extends SacWizardCommon {
+    /**
+     * Gibt die Wizard Items zurück
+     * @returns Collection von WizardItems
+     */
+    wizardItems() {
+        return this._wizardItems;
+    }
+}
+SacWizardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacWizardComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+SacWizardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacWizardComponent, selector: "sac-wizard", providers: [
+        { provide: NG_VALUE_ACCESSOR, multi: true, useExisting: SacWizardComponent },
+    ], queries: [{ propertyName: "_wizardItems", predicate: SacWizardItemComponent }], usesInheritance: true, ngImport: i0, template: "<ul class=\"nav nav-wizard\" role=\"tablist\">\r\n  <li *ngFor=\"let item of _wizardItems\" class=\"nav-item\" [ngClass]=\"{ 'active': item._active, 'disabled': item._disabled, 'success': item._iscomplete }\"\r\n      [ngStyle]=\"{'cursor': item._disabled ? 'not-allowed' : 'pointer'}\">\r\n    <a role=\"tab\" (click)=\"selectStep(item)\">\r\n      <div class=\"circle\">\r\n        <span class=\"step\"></span>\r\n      </div>\r\n    </a>\r\n    <div class=\"info\">\r\n      <a (click)=\"selectStep(item)\">{{item._label}}</a>\r\n    </div>\r\n  </li>\r\n</ul>\r\n", directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacWizardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sac-wizard', providers: [
+                        { provide: NG_VALUE_ACCESSOR, multi: true, useExisting: SacWizardComponent },
+                    ], template: "<ul class=\"nav nav-wizard\" role=\"tablist\">\r\n  <li *ngFor=\"let item of _wizardItems\" class=\"nav-item\" [ngClass]=\"{ 'active': item._active, 'disabled': item._disabled, 'success': item._iscomplete }\"\r\n      [ngStyle]=\"{'cursor': item._disabled ? 'not-allowed' : 'pointer'}\">\r\n    <a role=\"tab\" (click)=\"selectStep(item)\">\r\n      <div class=\"circle\">\r\n        <span class=\"step\"></span>\r\n      </div>\r\n    </a>\r\n    <div class=\"info\">\r\n      <a (click)=\"selectStep(item)\">{{item._label}}</a>\r\n    </div>\r\n  </li>\r\n</ul>\r\n" }]
+        }], propDecorators: { _wizardItems: [{
+                type: ContentChildren,
+                args: [SacWizardItemComponent]
+            }] } });
+
+class SACBootstrap5WizardModule {
+}
+SACBootstrap5WizardModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5WizardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SACBootstrap5WizardModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5WizardModule, declarations: [SacWizardComponent, SacWizardItemComponent], imports: [CommonModule], exports: [SacWizardComponent, SacWizardItemComponent] });
+SACBootstrap5WizardModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5WizardModule, imports: [[
+            CommonModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5WizardModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SacWizardComponent, SacWizardItemComponent],
+                    imports: [
+                        CommonModule
+                    ],
+                    exports: [SacWizardComponent, SacWizardItemComponent]
+                }]
+        }] });
+
+/*
+ * Public API Surface of sac-bootstrap5
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NGFORM_FACTORY, SACBootstrap5BrowserModule, SACBootstrap5ButtonModule, SACBootstrap5CheckboxModule, SACBootstrap5ConfirmModule, SACBootstrap5ContextmenuModule, SACBootstrap5DateTimeModule, SACBootstrap5DialogModule, SACBootstrap5DropdownModule, SACBootstrap5FormModule, SACBootstrap5GridModule, SACBootstrap5InputModule, SACBootstrap5ListModule, SACBootstrap5MultilanguageModule, SACBootstrap5StaticLabelModule, SACBootstrap5TabsModule, SACBootstrap5TinyMceModule, SACBootstrap5UploadModule, SACBootstrap5ValidationSummaryModule, SACBootstrap5WizardModule, SACFORM_FACTORY, SacBrowserComponent, SacButtonComponent, SacCheckboxComponent, SacConfirmComponent, SacContextmenuAnchorDirective, SacContextmenuComponent, SacContextmenuItemButtonComponent, SacContextmenuItemSplitterComponent, SacDateComponent, SacDateSelectorComponent, SacDateTimeComponent, SacDialogComponent, SacDropdownComponent, SacDropdownOptionDirective, SacDropzoneMultipleComponent, SacDropzoneSingleComponent, SacFormDirective, SacGridButtonComponent, SacGridColumnActionComponent, SacGridColumnComponent, SacGridComponent, SacGridImageComponent, SacInheritFormDirective, SacInputAreaComponent, SacInputComponent, SacInputCurrencyComponent, SacInputDecimalComponent, SacInputEmailComponent, SacInputIntegerComponent, SacInputPasswordComponent, SacInputSearchComponent, SacListboxComponent, SacListboxOptionDirective, SacMultilanguageInputAreaComponent, SacMultilanguageInputComponent, SacPagingComponent, SacRadiobuttonComponent, SacRadiobuttonsComponent, SacStaticFormContainerComponent, SacStaticLabelComponent, SacTabComponent, SacTabItemComponent, SacTimeComponent, SacTinyMceComponent, SacUploadComponent, SacUploadMultipleComponent, SacValidationSummaryComponent, SacWizardComponent, SacWizardItemComponent, ServiceConfirm };
+//# sourceMappingURL=simpleangularcontrols-sac-bootstrap5.mjs.map