@simpleangularcontrols/sac-bootstrap5 16.0.0-rc.2 → 16.0.0-rc.21

package/fesm2022/simpleangularcontrols-sac-bootstrap5.mjs

@@ -1,13 +1,14 @@
 import * as i0 from '@angular/core';
-import { Component, ComponentFactoryResolver, Injectable, Inject, forwardRef, Directive, HostBinding, Host, Optional, ViewChild, NgModule, SkipSelf, TemplateRef, ContentChild, Input, ContentChildren } from '@angular/core';
+import { Component, ComponentFactoryResolver, Injectable, Inject, forwardRef, Directive, Pipe, Host, Optional, ViewChild, NgModule, HostBinding, SkipSelf, TemplateRef, ContentChild, Input, ContentChildren } from '@angular/core';
+import * as i1$2 from '@angular/common';
 import { NgIf, NgClass, NgFor, DOCUMENT, NgTemplateOutlet, AsyncPipe, NgForOf, CommonModule, NgStyle } from '@angular/common';
-import * as i1$2 from '@angular/common/http';
+import * as i1 from '@angular/common/http';
 import { HttpClientModule } from '@angular/common/http';
 import * as i1$1 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule, ControlContainer, NgForm } from '@angular/forms';
-import * as i1 from '@simpleangularcontrols/sac-common';
-import { SacButtonCommon, SacDialogCommon, SacConfirmCommon, ServiceConfirmCommon, isDefined, SacConfirmButton, SacContextmenuAnchorCommon, SacContextMenuContrainerCommon, SacContextmenuCommon, SacContextmenuItemButtonCommon, SacContextmenuItemCommon, SacFormCommon, SacDropzoneMultipleCommon, 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, SacDropzoneSingleCommon, SacUploadSingleCommon, SacUploadMultipleCommon, SacValidationSummaryCommon, SacWizardItemCommon, SacWizardCommon } from '@simpleangularcontrols/sac-common';
-import { Observable, forkJoin } from 'rxjs';
+import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule, NgForm, ControlContainer } from '@angular/forms';
+import { SacButtonCommon, SacTestingAttributePipe, SacDialogCommon, SacConfirmCommon, ServiceConfirmCommon, isDefined, SacConfirmButton, SacContextmenuAnchorCommon, SacContextMenuContrainerCommon, SacContextmenuCommon, SacContextmenuItemButtonCommon, SacContextmenuItemCommon, ControlHeight, SacTooltipCommon, SacFormLayoutCommon, SacDropzoneMultipleCommon, SacFileBrowserCommon, SacCheckboxCommon, SacRadiobuttonsCommon, SacRadiobuttonCommon, SacDateSelectorCommon, SacDateCommon, SacDateTimeCommon, SacTimeCommon, SacFormCommon, SacPagingCommon, SacGridCommon, SacGridButtonCommon, SacGridColumnCommon, SacGridColumnBaseCommon, SacGridColumnActionCommon, SacGridImageCommon, SacInputCommon, SacInputEmailCommon, SacInputAreaCommon, SacInputCurrencyCommon, SacInputDecimalCommon, SacInputIntegerCommon, SacInputPasswordCommon, SacInputSearchCommon, SacDropdownOptionCommon, SacDropdownCommon, SacListboxOptionCommon, SacListboxCommon, SacMultilanguageInputCommon, IconType, SacMultilanguageInputAreaCommon, SacStaticLabelCommon, SacStaticFormContainerCommon, SacTabItemCommon, SacTabCommon, SacTinyMceCommon, SacDropzoneSingleCommon, SacUploadSingleCommon, SacUploadMultipleCommon, SacTreeviewCommon, SacValidationSummaryCommon, SacWizardItemCommon, SacWizardCommon } from '@simpleangularcontrols/sac-common';
+import { forkJoin, Observable } from 'rxjs';
+import { take } from 'rxjs/operators';
 import { IMaskDirective, IMaskModule } from 'angular-imask';
 import * as moment_ from 'moment';
 import { EditorComponent } from '@tinymce/tinymce-angular';
@@ -19,17 +20,19 @@ import { EditorComponent } from '@tinymce/tinymce-angular';
  */
 class SacButtonComponent extends SacButtonCommon {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SacButtonComponent, isStandalone: true, 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", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SacButtonComponent, isStandalone: true, selector: "sac-button", usesInheritance: true, ngImport: i0, template: "<button\n    [id]=\"name\"\n    type=\"button\"\n    class=\"btn d-flex justify-content-center align-items-center\"\n    [attr.disabled]=\"_isdisabled || isloading ? 'disabled' : null\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\"\n    (click)=\"buttonClick()\"\n    [class.btn-primary]=\"role === 'primary'\"\n    [class.btn-secondary]=\"role === 'secondary' || role === 'default'\"\n    [class.btn-success]=\"role === 'success'\"\n    [class.btn-danger]=\"role === 'danger'\"\n    [class.btn-warning]=\"role === 'warning'\"\n    [class.btn-info]=\"role === 'info'\"\n    [class.btn-link]=\"role === 'link'\">\n    <span\n        *ngIf=\"isloading\"\n        class=\"spinner-border spinner-border-sm me-2\"\n        role=\"status\"\n        aria-hidden=\"true\"></span>\n    <i\n        *ngIf=\"!isloading && icon !== ''\"\n        [ngClass]=\"icon\"\n        [class.me-2]=\"text\"></i\n    >{{ text }}\n</button>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SacTestingAttributePipe, name: "testingattribute" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sac-button', standalone: true, imports: [NgIf, NgClass], 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" }]
+            args: [{ selector: 'sac-button', standalone: true, imports: [NgIf, NgClass, SacTestingAttributePipe], template: "<button\n    [id]=\"name\"\n    type=\"button\"\n    class=\"btn d-flex justify-content-center align-items-center\"\n    [attr.disabled]=\"_isdisabled || isloading ? 'disabled' : null\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\"\n    (click)=\"buttonClick()\"\n    [class.btn-primary]=\"role === 'primary'\"\n    [class.btn-secondary]=\"role === 'secondary' || role === 'default'\"\n    [class.btn-success]=\"role === 'success'\"\n    [class.btn-danger]=\"role === 'danger'\"\n    [class.btn-warning]=\"role === 'warning'\"\n    [class.btn-info]=\"role === 'info'\"\n    [class.btn-link]=\"role === 'link'\">\n    <span\n        *ngIf=\"isloading\"\n        class=\"spinner-border spinner-border-sm me-2\"\n        role=\"status\"\n        aria-hidden=\"true\"></span>\n    <i\n        *ngIf=\"!isloading && icon !== ''\"\n        [ngClass]=\"icon\"\n        [class.me-2]=\"text\"></i\n    >{{ text }}\n</button>\n" }]
         }] });
 
 /**
  * Dialog Komponente
  */
 class SacDialogComponent extends SacDialogCommon {
+    // #endregion Properties
+    // #region Constructors
     /**
      * Konstruktor
      * @param el DOM Element Referenz
@@ -39,13 +42,8 @@ class SacDialogComponent extends SacDialogCommon {
         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);
-    }
+    // #endregion Constructors
+    // #region Public Methods
     /**
      * Event wenn Element entfernt wird
      */
@@ -56,12 +54,19 @@ class SacDialogComponent extends SacDialogCommon {
         }
         super.ngOnDestroy();
     }
+    /**
+     * Event wenn Komponente initialisiert wird
+     */
+    ngOnInit() {
+        // Element an Body für korrektes Styling unter Bootstrap 3 verschieben
+        document.body.appendChild(this.element);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacDialogComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SacDialogComponent, isStandalone: true, 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", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SacDialogComponent, isStandalone: true, selector: "sac-dialog", usesInheritance: true, ngImport: i0, template: "<div\n    #dialog\n    class=\"modal show\"\n    style=\"display: block\"\n    tabindex=\"-1\"\n    role=\"dialog\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\"\n    *ngIf=\"_show\">\n    <div\n        class=\"modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable\"\n        role=\"document\"\n        [class.modal-xl]=\"_size === 'extralarge'\"\n        [class.modal-lg]=\"_size === 'large'\"\n        [class.modal-sm]=\"_size === 'small'\">\n        <div class=\"modal-content\">\n            <div class=\"modal-header\">\n                <h5 class=\"modal-title\">{{ title }}</h5>\n                <button\n                    type=\"button\"\n                    class=\"btn-close\"\n                    data-dismiss=\"modal\"\n                    aria-label=\"Close\"\n                    (click)=\"hide()\"\n                    *ngIf=\"closebutton\"></button>\n            </div>\n            <div class=\"modal-body\">\n                <ng-content select=\"[dialogbody]\"></ng-content>\n            </div>\n            <div class=\"modal-footer\">\n                <ng-content select=\"[dialogfooter]\"></ng-content>\n            </div>\n        </div>\n        <!-- /.modal-content -->\n    </div>\n    <!-- /.modal-dialog -->\n</div>\n<!-- /.modal -->\n<div\n    class=\"modal-backdrop show\"\n    *ngIf=\"_show && backdrop\"\n    #backdrop></div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: SacTestingAttributePipe, name: "testingattribute" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sac-dialog', standalone: true, imports: [NgIf], 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" }]
+            args: [{ selector: 'sac-dialog', standalone: true, imports: [NgIf, SacTestingAttributePipe], template: "<div\n    #dialog\n    class=\"modal show\"\n    style=\"display: block\"\n    tabindex=\"-1\"\n    role=\"dialog\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\"\n    *ngIf=\"_show\">\n    <div\n        class=\"modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable\"\n        role=\"document\"\n        [class.modal-xl]=\"_size === 'extralarge'\"\n        [class.modal-lg]=\"_size === 'large'\"\n        [class.modal-sm]=\"_size === 'small'\">\n        <div class=\"modal-content\">\n            <div class=\"modal-header\">\n                <h5 class=\"modal-title\">{{ title }}</h5>\n                <button\n                    type=\"button\"\n                    class=\"btn-close\"\n                    data-dismiss=\"modal\"\n                    aria-label=\"Close\"\n                    (click)=\"hide()\"\n                    *ngIf=\"closebutton\"></button>\n            </div>\n            <div class=\"modal-body\">\n                <ng-content select=\"[dialogbody]\"></ng-content>\n            </div>\n            <div class=\"modal-footer\">\n                <ng-content select=\"[dialogfooter]\"></ng-content>\n            </div>\n        </div>\n        <!-- /.modal-content -->\n    </div>\n    <!-- /.modal-dialog -->\n</div>\n<!-- /.modal -->\n<div\n    class=\"modal-backdrop show\"\n    *ngIf=\"_show && backdrop\"\n    #backdrop></div>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
 
 /**
@@ -69,7 +74,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  */
 class SacConfirmComponent extends SacConfirmCommon {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacConfirmComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SacConfirmComponent, isStandalone: true, 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", dependencies: [{ kind: "component", type: SacDialogComponent, selector: "sac-dialog" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SacButtonComponent, selector: "sac-button" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SacConfirmComponent, isStandalone: true, selector: "sac-confirm", usesInheritance: true, ngImport: i0, template: "<sac-dialog\n  name=\"confirmDialog\"\n  [(isvisible)]=\"isvisible\"\n  [title]=\"title\"\n  [allowesc]=\"false\"\n  [closebutton]=\"false\"\n  dialogsize=\"small\"\n>\n  <div dialogbody>\n    <div class=\"d-flex align-items-center\">\n      <div class=\"me-2\">\n        <img\n          [attr.src]=\"image\"\n          class=\"align-self-center mr-3\"\n          *ngIf=\"hasImage()\"\n        />\n      </div>\n      <div class=\"flex-grow-1\">{{message}}</div>\n    </div>\n  </div>\n  <ng-container dialogfooter>\n    <ng-container *ngFor=\"let button of buttons\">\n      <sac-button\n        [name]=\"button.key\"\n        [text]=\"button.text\"\n        [role]=\"button.role || 'default'\"\n        (clicked)=\"confirm(button.key)\"\n      ></sac-button>\n    </ng-container>\n  </ng-container>\n</sac-dialog>\n", dependencies: [{ kind: "component", type: SacDialogComponent, selector: "sac-dialog" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SacButtonComponent, selector: "sac-button" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacConfirmComponent, decorators: [{
             type: Component,
@@ -78,7 +83,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         NgIf,
                         NgFor,
                         SacButtonComponent,
-                    ], 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" }]
+                    ], template: "<sac-dialog\n  name=\"confirmDialog\"\n  [(isvisible)]=\"isvisible\"\n  [title]=\"title\"\n  [allowesc]=\"false\"\n  [closebutton]=\"false\"\n  dialogsize=\"small\"\n>\n  <div dialogbody>\n    <div class=\"d-flex align-items-center\">\n      <div class=\"me-2\">\n        <img\n          [attr.src]=\"image\"\n          class=\"align-self-center mr-3\"\n          *ngIf=\"hasImage()\"\n        />\n      </div>\n      <div class=\"flex-grow-1\">{{message}}</div>\n    </div>\n  </div>\n  <ng-container dialogfooter>\n    <ng-container *ngFor=\"let button of buttons\">\n      <sac-button\n        [name]=\"button.key\"\n        [text]=\"button.text\"\n        [role]=\"button.role || 'default'\"\n        (clicked)=\"confirm(button.key)\"\n      ></sac-button>\n    </ng-container>\n  </ng-container>\n</sac-dialog>\n" }]
         }] });
 
 /**
@@ -96,6 +101,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * confirmService.ConfirmMessage('titel', 'frage', buttons).subscribe(action => { // Action Code });
  */
 class ServiceConfirm extends ServiceConfirmCommon {
+    // #endregion Properties
+    // #region Constructors
     /**
      * Konstruktor
      * @param componentFactoryResolver Component Factory Resolver Instanz
@@ -105,25 +112,22 @@ class ServiceConfirm extends ServiceConfirmCommon {
     constructor(componentFactoryResolver, appRef, injector) {
         super(appRef, injector);
         this.componentFactoryResolver = componentFactoryResolver;
+        // #region Properties
         /**
-         * Titel der im Dialog angezeigt werden soll.
+         * Collection von Buttons die angezeigt werden müssen.
          */
-        this.title = '';
+        this.buttons = [];
         /**
          * Message die in Dialog angezeigt werden soll.
          */
         this.message = '';
         /**
-         * Collection von Buttons die angezeigt werden müssen.
+         * Titel der im Dialog angezeigt werden soll.
          */
-        this.buttons = [];
-    }
-    /**
-     * Erzeugen einer Component Factory für einen Dialog
-     */
-    GetComponentFactory() {
-        return this.componentFactoryResolver.resolveComponentFactory(SacConfirmComponent);
+        this.title = '';
     }
+    // #endregion Constructors
+    // #region Public Methods
     /**
      * Confirm Dialog anzeigen
      * @param message Nachricht die angezeigt werden soll.
@@ -134,16 +138,30 @@ class ServiceConfirm extends ServiceConfirmCommon {
         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'));
+            forkJoin({
+                button_yes: this.localisationService.GetString(this.validationKeyService.ConfirmDefaultButtonYes),
+                button_no: this.localisationService.GetString(this.validationKeyService.ConfirmDefaultButtonNo),
+            })
+                .pipe(take(1))
+                .subscribe((texte) => {
+                this.buttons.push(new SacConfirmButton('yes', texte.button_yes, 'primary'));
+                this.buttons.push(new SacConfirmButton('no', texte.button_no));
+            });
         }
         else {
             this.buttons = buttons;
         }
         return super.Confirm();
     }
+    /**
+     * Erzeugen einer Component Factory für einen Dialog
+     */
+    GetComponentFactory() {
+        return this.componentFactoryResolver.resolveComponentFactory(SacConfirmComponent);
+    }
+    // #endregion Public Methods
+    // #region Protected Methods
     /**
      * Konfiguration des Dialogs
      * @param instance Instanz eines SacConfirm Dialogs
@@ -169,12 +187,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Anker Komponente für Context Menü. Wird zum positionieren des Context Menü in der Page benötigt.
  */
 class SacContextmenuAnchorDirective extends SacContextmenuAnchorCommon {
+    // #region Constructors
     /**
      * Konstruktor
-     * @param _elementRef HTML DOM Referenz
+     * @param elementRef HTML DOM Referenz
      */
-    constructor(_elementRef) {
-        super(_elementRef);
+    constructor(elementRef) {
+        super(elementRef);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacContextmenuAnchorDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SacContextmenuAnchorDirective, isStandalone: true, selector: "[sacContextMenuAnchor]", providers: [
@@ -202,12 +221,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Marker Komponente für Context Menü
  */
 class SacContextmenuContainerDirective extends SacContextMenuContrainerCommon {
+    // #region Constructors
     /**
      * Konstruktor
-     * @param _elementRef Referenz auf DOM Element
+     * @param elementRef Referenz auf DOM Element
      */
-    constructor(_elementRef) {
-        super(_elementRef);
+    constructor(elementRef) {
+        super(elementRef);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacContextmenuContainerDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SacContextmenuContainerDirective, isStandalone: true, selector: "[sacContextMenuContainer]", providers: [
@@ -235,149 +255,327 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Component für Contextmenü
  */
 class SacContextmenuComponent extends SacContextmenuCommon {
+    // #region Constructors
     /**
      * 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
+     * @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);
+    constructor(document, ngZone, elementRef, renderer, injector) {
+        super(document, ngZone, elementRef, renderer, injector);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacContextmenuComponent, deps: [{ token: DOCUMENT }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SacContextmenuComponent, isStandalone: true, 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", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: SacContextmenuContainerDirective, selector: "[sacContextMenuContainer]" }, { kind: "directive", type: SacContextmenuAnchorDirective, selector: "[sacContextMenuAnchor]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SacContextmenuComponent, isStandalone: true, selector: "sac-contextmenu", usesInheritance: true, ngImport: i0, template: "<div\n    class=\"dropdown\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\"\n    [ngClass]=\"cssclass\">\n    <ng-container [ngTemplateOutlet]=\"buttontemplate || defaultButtonTemplate\"></ng-container>\n\n    <ul\n        class=\"dropdown-menu dropdown-menu-end\"\n        sacContextMenuContainer\n        [class.show]=\"isopen\">\n        <ng-content></ng-content>\n    </ul>\n</div>\n\n<ng-template #defaultButtonTemplate>\n    <button\n        sacContextMenuAnchor\n        class=\"btn btn-sm btn-link text-secondary text-decoration-none\"\n        type=\"button\"\n        (click)=\"toggle()\">\n        <i [class]=\"IconContextMenu\"></i>\n    </button>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: SacContextmenuContainerDirective, selector: "[sacContextMenuContainer]" }, { kind: "directive", type: SacContextmenuAnchorDirective, selector: "[sacContextMenuAnchor]" }, { kind: "pipe", type: SacTestingAttributePipe, name: "testingattribute" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacContextmenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sac-contextmenu', providers: [
-                        {
-                            provide: SacContextmenuCommon,
-                            useExisting: forwardRef(() => SacContextmenuComponent),
-                        },
-                    ], standalone: true, imports: [
+            args: [{ selector: 'sac-contextmenu', standalone: true, imports: [
                         NgClass,
                         NgTemplateOutlet,
                         SacContextmenuContainerDirective,
                         SacContextmenuAnchorDirective,
-                    ], 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" }]
+                        SacTestingAttributePipe,
+                    ], template: "<div\n    class=\"dropdown\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\"\n    [ngClass]=\"cssclass\">\n    <ng-container [ngTemplateOutlet]=\"buttontemplate || defaultButtonTemplate\"></ng-container>\n\n    <ul\n        class=\"dropdown-menu dropdown-menu-end\"\n        sacContextMenuContainer\n        [class.show]=\"isopen\">\n        <ng-content></ng-content>\n    </ul>\n</div>\n\n<ng-template #defaultButtonTemplate>\n    <button\n        sacContextMenuAnchor\n        class=\"btn btn-sm btn-link text-secondary text-decoration-none\"\n        type=\"button\"\n        (click)=\"toggle()\">\n        <i [class]=\"IconContextMenu\"></i>\n    </button>\n</ng-template>\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ü
+ * Component for menu entry in context menu
  */
 class SacContextmenuItemButtonComponent extends SacContextmenuItemButtonCommon {
+    // #region Constructors
     /**
      * Constructor
-     * @param contextmenu Instance von Context Menü
      */
-    constructor(contextmenu) {
-        super(contextmenu);
+    constructor() {
+        super();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacContextmenuItemButtonComponent, deps: [{ token: i1.SacContextmenuCommon }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SacContextmenuItemButtonComponent, isStandalone: true, 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", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacContextmenuItemButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SacContextmenuItemButtonComponent, isStandalone: true, selector: "sac-contextmenubutton", providers: [
+            {
+                provide: SacContextmenuItemCommon,
+                useExisting: forwardRef(() => SacContextmenuItemButtonComponent),
+            },
+        ], usesInheritance: true, ngImport: i0, template: "<li>\n    <button\n        [id]=\"name\"\n        type=\"button\"\n        class=\"dropdown-item\"\n        (click)=\"callaction($event)\"\n        [class.disabled]=\"isdisabled\"\n        [ngClass]=\"cssclass\"\n        [attr.disabled]=\"isdisabled ? 'disabled' : null\">\n        <div class=\"d-flex\">\n            <div\n                *ngIf=\"!isicondisabled\"\n                style=\"min-width: 1.5rem\">\n                <img\n                    *ngIf=\"image\"\n                    [src]=\"image\"\n                    class=\"align-baseline\" />\n                <i\n                    *ngIf=\"icon\"\n                    [class]=\"iconstyle + ' ' + icon\"></i>\n            </div>\n            <div class=\"flex-grow-1\">{{ text }}</div>\n        </div>\n    </button>\n</li>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacContextmenuItemButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sac-contextmenubutton', standalone: true, imports: [NgIf], 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 }]; } });
+            args: [{ selector: 'sac-contextmenubutton', providers: [
+                        {
+                            provide: SacContextmenuItemCommon,
+                            useExisting: forwardRef(() => SacContextmenuItemButtonComponent),
+                        },
+                    ], standalone: true, imports: [NgIf, NgClass], template: "<li>\n    <button\n        [id]=\"name\"\n        type=\"button\"\n        class=\"dropdown-item\"\n        (click)=\"callaction($event)\"\n        [class.disabled]=\"isdisabled\"\n        [ngClass]=\"cssclass\"\n        [attr.disabled]=\"isdisabled ? 'disabled' : null\">\n        <div class=\"d-flex\">\n            <div\n                *ngIf=\"!isicondisabled\"\n                style=\"min-width: 1.5rem\">\n                <img\n                    *ngIf=\"image\"\n                    [src]=\"image\"\n                    class=\"align-baseline\" />\n                <i\n                    *ngIf=\"icon\"\n                    [class]=\"iconstyle + ' ' + icon\"></i>\n            </div>\n            <div class=\"flex-grow-1\">{{ text }}</div>\n        </div>\n    </button>\n</li>\n" }]
+        }], ctorParameters: function () { return []; } });
 
 /**
  * Splitter Komponente in Context Menü
  */
 class SacContextmenuItemSplitterComponent extends SacContextmenuItemCommon {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacContextmenuItemSplitterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SacContextmenuItemSplitterComponent, isStandalone: true, selector: "sac-contextmenusplitter", usesInheritance: true, ngImport: i0, template: "<li><div class=\"dropdown-divider\"></div></li>\r\n" }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SacContextmenuItemSplitterComponent, isStandalone: true, selector: "sac-contextmenusplitter", providers: [
+            {
+                provide: SacContextmenuItemCommon,
+                useExisting: forwardRef(() => SacContextmenuItemSplitterComponent),
+            },
+        ], usesInheritance: true, ngImport: i0, template: "<li><div class=\"dropdown-divider\"></div></li>\n" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacContextmenuItemSplitterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sac-contextmenusplitter', standalone: true, template: "<li><div class=\"dropdown-divider\"></div></li>\r\n" }]
+            args: [{ selector: 'sac-contextmenusplitter', standalone: true, providers: [
+                        {
+                            provide: SacContextmenuItemCommon,
+                            useExisting: forwardRef(() => SacContextmenuItemSplitterComponent),
+                        },
+                    ], template: "<li><div class=\"dropdown-divider\"></div></li>\n" }]
+        }] });
+
+class SacToControlHeightPipe {
+    // #region Public Methods
+    /**
+     * Returns the CSS class that defines the height for the control
+     * @param value ControlHeight value or null
+     */
+    transform(value) {
+        // Return default value
+        if (!value) {
+            return '';
+        }
+        switch (value) {
+            case ControlHeight.Small:
+                return 'form-control-sm';
+            case ControlHeight.Large:
+                return 'form-control-lg';
+            default:
+                return '';
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacToControlHeightPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SacToControlHeightPipe, isStandalone: true, name: "toControlHeight" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacToControlHeightPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'toControlHeight',
+                    standalone: true,
+                }]
+        }] });
+
+class SacToControlWidthCssPipe {
+    // #region Public Methods
+    /**
+     * Get CSS classes from label width configuration to set control size
+     * @param value Configuration with grid columns for different viewports
+     * @returns string with css classe for bootstrap3
+     */
+    transform(value) {
+        const classes = [];
+        if (value.labelSizeXs) {
+            classes.push('col-' + this.calcControlSize(value.labelSizeXs));
+        }
+        if (value.labelSizeSm) {
+            classes.push('col-sm-' + this.calcControlSize(value.labelSizeSm));
+        }
+        if (value.labelSizeMd) {
+            classes.push('col-md-' + this.calcControlSize(value.labelSizeMd));
+        }
+        if (value.labelSizeLg) {
+            classes.push('col-lg-' + this.calcControlSize(value.labelSizeLg));
+        }
+        if (value.labelSizeXl) {
+            classes.push('col-xl-' + this.calcControlSize(value.labelSizeXl));
+        }
+        if (value.labelSizeXxl) {
+            classes.push('col-xxl-' + this.calcControlSize(value.labelSizeXxl));
+        }
+        return classes.join(' ');
+    }
+    // #endregion Public Methods
+    // #region Private Methods
+    /**
+     * calculate the control size
+     * @param labelsize grid size of label
+     * @returns grid size for control. should be between 1 and 12
+     */
+    calcControlSize(labelsize) {
+        if (labelsize === 12) {
+            return 12;
+        }
+        if (!labelsize) {
+            return 12;
+        }
+        return 12 - labelsize;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacToControlWidthCssPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SacToControlWidthCssPipe, isStandalone: true, name: "toControlWidthCss" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacToControlWidthCssPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'toControlWidthCss',
+                    standalone: true,
+                }]
+        }] });
+
+class SacToLabelHeightPipe {
+    // #region Public Methods
+    /**
+     * Returns the CSS class that defines the height for the control
+     * @param value ControlHeight value or null
+     */
+    transform(value) {
+        // Return default value
+        if (!value) {
+            return '';
+        }
+        switch (value) {
+            case ControlHeight.Small:
+                return 'col-form-label-sm';
+            case ControlHeight.Large:
+                return 'col-form-label-lg';
+            default:
+                return '';
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacToLabelHeightPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SacToLabelHeightPipe, isStandalone: true, name: "toLabelHeight" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacToLabelHeightPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'toLabelHeight',
+                    standalone: true,
+                }]
+        }] });
+
+class SacToLabelWidthCssPipe {
+    // #region Public Methods
+    /**
+     * Get CSS classes from label width configuration to set label size
+     * @param value Configuration with grid columns for different viewports
+     * @returns string with css classe for bootstrap3
+     */
+    transform(value) {
+        const classes = [];
+        if (value.labelSizeXs) {
+            classes.push('col-' + value.labelSizeXs);
+        }
+        if (value.labelSizeSm) {
+            classes.push('col-sm-' + value.labelSizeSm);
+        }
+        if (value.labelSizeMd) {
+            classes.push('col-md-' + value.labelSizeMd);
+        }
+        if (value.labelSizeLg) {
+            classes.push('col-lg-' + value.labelSizeLg);
+        }
+        if (value.labelSizeXl) {
+            classes.push('col-xl-' + value.labelSizeXl);
+        }
+        if (value.labelSizeXxl) {
+            classes.push('col-xxl-' + value.labelSizeXxl);
+        }
+        return classes.join(' ');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacToLabelWidthCssPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SacToLabelWidthCssPipe, isStandalone: true, name: "toLabelWidthCss" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacToLabelWidthCssPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'toLabelWidthCss',
+                    standalone: true,
+                }]
         }] });
 
 /**
- * Erweiterung / Hooking für automatismen in Formular. Wird als Container für alle Controls benötigt.
+ * Tooltip Komponente
  *
- * @example Beispiel über Div Container
+ * @example ToolTip Control
  *
- * <div ngForm></div>
+ *  <ngTooltip tooltiptext="Mein Tooltip" [inlinemode]="true">
+ *    <i class="tooltip"></i>
+ *  </ngTooltip>
  *
- * @example Beispiel über Form Tag
+ * @example ToolTip Control im Inline Mode. Style auf Icon kann auch in Klasse ausgelagert werden.
  *
- * <form></form>
+ *  <div class="form-inline">
+ *    <ngInputSearch iconname="Suchen"></ngInputSearch>
+ *    <ngTooltip tooltiptext="Mein Tooltip" [inlinemode]="true">
+ *      <i class="tooltip" style="position: relative; left: 0; top: 3px; display: inline-block; margin-right: 10px;"></i>
+ *    </ngTooltip>
+ *  </div>
  *
  */
-class SacFormDirective extends SacFormCommon {
+class SacTooltipComponent extends SacTooltipCommon {
+    // #region Constructors
     /**
-     * Konstruktor
-     * @param form Instanz von NgForm für eigene automatische Formular Logik
+     * Konstrukor
+     * @param parent SacFormular Instanz
+     * @param injector Component Injector
      */
-    constructor(form) {
-        super(form);
-        /**
-         * Setzt die Standard CSS Klasse für auf dem Form Container
-         */
-        this.cssClassForm = true;
+    constructor(cdRef, ref) {
+        super(cdRef, ref);
     }
+    // #endregion Constructors
+    // #region Protected Methods
     /**
-     * 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
+     * Padding Value for Bootstrap5 Tooltip Padding
+     * @returns Static Padding Value for BS5
      */
-    get orientientationVertical() { return this.getOrientation() === 'vertical'; }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacFormDirective, deps: [{ token: i1$1.NgForm }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SacFormDirective, isStandalone: true, 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 }); }
+    getTooltipOffset() {
+        return 8;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacTooltipComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SacTooltipComponent, isStandalone: true, selector: "sac-tooltip", usesInheritance: true, ngImport: i0, template: "<div\n    [style.display]=\"inlinemode ? 'inline' : null\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <div\n        #container\n        (mouseenter)=\"ShowTooltip()\"\n        (mouseleave)=\"HideTooltip()\"\n        [style.display]=\"inlinemode ? 'inline' : null\">\n        <ng-content></ng-content>\n    </div>\n    <div\n        *ngIf=\"IsTooltipVisible()\"\n        #tooltip>\n        <div\n            [class.show]=\"IsTooltipContentVisible\"\n            class=\"tooltip bs-tooltip-auto fade\"\n            style=\"position: absolute\"\n            [style.left.px]=\"LeftPos\"\n            [style.top.px]=\"TopPos\"\n            [class.top]=\"GetTooltipPosition() === TooltipPosition.top\"\n            [class.left]=\"GetTooltipPosition() === TooltipPosition.left\"\n            [class.right]=\"GetTooltipPosition() === TooltipPosition.right\"\n            [class.bottom]=\"GetTooltipPosition() === TooltipPosition.bottom\"\n            [attr.data-popper-placement]=\"\n                GetTooltipPosition() === TooltipPosition.right\n                    ? 'right'\n                    : GetTooltipPosition() === TooltipPosition.left\n                    ? 'left'\n                    : GetTooltipPosition() === TooltipPosition.top\n                    ? 'top'\n                    : GetTooltipPosition() === TooltipPosition.bottom\n                    ? 'bottom'\n                    : null\n            \">\n            <div\n                class=\"tooltip-arrow\"\n                style=\"position: absolute\"\n                [style.top.px]=\"posArrowTop\"\n                [style.left.px]=\"posArrowLeft\"></div>\n            <div class=\"tooltip-inner\">{{ tooltiptext }}</div>\n        </div>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: SacTestingAttributePipe, name: "testingattribute" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacFormDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacTooltipComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sac-tooltip', standalone: true, imports: [NgIf, SacTestingAttributePipe], template: "<div\n    [style.display]=\"inlinemode ? 'inline' : null\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <div\n        #container\n        (mouseenter)=\"ShowTooltip()\"\n        (mouseleave)=\"HideTooltip()\"\n        [style.display]=\"inlinemode ? 'inline' : null\">\n        <ng-content></ng-content>\n    </div>\n    <div\n        *ngIf=\"IsTooltipVisible()\"\n        #tooltip>\n        <div\n            [class.show]=\"IsTooltipContentVisible\"\n            class=\"tooltip bs-tooltip-auto fade\"\n            style=\"position: absolute\"\n            [style.left.px]=\"LeftPos\"\n            [style.top.px]=\"TopPos\"\n            [class.top]=\"GetTooltipPosition() === TooltipPosition.top\"\n            [class.left]=\"GetTooltipPosition() === TooltipPosition.left\"\n            [class.right]=\"GetTooltipPosition() === TooltipPosition.right\"\n            [class.bottom]=\"GetTooltipPosition() === TooltipPosition.bottom\"\n            [attr.data-popper-placement]=\"\n                GetTooltipPosition() === TooltipPosition.right\n                    ? 'right'\n                    : GetTooltipPosition() === TooltipPosition.left\n                    ? 'left'\n                    : GetTooltipPosition() === TooltipPosition.top\n                    ? 'top'\n                    : GetTooltipPosition() === TooltipPosition.bottom\n                    ? 'bottom'\n                    : null\n            \">\n            <div\n                class=\"tooltip-arrow\"\n                style=\"position: absolute\"\n                [style.top.px]=\"posArrowTop\"\n                [style.left.px]=\"posArrowLeft\"></div>\n            <div class=\"tooltip-inner\">{{ tooltiptext }}</div>\n        </div>\n    </div>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; } });
+
+class SacFormLayoutDirective extends SacFormLayoutCommon {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacFormLayoutDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SacFormLayoutDirective, isStandalone: true, selector: "[sacFormLayout]", usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacFormLayoutDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'form:not([ngNoForm]):not([formGroup]),[ngForm]',
-                    exportAs: 'sacform',
-                    standalone: true
+                    selector: '[sacFormLayout]',
+                    standalone: true,
                 }]
-        }], ctorParameters: function () { return [{ type: i1$1.NgForm }]; }, propDecorators: { cssClassForm: [{
-                type: HostBinding,
-                args: ['class.form']
-            }], orientientationHorizontal: [{
-                type: HostBinding,
-                args: ['class.form-horizontal']
-            }], orientientationVertical: [{
-                type: HostBinding,
-                args: ['class.form-vertical']
-            }] } });
+        }] });
 
 /**
  * Dropzone Komponente für mehrere Uploads
  * @see https://github.com/kukhariev/ngx-uploadx/
  */
 class SacDropzoneMultipleComponent extends SacDropzoneMultipleCommon {
+    // #region Constructors
     /**
-     * Konstruktor
-     * @param parent Formular
-     * @param injector Angular Dependency Injection Service
-     * @param renderer Angular Rendering Engine
-     * @param ngZone ngZone
+     * Constructor
+     * @param formLayout SacFormLayout to define scoped layout settings
+     * @param injector Injector for injecting services
+     * @param renderer Angular rendering engine
+     * @param ngZone ngZone to manage external javascripts
      */
-    constructor(parent, injector, renderer, ngZone) {
-        super(parent, injector, renderer, ngZone);
+    constructor(formLayout, injector, renderer, ngZone) {
+        super(formLayout, injector, renderer, ngZone);
     }
+    // #endregion Constructors
+    // #region Public Methods
     /**
      * Initialisiert das Control
      */
     ngOnInit() {
         super.ngOnInit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacDropzoneMultipleComponent, deps: [{ token: SacFormDirective, host: true, optional: true }, { token: i0.Injector }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacDropzoneMultipleComponent, deps: [{ token: SacFormLayoutDirective, host: true, optional: true }, { token: i0.Injector }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SacDropzoneMultipleComponent, isStandalone: true, selector: "sac-dropzonemultiple", providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -389,7 +587,7 @@ class SacDropzoneMultipleComponent extends SacDropzoneMultipleCommon {
                 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"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div\n    id=\"{{ name }}\"\n    class=\"row mb-3\"\n    [class.g-0]=\"disablelabel\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}_label\"\n        for=\"{{ name }}_uploadinput\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n            <div\n                class=\"dropzone d-flex justify-content-center position-relative\"\n                (drop)=\"dropHandler($event)\"\n                (dragover)=\"onDragOver($event)\"\n                (dragleave)=\"onDragLeave($event)\"\n                [class.active]=\"active\"\n                [style.min-height]=\"uploadheight\"\n                [class.is-invalid]=\"invalid && (dirty || touched)\">\n                <div\n                    class=\"content d-flex justify-content-center\"\n                    *ngIf=\"uploads.length === 0\">\n                    <div class=\"align-self-center text-center\">\n                        <div [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                            <ng-content></ng-content>\n                        </div>\n                    </div>\n                </div>\n                <div\n                    class=\"content d-flex justify-content-center align-items-center w-50 my-3\"\n                    *ngIf=\"uploads.length > 0\">\n                    <div class=\"flex-fill progress-container\">\n                        <div\n                            class=\"dropzone-uploadstates\"\n                            [class.mt-1]=\"i > 0\"\n                            *ngFor=\"let file of uploads; let i = index\">\n                            <div\n                                class=\"input-group upload-component upload-component-multiple\"\n                                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\n                                <div class=\"form-control upload-progress border-secondary\">\n                                    <div class=\"progress\">\n                                        <div\n                                            class=\"progress-bar\"\n                                            [class.progress-bar-success]=\"file.progress === 100\"\n                                            role=\"progressbar\"\n                                            [attr.aria-valuenow]=\"file.progress\"\n                                            aria-valuemin=\"0\"\n                                            aria-valuemax=\"100\"\n                                            [style.width.%]=\"file.progress\">\n                                            <span class=\"progress-text text-dark\">{{ file.name }}</span>\n                                        </div>\n                                    </div>\n                                </div>\n                                <a\n                                    class=\"btn\"\n                                    (click)=\"cancel(file.uploadId)\"\n                                    [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\n                                    [class.btn-danger]=\"invalid && (dirty || touched)\">\n                                    <span [class]=\"IconDelete\"></span>\n                                </a>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <input\n                    #files\n                    multiple\n                    id=\"{{ name }}_uploadinput\"\n                    type=\"file\"\n                    class=\"custom-file-input\"\n                    (click)=\"files.value = ''\"\n                    (uploadxState)=\"onUpload($event)\"\n                    [disabled]=\"HasQueueItem()\" />\n            </div>\n            <div\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"invalid-feedback\">\n                {{ GetErrorMessage() | async }}\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\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"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToLabelHeightPipe, name: "toLabelHeight" }, { kind: "component", type: SacTooltipComponent, selector: "sac-tooltip" }, { kind: "pipe", type: SacToControlHeightPipe, name: "toControlHeight" }, { kind: "pipe", type: SacTestingAttributePipe, name: "testingattribute" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacDropzoneMultipleComponent, decorators: [{
             type: Component,
@@ -404,8 +602,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             multi: true,
                             useExisting: forwardRef(() => SacDropzoneMultipleComponent),
                         },
-                    ], standalone: true, imports: [NgIf, NgClass, NgFor, AsyncPipe], 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: [{
+                    ], standalone: true, imports: [
+                        NgIf,
+                        NgClass,
+                        NgFor,
+                        AsyncPipe,
+                        SacToControlWidthCssPipe,
+                        SacToLabelWidthCssPipe,
+                        SacToLabelHeightPipe,
+                        SacTooltipComponent,
+                        SacToControlHeightPipe,
+                        SacTestingAttributePipe,
+                    ], template: "<div\n    id=\"{{ name }}\"\n    class=\"row mb-3\"\n    [class.g-0]=\"disablelabel\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}_label\"\n        for=\"{{ name }}_uploadinput\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n            <div\n                class=\"dropzone d-flex justify-content-center position-relative\"\n                (drop)=\"dropHandler($event)\"\n                (dragover)=\"onDragOver($event)\"\n                (dragleave)=\"onDragLeave($event)\"\n                [class.active]=\"active\"\n                [style.min-height]=\"uploadheight\"\n                [class.is-invalid]=\"invalid && (dirty || touched)\">\n                <div\n                    class=\"content d-flex justify-content-center\"\n                    *ngIf=\"uploads.length === 0\">\n                    <div class=\"align-self-center text-center\">\n                        <div [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                            <ng-content></ng-content>\n                        </div>\n                    </div>\n                </div>\n                <div\n                    class=\"content d-flex justify-content-center align-items-center w-50 my-3\"\n                    *ngIf=\"uploads.length > 0\">\n                    <div class=\"flex-fill progress-container\">\n                        <div\n                            class=\"dropzone-uploadstates\"\n                            [class.mt-1]=\"i > 0\"\n                            *ngFor=\"let file of uploads; let i = index\">\n                            <div\n                                class=\"input-group upload-component upload-component-multiple\"\n                                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\n                                <div class=\"form-control upload-progress border-secondary\">\n                                    <div class=\"progress\">\n                                        <div\n                                            class=\"progress-bar\"\n                                            [class.progress-bar-success]=\"file.progress === 100\"\n                                            role=\"progressbar\"\n                                            [attr.aria-valuenow]=\"file.progress\"\n                                            aria-valuemin=\"0\"\n                                            aria-valuemax=\"100\"\n                                            [style.width.%]=\"file.progress\">\n                                            <span class=\"progress-text text-dark\">{{ file.name }}</span>\n                                        </div>\n                                    </div>\n                                </div>\n                                <a\n                                    class=\"btn\"\n                                    (click)=\"cancel(file.uploadId)\"\n                                    [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\n                                    [class.btn-danger]=\"invalid && (dirty || touched)\">\n                                    <span [class]=\"IconDelete\"></span>\n                                </a>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <input\n                    #files\n                    multiple\n                    id=\"{{ name }}_uploadinput\"\n                    type=\"file\"\n                    class=\"custom-file-input\"\n                    (click)=\"files.value = ''\"\n                    (uploadxState)=\"onUpload($event)\"\n                    [disabled]=\"HasQueueItem()\" />\n            </div>\n            <div\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"invalid-feedback\">\n                {{ GetErrorMessage() | async }}\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\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: SacFormLayoutDirective, decorators: [{
                     type: Host
                 }, {
                     type: Optional
@@ -415,6 +624,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Server File Browser Komponente
  */
 class SacBrowserComponent extends SacFileBrowserCommon {
+    // #endregion Properties
+    // #region Constructors
     /**
      * Konstruktor
      * @param httpClient HTTP Client
@@ -425,14 +636,8 @@ class SacBrowserComponent extends SacFileBrowserCommon {
         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);
-    }
+    // #endregion Constructors
+    // #region Public Methods
     /**
      * Confirm Action wenn ein File gelöscht werden soll
      * @param file File das gelöscht werden soll.
@@ -441,8 +646,8 @@ class SacBrowserComponent extends SacFileBrowserCommon {
     confirmDeleteFile(file) {
         return new Observable((observer) => {
             forkJoin({
-                title: this.lngResourceService.GetString('FILEBROWSER_DELETE'),
-                message: this.lngResourceService.GetString('FILEBROWSER_CONFIRM_DELETEFILE'),
+                title: this.lngResourceService.GetString(this.validationKeyService.FilebrowserButtonDelete),
+                message: this.lngResourceService.GetString(this.validationKeyService.FilebrowserButtonDelete),
             }).subscribe((text) => {
                 this.confirmService
                     .ConfirmMessage(text.title, text.message)
@@ -466,8 +671,8 @@ class SacBrowserComponent extends SacFileBrowserCommon {
     confirmDeleteNode(node) {
         return new Observable((observer) => {
             forkJoin({
-                title: this.lngResourceService.GetString('FILEBROWSER_DELETE'),
-                message: this.lngResourceService.GetString('FILEBROWSER_CONFIRM_DELETEFOLDER'),
+                title: this.lngResourceService.GetString(this.validationKeyService.FilebrowserButtonDelete),
+                message: this.lngResourceService.GetString(this.validationKeyService.FilebrowserConfirmTextDeleteFolder),
             }).subscribe((text) => {
                 this.confirmService
                     .ConfirmMessage(text.title, text.message)
@@ -483,6 +688,14 @@ class SacBrowserComponent extends SacFileBrowserCommon {
             });
         });
     }
+    /**
+     * Erzeugt ein Array von einer bestimmten grösse
+     * @param anzahl Grösse des Array
+     * @returns Array
+     */
+    count(anzahl) {
+        return new Array(anzahl);
+    }
     /**
      * Methode wird aufgerufen, wenn eine Datei verschoben wird
      * @param uploadid Upload ID
@@ -493,8 +706,8 @@ class SacBrowserComponent extends SacFileBrowserCommon {
             this.uploadComponent.cancel(item.uploadId);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacBrowserComponent, deps: [{ token: i1$2.HttpClient }, { token: i0.Injector }, { token: ServiceConfirm }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SacBrowserComponent, isStandalone: true, 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", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: HttpClientModule }, { kind: "component", type: SacContextmenuComponent, selector: "sac-contextmenu" }, { kind: "component", type: SacContextmenuItemButtonComponent, selector: "sac-contextmenubutton" }, { kind: "component", type: SacContextmenuItemSplitterComponent, selector: "sac-contextmenusplitter" }, { kind: "component", type: SacDropzoneMultipleComponent, selector: "sac-dropzonemultiple" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacBrowserComponent, deps: [{ token: i1.HttpClient }, { token: i0.Injector }, { token: ServiceConfirm }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SacBrowserComponent, isStandalone: true, selector: "sac-filebrowser", providers: [ServiceConfirm], viewQueries: [{ propertyName: "uploadComponent", first: true, predicate: SacDropzoneMultipleComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 col-md-5 col-lg-4\">\n    <ul class=\"list-group list-group-flush\">\n      <ng-template\n        [ngTemplateOutlet]=\"treeItem\"\n        [ngTemplateOutletContext]=\"{node: rootNode, deep: 0}\"\n      ></ng-template>\n    </ul>\n\n    <ng-template #treeItem let-node=\"node\" let-deep=\"deep\">\n      <li\n        class=\"list-group-item py-1 px-2 d-flex align-items-center\"\n        [class.list-group-item-secondary]=\"node === selectedNode\"\n        (click)=\"selectNode(node)\"\n        style=\"cursor: pointer\"\n      >\n        <div class=\"mx-3\" *ngFor=\"let i of count(deep)\"></div>\n        <div\n          (click)=\"switchExpandNode(node);$event.stopPropagation();\"\n          class=\"me-2\"\n          [ngClass]=\"node.ChildNodes.length === 0 ? iconFolderEmpty: (!node.IsExpanded && node.ChildNodes.length > 0 ? iconFolderCollabsed : (node.IsExpanded && node.ChildNodes.length > 0 ? iconFolderOpen : ''))\"\n        ></div>\n        <ng-container *ngIf=\"!node.IsEditMode\">\n          <div class=\"flex-grow-1\">{{ node.Name }}</div>\n        </ng-container>\n        <ng-container *ngIf=\"node.IsEditMode\">\n          <div class=\"flex-grow-1\" ngForm>\n            <input\n              name=\"editFolder\"\n              class=\"form-control form-control-sm\"\n              [ngModel]=\"node.Name\"\n              [ngModelOptions]=\"{updateOn: 'blur'}\"\n              (ngModelChange)=\"renameNode(node, $event)\"\n              (keydown.enter)=\"$event.target.blur();false;\"\n              (blur)=\"renameNode(node, null)\"\n              (click)=\"$event.stopPropagation()\"\n            />\n          </div>\n        </ng-container>\n        <div class=\"flex-shrink-0\">\n          <a\n            *ngIf=\"node.Path !== '/' && allowfolderrename\"\n            class=\"btn btn-sm btn-link text-secondary\"\n            (click)=\"editNode(node);$event.stopPropagation();\"\n          >\n            <i [class]=\"iconEdit\"></i>\n          </a>\n          <sac-contextmenu cssclass=\"d-inline-block\">\n            <sac-contextmenubutton\n              *ngIf=\"allowfoldercreate\"\n              text=\"{{ lngResourceService.GetString(validationKeyService.FilebrowserButtonNewFolder) | async }}\"\n              [icon]=\"iconFolderNew\"\n              (clicked)=\"newNode(node)\"\n            ></sac-contextmenubutton>\n            <sac-contextmenubutton\n              *ngIf=\"node.Path !== '/' && allowfolderdelete\"\n              text=\"{{ lngResourceService.GetString(validationKeyService.FilebrowserButtonDelete) | async }}\"\n              [icon]=\"iconDelete\"\n              (clicked)=\"deleteNode(node)\"\n            ></sac-contextmenubutton>\n            <sac-contextmenusplitter\n              *ngIf=\"allowfoldercreate || (node.Path !== '/' && allowfolderdelete)\"\n            ></sac-contextmenusplitter>\n            <sac-contextmenubutton\n              text=\"{{ lngResourceService.GetString(validationKeyService.FilebrowserButtonRefresh) | async }}\"\n              [icon]=\"iconRefresh\"\n              (clicked)=\"refreshNode(node)\"\n            ></sac-contextmenubutton>\n          </sac-contextmenu>\n        </div>\n      </li>\n\n      <ng-container *ngIf=\"node.IsExpanded\">\n        <ng-template\n          *ngFor=\"let child of node.ChildNodes\"\n          [ngTemplateOutlet]=\"treeItem\"\n          [ngTemplateOutletContext]=\"{node: child, deep: deep + 1}\"\n        ></ng-template>\n      </ng-container>\n    </ng-template>\n  </div>\n  <div class=\"col-12 col-md-7 col-lg-8\">\n    <ng-container *ngIf=\"selectedNode && selectedNode.Files\">\n      <div *ngIf=\"allowfileupload\" ngForm>\n        <sac-dropzonemultiple\n          [disablelabel]=\"true\"\n          [endpoint]=\"apiurl + '/uploadregister'\"\n          name=\"upload\"\n          uploadheight=\"5rem\"\n          [ngModel]=\"uploads\"\n          (ngModelChange)=\"uploadComplete(selectedNode,$event)\"\n          [allowedtypes]=\"allowedtypes\"\n          >{{\n          lngResourceService.GetString(validationKeyService.FilebrowserButtonUpload)\n          | async }}</sac-dropzonemultiple\n        >\n      </div>\n      <div class=\"table-responsive\">\n        <table class=\"table table-striped table-hover align-middle\">\n          <thead>\n            <th>\n              {{\n              lngResourceService.GetString(validationKeyService.FilebrowserGridFilename)\n              | async }}\n            </th>\n            <th>\n              {{\n              lngResourceService.GetString(validationKeyService.FilebrowserGridSize)\n              | async }}\n            </th>\n            <th style=\"width: 80px\"></th>\n          </thead>\n          <tbody>\n            <ng-container *ngIf=\"selectedNode.Files.length === 0\">\n              <tr>\n                <td colspan=\"3\">\n                  {{\n                  lngResourceService.GetString(validationKeyService.FilebrowserGridNoFiles)\n                  | async }}\n                </td>\n              </tr>\n            </ng-container>\n            <ng-container *ngIf=\"selectedNode.Files.length > 0\">\n              <tr\n                *ngFor=\"let item of selectedNode.Files\"\n                (click)=\"selectFile(item)\"\n                [class.table-primary]=\"selectedFileItem === item\"\n              >\n                <td [class.p-2]=\"item.IsEditMode\">\n                  <ng-container *ngIf=\"!item.IsEditMode\">\n                    {{ item.Filename }}\n                  </ng-container>\n                  <ng-container *ngIf=\"item.IsEditMode\">\n                    <div>\n                      <input\n                        name=\"editFolder\"\n                        class=\"form-control form-control-sm\"\n                        [ngModel]=\"item.Filename\"\n                        [ngModelOptions]=\"{updateOn: 'blur'}\"\n                        (ngModelChange)=\"renameFile(item, $event)\"\n                        (keydown.enter)=\"$event.target.blur();false\"\n                        (blur)=\"renameFile(item, null)\"\n                        (click)=\"$event.stopPropagation();\"\n                      />\n                    </div>\n                  </ng-container>\n                </td>\n                <td>{{ item.Size}}</td>\n                <td class=\"p-2\">\n                  <div class=\"btn-toolbar\" role=\"toolbar\">\n                    <div class=\"btn-group ml-auto\" role=\"group\">\n                      <a\n                        *ngIf=\"allowfilerename\"\n                        class=\"btn btn-sm btn-link text-secondary\"\n                        (click)=\"editFile(item);$event.stopPropagation();\"\n                        ><i [class]=\"iconEdit\"></i\n                      ></a>\n                    </div>\n                    <div class=\"btn-group\" role=\"group\">\n                      <a\n                        *ngIf=\"allowfiledelete\"\n                        class=\"btn btn-sm btn-link text-secondary\"\n                        (click)=\"deleteFile(item);$event.stopPropagation();\"\n                        ><i [class]=\"iconDelete\"></i\n                      ></a>\n                    </div>\n                  </div>\n                </td>\n              </tr>\n            </ng-container>\n          </tbody>\n        </table>\n      </div>\n    </ng-container>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: HttpClientModule }, { kind: "component", type: SacContextmenuComponent, selector: "sac-contextmenu" }, { kind: "component", type: SacContextmenuItemButtonComponent, selector: "sac-contextmenubutton" }, { kind: "component", type: SacContextmenuItemSplitterComponent, selector: "sac-contextmenusplitter" }, { kind: "component", type: SacDropzoneMultipleComponent, selector: "sac-dropzonemultiple" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacBrowserComponent, decorators: [{
             type: Component,
@@ -510,8 +723,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         SacContextmenuItemButtonComponent,
                         SacContextmenuItemSplitterComponent,
                         SacDropzoneMultipleComponent,
-                    ], 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$2.HttpClient }, { type: i0.Injector }, { type: ServiceConfirm }]; }, propDecorators: { uploadComponent: [{
+                    ], providers: [ServiceConfirm], template: "<div class=\"row\">\n  <div class=\"col-12 col-md-5 col-lg-4\">\n    <ul class=\"list-group list-group-flush\">\n      <ng-template\n        [ngTemplateOutlet]=\"treeItem\"\n        [ngTemplateOutletContext]=\"{node: rootNode, deep: 0}\"\n      ></ng-template>\n    </ul>\n\n    <ng-template #treeItem let-node=\"node\" let-deep=\"deep\">\n      <li\n        class=\"list-group-item py-1 px-2 d-flex align-items-center\"\n        [class.list-group-item-secondary]=\"node === selectedNode\"\n        (click)=\"selectNode(node)\"\n        style=\"cursor: pointer\"\n      >\n        <div class=\"mx-3\" *ngFor=\"let i of count(deep)\"></div>\n        <div\n          (click)=\"switchExpandNode(node);$event.stopPropagation();\"\n          class=\"me-2\"\n          [ngClass]=\"node.ChildNodes.length === 0 ? iconFolderEmpty: (!node.IsExpanded && node.ChildNodes.length > 0 ? iconFolderCollabsed : (node.IsExpanded && node.ChildNodes.length > 0 ? iconFolderOpen : ''))\"\n        ></div>\n        <ng-container *ngIf=\"!node.IsEditMode\">\n          <div class=\"flex-grow-1\">{{ node.Name }}</div>\n        </ng-container>\n        <ng-container *ngIf=\"node.IsEditMode\">\n          <div class=\"flex-grow-1\" ngForm>\n            <input\n              name=\"editFolder\"\n              class=\"form-control form-control-sm\"\n              [ngModel]=\"node.Name\"\n              [ngModelOptions]=\"{updateOn: 'blur'}\"\n              (ngModelChange)=\"renameNode(node, $event)\"\n              (keydown.enter)=\"$event.target.blur();false;\"\n              (blur)=\"renameNode(node, null)\"\n              (click)=\"$event.stopPropagation()\"\n            />\n          </div>\n        </ng-container>\n        <div class=\"flex-shrink-0\">\n          <a\n            *ngIf=\"node.Path !== '/' && allowfolderrename\"\n            class=\"btn btn-sm btn-link text-secondary\"\n            (click)=\"editNode(node);$event.stopPropagation();\"\n          >\n            <i [class]=\"iconEdit\"></i>\n          </a>\n          <sac-contextmenu cssclass=\"d-inline-block\">\n            <sac-contextmenubutton\n              *ngIf=\"allowfoldercreate\"\n              text=\"{{ lngResourceService.GetString(validationKeyService.FilebrowserButtonNewFolder) | async }}\"\n              [icon]=\"iconFolderNew\"\n              (clicked)=\"newNode(node)\"\n            ></sac-contextmenubutton>\n            <sac-contextmenubutton\n              *ngIf=\"node.Path !== '/' && allowfolderdelete\"\n              text=\"{{ lngResourceService.GetString(validationKeyService.FilebrowserButtonDelete) | async }}\"\n              [icon]=\"iconDelete\"\n              (clicked)=\"deleteNode(node)\"\n            ></sac-contextmenubutton>\n            <sac-contextmenusplitter\n              *ngIf=\"allowfoldercreate || (node.Path !== '/' && allowfolderdelete)\"\n            ></sac-contextmenusplitter>\n            <sac-contextmenubutton\n              text=\"{{ lngResourceService.GetString(validationKeyService.FilebrowserButtonRefresh) | async }}\"\n              [icon]=\"iconRefresh\"\n              (clicked)=\"refreshNode(node)\"\n            ></sac-contextmenubutton>\n          </sac-contextmenu>\n        </div>\n      </li>\n\n      <ng-container *ngIf=\"node.IsExpanded\">\n        <ng-template\n          *ngFor=\"let child of node.ChildNodes\"\n          [ngTemplateOutlet]=\"treeItem\"\n          [ngTemplateOutletContext]=\"{node: child, deep: deep + 1}\"\n        ></ng-template>\n      </ng-container>\n    </ng-template>\n  </div>\n  <div class=\"col-12 col-md-7 col-lg-8\">\n    <ng-container *ngIf=\"selectedNode && selectedNode.Files\">\n      <div *ngIf=\"allowfileupload\" ngForm>\n        <sac-dropzonemultiple\n          [disablelabel]=\"true\"\n          [endpoint]=\"apiurl + '/uploadregister'\"\n          name=\"upload\"\n          uploadheight=\"5rem\"\n          [ngModel]=\"uploads\"\n          (ngModelChange)=\"uploadComplete(selectedNode,$event)\"\n          [allowedtypes]=\"allowedtypes\"\n          >{{\n          lngResourceService.GetString(validationKeyService.FilebrowserButtonUpload)\n          | async }}</sac-dropzonemultiple\n        >\n      </div>\n      <div class=\"table-responsive\">\n        <table class=\"table table-striped table-hover align-middle\">\n          <thead>\n            <th>\n              {{\n              lngResourceService.GetString(validationKeyService.FilebrowserGridFilename)\n              | async }}\n            </th>\n            <th>\n              {{\n              lngResourceService.GetString(validationKeyService.FilebrowserGridSize)\n              | async }}\n            </th>\n            <th style=\"width: 80px\"></th>\n          </thead>\n          <tbody>\n            <ng-container *ngIf=\"selectedNode.Files.length === 0\">\n              <tr>\n                <td colspan=\"3\">\n                  {{\n                  lngResourceService.GetString(validationKeyService.FilebrowserGridNoFiles)\n                  | async }}\n                </td>\n              </tr>\n            </ng-container>\n            <ng-container *ngIf=\"selectedNode.Files.length > 0\">\n              <tr\n                *ngFor=\"let item of selectedNode.Files\"\n                (click)=\"selectFile(item)\"\n                [class.table-primary]=\"selectedFileItem === item\"\n              >\n                <td [class.p-2]=\"item.IsEditMode\">\n                  <ng-container *ngIf=\"!item.IsEditMode\">\n                    {{ item.Filename }}\n                  </ng-container>\n                  <ng-container *ngIf=\"item.IsEditMode\">\n                    <div>\n                      <input\n                        name=\"editFolder\"\n                        class=\"form-control form-control-sm\"\n                        [ngModel]=\"item.Filename\"\n                        [ngModelOptions]=\"{updateOn: 'blur'}\"\n                        (ngModelChange)=\"renameFile(item, $event)\"\n                        (keydown.enter)=\"$event.target.blur();false\"\n                        (blur)=\"renameFile(item, null)\"\n                        (click)=\"$event.stopPropagation();\"\n                      />\n                    </div>\n                  </ng-container>\n                </td>\n                <td>{{ item.Size}}</td>\n                <td class=\"p-2\">\n                  <div class=\"btn-toolbar\" role=\"toolbar\">\n                    <div class=\"btn-group ml-auto\" role=\"group\">\n                      <a\n                        *ngIf=\"allowfilerename\"\n                        class=\"btn btn-sm btn-link text-secondary\"\n                        (click)=\"editFile(item);$event.stopPropagation();\"\n                        ><i [class]=\"iconEdit\"></i\n                      ></a>\n                    </div>\n                    <div class=\"btn-group\" role=\"group\">\n                      <a\n                        *ngIf=\"allowfiledelete\"\n                        class=\"btn btn-sm btn-link text-secondary\"\n                        (click)=\"deleteFile(item);$event.stopPropagation();\"\n                        ><i [class]=\"iconDelete\"></i\n                      ></a>\n                    </div>\n                  </div>\n                </td>\n              </tr>\n            </ng-container>\n          </tbody>\n        </table>\n      </div>\n    </ng-container>\n  </div>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: i0.Injector }, { type: ServiceConfirm }]; }, propDecorators: { uploadComponent: [{
                 type: ViewChild,
                 args: [SacDropzoneMultipleComponent, { static: false }]
             }] } });
@@ -532,18 +745,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 class SACBootstrap5ButtonModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SACBootstrap5ButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SACBootstrap5ButtonModule, imports: [CommonModule,
-            SacButtonComponent], exports: [SacButtonComponent] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SACBootstrap5ButtonModule, imports: [CommonModule, SacButtonComponent], exports: [SacButtonComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SACBootstrap5ButtonModule, imports: [CommonModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SACBootstrap5ButtonModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [
-                        CommonModule,
-                        SacButtonComponent
-                    ],
-                    exports: [SacButtonComponent]
+                    imports: [CommonModule, SacButtonComponent],
+                    exports: [SacButtonComponent],
                 }]
         }] });
 
@@ -551,15 +760,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Checkbox Kompontente
  */
 class SacCheckboxComponent extends SacCheckboxCommon {
+    // #region Constructors
     /**
-     * Konstruktor
-     * @param parent Formular
-     * @param injector Angular Dependency Injection Service
+     * Constructor
+     * @param formLayout SacFormLayout to define scoped layout settings
+     * @param injector Injector for injecting services
      */
-    constructor(parent, injector) {
-        super(parent, injector);
+    constructor(formLayout, injector) {
+        super(formLayout, injector);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacCheckboxComponent, deps: [{ token: SacFormDirective, host: true, optional: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacCheckboxComponent, deps: [{ token: SacFormLayoutDirective, host: true, optional: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SacCheckboxComponent, isStandalone: true, selector: "sac-checkbox", providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -571,9 +781,7 @@ class SacCheckboxComponent extends SacCheckboxCommon {
                 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>", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], viewProviders: [
-            { provide: ControlContainer, useExisting: SacFormDirective },
-        ] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\"\n    class=\"row\"\n    [class.g-0]=\"disablelabel\"\n    [class.mb-3]=\"!stacked\">\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[!disablelabel && !stacked ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden']\">\n        <label\n            *ngIf=\"!disablelabel && !stacked\"\n            for=\"{{ name }}\"\n            class=\"col-form-label d-flex\"\n            [ngClass]=\"componentHeight | toLabelHeight\">\n            <div\n                class=\"text flex-grow-0\"\n                [class.flex-sm-grow-1]=\"splitlabelandhelptext\"\n                >{{ label }}</div\n            >\n            <sac-tooltip\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ms-1\">\n                </span>\n            </sac-tooltip>\n        </label>\n    </div>\n    <div\n        class=\"align-self-center col-12\"\n        [ngClass]=\"[!disablelabel && !stacked ? (this.labelSizes | toControlWidthCss) : '']\">\n        <div\n            class=\"form-check\"\n            [class.form-switch]=\"checkboxstyle === 'switch'\"\n            [attr.role]=\"checkboxstyle === 'switch' ? 'switch' : null\"\n            [class.form-check-sm]=\"componentHeight === ControlHeight.Small\"\n            [class.form-check-lg]=\"componentHeight === ControlHeight.Large\">\n            <input\n                class=\"form-check-input\"\n                [class.form-check-input-sm]=\"componentHeight === ControlHeight.Small\"\n                [class.form-check-input-lg]=\"componentHeight === ControlHeight.Large\"\n                id=\"{{ name }}\"\n                name=\"{{ name }}\"\n                type=\"checkbox\"\n                [checked]=\"value\"\n                (blur)=\"onTouch()\"\n                (change)=\"setValue($event.target.checked)\"\n                [disabled]=\"isdisabled\" />\n            <label\n                for=\"{{ name }}\"\n                class=\"form-check-label\"\n                [class.form-check-label-sm]=\"componentHeight === ControlHeight.Small\"\n                [class.form-check-label-lg]=\"componentHeight === ControlHeight.Large\">\n                <ng-container *ngIf=\"checkboxtext\">{{ checkboxtext }}</ng-container>\n            </label>\n        </div>\n        <div\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"form-text\">\n            {{ helptext }}\n        </div>\n    </div>\n</div>\n", styles: [".form-check-sm{font-size:.875em}.form-check-lg{font-size:1.25em}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToLabelHeightPipe, name: "toLabelHeight" }, { kind: "component", type: SacTooltipComponent, selector: "sac-tooltip" }, { kind: "pipe", type: SacTestingAttributePipe, name: "testingattribute" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacCheckboxComponent, decorators: [{
             type: Component,
@@ -588,10 +796,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             useExisting: forwardRef(() => SacCheckboxComponent),
                             multi: true,
                         },
-                    ], viewProviders: [
-                        { provide: ControlContainer, useExisting: SacFormDirective },
-                    ], standalone: true, imports: [NgClass, NgIf], 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: [{
+                    ], standalone: true, imports: [
+                        NgClass,
+                        NgIf,
+                        SacToControlWidthCssPipe,
+                        SacToLabelWidthCssPipe,
+                        SacToLabelHeightPipe,
+                        SacTooltipComponent,
+                        SacTestingAttributePipe,
+                    ], template: "<div\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\"\n    class=\"row\"\n    [class.g-0]=\"disablelabel\"\n    [class.mb-3]=\"!stacked\">\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[!disablelabel && !stacked ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden']\">\n        <label\n            *ngIf=\"!disablelabel && !stacked\"\n            for=\"{{ name }}\"\n            class=\"col-form-label d-flex\"\n            [ngClass]=\"componentHeight | toLabelHeight\">\n            <div\n                class=\"text flex-grow-0\"\n                [class.flex-sm-grow-1]=\"splitlabelandhelptext\"\n                >{{ label }}</div\n            >\n            <sac-tooltip\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ms-1\">\n                </span>\n            </sac-tooltip>\n        </label>\n    </div>\n    <div\n        class=\"align-self-center col-12\"\n        [ngClass]=\"[!disablelabel && !stacked ? (this.labelSizes | toControlWidthCss) : '']\">\n        <div\n            class=\"form-check\"\n            [class.form-switch]=\"checkboxstyle === 'switch'\"\n            [attr.role]=\"checkboxstyle === 'switch' ? 'switch' : null\"\n            [class.form-check-sm]=\"componentHeight === ControlHeight.Small\"\n            [class.form-check-lg]=\"componentHeight === ControlHeight.Large\">\n            <input\n                class=\"form-check-input\"\n                [class.form-check-input-sm]=\"componentHeight === ControlHeight.Small\"\n                [class.form-check-input-lg]=\"componentHeight === ControlHeight.Large\"\n                id=\"{{ name }}\"\n                name=\"{{ name }}\"\n                type=\"checkbox\"\n                [checked]=\"value\"\n                (blur)=\"onTouch()\"\n                (change)=\"setValue($event.target.checked)\"\n                [disabled]=\"isdisabled\" />\n            <label\n                for=\"{{ name }}\"\n                class=\"form-check-label\"\n                [class.form-check-label-sm]=\"componentHeight === ControlHeight.Small\"\n                [class.form-check-label-lg]=\"componentHeight === ControlHeight.Large\">\n                <ng-container *ngIf=\"checkboxtext\">{{ checkboxtext }}</ng-container>\n            </label>\n        </div>\n        <div\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"form-text\">\n            {{ helptext }}\n        </div>\n    </div>\n</div>\n", styles: [".form-check-sm{font-size:.875em}.form-check-lg{font-size:1.25em}\n"] }]
+        }], ctorParameters: function () { return [{ type: SacFormLayoutDirective, decorators: [{
                     type: Host
                 }, {
                     type: Optional
@@ -601,15 +815,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Radiobuttons Group Komponente
  */
 class SacRadiobuttonsComponent extends SacRadiobuttonsCommon {
+    // #region Constructors
     /**
-     * Konstruktor
-     * @param parent Formular
-     * @param injector Angular Dependency Injection Service
+     * Constructor
+     * @param formLayout SacFormLayout to define scoped layout settings
+     * @param injector Injector for injecting services
      */
-    constructor(parent, injector) {
-        super(parent, injector);
+    constructor(formLayout, injector) {
+        super(formLayout, injector);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacRadiobuttonsComponent, deps: [{ token: SacFormDirective, host: true, optional: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacRadiobuttonsComponent, deps: [{ token: SacFormLayoutDirective, host: true, optional: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SacRadiobuttonsComponent, isStandalone: true, selector: "sac-radiobuttons", providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -621,9 +836,7 @@ class SacRadiobuttonsComponent extends SacRadiobuttonsCommon {
                 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>", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], viewProviders: [
-            { provide: ControlContainer, useExisting: SacFormDirective },
-        ] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\"\n    class=\"row mb-3\"\n    [class.g-0]=\"disablelabel\">\n    <div\n        *ngIf=\"disablelabel === false\"\n        class=\"col-12 pt-0\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden']\">\n        <label\n            class=\"col-form-label d-flex\"\n            [ngClass]=\"componentHeight | toLabelHeight\"\n            *ngIf=\"!disablelabel\">\n            <div\n                class=\"text flex-grow-0\"\n                [class.flex-sm-grow-1]=\"splitlabelandhelptext\"\n                >{{ label }}</div\n            >\n            <sac-tooltip\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ms-1\">\n                </span>\n            </sac-tooltip>\n        </label>\n    </div>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.pt-1]=\"componentHeight === ControlHeight.Small\"\n        [class.pt-2]=\"componentHeight !== ControlHeight.Small\">\n        <ng-content></ng-content>\n        <div\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"form-text\"\n            >{{ helptext }}</div\n        >\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToLabelHeightPipe, name: "toLabelHeight" }, { kind: "component", type: SacTooltipComponent, selector: "sac-tooltip" }, { kind: "pipe", type: SacTestingAttributePipe, name: "testingattribute" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacRadiobuttonsComponent, decorators: [{
             type: Component,
@@ -638,10 +851,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             useExisting: forwardRef(() => SacRadiobuttonsComponent),
                             multi: true,
                         },
-                    ], viewProviders: [
-                        { provide: ControlContainer, useExisting: SacFormDirective },
-                    ], standalone: true, imports: [NgIf, NgClass], 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: [{
+                    ], standalone: true, imports: [
+                        NgIf,
+                        NgClass,
+                        SacToControlWidthCssPipe,
+                        SacToLabelWidthCssPipe,
+                        SacToLabelHeightPipe,
+                        SacTooltipComponent,
+                        SacTestingAttributePipe,
+                    ], template: "<div\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\"\n    class=\"row mb-3\"\n    [class.g-0]=\"disablelabel\">\n    <div\n        *ngIf=\"disablelabel === false\"\n        class=\"col-12 pt-0\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden']\">\n        <label\n            class=\"col-form-label d-flex\"\n            [ngClass]=\"componentHeight | toLabelHeight\"\n            *ngIf=\"!disablelabel\">\n            <div\n                class=\"text flex-grow-0\"\n                [class.flex-sm-grow-1]=\"splitlabelandhelptext\"\n                >{{ label }}</div\n            >\n            <sac-tooltip\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ms-1\">\n                </span>\n            </sac-tooltip>\n        </label>\n    </div>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.pt-1]=\"componentHeight === ControlHeight.Small\"\n        [class.pt-2]=\"componentHeight !== ControlHeight.Small\">\n        <ng-content></ng-content>\n        <div\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"form-text\"\n            >{{ helptext }}</div\n        >\n    </div>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: SacFormLayoutDirective, decorators: [{
                     type: Host
                 }, {
                     type: Optional
@@ -651,22 +870,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Radiobutton Komponente
  */
 class SacRadiobuttonComponent extends SacRadiobuttonCommon {
+    // #region Constructors
     /**
      * Konstruktor
      * @param SacRadioButtons Radio Buttons Group Komponente
+     * @param formlayout SacFormLayoutCommon to define scoped layout settings
+     * @param injector Injector for injecting services
      */
-    constructor(sacRadioButtons) {
-        super(sacRadioButtons);
+    constructor(sacRadioButtons, formLayout, injector) {
+        super(sacRadioButtons, formLayout, injector);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacRadiobuttonComponent, deps: [{ token: SacRadiobuttonsComponent, host: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SacRadiobuttonComponent, isStandalone: true, 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>", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacRadiobuttonComponent, deps: [{ token: SacRadiobuttonsComponent, host: true }, { token: SacFormLayoutDirective, host: true, optional: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SacRadiobuttonComponent, isStandalone: true, selector: "sac-radiobutton", usesInheritance: true, ngImport: i0, template: "<div\n    class=\"form-check\"\n    [class.form-check-sm]=\"componentHeight === ControlHeight.Small\"\n    [class.form-check-lg]=\"componentHeight === ControlHeight.Large\"\n    *ngIf=\"hidden === false\">\n    <input\n        id=\"{{ getName }}_{{ getIndex }}\"\n        name=\"{{ getName }}\"\n        type=\"radio\"\n        class=\"form-check-input\"\n        [class.form-check-input-sm]=\"componentHeight === ControlHeight.Small\"\n        [class.form-check-input-lg]=\"componentHeight === ControlHeight.Large\"\n        [value]=\"value\"\n        [checked]=\"checked\"\n        (change)=\"ChangeEvent()\"\n        [disabled]=\"isDisabled\" />\n    <label\n        for=\"{{ getName }}_{{ getIndex }}\"\n        class=\"form-check-label\"\n        [class.form-check-label-sm]=\"componentHeight === ControlHeight.Small\"\n        [class.form-check-label-lg]=\"componentHeight === ControlHeight.Large\">\n        <ng-template *ngTemplateOutlet=\"labeltemplate || defaultItemLabelTemplate; context: { label: label }\"> </ng-template>\n    </label>\n</div>\n\n<ng-template\n    #defaultItemLabelTemplate\n    let-label=\"label\">\n    <ng-container>{{ label }}</ng-container>\n</ng-template>\n", styles: [".form-check-lg{padding-left:1.75rem}.form-check-input{width:1rem;height:1rem}.form-check-input-sm{width:.875rem;height:.875rem;margin-top:.4rem}.form-check-input-lg{width:1.25rem;height:1.25rem;margin-left:-1.75rem;margin-top:.4rem}.form-check-label-sm{font-size:.875rem}.form-check-label-lg{font-size:1.25rem}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacRadiobuttonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sac-radiobutton', standalone: true, imports: [NgIf, NgTemplateOutlet], 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>" }]
+            args: [{ selector: 'sac-radiobutton', standalone: true, imports: [NgIf, NgTemplateOutlet, SacTooltipComponent], template: "<div\n    class=\"form-check\"\n    [class.form-check-sm]=\"componentHeight === ControlHeight.Small\"\n    [class.form-check-lg]=\"componentHeight === ControlHeight.Large\"\n    *ngIf=\"hidden === false\">\n    <input\n        id=\"{{ getName }}_{{ getIndex }}\"\n        name=\"{{ getName }}\"\n        type=\"radio\"\n        class=\"form-check-input\"\n        [class.form-check-input-sm]=\"componentHeight === ControlHeight.Small\"\n        [class.form-check-input-lg]=\"componentHeight === ControlHeight.Large\"\n        [value]=\"value\"\n        [checked]=\"checked\"\n        (change)=\"ChangeEvent()\"\n        [disabled]=\"isDisabled\" />\n    <label\n        for=\"{{ getName }}_{{ getIndex }}\"\n        class=\"form-check-label\"\n        [class.form-check-label-sm]=\"componentHeight === ControlHeight.Small\"\n        [class.form-check-label-lg]=\"componentHeight === ControlHeight.Large\">\n        <ng-template *ngTemplateOutlet=\"labeltemplate || defaultItemLabelTemplate; context: { label: label }\"> </ng-template>\n    </label>\n</div>\n\n<ng-template\n    #defaultItemLabelTemplate\n    let-label=\"label\">\n    <ng-container>{{ label }}</ng-container>\n</ng-template>\n", styles: [".form-check-lg{padding-left:1.75rem}.form-check-input{width:1rem;height:1rem}.form-check-input-sm{width:.875rem;height:.875rem;margin-top:.4rem}.form-check-input-lg{width:1.25rem;height:1.25rem;margin-left:-1.75rem;margin-top:.4rem}.form-check-label-sm{font-size:.875rem}.form-check-label-lg{font-size:1.25rem}\n"] }]
         }], ctorParameters: function () { return [{ type: SacRadiobuttonsComponent, decorators: [{
                     type: Host
-                }] }]; } });
+                }] }, { type: SacFormLayoutDirective, decorators: [{
+                    type: Host
+                }, {
+                    type: Optional
+                }] }, { type: i0.Injector }]; } });
 
 class SACBootstrap5CheckboxModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SACBootstrap5CheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -712,7 +938,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 class SACBootstrap5ContextmenuModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SACBootstrap5ContextmenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SACBootstrap5ContextmenuModule, imports: [CommonModule, SacContextmenuComponent,
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SACBootstrap5ContextmenuModule, imports: [CommonModule,
+            SacContextmenuComponent,
             SacContextmenuItemButtonComponent,
             SacContextmenuItemSplitterComponent,
             SacContextmenuAnchorDirective,
@@ -725,11 +952,14 @@ class SACBootstrap5ContextmenuModule {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SACBootstrap5ContextmenuModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, SacContextmenuComponent,
+                    imports: [
+                        CommonModule,
+                        SacContextmenuComponent,
                         SacContextmenuItemButtonComponent,
                         SacContextmenuItemSplitterComponent,
                         SacContextmenuAnchorDirective,
-                        SacContextmenuContainerDirective],
+                        SacContextmenuContainerDirective,
+                    ],
                     exports: [
                         SacContextmenuComponent,
                         SacContextmenuItemButtonComponent,
@@ -744,36 +974,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  */
 class SacDateSelectorComponent extends SacDateSelectorCommon {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacDateSelectorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SacDateSelectorComponent, isStandalone: true, 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", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SacDateSelectorComponent, isStandalone: true, selector: "sac-dateselector", usesInheritance: true, ngImport: i0, template: "<div\n    class=\"calendar-selector\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <div *ngIf=\"dateselection\">\n        <div class=\"container\">\n            <div class=\"row\">\n                <div class=\"col text-start\">\n                    <a (click)=\"monthBack()\"><span [class]=\"iconMonthPrev\"></span></a>\n                </div>\n                <div class=\"col text-center\">{{ month + 1 }}/{{ year }}</div>\n                <div class=\"col text-end\">\n                    <a (click)=\"monthNext()\"><span [class]=\"iconMonthNext\"></span></a>\n                </div>\n            </div>\n        </div>\n        <div></div>\n        <div class=\"container\">\n            <div class=\"row\">\n                <ng-container *ngFor=\"let week of dates; let i = index\">\n                    <ng-container *ngFor=\"let item of week\">\n                        <div\n                            class=\"p-2 col text-center\"\n                            [ngStyle]=\"{ cursor: item.isenabled ? 'pointer' : null }\"\n                            [ngClass]=\"{ 'day-current': item.iscurrent, 'day-selected': item.isselected, 'day-new': item.isnew, 'day-disabled': !item.isenabled }\"\n                            (click)=\"selectDate(item)\"\n                            >{{ item.displaytext }}</div\n                        >\n                    </ng-container>\n                    <div class=\"w-100\"></div>\n                </ng-container>\n            </div>\n        </div>\n    </div>\n    <div\n        class=\"d-flex justify-content-start\"\n        *ngIf=\"timeselection\">\n        <div class=\"p-2\">\n            <div class=\"form-group\">\n                <label>Stunde</label>\n                <input\n                    type=\"number\"\n                    class=\"form-control form-control-sm\"\n                    [value]=\"getHours()\"\n                    (input)=\"setHours($event.target.value)\"\n                    min=\"0\"\n                    max=\"23\" />\n            </div>\n        </div>\n        <div class=\"p-2\">\n            <div class=\"form-group\">\n                <label>Minute</label>\n                <input\n                    type=\"number\"\n                    class=\"form-control form-control-sm\"\n                    [value]=\"getMinutes()\"\n                    (input)=\"setMinutes($event.target.value)\"\n                    min=\"0\"\n                    max=\"59\" />\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-row\">\n        <div class=\"flex-grow-1 p-2\">\n            <button\n                type=\"button\"\n                class=\"btn btn-secondary\"\n                (click)=\"setToday()\">\n                Heute\n            </button>\n        </div>\n        <div class=\"p-2\">\n            <button\n                type=\"button\"\n                class=\"btn btn-secondary\"\n                (click)=\"resetSelection()\">\n                Reset\n            </button>\n        </div>\n        <div class=\"p-2\">\n            <button\n                type=\"button\"\n                class=\"btn btn-primary\"\n                (click)=\"applySelection()\">\n                Apply\n            </button>\n        </div>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SacTestingAttributePipe, name: "testingattribute" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacDateSelectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sac-dateselector', standalone: true, imports: [
-                        NgIf,
-                        NgFor,
-                        NgStyle,
-                        NgClass,
-                    ], 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" }]
+            args: [{ selector: 'sac-dateselector', standalone: true, imports: [NgIf, NgFor, NgStyle, NgClass, SacTestingAttributePipe], template: "<div\n    class=\"calendar-selector\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <div *ngIf=\"dateselection\">\n        <div class=\"container\">\n            <div class=\"row\">\n                <div class=\"col text-start\">\n                    <a (click)=\"monthBack()\"><span [class]=\"iconMonthPrev\"></span></a>\n                </div>\n                <div class=\"col text-center\">{{ month + 1 }}/{{ year }}</div>\n                <div class=\"col text-end\">\n                    <a (click)=\"monthNext()\"><span [class]=\"iconMonthNext\"></span></a>\n                </div>\n            </div>\n        </div>\n        <div></div>\n        <div class=\"container\">\n            <div class=\"row\">\n                <ng-container *ngFor=\"let week of dates; let i = index\">\n                    <ng-container *ngFor=\"let item of week\">\n                        <div\n                            class=\"p-2 col text-center\"\n                            [ngStyle]=\"{ cursor: item.isenabled ? 'pointer' : null }\"\n                            [ngClass]=\"{ 'day-current': item.iscurrent, 'day-selected': item.isselected, 'day-new': item.isnew, 'day-disabled': !item.isenabled }\"\n                            (click)=\"selectDate(item)\"\n                            >{{ item.displaytext }}</div\n                        >\n                    </ng-container>\n                    <div class=\"w-100\"></div>\n                </ng-container>\n            </div>\n        </div>\n    </div>\n    <div\n        class=\"d-flex justify-content-start\"\n        *ngIf=\"timeselection\">\n        <div class=\"p-2\">\n            <div class=\"form-group\">\n                <label>Stunde</label>\n                <input\n                    type=\"number\"\n                    class=\"form-control form-control-sm\"\n                    [value]=\"getHours()\"\n                    (input)=\"setHours($event.target.value)\"\n                    min=\"0\"\n                    max=\"23\" />\n            </div>\n        </div>\n        <div class=\"p-2\">\n            <div class=\"form-group\">\n                <label>Minute</label>\n                <input\n                    type=\"number\"\n                    class=\"form-control form-control-sm\"\n                    [value]=\"getMinutes()\"\n                    (input)=\"setMinutes($event.target.value)\"\n                    min=\"0\"\n                    max=\"59\" />\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-row\">\n        <div class=\"flex-grow-1 p-2\">\n            <button\n                type=\"button\"\n                class=\"btn btn-secondary\"\n                (click)=\"setToday()\">\n                Heute\n            </button>\n        </div>\n        <div class=\"p-2\">\n            <button\n                type=\"button\"\n                class=\"btn btn-secondary\"\n                (click)=\"resetSelection()\">\n                Reset\n            </button>\n        </div>\n        <div class=\"p-2\">\n            <button\n                type=\"button\"\n                class=\"btn btn-primary\"\n                (click)=\"applySelection()\">\n                Apply\n            </button>\n        </div>\n    </div>\n</div>\n" }]
         }] });
 
+// #region Variables
 /**
  * Referenz auf Moment.JS
  */
 const moment = moment_['default'];
+// #endregion Variables
+// #region Exported Classes
 /**
  * Komponente für Datumauswahl
  */
 class SacDateComponent extends SacDateCommon {
+    // #region Constructors
     /**
-     * Konstruktor
-     * @param parent Formular
-     * @param injector Angular Dependency Injection Service
-     * @param _elementRef Referenz auf HTML DOM Element
+     * Constructor
+     * @param formLayout SacFormLayout to define scoped layout settings
+     * @param injector Injector for injecting services
+     * @param elementRef Reference to html dom element
+     * @param cdRef  Change Dectection Servie
      */
-    constructor(parent, injector, _elementRef) {
-        super(parent, injector, _elementRef);
+    constructor(formLayout, injector, elementRef, cdRef) {
+        super(formLayout, injector, elementRef, cdRef);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacDateComponent, deps: [{ token: SacFormDirective, host: true, optional: true }, { token: i0.Injector }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacDateComponent, deps: [{ token: SacFormLayoutDirective, host: true, optional: true }, { token: i0.Injector }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SacDateComponent, isStandalone: true, selector: "sac-date", providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -785,7 +1015,7 @@ class SacDateComponent extends SacDateCommon {
                 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", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IMaskDirective, selector: "[imask]", inputs: ["imask", "unmask", "imaskElement"], outputs: ["accept", "complete"], exportAs: ["imask"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: SacDateSelectorComponent, selector: "sac-dateselector" }], viewProviders: [{ provide: ControlContainer, useExisting: SacFormDirective }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"row mb-3\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\"\n    [class.g-0]=\"disablelabel\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12 position-relative\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n            <div\n                class=\"input-group\"\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\n                [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                <input\n                    id=\"{{ name }}\"\n                    name=\"{{ name }}\"\n                    type=\"text\"\n                    class=\"form-control\"\n                    [imask]=\"imaskDate\"\n                    [attr.placeholder]=\"placeholder\"\n                    [value]=\"valuestring\"\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\n                    [ngClass]=\"[componentHeight | toControlHeight]\"\n                    (blur)=\"onTouch()\"\n                    (accept)=\"setValueString($event)\"\n                    [disabled]=\"isdisabled\" />\n                <button\n                    #pickerbutton\n                    class=\"btn btn-secondary\"\n                    type=\"button\"\n                    (click)=\"showDateSelector()\"\n                    [disabled]=\"isdisabled\">\n                    <i [class]=\"IconSelector\"></i>\n                </button>\n                <div\n                    *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                    class=\"invalid-feedback\">\n                    {{ GetErrorMessage() | async }}\n                </div>\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n            <div\n                #picker\n                *ngIf=\"_showselector\">\n                <div\n                    class=\"popover fade show position-absolute bs-popover-auto\"\n                    role=\"tooltip\"\n                    [attr.data-popper-placement]=\"\n                        GetPickerPosition() === TooltipPosition.right\n                            ? 'right'\n                            : GetPickerPosition() === TooltipPosition.left\n                            ? 'left'\n                            : GetPickerPosition() === TooltipPosition.top || GetPickerPosition() === TooltipPosition.topend\n                            ? 'top'\n                            : GetPickerPosition() === TooltipPosition.bottom || GetPickerPosition() === TooltipPosition.bottomend\n                            ? 'bottom'\n                            : null\n                    \"\n                    [style.left.px]=\"posPopupLeft\"\n                    [style.top.px]=\"posPopupTop\">\n                    <div\n                        #pickerarrow\n                        class=\"popover-arrow position-absolute\"\n                        style=\"left: unset\"\n                        [style.top.px]=\"posArrowTop\"\n                        [style.left.px]=\"posArrowLeft\">\n                    </div>\n\n                    <div class=\"popover-body\">\n                        <sac-dateselector\n                            name=\"{{ name }}_picker\"\n                            [initialvalue]=\"value\"\n                            (selectdate)=\"dateselect($event)\"\n                            dateselection=\"true\"></sac-dateselector>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IMaskDirective, selector: "[imask]", inputs: ["imask", "unmask", "imaskElement"], outputs: ["accept", "complete"], exportAs: ["imask"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: SacDateSelectorComponent, selector: "sac-dateselector" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToLabelHeightPipe, name: "toLabelHeight" }, { kind: "pipe", type: SacToControlHeightPipe, name: "toControlHeight" }, { kind: "component", type: SacTooltipComponent, selector: "sac-tooltip" }, { kind: "pipe", type: SacTestingAttributePipe, name: "testingattribute" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacDateComponent, decorators: [{
             type: Component,
@@ -800,27 +1030,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             multi: true,
                             useExisting: forwardRef(() => SacDateComponent),
                         },
-                    ], viewProviders: [{ provide: ControlContainer, useExisting: SacFormDirective }], standalone: true, imports: [NgClass, IMaskDirective, NgIf, AsyncPipe, SacDateSelectorComponent], 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: [{
+                    ], standalone: true, imports: [
+                        NgClass,
+                        IMaskDirective,
+                        NgIf,
+                        AsyncPipe,
+                        SacDateSelectorComponent,
+                        SacToControlWidthCssPipe,
+                        SacToLabelWidthCssPipe,
+                        SacToLabelHeightPipe,
+                        SacToControlHeightPipe,
+                        SacTooltipComponent,
+                        SacTestingAttributePipe,
+                    ], template: "<div\n    class=\"row mb-3\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\"\n    [class.g-0]=\"disablelabel\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12 position-relative\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n            <div\n                class=\"input-group\"\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\n                [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                <input\n                    id=\"{{ name }}\"\n                    name=\"{{ name }}\"\n                    type=\"text\"\n                    class=\"form-control\"\n                    [imask]=\"imaskDate\"\n                    [attr.placeholder]=\"placeholder\"\n                    [value]=\"valuestring\"\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\n                    [ngClass]=\"[componentHeight | toControlHeight]\"\n                    (blur)=\"onTouch()\"\n                    (accept)=\"setValueString($event)\"\n                    [disabled]=\"isdisabled\" />\n                <button\n                    #pickerbutton\n                    class=\"btn btn-secondary\"\n                    type=\"button\"\n                    (click)=\"showDateSelector()\"\n                    [disabled]=\"isdisabled\">\n                    <i [class]=\"IconSelector\"></i>\n                </button>\n                <div\n                    *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                    class=\"invalid-feedback\">\n                    {{ GetErrorMessage() | async }}\n                </div>\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n            <div\n                #picker\n                *ngIf=\"_showselector\">\n                <div\n                    class=\"popover fade show position-absolute bs-popover-auto\"\n                    role=\"tooltip\"\n                    [attr.data-popper-placement]=\"\n                        GetPickerPosition() === TooltipPosition.right\n                            ? 'right'\n                            : GetPickerPosition() === TooltipPosition.left\n                            ? 'left'\n                            : GetPickerPosition() === TooltipPosition.top || GetPickerPosition() === TooltipPosition.topend\n                            ? 'top'\n                            : GetPickerPosition() === TooltipPosition.bottom || GetPickerPosition() === TooltipPosition.bottomend\n                            ? 'bottom'\n                            : null\n                    \"\n                    [style.left.px]=\"posPopupLeft\"\n                    [style.top.px]=\"posPopupTop\">\n                    <div\n                        #pickerarrow\n                        class=\"popover-arrow position-absolute\"\n                        style=\"left: unset\"\n                        [style.top.px]=\"posArrowTop\"\n                        [style.left.px]=\"posArrowLeft\">\n                    </div>\n\n                    <div class=\"popover-body\">\n                        <sac-dateselector\n                            name=\"{{ name }}_picker\"\n                            [initialvalue]=\"value\"\n                            (selectdate)=\"dateselect($event)\"\n                            dateselection=\"true\"></sac-dateselector>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: SacFormLayoutDirective, decorators: [{
                     type: Host
                 }, {
                     type: Optional
-                }] }, { type: i0.Injector }, { type: i0.ElementRef }]; } });
+                }] }, { type: i0.Injector }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
 
 /**
  * Date und Time Komponente
  */
 class SacDateTimeComponent extends SacDateTimeCommon {
+    // #region Constructors
     /**
-     * Konstruktor
-     * @param parent Formular
-     * @param injector Angular Dependency Injection Service
-     * @param _elementRef DOM Element Referenz
+     * Constructor
+     * @param formLayout SacFormLayout to define scoped layout settings
+     * @param injector Injector for injecting services
+     * @param elementRef Reference to html dom element
+     * @param cdRef  Change Dectection Servie
      */
-    constructor(parent, injector, _elementRef) {
-        super(parent, injector, _elementRef);
+    constructor(formLayout, injector, elementRef, cdRef) {
+        super(formLayout, injector, elementRef, cdRef);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacDateTimeComponent, deps: [{ token: SacFormDirective, host: true, optional: true }, { token: i0.Injector }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacDateTimeComponent, deps: [{ token: SacFormLayoutDirective, host: true, optional: true }, { token: i0.Injector }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SacDateTimeComponent, isStandalone: true, selector: "sac-datetime", providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -832,7 +1076,7 @@ class SacDateTimeComponent extends SacDateTimeCommon {
                 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", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IMaskDirective, selector: "[imask]", inputs: ["imask", "unmask", "imaskElement"], outputs: ["accept", "complete"], exportAs: ["imask"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: SacDateSelectorComponent, selector: "sac-dateselector" }], viewProviders: [{ provide: ControlContainer, useExisting: SacFormDirective }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"row mb-3\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\"\n    [class.g-0]=\"disablelabel\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12 position-relative\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n            <div\n                class=\"input-group\"\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\n                [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                <input\n                    id=\"{{ name }}\"\n                    name=\"{{ name }}\"\n                    type=\"text\"\n                    class=\"form-control\"\n                    [imask]=\"imaskDate\"\n                    [attr.placeholder]=\"placeholder\"\n                    [value]=\"valuestring\"\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\n                    [ngClass]=\"[componentHeight | toControlHeight]\"\n                    (blur)=\"onTouch()\"\n                    (accept)=\"setValueString($event)\"\n                    [disabled]=\"isdisabled\" />\n                <button\n                    #pickerbutton\n                    class=\"btn btn-secondary\"\n                    type=\"button\"\n                    (click)=\"showDateSelector()\"\n                    [disabled]=\"isdisabled\">\n                    <i [class]=\"IconSelector\"></i>\n                </button>\n                <div\n                    *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                    class=\"invalid-feedback\">\n                    {{ GetErrorMessage() | async }}\n                </div>\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n            <div\n                #picker\n                *ngIf=\"_showselector\">\n                <div\n                    class=\"popover fade show position-absolute bs-popover-auto\"\n                    role=\"tooltip\"\n                    [attr.data-popper-placement]=\"\n                        GetPickerPosition() === TooltipPosition.right\n                            ? 'right'\n                            : GetPickerPosition() === TooltipPosition.left\n                            ? 'left'\n                            : GetPickerPosition() === TooltipPosition.top || GetPickerPosition() === TooltipPosition.topend\n                            ? 'top'\n                            : GetPickerPosition() === TooltipPosition.bottom || GetPickerPosition() === TooltipPosition.bottomend\n                            ? 'bottom'\n                            : null\n                    \"\n                    [style.left.px]=\"posPopupLeft\"\n                    [style.top.px]=\"posPopupTop\">\n                    <div\n                        #pickerarrow\n                        class=\"popover-arrow position-absolute\"\n                        style=\"left: unset\"\n                        [style.top.px]=\"posArrowTop\"\n                        [style.left.px]=\"posArrowLeft\">\n                    </div>\n\n                    <div class=\"popover-body\">\n                        <sac-dateselector\n                            name=\"{{ name }}_picker\"\n                            [initialvalue]=\"value\"\n                            (selectdate)=\"dateselect($event)\"\n                            dateselection=\"true\"\n                            timeselection=\"true\"></sac-dateselector>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IMaskDirective, selector: "[imask]", inputs: ["imask", "unmask", "imaskElement"], outputs: ["accept", "complete"], exportAs: ["imask"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: SacDateSelectorComponent, selector: "sac-dateselector" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToLabelHeightPipe, name: "toLabelHeight" }, { kind: "pipe", type: SacToControlHeightPipe, name: "toControlHeight" }, { kind: "component", type: SacTooltipComponent, selector: "sac-tooltip" }, { kind: "pipe", type: SacTestingAttributePipe, name: "testingattribute" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacDateTimeComponent, decorators: [{
             type: Component,
@@ -847,27 +1091,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             multi: true,
                             useExisting: forwardRef(() => SacDateTimeComponent),
                         },
-                    ], viewProviders: [{ provide: ControlContainer, useExisting: SacFormDirective }], standalone: true, imports: [NgClass, IMaskDirective, NgIf, AsyncPipe, SacDateSelectorComponent], 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: [{
+                    ], standalone: true, imports: [
+                        NgClass,
+                        IMaskDirective,
+                        NgIf,
+                        AsyncPipe,
+                        SacDateSelectorComponent,
+                        SacToControlWidthCssPipe,
+                        SacToLabelWidthCssPipe,
+                        SacToLabelHeightPipe,
+                        SacToControlHeightPipe,
+                        SacTooltipComponent,
+                        SacTestingAttributePipe,
+                    ], template: "<div\n    class=\"row mb-3\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\"\n    [class.g-0]=\"disablelabel\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12 position-relative\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n            <div\n                class=\"input-group\"\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\n                [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                <input\n                    id=\"{{ name }}\"\n                    name=\"{{ name }}\"\n                    type=\"text\"\n                    class=\"form-control\"\n                    [imask]=\"imaskDate\"\n                    [attr.placeholder]=\"placeholder\"\n                    [value]=\"valuestring\"\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\n                    [ngClass]=\"[componentHeight | toControlHeight]\"\n                    (blur)=\"onTouch()\"\n                    (accept)=\"setValueString($event)\"\n                    [disabled]=\"isdisabled\" />\n                <button\n                    #pickerbutton\n                    class=\"btn btn-secondary\"\n                    type=\"button\"\n                    (click)=\"showDateSelector()\"\n                    [disabled]=\"isdisabled\">\n                    <i [class]=\"IconSelector\"></i>\n                </button>\n                <div\n                    *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                    class=\"invalid-feedback\">\n                    {{ GetErrorMessage() | async }}\n                </div>\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n            <div\n                #picker\n                *ngIf=\"_showselector\">\n                <div\n                    class=\"popover fade show position-absolute bs-popover-auto\"\n                    role=\"tooltip\"\n                    [attr.data-popper-placement]=\"\n                        GetPickerPosition() === TooltipPosition.right\n                            ? 'right'\n                            : GetPickerPosition() === TooltipPosition.left\n                            ? 'left'\n                            : GetPickerPosition() === TooltipPosition.top || GetPickerPosition() === TooltipPosition.topend\n                            ? 'top'\n                            : GetPickerPosition() === TooltipPosition.bottom || GetPickerPosition() === TooltipPosition.bottomend\n                            ? 'bottom'\n                            : null\n                    \"\n                    [style.left.px]=\"posPopupLeft\"\n                    [style.top.px]=\"posPopupTop\">\n                    <div\n                        #pickerarrow\n                        class=\"popover-arrow position-absolute\"\n                        style=\"left: unset\"\n                        [style.top.px]=\"posArrowTop\"\n                        [style.left.px]=\"posArrowLeft\">\n                    </div>\n\n                    <div class=\"popover-body\">\n                        <sac-dateselector\n                            name=\"{{ name }}_picker\"\n                            [initialvalue]=\"value\"\n                            (selectdate)=\"dateselect($event)\"\n                            dateselection=\"true\"\n                            timeselection=\"true\"></sac-dateselector>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: SacFormLayoutDirective, decorators: [{
                     type: Host
                 }, {
                     type: Optional
-                }] }, { type: i0.Injector }, { type: i0.ElementRef }]; } });
+                }] }, { type: i0.Injector }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
 
 /**
  * Time Auswahl Komponente
  */
 class SacTimeComponent extends SacTimeCommon {
+    // #region Constructors
     /**
-     * Konstruktor
-     * @param parent Formular
-     * @param injector Angular Dependency Injection Service
-     * @param _elementRef DOM Element Referenz
+     * Constructor
+     * @param formLayout SacFormLayout to define scoped layout settings
+     * @param injector Injector for injecting services
+     * @param elementRef Reference to html dom element
+     * @param cdRef  Change Dectection Servie
      */
-    constructor(parent, injector, _elementRef) {
-        super(parent, injector, _elementRef);
+    constructor(formLayout, injector, elementRef, cdRef) {
+        super(formLayout, injector, elementRef, cdRef);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacTimeComponent, deps: [{ token: SacFormDirective, host: true, optional: true }, { token: i0.Injector }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacTimeComponent, deps: [{ token: SacFormLayoutDirective, host: true, optional: true }, { token: i0.Injector }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SacTimeComponent, isStandalone: true, selector: "sac-time", providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -879,7 +1137,7 @@ class SacTimeComponent extends SacTimeCommon {
                 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", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IMaskDirective, selector: "[imask]", inputs: ["imask", "unmask", "imaskElement"], outputs: ["accept", "complete"], exportAs: ["imask"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: SacDateSelectorComponent, selector: "sac-dateselector" }], viewProviders: [{ provide: ControlContainer, useExisting: SacFormDirective }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"row mb-3\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\"\n    [class.g-0]=\"disablelabel\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12 position-relative\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n            <div\n                class=\"input-group\"\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\n                [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                <input\n                    id=\"{{ name }}\"\n                    name=\"{{ name }}\"\n                    type=\"text\"\n                    class=\"form-control\"\n                    [imask]=\"imaskDate\"\n                    [attr.placeholder]=\"placeholder\"\n                    [value]=\"valuestring\"\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\n                    [ngClass]=\"[componentHeight | toControlHeight]\"\n                    (blur)=\"onTouch()\"\n                    (accept)=\"setValueString($event)\"\n                    [disabled]=\"isdisabled\" />\n                <button\n                    #pickerbutton\n                    class=\"btn btn-secondary\"\n                    type=\"button\"\n                    (click)=\"showTimeSelector()\"\n                    [disabled]=\"isdisabled\">\n                    <i [class]=\"IconSelector\"></i>\n                </button>\n                <div\n                    *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                    class=\"invalid-feedback\">\n                    {{ GetErrorMessage() | async }}\n                </div>\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n            <div\n                #picker\n                *ngIf=\"_showselector\">\n                <div\n                    class=\"popover fade show position-absolute bs-popover-auto\"\n                    role=\"tooltip\"\n                    [attr.data-popper-placement]=\"\n                        GetPickerPosition() === TooltipPosition.right\n                            ? 'right'\n                            : GetPickerPosition() === TooltipPosition.left\n                            ? 'left'\n                            : GetPickerPosition() === TooltipPosition.top || GetPickerPosition() === TooltipPosition.topend\n                            ? 'top'\n                            : GetPickerPosition() === TooltipPosition.bottom || GetPickerPosition() === TooltipPosition.bottomend\n                            ? 'bottom'\n                            : null\n                    \"\n                    [style.left.px]=\"posPopupLeft\"\n                    [style.top.px]=\"posPopupTop\">\n                    <div\n                        #pickerarrow\n                        class=\"popover-arrow position-absolute\"\n                        style=\"left: unset\"\n                        [style.top.px]=\"posArrowTop\"\n                        [style.left.px]=\"posArrowLeft\">\n                    </div>\n\n                    <div class=\"popover-body\">\n                        <sac-dateselector\n                            name=\"{{ name }}_picker\"\n                            [initialvalue]=\"value\"\n                            (selectdate)=\"timeselect($event)\"\n                            timeselection=\"true\"></sac-dateselector>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IMaskDirective, selector: "[imask]", inputs: ["imask", "unmask", "imaskElement"], outputs: ["accept", "complete"], exportAs: ["imask"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: SacDateSelectorComponent, selector: "sac-dateselector" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToLabelHeightPipe, name: "toLabelHeight" }, { kind: "pipe", type: SacToControlHeightPipe, name: "toControlHeight" }, { kind: "component", type: SacTooltipComponent, selector: "sac-tooltip" }, { kind: "pipe", type: SacTestingAttributePipe, name: "testingattribute" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacTimeComponent, decorators: [{
             type: Component,
@@ -894,12 +1152,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             multi: true,
                             useExisting: forwardRef(() => SacTimeComponent),
                         },
-                    ], viewProviders: [{ provide: ControlContainer, useExisting: SacFormDirective }], standalone: true, imports: [NgClass, IMaskDirective, NgIf, AsyncPipe, SacDateSelectorComponent], 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: [{
+                    ], standalone: true, imports: [
+                        NgClass,
+                        IMaskDirective,
+                        NgIf,
+                        AsyncPipe,
+                        SacDateSelectorComponent,
+                        SacToControlWidthCssPipe,
+                        SacToLabelWidthCssPipe,
+                        SacToLabelHeightPipe,
+                        SacToControlHeightPipe,
+                        SacTooltipComponent,
+                        SacTestingAttributePipe,
+                    ], template: "<div\n    class=\"row mb-3\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\"\n    [class.g-0]=\"disablelabel\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12 position-relative\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n            <div\n                class=\"input-group\"\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\n                [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                <input\n                    id=\"{{ name }}\"\n                    name=\"{{ name }}\"\n                    type=\"text\"\n                    class=\"form-control\"\n                    [imask]=\"imaskDate\"\n                    [attr.placeholder]=\"placeholder\"\n                    [value]=\"valuestring\"\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\n                    [ngClass]=\"[componentHeight | toControlHeight]\"\n                    (blur)=\"onTouch()\"\n                    (accept)=\"setValueString($event)\"\n                    [disabled]=\"isdisabled\" />\n                <button\n                    #pickerbutton\n                    class=\"btn btn-secondary\"\n                    type=\"button\"\n                    (click)=\"showTimeSelector()\"\n                    [disabled]=\"isdisabled\">\n                    <i [class]=\"IconSelector\"></i>\n                </button>\n                <div\n                    *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                    class=\"invalid-feedback\">\n                    {{ GetErrorMessage() | async }}\n                </div>\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n            <div\n                #picker\n                *ngIf=\"_showselector\">\n                <div\n                    class=\"popover fade show position-absolute bs-popover-auto\"\n                    role=\"tooltip\"\n                    [attr.data-popper-placement]=\"\n                        GetPickerPosition() === TooltipPosition.right\n                            ? 'right'\n                            : GetPickerPosition() === TooltipPosition.left\n                            ? 'left'\n                            : GetPickerPosition() === TooltipPosition.top || GetPickerPosition() === TooltipPosition.topend\n                            ? 'top'\n                            : GetPickerPosition() === TooltipPosition.bottom || GetPickerPosition() === TooltipPosition.bottomend\n                            ? 'bottom'\n                            : null\n                    \"\n                    [style.left.px]=\"posPopupLeft\"\n                    [style.top.px]=\"posPopupTop\">\n                    <div\n                        #pickerarrow\n                        class=\"popover-arrow position-absolute\"\n                        style=\"left: unset\"\n                        [style.top.px]=\"posArrowTop\"\n                        [style.left.px]=\"posArrowLeft\">\n                    </div>\n\n                    <div class=\"popover-body\">\n                        <sac-dateselector\n                            name=\"{{ name }}_picker\"\n                            [initialvalue]=\"value\"\n                            (selectdate)=\"timeselect($event)\"\n                            timeselection=\"true\"></sac-dateselector>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: SacFormLayoutDirective, decorators: [{
                     type: Host
                 }, {
                     type: Optional
-                }] }, { type: i0.Injector }, { type: i0.ElementRef }]; } });
+                }] }, { type: i0.Injector }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
 
 class SACBootstrap5DateTimeModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SACBootstrap5DateTimeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -936,84 +1206,110 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }] });
 
 /**
- * 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>
+ * Erweiterung / Hooking für automatismen in Formular. Wird als Container für alle Controls benötigt.
  *
+ * @example Beispiel über Div Container
  *
- * (at)Component({
- * selector: 'sacInheritForm',
- * templateUrl: './subform.component.html'
- * })
- * export class SubFormComponent implements DoCheck {
+ * <div ngForm></div>
  *
- * (at)Input() mymodel;
- * (at)Output() mymodelChange = new EventEmitter();
+ * @example Beispiel über Form Tag
  *
- * ngDoCheck() {
- *   this.mymodelChange.next(this.mymodel);
- * }
- *}
+ * <form></form>
  *
  */
-class SacInheritFormDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacInheritFormDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SacInheritFormDirective, isStandalone: true, 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: "16.2.12", ngImport: i0, type: SacInheritFormDirective, decorators: [{
-            type: Directive,
+class SacFormDirective extends SacFormCommon {
+    // #endregion Properties
+    // #region Constructors
+    /**
+     * Konstruktor
+     * @param form Instanz von NgForm für eigene automatische Formular Logik
+     */
+    constructor(form) {
+        super(form);
+        // #region Properties
+        /**
+         * Setzt die Standard CSS Klasse für auf dem Form Container
+         */
+        this.cssClassForm = true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacFormDirective, deps: [{ token: i1$1.NgForm }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SacFormDirective, isStandalone: true, selector: "form:not([ngNoForm]):not([formGroup]),[ngForm]", host: { properties: { "class.form": "this.cssClassForm" } }, exportAs: ["sacform"], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacFormDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'form:not([ngNoForm]):not([formGroup]),[ngForm]',
+                    exportAs: 'sacform',
+                    standalone: true,
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.NgForm }]; }, propDecorators: { cssClassForm: [{
+                type: HostBinding,
+                args: ['class.form']
+            }] } });
+
+// #region Classes
+/**
+ * Directive to inherit an NgForm/NgForm from a parent component
+ */
+class SacInheritFormDirective extends SacFormCommon {
+    // #region Constructors
+    /**
+     * Construtor
+     * @param injector: injector to receive the NgForm instance
+     */
+    constructor(injector) {
+        super(injector.get(NgForm));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacInheritFormDirective, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SacInheritFormDirective, isStandalone: true, selector: "[sacInheritForm]", providers: [
+            {
+                provide: SacFormDirective,
+                useFactory: SACFORM_FACTORY,
+                deps: [[new SkipSelf(), SacFormDirective]],
+            },
+            {
+                provide: ControlContainer,
+                useFactory: NGFORM_FACTORY,
+                deps: [NgForm],
+            },
+        ], exportAs: ["sacinheritform"], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacInheritFormDirective, decorators: [{
+            type: Directive,
             args: [{
                     selector: '[sacInheritForm]',
+                    exportAs: 'sacinheritform',
+                    standalone: true,
                     providers: [
                         {
                             provide: SacFormDirective,
                             useFactory: SACFORM_FACTORY,
-                            deps: [[new SkipSelf(), SacFormDirective]]
-                        }, {
+                            deps: [[new SkipSelf(), SacFormDirective]],
+                        },
+                        {
                             provide: ControlContainer,
                             useFactory: NGFORM_FACTORY,
-                            deps: [NgForm]
-                        }
+                            deps: [NgForm],
+                        },
                     ],
-                    standalone: true
                 }]
-        }] });
+        }], ctorParameters: function () { return [{ type: i0.Injector }]; } });
+// #endregion Classes
+// #region Functions
+/**
+ * Factory Methode für NgForm
+ * @param form NgForm
+ */
+function NGFORM_FACTORY(form) {
+    return form;
+}
+/**
+ * Factory Methode für SacForm
+ * @param form SacFormular
+ */
+function SACFORM_FACTORY(form) {
+    return form;
+}
 
 class SACBootstrap5FormModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SACBootstrap5FormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -1041,6 +1337,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Paging Komponente
  */
 class SacPagingComponent extends SacPagingCommon {
+    // #region Constructors
     /**
      * Konstruktor
      * @param injector Angular Dependency Injection Service
@@ -1050,48 +1347,53 @@ class SacPagingComponent extends SacPagingCommon {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacPagingComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SacPagingComponent, isStandalone: true, selector: "sac-paging", providers: [
-            { provide: NG_VALUE_ACCESSOR, multi: true, useExisting: SacPagingComponent },
+            {
+                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", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"d-flex justify-content-between align-items-center flex-wrap\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\"\n    id=\"{{ name }}\">\n    <div\n        class=\"col-pagination order-2 order-md-1\"\n        id=\"{{ name }}_pages\">\n        <ul class=\"pagination mb-4 mb-md-0\">\n            <li\n                class=\"page-item\"\n                [ngClass]=\"{ 'aspNetDisabled disabled': activePageIndex === firstPageIndex }\">\n                <a\n                    class=\"page-link\"\n                    (click)=\"firstPage()\"\n                    >\u00AB</a\n                >\n            </li>\n            <li\n                class=\"page-item\"\n                *ngFor=\"let page of paginators; let i = index\"\n                [ngClass]=\"{ active: page === activePageIndex }\">\n                <a\n                    class=\"page-link\"\n                    (click)=\"changePage(page)\"\n                    >{{ page + 1 }}</a\n                >\n            </li>\n            <li\n                class=\"page-item\"\n                [ngClass]=\"{ 'aspNetDisabled disabled': activePageIndex === lastPageIndex }\">\n                <a\n                    class=\"page-link\"\n                    (click)=\"lastPage()\"\n                    >\u00BB</a\n                >\n            </li>\n        </ul>\n    </div>\n    <div class=\"col-summary order-1 order-md-2\">\n        <div class=\"mb-4 mb-md-0 mr-4 mb-md-0\">{{ PagingText | async }}</div>\n    </div>\n    <div\n        class=\"col-pagesize order-3\"\n        *ngIf=\"!pagesizedisabled\">\n        <div\n            class=\"d-flex align-items-center\"\n            id=\"{{ name }}_size\">\n            <select\n                class=\"form-select form-select-sm\"\n                style=\"width: 85px\"\n                id=\"{{ name }}_pagesize\"\n                [ngModel]=\"pageSize\"\n                (ngModelChange)=\"changePageSize($event)\">\n                <option\n                    [ngValue]=\"size\"\n                    *ngFor=\"let size of getPageSizes\">\n                    {{ size }}\n                </option>\n            </select>\n            <div class=\"ms-2\">{{ PageSizeText | async }}</div>\n        </div>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: SacTestingAttributePipe, name: "testingattribute" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacPagingComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sac-paging', providers: [
-                        { provide: NG_VALUE_ACCESSOR, multi: true, useExisting: SacPagingComponent },
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            multi: true,
+                            useExisting: SacPagingComponent,
+                        },
                         {
                             provide: NG_VALIDATORS,
                             multi: true,
                             useExisting: forwardRef(() => SacPagingComponent),
                         },
-                    ], standalone: true, imports: [
-                        NgClass,
-                        NgFor,
-                        NgIf,
-                        FormsModule,
-                        AsyncPipe,
-                    ], 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" }]
+                    ], standalone: true, imports: [NgClass, NgFor, NgIf, FormsModule, AsyncPipe, SacTestingAttributePipe], template: "<div\n    class=\"d-flex justify-content-between align-items-center flex-wrap\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\"\n    id=\"{{ name }}\">\n    <div\n        class=\"col-pagination order-2 order-md-1\"\n        id=\"{{ name }}_pages\">\n        <ul class=\"pagination mb-4 mb-md-0\">\n            <li\n                class=\"page-item\"\n                [ngClass]=\"{ 'aspNetDisabled disabled': activePageIndex === firstPageIndex }\">\n                <a\n                    class=\"page-link\"\n                    (click)=\"firstPage()\"\n                    >\u00AB</a\n                >\n            </li>\n            <li\n                class=\"page-item\"\n                *ngFor=\"let page of paginators; let i = index\"\n                [ngClass]=\"{ active: page === activePageIndex }\">\n                <a\n                    class=\"page-link\"\n                    (click)=\"changePage(page)\"\n                    >{{ page + 1 }}</a\n                >\n            </li>\n            <li\n                class=\"page-item\"\n                [ngClass]=\"{ 'aspNetDisabled disabled': activePageIndex === lastPageIndex }\">\n                <a\n                    class=\"page-link\"\n                    (click)=\"lastPage()\"\n                    >\u00BB</a\n                >\n            </li>\n        </ul>\n    </div>\n    <div class=\"col-summary order-1 order-md-2\">\n        <div class=\"mb-4 mb-md-0 mr-4 mb-md-0\">{{ PagingText | async }}</div>\n    </div>\n    <div\n        class=\"col-pagesize order-3\"\n        *ngIf=\"!pagesizedisabled\">\n        <div\n            class=\"d-flex align-items-center\"\n            id=\"{{ name }}_size\">\n            <select\n                class=\"form-select form-select-sm\"\n                style=\"width: 85px\"\n                id=\"{{ name }}_pagesize\"\n                [ngModel]=\"pageSize\"\n                (ngModelChange)=\"changePageSize($event)\">\n                <option\n                    [ngValue]=\"size\"\n                    *ngFor=\"let size of getPageSizes\">\n                    {{ size }}\n                </option>\n            </select>\n            <div class=\"ms-2\">{{ PageSizeText | async }}</div>\n        </div>\n    </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i0.Injector }]; } });
 
 /**
  * Grid Komponente
  */
 class SacGridComponent extends SacGridCommon {
+    // #endregion Properties
+    // #region Constructors
     /**
      * Konstrukor
      * @param cdRef Change Detection Reference
      */
-    constructor(cdRef) {
-        super(cdRef);
+    constructor(cdRef, injector) {
+        super(cdRef, injector);
+        // #region Properties
         /**
          * Setzt die Ellipsis Funktion auf der Column
          */
         this.ellipsis = false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacGridComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacGridComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SacGridComponent, isStandalone: true, selector: "sac-grid", providers: [
             { provide: NG_VALUE_ACCESSOR, multi: true, useExisting: SacGridComponent },
             {
@@ -1099,7 +1401,7 @@ class SacGridComponent extends SacGridCommon {
                 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", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SacPagingComponent, selector: "sac-paging" }] }); }
+        ], queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"table-responsive\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <table\n        class=\"table table-striped table-hover\"\n        id=\"{{ name }}\">\n        <thead class=\"thead-light\">\n            <tr>\n                <ng-container *ngTemplateOutlet=\"template; context: { row: {}, type: 'header' }\"> </ng-container>\n            </tr>\n        </thead>\n        <tbody>\n            <ng-container *ngFor=\"let item of value; let i = index\">\n                <tr>\n                    <ng-container *ngTemplateOutlet=\"template; context: { row: item, type: 'body' }\"> </ng-container>\n                </tr>\n            </ng-container>\n            <tr\n                *ngIf=\"value === undefined || value === null || value.length === 0\"\n                data-e2e=\"emptyrow\">\n                <td [attr.colspan]=\"ColumnCount\">{{ emptytext }}</td>\n            </tr>\n        </tbody>\n        <tfoot *ngIf=\"pagerdata\">\n            <tr *ngIf=\"pagerdata\">\n                <td [attr.colspan]=\"ColumnCount\">\n                    <div class=\"container-fluid\">\n                        <sac-paging\n                            name=\"{{ name }}Paging\"\n                            (paging)=\"pageChange($event)\"\n                            [pagerdata]=\"pagerdata\"\n                            [pagesizes]=\"pagesizes\"\n                            [pagingtext]=\"pagingtext\"\n                            [pagesizetext]=\"pagesizetext\"\n                            [pagesizedisabled]=\"pagesizedisabled\"></sac-paging>\n                    </div>\n                </td>\n            </tr>\n        </tfoot>\n    </table>\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SacPagingComponent, selector: "sac-paging" }, { kind: "pipe", type: SacTestingAttributePipe, name: "testingattribute" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacGridComponent, decorators: [{
             type: Component,
@@ -1110,61 +1412,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             multi: true,
                             useExisting: forwardRef(() => SacGridComponent),
                         },
-                    ], standalone: true, imports: [
-                        NgTemplateOutlet,
-                        NgFor,
-                        NgIf,
-                        SacPagingComponent,
-                    ], 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: [{
+                    ], standalone: true, imports: [NgTemplateOutlet, NgFor, NgIf, SacPagingComponent, SacTestingAttributePipe], template: "<div\n    class=\"table-responsive\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <table\n        class=\"table table-striped table-hover\"\n        id=\"{{ name }}\">\n        <thead class=\"thead-light\">\n            <tr>\n                <ng-container *ngTemplateOutlet=\"template; context: { row: {}, type: 'header' }\"> </ng-container>\n            </tr>\n        </thead>\n        <tbody>\n            <ng-container *ngFor=\"let item of value; let i = index\">\n                <tr>\n                    <ng-container *ngTemplateOutlet=\"template; context: { row: item, type: 'body' }\"> </ng-container>\n                </tr>\n            </ng-container>\n            <tr\n                *ngIf=\"value === undefined || value === null || value.length === 0\"\n                data-e2e=\"emptyrow\">\n                <td [attr.colspan]=\"ColumnCount\">{{ emptytext }}</td>\n            </tr>\n        </tbody>\n        <tfoot *ngIf=\"pagerdata\">\n            <tr *ngIf=\"pagerdata\">\n                <td [attr.colspan]=\"ColumnCount\">\n                    <div class=\"container-fluid\">\n                        <sac-paging\n                            name=\"{{ name }}Paging\"\n                            (paging)=\"pageChange($event)\"\n                            [pagerdata]=\"pagerdata\"\n                            [pagesizes]=\"pagesizes\"\n                            [pagingtext]=\"pagingtext\"\n                            [pagesizetext]=\"pagesizetext\"\n                            [pagesizedisabled]=\"pagesizedisabled\"></sac-paging>\n                    </div>\n                </td>\n            </tr>\n        </tfoot>\n    </table>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.Injector }]; }, 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 {
+    // #region Constructors
     /**
-     * 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();
+     * Construtor
+     *
+     * @param injector Injector to resolve  icons
+     */
+    constructor(injector) {
+        super(injector);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacGridButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SacGridButtonComponent, isStandalone: true, 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" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacGridButtonComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SacGridButtonComponent, isStandalone: true, selector: "sac-gridbutton", usesInheritance: true, ngImport: i0, template: "<a\n    (click)=\"callaction()\"\n    [attr.data-e2e]=\"name\"\n    style=\"padding-right: 5px\"\n    [style.cursor]=\"!isdisabled ? 'pointer' : null\"\n    [class.disabled]=\"isdisabled\"\n    [attr.disabled]=\"isdisabled ? 'disabled' : null\"\n    ><span class=\"{{ getIconClass() }}\"></span\n></a>\n" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacGridButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sac-gridbutton', standalone: true, template: "<a (click)=\"callaction()\" style=\"padding-right: 5px;\" [class.disabled]=\"isdisabled\" [attr.disabled]=\"isdisabled ? 'disabled' : null\"><span class=\"{{getIconClass()}}\"></span></a>\r\n" }]
-        }] });
+            args: [{ selector: 'sac-gridbutton', standalone: true, template: "<a\n    (click)=\"callaction()\"\n    [attr.data-e2e]=\"name\"\n    style=\"padding-right: 5px\"\n    [style.cursor]=\"!isdisabled ? 'pointer' : null\"\n    [class.disabled]=\"isdisabled\"\n    [attr.disabled]=\"isdisabled ? 'disabled' : null\"\n    ><span class=\"{{ getIconClass() }}\"></span\n></a>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }]; } });
 
 /**
  * Grid Column Komponente
@@ -1184,7 +1457,7 @@ class SacGridColumnComponent extends SacGridColumnCommon {
                 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", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<th\n    #headerElement\n    scope=\"col\"\n    *ngIf=\"IsHeader()\"\n    [style.width]=\"width\"\n    (click)=\"SortByColumn()\"\n    [class.text-right]=\"alignment === 'right'\"\n    [class.text-center]=\"alignment === 'center'\">\n    <span>{{ header }}</span>\n    <span\n        class=\"ps-2\"\n        [class]=\"IconSortUp\"\n        *ngIf=\"IsSortedColumn() && GetSortDirection() === 'asc'\"></span>\n    <span\n        class=\"ps-2\"\n        [class]=\"IconSortDown\"\n        *ngIf=\"IsSortedColumn() && GetSortDirection() === 'desc'\"></span>\n</th>\n<td\n    #bodyElement\n    scope=\"col\"\n    *ngIf=\"IsBody()\"\n    [style.width]=\"width\"\n    [class.ellipsis]=\"IsEllipsis()\"\n    (click)=\"ColumnClick()\"\n    [style.max-width]=\"IsEllipsis() ? width : null\"\n    [style.overflow]=\"IsEllipsis() ? 'hidden' : null\"\n    [style.text-overflow]=\"IsEllipsis() ? 'ellipsis' : null\"\n    [style.white-space]=\"IsEllipsis() ? 'nowrap' : null\"\n    [class.text-right]=\"alignment === 'right'\"\n    [class.text-center]=\"alignment === 'center'\">\n    <span\n        [attr.title]=\"IsEllipsis() ? value : null\"\n        [innerHtml]=\"value\">\n    </span>\n</td>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacGridColumnComponent, decorators: [{
             type: Component,
@@ -1193,7 +1466,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             provide: SacGridColumnBaseCommon,
                             useExisting: forwardRef(() => SacGridColumnComponent),
                         },
-                    ], standalone: true, imports: [NgIf], 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" }]
+                    ], standalone: true, imports: [NgIf], template: "<th\n    #headerElement\n    scope=\"col\"\n    *ngIf=\"IsHeader()\"\n    [style.width]=\"width\"\n    (click)=\"SortByColumn()\"\n    [class.text-right]=\"alignment === 'right'\"\n    [class.text-center]=\"alignment === 'center'\">\n    <span>{{ header }}</span>\n    <span\n        class=\"ps-2\"\n        [class]=\"IconSortUp\"\n        *ngIf=\"IsSortedColumn() && GetSortDirection() === 'asc'\"></span>\n    <span\n        class=\"ps-2\"\n        [class]=\"IconSortDown\"\n        *ngIf=\"IsSortedColumn() && GetSortDirection() === 'desc'\"></span>\n</th>\n<td\n    #bodyElement\n    scope=\"col\"\n    *ngIf=\"IsBody()\"\n    [style.width]=\"width\"\n    [class.ellipsis]=\"IsEllipsis()\"\n    (click)=\"ColumnClick()\"\n    [style.max-width]=\"IsEllipsis() ? width : null\"\n    [style.overflow]=\"IsEllipsis() ? 'hidden' : null\"\n    [style.text-overflow]=\"IsEllipsis() ? 'ellipsis' : null\"\n    [style.white-space]=\"IsEllipsis() ? 'nowrap' : null\"\n    [class.text-right]=\"alignment === 'right'\"\n    [class.text-center]=\"alignment === 'center'\">\n    <span\n        [attr.title]=\"IsEllipsis() ? value : null\"\n        [innerHtml]=\"value\">\n    </span>\n</td>\n" }]
         }], ctorParameters: function () { return [{ type: SacGridComponent }, { type: i0.Injector }, { type: i0.ElementRef }]; } });
 
 /**
@@ -1215,7 +1488,7 @@ class SacGridColumnActionComponent extends SacGridColumnActionCommon {
                 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", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<th\n    #headerElement\n    scope=\"col\"\n    *ngIf=\"IsHeader()\"\n    [style.width]=\"width\"\n    [class.text-right]=\"alignment === 'right'\"\n    [class.text-center]=\"alignment === 'center'\">\n    <span></span>\n</th>\n<td\n    #bodyElement\n    scope=\"col\"\n    class=\"px-2\"\n    [class.text-right]=\"alignment === 'right'\"\n    [class.text-center]=\"alignment === 'center'\"\n    *ngIf=\"IsBody()\">\n    <ng-content></ng-content>\n</td>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacGridColumnActionComponent, decorators: [{
             type: Component,
@@ -1224,33 +1497,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             provide: SacGridColumnBaseCommon,
                             useExisting: forwardRef(() => SacGridColumnActionComponent),
                         },
-                    ], standalone: true, imports: [NgIf], 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" }]
+                    ], standalone: true, imports: [NgIf], template: "<th\n    #headerElement\n    scope=\"col\"\n    *ngIf=\"IsHeader()\"\n    [style.width]=\"width\"\n    [class.text-right]=\"alignment === 'right'\"\n    [class.text-center]=\"alignment === 'center'\">\n    <span></span>\n</th>\n<td\n    #bodyElement\n    scope=\"col\"\n    class=\"px-2\"\n    [class.text-right]=\"alignment === 'right'\"\n    [class.text-center]=\"alignment === 'center'\"\n    *ngIf=\"IsBody()\">\n    <ng-content></ng-content>\n</td>\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;
-        }
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacGridImageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SacGridImageComponent, isStandalone: true, selector: "sac-gridimage", usesInheritance: true, ngImport: i0, template: "<span><span class=\"{{getIconClass()}}\"></span></span>\r\n" }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SacGridImageComponent, isStandalone: true, selector: "sac-gridimage", usesInheritance: true, ngImport: i0, template: "<span><span [ngClass]=\"iconstyle\"></span></span>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacGridImageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sac-gridimage', standalone: true, template: "<span><span class=\"{{getIconClass()}}\"></span></span>\r\n" }]
+            args: [{ selector: 'sac-gridimage', imports: [CommonModule], standalone: true, template: "<span><span [ngClass]=\"iconstyle\"></span></span>\n" }]
         }] });
 
 class SACBootstrap5GridModule {
@@ -1258,7 +1517,7 @@ class SACBootstrap5GridModule {
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SACBootstrap5GridModule, imports: [CommonModule, FormsModule,
             SacGridComponent, SacGridColumnComponent, SacGridColumnActionComponent, SacPagingComponent, SacGridButtonComponent, SacGridImageComponent], exports: [SacGridComponent, SacGridColumnComponent, SacGridColumnActionComponent, SacPagingComponent, SacGridButtonComponent, SacGridImageComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SACBootstrap5GridModule, imports: [CommonModule, FormsModule,
-            SacGridComponent, SacPagingComponent] }); }
+            SacGridComponent, SacPagingComponent, SacGridImageComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SACBootstrap5GridModule, decorators: [{
             type: NgModule,
@@ -1275,15 +1534,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Input Komponente
  */
 class SacInputComponent extends SacInputCommon {
+    // #region Constructors
     /**
-     * Konstruktor
-     * @param parent Formular
-     * @param injector Angular Dependency Injection Service
+     * Constructor
+     * @param formLayout SacFormLayout to define scoped layout settings
+     * @param injector Injector for injecting services
      */
-    constructor(parent, injector) {
-        super(parent, injector);
+    constructor(formLayout, injector) {
+        super(formLayout, injector);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacInputComponent, deps: [{ token: SacFormDirective, host: true, optional: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacInputComponent, deps: [{ token: SacFormLayoutDirective, host: true, optional: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SacInputComponent, isStandalone: true, selector: "sac-input", providers: [
             { provide: NG_VALUE_ACCESSOR, multi: true, useExisting: SacInputComponent },
             {
@@ -1291,7 +1551,7 @@ class SacInputComponent extends SacInputCommon {
                 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", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], viewProviders: [{ provide: ControlContainer, useExisting: SacFormDirective }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"row mb-3\"\n    [class.g-0]=\"disablelabel\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n            <input\n                id=\"{{ name }}\"\n                name=\"{{ name }}\"\n                type=\"text\"\n                class=\"form-control\"\n                [value]=\"value\"\n                [attr.placeholder]=\"placeholder\"\n                [readonly]=\"readonly\"\n                (blur)=\"onTouch()\"\n                (input)=\"setValue($event.target.value)\"\n                (keypress)=\"onKeyPress($event)\"\n                [attr.maxlength]=\"maxtextlength\"\n                [class.is-invalid]=\"invalid && (dirty || touched)\"\n                [ngClass]=\"[componentHeight | toControlHeight]\"\n                [disabled]=\"isdisabled\" />\n\n            <div\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"invalid-feedback\">\n                {{ GetErrorMessage() | async }}\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToLabelHeightPipe, name: "toLabelHeight" }, { kind: "pipe", type: SacToControlHeightPipe, name: "toControlHeight" }, { kind: "component", type: SacTooltipComponent, selector: "sac-tooltip" }, { kind: "pipe", type: SacTestingAttributePipe, name: "testingattribute" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacInputComponent, decorators: [{
             type: Component,
@@ -1302,8 +1562,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             multi: true,
                             useExisting: forwardRef(() => SacInputComponent),
                         },
-                    ], viewProviders: [{ provide: ControlContainer, useExisting: SacFormDirective }], standalone: true, imports: [NgClass, NgIf, AsyncPipe], 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: [{
+                    ], standalone: true, imports: [
+                        NgClass,
+                        NgIf,
+                        AsyncPipe,
+                        SacToControlWidthCssPipe,
+                        SacToLabelWidthCssPipe,
+                        SacToLabelHeightPipe,
+                        SacToControlHeightPipe,
+                        SacTooltipComponent,
+                        SacTestingAttributePipe,
+                    ], template: "<div\n    class=\"row mb-3\"\n    [class.g-0]=\"disablelabel\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n            <input\n                id=\"{{ name }}\"\n                name=\"{{ name }}\"\n                type=\"text\"\n                class=\"form-control\"\n                [value]=\"value\"\n                [attr.placeholder]=\"placeholder\"\n                [readonly]=\"readonly\"\n                (blur)=\"onTouch()\"\n                (input)=\"setValue($event.target.value)\"\n                (keypress)=\"onKeyPress($event)\"\n                [attr.maxlength]=\"maxtextlength\"\n                [class.is-invalid]=\"invalid && (dirty || touched)\"\n                [ngClass]=\"[componentHeight | toControlHeight]\"\n                [disabled]=\"isdisabled\" />\n\n            <div\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"invalid-feedback\">\n                {{ GetErrorMessage() | async }}\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: SacFormLayoutDirective, decorators: [{
                     type: Host
                 }, {
                     type: Optional
@@ -1313,15 +1583,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Input Box für E-Mail Adressen
  */
 class SacInputEmailComponent extends SacInputEmailCommon {
+    // #region Constructors
     /**
-     * Konstruktor
-     * @param parent Formular
-     * @param injector Angular Dependency Injection Service
+     * Constructor
+     * @param formLayout SacFormLayout to define scoped layout settings
+     * @param injector Injector for injecting services
      */
-    constructor(parent, injector) {
-        super(parent, injector);
+    constructor(formLayout, injector) {
+        super(formLayout, injector);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacInputEmailComponent, deps: [{ token: SacFormDirective, host: true, optional: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacInputEmailComponent, deps: [{ token: SacFormLayoutDirective, host: true, optional: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SacInputEmailComponent, isStandalone: true, selector: "sac-inputemail", providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -1333,7 +1604,7 @@ class SacInputEmailComponent extends SacInputEmailCommon {
                 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", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], viewProviders: [{ provide: ControlContainer, useExisting: SacFormDirective }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"row mb-3\"\n    [class.g-0]=\"disablelabel\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n            <div\n                class=\"input-group\"\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\n                [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                <span class=\"input-group-text\">@</span>\n                <input\n                    id=\"{{ name }}\"\n                    name=\"{{ name }}\"\n                    type=\"text\"\n                    inputmode=\"email\"\n                    class=\"form-control\"\n                    [value]=\"value\"\n                    (blur)=\"onTouch()\"\n                    (input)=\"setValue($event.target.value)\"\n                    (keypress)=\"onKeyPress($event)\"\n                    [attr.placeholder]=\"placeholder\"\n                    [attr.maxlength]=\"maxtextlength\"\n                    autocomplete=\"email\"\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\n                    [ngClass]=\"[componentHeight | toControlHeight]\"\n                    [disabled]=\"isdisabled\"\n                    [readonly]=\"readonly\" />\n                <div\n                    *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                    class=\"invalid-feedback\">\n                    {{ GetErrorMessage() | async }}\n                </div>\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToLabelHeightPipe, name: "toLabelHeight" }, { kind: "pipe", type: SacToControlHeightPipe, name: "toControlHeight" }, { kind: "component", type: SacTooltipComponent, selector: "sac-tooltip" }, { kind: "pipe", type: SacTestingAttributePipe, name: "testingattribute" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacInputEmailComponent, decorators: [{
             type: Component,
@@ -1348,8 +1619,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             multi: true,
                             useExisting: forwardRef(() => SacInputEmailComponent),
                         },
-                    ], viewProviders: [{ provide: ControlContainer, useExisting: SacFormDirective }], standalone: true, imports: [NgClass, NgIf, AsyncPipe], 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: [{
+                    ], standalone: true, imports: [
+                        NgClass,
+                        NgIf,
+                        AsyncPipe,
+                        SacToControlWidthCssPipe,
+                        SacToLabelWidthCssPipe,
+                        SacToLabelHeightPipe,
+                        SacToControlHeightPipe,
+                        SacTooltipComponent,
+                        SacTestingAttributePipe,
+                    ], template: "<div\n    class=\"row mb-3\"\n    [class.g-0]=\"disablelabel\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n            <div\n                class=\"input-group\"\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\n                [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                <span class=\"input-group-text\">@</span>\n                <input\n                    id=\"{{ name }}\"\n                    name=\"{{ name }}\"\n                    type=\"text\"\n                    inputmode=\"email\"\n                    class=\"form-control\"\n                    [value]=\"value\"\n                    (blur)=\"onTouch()\"\n                    (input)=\"setValue($event.target.value)\"\n                    (keypress)=\"onKeyPress($event)\"\n                    [attr.placeholder]=\"placeholder\"\n                    [attr.maxlength]=\"maxtextlength\"\n                    autocomplete=\"email\"\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\n                    [ngClass]=\"[componentHeight | toControlHeight]\"\n                    [disabled]=\"isdisabled\"\n                    [readonly]=\"readonly\" />\n                <div\n                    *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                    class=\"invalid-feedback\">\n                    {{ GetErrorMessage() | async }}\n                </div>\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: SacFormLayoutDirective, decorators: [{
                     type: Host
                 }, {
                     type: Optional
@@ -1359,15 +1640,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Input Box für lange Texte
  */
 class SacInputAreaComponent extends SacInputAreaCommon {
+    // #region Constructors
     /**
-     * Konstruktor
-     * @param parent Formular
-     * @param injector Angular Dependency Injection Service
+     * Constructor
+     * @param formLayout SacFormLayout to define scoped layout settings
+     * @param injector Injector for injecting services
      */
-    constructor(parent, injector) {
-        super(parent, injector);
+    constructor(formLayout, injector) {
+        super(formLayout, injector);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacInputAreaComponent, deps: [{ token: SacFormDirective, host: true, optional: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacInputAreaComponent, deps: [{ token: SacFormLayoutDirective, host: true, optional: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SacInputAreaComponent, isStandalone: true, selector: "sac-inputarea", providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -1379,7 +1661,7 @@ class SacInputAreaComponent extends SacInputAreaCommon {
                 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", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], viewProviders: [{ provide: ControlContainer, useExisting: SacFormDirective }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"row mb-3\"\n    [class.g-0]=\"disablelabel\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n            <textarea\n                id=\"{{ name }}\"\n                name=\"{{ name }}\"\n                type=\"\"\n                class=\"form-control\"\n                [value]=\"value\"\n                [attr.placeholder]=\"placeholder\"\n                (blur)=\"onTouch()\"\n                (input)=\"setValue($event.target.value)\"\n                (keypress)=\"onKeyPress($event)\"\n                [attr.rows]=\"rows\"\n                [class.is-invalid]=\"invalid && (dirty || touched)\"\n                [ngClass]=\"[componentHeight | toControlHeight]\"\n                [disabled]=\"isdisabled\"\n                [attr.maxlength]=\"maxtextlength\"\n                [readonly]=\"readonly\"></textarea>\n            <div\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"invalid-feedback\">\n                {{ GetErrorMessage() | async }}\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToLabelHeightPipe, name: "toLabelHeight" }, { kind: "pipe", type: SacToControlHeightPipe, name: "toControlHeight" }, { kind: "component", type: SacTooltipComponent, selector: "sac-tooltip" }, { kind: "pipe", type: SacTestingAttributePipe, name: "testingattribute" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacInputAreaComponent, decorators: [{
             type: Component,
@@ -1394,8 +1676,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             multi: true,
                             useExisting: forwardRef(() => SacInputAreaComponent),
                         },
-                    ], viewProviders: [{ provide: ControlContainer, useExisting: SacFormDirective }], standalone: true, imports: [NgClass, NgIf, AsyncPipe], 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: [{
+                    ], standalone: true, imports: [
+                        NgClass,
+                        NgIf,
+                        AsyncPipe,
+                        SacToControlWidthCssPipe,
+                        SacToLabelWidthCssPipe,
+                        SacToLabelHeightPipe,
+                        SacToControlHeightPipe,
+                        SacTooltipComponent,
+                        SacTestingAttributePipe,
+                    ], template: "<div\n    class=\"row mb-3\"\n    [class.g-0]=\"disablelabel\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n            <textarea\n                id=\"{{ name }}\"\n                name=\"{{ name }}\"\n                type=\"\"\n                class=\"form-control\"\n                [value]=\"value\"\n                [attr.placeholder]=\"placeholder\"\n                (blur)=\"onTouch()\"\n                (input)=\"setValue($event.target.value)\"\n                (keypress)=\"onKeyPress($event)\"\n                [attr.rows]=\"rows\"\n                [class.is-invalid]=\"invalid && (dirty || touched)\"\n                [ngClass]=\"[componentHeight | toControlHeight]\"\n                [disabled]=\"isdisabled\"\n                [attr.maxlength]=\"maxtextlength\"\n                [readonly]=\"readonly\"></textarea>\n            <div\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"invalid-feedback\">\n                {{ GetErrorMessage() | async }}\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: SacFormLayoutDirective, decorators: [{
                     type: Host
                 }, {
                     type: Optional
@@ -1405,15 +1697,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Input Control für Währungen
  */
 class SacInputCurrencyComponent extends SacInputCurrencyCommon {
+    // #region Constructors
     /**
-     * Konstruktor
-     * @param parent Formular
-     * @param injector Angular Dependency Injection Service
+     * Constructor
+     * @param formLayout SacFormLayout to define scoped layout settings
+     * @param injector Injector for injecting services
      */
-    constructor(parent, injector) {
-        super(parent, injector);
+    constructor(formLayout, injector) {
+        super(formLayout, injector);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacInputCurrencyComponent, deps: [{ token: SacFormDirective, host: true, optional: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacInputCurrencyComponent, deps: [{ token: SacFormLayoutDirective, host: true, optional: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SacInputCurrencyComponent, isStandalone: true, selector: "sac-inputcurrency", providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -1425,7 +1718,7 @@ class SacInputCurrencyComponent extends SacInputCurrencyCommon {
                 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", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], viewProviders: [{ provide: ControlContainer, useExisting: SacFormDirective }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"row mb-3\"\n    [class.g-0]=\"disablelabel\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n            <div\n                class=\"input-group input-group-sm\"\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\n                [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                <input\n                    id=\"{{ name }}\"\n                    name=\"{{ name }}\"\n                    type=\"text\"\n                    inputmode=\"decimal\"\n                    class=\"form-control\"\n                    [value]=\"value\"\n                    (blur)=\"onTouch()\"\n                    (input)=\"setValue($event.target.value)\"\n                    [attr.placeholder]=\"placeholder\"\n                    (keypress)=\"onKeyPress($event)\"\n                    [disabled]=\"isdisabled\"\n                    [readonly]=\"readonly\"\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\n                    [ngClass]=\"[componentHeight | toControlHeight]\" />\n                <span class=\"input-group-text\">{{ currency }}</span>\n                <div\n                    *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                    class=\"invalid-feedback\">\n                    {{ GetErrorMessage() | async }}\n                </div>\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToLabelHeightPipe, name: "toLabelHeight" }, { kind: "pipe", type: SacToControlHeightPipe, name: "toControlHeight" }, { kind: "pipe", type: SacTestingAttributePipe, name: "testingattribute" }, { kind: "component", type: SacTooltipComponent, selector: "sac-tooltip" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacInputCurrencyComponent, decorators: [{
             type: Component,
@@ -1440,8 +1733,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             multi: true,
                             useExisting: forwardRef(() => SacInputCurrencyComponent),
                         },
-                    ], viewProviders: [{ provide: ControlContainer, useExisting: SacFormDirective }], standalone: true, imports: [NgClass, NgIf, AsyncPipe], 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: [{
+                    ], standalone: true, imports: [
+                        NgClass,
+                        NgIf,
+                        AsyncPipe,
+                        SacToControlWidthCssPipe,
+                        SacToLabelWidthCssPipe,
+                        SacToLabelHeightPipe,
+                        SacToControlHeightPipe,
+                        SacTestingAttributePipe,
+                        SacTooltipComponent,
+                    ], template: "<div\n    class=\"row mb-3\"\n    [class.g-0]=\"disablelabel\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n            <div\n                class=\"input-group input-group-sm\"\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\n                [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                <input\n                    id=\"{{ name }}\"\n                    name=\"{{ name }}\"\n                    type=\"text\"\n                    inputmode=\"decimal\"\n                    class=\"form-control\"\n                    [value]=\"value\"\n                    (blur)=\"onTouch()\"\n                    (input)=\"setValue($event.target.value)\"\n                    [attr.placeholder]=\"placeholder\"\n                    (keypress)=\"onKeyPress($event)\"\n                    [disabled]=\"isdisabled\"\n                    [readonly]=\"readonly\"\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\n                    [ngClass]=\"[componentHeight | toControlHeight]\" />\n                <span class=\"input-group-text\">{{ currency }}</span>\n                <div\n                    *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                    class=\"invalid-feedback\">\n                    {{ GetErrorMessage() | async }}\n                </div>\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: SacFormLayoutDirective, decorators: [{
                     type: Host
                 }, {
                     type: Optional
@@ -1451,15 +1754,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Input Komponente für Zahlen
  */
 class SacInputDecimalComponent extends SacInputDecimalCommon {
+    // #region Constructors
     /**
-     * Konstruktor
-     * @param parent Formular
-     * @param injector Angular Dependency Injection Service
+     * Constructor
+     * @param formLayout SacFormLayout to define scoped layout settings
+     * @param injector Injector for injecting services
      */
-    constructor(parent, injector) {
-        super(parent, injector);
+    constructor(formLayout, injector) {
+        super(formLayout, injector);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacInputDecimalComponent, deps: [{ token: SacFormDirective, host: true, optional: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacInputDecimalComponent, deps: [{ token: SacFormLayoutDirective, host: true, optional: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SacInputDecimalComponent, isStandalone: true, selector: "sac-inputdecimal", providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -1471,7 +1775,7 @@ class SacInputDecimalComponent extends SacInputDecimalCommon {
                 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", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], viewProviders: [{ provide: ControlContainer, useExisting: SacFormDirective }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"row mb-3\"\n    [class.g-0]=\"disablelabel\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n            <input\n                id=\"{{ name }}\"\n                name=\"{{ name }}\"\n                type=\"text\"\n                inputmode=\"decimal\"\n                class=\"form-control\"\n                [value]=\"value\"\n                (blur)=\"onTouch()\"\n                (input)=\"setValue($event.target.value)\"\n                [attr.placeholder]=\"placeholder\"\n                [readonly]=\"readonly\"\n                (keypress)=\"onKeyPress($event)\"\n                [disabled]=\"isdisabled\"\n                [class.is-invalid]=\"invalid && (dirty || touched)\"\n                [ngClass]=\"[componentHeight | toControlHeight]\" />\n\n            <div\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"invalid-feedback\">\n                {{ GetErrorMessage() | async }}\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToLabelHeightPipe, name: "toLabelHeight" }, { kind: "pipe", type: SacToControlHeightPipe, name: "toControlHeight" }, { kind: "component", type: SacTooltipComponent, selector: "sac-tooltip" }, { kind: "pipe", type: SacTestingAttributePipe, name: "testingattribute" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacInputDecimalComponent, decorators: [{
             type: Component,
@@ -1486,8 +1790,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             multi: true,
                             useExisting: forwardRef(() => SacInputDecimalComponent),
                         },
-                    ], viewProviders: [{ provide: ControlContainer, useExisting: SacFormDirective }], standalone: true, imports: [NgClass, NgIf, AsyncPipe], 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: [{
+                    ], standalone: true, imports: [
+                        NgClass,
+                        NgIf,
+                        AsyncPipe,
+                        SacToControlWidthCssPipe,
+                        SacToLabelWidthCssPipe,
+                        SacToLabelHeightPipe,
+                        SacToControlHeightPipe,
+                        SacTooltipComponent,
+                        SacTestingAttributePipe,
+                    ], template: "<div\n    class=\"row mb-3\"\n    [class.g-0]=\"disablelabel\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n            <input\n                id=\"{{ name }}\"\n                name=\"{{ name }}\"\n                type=\"text\"\n                inputmode=\"decimal\"\n                class=\"form-control\"\n                [value]=\"value\"\n                (blur)=\"onTouch()\"\n                (input)=\"setValue($event.target.value)\"\n                [attr.placeholder]=\"placeholder\"\n                [readonly]=\"readonly\"\n                (keypress)=\"onKeyPress($event)\"\n                [disabled]=\"isdisabled\"\n                [class.is-invalid]=\"invalid && (dirty || touched)\"\n                [ngClass]=\"[componentHeight | toControlHeight]\" />\n\n            <div\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"invalid-feedback\">\n                {{ GetErrorMessage() | async }}\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: SacFormLayoutDirective, decorators: [{
                     type: Host
                 }, {
                     type: Optional
@@ -1497,15 +1811,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Input Komponten für Ganzzahlen
  */
 class SacInputIntegerComponent extends SacInputIntegerCommon {
+    // #region Constructors
     /**
-     * Konstruktor
-     * @param parent Formular
-     * @param injector Angular Dependency Injection Service
+     * Constructor
+     * @param formLayout SacFormLayout to define scoped layout settings
+     * @param injector Injector for injecting services
      */
-    constructor(parent, injector) {
-        super(parent, injector);
+    constructor(formLayout, injector) {
+        super(formLayout, injector);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacInputIntegerComponent, deps: [{ token: SacFormDirective, host: true, optional: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacInputIntegerComponent, deps: [{ token: SacFormLayoutDirective, host: true, optional: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SacInputIntegerComponent, isStandalone: true, selector: "sac-inputinteger", providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -1517,7 +1832,7 @@ class SacInputIntegerComponent extends SacInputIntegerCommon {
                 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", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], viewProviders: [{ provide: ControlContainer, useExisting: SacFormDirective }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"row mb-3\"\n    [class.g-0]=\"disablelabel\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n            <input\n                id=\"{{ name }}\"\n                name=\"{{ name }}\"\n                type=\"text\"\n                inputmode=\"decimal\"\n                class=\"form-control\"\n                [value]=\"value\"\n                (blur)=\"onTouch()\"\n                (input)=\"setValue($event.target.value)\"\n                [attr.placeholder]=\"placeholder\"\n                (keypress)=\"onKeyPress($event)\"\n                [disabled]=\"isdisabled\"\n                [readonly]=\"readonly\"\n                [class.is-invalid]=\"invalid && (dirty || touched)\"\n                [ngClass]=\"[componentHeight | toControlHeight]\" />\n\n            <div\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"invalid-feedback\">\n                {{ GetErrorMessage() | async }}\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToLabelHeightPipe, name: "toLabelHeight" }, { kind: "pipe", type: SacToControlHeightPipe, name: "toControlHeight" }, { kind: "component", type: SacTooltipComponent, selector: "sac-tooltip" }, { kind: "pipe", type: SacTestingAttributePipe, name: "testingattribute" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacInputIntegerComponent, decorators: [{
             type: Component,
@@ -1532,8 +1847,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             multi: true,
                             useExisting: forwardRef(() => SacInputIntegerComponent),
                         },
-                    ], viewProviders: [{ provide: ControlContainer, useExisting: SacFormDirective }], standalone: true, imports: [NgClass, NgIf, AsyncPipe], 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: [{
+                    ], standalone: true, imports: [
+                        NgClass,
+                        NgIf,
+                        AsyncPipe,
+                        SacToControlWidthCssPipe,
+                        SacToLabelWidthCssPipe,
+                        SacToLabelHeightPipe,
+                        SacToControlHeightPipe,
+                        SacTooltipComponent,
+                        SacTestingAttributePipe,
+                    ], template: "<div\n    class=\"row mb-3\"\n    [class.g-0]=\"disablelabel\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n            <input\n                id=\"{{ name }}\"\n                name=\"{{ name }}\"\n                type=\"text\"\n                inputmode=\"decimal\"\n                class=\"form-control\"\n                [value]=\"value\"\n                (blur)=\"onTouch()\"\n                (input)=\"setValue($event.target.value)\"\n                [attr.placeholder]=\"placeholder\"\n                (keypress)=\"onKeyPress($event)\"\n                [disabled]=\"isdisabled\"\n                [readonly]=\"readonly\"\n                [class.is-invalid]=\"invalid && (dirty || touched)\"\n                [ngClass]=\"[componentHeight | toControlHeight]\" />\n\n            <div\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"invalid-feedback\">\n                {{ GetErrorMessage() | async }}\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: SacFormLayoutDirective, decorators: [{
                     type: Host
                 }, {
                     type: Optional
@@ -1543,15 +1868,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Input Box für Passwörter
  */
 class SacInputPasswordComponent extends SacInputPasswordCommon {
+    // #region Constructors
     /**
-     * Konstruktor
-     * @param parent Formular
-     * @param injector Angular Dependency Injection Service
+     * Constructor
+     * @param formLayout SacFormLayout to define scoped layout settings
+     * @param injector Injector for injecting services
      */
-    constructor(parent, injector) {
-        super(parent, injector);
+    constructor(formLayout, injector) {
+        super(formLayout, injector);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacInputPasswordComponent, deps: [{ token: SacFormDirective, host: true, optional: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacInputPasswordComponent, deps: [{ token: SacFormLayoutDirective, host: true, optional: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SacInputPasswordComponent, isStandalone: true, selector: "sac-inputpassword", providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -1563,7 +1889,7 @@ class SacInputPasswordComponent extends SacInputPasswordCommon {
                 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", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], viewProviders: [{ provide: ControlContainer, useExisting: SacFormDirective }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"row mb-3\"\n    [class.g-0]=\"disablelabel\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n            <div\n                [class.input-group]=\"passwordeye\"\n                [class.has-validation]=\"passwordeye && isinlineerrorenabled && invalid && (dirty || touched)\">\n                <input\n                    id=\"{{ name }}\"\n                    name=\"{{ name }}\"\n                    [type]=\"passwordeyevisible ? 'text' : 'password'\"\n                    class=\"form-control\"\n                    [attr.placeholder]=\"placeholder\"\n                    [value]=\"value\"\n                    (blur)=\"onTouch()\"\n                    (input)=\"setValue($event.target.value)\"\n                    (keypress)=\"onKeyPress($event)\"\n                    [attr.maxlength]=\"maxtextlength\"\n                    autocomplete=\"new-password\"\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\n                    [ngClass]=\"[componentHeight | toControlHeight]\"\n                    [disabled]=\"isdisabled\"\n                    [readonly]=\"readonly\" />\n                <a\n                    *ngIf=\"passwordeye\"\n                    class=\"btn btn-outline-secondary\"\n                    (click)=\"onTogglePasswordEye()\"\n                    ><span [ngClass]=\"passwordeyevisible ? PasswordEyeVisibleIcon : PasswordEyeHiddenIcon\"></span>\n                </a>\n                <div\n                    *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                    class=\"invalid-feedback\">\n                    {{ GetErrorMessage() | async }}\n                </div>\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToLabelHeightPipe, name: "toLabelHeight" }, { kind: "pipe", type: SacToControlHeightPipe, name: "toControlHeight" }, { kind: "component", type: SacTooltipComponent, selector: "sac-tooltip" }, { kind: "pipe", type: SacTestingAttributePipe, name: "testingattribute" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacInputPasswordComponent, decorators: [{
             type: Component,
@@ -1578,8 +1904,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             multi: true,
                             useExisting: forwardRef(() => SacInputPasswordComponent),
                         },
-                    ], viewProviders: [{ provide: ControlContainer, useExisting: SacFormDirective }], standalone: true, imports: [NgClass, NgIf, AsyncPipe], 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: [{
+                    ], standalone: true, imports: [
+                        NgClass,
+                        NgIf,
+                        AsyncPipe,
+                        SacToControlWidthCssPipe,
+                        SacToLabelWidthCssPipe,
+                        SacToLabelHeightPipe,
+                        SacToControlHeightPipe,
+                        SacTooltipComponent, SacTestingAttributePipe
+                    ], template: "<div\n    class=\"row mb-3\"\n    [class.g-0]=\"disablelabel\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n            <div\n                [class.input-group]=\"passwordeye\"\n                [class.has-validation]=\"passwordeye && isinlineerrorenabled && invalid && (dirty || touched)\">\n                <input\n                    id=\"{{ name }}\"\n                    name=\"{{ name }}\"\n                    [type]=\"passwordeyevisible ? 'text' : 'password'\"\n                    class=\"form-control\"\n                    [attr.placeholder]=\"placeholder\"\n                    [value]=\"value\"\n                    (blur)=\"onTouch()\"\n                    (input)=\"setValue($event.target.value)\"\n                    (keypress)=\"onKeyPress($event)\"\n                    [attr.maxlength]=\"maxtextlength\"\n                    autocomplete=\"new-password\"\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\n                    [ngClass]=\"[componentHeight | toControlHeight]\"\n                    [disabled]=\"isdisabled\"\n                    [readonly]=\"readonly\" />\n                <a\n                    *ngIf=\"passwordeye\"\n                    class=\"btn btn-outline-secondary\"\n                    (click)=\"onTogglePasswordEye()\"\n                    ><span [ngClass]=\"passwordeyevisible ? PasswordEyeVisibleIcon : PasswordEyeHiddenIcon\"></span>\n                </a>\n                <div\n                    *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                    class=\"invalid-feedback\">\n                    {{ GetErrorMessage() | async }}\n                </div>\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: SacFormLayoutDirective, decorators: [{
                     type: Host
                 }, {
                     type: Optional
@@ -1589,15 +1924,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Input Box für Suche
  */
 class SacInputSearchComponent extends SacInputSearchCommon {
+    // #region Constructors
     /**
-     * Konstruktor
-     * @param parent Formular
-     * @param injector Angular Dependency Injection Service
+     * Constructor
+     * @param formLayout SacFormLayout to define scoped layout settings
+     * @param injector Injector for injecting services
      */
-    constructor(parent, injector) {
-        super(parent, injector);
+    constructor(formLayout, injector) {
+        super(formLayout, injector);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacInputSearchComponent, deps: [{ token: SacFormDirective, host: true, optional: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacInputSearchComponent, deps: [{ token: SacFormLayoutDirective, host: true, optional: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SacInputSearchComponent, isStandalone: true, selector: "sac-inputsearch", providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -1609,7 +1945,7 @@ class SacInputSearchComponent extends SacInputSearchCommon {
                 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", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"row mb-3\"\n    [class.g-0]=\"disablelabel\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <label\n        id=\"{{ name }}_label\"\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n            <div\n                class=\"input-group\"\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\n                <input\n                    id=\"{{ name }}\"\n                    name=\"{{ name }}\"\n                    type=\"text\"\n                    inputmode=\"search\"\n                    class=\"form-control\"\n                    [value]=\"value\"\n                    [attr.placeholder]=\"placeholder\"\n                    (blur)=\"onTouch()\"\n                    (input)=\"setValue($event.target.value)\"\n                    (keypress)=\"onKeyPress($event)\"\n                    [attr.maxlength]=\"maxtextlength\"\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\n                    [ngClass]=\"[componentHeight | toControlHeight]\"\n                    [disabled]=\"isdisabled\"\n                    [readonly]=\"readonly\" />\n                <button\n                    type=\"button\"\n                    class=\"btn btn-secondary\"\n                    id=\"{{ name }}_search\"\n                    (click)=\"searchClick()\">\n                    <i\n                        *ngIf=\"buttonmode === 'icon' || buttonmode === 'mixed'\"\n                        [class]=\"iconname\"\n                        [class.me-2]=\"buttonmode === 'mixed'\"></i>\n                    <ng-container *ngIf=\"buttonmode === 'text' || buttonmode === 'mixed'\">{{ buttontext }}</ng-container>\n                </button>\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToLabelHeightPipe, name: "toLabelHeight" }, { kind: "pipe", type: SacToControlHeightPipe, name: "toControlHeight" }, { kind: "component", type: SacTooltipComponent, selector: "sac-tooltip" }, { kind: "pipe", type: SacTestingAttributePipe, name: "testingattribute" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacInputSearchComponent, decorators: [{
             type: Component,
@@ -1624,8 +1960,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             multi: true,
                             useExisting: forwardRef(() => SacInputSearchComponent),
                         },
-                    ], standalone: true, imports: [NgIf, NgClass], 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: [{
+                    ], standalone: true, imports: [
+                        NgClass,
+                        NgIf,
+                        SacToControlWidthCssPipe,
+                        SacToLabelWidthCssPipe,
+                        SacToLabelHeightPipe,
+                        SacToControlHeightPipe,
+                        SacTooltipComponent,
+                        SacTestingAttributePipe,
+                    ], template: "<div\n    class=\"row mb-3\"\n    [class.g-0]=\"disablelabel\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <label\n        id=\"{{ name }}_label\"\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n            <div\n                class=\"input-group\"\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\n                <input\n                    id=\"{{ name }}\"\n                    name=\"{{ name }}\"\n                    type=\"text\"\n                    inputmode=\"search\"\n                    class=\"form-control\"\n                    [value]=\"value\"\n                    [attr.placeholder]=\"placeholder\"\n                    (blur)=\"onTouch()\"\n                    (input)=\"setValue($event.target.value)\"\n                    (keypress)=\"onKeyPress($event)\"\n                    [attr.maxlength]=\"maxtextlength\"\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\n                    [ngClass]=\"[componentHeight | toControlHeight]\"\n                    [disabled]=\"isdisabled\"\n                    [readonly]=\"readonly\" />\n                <button\n                    type=\"button\"\n                    class=\"btn btn-secondary\"\n                    id=\"{{ name }}_search\"\n                    (click)=\"searchClick()\">\n                    <i\n                        *ngIf=\"buttonmode === 'icon' || buttonmode === 'mixed'\"\n                        [class]=\"iconname\"\n                        [class.me-2]=\"buttonmode === 'mixed'\"></i>\n                    <ng-container *ngIf=\"buttonmode === 'text' || buttonmode === 'mixed'\">{{ buttontext }}</ng-container>\n                </button>\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: SacFormLayoutDirective, decorators: [{
                     type: Host
                 }, {
                     type: Optional
@@ -1648,196 +1993,243 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
 
+class SACBootstrap5LayoutModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SACBootstrap5LayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SACBootstrap5LayoutModule, imports: [CommonModule,
+            SacFormLayoutDirective,
+            SacToControlHeightPipe,
+            SacToControlWidthCssPipe,
+            SacToLabelHeightPipe,
+            SacToLabelWidthCssPipe], exports: [SacFormLayoutDirective,
+            SacToControlHeightPipe,
+            SacToControlWidthCssPipe,
+            SacToLabelHeightPipe,
+            SacToLabelWidthCssPipe] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SACBootstrap5LayoutModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SACBootstrap5LayoutModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        SacFormLayoutDirective,
+                        SacToControlHeightPipe,
+                        SacToControlWidthCssPipe,
+                        SacToLabelHeightPipe,
+                        SacToLabelWidthCssPipe,
+                    ],
+                    exports: [
+                        SacFormLayoutDirective,
+                        SacToControlHeightPipe,
+                        SacToControlWidthCssPipe,
+                        SacToLabelHeightPipe,
+                        SacToLabelWidthCssPipe,
+                    ],
+                }]
+        }] });
+
+// #region Exported Classes
 /**
- * Listbox Komponente
+ * Direktive für Dropdown Option List
  */
-class SacListboxComponent extends SacListboxCommon {
+class SacDropdownOptionDirective extends SacDropdownOptionCommon {
+    // #region Constructors
     /**
      * Konstruktor
-     * @param parent Formular
-     * @param injector Angular Dependiency Injection Service
+     * @param elementRef Referenz auf HTML DOM Element
+     * @param renderer Angular Rendering Engine
+     * @param dropdownList Referenz auf DropDown Komponente
      */
-    constructor(parent, injector) {
-        super(parent, injector);
+    constructor(elementRef, renderer, dropdownList) {
+        super(elementRef, renderer, dropdownList);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacListboxComponent, deps: [{ token: SacFormDirective, host: true, optional: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SacListboxComponent, isStandalone: true, selector: "sac-listbox", providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacDropdownOptionDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: SacDropdownComponent, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SacDropdownOptionDirective, isStandalone: true, selector: "[sacOption],option", usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacDropdownOptionDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[sacOption],option', standalone: true }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: SacDropdownComponent, decorators: [{
+                    type: Optional
+                }, {
+                    type: Host
+                }] }]; } });
+/**
+ * Dropdown Komponente
+ */
+class SacDropdownComponent extends SacDropdownCommon {
+    // #region Constructors
+    /**
+     * Constructor
+     * @param formLayout SacFormLayout to define scoped layout settings
+     * @param injector Injector for injecting services
+     * @param renderer Angular rendering engine
+     * @param elementRef Reference to html dom element
+     */
+    constructor(formLayout, injector, renderer, elementRef) {
+        super(formLayout, injector, renderer, elementRef);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacDropdownComponent, deps: [{ token: SacFormLayoutDirective, host: true, optional: true }, { token: i0.Injector }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SacDropdownComponent, isStandalone: true, selector: "sac-dropdown", providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
-                useExisting: SacListboxComponent,
+                useExisting: SacDropdownComponent,
             },
             {
                 provide: NG_VALIDATORS,
                 multi: true,
-                useExisting: forwardRef(() => SacListboxComponent),
+                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    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", dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(function () { return NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return NgFor; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i0.forwardRef(function () { return AsyncPipe; }), name: "async" }, { kind: "directive", type: i0.forwardRef(function () { return SacListboxOptionDirective; }), selector: "[sacOption],option" }], viewProviders: [{ provide: ControlContainer, useExisting: SacFormDirective }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\"\n    class=\"row mb-3\"\n    [class.g-0]=\"disablelabel\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n            <select\n                #dropdownitem\n                id=\"{{ name }}\"\n                name=\"{{ name }}\"\n                class=\"form-select\"\n                [class.form-select-sm]=\"componentHeight === ControlHeight.Small\"\n                [class.form-select-lg]=\"componentHeight === ControlHeight.Large\"\n                [ngClass]=\"{ 'is-invalid': invalid && (dirty || touched) }\"\n                (blur)=\"onTouch()\"\n                (change)=\"setValue(dropdownitem.value)\"\n                [disabled]=\"isdisabled\">\n                <option\n                    *ngIf=\"emptylabel !== ''\"\n                    [ngValue]=\"emptyvalue\"\n                    >{{ emptylabel }}</option\n                >\n\n                <ng-content></ng-content>\n\n                <ng-container *ngIf=\"groupitems === ''\">\n                    <option\n                        *ngFor=\"let item of options\"\n                        [ngValue]=\"optionvalue ? item[optionvalue] : item\"\n                        [disabled]=\"optionenabled !== '' && item[optionenabled] === false\">\n                        <ng-template *ngTemplateOutlet=\"optionlabeltemplate || defaultItemLabelTemplate; context: { label: item[optionlabel], item: item }\"> </ng-template>\n                    </option>\n                </ng-container>\n\n                <ng-container *ngIf=\"groupitems !== ''\">\n                    <optgroup\n                        *ngFor=\"let group of options\"\n                        [attr.label]=\"group[grouplabel]\">\n                        <option\n                            *ngFor=\"let item of group[groupitems]\"\n                            [ngValue]=\"optionvalue ? item[optionvalue] : item\"\n                            [disabled]=\"optionenabled !== '' && item[optionenabled] === false\">\n                            <ng-template *ngTemplateOutlet=\"optionlabeltemplate || defaultItemLabelTemplate; context: { label: item[optionlabel], item: item }\"> </ng-template>\n                        </option>\n                    </optgroup>\n                </ng-container>\n            </select>\n            <div\n                class=\"invalid-feedback\"\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                {{ GetErrorMessage() | async }}\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n\n<ng-template\n    #defaultItemLabelTemplate\n    let-label=\"label\"\n    >{{ label }}</ng-template\n>\n", dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(function () { return NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return SacDropdownOptionDirective; }), selector: "[sacOption],option" }, { kind: "directive", type: i0.forwardRef(function () { return NgFor; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return NgTemplateOutlet; }), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i0.forwardRef(function () { return AsyncPipe; }), name: "async" }, { kind: "pipe", type: i0.forwardRef(function () { return SacToControlWidthCssPipe; }), name: "toControlWidthCss" }, { kind: "pipe", type: i0.forwardRef(function () { return SacToLabelWidthCssPipe; }), name: "toLabelWidthCss" }, { kind: "pipe", type: i0.forwardRef(function () { return SacToLabelHeightPipe; }), name: "toLabelHeight" }, { kind: "component", type: i0.forwardRef(function () { return SacTooltipComponent; }), selector: "sac-tooltip" }, { kind: "pipe", type: i0.forwardRef(function () { return SacToControlHeightPipe; }), name: "toControlHeight" }, { kind: "pipe", type: i0.forwardRef(function () { return SacTestingAttributePipe; }), name: "testingattribute" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacListboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sac-listbox', providers: [
+            args: [{ selector: 'sac-dropdown', providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             multi: true,
-                            useExisting: SacListboxComponent,
+                            useExisting: SacDropdownComponent,
                         },
                         {
                             provide: NG_VALIDATORS,
                             multi: true,
-                            useExisting: forwardRef(() => SacListboxComponent),
+                            useExisting: forwardRef(() => SacDropdownComponent),
                         },
-                    ], viewProviders: [{ provide: ControlContainer, useExisting: SacFormDirective }], standalone: true, imports: [
+                    ], standalone: true, imports: [
                         NgClass,
                         NgIf,
+                        forwardRef(() => SacDropdownOptionDirective),
                         NgFor,
+                        NgTemplateOutlet,
                         AsyncPipe,
-                        forwardRef(() => SacListboxOptionDirective),
-                    ], 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: [{
+                        SacToControlWidthCssPipe,
+                        SacToLabelWidthCssPipe,
+                        SacToLabelHeightPipe,
+                        SacTooltipComponent,
+                        SacToControlHeightPipe,
+                        SacTestingAttributePipe,
+                    ], template: "<div\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\"\n    class=\"row mb-3\"\n    [class.g-0]=\"disablelabel\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n            <select\n                #dropdownitem\n                id=\"{{ name }}\"\n                name=\"{{ name }}\"\n                class=\"form-select\"\n                [class.form-select-sm]=\"componentHeight === ControlHeight.Small\"\n                [class.form-select-lg]=\"componentHeight === ControlHeight.Large\"\n                [ngClass]=\"{ 'is-invalid': invalid && (dirty || touched) }\"\n                (blur)=\"onTouch()\"\n                (change)=\"setValue(dropdownitem.value)\"\n                [disabled]=\"isdisabled\">\n                <option\n                    *ngIf=\"emptylabel !== ''\"\n                    [ngValue]=\"emptyvalue\"\n                    >{{ emptylabel }}</option\n                >\n\n                <ng-content></ng-content>\n\n                <ng-container *ngIf=\"groupitems === ''\">\n                    <option\n                        *ngFor=\"let item of options\"\n                        [ngValue]=\"optionvalue ? item[optionvalue] : item\"\n                        [disabled]=\"optionenabled !== '' && item[optionenabled] === false\">\n                        <ng-template *ngTemplateOutlet=\"optionlabeltemplate || defaultItemLabelTemplate; context: { label: item[optionlabel], item: item }\"> </ng-template>\n                    </option>\n                </ng-container>\n\n                <ng-container *ngIf=\"groupitems !== ''\">\n                    <optgroup\n                        *ngFor=\"let group of options\"\n                        [attr.label]=\"group[grouplabel]\">\n                        <option\n                            *ngFor=\"let item of group[groupitems]\"\n                            [ngValue]=\"optionvalue ? item[optionvalue] : item\"\n                            [disabled]=\"optionenabled !== '' && item[optionenabled] === false\">\n                            <ng-template *ngTemplateOutlet=\"optionlabeltemplate || defaultItemLabelTemplate; context: { label: item[optionlabel], item: item }\"> </ng-template>\n                        </option>\n                    </optgroup>\n                </ng-container>\n            </select>\n            <div\n                class=\"invalid-feedback\"\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                {{ GetErrorMessage() | async }}\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n\n<ng-template\n    #defaultItemLabelTemplate\n    let-label=\"label\"\n    >{{ label }}</ng-template\n>\n" }]
+        }], ctorParameters: function () { return [{ type: SacFormLayoutDirective, decorators: [{
                     type: Host
                 }, {
                     type: Optional
-                }] }, { type: i0.Injector }]; } });
+                }] }, { type: i0.Injector }, { type: i0.Renderer2 }, { type: i0.ElementRef }]; } });
+
+class SACBootstrap5DropdownModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SACBootstrap5DropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SACBootstrap5DropdownModule, imports: [CommonModule, SacDropdownComponent,
+            SacDropdownOptionDirective], exports: [SacDropdownComponent,
+            SacDropdownOptionDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SACBootstrap5DropdownModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SACBootstrap5DropdownModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, SacDropdownComponent,
+                        SacDropdownOptionDirective],
+                    exports: [
+                        SacDropdownComponent,
+                        SacDropdownOptionDirective,
+                    ],
+                }]
+        }] });
+
+// #region Exported Classes
 /**
  * Option Item in Listbox
  */
 class SacListboxOptionDirective extends SacListboxOptionCommon {
+    // #region Constructors
     /**
      * Konstruktor
-     * @param _elementRef Referenz auf DOM Element
-     * @param _renderer Angular Rendering Engine
+     * @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);
+    constructor(elementRef, renderer, listbox) {
+        super(elementRef, renderer, listbox);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacListboxOptionDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: SacListboxComponent, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SacListboxOptionDirective, isStandalone: true, selector: "[sacOption],option", usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacListboxOptionDirective, decorators: [{
             type: Directive,
-            args: [{
-                    selector: '[sacOption],option',
-                    standalone: true,
-                }]
+            args: [{ selector: '[sacOption],option', standalone: true }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: SacListboxComponent, decorators: [{
                     type: Optional
                 }, {
                     type: Host
                 }] }]; } });
-
-class SACBootstrap5ListModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SACBootstrap5ListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SACBootstrap5ListModule, imports: [CommonModule, SacListboxComponent, SacListboxOptionDirective], exports: [SacListboxComponent, SacListboxOptionDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SACBootstrap5ListModule, imports: [CommonModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SACBootstrap5ListModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule, SacListboxComponent, SacListboxOptionDirective],
-                    exports: [SacListboxComponent, SacListboxOptionDirective],
-                }]
-        }] });
-
 /**
- * Dropdown Komponente
+ * Listbox Komponente
  */
-class SacDropdownComponent extends SacDropdownCommon {
+class SacListboxComponent extends SacListboxCommon {
+    // #region Constructors
     /**
-     * Konstruktor
-     * @param parent Formular
-     * @param injector Dependency Injection Service
-     * @param _renderer Angular Rendering Engine
-     * @param _elementRef Referenz auf HTML DOM Element
+     * Constructor
+     * @param formLayout SacFormLayout to define scoped layout settings
+     * @param injector Injector for injecting services
      */
-    constructor(parent, injector, _renderer, _elementRef) {
-        super(parent, injector, _renderer, _elementRef);
+    constructor(formLayout, injector) {
+        super(formLayout, injector);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacDropdownComponent, deps: [{ token: SacFormDirective, host: true, optional: true }, { token: i0.Injector }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SacDropdownComponent, isStandalone: true, selector: "sac-dropdown", providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacListboxComponent, deps: [{ token: SacFormLayoutDirective, host: true, optional: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SacListboxComponent, isStandalone: true, selector: "sac-listbox", providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
-                useExisting: SacDropdownComponent,
+                useExisting: SacListboxComponent,
             },
             {
                 provide: NG_VALIDATORS,
                 multi: true,
-                useExisting: forwardRef(() => SacDropdownComponent),
+                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    [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", dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(function () { return NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return SacDropdownOptionDirective; }), selector: "[sacOption],option" }, { kind: "directive", type: i0.forwardRef(function () { return NgFor; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return NgTemplateOutlet; }), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i0.forwardRef(function () { return AsyncPipe; }), name: "async" }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\"\n    class=\"row mb-3\"\n    [class.g-0]=\"disablelabel\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\"\n            ><span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n            <select\n                multiple\n                id=\"{{ name }}\"\n                name=\"{{ name }}\"\n                class=\"form-select\"\n                [class.form-select-sm]=\"componentHeight === ControlHeight.Small\"\n                [class.form-select-lg]=\"componentHeight === ControlHeight.Large\"\n                [size]=\"rowsize\"\n                [ngClass]=\"{ 'is-invalid': invalid && (dirty || touched) }\"\n                (blur)=\"onTouch()\"\n                (change)=\"getSelectedItems($event.target)\"\n                [disabled]=\"isdisabled\">\n                <ng-content></ng-content>\n                <ng-container *ngIf=\"groupitems === ''\">\n                    <option\n                        *ngFor=\"let option of options\"\n                        [value]=\"option[optionvalue]\"\n                        [disabled]=\"optionenabled !== '' && option[optionenabled] === false\"\n                        >{{ option[optionlabel] }}</option\n                    >\n                </ng-container>\n                <ng-container *ngIf=\"groupitems !== ''\">\n                    <optgroup\n                        *ngFor=\"let option of options\"\n                        [attr.label]=\"option[grouplabel]\">\n                        <option\n                            *ngFor=\"let item of option[groupitems]\"\n                            [value]=\"item[optionvalue]\"\n                            [disabled]=\"optionenabled !== '' && item[optionenabled] === false\"\n                            >{{ item[optionlabel] }}</option\n                        >\n                    </optgroup>\n                </ng-container>\n            </select>\n            <div\n                class=\"invalid-feedback\"\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                {{ GetErrorMessage() | async }}\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(function () { return NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return NgFor; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i0.forwardRef(function () { return AsyncPipe; }), name: "async" }, { kind: "directive", type: i0.forwardRef(function () { return SacListboxOptionDirective; }), selector: "[sacOption],option" }, { kind: "pipe", type: i0.forwardRef(function () { return SacToControlWidthCssPipe; }), name: "toControlWidthCss" }, { kind: "pipe", type: i0.forwardRef(function () { return SacToLabelWidthCssPipe; }), name: "toLabelWidthCss" }, { kind: "pipe", type: i0.forwardRef(function () { return SacToLabelHeightPipe; }), name: "toLabelHeight" }, { kind: "component", type: i0.forwardRef(function () { return SacTooltipComponent; }), selector: "sac-tooltip" }, { kind: "pipe", type: i0.forwardRef(function () { return SacToControlHeightPipe; }), name: "toControlHeight" }, { kind: "pipe", type: i0.forwardRef(function () { return SacTestingAttributePipe; }), name: "testingattribute" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacDropdownComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacListboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sac-dropdown', providers: [
+            args: [{ selector: 'sac-listbox', providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             multi: true,
-                            useExisting: SacDropdownComponent,
+                            useExisting: SacListboxComponent,
                         },
                         {
                             provide: NG_VALIDATORS,
                             multi: true,
-                            useExisting: forwardRef(() => SacDropdownComponent),
+                            useExisting: forwardRef(() => SacListboxComponent),
                         },
                     ], standalone: true, imports: [
                         NgClass,
                         NgIf,
-                        forwardRef(() => SacDropdownOptionDirective),
                         NgFor,
-                        NgTemplateOutlet,
                         AsyncPipe,
-                    ], 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: [{
+                        forwardRef(() => SacListboxOptionDirective),
+                        SacToControlWidthCssPipe,
+                        SacToLabelWidthCssPipe,
+                        SacToLabelHeightPipe,
+                        SacTooltipComponent,
+                        SacToControlHeightPipe,
+                        SacTestingAttributePipe
+                    ], template: "<div\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\"\n    class=\"row mb-3\"\n    [class.g-0]=\"disablelabel\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\"\n            ><span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n            <select\n                multiple\n                id=\"{{ name }}\"\n                name=\"{{ name }}\"\n                class=\"form-select\"\n                [class.form-select-sm]=\"componentHeight === ControlHeight.Small\"\n                [class.form-select-lg]=\"componentHeight === ControlHeight.Large\"\n                [size]=\"rowsize\"\n                [ngClass]=\"{ 'is-invalid': invalid && (dirty || touched) }\"\n                (blur)=\"onTouch()\"\n                (change)=\"getSelectedItems($event.target)\"\n                [disabled]=\"isdisabled\">\n                <ng-content></ng-content>\n                <ng-container *ngIf=\"groupitems === ''\">\n                    <option\n                        *ngFor=\"let option of options\"\n                        [value]=\"option[optionvalue]\"\n                        [disabled]=\"optionenabled !== '' && option[optionenabled] === false\"\n                        >{{ option[optionlabel] }}</option\n                    >\n                </ng-container>\n                <ng-container *ngIf=\"groupitems !== ''\">\n                    <optgroup\n                        *ngFor=\"let option of options\"\n                        [attr.label]=\"option[grouplabel]\">\n                        <option\n                            *ngFor=\"let item of option[groupitems]\"\n                            [value]=\"item[optionvalue]\"\n                            [disabled]=\"optionenabled !== '' && item[optionenabled] === false\"\n                            >{{ item[optionlabel] }}</option\n                        >\n                    </optgroup>\n                </ng-container>\n            </select>\n            <div\n                class=\"invalid-feedback\"\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                {{ GetErrorMessage() | async }}\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: SacFormLayoutDirective, 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);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacDropdownOptionDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: SacDropdownComponent, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SacDropdownOptionDirective, isStandalone: true, selector: "[sacOption],option", usesInheritance: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacDropdownOptionDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[sacOption],option',
-                    standalone: true
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: SacDropdownComponent, decorators: [{
-                    type: Optional
-                }, {
-                    type: Host
-                }] }]; } });
+                }] }, { type: i0.Injector }]; } });
 
-class SACBootstrap5DropdownModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SACBootstrap5DropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SACBootstrap5DropdownModule, imports: [CommonModule, SacDropdownComponent,
-            SacDropdownOptionDirective], exports: [SacDropdownComponent,
-            SacDropdownOptionDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SACBootstrap5DropdownModule, imports: [CommonModule] }); }
+class SACBootstrap5ListModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SACBootstrap5ListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SACBootstrap5ListModule, imports: [CommonModule, SacListboxComponent, SacListboxOptionDirective], exports: [SacListboxComponent, SacListboxOptionDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SACBootstrap5ListModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SACBootstrap5DropdownModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SACBootstrap5ListModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, SacDropdownComponent,
-                        SacDropdownOptionDirective],
-                    exports: [
-                        SacDropdownComponent,
-                        SacDropdownOptionDirective,
-                    ],
+                    imports: [CommonModule, SacListboxComponent, SacListboxOptionDirective],
+                    exports: [SacListboxComponent, SacListboxOptionDirective],
                 }]
         }] });
 
@@ -1845,12 +2237,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Anker Komponente für Context Menü. Wird zum positionieren des Context Menü in der Page benötigt.
  */
 class SacMultilanguagemenuAnchorDirective extends SacContextmenuAnchorCommon {
+    // #region Constructors
     /**
      * Konstruktor
-     * @param _elementRef HTML DOM Referenz
+     * @param elementRef HTML DOM Referenz
      */
-    constructor(_elementRef) {
-        super(_elementRef);
+    constructor(elementRef) {
+        super(elementRef);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacMultilanguagemenuAnchorDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SacMultilanguagemenuAnchorDirective, isStandalone: true, selector: "[sacMultilanguageMenuAnchor]", providers: [
@@ -1878,12 +2271,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Marker Komponente für Context Menü
  */
 class SacMultilanguagemenuContainerDirective extends SacContextMenuContrainerCommon {
+    // #region Constructors
     /**
      * Konstruktor
-     * @param _elementRef Referenz auf DOM Element
+     * @param elementRef Referenz auf DOM Element
      */
-    constructor(_elementRef) {
-        super(_elementRef);
+    constructor(elementRef) {
+        super(elementRef);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacMultilanguagemenuContainerDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SacMultilanguagemenuContainerDirective, isStandalone: true, selector: "[sacMultilanguageMenuContainer]", providers: [
@@ -1911,16 +2305,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Component für Contextmenü
  */
 class SacMultilanguagemenuComponent extends SacContextmenuCommon {
+    // #endregion Properties
+    // #region Constructors
     /**
      * 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
+     * @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);
+    constructor(document, ngZone, elementRef, renderer, injector) {
+        super(document, ngZone, elementRef, renderer, injector);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacMultilanguagemenuComponent, deps: [{ token: DOCUMENT }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SacMultilanguagemenuComponent, isStandalone: true, selector: "[sac-multilanguagemenu]", inputs: { inputtemplate: "inputtemplate", validationtemplate: "validationtemplate" }, providers: [
@@ -1928,7 +2324,7 @@ class SacMultilanguagemenuComponent extends SacContextmenuCommon {
                 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", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: SacMultilanguagemenuContainerDirective, selector: "[sacMultilanguageMenuContainer]" }, { kind: "directive", type: SacMultilanguagemenuAnchorDirective, selector: "[sacMultilanguageMenuAnchor]" }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<ng-container\n  [ngTemplateOutlet]=\"inputtemplate || defaultInputTemplate\"\n></ng-container>\n<ng-container\n  [ngTemplateOutlet]=\"buttontemplate || defaultButtonTemplate\"\n></ng-container>\n<ng-container\n  [ngTemplateOutlet]=\"validationtemplate || defaultValidationTemplate\"\n></ng-container>\n\n<ul\n  class=\"dropdown-menu dropdown-menu-right\"\n  sacMultilanguageMenuContainer\n  [class.show]=\"isopen\"\n>\n  <ng-content></ng-content>\n</ul>\n\n<ng-template #defaultButtonTemplate>\n  <button\n    sacMultilanguageMenuAnchor\n    class=\"btn btn-secondary dropdown-toggle\"\n    type=\"button\"\n    (click)=\"toggle()\"\n  ></button>\n</ng-template>\n\n<ng-template #defaultInputTemplate>\n  <input type=\"text\" class=\"form-control\" />\n</ng-template>\n\n<ng-template #defaultValidationTemplate></ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: SacMultilanguagemenuContainerDirective, selector: "[sacMultilanguageMenuContainer]" }, { kind: "directive", type: SacMultilanguagemenuAnchorDirective, selector: "[sacMultilanguageMenuAnchor]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacMultilanguagemenuComponent, decorators: [{
             type: Component,
@@ -1941,7 +2337,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         NgTemplateOutlet,
                         SacMultilanguagemenuContainerDirective,
                         SacMultilanguagemenuAnchorDirective,
-                    ], 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" }]
+                    ], template: "<ng-container\n  [ngTemplateOutlet]=\"inputtemplate || defaultInputTemplate\"\n></ng-container>\n<ng-container\n  [ngTemplateOutlet]=\"buttontemplate || defaultButtonTemplate\"\n></ng-container>\n<ng-container\n  [ngTemplateOutlet]=\"validationtemplate || defaultValidationTemplate\"\n></ng-container>\n\n<ul\n  class=\"dropdown-menu dropdown-menu-right\"\n  sacMultilanguageMenuContainer\n  [class.show]=\"isopen\"\n>\n  <ng-content></ng-content>\n</ul>\n\n<ng-template #defaultButtonTemplate>\n  <button\n    sacMultilanguageMenuAnchor\n    class=\"btn btn-secondary dropdown-toggle\"\n    type=\"button\"\n    (click)=\"toggle()\"\n  ></button>\n</ng-template>\n\n<ng-template #defaultInputTemplate>\n  <input type=\"text\" class=\"form-control\" />\n</ng-template>\n\n<ng-template #defaultValidationTemplate></ng-template>\n" }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -1952,41 +2348,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * Component für Menü Eintrag in Context Menü
+ * Component for menu entry in context menu
  */
 class SacMultilanguagemenuItemButtonComponent extends SacContextmenuItemButtonCommon {
+    // #region Constructors
     /**
      * Constructor
-     * @param contextmenu Instance von Context Menü
      */
-    constructor(contextmenu) {
-        super(contextmenu);
+    constructor() {
+        super();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacMultilanguagemenuItemButtonComponent, deps: [{ token: i1.SacContextmenuCommon }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SacMultilanguagemenuItemButtonComponent, isStandalone: true, 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", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacMultilanguagemenuItemButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SacMultilanguagemenuItemButtonComponent, isStandalone: true, selector: "sac-multilanguagemenubutton", providers: [
+            {
+                provide: SacContextmenuItemCommon,
+                useExisting: forwardRef(() => SacMultilanguagemenuItemButtonComponent),
+            },
+        ], usesInheritance: true, ngImport: i0, template: "<li>\n  <button\n    type=\"button\"\n    class=\"dropdown-item\"\n    (click)=\"callaction($event)\"\n    [class.disabled]=\"isdisabled\"\n    [class]=\"cssclass\"\n    [attr.disabled]=\"isdisabled ? 'disabled' : null\"\n  >\n    <div class=\"d-flex\">\n      <div *ngIf=\"!isicondisabled\" style=\"min-width: 1.5rem\">\n        <img *ngIf=\"image\" [src]=\"image\" class=\"align-baseline\" />\n        <i *ngIf=\"icon\" [class]=\"iconstyle + ' ' + icon\"></i>\n      </div>\n      <div class=\"flex-grow-1\">{{ text }}</div>\n    </div>\n  </button>\n</li>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacMultilanguagemenuItemButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sac-multilanguagemenubutton', standalone: true, imports: [NgIf], 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 }]; } });
+            args: [{ selector: 'sac-multilanguagemenubutton', providers: [
+                        {
+                            provide: SacContextmenuItemCommon,
+                            useExisting: forwardRef(() => SacMultilanguagemenuItemButtonComponent),
+                        },
+                    ], standalone: true, imports: [NgIf], template: "<li>\n  <button\n    type=\"button\"\n    class=\"dropdown-item\"\n    (click)=\"callaction($event)\"\n    [class.disabled]=\"isdisabled\"\n    [class]=\"cssclass\"\n    [attr.disabled]=\"isdisabled ? 'disabled' : null\"\n  >\n    <div class=\"d-flex\">\n      <div *ngIf=\"!isicondisabled\" style=\"min-width: 1.5rem\">\n        <img *ngIf=\"image\" [src]=\"image\" class=\"align-baseline\" />\n        <i *ngIf=\"icon\" [class]=\"iconstyle + ' ' + icon\"></i>\n      </div>\n      <div class=\"flex-grow-1\">{{ text }}</div>\n    </div>\n  </button>\n</li>\n" }]
+        }], ctorParameters: function () { return []; } });
 
 /**
  * Componente für Mehrsprache Texte
  */
 class SacMultilanguageInputComponent extends SacMultilanguageInputCommon {
+    // #endregion Properties
+    // #region Constructors
     /**
-     * Konstruktor
-     * @param parent Formular Inject
-     * @param injector Default Injector
+     * Constructor
+     * @param formLayout SacFormLayout to define scoped layout settings
+     * @param injector Injector for injecting services
      */
-    constructor(parent, injector) {
-        super(parent, injector);
+    constructor(formLayout, injector) {
+        super(formLayout, injector);
+        // #region Properties
         /**
          * Enum für IconType in HTML Template
          */
         this.IconType = IconType;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacMultilanguageInputComponent, deps: [{ token: SacFormDirective, host: true, optional: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacMultilanguageInputComponent, deps: [{ token: SacFormLayoutDirective, host: true, optional: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SacMultilanguageInputComponent, isStandalone: true, selector: "sac-multilanguageinput", providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -1998,7 +2407,7 @@ class SacMultilanguageInputComponent extends SacMultilanguageInputCommon {
                 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", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SacMultilanguagemenuComponent, selector: "[sac-multilanguagemenu]", inputs: ["inputtemplate", "validationtemplate"] }, { kind: "directive", type: SacMultilanguagemenuAnchorDirective, selector: "[sacMultilanguageMenuAnchor]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: SacMultilanguagemenuItemButtonComponent, selector: "sac-multilanguagemenubutton" }], viewProviders: [{ provide: ControlContainer, useExisting: SacFormDirective }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\"\n    class=\"row mb-3\"\n    [class.g-0]=\"disablelabel\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n            <div\n                class=\"input-group\"\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\n                [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                placement=\"bottom-right\"\n                sac-multilanguagemenu\n                [buttontemplate]=\"menuButton\"\n                [inputtemplate]=\"menuInput\"\n                [validationtemplate]=\"validationMessage\"\n                #contextmenu>\n                <ng-template #menuInput>\n                    <input\n                        id=\"{{ name }}\"\n                        name=\"{{ name }}\"\n                        type=\"text\"\n                        class=\"form-control\"\n                        [value]=\"LanguageValue\"\n                        [attr.placeholder]=\"placeholder\"\n                        (blur)=\"onTouch()\"\n                        (input)=\"SetLanguageValue($event.target.value)\"\n                        [attr.maxlength]=\"maxtextlength\"\n                        [class.is-invalid]=\"invalid && (dirty || touched)\"\n                        [ngClass]=\"[componentHeight | toControlHeight]\"\n                        [disabled]=\"isdisabled\" />\n                </ng-template>\n\n                <ng-template #menuButton>\n                    <button\n                        sacMultilanguageMenuAnchor\n                        [id]=\"name + '_dropdownitem'\"\n                        type=\"button\"\n                        class=\"btn dropdown-toggle\"\n                        (click)=\"contextmenu.toggle()\"\n                        [ngClass]=\"[IsAnyEmpty() ? 'btn-warning' : 'btn-secondary']\">\n                        <img\n                            src=\"{{ SelectedIcon }}\"\n                            class=\"align-baseline mr-1 ml-1\"\n                            *ngIf=\"SelectedIconType === IconType.Image\" />\n                        <span\n                            [ngClass]=\"SelectedIcon\"\n                            class=\"align-baseline mr-1 ml-1\"\n                            *ngIf=\"SelectedIconType === IconType.CssSprite\"></span>\n                    </button>\n                </ng-template>\n\n                <ng-template #validationMessage>\n                    <div\n                        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                        class=\"invalid-feedback\">\n                        {{ GetErrorMessage() | async }}\n                    </div></ng-template\n                >\n\n                <ng-container *ngFor=\"let sprache of Languages\">\n                    <sac-multilanguagemenubutton\n                        *ngIf=\"sprache.IconType === IconType.Image\"\n                        text=\"{{ sprache.Text }}\"\n                        image=\"{{ sprache.Icon }}\"\n                        [cssclass]=\"IsEmpty(sprache) ? 'text-danger border-left border-danger' : ''\"\n                        (clicked)=\"SelectLanguage(sprache)\"></sac-multilanguagemenubutton>\n                    <sac-multilanguagemenubutton\n                        *ngIf=\"sprache.IconType === IconType.CssSprite\"\n                        text=\"{{ sprache.Text }}\"\n                        icon=\"{{ sprache.Icon }}\"\n                        [cssclass]=\"IsEmpty(sprache) ? 'text-danger border-left border-danger' : ''\"\n                        (clicked)=\"SelectLanguage(sprache)\"></sac-multilanguagemenubutton>\n                </ng-container>\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n<div class=\"row\">\n    <div class=\"col text-right\"></div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SacMultilanguagemenuComponent, selector: "[sac-multilanguagemenu]", inputs: ["inputtemplate", "validationtemplate"] }, { kind: "directive", type: SacMultilanguagemenuAnchorDirective, selector: "[sacMultilanguageMenuAnchor]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: SacMultilanguagemenuItemButtonComponent, selector: "sac-multilanguagemenubutton" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToLabelHeightPipe, name: "toLabelHeight" }, { kind: "pipe", type: SacToControlHeightPipe, name: "toControlHeight" }, { kind: "component", type: SacTooltipComponent, selector: "sac-tooltip" }, { kind: "pipe", type: SacTestingAttributePipe, name: "testingattribute" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacMultilanguageInputComponent, decorators: [{
             type: Component,
@@ -2013,7 +2422,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             multi: true,
                             useExisting: forwardRef(() => SacMultilanguageInputComponent),
                         },
-                    ], viewProviders: [{ provide: ControlContainer, useExisting: SacFormDirective }], standalone: true, imports: [
+                    ], standalone: true, imports: [
                         NgClass,
                         SacMultilanguagemenuComponent,
                         SacMultilanguagemenuAnchorDirective,
@@ -2021,8 +2430,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         NgFor,
                         AsyncPipe,
                         SacMultilanguagemenuItemButtonComponent,
-                    ], 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: [{
+                        SacToControlWidthCssPipe,
+                        SacToLabelWidthCssPipe,
+                        SacToLabelHeightPipe,
+                        SacToControlHeightPipe,
+                        SacTooltipComponent,
+                        SacTestingAttributePipe,
+                    ], template: "<div\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\"\n    class=\"row mb-3\"\n    [class.g-0]=\"disablelabel\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n            <div\n                class=\"input-group\"\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\n                [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                placement=\"bottom-right\"\n                sac-multilanguagemenu\n                [buttontemplate]=\"menuButton\"\n                [inputtemplate]=\"menuInput\"\n                [validationtemplate]=\"validationMessage\"\n                #contextmenu>\n                <ng-template #menuInput>\n                    <input\n                        id=\"{{ name }}\"\n                        name=\"{{ name }}\"\n                        type=\"text\"\n                        class=\"form-control\"\n                        [value]=\"LanguageValue\"\n                        [attr.placeholder]=\"placeholder\"\n                        (blur)=\"onTouch()\"\n                        (input)=\"SetLanguageValue($event.target.value)\"\n                        [attr.maxlength]=\"maxtextlength\"\n                        [class.is-invalid]=\"invalid && (dirty || touched)\"\n                        [ngClass]=\"[componentHeight | toControlHeight]\"\n                        [disabled]=\"isdisabled\" />\n                </ng-template>\n\n                <ng-template #menuButton>\n                    <button\n                        sacMultilanguageMenuAnchor\n                        [id]=\"name + '_dropdownitem'\"\n                        type=\"button\"\n                        class=\"btn dropdown-toggle\"\n                        (click)=\"contextmenu.toggle()\"\n                        [ngClass]=\"[IsAnyEmpty() ? 'btn-warning' : 'btn-secondary']\">\n                        <img\n                            src=\"{{ SelectedIcon }}\"\n                            class=\"align-baseline mr-1 ml-1\"\n                            *ngIf=\"SelectedIconType === IconType.Image\" />\n                        <span\n                            [ngClass]=\"SelectedIcon\"\n                            class=\"align-baseline mr-1 ml-1\"\n                            *ngIf=\"SelectedIconType === IconType.CssSprite\"></span>\n                    </button>\n                </ng-template>\n\n                <ng-template #validationMessage>\n                    <div\n                        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                        class=\"invalid-feedback\">\n                        {{ GetErrorMessage() | async }}\n                    </div></ng-template\n                >\n\n                <ng-container *ngFor=\"let sprache of Languages\">\n                    <sac-multilanguagemenubutton\n                        *ngIf=\"sprache.IconType === IconType.Image\"\n                        text=\"{{ sprache.Text }}\"\n                        image=\"{{ sprache.Icon }}\"\n                        [cssclass]=\"IsEmpty(sprache) ? 'text-danger border-left border-danger' : ''\"\n                        (clicked)=\"SelectLanguage(sprache)\"></sac-multilanguagemenubutton>\n                    <sac-multilanguagemenubutton\n                        *ngIf=\"sprache.IconType === IconType.CssSprite\"\n                        text=\"{{ sprache.Text }}\"\n                        icon=\"{{ sprache.Icon }}\"\n                        [cssclass]=\"IsEmpty(sprache) ? 'text-danger border-left border-danger' : ''\"\n                        (clicked)=\"SelectLanguage(sprache)\"></sac-multilanguagemenubutton>\n                </ng-container>\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n<div class=\"row\">\n    <div class=\"col text-right\"></div>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: SacFormLayoutDirective, decorators: [{
                     type: Host
                 }, {
                     type: Optional
@@ -2032,19 +2447,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Componente für Mehrsprache Texte als mehrzeiliger Text
  */
 class SacMultilanguageInputAreaComponent extends SacMultilanguageInputAreaCommon {
+    // #endregion Properties
+    // #region Constructors
     /**
-     * Konstruktor
-     * @param parent Formular Inject
-     * @param injector Default Injector
+     * Constructor
+     * @param formLayout SacFormLayout to define scoped layout settings
+     * @param injector Injector for injecting services
      */
-    constructor(parent, injector) {
-        super(parent, injector);
+    constructor(formLayout, injector) {
+        super(formLayout, injector);
+        // #region Properties
         /**
          * Enum für IconType in HTML Template
          */
         this.IconType = IconType;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacMultilanguageInputAreaComponent, deps: [{ token: SacFormDirective, host: true, optional: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacMultilanguageInputAreaComponent, deps: [{ token: SacFormLayoutDirective, host: true, optional: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SacMultilanguageInputAreaComponent, isStandalone: true, selector: "sac-multilanguageinputarea", providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -2056,7 +2474,7 @@ class SacMultilanguageInputAreaComponent extends SacMultilanguageInputAreaCommon
                 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", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SacMultilanguagemenuComponent, selector: "[sac-multilanguagemenu]", inputs: ["inputtemplate", "validationtemplate"] }, { kind: "directive", type: SacMultilanguagemenuAnchorDirective, selector: "[sacMultilanguageMenuAnchor]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: SacMultilanguagemenuItemButtonComponent, selector: "sac-multilanguagemenubutton" }], viewProviders: [{ provide: ControlContainer, useExisting: SacFormDirective }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\"\n    class=\"row mb-3\"\n    [class.g-0]=\"disablelabel\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n            <div\n                class=\"input-group\"\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\n                [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                placement=\"bottom-right\"\n                sac-multilanguagemenu\n                [buttontemplate]=\"menuButton\"\n                [inputtemplate]=\"menuInput\"\n                [validationtemplate]=\"validationMessage\"\n                #contextmenu>\n                <ng-template #menuInput>\n                    <textarea\n                        id=\"{{ name }}\"\n                        name=\"{{ name }}\"\n                        type=\"text\"\n                        class=\"form-control\"\n                        [value]=\"LanguageValue\"\n                        [attr.placeholder]=\"placeholder\"\n                        (blur)=\"onTouch()\"\n                        style=\"height: auto\"\n                        (input)=\"SetLanguageValue($event.target.value)\"\n                        [attr.rows]=\"rows\"\n                        [attr.maxlength]=\"maxtextlength\"\n                        [class.is-invalid]=\"invalid && (dirty || touched)\"\n                        [ngClass]=\"[componentHeight | toControlHeight]\"\n                        [disabled]=\"isdisabled\"></textarea>\n                </ng-template>\n\n                <ng-template #menuButton>\n                    <button\n                        sacMultilanguageMenuAnchor\n                        [id]=\"name + '_dropdownitem'\"\n                        type=\"button\"\n                        class=\"btn dropdown-toggle\"\n                        (click)=\"contextmenu.toggle()\"\n                        [ngClass]=\"[IsAnyEmpty() ? 'btn-warning' : 'btn-secondary']\">\n                        <img\n                            src=\"{{ SelectedIcon }}\"\n                            class=\"align-baseline mr-1 ml-1\"\n                            *ngIf=\"SelectedIconType === IconType.Image\" />\n                        <i\n                            [ngClass]=\"SelectedIcon\"\n                            class=\"align-baseline mr-1 ml-1\"\n                            *ngIf=\"SelectedIconType === IconType.CssSprite\"></i>\n                    </button>\n                </ng-template>\n\n                <ng-template #validationMessage>\n                    <div\n                        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                        class=\"invalid-feedback\">\n                        {{ GetErrorMessage() | async }}\n                    </div></ng-template\n                >\n\n                <ng-container *ngFor=\"let sprache of Languages\">\n                    <sac-multilanguagemenubutton\n                        *ngIf=\"sprache.IconType === IconType.Image\"\n                        text=\"{{ sprache.Text }}\"\n                        image=\"{{ sprache.Icon }}\"\n                        [cssclass]=\"IsEmpty(sprache) ? 'text-danger border-left border-danger' : ''\"\n                        (clicked)=\"SelectLanguage(sprache)\"></sac-multilanguagemenubutton>\n                    <sac-multilanguagemenubutton\n                        *ngIf=\"sprache.IconType === IconType.CssSprite\"\n                        text=\"{{ sprache.Text }}\"\n                        icon=\"{{ sprache.Icon }}\"\n                        [cssclass]=\"IsEmpty(sprache) ? 'text-danger border-left border-danger' : ''\"\n                        (clicked)=\"SelectLanguage(sprache)\"></sac-multilanguagemenubutton>\n                </ng-container>\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n<div class=\"row\">\n    <div class=\"col text-right\"></div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SacMultilanguagemenuComponent, selector: "[sac-multilanguagemenu]", inputs: ["inputtemplate", "validationtemplate"] }, { kind: "directive", type: SacMultilanguagemenuAnchorDirective, selector: "[sacMultilanguageMenuAnchor]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: SacMultilanguagemenuItemButtonComponent, selector: "sac-multilanguagemenubutton" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToLabelHeightPipe, name: "toLabelHeight" }, { kind: "pipe", type: SacToControlHeightPipe, name: "toControlHeight" }, { kind: "component", type: SacTooltipComponent, selector: "sac-tooltip" }, { kind: "pipe", type: SacTestingAttributePipe, name: "testingattribute" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacMultilanguageInputAreaComponent, decorators: [{
             type: Component,
@@ -2071,7 +2489,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             multi: true,
                             useExisting: forwardRef(() => SacMultilanguageInputAreaComponent),
                         },
-                    ], viewProviders: [{ provide: ControlContainer, useExisting: SacFormDirective }], standalone: true, imports: [
+                    ], standalone: true, imports: [
                         NgClass,
                         SacMultilanguagemenuComponent,
                         SacMultilanguagemenuAnchorDirective,
@@ -2079,8 +2497,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         NgFor,
                         AsyncPipe,
                         SacMultilanguagemenuItemButtonComponent,
-                    ], 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: [{
+                        SacToControlWidthCssPipe,
+                        SacToLabelWidthCssPipe,
+                        SacToLabelHeightPipe,
+                        SacToControlHeightPipe,
+                        SacTooltipComponent,
+                        SacTestingAttributePipe,
+                    ], template: "<div\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\"\n    class=\"row mb-3\"\n    [class.g-0]=\"disablelabel\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n            <div\n                class=\"input-group\"\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\n                [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                placement=\"bottom-right\"\n                sac-multilanguagemenu\n                [buttontemplate]=\"menuButton\"\n                [inputtemplate]=\"menuInput\"\n                [validationtemplate]=\"validationMessage\"\n                #contextmenu>\n                <ng-template #menuInput>\n                    <textarea\n                        id=\"{{ name }}\"\n                        name=\"{{ name }}\"\n                        type=\"text\"\n                        class=\"form-control\"\n                        [value]=\"LanguageValue\"\n                        [attr.placeholder]=\"placeholder\"\n                        (blur)=\"onTouch()\"\n                        style=\"height: auto\"\n                        (input)=\"SetLanguageValue($event.target.value)\"\n                        [attr.rows]=\"rows\"\n                        [attr.maxlength]=\"maxtextlength\"\n                        [class.is-invalid]=\"invalid && (dirty || touched)\"\n                        [ngClass]=\"[componentHeight | toControlHeight]\"\n                        [disabled]=\"isdisabled\"></textarea>\n                </ng-template>\n\n                <ng-template #menuButton>\n                    <button\n                        sacMultilanguageMenuAnchor\n                        [id]=\"name + '_dropdownitem'\"\n                        type=\"button\"\n                        class=\"btn dropdown-toggle\"\n                        (click)=\"contextmenu.toggle()\"\n                        [ngClass]=\"[IsAnyEmpty() ? 'btn-warning' : 'btn-secondary']\">\n                        <img\n                            src=\"{{ SelectedIcon }}\"\n                            class=\"align-baseline mr-1 ml-1\"\n                            *ngIf=\"SelectedIconType === IconType.Image\" />\n                        <i\n                            [ngClass]=\"SelectedIcon\"\n                            class=\"align-baseline mr-1 ml-1\"\n                            *ngIf=\"SelectedIconType === IconType.CssSprite\"></i>\n                    </button>\n                </ng-template>\n\n                <ng-template #validationMessage>\n                    <div\n                        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                        class=\"invalid-feedback\">\n                        {{ GetErrorMessage() | async }}\n                    </div></ng-template\n                >\n\n                <ng-container *ngFor=\"let sprache of Languages\">\n                    <sac-multilanguagemenubutton\n                        *ngIf=\"sprache.IconType === IconType.Image\"\n                        text=\"{{ sprache.Text }}\"\n                        image=\"{{ sprache.Icon }}\"\n                        [cssclass]=\"IsEmpty(sprache) ? 'text-danger border-left border-danger' : ''\"\n                        (clicked)=\"SelectLanguage(sprache)\"></sac-multilanguagemenubutton>\n                    <sac-multilanguagemenubutton\n                        *ngIf=\"sprache.IconType === IconType.CssSprite\"\n                        text=\"{{ sprache.Text }}\"\n                        icon=\"{{ sprache.Icon }}\"\n                        [cssclass]=\"IsEmpty(sprache) ? 'text-danger border-left border-danger' : ''\"\n                        (clicked)=\"SelectLanguage(sprache)\"></sac-multilanguagemenubutton>\n                </ng-container>\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n<div class=\"row\">\n    <div class=\"col text-right\"></div>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: SacFormLayoutDirective, decorators: [{
                     type: Host
                 }, {
                     type: Optional
@@ -2113,15 +2537,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Komponente für statischen Text in einem Formular
  */
 class SacStaticLabelComponent extends SacStaticLabelCommon {
+    // #region Constructors
     /**
-     * Konstruktor
-     * @param parent Formular
-     * @param injector Angular Dependency Injection Service
+     * Constructor
+     * @param formLayout SacFormLayout to define scoped layout settings
+     * @param injector Injector for injecting services
      */
-    constructor(parent, injector) {
-        super(parent, injector);
+    constructor(formLayout, injector) {
+        super(formLayout, injector);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacStaticLabelComponent, deps: [{ token: SacFormDirective, host: true, optional: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacStaticLabelComponent, deps: [{ token: SacFormLayoutDirective, host: true, optional: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SacStaticLabelComponent, isStandalone: true, selector: "sac-staticlabel", providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -2133,7 +2558,7 @@ class SacStaticLabelComponent extends SacStaticLabelCommon {
                 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", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\"\n    class=\"row mb-3\"\n    [class.g-0]=\"disablelabel\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}_label\"\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\"\n            ><span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div>\n            <div\n                [id]=\"name\"\n                class=\"form-control-plaintext\"\n                [ngClass]=\"[componentHeight | toControlHeight]\"\n                [innerHTML]=\"value\"></div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToLabelHeightPipe, name: "toLabelHeight" }, { kind: "pipe", type: SacToControlHeightPipe, name: "toControlHeight" }, { kind: "component", type: SacTooltipComponent, selector: "sac-tooltip" }, { kind: "pipe", type: SacTestingAttributePipe, name: "testingattribute" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacStaticLabelComponent, decorators: [{
             type: Component,
@@ -2148,8 +2573,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             multi: true,
                             useExisting: forwardRef(() => SacStaticLabelComponent),
                         },
-                    ], standalone: true, imports: [NgIf, NgClass], 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: [{
+                    ], standalone: true, imports: [
+                        NgIf,
+                        NgClass,
+                        SacToControlWidthCssPipe,
+                        SacToLabelWidthCssPipe,
+                        SacToLabelHeightPipe,
+                        SacToControlHeightPipe,
+                        SacTooltipComponent,
+                        SacTestingAttributePipe,
+                    ], template: "<div\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\"\n    class=\"row mb-3\"\n    [class.g-0]=\"disablelabel\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}_label\"\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\"\n            ><span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div>\n            <div\n                [id]=\"name\"\n                class=\"form-control-plaintext\"\n                [ngClass]=\"[componentHeight | toControlHeight]\"\n                [innerHTML]=\"value\"></div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: SacFormLayoutDirective, decorators: [{
                     type: Host
                 }, {
                     type: Optional
@@ -2160,25 +2594,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  *
  * @example
  *  <ngStaticFormContainer name='myformcontainer' label="My Custom Form Control" [isrequired]='false'>
- *      <input type="range" class="form-control form-control-sm" />
+ *      <input type="range" class="form-control" />
  *  </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" />
+ *     <input type="range" class="form-control" />
  * </ngStaticFormContainer>
  *
  **/
 class SacStaticFormContainerComponent extends SacStaticFormContainerCommon {
+    // #region Constructors
     /**
-     * Konsturktor
-     * @param parent Parent SacFormular Instanz
-     * @param injector Injector Instanz
+     * Constructor
+     * @param formLayout SacFormLayout to define scoped layout settings
+     * @param injector Injector for injecting services
      */
-    constructor(parent, injector) {
-        super(parent, injector);
+    constructor(formLayout, injector) {
+        super(formLayout, injector);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacStaticFormContainerComponent, deps: [{ token: SacFormDirective, host: true, optional: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacStaticFormContainerComponent, deps: [{ token: SacFormLayoutDirective, host: true, optional: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SacStaticFormContainerComponent, isStandalone: true, selector: "sac-staticformcontainer", providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -2190,7 +2625,7 @@ class SacStaticFormContainerComponent extends SacStaticFormContainerCommon {
                 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", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\"\n    class=\"row mb-3\"\n    [class.g-0]=\"disablelabel\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}_label\"\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div\n            [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            [class.was-validated]=\"isinlineerrorenabled && isinvalid && errormessage\">\n            <ng-content></ng-content>\n            <label\n                for=\"{{ name }}\"\n                class=\"form-label-adaptive form-label-fixed\"\n                [ngClass]=\"{ required: isrequired }\"\n                *ngIf=\"isAdaptiveLabel && !disablelabel\"\n                >{{ label }}</label\n            >\n            <div\n                class=\"invalid-feedback\"\n                *ngIf=\"isinlineerrorenabled && isinvalid && errormessage\">\n                {{ errormessage }}\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToControlHeightPipe, name: "toControlHeight" }, { kind: "pipe", type: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToLabelHeightPipe, name: "toLabelHeight" }, { kind: "component", type: SacTooltipComponent, selector: "sac-tooltip" }, { kind: "pipe", type: SacTestingAttributePipe, name: "testingattribute" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacStaticFormContainerComponent, decorators: [{
             type: Component,
@@ -2208,9 +2643,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     ], standalone: true, imports: [
                         NgIf,
                         NgClass,
-                        AsyncPipe,
-                    ], 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: [{
+                        SacToControlWidthCssPipe,
+                        SacToControlHeightPipe,
+                        SacToLabelWidthCssPipe,
+                        SacToLabelHeightPipe,
+                        SacTooltipComponent,
+                        SacTestingAttributePipe,
+                    ], template: "<div\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\"\n    class=\"row mb-3\"\n    [class.g-0]=\"disablelabel\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}_label\"\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div\n            [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            [class.was-validated]=\"isinlineerrorenabled && isinvalid && errormessage\">\n            <ng-content></ng-content>\n            <label\n                for=\"{{ name }}\"\n                class=\"form-label-adaptive form-label-fixed\"\n                [ngClass]=\"{ required: isrequired }\"\n                *ngIf=\"isAdaptiveLabel && !disablelabel\"\n                >{{ label }}</label\n            >\n            <div\n                class=\"invalid-feedback\"\n                *ngIf=\"isinlineerrorenabled && isinvalid && errormessage\">\n                {{ errormessage }}\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: SacFormLayoutDirective, decorators: [{
                     type: Host
                 }, {
                     type: Optional
@@ -2238,17 +2678,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  */
 class SacTabItemComponent extends SacTabItemCommon {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacTabItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SacTabItemComponent, isStandalone: true, 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", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SacTabItemComponent, isStandalone: true, 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\">\n  <ng-template [ngTemplateOutlet]=\"templateRef\"></ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacTabItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sac-tabitem', standalone: true, imports: [NgIf, NgTemplateOutlet], 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" }]
+            args: [{ selector: 'sac-tabitem', standalone: true, imports: [NgIf, NgTemplateOutlet], template: "<div [id]=\"id\" [hidden]=\"unloadwhenhidden === false && active === false\" *ngIf=\"(unloadwhenhidden === true && active === true) || unloadwhenhidden === false\" class=\"tab-pane\">\n  <ng-template [ngTemplateOutlet]=\"templateRef\"></ng-template>\n</div>\n" }]
         }] });
 
 /**
  * Komponente für Tabs
  */
 class SacTabComponent extends SacTabCommon {
+    // #endregion Properties
+    // #region Public Methods
     /**
      * Gibt die TabItems zurück
      * @returns Array von TabItems
@@ -2257,15 +2699,11 @@ class SacTabComponent extends SacTabCommon {
         return this._tabItems.toArray();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacTabComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SacTabComponent, isStandalone: true, 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", dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SacTabComponent, isStandalone: true, selector: "sac-tab", queries: [{ propertyName: "_tabItems", predicate: SacTabItemComponent }], usesInheritance: true, ngImport: i0, template: "<!-- Nav tabs -->\n<ul\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\"\n    class=\"nav nav-tabs\"\n    role=\"tablist\">\n    <li\n        class=\"nav-item\"\n        *ngFor=\"let item of _tabItems\">\n        <a\n            [id]=\"GetTabItemButtonId(item.id)\"\n            role=\"tab\"\n            class=\"nav-link\"\n            data-toggle=\"tab\"\n            [ngClass]=\"{ active: item.active, disabled: item.disabled }\"\n            (click)=\"selectTab(item)\"\n            [ngStyle]=\"{ cursor: item.disabled ? 'not-allowed' : 'pointer' }\"\n            >{{ item.label }}</a\n        >\n    </li>\n</ul>\n\n<!-- Tab panes -->\n<div class=\"tab-content pl-3 pt-2\">\n    <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: SacTestingAttributePipe, name: "testingattribute" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacTabComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sac-tab', standalone: true, imports: [
-                        NgFor,
-                        NgClass,
-                        NgStyle,
-                    ], 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" }]
+            args: [{ selector: 'sac-tab', standalone: true, imports: [NgFor, NgClass, NgStyle, SacTestingAttributePipe], template: "<!-- Nav tabs -->\n<ul\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\"\n    class=\"nav nav-tabs\"\n    role=\"tablist\">\n    <li\n        class=\"nav-item\"\n        *ngFor=\"let item of _tabItems\">\n        <a\n            [id]=\"GetTabItemButtonId(item.id)\"\n            role=\"tab\"\n            class=\"nav-link\"\n            data-toggle=\"tab\"\n            [ngClass]=\"{ active: item.active, disabled: item.disabled }\"\n            (click)=\"selectTab(item)\"\n            [ngStyle]=\"{ cursor: item.disabled ? 'not-allowed' : 'pointer' }\"\n            >{{ item.label }}</a\n        >\n    </li>\n</ul>\n\n<!-- Tab panes -->\n<div class=\"tab-content pl-3 pt-2\">\n    <ng-content></ng-content>\n</div>\n" }]
         }], propDecorators: { _tabItems: [{
                 type: ContentChildren,
                 args: [SacTabItemComponent]
@@ -2292,23 +2730,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * TinyMCE Komponente
  */
 class SacTinyMceComponent extends SacTinyMceCommon {
+    // #region Constructors
     /**
-     * Konstruktor
-     * @param parent Formular
-     * @param injector Angular Dependency Injection Service
-     * @param ngZone ngZone
+     * Constructor
+     * @param formLayout SacFormLayout to define scoped layout settings
+     * @param injector Injector for injecting services
+     * @param ngZone ngZone to manage external javascripts
      */
-    constructor(parent, injector, ngZone) {
-        super(parent, injector, ngZone);
+    constructor(formLayout, injector, ngZone) {
+        super(formLayout, injector, ngZone);
     }
+    // #endregion Constructors
+    // #region Public Methods
     /**
      * overwrite tinymce defaults
-     * @returns boostrap4 has no overwrites
+     * @returns boostrap5 has no overwrites
      */
     overwriteDefaultSettings() {
         return {};
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacTinyMceComponent, deps: [{ token: SacFormDirective, host: true, optional: true }, { token: i0.Injector }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacTinyMceComponent, deps: [{ token: SacFormLayoutDirective, host: true, optional: true }, { token: i0.Injector }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SacTinyMceComponent, isStandalone: true, selector: "sac-tinymce", providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -2320,7 +2761,7 @@ class SacTinyMceComponent extends SacTinyMceCommon {
                 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"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: EditorComponent, selector: "editor", inputs: ["cloudChannel", "apiKey", "init", "id", "initialValue", "outputFormat", "inline", "tagName", "plugins", "toolbar", "modelEvents", "allowedEvents", "ignoreEvents", "disabled"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SacDialogComponent, selector: "sac-dialog" }, { kind: "component", type: SacButtonComponent, selector: "sac-button" }, { kind: "component", type: SacBrowserComponent, selector: "sac-filebrowser" }, { kind: "pipe", type: AsyncPipe, name: "async" }], viewProviders: [{ provide: ControlContainer, useExisting: SacFormDirective }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\"\n    class=\"row mb-3\"\n    [class.g-0]=\"disablelabel\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n            <editor\n                [id]=\"name + '_tinymce'\"\n                [init]=\"_config\"\n                [initialValue]=\"value\"\n                ngModel\n                [ngModelOptions]=\"{ standalone: true }\"\n                (ngModelChange)=\"setValue($event)\"\n                (onSaveContent)=\"save($event.event.content)\"\n                (onBlur)=\"blur()\"\n                [disabled]=\"disabled\"\n                [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\"></editor>\n            <div\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"invalid-feedback\">\n                {{ GetErrorMessage() | async }}\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n\n    <sac-dialog\n        *ngIf=\"selectdialogvisible\"\n        [allowesc]=\"false\"\n        [backdrop]=\"true\"\n        [(isvisible)]=\"selectdialogvisible\"\n        title=\"{{ lngResourceService.GetString(validationKeyService.TinyMceFileselectDialogtitle) | async }}\"\n        size=\"large\"\n        height=\"500px\">\n        <ng-container dialogbody>\n            <sac-filebrowser\n                [apiurl]=\"filebrowserapiurl\"\n                (file)=\"selectDialogSettings.value = $event\"\n                [allowfoldercreate]=\"allowfoldercreate\"\n                [allowfolderrename]=\"allowfolderrename\"\n                [allowfolderdelete]=\"allowfolderdelete\"\n                [allowfileupload]=\"allowfileupload\"\n                [allowfilerename]=\"allowfilerename\"\n                [allowfiledelete]=\"allowfiledelete\"\n                [selectedfile]=\"selectDialogSettings.value\"\n                [allowedtypes]=\"selectDialogSettings.allowedtypes\"></sac-filebrowser>\n        </ng-container>\n        <ng-container dialogfooter>\n            <sac-button\n                role=\"primary\"\n                [name]=\"name + '_modalOk'\"\n                text=\"{{ lngResourceService.GetString(validationKeyService.TinyMceFileselectOk) | async }}\"\n                (clicked)=\"setSelectDialogResult()\"></sac-button>\n            <sac-button\n                [name]=\"name + '_modalClose'\"\n                text=\"{{ lngResourceService.GetString(validationKeyService.TinyMceFileselectCancel) | async }}\"\n                (clicked)=\"closeSelectDialog()\"></sac-button>\n        </ng-container>\n    </sac-dialog>\n</div>\n", styles: [".is-invalid{border:1px solid var(--bs-form-invalid-border-color)}::ng-deep .tox.tox-tinymce-aux{z-index:900}::ng-deep .tox.tox-tinymce-aux .tox-dialog-wrap{z-index:800}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: EditorComponent, selector: "editor", inputs: ["cloudChannel", "apiKey", "init", "id", "initialValue", "outputFormat", "inline", "tagName", "plugins", "toolbar", "modelEvents", "allowedEvents", "ignoreEvents", "disabled"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SacDialogComponent, selector: "sac-dialog" }, { kind: "component", type: SacButtonComponent, selector: "sac-button" }, { kind: "component", type: SacBrowserComponent, selector: "sac-filebrowser" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToLabelHeightPipe, name: "toLabelHeight" }, { kind: "component", type: SacTooltipComponent, selector: "sac-tooltip" }, { kind: "pipe", type: SacToControlHeightPipe, name: "toControlHeight" }, { kind: "pipe", type: SacTestingAttributePipe, name: "testingattribute" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacTinyMceComponent, decorators: [{
             type: Component,
@@ -2335,7 +2776,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             useExisting: forwardRef(() => SacTinyMceComponent),
                             multi: true,
                         },
-                    ], viewProviders: [{ provide: ControlContainer, useExisting: SacFormDirective }], standalone: true, imports: [
+                    ], standalone: true, imports: [
                         NgClass,
                         EditorComponent,
                         FormsModule,
@@ -2344,8 +2785,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         SacButtonComponent,
                         SacBrowserComponent,
                         AsyncPipe,
-                    ], 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: [{
+                        SacToControlWidthCssPipe,
+                        SacToLabelWidthCssPipe,
+                        SacToLabelHeightPipe,
+                        SacTooltipComponent,
+                        SacToControlHeightPipe,
+                        SacTestingAttributePipe,
+                    ], template: "<div\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\"\n    class=\"row mb-3\"\n    [class.g-0]=\"disablelabel\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n            <editor\n                [id]=\"name + '_tinymce'\"\n                [init]=\"_config\"\n                [initialValue]=\"value\"\n                ngModel\n                [ngModelOptions]=\"{ standalone: true }\"\n                (ngModelChange)=\"setValue($event)\"\n                (onSaveContent)=\"save($event.event.content)\"\n                (onBlur)=\"blur()\"\n                [disabled]=\"disabled\"\n                [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\"></editor>\n            <div\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"invalid-feedback\">\n                {{ GetErrorMessage() | async }}\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n\n    <sac-dialog\n        *ngIf=\"selectdialogvisible\"\n        [allowesc]=\"false\"\n        [backdrop]=\"true\"\n        [(isvisible)]=\"selectdialogvisible\"\n        title=\"{{ lngResourceService.GetString(validationKeyService.TinyMceFileselectDialogtitle) | async }}\"\n        size=\"large\"\n        height=\"500px\">\n        <ng-container dialogbody>\n            <sac-filebrowser\n                [apiurl]=\"filebrowserapiurl\"\n                (file)=\"selectDialogSettings.value = $event\"\n                [allowfoldercreate]=\"allowfoldercreate\"\n                [allowfolderrename]=\"allowfolderrename\"\n                [allowfolderdelete]=\"allowfolderdelete\"\n                [allowfileupload]=\"allowfileupload\"\n                [allowfilerename]=\"allowfilerename\"\n                [allowfiledelete]=\"allowfiledelete\"\n                [selectedfile]=\"selectDialogSettings.value\"\n                [allowedtypes]=\"selectDialogSettings.allowedtypes\"></sac-filebrowser>\n        </ng-container>\n        <ng-container dialogfooter>\n            <sac-button\n                role=\"primary\"\n                [name]=\"name + '_modalOk'\"\n                text=\"{{ lngResourceService.GetString(validationKeyService.TinyMceFileselectOk) | async }}\"\n                (clicked)=\"setSelectDialogResult()\"></sac-button>\n            <sac-button\n                [name]=\"name + '_modalClose'\"\n                text=\"{{ lngResourceService.GetString(validationKeyService.TinyMceFileselectCancel) | async }}\"\n                (clicked)=\"closeSelectDialog()\"></sac-button>\n        </ng-container>\n    </sac-dialog>\n</div>\n", styles: [".is-invalid{border:1px solid var(--bs-form-invalid-border-color)}::ng-deep .tox.tox-tinymce-aux{z-index:900}::ng-deep .tox.tox-tinymce-aux .tox-dialog-wrap{z-index:800}\n"] }]
+        }], ctorParameters: function () { return [{ type: SacFormLayoutDirective, decorators: [{
                     type: Host
                 }, {
                     type: Optional
@@ -2364,28 +2811,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
 
+class SACBootstrap5TooltipModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SACBootstrap5TooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SACBootstrap5TooltipModule, imports: [CommonModule, SacTooltipComponent], exports: [SacTooltipComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SACBootstrap5TooltipModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SACBootstrap5TooltipModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, SacTooltipComponent],
+                    exports: [SacTooltipComponent],
+                }]
+        }] });
+
 /**
  * Dropzone Komponente für den Upload eines Files
  * @see https://github.com/kukhariev/ngx-uploadx/
  */
 class SacDropzoneSingleComponent extends SacDropzoneSingleCommon {
+    // #region Constructors
     /**
-     * Konstruktor
-     * @param parent Formular
-     * @param injector Angular Dependency Injection Service
-     * @param renderer Angular Rendering Engine
-     * @param ngZone ngZone
+     * Constructor
+     * @param formLayout SacFormLayout to define scoped layout settings
+     * @param injector Injector for injecting services
+     * @param renderer Angular rendering engine
+     * @param ngZone ngZone to manage external javascripts
      */
-    constructor(parent, injector, renderer, ngZone) {
-        super(parent, injector, renderer, ngZone);
+    constructor(formLayout, injector, renderer, ngZone) {
+        super(formLayout, injector, renderer, ngZone);
     }
+    // #endregion Constructors
+    // #region Public Methods
     /**
      * Initialisiert das Control
      */
     ngOnInit() {
         super.ngOnInit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacDropzoneSingleComponent, deps: [{ token: SacFormDirective, host: true, optional: true }, { token: i0.Injector }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacDropzoneSingleComponent, deps: [{ token: SacFormLayoutDirective, host: true, optional: true }, { token: i0.Injector }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SacDropzoneSingleComponent, isStandalone: true, selector: "sac-dropzonesingle", providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -2397,7 +2860,7 @@ class SacDropzoneSingleComponent extends SacDropzoneSingleCommon {
                 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"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div\n    id=\"{{ name }}\"\n    class=\"row mb-3\"\n    [class.g-0]=\"disablelabel\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}_label\"\n        for=\"{{ name }}_uploadinput\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n            <div\n                class=\"dropzone d-flex justify-content-center position-relative\"\n                (drop)=\"dropHandler($event)\"\n                (dragover)=\"onDragOver($event)\"\n                (dragleave)=\"onDragLeave($event)\"\n                [style.min-height]=\"uploadheight\"\n                [class.active]=\"active\"\n                [class.is-invalid]=\"invalid && (dirty || touched)\">\n                <div\n                    class=\"content d-flex justify-content-center position-relative\"\n                    *ngIf=\"uploads.length === 0\">\n                    <div class=\"align-self-center text-center\">\n                        <div [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                            <ng-content></ng-content>\n                        </div>\n                    </div>\n                </div>\n                <div\n                    class=\"content d-flex justify-content-center align-items-center w-50 my-3\"\n                    *ngIf=\"uploads.length > 0\">\n                    <div class=\"flex-fill progress-container\">\n                        <div\n                            class=\"dropzone-uploadstates\"\n                            *ngFor=\"let file of uploads\">\n                            <div\n                                class=\"input-group upload-component upload-component-multiple\"\n                                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\n                                <div class=\"form-control upload-progress border-secondary\">\n                                    <div class=\"progress\">\n                                        <div\n                                            class=\"progress-bar\"\n                                            [class.progress-bar-success]=\"file.progress === 100\"\n                                            role=\"progressbar\"\n                                            [attr.aria-valuenow]=\"file.progress\"\n                                            aria-valuemin=\"0\"\n                                            aria-valuemax=\"100\"\n                                            [style.width.%]=\"file.progress\">\n                                            <span class=\"progress-text text-dark\">{{ file.name }}</span>\n                                        </div>\n                                    </div>\n                                </div>\n                                <a\n                                    class=\"btn\"\n                                    (click)=\"cancel(file.uploadId)\"\n                                    [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\n                                    [class.btn-danger]=\"invalid && (dirty || touched)\">\n                                    <span [class]=\"IconDelete\"></span>\n                                </a>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <input\n                    #files\n                    id=\"{{ name }}_uploadinput\"\n                    type=\"file\"\n                    class=\"custom-file-input\"\n                    (click)=\"files.value = ''\"\n                    (uploadxState)=\"onUpload($event)\"\n                    [disabled]=\"HasQueueItem()\" />\n            </div>\n            <div\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"invalid-feedback\">\n                {{ GetErrorMessage() | async }}\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\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"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToLabelHeightPipe, name: "toLabelHeight" }, { kind: "component", type: SacTooltipComponent, selector: "sac-tooltip" }, { kind: "pipe", type: SacToControlHeightPipe, name: "toControlHeight" }, { kind: "pipe", type: SacTestingAttributePipe, name: "testingattribute" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacDropzoneSingleComponent, decorators: [{
             type: Component,
@@ -2412,8 +2875,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             multi: true,
                             useExisting: forwardRef(() => SacDropzoneSingleComponent),
                         },
-                    ], standalone: true, imports: [NgIf, NgClass, NgFor, AsyncPipe], 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: [{
+                    ], standalone: true, imports: [
+                        NgIf,
+                        NgClass,
+                        NgFor,
+                        AsyncPipe,
+                        SacToControlWidthCssPipe,
+                        SacToLabelWidthCssPipe,
+                        SacToLabelHeightPipe,
+                        SacTooltipComponent,
+                        SacToControlHeightPipe,
+                        SacTestingAttributePipe,
+                    ], template: "<div\n    id=\"{{ name }}\"\n    class=\"row mb-3\"\n    [class.g-0]=\"disablelabel\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}_label\"\n        for=\"{{ name }}_uploadinput\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n            <div\n                class=\"dropzone d-flex justify-content-center position-relative\"\n                (drop)=\"dropHandler($event)\"\n                (dragover)=\"onDragOver($event)\"\n                (dragleave)=\"onDragLeave($event)\"\n                [style.min-height]=\"uploadheight\"\n                [class.active]=\"active\"\n                [class.is-invalid]=\"invalid && (dirty || touched)\">\n                <div\n                    class=\"content d-flex justify-content-center position-relative\"\n                    *ngIf=\"uploads.length === 0\">\n                    <div class=\"align-self-center text-center\">\n                        <div [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                            <ng-content></ng-content>\n                        </div>\n                    </div>\n                </div>\n                <div\n                    class=\"content d-flex justify-content-center align-items-center w-50 my-3\"\n                    *ngIf=\"uploads.length > 0\">\n                    <div class=\"flex-fill progress-container\">\n                        <div\n                            class=\"dropzone-uploadstates\"\n                            *ngFor=\"let file of uploads\">\n                            <div\n                                class=\"input-group upload-component upload-component-multiple\"\n                                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\n                                <div class=\"form-control upload-progress border-secondary\">\n                                    <div class=\"progress\">\n                                        <div\n                                            class=\"progress-bar\"\n                                            [class.progress-bar-success]=\"file.progress === 100\"\n                                            role=\"progressbar\"\n                                            [attr.aria-valuenow]=\"file.progress\"\n                                            aria-valuemin=\"0\"\n                                            aria-valuemax=\"100\"\n                                            [style.width.%]=\"file.progress\">\n                                            <span class=\"progress-text text-dark\">{{ file.name }}</span>\n                                        </div>\n                                    </div>\n                                </div>\n                                <a\n                                    class=\"btn\"\n                                    (click)=\"cancel(file.uploadId)\"\n                                    [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\n                                    [class.btn-danger]=\"invalid && (dirty || touched)\">\n                                    <span [class]=\"IconDelete\"></span>\n                                </a>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <input\n                    #files\n                    id=\"{{ name }}_uploadinput\"\n                    type=\"file\"\n                    class=\"custom-file-input\"\n                    (click)=\"files.value = ''\"\n                    (uploadxState)=\"onUpload($event)\"\n                    [disabled]=\"HasQueueItem()\" />\n            </div>\n            <div\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"invalid-feedback\">\n                {{ GetErrorMessage() | async }}\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\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: SacFormLayoutDirective, decorators: [{
                     type: Host
                 }, {
                     type: Optional
@@ -2424,17 +2898,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * @see https://github.com/kukhariev/ngx-uploadx/
  */
 class SacUploadComponent extends SacUploadSingleCommon {
+    // #region Constructors
     /**
-     * Konstruktor
-     * @param parent Formular
-     * @param injector Angular Dependency Injection Service
-     * @param renderer Angular Rendering Engine
-     * @param ngZone ngZone Referenz
+     * Constructor
+     * @param formLayout SacFormLayout to define scoped layout settings
+     * @param injector Injector for injecting services
+     * @param renderer Angular rendering engine
+     * @param ngZone ngZone to manage external javascripts
      */
-    constructor(parent, injector, renderer, ngZone) {
-        super(parent, injector, renderer, ngZone);
+    constructor(formLayout, injector, renderer, ngZone) {
+        super(formLayout, injector, renderer, ngZone);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacUploadComponent, deps: [{ token: SacFormDirective, host: true, optional: true }, { token: i0.Injector }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacUploadComponent, deps: [{ token: SacFormLayoutDirective, host: true, optional: true }, { token: i0.Injector }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SacUploadComponent, isStandalone: true, selector: "sac-upload", providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -2446,7 +2921,7 @@ class SacUploadComponent extends SacUploadSingleCommon {
                 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"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div\n    id=\"{{ name }}\"\n    class=\"row mb-3\"\n    [class.g-0]=\"disablelabel\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}_label\"\n        for=\"{{ name }}_uploadinput\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n            <div\n                class=\"input-group upload-component upload-single\"\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\n                [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                <!-- image-preview-input -->\n                <div\n                    class=\"btn upload-input custom-file\"\n                    [class.disabled]=\"HasQueueItem()\"\n                    [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\n                    [class.btn-danger]=\"invalid && (dirty || touched)\">\n                    <i\n                        class=\"pe-2\"\n                        [ngClass]=\"IconBrowse\"></i>\n                    <span class=\"upload-browse\">{{ buttonbrowse ? buttonbrowse : (lngResourceService.GetString(validationKeyService.UploadButtonBrowse) | async) }}</span>\n                    <input\n                        type=\"file\"\n                        id=\"{{ name }}_uploadinput\"\n                        class=\"custom-file-input\"\n                        #files\n                        (click)=\"files.value = ''\"\n                        (uploadxState)=\"onUpload($event)\"\n                        multiple\n                        [disabled]=\"HasQueueItem()\" />\n                </div>\n                <div\n                    class=\"form-control upload-progress\"\n                    [ngClass]=\"[componentHeight | toControlHeight]\"\n                    [class.is-invalid]=\"invalid && (dirty || touched)\">\n                    <div class=\"progress\">\n                        <div\n                            class=\"progress-bar\"\n                            [class.progress-bar-success]=\"Progress() === 100\"\n                            role=\"progressbar\"\n                            [attr.aria-valuenow]=\"Progress()\"\n                            aria-valuemin=\"0\"\n                            aria-valuemax=\"100\"\n                            [style.width.%]=\"Progress()\">\n                            <span class=\"progress-text text-dark\">{{ Filename() | async }}</span>\n                        </div>\n                    </div>\n                </div>\n\n                <button\n                    class=\"btn\"\n                    (click)=\"cancelAll()\"\n                    [attr.disabled]=\"HasQueueItem() === false ? 'disabled' : null\"\n                    [class.disabled]=\"HasQueueItem() === false ? 'disabled' : null\"\n                    [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\n                    [class.btn-danger]=\"invalid && (dirty || touched)\">\n                    <span [class]=\"IconDelete\"></span>\n                </button>\n                <button\n                    *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && IsPaused() === false)\"\n                    class=\"btn\"\n                    (click)=\"pauseAll()\"\n                    [attr.disabled]=\"IsUploading() === false ? 'disabled' : null\"\n                    [class.disabled]=\"IsUploading() === false ? 'disabled' : null\"\n                    [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\n                    [class.btn-danger]=\"invalid && (dirty || touched)\">\n                    <span [class]=\"IconPause\"></span>\n                </button>\n                <button\n                    *ngIf=\"autoupload && enablepause && IsPaused()\"\n                    class=\"btn\"\n                    (click)=\"uploadAll()\"\n                    [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\n                    [class.btn-danger]=\"invalid && (dirty || touched)\">\n                    <span [class]=\"IconContinue\"></span>\n                </button>\n                <button\n                    *ngIf=\"autoupload === false\"\n                    class=\"btn text-nowrap\"\n                    (click)=\"uploadAll()\"\n                    [attr.disabled]=\"IsStateToUpload() === false ? 'disabled' : null\"\n                    [class.disabled]=\"IsStateToUpload() === false ? 'disabled' : null\"\n                    [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\n                    [class.btn-danger]=\"invalid && (dirty || touched)\">\n                    <span\n                        [ngClass]=\"IconUpload\"\n                        class=\"pe-2\"></span\n                    >{{ buttonupload ? buttonupload : (lngResourceService.GetString(validationKeyService.UploadButtonUpload) | async) }}\n                </button>\n            </div>\n            <div\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"invalid-feedback\">\n                {{ GetErrorMessage() | async }}\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n", styles: [".upload-component .custom-file{height:100%}.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:100%}.upload-component .upload-progress .progress .progress-text{position:absolute;left:0;right:0}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToLabelHeightPipe, name: "toLabelHeight" }, { kind: "pipe", type: SacToControlHeightPipe, name: "toControlHeight" }, { kind: "component", type: SacTooltipComponent, selector: "sac-tooltip" }, { kind: "pipe", type: SacTestingAttributePipe, name: "testingattribute" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacUploadComponent, decorators: [{
             type: Component,
@@ -2461,8 +2936,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             multi: true,
                             useExisting: forwardRef(() => SacUploadComponent),
                         },
-                    ], standalone: true, imports: [NgIf, NgClass, AsyncPipe], 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: [{
+                    ], standalone: true, imports: [
+                        NgIf,
+                        NgClass,
+                        AsyncPipe,
+                        SacToControlWidthCssPipe,
+                        SacToLabelWidthCssPipe,
+                        SacToLabelHeightPipe,
+                        SacToControlHeightPipe,
+                        SacTooltipComponent,
+                        SacTestingAttributePipe,
+                    ], template: "<div\n    id=\"{{ name }}\"\n    class=\"row mb-3\"\n    [class.g-0]=\"disablelabel\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}_label\"\n        for=\"{{ name }}_uploadinput\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n            <div\n                class=\"input-group upload-component upload-single\"\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\n                [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                <!-- image-preview-input -->\n                <div\n                    class=\"btn upload-input custom-file\"\n                    [class.disabled]=\"HasQueueItem()\"\n                    [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\n                    [class.btn-danger]=\"invalid && (dirty || touched)\">\n                    <i\n                        class=\"pe-2\"\n                        [ngClass]=\"IconBrowse\"></i>\n                    <span class=\"upload-browse\">{{ buttonbrowse ? buttonbrowse : (lngResourceService.GetString(validationKeyService.UploadButtonBrowse) | async) }}</span>\n                    <input\n                        type=\"file\"\n                        id=\"{{ name }}_uploadinput\"\n                        class=\"custom-file-input\"\n                        #files\n                        (click)=\"files.value = ''\"\n                        (uploadxState)=\"onUpload($event)\"\n                        multiple\n                        [disabled]=\"HasQueueItem()\" />\n                </div>\n                <div\n                    class=\"form-control upload-progress\"\n                    [ngClass]=\"[componentHeight | toControlHeight]\"\n                    [class.is-invalid]=\"invalid && (dirty || touched)\">\n                    <div class=\"progress\">\n                        <div\n                            class=\"progress-bar\"\n                            [class.progress-bar-success]=\"Progress() === 100\"\n                            role=\"progressbar\"\n                            [attr.aria-valuenow]=\"Progress()\"\n                            aria-valuemin=\"0\"\n                            aria-valuemax=\"100\"\n                            [style.width.%]=\"Progress()\">\n                            <span class=\"progress-text text-dark\">{{ Filename() | async }}</span>\n                        </div>\n                    </div>\n                </div>\n\n                <button\n                    class=\"btn\"\n                    (click)=\"cancelAll()\"\n                    [attr.disabled]=\"HasQueueItem() === false ? 'disabled' : null\"\n                    [class.disabled]=\"HasQueueItem() === false ? 'disabled' : null\"\n                    [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\n                    [class.btn-danger]=\"invalid && (dirty || touched)\">\n                    <span [class]=\"IconDelete\"></span>\n                </button>\n                <button\n                    *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && IsPaused() === false)\"\n                    class=\"btn\"\n                    (click)=\"pauseAll()\"\n                    [attr.disabled]=\"IsUploading() === false ? 'disabled' : null\"\n                    [class.disabled]=\"IsUploading() === false ? 'disabled' : null\"\n                    [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\n                    [class.btn-danger]=\"invalid && (dirty || touched)\">\n                    <span [class]=\"IconPause\"></span>\n                </button>\n                <button\n                    *ngIf=\"autoupload && enablepause && IsPaused()\"\n                    class=\"btn\"\n                    (click)=\"uploadAll()\"\n                    [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\n                    [class.btn-danger]=\"invalid && (dirty || touched)\">\n                    <span [class]=\"IconContinue\"></span>\n                </button>\n                <button\n                    *ngIf=\"autoupload === false\"\n                    class=\"btn text-nowrap\"\n                    (click)=\"uploadAll()\"\n                    [attr.disabled]=\"IsStateToUpload() === false ? 'disabled' : null\"\n                    [class.disabled]=\"IsStateToUpload() === false ? 'disabled' : null\"\n                    [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\n                    [class.btn-danger]=\"invalid && (dirty || touched)\">\n                    <span\n                        [ngClass]=\"IconUpload\"\n                        class=\"pe-2\"></span\n                    >{{ buttonupload ? buttonupload : (lngResourceService.GetString(validationKeyService.UploadButtonUpload) | async) }}\n                </button>\n            </div>\n            <div\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"invalid-feedback\">\n                {{ GetErrorMessage() | async }}\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n", styles: [".upload-component .custom-file{height:100%}.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:100%}.upload-component .upload-progress .progress .progress-text{position:absolute;left:0;right:0}\n"] }]
+        }], ctorParameters: function () { return [{ type: SacFormLayoutDirective, decorators: [{
                     type: Host
                 }, {
                     type: Optional
@@ -2473,17 +2958,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * @see https://github.com/kukhariev/ngx-uploadx/
  */
 class SacUploadMultipleComponent extends SacUploadMultipleCommon {
+    // #region Constructors
     /**
-     * Konstruktor
-     * @param parent Formular
-     * @param injector Angular Dependency Injection Service
-     * @param renderer Angular Rendering Engine
-     * @param ngZone ngZone
+     * Constructor
+     * @param formLayout SacFormLayout to define scoped layout settings
+     * @param injector Injector for injecting services
+     * @param renderer Angular rendering engine
+     * @param ngZone ngZone to manage external javascripts
      */
-    constructor(parent, injector, renderer, ngZone) {
-        super(parent, injector, renderer, ngZone);
+    constructor(formLayout, injector, renderer, ngZone) {
+        super(formLayout, injector, renderer, ngZone);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacUploadMultipleComponent, deps: [{ token: SacFormDirective, host: true, optional: true }, { token: i0.Injector }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacUploadMultipleComponent, deps: [{ token: SacFormLayoutDirective, host: true, optional: true }, { token: i0.Injector }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SacUploadMultipleComponent, isStandalone: true, selector: "sac-uploadmultiple", providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -2495,7 +2981,7 @@ class SacUploadMultipleComponent extends SacUploadMultipleCommon {
                 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"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div\n    id=\"{{ name }}\"\n    class=\"row mb-3\"\n    [class.g-0]=\"disablelabel\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}_label\"\n        for=\"{{ name }}_uploadinput\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\n        <div class=\"upload-component\">\n            <div class=\"row\">\n                <div class=\"col-12\">\n                    <div\n                        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n                        [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                        <div\n                            class=\"btn-group\"\n                            [class.btn-group-sm]=\"componentHeight === ControlHeight.Small\"\n                            [class.btn-group-lg]=\"componentHeight === ControlHeight.Large\"\n                            [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                            <div\n                                class=\"btn upload-input custom-file\"\n                                [class.disabled]=\"maxfiles > 0 && uploads.length >= maxfiles\"\n                                [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\n                                [class.btn-danger]=\"invalid && (dirty || touched)\">\n                                <i\n                                    [ngClass]=\"IconBrowse\"\n                                    class=\"pe-2\"></i>\n                                <span class=\"upload-browse\">{{\n                                    buttonbrowse ? buttonbrowse : (lngResourceService.GetString(validationKeyService.UploadButtonBrowse) | async)\n                                }}</span>\n                                <input\n                                    id=\"{{ name }}_uploadinput\"\n                                    type=\"file\"\n                                    class=\"custom-file-input\"\n                                    #files\n                                    (click)=\"files.value = ''\"\n                                    (uploadxState)=\"onUpload($event)\"\n                                    multiple\n                                    [disabled]=\"maxfiles > 0 && uploads.length >= maxfiles\" />\n                            </div>\n\n                            <div\n                                class=\"btn-group\"\n                                [class.btn-group-sm]=\"componentHeight === ControlHeight.Small\"\n                                [class.btn-group-lg]=\"componentHeight === ControlHeight.Large\">\n                                <!-- image-preview-clear button -->\n                                <button\n                                    class=\"btn\"\n                                    (click)=\"cancelAll()\"\n                                    [attr.disabled]=\"HasQueueItem() === false ? 'disabled' : null\"\n                                    [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\n                                    [class.btn-danger]=\"invalid && (dirty || touched)\">\n                                    <span [class]=\"IconDelete\"></span>\n                                </button>\n                                <button\n                                    *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && IsPaused() === false)\"\n                                    class=\"btn\"\n                                    (click)=\"pauseAll()\"\n                                    [attr.disabled]=\"IsUploading() === false ? 'disabled' : null\"\n                                    [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\n                                    [class.btn-danger]=\"invalid && (dirty || touched)\">\n                                    <span [class]=\"IconPause\"></span>\n                                </button>\n                                <button\n                                    *ngIf=\"autoupload && enablepause && IsPaused() === true\"\n                                    class=\"btn\"\n                                    (click)=\"uploadAll()\"\n                                    [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\n                                    [class.btn-danger]=\"invalid && (dirty || touched)\">\n                                    <span [class]=\"IconContinue\"></span>\n                                </button>\n                                <button\n                                    *ngIf=\"autoupload === false\"\n                                    class=\"btn text-nowrap\"\n                                    (click)=\"uploadAll()\"\n                                    [attr.disabled]=\"IsStateToUpload() === false ? 'disabled' : null\"\n                                    [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\n                                    [class.btn-danger]=\"invalid && (dirty || touched)\">\n                                    <span\n                                        [ngClass]=\"IconUpload\"\n                                        class=\"pe-2\"></span\n                                    >{{ buttonupload ? buttonupload : (lngResourceService.GetString(validationKeyService.UploadButtonUpload) | async) }}\n                                </button>\n                            </div>\n                        </div>\n                        <div\n                            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n                            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n                            [ngClass]=\"[componentHeight | toControlHeight]\">\n                            <sac-tooltip\n                                [tooltiptext]=\"helptext\"\n                                [inlinemode]=\"true\">\n                                <span\n                                    [ngClass]=\"HelptextTooltipIcon\"\n                                    class=\"ml-1\">\n                                </span>\n                            </sac-tooltip>\n                        </div>\n                    </div>\n                    <div\n                        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                        class=\"invalid-feedback\">\n                        {{ GetErrorMessage() | async }}\n                    </div>\n                    <div\n                        *ngIf=\"helptextmode === 'text' && helptext\"\n                        class=\"form-text\">\n                        {{ helptext }}\n                    </div>\n                </div>\n\n                <div\n                    *ngFor=\"let file of uploads\"\n                    style=\"margin-top: 5px\">\n                    <div\n                        class=\"input-group upload-component upload-multiple\"\n                        [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                        [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\n                        <div\n                            class=\"form-control upload-progress\"\n                            [class.is-invalid]=\"invalid && (dirty || touched)\">\n                            <div class=\"progress\">\n                                <div\n                                    class=\"progress-bar\"\n                                    [class.progress-bar-success]=\"file.progress === 100\"\n                                    role=\"progressbar\"\n                                    [attr.aria-valuenow]=\"file.progress\"\n                                    aria-valuemin=\"0\"\n                                    aria-valuemax=\"100\"\n                                    [style.width.%]=\"file.progress\">\n                                    <span class=\"progress-text text-dark\">{{ file.name }}</span>\n                                </div>\n                            </div>\n                        </div>\n\n                        <button\n                            class=\"btn\"\n                            (click)=\"cancel(file.uploadId)\"\n                            [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\n                            [class.btn-danger]=\"invalid && (dirty || touched)\">\n                            <span [class]=\"IconDelete\"></span>\n                        </button>\n                        <button\n                            *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && file.status !== 'paused')\"\n                            class=\"btn\"\n                            (click)=\"pause(file.uploadId)\"\n                            [attr.disabled]=\"file.status !== 'uploading' ? 'disabled' : null\"\n                            [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\n                            [class.btn-danger]=\"invalid && (dirty || touched)\">\n                            <span [class]=\"IconPause\"></span>\n                        </button>\n                        <button\n                            *ngIf=\"autoupload && enablepause && file.status === 'paused'\"\n                            class=\"btn\"\n                            (click)=\"upload(file.uploadId)\"\n                            [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\n                            [class.btn-danger]=\"invalid && (dirty || touched)\">\n                            <span [class]=\"IconContinue\"></span>\n                        </button>\n                        <button\n                            *ngIf=\"autoupload === false\"\n                            class=\"btn text-nowrap\"\n                            (click)=\"upload(file.uploadId)\"\n                            [attr.disabled]=\"file.status !== 'added' && file.status !== 'paused' ? 'disabled' : null\"\n                            [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\n                            [class.btn-danger]=\"invalid && (dirty || touched)\">\n                            <span\n                                [ngClass]=\"IconUpload\"\n                                class=\"pe-2\"></span\n                            >{{ buttonupload ? buttonupload : (lngResourceService.GetString(validationKeyService.UploadButtonUpload) | async) }}\n                        </button>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n", styles: [".upload-component .custom-file{height:100%}.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:100%}.upload-component .upload-progress .progress .progress-text{position:absolute;left:0;right:0}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToLabelHeightPipe, name: "toLabelHeight" }, { kind: "component", type: SacTooltipComponent, selector: "sac-tooltip" }, { kind: "pipe", type: SacToControlHeightPipe, name: "toControlHeight" }, { kind: "pipe", type: SacTestingAttributePipe, name: "testingattribute" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacUploadMultipleComponent, decorators: [{
             type: Component,
@@ -2510,8 +2996,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             multi: true,
                             useExisting: forwardRef(() => SacUploadMultipleComponent),
                         },
-                    ], standalone: true, imports: [NgIf, NgClass, NgFor, AsyncPipe], 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: [{
+                    ], standalone: true, imports: [
+                        NgIf,
+                        NgClass,
+                        NgFor,
+                        AsyncPipe,
+                        SacToControlWidthCssPipe,
+                        SacToLabelWidthCssPipe,
+                        SacToLabelHeightPipe,
+                        SacTooltipComponent,
+                        SacToControlHeightPipe,
+                        SacTestingAttributePipe,
+                    ], template: "<div\n    id=\"{{ name }}\"\n    class=\"row mb-3\"\n    [class.g-0]=\"disablelabel\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}_label\"\n        for=\"{{ name }}_uploadinput\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\n        <div class=\"upload-component\">\n            <div class=\"row\">\n                <div class=\"col-12\">\n                    <div\n                        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n                        [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                        <div\n                            class=\"btn-group\"\n                            [class.btn-group-sm]=\"componentHeight === ControlHeight.Small\"\n                            [class.btn-group-lg]=\"componentHeight === ControlHeight.Large\"\n                            [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                            <div\n                                class=\"btn upload-input custom-file\"\n                                [class.disabled]=\"maxfiles > 0 && uploads.length >= maxfiles\"\n                                [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\n                                [class.btn-danger]=\"invalid && (dirty || touched)\">\n                                <i\n                                    [ngClass]=\"IconBrowse\"\n                                    class=\"pe-2\"></i>\n                                <span class=\"upload-browse\">{{\n                                    buttonbrowse ? buttonbrowse : (lngResourceService.GetString(validationKeyService.UploadButtonBrowse) | async)\n                                }}</span>\n                                <input\n                                    id=\"{{ name }}_uploadinput\"\n                                    type=\"file\"\n                                    class=\"custom-file-input\"\n                                    #files\n                                    (click)=\"files.value = ''\"\n                                    (uploadxState)=\"onUpload($event)\"\n                                    multiple\n                                    [disabled]=\"maxfiles > 0 && uploads.length >= maxfiles\" />\n                            </div>\n\n                            <div\n                                class=\"btn-group\"\n                                [class.btn-group-sm]=\"componentHeight === ControlHeight.Small\"\n                                [class.btn-group-lg]=\"componentHeight === ControlHeight.Large\">\n                                <!-- image-preview-clear button -->\n                                <button\n                                    class=\"btn\"\n                                    (click)=\"cancelAll()\"\n                                    [attr.disabled]=\"HasQueueItem() === false ? 'disabled' : null\"\n                                    [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\n                                    [class.btn-danger]=\"invalid && (dirty || touched)\">\n                                    <span [class]=\"IconDelete\"></span>\n                                </button>\n                                <button\n                                    *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && IsPaused() === false)\"\n                                    class=\"btn\"\n                                    (click)=\"pauseAll()\"\n                                    [attr.disabled]=\"IsUploading() === false ? 'disabled' : null\"\n                                    [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\n                                    [class.btn-danger]=\"invalid && (dirty || touched)\">\n                                    <span [class]=\"IconPause\"></span>\n                                </button>\n                                <button\n                                    *ngIf=\"autoupload && enablepause && IsPaused() === true\"\n                                    class=\"btn\"\n                                    (click)=\"uploadAll()\"\n                                    [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\n                                    [class.btn-danger]=\"invalid && (dirty || touched)\">\n                                    <span [class]=\"IconContinue\"></span>\n                                </button>\n                                <button\n                                    *ngIf=\"autoupload === false\"\n                                    class=\"btn text-nowrap\"\n                                    (click)=\"uploadAll()\"\n                                    [attr.disabled]=\"IsStateToUpload() === false ? 'disabled' : null\"\n                                    [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\n                                    [class.btn-danger]=\"invalid && (dirty || touched)\">\n                                    <span\n                                        [ngClass]=\"IconUpload\"\n                                        class=\"pe-2\"></span\n                                    >{{ buttonupload ? buttonupload : (lngResourceService.GetString(validationKeyService.UploadButtonUpload) | async) }}\n                                </button>\n                            </div>\n                        </div>\n                        <div\n                            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n                            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n                            [ngClass]=\"[componentHeight | toControlHeight]\">\n                            <sac-tooltip\n                                [tooltiptext]=\"helptext\"\n                                [inlinemode]=\"true\">\n                                <span\n                                    [ngClass]=\"HelptextTooltipIcon\"\n                                    class=\"ml-1\">\n                                </span>\n                            </sac-tooltip>\n                        </div>\n                    </div>\n                    <div\n                        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                        class=\"invalid-feedback\">\n                        {{ GetErrorMessage() | async }}\n                    </div>\n                    <div\n                        *ngIf=\"helptextmode === 'text' && helptext\"\n                        class=\"form-text\">\n                        {{ helptext }}\n                    </div>\n                </div>\n\n                <div\n                    *ngFor=\"let file of uploads\"\n                    style=\"margin-top: 5px\">\n                    <div\n                        class=\"input-group upload-component upload-multiple\"\n                        [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                        [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\n                        <div\n                            class=\"form-control upload-progress\"\n                            [class.is-invalid]=\"invalid && (dirty || touched)\">\n                            <div class=\"progress\">\n                                <div\n                                    class=\"progress-bar\"\n                                    [class.progress-bar-success]=\"file.progress === 100\"\n                                    role=\"progressbar\"\n                                    [attr.aria-valuenow]=\"file.progress\"\n                                    aria-valuemin=\"0\"\n                                    aria-valuemax=\"100\"\n                                    [style.width.%]=\"file.progress\">\n                                    <span class=\"progress-text text-dark\">{{ file.name }}</span>\n                                </div>\n                            </div>\n                        </div>\n\n                        <button\n                            class=\"btn\"\n                            (click)=\"cancel(file.uploadId)\"\n                            [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\n                            [class.btn-danger]=\"invalid && (dirty || touched)\">\n                            <span [class]=\"IconDelete\"></span>\n                        </button>\n                        <button\n                            *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && file.status !== 'paused')\"\n                            class=\"btn\"\n                            (click)=\"pause(file.uploadId)\"\n                            [attr.disabled]=\"file.status !== 'uploading' ? 'disabled' : null\"\n                            [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\n                            [class.btn-danger]=\"invalid && (dirty || touched)\">\n                            <span [class]=\"IconPause\"></span>\n                        </button>\n                        <button\n                            *ngIf=\"autoupload && enablepause && file.status === 'paused'\"\n                            class=\"btn\"\n                            (click)=\"upload(file.uploadId)\"\n                            [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\n                            [class.btn-danger]=\"invalid && (dirty || touched)\">\n                            <span [class]=\"IconContinue\"></span>\n                        </button>\n                        <button\n                            *ngIf=\"autoupload === false\"\n                            class=\"btn text-nowrap\"\n                            (click)=\"upload(file.uploadId)\"\n                            [attr.disabled]=\"file.status !== 'added' && file.status !== 'paused' ? 'disabled' : null\"\n                            [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\n                            [class.btn-danger]=\"invalid && (dirty || touched)\">\n                            <span\n                                [ngClass]=\"IconUpload\"\n                                class=\"pe-2\"></span\n                            >{{ buttonupload ? buttonupload : (lngResourceService.GetString(validationKeyService.UploadButtonUpload) | async) }}\n                        </button>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n", styles: [".upload-component .custom-file{height:100%}.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:100%}.upload-component .upload-progress .progress .progress-text{position:absolute;left:0;right:0}\n"] }]
+        }], ctorParameters: function () { return [{ type: SacFormLayoutDirective, decorators: [{
                     type: Host
                 }, {
                     type: Optional
@@ -2544,17 +3041,90 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
 
+/**
+ * Treeview Compomnent
+ */
+class SacTreeviewComponent extends SacTreeviewCommon {
+    // #region Constructors
+    /**
+     * Constructor
+     * @param formLayout SacFormLayout to define scoped layout settings
+     * @param injector Component Injector
+     */
+    constructor(formLayout, injector) {
+        super(formLayout, injector);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacTreeviewComponent, deps: [{ token: SacFormLayoutDirective, host: true, optional: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SacTreeviewComponent, isStandalone: true, selector: "sac-treeview", providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                multi: true,
+                useExisting: SacTreeviewComponent,
+            },
+            {
+                provide: NG_VALIDATORS,
+                useExisting: forwardRef(() => SacTreeviewComponent),
+                multi: true,
+            },
+        ], usesInheritance: true, ngImport: i0, template: "<div\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\"\n    class=\"row mb-3\"\n    [class.g-0]=\"disablelabel\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\n        <div [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n            <div\n                class=\"w-100\"\n                [style.min-width]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 0 : null\"\n                [class.me-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n                <ul\n                    class=\"list-group list-group-flush\"\n                    id=\"{{ name }}\"\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\n                    [class.border]=\"invalid && (dirty || touched)\"\n                    [class.border-danger]=\"invalid && (dirty || touched)\">\n                    <ng-container *ngFor=\"let node of data\">\n                        <ng-template\n                            [ngTemplateOutlet]=\"treeItem\"\n                            [ngTemplateOutletContext]=\"{ node: node, deep: 0, path: '', textpath: '' }\">\n                        </ng-template>\n                    </ng-container>\n                </ul>\n\n                <div\n                    *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                    class=\"invalid-feedback\">\n                    {{ GetErrorMessage() | async }}\n                </div>\n\n                <div\n                    *ngIf=\"helptextmode === 'text' && helptext\"\n                    class=\"form-text\">\n                    {{ helptext }}\n                </div>\n            </div>\n\n            <div\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n                class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n                [ngClass]=\"[componentHeight | toControlHeight]\">\n                <sac-tooltip\n                    [tooltiptext]=\"helptext\"\n                    [inlinemode]=\"true\">\n                    <span\n                        [ngClass]=\"HelptextTooltipIcon\"\n                        class=\"ml-1\">\n                    </span>\n                </sac-tooltip>\n            </div>\n        </div>\n    </div>\n</div>\n<ng-template\n    #treeItem\n    let-node=\"node\"\n    let-deep=\"deep\"\n    let-path=\"path\"\n    let-textpath=\"textpath\">\n    <li\n        class=\"list-group-item list-group-item-action py-1 px-2 d-flex align-items-center\"\n        [class.active]=\"isSelectedState(node)\"\n        (mouseenter)=\"setHoverState(node, true)\"\n        (mouseleave)=\"setHoverState(node, false)\"\n        style=\"cursor: pointer\"\n        attr.data-path=\"{{ path }}/{{ getStringField(node, attrid) }}\"\n        attr.data-textpath=\"{{ textpath }}/{{ getStringField(node, attrlabel) }}\">\n        <div\n            class=\"mx-3\"\n            *ngFor=\"let i of count(deep)\">\n        </div>\n\n        <div\n            (click)=\"onNodeClicked(node)\"\n            *ngIf=\"expandedstate === 'true' || expandedstate === true\"\n            class=\"me-2\"\n            [ngClass]=\"!hasChildren(node) ? iconFolderEmpty : !isExpandedState(node) ? iconFolderCollabsed : isExpandedState(node) ? iconFolderOpen : ''\">\n        </div>\n\n        <div\n            (click)=\"onNodeClicked(node)\"\n            *ngIf=\"attricon && getStringField(node, attricon)\">\n            <ng-template\n                [ngTemplateOutlet]=\"templateicon || defaultTemplateIcon\"\n                [ngTemplateOutletContext]=\"{ node: node }\">\n            </ng-template>\n        </div>\n\n        <div\n            (click)=\"onNodeClicked(node)\"\n            class=\"flex-grow-1 py-1\"\n            [style.max-width.percent]=\"enableellipsis ? '100' : null\"\n            [style.overflow]=\"enableellipsis ? 'hidden' : null\"\n            [style.text-overflow]=\"enableellipsis ? 'ellipsis' : null\"\n            [style.white-space]=\"enableellipsis ? 'nowrap' : null\">\n            <ng-template\n                [ngTemplateOutlet]=\"templatelabel || defaultTemplateLabel\"\n                [ngTemplateOutletContext]=\"{ node: node, label: getStringField(node, attrlabel) }\">\n            </ng-template>\n        </div>\n\n        <div\n            (click)=\"setSelectedState(node)\"\n            class=\"flex-shrink-0\"\n            *ngIf=\"!isDisabledState(node) && (showactionalways || isSelectedState(node) || isHoverState(node))\">\n            <ng-template\n                [ngTemplateOutlet]=\"templateaction || defaultTemplateAction\"\n                [ngTemplateOutletContext]=\"{ node: node, actionhandler: onActionClicked.bind(this) }\">\n            </ng-template>\n        </div>\n    </li>\n\n    <ng-container *ngIf=\"isExpandedState(node)\">\n        <ng-template\n            *ngFor=\"let child of getChildren(node)\"\n            [ngTemplateOutlet]=\"treeItem\"\n            [ngTemplateOutletContext]=\"{\n                node: child,\n                deep: deep + 1,\n                path: path + '/' + getStringField(node, attrid),\n                textpath: textpath + '/' + getStringField(node, attrlabel)\n            }\">\n        </ng-template>\n    </ng-container>\n</ng-template>\n<ng-template\n    #defaultTemplateLabel\n    let-label=\"label\"\n    let-node=\"node\">\n    <span [title]=\"label\">{{ label }}</span>\n</ng-template>\n\n<ng-template\n    #defaultTemplateIcon\n    let-node=\"node\">\n    <div\n        class=\"me-2\"\n        [ngClass]=\"getStringField(node, attricon)\">\n    </div>\n</ng-template>\n\n<ng-template\n    #defaultTemplateAction\n    let-node=\"node\"\n    let-actionhandler=\"actionhandler\">\n    <a\n        class=\"btn btn-sm btn-link text-secondary\"\n        (click)=\"actionhandler({ action: 'default', node: node })\">\n        <i [class]=\"iconAction\"></i>\n    </a>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToLabelHeightPipe, name: "toLabelHeight" }, { kind: "component", type: SacTooltipComponent, selector: "sac-tooltip" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: SacToControlHeightPipe, name: "toControlHeight" }, { kind: "pipe", type: SacTestingAttributePipe, name: "testingattribute" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacTreeviewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sac-treeview', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            multi: true,
+                            useExisting: SacTreeviewComponent,
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: forwardRef(() => SacTreeviewComponent),
+                            multi: true,
+                        },
+                    ], standalone: true, imports: [
+                        NgIf,
+                        NgFor,
+                        NgTemplateOutlet,
+                        NgClass,
+                        SacToLabelWidthCssPipe,
+                        SacToLabelHeightPipe,
+                        SacTooltipComponent,
+                        SacToControlWidthCssPipe,
+                        AsyncPipe,
+                        SacToControlHeightPipe,
+                        SacTestingAttributePipe,
+                    ], template: "<div\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\"\n    class=\"row mb-3\"\n    [class.g-0]=\"disablelabel\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\n        <div [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n            <div\n                class=\"w-100\"\n                [style.min-width]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 0 : null\"\n                [class.me-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n                <ul\n                    class=\"list-group list-group-flush\"\n                    id=\"{{ name }}\"\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\n                    [class.border]=\"invalid && (dirty || touched)\"\n                    [class.border-danger]=\"invalid && (dirty || touched)\">\n                    <ng-container *ngFor=\"let node of data\">\n                        <ng-template\n                            [ngTemplateOutlet]=\"treeItem\"\n                            [ngTemplateOutletContext]=\"{ node: node, deep: 0, path: '', textpath: '' }\">\n                        </ng-template>\n                    </ng-container>\n                </ul>\n\n                <div\n                    *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                    class=\"invalid-feedback\">\n                    {{ GetErrorMessage() | async }}\n                </div>\n\n                <div\n                    *ngIf=\"helptextmode === 'text' && helptext\"\n                    class=\"form-text\">\n                    {{ helptext }}\n                </div>\n            </div>\n\n            <div\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n                class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n                [ngClass]=\"[componentHeight | toControlHeight]\">\n                <sac-tooltip\n                    [tooltiptext]=\"helptext\"\n                    [inlinemode]=\"true\">\n                    <span\n                        [ngClass]=\"HelptextTooltipIcon\"\n                        class=\"ml-1\">\n                    </span>\n                </sac-tooltip>\n            </div>\n        </div>\n    </div>\n</div>\n<ng-template\n    #treeItem\n    let-node=\"node\"\n    let-deep=\"deep\"\n    let-path=\"path\"\n    let-textpath=\"textpath\">\n    <li\n        class=\"list-group-item list-group-item-action py-1 px-2 d-flex align-items-center\"\n        [class.active]=\"isSelectedState(node)\"\n        (mouseenter)=\"setHoverState(node, true)\"\n        (mouseleave)=\"setHoverState(node, false)\"\n        style=\"cursor: pointer\"\n        attr.data-path=\"{{ path }}/{{ getStringField(node, attrid) }}\"\n        attr.data-textpath=\"{{ textpath }}/{{ getStringField(node, attrlabel) }}\">\n        <div\n            class=\"mx-3\"\n            *ngFor=\"let i of count(deep)\">\n        </div>\n\n        <div\n            (click)=\"onNodeClicked(node)\"\n            *ngIf=\"expandedstate === 'true' || expandedstate === true\"\n            class=\"me-2\"\n            [ngClass]=\"!hasChildren(node) ? iconFolderEmpty : !isExpandedState(node) ? iconFolderCollabsed : isExpandedState(node) ? iconFolderOpen : ''\">\n        </div>\n\n        <div\n            (click)=\"onNodeClicked(node)\"\n            *ngIf=\"attricon && getStringField(node, attricon)\">\n            <ng-template\n                [ngTemplateOutlet]=\"templateicon || defaultTemplateIcon\"\n                [ngTemplateOutletContext]=\"{ node: node }\">\n            </ng-template>\n        </div>\n\n        <div\n            (click)=\"onNodeClicked(node)\"\n            class=\"flex-grow-1 py-1\"\n            [style.max-width.percent]=\"enableellipsis ? '100' : null\"\n            [style.overflow]=\"enableellipsis ? 'hidden' : null\"\n            [style.text-overflow]=\"enableellipsis ? 'ellipsis' : null\"\n            [style.white-space]=\"enableellipsis ? 'nowrap' : null\">\n            <ng-template\n                [ngTemplateOutlet]=\"templatelabel || defaultTemplateLabel\"\n                [ngTemplateOutletContext]=\"{ node: node, label: getStringField(node, attrlabel) }\">\n            </ng-template>\n        </div>\n\n        <div\n            (click)=\"setSelectedState(node)\"\n            class=\"flex-shrink-0\"\n            *ngIf=\"!isDisabledState(node) && (showactionalways || isSelectedState(node) || isHoverState(node))\">\n            <ng-template\n                [ngTemplateOutlet]=\"templateaction || defaultTemplateAction\"\n                [ngTemplateOutletContext]=\"{ node: node, actionhandler: onActionClicked.bind(this) }\">\n            </ng-template>\n        </div>\n    </li>\n\n    <ng-container *ngIf=\"isExpandedState(node)\">\n        <ng-template\n            *ngFor=\"let child of getChildren(node)\"\n            [ngTemplateOutlet]=\"treeItem\"\n            [ngTemplateOutletContext]=\"{\n                node: child,\n                deep: deep + 1,\n                path: path + '/' + getStringField(node, attrid),\n                textpath: textpath + '/' + getStringField(node, attrlabel)\n            }\">\n        </ng-template>\n    </ng-container>\n</ng-template>\n<ng-template\n    #defaultTemplateLabel\n    let-label=\"label\"\n    let-node=\"node\">\n    <span [title]=\"label\">{{ label }}</span>\n</ng-template>\n\n<ng-template\n    #defaultTemplateIcon\n    let-node=\"node\">\n    <div\n        class=\"me-2\"\n        [ngClass]=\"getStringField(node, attricon)\">\n    </div>\n</ng-template>\n\n<ng-template\n    #defaultTemplateAction\n    let-node=\"node\"\n    let-actionhandler=\"actionhandler\">\n    <a\n        class=\"btn btn-sm btn-link text-secondary\"\n        (click)=\"actionhandler({ action: 'default', node: node })\">\n        <i [class]=\"iconAction\"></i>\n    </a>\n</ng-template>\n" }]
+        }], ctorParameters: function () { return [{ type: SacFormLayoutDirective, decorators: [{
+                    type: Host
+                }, {
+                    type: Optional
+                }] }, { type: i0.Injector }]; } });
+
+class SACBootstrap5TreeviewModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SACBootstrap5TreeviewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SACBootstrap5TreeviewModule, imports: [CommonModule, SacTreeviewComponent], exports: [SacTreeviewComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SACBootstrap5TreeviewModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SACBootstrap5TreeviewModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, SacTreeviewComponent],
+                    exports: [SacTreeviewComponent],
+                }]
+        }] });
+
 /**
  * Validation Summary Kompontente
  */
 class SacValidationSummaryComponent extends SacValidationSummaryCommon {
+    // #region Constructors
     /**
-     * Konstruktor
-     * @param parent Formular
-     * @param injector Angular Dependency Injection Service
+     * Constructor
+     * @param formControl Instance of Form Component to receive invalid form controls
+     * @param injector Injector for injecting services
      */
-    constructor(parent, injector) {
-        super(parent, injector);
+    constructor(formControl, injector) {
+        super(formControl, injector);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacValidationSummaryComponent, deps: [{ token: SacFormDirective, host: true, optional: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SacValidationSummaryComponent, isStandalone: true, selector: "sac-validationsummary", providers: [
@@ -2563,9 +3133,7 @@ class SacValidationSummaryComponent extends SacValidationSummaryCommon {
                 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", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], viewProviders: [
-            { provide: ControlContainer, useExisting: SacFormDirective },
-        ] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"alert alert-danger\"\n    role=\"alert\"\n    *ngIf=\"hasErrors\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <ul class=\"mb-0\">\n        <li *ngFor=\"let error of formErrors\">{{ error | async }}</li>\n    </ul>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: SacTestingAttributePipe, name: "testingattribute" }], viewProviders: [{ provide: ControlContainer, useExisting: SacFormDirective }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacValidationSummaryComponent, decorators: [{
             type: Component,
@@ -2575,13 +3143,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             multi: true,
                             useExisting: SacValidationSummaryComponent,
                         },
-                    ], viewProviders: [
-                        { provide: ControlContainer, useExisting: SacFormDirective },
-                    ], standalone: true, imports: [
-                        NgIf,
-                        NgFor,
-                        AsyncPipe,
-                    ], 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" }]
+                    ], viewProviders: [{ provide: ControlContainer, useExisting: SacFormDirective }], standalone: true, imports: [NgIf, NgFor, AsyncPipe, SacTestingAttributePipe], template: "<div\n    class=\"alert alert-danger\"\n    role=\"alert\"\n    *ngIf=\"hasErrors\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <ul class=\"mb-0\">\n        <li *ngFor=\"let error of formErrors\">{{ error | async }}</li>\n    </ul>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: SacFormDirective, decorators: [{
                     type: Host
                 }, {
@@ -2631,7 +3193,7 @@ class SacWizardComponent extends SacWizardCommon {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacWizardComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SacWizardComponent, isStandalone: true, 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", dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+        ], queries: [{ propertyName: "_wizardItems", predicate: SacWizardItemComponent }], usesInheritance: true, ngImport: i0, template: "<ul\n    class=\"nav nav-wizard\"\n    role=\"tablist\">\n    <li\n        *ngFor=\"let item of _wizardItems\"\n        class=\"nav-item\"\n        [ngClass]=\"{ active: item._active, disabled: item._disabled, success: item._iscomplete }\"\n        [ngStyle]=\"{ cursor: item._disabled ? 'not-allowed' : 'pointer' }\">\n        <a\n            role=\"tab\"\n            (click)=\"selectStep(item)\">\n            <div class=\"circle\">\n                <span class=\"step\"></span>\n            </div>\n        </a>\n        <div class=\"info\">\n            <a>{{ item._label }}</a>\n        </div>\n    </li>\n</ul>\n", dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacWizardComponent, decorators: [{
             type: Component,
@@ -2641,7 +3203,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         NgFor,
                         NgClass,
                         NgStyle,
-                    ], 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" }]
+                    ], template: "<ul\n    class=\"nav nav-wizard\"\n    role=\"tablist\">\n    <li\n        *ngFor=\"let item of _wizardItems\"\n        class=\"nav-item\"\n        [ngClass]=\"{ active: item._active, disabled: item._disabled, success: item._iscomplete }\"\n        [ngStyle]=\"{ cursor: item._disabled ? 'not-allowed' : 'pointer' }\">\n        <a\n            role=\"tab\"\n            (click)=\"selectStep(item)\">\n            <div class=\"circle\">\n                <span class=\"step\"></span>\n            </div>\n        </a>\n        <div class=\"info\">\n            <a>{{ item._label }}</a>\n        </div>\n    </li>\n</ul>\n" }]
         }], propDecorators: { _wizardItems: [{
                 type: ContentChildren,
                 args: [SacWizardItemComponent]
@@ -2672,5 +3234,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * 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 };
+export { NGFORM_FACTORY, SACBootstrap5BrowserModule, SACBootstrap5ButtonModule, SACBootstrap5CheckboxModule, SACBootstrap5ConfirmModule, SACBootstrap5ContextmenuModule, SACBootstrap5DateTimeModule, SACBootstrap5DialogModule, SACBootstrap5DropdownModule, SACBootstrap5FormModule, SACBootstrap5GridModule, SACBootstrap5InputModule, SACBootstrap5LayoutModule, SACBootstrap5ListModule, SACBootstrap5MultilanguageModule, SACBootstrap5StaticLabelModule, SACBootstrap5TabsModule, SACBootstrap5TinyMceModule, SACBootstrap5TooltipModule, SACBootstrap5TreeviewModule, SACBootstrap5UploadModule, SACBootstrap5ValidationSummaryModule, SACBootstrap5WizardModule, SACFORM_FACTORY, SacBrowserComponent, SacButtonComponent, SacCheckboxComponent, SacConfirmComponent, SacContextmenuAnchorDirective, SacContextmenuComponent, SacContextmenuItemButtonComponent, SacContextmenuItemSplitterComponent, SacDateComponent, SacDateSelectorComponent, SacDateTimeComponent, SacDialogComponent, SacDropdownComponent, SacDropdownOptionDirective, SacDropzoneMultipleComponent, SacDropzoneSingleComponent, SacFormDirective, SacFormLayoutDirective, 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, SacToControlHeightPipe, SacToControlWidthCssPipe, SacToLabelHeightPipe, SacToLabelWidthCssPipe, SacTooltipComponent, SacTreeviewComponent, SacUploadComponent, SacUploadMultipleComponent, SacValidationSummaryComponent, SacWizardComponent, SacWizardItemComponent, ServiceConfirm };
 //# sourceMappingURL=simpleangularcontrols-sac-bootstrap5.mjs.map