@simpleangularcontrols/sac-bootstrap4 16.0.0-rc.20 → 16.0.0-rc.21

package/fesm2022/simpleangularcontrols-sac-bootstrap4.mjs

@@ -1,11 +1,12 @@
 import * as i0 from '@angular/core';
 import { Component, ComponentFactoryResolver, Injectable, Inject, forwardRef, Directive, Pipe, Host, Optional, ViewChild, NgModule, HostBinding, SkipSelf, TemplateRef, ContentChild, ContentChildren } from '@angular/core';
-import { NgIf, NgClass, NgFor, DOCUMENT, NgTemplateOutlet, AsyncPipe, NgForOf, CommonModule, NgStyle, JsonPipe } from '@angular/common';
+import * as i1$2 from '@angular/common';
+import { NgIf, NgClass, NgFor, DOCUMENT, NgTemplateOutlet, AsyncPipe, NgForOf, CommonModule, NgStyle } from '@angular/common';
 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, NgForm, ControlContainer } from '@angular/forms';
-import { SacButtonCommon, 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, SacInputAreaCommon, SacInputCurrencyCommon, SacInputDecimalCommon, SacInputEmailCommon, SacInputIntegerCommon, SacInputPasswordCommon, SacInputSearchCommon, SacDropdownCommon, SacDropdownOptionCommon, SacListboxCommon, SacListboxOptionCommon, SacMultilanguageInputCommon, IconType, SacMultilanguageInputAreaCommon, SacStaticFormContainerCommon, SacStaticLabelCommon, SacTabItemCommon, SacTabCommon, SacTinyMceCommon, SacTreeviewCommon, SacDropzoneSingleCommon, SacUploadSingleCommon, SacUploadMultipleCommon, SacValidationSummaryCommon, SacWizardItemCommon, SacWizardCommon } from '@simpleangularcontrols/sac-common';
+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, SacInputAreaCommon, SacInputCurrencyCommon, SacInputDecimalCommon, SacInputEmailCommon, SacInputIntegerCommon, SacInputPasswordCommon, SacInputSearchCommon, SacDropdownOptionCommon, SacDropdownCommon, SacListboxOptionCommon, SacListboxCommon, SacMultilanguageInputCommon, IconType, SacMultilanguageInputAreaCommon, SacStaticFormContainerCommon, SacStaticLabelCommon, SacTabItemCommon, SacTabCommon, SacTinyMceCommon, SacTreeviewCommon, SacDropzoneSingleCommon, SacUploadSingleCommon, SacUploadMultipleCommon, SacValidationSummaryCommon, SacWizardItemCommon, SacWizardCommon } from '@simpleangularcontrols/sac-common';
 import { forkJoin, Observable } from 'rxjs';
 import { take } from 'rxjs/operators';
 import { IMaskDirective, IMaskModule } from 'angular-imask';
@@ -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\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  (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>\n  <span\n    *ngIf=\"isloading\"\n    class=\"spinner-border spinner-border-sm mr-2\"\n    role=\"status\"\n    aria-hidden=\"true\"\n  ></span>\n  <i *ngIf=\"!isloading && icon !== ''\" [ngClass]=\"icon\" [class.mr-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"] }] }); }
+    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 mr-2\"\n        role=\"status\"\n        aria-hidden=\"true\"></span>\n    <i\n        *ngIf=\"!isloading && icon !== ''\"\n        [ngClass]=\"icon\"\n        [class.mr-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\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  (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>\n  <span\n    *ngIf=\"isloading\"\n    class=\"spinner-border spinner-border-sm mr-2\"\n    role=\"status\"\n    aria-hidden=\"true\"\n  ></span>\n  <i *ngIf=\"!isloading && icon !== ''\" [ngClass]=\"icon\" [class.mr-2]=\"text\"></i\n  >{{text}}\n</button>\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 mr-2\"\n        role=\"status\"\n        aria-hidden=\"true\"></span>\n    <i\n        *ngIf=\"!isloading && icon !== ''\"\n        [ngClass]=\"icon\"\n        [class.mr-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\n  #dialog\n  class=\"modal show\"\n  style=\"display: block\"\n  tabindex=\"-1\"\n  role=\"dialog\"\n  *ngIf=\"_show\"\n>\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  >\n    <div class=\"modal-content\">\n      <div class=\"modal-header\">\n        <h5 class=\"modal-title\">{{title}}</h5>\n        <button\n          type=\"button\"\n          class=\"close\"\n          data-dismiss=\"modal\"\n          aria-label=\"Close\"\n          (click)=\"hide()\"\n          *ngIf=\"closebutton\"\n        >\n          <span aria-hidden=\"true\">&times;</span>\n        </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 class=\"modal-backdrop show\" *ngIf=\"_show && backdrop\" #backdrop></div>\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    *ngIf=\"_show\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\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=\"close\"\n                    data-dismiss=\"modal\"\n                    aria-label=\"Close\"\n                    (click)=\"hide()\"\n                    *ngIf=\"closebutton\">\n                    <span aria-hidden=\"true\">&times;</span>\n                </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\n  #dialog\n  class=\"modal show\"\n  style=\"display: block\"\n  tabindex=\"-1\"\n  role=\"dialog\"\n  *ngIf=\"_show\"\n>\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  >\n    <div class=\"modal-content\">\n      <div class=\"modal-header\">\n        <h5 class=\"modal-title\">{{title}}</h5>\n        <button\n          type=\"button\"\n          class=\"close\"\n          data-dismiss=\"modal\"\n          aria-label=\"Close\"\n          (click)=\"hide()\"\n          *ngIf=\"closebutton\"\n        >\n          <span aria-hidden=\"true\">&times;</span>\n        </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 class=\"modal-backdrop show\" *ngIf=\"_show && backdrop\" #backdrop></div>\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    *ngIf=\"_show\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\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=\"close\"\n                    data-dismiss=\"modal\"\n                    aria-label=\"Close\"\n                    (click)=\"hide()\"\n                    *ngIf=\"closebutton\">\n                    <span aria-hidden=\"true\">&times;</span>\n                </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 }]; } });
 
 /**
@@ -263,11 +268,17 @@ class SacContextmenuComponent extends SacContextmenuCommon {
         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", usesInheritance: true, ngImport: i0, template: "<div class=\"dropdown\" [ngClass]=\"cssclass\">\n  <ng-container\n    [ngTemplateOutlet]=\"buttontemplate || defaultButtonTemplate\"\n  ></ng-container>\n\n  <div\n    class=\"dropdown-menu dropdown-menu-right\"\n    sacContextMenuContainer\n    [class.show]=\"isopen\"\n  >\n    <ng-content></ng-content>\n  </div>\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  >\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]" }] }); }
+    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    [ngClass]=\"cssclass\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <ng-container [ngTemplateOutlet]=\"buttontemplate || defaultButtonTemplate\"></ng-container>\n\n    <div\n        class=\"dropdown-menu dropdown-menu-right\"\n        sacContextMenuContainer\n        [class.show]=\"isopen\">\n        <ng-content></ng-content>\n    </div>\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', standalone: true, imports: [NgClass, NgTemplateOutlet, SacContextmenuContainerDirective, SacContextmenuAnchorDirective], template: "<div class=\"dropdown\" [ngClass]=\"cssclass\">\n  <ng-container\n    [ngTemplateOutlet]=\"buttontemplate || defaultButtonTemplate\"\n  ></ng-container>\n\n  <div\n    class=\"dropdown-menu dropdown-menu-right\"\n    sacContextMenuContainer\n    [class.show]=\"isopen\"\n  >\n    <ng-content></ng-content>\n  </div>\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  >\n    <i [class]=\"IconContextMenu\"></i>\n  </button>\n</ng-template>\n" }]
+            args: [{ selector: 'sac-contextmenu', standalone: true, imports: [
+                        NgClass,
+                        NgTemplateOutlet,
+                        SacContextmenuContainerDirective,
+                        SacContextmenuAnchorDirective,
+                        SacTestingAttributePipe,
+                    ], template: "<div\n    class=\"dropdown\"\n    [ngClass]=\"cssclass\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <ng-container [ngTemplateOutlet]=\"buttontemplate || defaultButtonTemplate\"></ng-container>\n\n    <div\n        class=\"dropdown-menu dropdown-menu-right\"\n        sacContextMenuContainer\n        [class.show]=\"isopen\">\n        <ng-content></ng-content>\n    </div>\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]
@@ -515,11 +526,11 @@ class SacTooltipComponent extends SacTooltipCommon {
         return 2;
     }
     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 [style.display]=\"inlinemode ? 'inline' : null\">\n  <div\n    #container\n    (mouseenter)=\"ShowTooltip()\"\n    (mouseleave)=\"HideTooltip()\"\n    [style.display]=\"inlinemode ? 'inline' : null\"\n  >\n    <ng-content></ng-content>\n  </div>\n  <div #tooltip *ngIf=\"IsTooltipVisible()\">\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.x-placement]=\"GetTooltipPosition() == TooltipPosition.right ? 'right' : GetTooltipPosition() == TooltipPosition.left ? 'left' :  GetTooltipPosition() == TooltipPosition.top ? 'top' :GetTooltipPosition() == TooltipPosition.bottom ? 'bottom' : null\"\n    >\n      <div\n        class=\"arrow\"\n        style=\"position: absolute\"\n        [style.top.px]=\"GetTooltipPosition() === TooltipPosition.left || GetTooltipPosition() === TooltipPosition.right ? (getToolTipHeight() / 2) - 6.5 : null\"\n        [style.left.px]=\"GetTooltipPosition() === TooltipPosition.bottom || GetTooltipPosition() === TooltipPosition.top ? (getToolTipWidth() / 2) - 6.5 : null\"\n      ></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"] }] }); }
+    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        #tooltip\n        *ngIf=\"IsTooltipVisible()\">\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.x-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=\"arrow\"\n                style=\"position: absolute\"\n                [style.top.px]=\"GetTooltipPosition() === TooltipPosition.left || GetTooltipPosition() === TooltipPosition.right ? getToolTipHeight() / 2 - 6.5 : null\"\n                [style.left.px]=\"GetTooltipPosition() === TooltipPosition.bottom || GetTooltipPosition() === TooltipPosition.top ? getToolTipWidth() / 2 - 6.5 : null\"></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: SacTooltipComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sac-tooltip', standalone: true, imports: [NgIf], template: "<div [style.display]=\"inlinemode ? 'inline' : null\">\n  <div\n    #container\n    (mouseenter)=\"ShowTooltip()\"\n    (mouseleave)=\"HideTooltip()\"\n    [style.display]=\"inlinemode ? 'inline' : null\"\n  >\n    <ng-content></ng-content>\n  </div>\n  <div #tooltip *ngIf=\"IsTooltipVisible()\">\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.x-placement]=\"GetTooltipPosition() == TooltipPosition.right ? 'right' : GetTooltipPosition() == TooltipPosition.left ? 'left' :  GetTooltipPosition() == TooltipPosition.top ? 'top' :GetTooltipPosition() == TooltipPosition.bottom ? 'bottom' : null\"\n    >\n      <div\n        class=\"arrow\"\n        style=\"position: absolute\"\n        [style.top.px]=\"GetTooltipPosition() === TooltipPosition.left || GetTooltipPosition() === TooltipPosition.right ? (getToolTipHeight() / 2) - 6.5 : null\"\n        [style.left.px]=\"GetTooltipPosition() === TooltipPosition.bottom || GetTooltipPosition() === TooltipPosition.top ? (getToolTipWidth() / 2) - 6.5 : null\"\n      ></div>\n      <div class=\"tooltip-inner\">{{tooltiptext}}</div>\n    </div>\n  </div>\n</div>\n" }]
+            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        #tooltip\n        *ngIf=\"IsTooltipVisible()\">\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.x-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=\"arrow\"\n                style=\"position: absolute\"\n                [style.top.px]=\"GetTooltipPosition() === TooltipPosition.left || GetTooltipPosition() === TooltipPosition.right ? getToolTipHeight() / 2 - 6.5 : null\"\n                [style.left.px]=\"GetTooltipPosition() === TooltipPosition.bottom || GetTooltipPosition() === TooltipPosition.top ? getToolTipWidth() / 2 - 6.5 : null\"></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 {
@@ -570,7 +581,7 @@ class SacDropzoneMultipleComponent extends SacDropzoneMultipleCommon {
                 multi: true,
                 useExisting: forwardRef(() => SacDropzoneMultipleComponent),
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div\n    id=\"{{ name }}\"\n    class=\"row form-group\"\n    [class.no-gutters]=\"disablelabel\">\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) : 'sr-only', 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=\"ml-1\"></span> </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\"\n                    *ngIf=\"uploads.length > 0\">\n                    <div class=\"align-self-center 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                                <div class=\"input-group-append\">\n                                    <!-- image-preview-clear button -->\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                </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            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n            <div\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"invalid-feedback\">\n                {{ GetErrorMessage() | async }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ml-2 mr-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(--red)}.dropzone .content{position:absolute;inset:0}.dropzone .content .is-invalid{color:var(--red)}.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}\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: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelHeightPipe, name: "toLabelHeight" }, { kind: "component", type: SacTooltipComponent, selector: "sac-tooltip" }, { kind: "pipe", type: SacToControlHeightPipe, name: "toControlHeight" }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div\n    id=\"{{ name }}\"\n    class=\"row form-group\"\n    [class.no-gutters]=\"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) : 'sr-only', 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=\"ml-1\"></span> </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\"\n                    *ngIf=\"uploads.length > 0\">\n                    <div class=\"align-self-center 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                                <div class=\"input-group-append\">\n                                    <!-- image-preview-clear button -->\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                </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            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n            <div\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"invalid-feedback\">\n                {{ GetErrorMessage() | async }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ml-2 mr-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(--red)}.dropzone .content{position:absolute;inset:0}.dropzone .content .is-invalid{color:var(--red)}.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}\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: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { 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,
@@ -595,7 +606,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         SacToLabelHeightPipe,
                         SacTooltipComponent,
                         SacToControlHeightPipe,
-                    ], template: "<div\n    id=\"{{ name }}\"\n    class=\"row form-group\"\n    [class.no-gutters]=\"disablelabel\">\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) : 'sr-only', 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=\"ml-1\"></span> </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\"\n                    *ngIf=\"uploads.length > 0\">\n                    <div class=\"align-self-center 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                                <div class=\"input-group-append\">\n                                    <!-- image-preview-clear button -->\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                </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            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n            <div\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"invalid-feedback\">\n                {{ GetErrorMessage() | async }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ml-2 mr-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(--red)}.dropzone .content{position:absolute;inset:0}.dropzone .content .is-invalid{color:var(--red)}.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}\n"] }]
+                        SacTestingAttributePipe,
+                    ], template: "<div\n    id=\"{{ name }}\"\n    class=\"row form-group\"\n    [class.no-gutters]=\"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) : 'sr-only', 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=\"ml-1\"></span> </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\"\n                    *ngIf=\"uploads.length > 0\">\n                    <div class=\"align-self-center 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                                <div class=\"input-group-append\">\n                                    <!-- image-preview-clear button -->\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                </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            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n            <div\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"invalid-feedback\">\n                {{ GetErrorMessage() | async }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ml-2 mr-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(--red)}.dropzone .content{position:absolute;inset:0}.dropzone .content .is-invalid{color:var(--red)}.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}\n"] }]
         }], ctorParameters: function () { return [{ type: SacFormLayoutDirective, decorators: [{
                     type: Host
                 }, {
@@ -727,18 +739,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 class SACBootstrap4ButtonModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SACBootstrap4ButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SACBootstrap4ButtonModule, imports: [CommonModule,
-            SacButtonComponent], exports: [SacButtonComponent] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SACBootstrap4ButtonModule, imports: [CommonModule, SacButtonComponent], exports: [SacButtonComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SACBootstrap4ButtonModule, imports: [CommonModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SACBootstrap4ButtonModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [
-                        CommonModule,
-                        SacButtonComponent
-                    ],
-                    exports: [SacButtonComponent]
+                    imports: [CommonModule, SacButtonComponent],
+                    exports: [SacButtonComponent],
                 }]
         }] });
 
@@ -767,7 +775,7 @@ class SacCheckboxComponent extends SacCheckboxCommon {
                 useExisting: forwardRef(() => SacCheckboxComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"row\"\n    [class.no-gutters]=\"disablelabel\"\n    [class.form-group]=\"!stacked\">\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\">\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=\"ml-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]=\"checkboxstyle === 'checkbox'\"\n            [class.custom-control]=\"checkboxstyle === 'switch'\"\n            [class.custom-switch]=\"checkboxstyle === 'switch'\"\n            [class.form-check-sm]=\"componentHeight === ControlHeight.Small\"\n            [class.form-check-lg]=\"componentHeight === ControlHeight.Large\">\n            <input\n                [class.form-check-input]=\"checkboxstyle === 'checkbox'\"\n                [class.custom-control-input]=\"checkboxstyle === 'switch'\"\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]=\"checkboxstyle === 'checkbox'\"\n                [class.custom-control-label]=\"checkboxstyle === 'switch'\"\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\n            <div\n                *ngIf=\"helptextmode === 'tooltip' && helptext && (disablelabel || stacked)\"\n                class=\"ml-2 mr-1 d-inline-block\"\n                [class.form-check-label-sm]=\"componentHeight === ControlHeight.Small\"\n                [class.form-check-label-lg]=\"componentHeight === ControlHeight.Large\">\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        <small\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"form-text text-muted\">\n            {{ helptext }}\n        </small>\n    </div>\n</div>\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}.form-check-label-sm{font-size:.875rem}.form-check-label-lg{font-size:1.25rem}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelHeightPipe, name: "toLabelHeight" }, { kind: "component", type: SacTooltipComponent, selector: "sac-tooltip" }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\"\n    class=\"row\"\n    [class.no-gutters]=\"disablelabel\"\n    [class.form-group]=\"!stacked\">\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\">\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=\"ml-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]=\"checkboxstyle === 'checkbox'\"\n            [class.custom-control]=\"checkboxstyle === 'switch'\"\n            [class.custom-switch]=\"checkboxstyle === 'switch'\"\n            [class.form-check-sm]=\"componentHeight === ControlHeight.Small\"\n            [class.form-check-lg]=\"componentHeight === ControlHeight.Large\">\n            <input\n                [class.form-check-input]=\"checkboxstyle === 'checkbox'\"\n                [class.custom-control-input]=\"checkboxstyle === 'switch'\"\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]=\"checkboxstyle === 'checkbox'\"\n                [class.custom-control-label]=\"checkboxstyle === 'switch'\"\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\n            <div\n                *ngIf=\"helptextmode === 'tooltip' && helptext && (disablelabel || stacked)\"\n                class=\"ml-2 mr-1 d-inline-block\"\n                [class.form-check-label-sm]=\"componentHeight === ControlHeight.Small\"\n                [class.form-check-label-lg]=\"componentHeight === ControlHeight.Large\">\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        <small\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"form-text text-muted\">\n            {{ helptext }}\n        </small>\n    </div>\n</div>\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}.form-check-label-sm{font-size:.875rem}.form-check-label-lg{font-size:1.25rem}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { 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,
@@ -789,8 +797,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         SacToControlWidthCssPipe,
                         SacToLabelHeightPipe,
                         SacTooltipComponent,
-                        SacToControlHeightPipe,
-                    ], template: "<div\n    class=\"row\"\n    [class.no-gutters]=\"disablelabel\"\n    [class.form-group]=\"!stacked\">\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\">\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=\"ml-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]=\"checkboxstyle === 'checkbox'\"\n            [class.custom-control]=\"checkboxstyle === 'switch'\"\n            [class.custom-switch]=\"checkboxstyle === 'switch'\"\n            [class.form-check-sm]=\"componentHeight === ControlHeight.Small\"\n            [class.form-check-lg]=\"componentHeight === ControlHeight.Large\">\n            <input\n                [class.form-check-input]=\"checkboxstyle === 'checkbox'\"\n                [class.custom-control-input]=\"checkboxstyle === 'switch'\"\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]=\"checkboxstyle === 'checkbox'\"\n                [class.custom-control-label]=\"checkboxstyle === 'switch'\"\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\n            <div\n                *ngIf=\"helptextmode === 'tooltip' && helptext && (disablelabel || stacked)\"\n                class=\"ml-2 mr-1 d-inline-block\"\n                [class.form-check-label-sm]=\"componentHeight === ControlHeight.Small\"\n                [class.form-check-label-lg]=\"componentHeight === ControlHeight.Large\">\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        <small\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"form-text text-muted\">\n            {{ helptext }}\n        </small>\n    </div>\n</div>\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}.form-check-label-sm{font-size:.875rem}.form-check-label-lg{font-size:1.25rem}\n"] }]
+                        SacTestingAttributePipe,
+                    ], template: "<div\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\"\n    class=\"row\"\n    [class.no-gutters]=\"disablelabel\"\n    [class.form-group]=\"!stacked\">\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\">\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=\"ml-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]=\"checkboxstyle === 'checkbox'\"\n            [class.custom-control]=\"checkboxstyle === 'switch'\"\n            [class.custom-switch]=\"checkboxstyle === 'switch'\"\n            [class.form-check-sm]=\"componentHeight === ControlHeight.Small\"\n            [class.form-check-lg]=\"componentHeight === ControlHeight.Large\">\n            <input\n                [class.form-check-input]=\"checkboxstyle === 'checkbox'\"\n                [class.custom-control-input]=\"checkboxstyle === 'switch'\"\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]=\"checkboxstyle === 'checkbox'\"\n                [class.custom-control-label]=\"checkboxstyle === 'switch'\"\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\n            <div\n                *ngIf=\"helptextmode === 'tooltip' && helptext && (disablelabel || stacked)\"\n                class=\"ml-2 mr-1 d-inline-block\"\n                [class.form-check-label-sm]=\"componentHeight === ControlHeight.Small\"\n                [class.form-check-label-lg]=\"componentHeight === ControlHeight.Large\">\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        <small\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"form-text text-muted\">\n            {{ helptext }}\n        </small>\n    </div>\n</div>\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}.form-check-label-sm{font-size:.875rem}.form-check-label-lg{font-size:1.25rem}\n"] }]
         }], ctorParameters: function () { return [{ type: SacFormLayoutDirective, decorators: [{
                     type: Host
                 }, {
@@ -822,7 +830,7 @@ class SacRadiobuttonsComponent extends SacRadiobuttonsCommon {
                 useExisting: forwardRef(() => SacRadiobuttonsComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"row form-group\">\n    <div\n        *ngIf=\"disablelabel === false\"\n        class=\"col-12 pt-0\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\">\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=\"ml-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        <small\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"form-text text-muted\">\n            {{ helptext }}\n        </small>\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: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelHeightPipe, name: "toLabelHeight" }, { kind: "component", type: SacTooltipComponent, selector: "sac-tooltip" }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"row form-group\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <div\n        *ngIf=\"disablelabel === false\"\n        class=\"col-12 pt-0\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\">\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=\"ml-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        <small\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"form-text text-muted\"\n            >{{ helptext }}</small\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: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { 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,
@@ -844,7 +852,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         SacToControlWidthCssPipe,
                         SacToLabelHeightPipe,
                         SacTooltipComponent,
-                    ], template: "<div class=\"row form-group\">\n    <div\n        *ngIf=\"disablelabel === false\"\n        class=\"col-12 pt-0\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\">\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=\"ml-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        <small\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"form-text text-muted\">\n            {{ helptext }}\n        </small>\n    </div>\n</div>\n" }]
+                        SacTestingAttributePipe,
+                    ], template: "<div\n    class=\"row form-group\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <div\n        *ngIf=\"disablelabel === false\"\n        class=\"col-12 pt-0\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\">\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=\"ml-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        <small\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"form-text text-muted\"\n            >{{ helptext }}</small\n        >\n    </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: SacFormLayoutDirective, decorators: [{
                     type: Host
                 }, {
@@ -969,19 +978,20 @@ 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\">\n  <div *ngIf=\"dateselection\">\n    <div class=\"container\">\n      <div class=\"row\">\n        <div class=\"col text-left\">\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-right\">\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            >\n              {{ item.displaytext }}\n            </div>\n          </ng-container>\n          <div class=\"w-100\"></div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n  <div class=\"d-flex flex-row justify-content-start\" *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        />\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        />\n      </div>\n    </div>\n  </div>\n  <div class=\"d-flex flex-row\">\n    <div class=\"mr-auto p-2\">\n      <button type=\"button\" class=\"btn btn-secondary\" (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      >\n        Reset\n      </button>\n    </div>\n    <div class=\"p-2\">\n      <button type=\"button\" class=\"btn btn-primary\" (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"] }] }); }
+    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-left\">\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-right\">\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 flex-row 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=\"mr-auto 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\">\n  <div *ngIf=\"dateselection\">\n    <div class=\"container\">\n      <div class=\"row\">\n        <div class=\"col text-left\">\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-right\">\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            >\n              {{ item.displaytext }}\n            </div>\n          </ng-container>\n          <div class=\"w-100\"></div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n  <div class=\"d-flex flex-row justify-content-start\" *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        />\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        />\n      </div>\n    </div>\n  </div>\n  <div class=\"d-flex flex-row\">\n    <div class=\"mr-auto p-2\">\n      <button type=\"button\" class=\"btn btn-secondary\" (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      >\n        Reset\n      </button>\n    </div>\n    <div class=\"p-2\">\n      <button type=\"button\" class=\"btn btn-primary\" (click)=\"applySelection()\">\n        Apply\n      </button>\n    </div>\n  </div>\n</div>\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-left\">\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-right\">\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 flex-row 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=\"mr-auto 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 Classes
+// #region Variables
+/**
+ * Referenz auf Moment.JS
+ */
+const moment = moment_['default'];
+// #endregion Variables
+// #region Exported Classes
 /**
  * Komponente für Datumauswahl
  */
@@ -1009,7 +1019,7 @@ class SacDateComponent extends SacDateCommon {
                 multi: true,
                 useExisting: forwardRef(() => SacDateComponent),
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"row form-group\"\n    [class.no-gutters]=\"disablelabel\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', 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=\"ml-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                <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                <div class=\"input-group-append\">\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                <div\n                    *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                    class=\"invalid-feedback\">\n                    {{ GetErrorMessage() | async }}\n                </div>\n            </div>\n            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n            <div\n                #picker\n                *ngIf=\"_showselector\">\n                <div\n                    class=\"popover fade show position-absolute m-0\"\n                    role=\"tooltip\"\n                    *ngIf=\"_showselector\"\n                    [class.bs-popover-bottom]=\"GetPickerPosition() == TooltipPosition.bottom || GetPickerPosition() == TooltipPosition.bottomend\"\n                    [class.bs-popover-top]=\"GetPickerPosition() == TooltipPosition.top || GetPickerPosition() == TooltipPosition.topend\"\n                    [style.left.px]=\"posPopupLeft\"\n                    [style.top.px]=\"posPopupTop\">\n                    <div\n                        #pickerarrow\n                        class=\"arrow position-absolute m-0\"\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                            [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 ml-2 mr-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: "component", type: SacDateSelectorComponent, selector: "sac-dateselector" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelHeightPipe, name: "toLabelHeight" }, { kind: "pipe", type: SacToControlHeightPipe, name: "toControlHeight" }, { kind: "component", type: SacTooltipComponent, selector: "sac-tooltip" }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"row form-group\"\n    [class.no-gutters]=\"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) : 'sr-only', 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=\"ml-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                <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                <div class=\"input-group-append\">\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                <div\n                    *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                    class=\"invalid-feedback\">\n                    {{ GetErrorMessage() | async }}\n                </div>\n            </div>\n            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n            <div\n                #picker\n                *ngIf=\"_showselector\">\n                <div\n                    class=\"popover fade show position-absolute m-0\"\n                    role=\"tooltip\"\n                    *ngIf=\"_showselector\"\n                    [class.bs-popover-bottom]=\"GetPickerPosition() === TooltipPosition.bottom || GetPickerPosition() === TooltipPosition.bottomend\"\n                    [class.bs-popover-top]=\"GetPickerPosition() === TooltipPosition.top || GetPickerPosition() === TooltipPosition.topend\"\n                    [style.left.px]=\"posPopupLeft\"\n                    [style.top.px]=\"posPopupTop\">\n                    <div\n                        #pickerarrow\n                        class=\"arrow position-absolute m-0\"\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                            [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 ml-2 mr-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: "component", type: SacDateSelectorComponent, selector: "sac-dateselector" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { 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,
@@ -1035,18 +1045,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         SacToLabelHeightPipe,
                         SacToControlHeightPipe,
                         SacTooltipComponent,
-                    ], template: "<div\n    class=\"row form-group\"\n    [class.no-gutters]=\"disablelabel\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', 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=\"ml-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                <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                <div class=\"input-group-append\">\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                <div\n                    *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                    class=\"invalid-feedback\">\n                    {{ GetErrorMessage() | async }}\n                </div>\n            </div>\n            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n            <div\n                #picker\n                *ngIf=\"_showselector\">\n                <div\n                    class=\"popover fade show position-absolute m-0\"\n                    role=\"tooltip\"\n                    *ngIf=\"_showselector\"\n                    [class.bs-popover-bottom]=\"GetPickerPosition() == TooltipPosition.bottom || GetPickerPosition() == TooltipPosition.bottomend\"\n                    [class.bs-popover-top]=\"GetPickerPosition() == TooltipPosition.top || GetPickerPosition() == TooltipPosition.topend\"\n                    [style.left.px]=\"posPopupLeft\"\n                    [style.top.px]=\"posPopupTop\">\n                    <div\n                        #pickerarrow\n                        class=\"arrow position-absolute m-0\"\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                            [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 ml-2 mr-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" }]
+                        SacTestingAttributePipe,
+                    ], template: "<div\n    class=\"row form-group\"\n    [class.no-gutters]=\"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) : 'sr-only', 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=\"ml-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                <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                <div class=\"input-group-append\">\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                <div\n                    *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                    class=\"invalid-feedback\">\n                    {{ GetErrorMessage() | async }}\n                </div>\n            </div>\n            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n            <div\n                #picker\n                *ngIf=\"_showselector\">\n                <div\n                    class=\"popover fade show position-absolute m-0\"\n                    role=\"tooltip\"\n                    *ngIf=\"_showselector\"\n                    [class.bs-popover-bottom]=\"GetPickerPosition() === TooltipPosition.bottom || GetPickerPosition() === TooltipPosition.bottomend\"\n                    [class.bs-popover-top]=\"GetPickerPosition() === TooltipPosition.top || GetPickerPosition() === TooltipPosition.topend\"\n                    [style.left.px]=\"posPopupLeft\"\n                    [style.top.px]=\"posPopupTop\">\n                    <div\n                        #pickerarrow\n                        class=\"arrow position-absolute m-0\"\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                            [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 ml-2 mr-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.ChangeDetectorRef }]; } });
-// #endregion Classes
-// #region Variables
-/**
- * Referenz auf Moment.JS
- */
-const moment = moment_['default'];
 
 /**
  * Date und Time Komponente
@@ -1075,7 +1080,7 @@ class SacDateTimeComponent extends SacDateTimeCommon {
                 multi: true,
                 useExisting: forwardRef(() => SacDateTimeComponent),
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"row form-group\"\n    [class.no-gutters]=\"disablelabel\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', 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=\"ml-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                <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                <div class=\"input-group-append\">\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                <div\n                    *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                    class=\"invalid-feedback\">\n                    {{ GetErrorMessage() | async }}\n                </div>\n            </div>\n            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n\n            <div\n                #picker\n                *ngIf=\"_showselector\"\n                ><div\n                    class=\"popover fade show position-absolute m-0\"\n                    role=\"tooltip\"\n                    [class.bs-popover-bottom]=\"GetPickerPosition() == TooltipPosition.bottom || GetPickerPosition() == TooltipPosition.bottomend\"\n                    [class.bs-popover-top]=\"GetPickerPosition() == TooltipPosition.top || GetPickerPosition() == TooltipPosition.topend\"\n                    [style.left.px]=\"posPopupLeft\"\n                    [style.top.px]=\"posPopupTop\">\n                    <div\n                        #pickerarrow\n                        class=\"arrow position-absolute m-0\"\n                        style=\"left: unset\"\n                        [style.top.px]=\"posArrowTop\"\n                        [style.left.px]=\"posArrowLeft\">\n                    </div>\n                    <div class=\"popover-body\">\n                        <sac-dateselector\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 ml-2 mr-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: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelHeightPipe, name: "toLabelHeight" }, { kind: "pipe", type: SacToControlHeightPipe, name: "toControlHeight" }, { kind: "component", type: SacTooltipComponent, selector: "sac-tooltip" }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"row form-group\"\n    [class.no-gutters]=\"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) : 'sr-only', 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=\"ml-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                <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                <div class=\"input-group-append\">\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                <div\n                    *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                    class=\"invalid-feedback\">\n                    {{ GetErrorMessage() | async }}\n                </div>\n            </div>\n            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n\n            <div\n                #picker\n                *ngIf=\"_showselector\"\n                ><div\n                    class=\"popover fade show position-absolute m-0\"\n                    role=\"tooltip\"\n                    [class.bs-popover-bottom]=\"GetPickerPosition() === TooltipPosition.bottom || GetPickerPosition() === TooltipPosition.bottomend\"\n                    [class.bs-popover-top]=\"GetPickerPosition() === TooltipPosition.top || GetPickerPosition() === TooltipPosition.topend\"\n                    [style.left.px]=\"posPopupLeft\"\n                    [style.top.px]=\"posPopupTop\">\n                    <div\n                        #pickerarrow\n                        class=\"arrow position-absolute m-0\"\n                        style=\"left: unset\"\n                        [style.top.px]=\"posArrowTop\"\n                        [style.left.px]=\"posArrowLeft\">\n                    </div>\n                    <div class=\"popover-body\">\n                        <sac-dateselector\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 ml-2 mr-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: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { 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,
@@ -1101,7 +1106,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         SacToLabelHeightPipe,
                         SacToControlHeightPipe,
                         SacTooltipComponent,
-                    ], template: "<div\n    class=\"row form-group\"\n    [class.no-gutters]=\"disablelabel\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', 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=\"ml-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                <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                <div class=\"input-group-append\">\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                <div\n                    *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                    class=\"invalid-feedback\">\n                    {{ GetErrorMessage() | async }}\n                </div>\n            </div>\n            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n\n            <div\n                #picker\n                *ngIf=\"_showselector\"\n                ><div\n                    class=\"popover fade show position-absolute m-0\"\n                    role=\"tooltip\"\n                    [class.bs-popover-bottom]=\"GetPickerPosition() == TooltipPosition.bottom || GetPickerPosition() == TooltipPosition.bottomend\"\n                    [class.bs-popover-top]=\"GetPickerPosition() == TooltipPosition.top || GetPickerPosition() == TooltipPosition.topend\"\n                    [style.left.px]=\"posPopupLeft\"\n                    [style.top.px]=\"posPopupTop\">\n                    <div\n                        #pickerarrow\n                        class=\"arrow position-absolute m-0\"\n                        style=\"left: unset\"\n                        [style.top.px]=\"posArrowTop\"\n                        [style.left.px]=\"posArrowLeft\">\n                    </div>\n                    <div class=\"popover-body\">\n                        <sac-dateselector\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 ml-2 mr-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" }]
+                        SacTestingAttributePipe,
+                    ], template: "<div\n    class=\"row form-group\"\n    [class.no-gutters]=\"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) : 'sr-only', 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=\"ml-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                <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                <div class=\"input-group-append\">\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                <div\n                    *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                    class=\"invalid-feedback\">\n                    {{ GetErrorMessage() | async }}\n                </div>\n            </div>\n            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n\n            <div\n                #picker\n                *ngIf=\"_showselector\"\n                ><div\n                    class=\"popover fade show position-absolute m-0\"\n                    role=\"tooltip\"\n                    [class.bs-popover-bottom]=\"GetPickerPosition() === TooltipPosition.bottom || GetPickerPosition() === TooltipPosition.bottomend\"\n                    [class.bs-popover-top]=\"GetPickerPosition() === TooltipPosition.top || GetPickerPosition() === TooltipPosition.topend\"\n                    [style.left.px]=\"posPopupLeft\"\n                    [style.top.px]=\"posPopupTop\">\n                    <div\n                        #pickerarrow\n                        class=\"arrow position-absolute m-0\"\n                        style=\"left: unset\"\n                        [style.top.px]=\"posArrowTop\"\n                        [style.left.px]=\"posArrowLeft\">\n                    </div>\n                    <div class=\"popover-body\">\n                        <sac-dateselector\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 ml-2 mr-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
                 }, {
@@ -1135,7 +1141,7 @@ class SacTimeComponent extends SacTimeCommon {
                 multi: true,
                 useExisting: forwardRef(() => SacTimeComponent),
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"row form-group\"\n    [class.no-gutters]=\"disablelabel\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', 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=\"ml-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                <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                <div class=\"input-group-append\">\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                <div\n                    *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                    class=\"invalid-feedback\">\n                    {{ GetErrorMessage() | async }}\n                </div>\n            </div>\n            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n            <div\n                #picker\n                *ngIf=\"_showselector\">\n                <div\n                    class=\"popover fade show position-absolute m-0\"\n                    role=\"tooltip\"\n                    [class.bs-popover-bottom]=\"GetPickerPosition() == TooltipPosition.bottom || GetPickerPosition() == TooltipPosition.bottomend\"\n                    [class.bs-popover-top]=\"GetPickerPosition() == TooltipPosition.top || GetPickerPosition() == TooltipPosition.topend\"\n                    [style.left.px]=\"posPopupLeft\"\n                    [style.top.px]=\"posPopupTop\">\n                    <div\n                        #pickerarrow\n                        class=\"arrow position-absolute m-0\"\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                            [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 ml-2 mr-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: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelHeightPipe, name: "toLabelHeight" }, { kind: "pipe", type: SacToControlHeightPipe, name: "toControlHeight" }, { kind: "component", type: SacTooltipComponent, selector: "sac-tooltip" }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"row form-group\"\n    [class.no-gutters]=\"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) : 'sr-only', 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=\"ml-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                <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                <div class=\"input-group-append\">\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                <div\n                    *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                    class=\"invalid-feedback\">\n                    {{ GetErrorMessage() | async }}\n                </div>\n            </div>\n            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n            <div\n                #picker\n                *ngIf=\"_showselector\">\n                <div\n                    class=\"popover fade show position-absolute m-0\"\n                    role=\"tooltip\"\n                    [class.bs-popover-bottom]=\"GetPickerPosition() === TooltipPosition.bottom || GetPickerPosition() === TooltipPosition.bottomend\"\n                    [class.bs-popover-top]=\"GetPickerPosition() === TooltipPosition.top || GetPickerPosition() === TooltipPosition.topend\"\n                    [style.left.px]=\"posPopupLeft\"\n                    [style.top.px]=\"posPopupTop\">\n                    <div\n                        #pickerarrow\n                        class=\"arrow position-absolute m-0\"\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                            [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 ml-2 mr-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: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { 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,
@@ -1161,7 +1167,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         SacToLabelHeightPipe,
                         SacToControlHeightPipe,
                         SacTooltipComponent,
-                    ], template: "<div\n    class=\"row form-group\"\n    [class.no-gutters]=\"disablelabel\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', 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=\"ml-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                <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                <div class=\"input-group-append\">\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                <div\n                    *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                    class=\"invalid-feedback\">\n                    {{ GetErrorMessage() | async }}\n                </div>\n            </div>\n            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n            <div\n                #picker\n                *ngIf=\"_showselector\">\n                <div\n                    class=\"popover fade show position-absolute m-0\"\n                    role=\"tooltip\"\n                    [class.bs-popover-bottom]=\"GetPickerPosition() == TooltipPosition.bottom || GetPickerPosition() == TooltipPosition.bottomend\"\n                    [class.bs-popover-top]=\"GetPickerPosition() == TooltipPosition.top || GetPickerPosition() == TooltipPosition.topend\"\n                    [style.left.px]=\"posPopupLeft\"\n                    [style.top.px]=\"posPopupTop\">\n                    <div\n                        #pickerarrow\n                        class=\"arrow position-absolute m-0\"\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                            [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 ml-2 mr-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" }]
+                        SacTestingAttributePipe,
+                    ], template: "<div\n    class=\"row form-group\"\n    [class.no-gutters]=\"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) : 'sr-only', 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=\"ml-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                <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                <div class=\"input-group-append\">\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                <div\n                    *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                    class=\"invalid-feedback\">\n                    {{ GetErrorMessage() | async }}\n                </div>\n            </div>\n            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n            <div\n                #picker\n                *ngIf=\"_showselector\">\n                <div\n                    class=\"popover fade show position-absolute m-0\"\n                    role=\"tooltip\"\n                    [class.bs-popover-bottom]=\"GetPickerPosition() === TooltipPosition.bottom || GetPickerPosition() === TooltipPosition.bottomend\"\n                    [class.bs-popover-top]=\"GetPickerPosition() === TooltipPosition.top || GetPickerPosition() === TooltipPosition.topend\"\n                    [style.left.px]=\"posPopupLeft\"\n                    [style.top.px]=\"posPopupTop\">\n                    <div\n                        #pickerarrow\n                        class=\"arrow position-absolute m-0\"\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                            [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 ml-2 mr-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
                 }, {
@@ -1351,6 +1358,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
@@ -1366,7 +1374,7 @@ class SacPagingComponent extends SacPagingCommon {
                 multi: true,
                 useExisting: forwardRef(() => SacPagingComponent),
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"d-flex justify-content-between align-items-center flex-wrap\"\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-control form-control-sm\"\n                style=\"width: 85px\"\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=\"ml-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" }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\"\n    class=\"d-flex justify-content-between align-items-center flex-wrap\"\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-control form-control-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=\"ml-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,
@@ -1377,13 +1385,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             multi: true,
                             useExisting: forwardRef(() => SacPagingComponent),
                         },
-                    ], standalone: true, imports: [
-                        NgClass,
-                        NgFor,
-                        NgIf,
-                        FormsModule,
-                        AsyncPipe,
-                    ], template: "<div\n    class=\"d-flex justify-content-between align-items-center flex-wrap\"\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-control form-control-sm\"\n                style=\"width: 85px\"\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=\"ml-2\">{{ PageSizeText | async }}</div>\n        </div>\n    </div>\n</div>\n" }]
+                    ], standalone: true, imports: [NgClass, NgFor, NgIf, FormsModule, AsyncPipe, SacTestingAttributePipe], template: "<div\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\"\n    class=\"d-flex justify-content-between align-items-center flex-wrap\"\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-control form-control-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=\"ml-2\">{{ PageSizeText | async }}</div>\n        </div>\n    </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i0.Injector }]; } });
 
 /**
@@ -1398,6 +1400,7 @@ class SacGridComponent extends SacGridCommon {
      */
     constructor(cdRef, injector) {
         super(cdRef, injector);
+        // #region Properties
         /**
          * Setzt die Ellipsis Funktion auf der Column
          */
@@ -1411,7 +1414,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\">\n  <table class=\"table table-striped table-hover\" id=\"{{name}}\">\n    <thead class=\"thead-light\">\n      <tr>\n        <ng-container\n          *ngTemplateOutlet=\"template; context { row: {}, type: 'header'}\"\n        >\n        </ng-container>\n      </tr>\n    </thead>\n    <tbody>\n      <ng-container *ngFor=\"let item of value; let i=index\">\n        <tr>\n          <ng-container\n            *ngTemplateOutlet=\"template; context { row: item, type: 'body'}\"\n          >\n          </ng-container>\n        </tr>\n      </ng-container>\n      <tr\n        *ngIf=\"value === undefined || value === null || value.length===0\"\n        data-e2e=\"emptyrow\"\n      >\n        <td [attr.colspan]=\"ColumnCount\">{{emptytext}}</td>\n      </tr>\n    </tbody>\n    <tfoot *ngIf=\"pagerdata\">\n      <tr>\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\"\n            ></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" }] }); }
+        ], 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>\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,
@@ -1422,7 +1425,7 @@ 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\">\n  <table class=\"table table-striped table-hover\" id=\"{{name}}\">\n    <thead class=\"thead-light\">\n      <tr>\n        <ng-container\n          *ngTemplateOutlet=\"template; context { row: {}, type: 'header'}\"\n        >\n        </ng-container>\n      </tr>\n    </thead>\n    <tbody>\n      <ng-container *ngFor=\"let item of value; let i=index\">\n        <tr>\n          <ng-container\n            *ngTemplateOutlet=\"template; context { row: item, type: 'body'}\"\n          >\n          </ng-container>\n        </tr>\n      </ng-container>\n      <tr\n        *ngIf=\"value === undefined || value === null || value.length===0\"\n        data-e2e=\"emptyrow\"\n      >\n        <td [attr.colspan]=\"ColumnCount\">{{emptytext}}</td>\n      </tr>\n    </tbody>\n    <tfoot *ngIf=\"pagerdata\">\n      <tr>\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\"\n            ></sac-paging>\n          </div>\n        </td>\n      </tr>\n    </tfoot>\n  </table>\n</div>\n" }]
+                    ], 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>\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 }]
@@ -1432,43 +1435,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Grid Action Button
  */
 class SacGridButtonComponent extends SacGridButtonCommon {
-    // #region Public Methods
+    // #region Constructors
     /**
-     * Returns the icon for the button
-     */
-    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>\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>\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
  */
 class SacGridColumnComponent extends SacGridColumnCommon {
+    // #region Constructors
     /**
      * Konstruktor
      * @param grid Grid Referenz
@@ -1483,7 +1471,7 @@ class SacGridColumnComponent extends SacGridColumnCommon {
                 provide: SacGridColumnBaseCommon,
                 useExisting: forwardRef(() => SacGridColumnComponent),
             },
-        ], usesInheritance: true, ngImport: i0, template: "<th\n    scope=\"col\"\n    *ngIf=\"IsHeader()\"\n    [style.width]=\"width\"\n    (click)=\"SortByColumn()\">\n    <span>{{ header }}</span>\n    <span\n        class=\"pl-2\"\n        [class]=\"IconSortUp\"\n        *ngIf=\"IsSortedColumn() && GetSortDirection() === 'asc'\"></span>\n    <span\n        class=\"pl-2\"\n        [class]=\"IconSortDown\"\n        *ngIf=\"IsSortedColumn() && GetSortDirection() === 'desc'\"></span>\n</th>\n<td\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    <span\n        [attr.title]=\"IsEllipsis() ? value : null\"\n        [innerHtml]=\"value\"></span>\n</td>\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    (click)=\"SortByColumn()\">\n    <span>{{ header }}</span>\n    <span\n        class=\"pl-2\"\n        [class]=\"IconSortUp\"\n        *ngIf=\"IsSortedColumn() && GetSortDirection() === 'asc'\"></span>\n    <span\n        class=\"pl-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\"></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,
@@ -1492,7 +1480,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             provide: SacGridColumnBaseCommon,
                             useExisting: forwardRef(() => SacGridColumnComponent),
                         },
-                    ], standalone: true, imports: [NgIf], template: "<th\n    scope=\"col\"\n    *ngIf=\"IsHeader()\"\n    [style.width]=\"width\"\n    (click)=\"SortByColumn()\">\n    <span>{{ header }}</span>\n    <span\n        class=\"pl-2\"\n        [class]=\"IconSortUp\"\n        *ngIf=\"IsSortedColumn() && GetSortDirection() === 'asc'\"></span>\n    <span\n        class=\"pl-2\"\n        [class]=\"IconSortDown\"\n        *ngIf=\"IsSortedColumn() && GetSortDirection() === 'desc'\"></span>\n</th>\n<td\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    <span\n        [attr.title]=\"IsEllipsis() ? value : null\"\n        [innerHtml]=\"value\"></span>\n</td>\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    (click)=\"SortByColumn()\">\n    <span>{{ header }}</span>\n    <span\n        class=\"pl-2\"\n        [class]=\"IconSortUp\"\n        *ngIf=\"IsSortedColumn() && GetSortDirection() === 'asc'\"></span>\n    <span\n        class=\"pl-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\"></span>\n</td>\n" }]
         }], ctorParameters: function () { return [{ type: SacGridComponent }, { type: i0.Injector }, { type: i0.ElementRef }]; } });
 
 /**
@@ -1514,7 +1502,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>\n<td scope=\"col\" class=\"px-2\" *ngIf=\"IsBody()\">\n   <ng-content></ng-content>\n</td>\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    *ngIf=\"IsBody()\"\n    [class.text-right]=\"alignment === 'right'\"\n    [class.text-center]=\"alignment === 'center'\">\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,
@@ -1523,33 +1511,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>\n<td scope=\"col\" class=\"px-2\" *ngIf=\"IsBody()\">\n   <ng-content></ng-content>\n</td>\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    *ngIf=\"IsBody()\"\n    [class.text-right]=\"alignment === 'right'\"\n    [class.text-center]=\"alignment === 'center'\">\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>\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>\n" }]
+            args: [{ selector: 'sac-gridimage', imports: [CommonModule], standalone: true, template: "<span><span [ngClass]=\"iconstyle\"></span></span>\n" }]
         }] });
 
 class SACBootstrap4GridModule {
@@ -1570,7 +1544,8 @@ class SACBootstrap4GridModule {
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SACBootstrap4GridModule, imports: [CommonModule,
             FormsModule,
             SacGridComponent,
-            SacPagingComponent] }); }
+            SacPagingComponent,
+            SacGridImageComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SACBootstrap4GridModule, decorators: [{
             type: NgModule,
@@ -1617,7 +1592,7 @@ class SacInputComponent extends SacInputCommon {
                 multi: true,
                 useExisting: forwardRef(() => SacInputComponent),
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"row form-group\"\n    [class.no-gutters]=\"disablelabel\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', 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=\"ml-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            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n\n            <div\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"invalid-feedback\">\n                {{ GetErrorMessage() | async }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ml-2 mr-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: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelHeightPipe, name: "toLabelHeight" }, { kind: "pipe", type: SacToControlHeightPipe, name: "toControlHeight" }, { kind: "component", type: SacTooltipComponent, selector: "sac-tooltip" }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"row form-group\"\n    [class.no-gutters]=\"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) : 'sr-only', 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=\"ml-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            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n\n            <div\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"invalid-feedback\">\n                {{ GetErrorMessage() | async }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ml-2 mr-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: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { 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,
@@ -1637,7 +1612,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         SacToLabelHeightPipe,
                         SacToControlHeightPipe,
                         SacTooltipComponent,
-                    ], template: "<div\n    class=\"row form-group\"\n    [class.no-gutters]=\"disablelabel\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', 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=\"ml-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            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n\n            <div\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"invalid-feedback\">\n                {{ GetErrorMessage() | async }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ml-2 mr-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" }]
+                        SacTestingAttributePipe,
+                    ], template: "<div\n    class=\"row form-group\"\n    [class.no-gutters]=\"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) : 'sr-only', 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=\"ml-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            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n\n            <div\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"invalid-feedback\">\n                {{ GetErrorMessage() | async }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ml-2 mr-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
                 }, {
@@ -1669,7 +1645,7 @@ class SacInputAreaComponent extends SacInputAreaCommon {
                 multi: true,
                 useExisting: forwardRef(() => SacInputAreaComponent),
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"form-group row\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', 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=\"ml-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            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n            <div\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"invalid-feedback\">\n                {{ GetErrorMessage() | async }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ml-2 mr-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: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelHeightPipe, name: "toLabelHeight" }, { kind: "pipe", type: SacToControlHeightPipe, name: "toControlHeight" }, { kind: "component", type: SacTooltipComponent, selector: "sac-tooltip" }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"form-group row\"\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) : 'sr-only', 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=\"ml-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            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n            <div\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"invalid-feedback\">\n                {{ GetErrorMessage() | async }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ml-2 mr-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: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { 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,
@@ -1693,7 +1669,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         SacToLabelHeightPipe,
                         SacToControlHeightPipe,
                         SacTooltipComponent,
-                    ], template: "<div class=\"form-group row\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', 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=\"ml-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            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n            <div\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"invalid-feedback\">\n                {{ GetErrorMessage() | async }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ml-2 mr-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" }]
+                        SacTestingAttributePipe,
+                    ], template: "<div\n    class=\"form-group row\"\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) : 'sr-only', 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=\"ml-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            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n            <div\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"invalid-feedback\">\n                {{ GetErrorMessage() | async }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ml-2 mr-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
                 }, {
@@ -1725,7 +1702,7 @@ class SacInputCurrencyComponent extends SacInputCurrencyCommon {
                 multi: true,
                 useExisting: forwardRef(() => SacInputCurrencyComponent),
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"row form-group\"\n    [class.no-gutters]=\"disablelabel\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', 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=\"ml-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                <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                <div class=\"input-group-append\">\n                    <span class=\"input-group-text\">{{ currency }}</span>\n                </div>\n\n                <div\n                    *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                    class=\"invalid-feedback\">\n                    {{ GetErrorMessage() | async }}\n                </div>\n            </div>\n            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ml-2 mr-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: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelHeightPipe, name: "toLabelHeight" }, { kind: "pipe", type: SacToControlHeightPipe, name: "toControlHeight" }, { kind: "component", type: SacTooltipComponent, selector: "sac-tooltip" }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"row form-group\"\n    [class.no-gutters]=\"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) : 'sr-only', 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=\"ml-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                <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                <div class=\"input-group-append\">\n                    <span class=\"input-group-text\">{{ currency }}</span>\n                </div>\n\n                <div\n                    *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                    class=\"invalid-feedback\">\n                    {{ GetErrorMessage() | async }}\n                </div>\n            </div>\n            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ml-2 mr-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: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { 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: SacInputCurrencyComponent, decorators: [{
             type: Component,
@@ -1749,7 +1726,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         SacToLabelHeightPipe,
                         SacToControlHeightPipe,
                         SacTooltipComponent,
-                    ], template: "<div\n    class=\"row form-group\"\n    [class.no-gutters]=\"disablelabel\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', 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=\"ml-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                <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                <div class=\"input-group-append\">\n                    <span class=\"input-group-text\">{{ currency }}</span>\n                </div>\n\n                <div\n                    *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                    class=\"invalid-feedback\">\n                    {{ GetErrorMessage() | async }}\n                </div>\n            </div>\n            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ml-2 mr-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" }]
+                        SacTestingAttributePipe,
+                    ], template: "<div\n    class=\"row form-group\"\n    [class.no-gutters]=\"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) : 'sr-only', 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=\"ml-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                <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                <div class=\"input-group-append\">\n                    <span class=\"input-group-text\">{{ currency }}</span>\n                </div>\n\n                <div\n                    *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                    class=\"invalid-feedback\">\n                    {{ GetErrorMessage() | async }}\n                </div>\n            </div>\n            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ml-2 mr-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
                 }, {
@@ -1781,7 +1759,7 @@ class SacInputDecimalComponent extends SacInputDecimalCommon {
                 multi: true,
                 useExisting: forwardRef(() => SacInputDecimalComponent),
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"row form-group\"\n    [class.no-gutters]=\"disablelabel\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', 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=\"ml-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            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n            <div\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"invalid-feedback\">\n                {{ GetErrorMessage() | async }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ml-2 mr-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: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelHeightPipe, name: "toLabelHeight" }, { kind: "pipe", type: SacToControlHeightPipe, name: "toControlHeight" }, { kind: "component", type: SacTooltipComponent, selector: "sac-tooltip" }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"row form-group\"\n    [class.no-gutters]=\"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) : 'sr-only', 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=\"ml-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            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n            <div\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"invalid-feedback\">\n                {{ GetErrorMessage() | async }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ml-2 mr-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: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { 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,
@@ -1805,7 +1783,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         SacToLabelHeightPipe,
                         SacToControlHeightPipe,
                         SacTooltipComponent,
-                    ], template: "<div\n    class=\"row form-group\"\n    [class.no-gutters]=\"disablelabel\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', 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=\"ml-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            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n            <div\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"invalid-feedback\">\n                {{ GetErrorMessage() | async }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ml-2 mr-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" }]
+                        SacTestingAttributePipe,
+                    ], template: "<div\n    class=\"row form-group\"\n    [class.no-gutters]=\"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) : 'sr-only', 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=\"ml-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            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n            <div\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"invalid-feedback\">\n                {{ GetErrorMessage() | async }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ml-2 mr-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
                 }, {
@@ -1837,7 +1816,7 @@ class SacInputEmailComponent extends SacInputEmailCommon {
                 multi: true,
                 useExisting: forwardRef(() => SacInputEmailComponent),
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"form-group row\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', 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=\"ml-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                <div class=\"input-group-prepend\">\n                    <span class=\"input-group-text\">@</span>\n                </div>\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                    [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            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ml-2 mr-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: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelHeightPipe, name: "toLabelHeight" }, { kind: "pipe", type: SacToControlHeightPipe, name: "toControlHeight" }, { kind: "component", type: SacTooltipComponent, selector: "sac-tooltip" }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"form-group row\"\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) : 'sr-only', 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=\"ml-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                <div class=\"input-group-prepend\">\n                    <span class=\"input-group-text\">@</span>\n                </div>\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            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ml-2 mr-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: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { 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,
@@ -1861,7 +1840,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         SacToLabelHeightPipe,
                         SacToControlHeightPipe,
                         SacTooltipComponent,
-                    ], template: "<div class=\"form-group row\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', 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=\"ml-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                <div class=\"input-group-prepend\">\n                    <span class=\"input-group-text\">@</span>\n                </div>\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                    [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            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ml-2 mr-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" }]
+                        SacTestingAttributePipe,
+                    ], template: "<div\n    class=\"form-group row\"\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) : 'sr-only', 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=\"ml-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                <div class=\"input-group-prepend\">\n                    <span class=\"input-group-text\">@</span>\n                </div>\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            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ml-2 mr-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
                 }, {
@@ -1893,7 +1873,7 @@ class SacInputIntegerComponent extends SacInputIntegerCommon {
                 multi: true,
                 useExisting: forwardRef(() => SacInputIntegerComponent),
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"form-group row\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', 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=\"ml-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            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n            <div\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"invalid-feedback\">\n                {{ GetErrorMessage() | async }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ml-2 mr-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: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelHeightPipe, name: "toLabelHeight" }, { kind: "pipe", type: SacToControlHeightPipe, name: "toControlHeight" }, { kind: "component", type: SacTooltipComponent, selector: "sac-tooltip" }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"form-group row\"\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) : 'sr-only', 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=\"ml-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            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n            <div\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"invalid-feedback\">\n                {{ GetErrorMessage() | async }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ml-2 mr-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: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { 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,
@@ -1917,7 +1897,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         SacToLabelHeightPipe,
                         SacToControlHeightPipe,
                         SacTooltipComponent,
-                    ], template: "<div class=\"form-group row\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', 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=\"ml-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            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n            <div\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"invalid-feedback\">\n                {{ GetErrorMessage() | async }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ml-2 mr-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" }]
+                        SacTestingAttributePipe,
+                    ], template: "<div\n    class=\"form-group row\"\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) : 'sr-only', 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=\"ml-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            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n            <div\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"invalid-feedback\">\n                {{ GetErrorMessage() | async }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ml-2 mr-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
                 }, {
@@ -1949,7 +1930,7 @@ class SacInputPasswordComponent extends SacInputPasswordCommon {
                 multi: true,
                 useExisting: forwardRef(() => SacInputPasswordComponent),
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"form-group row\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', 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=\"ml-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.is-invalid]=\"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                    [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                <div\n                    *ngIf=\"passwordeye\"\n                    class=\"input-group-append\">\n                    <a\n                        class=\"btn btn-outline-secondary\"\n                        (click)=\"onTogglePasswordEye()\"\n                        ><span [ngClass]=\"passwordeyevisible ? PasswordEyeVisibleIcon : PasswordEyeHiddenIcon\"></span>\n                    </a>\n                </div>\n                <div\n                    *ngIf=\"!passwordeye && isinlineerrorenabled && invalid && (dirty || touched)\"\n                    class=\"invalid-feedback\">\n                    {{ GetErrorMessage() | async }}\n                </div>\n            </div>\n            <div\n                *ngIf=\"passwordeye && isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"invalid-feedback\">\n                {{ GetErrorMessage() | async }}\n            </div>\n            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ml-2 mr-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: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelHeightPipe, name: "toLabelHeight" }, { kind: "pipe", type: SacToControlHeightPipe, name: "toControlHeight" }, { kind: "component", type: SacTooltipComponent, selector: "sac-tooltip" }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"form-group row\"\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) : 'sr-only', 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=\"ml-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.is-invalid]=\"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                <div\n                    *ngIf=\"passwordeye\"\n                    class=\"input-group-append\">\n                    <a\n                        class=\"btn btn-outline-secondary\"\n                        (click)=\"onTogglePasswordEye()\"\n                        ><span [ngClass]=\"passwordeyevisible ? PasswordEyeVisibleIcon : PasswordEyeHiddenIcon\"></span>\n                    </a>\n                </div>\n                <div\n                    *ngIf=\"!passwordeye && isinlineerrorenabled && invalid && (dirty || touched)\"\n                    class=\"invalid-feedback\">\n                    {{ GetErrorMessage() | async }}\n                </div>\n            </div>\n            <div\n                *ngIf=\"passwordeye && isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"invalid-feedback\">\n                {{ GetErrorMessage() | async }}\n            </div>\n            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ml-2 mr-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: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { 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,
@@ -1973,7 +1954,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         SacToLabelHeightPipe,
                         SacToControlHeightPipe,
                         SacTooltipComponent,
-                    ], template: "<div class=\"form-group row\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', 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=\"ml-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.is-invalid]=\"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                    [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                <div\n                    *ngIf=\"passwordeye\"\n                    class=\"input-group-append\">\n                    <a\n                        class=\"btn btn-outline-secondary\"\n                        (click)=\"onTogglePasswordEye()\"\n                        ><span [ngClass]=\"passwordeyevisible ? PasswordEyeVisibleIcon : PasswordEyeHiddenIcon\"></span>\n                    </a>\n                </div>\n                <div\n                    *ngIf=\"!passwordeye && isinlineerrorenabled && invalid && (dirty || touched)\"\n                    class=\"invalid-feedback\">\n                    {{ GetErrorMessage() | async }}\n                </div>\n            </div>\n            <div\n                *ngIf=\"passwordeye && isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"invalid-feedback\">\n                {{ GetErrorMessage() | async }}\n            </div>\n            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ml-2 mr-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" }]
+                        SacTestingAttributePipe,
+                    ], template: "<div\n    class=\"form-group row\"\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) : 'sr-only', 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=\"ml-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.is-invalid]=\"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                <div\n                    *ngIf=\"passwordeye\"\n                    class=\"input-group-append\">\n                    <a\n                        class=\"btn btn-outline-secondary\"\n                        (click)=\"onTogglePasswordEye()\"\n                        ><span [ngClass]=\"passwordeyevisible ? PasswordEyeVisibleIcon : PasswordEyeHiddenIcon\"></span>\n                    </a>\n                </div>\n                <div\n                    *ngIf=\"!passwordeye && isinlineerrorenabled && invalid && (dirty || touched)\"\n                    class=\"invalid-feedback\">\n                    {{ GetErrorMessage() | async }}\n                </div>\n            </div>\n            <div\n                *ngIf=\"passwordeye && isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"invalid-feedback\">\n                {{ GetErrorMessage() | async }}\n            </div>\n            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ml-2 mr-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
                 }, {
@@ -2005,7 +1987,7 @@ class SacInputSearchComponent extends SacInputSearchCommon {
                 multi: true,
                 useExisting: forwardRef(() => SacInputSearchComponent),
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"row form-group\"\n    [class.no-gutters]=\"disablelabel\">\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) : 'sr-only', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"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=\"ml-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                    [attr.maxlength]=\"maxtextlength\"\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\n                    [ngClass]=\"[componentHeight | toControlHeight]\"\n                    [disabled]=\"isdisabled\"\n                    [readonly]=\"readonly\" />\n                <div class=\"input-group-append\">\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.mr-2]=\"buttonmode === 'mixed'\"></i>\n                        <ng-container *ngIf=\"buttonmode === 'text' || buttonmode === 'mixed'\">{{ buttontext }}</ng-container>\n                    </button>\n                </div>\n            </div>\n            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ml-2 mr-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: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelHeightPipe, name: "toLabelHeight" }, { kind: "pipe", type: SacToControlHeightPipe, name: "toControlHeight" }, { kind: "component", type: SacTooltipComponent, selector: "sac-tooltip" }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"row form-group\"\n    [class.no-gutters]=\"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) : 'sr-only', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"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=\"ml-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                <div class=\"input-group-append\">\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.mr-2]=\"buttonmode === 'mixed'\"></i>\n                        <ng-container *ngIf=\"buttonmode === 'text' || buttonmode === 'mixed'\">{{ buttontext }}</ng-container>\n                    </button>\n                </div>\n            </div>\n            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ml-2 mr-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: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { 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,
@@ -2028,7 +2010,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         SacToLabelHeightPipe,
                         SacToControlHeightPipe,
                         SacTooltipComponent,
-                    ], template: "<div\n    class=\"row form-group\"\n    [class.no-gutters]=\"disablelabel\">\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) : 'sr-only', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"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=\"ml-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                    [attr.maxlength]=\"maxtextlength\"\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\n                    [ngClass]=\"[componentHeight | toControlHeight]\"\n                    [disabled]=\"isdisabled\"\n                    [readonly]=\"readonly\" />\n                <div class=\"input-group-append\">\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.mr-2]=\"buttonmode === 'mixed'\"></i>\n                        <ng-container *ngIf=\"buttonmode === 'text' || buttonmode === 'mixed'\">{{ buttontext }}</ng-container>\n                    </button>\n                </div>\n            </div>\n            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ml-2 mr-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" }]
+                        SacTestingAttributePipe,
+                    ], template: "<div\n    class=\"row form-group\"\n    [class.no-gutters]=\"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) : 'sr-only', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"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=\"ml-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                <div class=\"input-group-append\">\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.mr-2]=\"buttonmode === 'mixed'\"></i>\n                        <ng-container *ngIf=\"buttonmode === 'text' || buttonmode === 'mixed'\">{{ buttontext }}</ng-container>\n                    </button>\n                </div>\n            </div>\n            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ml-2 mr-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
                 }, {
@@ -2117,7 +2100,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
 
-// #region Classes
+// #region Exported Classes
+/**
+ * Direktive für Dropdown Option List
+ */
+class SacDropdownOptionDirective extends SacDropdownOptionCommon {
+    // #region Constructors
+    /**
+     * 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
+                }] }]; } });
 /**
  * Dropdown Komponente
  */
@@ -2145,7 +2153,7 @@ class SacDropdownComponent extends SacDropdownCommon {
                 multi: true,
                 useExisting: forwardRef(() => SacDropdownComponent),
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"row form-group\"\n    [class.no-gutters]=\"disablelabel\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', 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=\"ml-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-control\"\n                [class.is-invalid]=\"invalid && (dirty || touched)\"\n                [ngClass]=\"[componentHeight | toControlHeight]\"\n                (blur)=\"onTouch()\"\n                (change)=\"setValue(dropdownitem.value)\"\n                [disabled]=\"isdisabled\">\n                <option\n                    *ngIf=\"emptylabel !== ''\"\n                    [ngValue]=\"emptyvalue\">\n                    {{ emptylabel }}\n                </option>\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            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n            <div\n                class=\"invalid-feedback\"\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                {{ GetErrorMessage() | async }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ml-2 mr-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 }}\n</ng-template>\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 SacToLabelWidthCssPipe; }), name: "toLabelWidthCss" }, { kind: "pipe", type: i0.forwardRef(function () { return SacToControlWidthCssPipe; }), name: "toControlWidthCss" }, { kind: "pipe", type: i0.forwardRef(function () { return SacToLabelHeightPipe; }), name: "toLabelHeight" }, { kind: "pipe", type: i0.forwardRef(function () { return SacToControlHeightPipe; }), name: "toControlHeight" }, { kind: "component", type: i0.forwardRef(function () { return SacTooltipComponent; }), selector: "sac-tooltip" }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"row form-group\"\n    [class.no-gutters]=\"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) : 'sr-only', 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=\"ml-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-control\"\n                [class.is-invalid]=\"invalid && (dirty || touched)\"\n                [ngClass]=\"[componentHeight | toControlHeight]\"\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            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n            <div\n                class=\"invalid-feedback\"\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                {{ GetErrorMessage() | async }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ml-2 mr-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 SacToLabelWidthCssPipe; }), name: "toLabelWidthCss" }, { kind: "pipe", type: i0.forwardRef(function () { return SacToControlWidthCssPipe; }), name: "toControlWidthCss" }, { kind: "pipe", type: i0.forwardRef(function () { return SacToLabelHeightPipe; }), name: "toLabelHeight" }, { kind: "pipe", type: i0.forwardRef(function () { return SacToControlHeightPipe; }), name: "toControlHeight" }, { kind: "component", type: i0.forwardRef(function () { return SacTooltipComponent; }), selector: "sac-tooltip" }, { 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: [{
             type: Component,
@@ -2172,52 +2180,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         SacToLabelHeightPipe,
                         SacToControlHeightPipe,
                         SacTooltipComponent,
-                    ], template: "<div\n    class=\"row form-group\"\n    [class.no-gutters]=\"disablelabel\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', 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=\"ml-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-control\"\n                [class.is-invalid]=\"invalid && (dirty || touched)\"\n                [ngClass]=\"[componentHeight | toControlHeight]\"\n                (blur)=\"onTouch()\"\n                (change)=\"setValue(dropdownitem.value)\"\n                [disabled]=\"isdisabled\">\n                <option\n                    *ngIf=\"emptylabel !== ''\"\n                    [ngValue]=\"emptyvalue\">\n                    {{ emptylabel }}\n                </option>\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            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n            <div\n                class=\"invalid-feedback\"\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                {{ GetErrorMessage() | async }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ml-2 mr-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 }}\n</ng-template>\n" }]
+                        SacTestingAttributePipe,
+                    ], template: "<div\n    class=\"row form-group\"\n    [class.no-gutters]=\"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) : 'sr-only', 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=\"ml-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-control\"\n                [class.is-invalid]=\"invalid && (dirty || touched)\"\n                [ngClass]=\"[componentHeight | toControlHeight]\"\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            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n            <div\n                class=\"invalid-feedback\"\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                {{ GetErrorMessage() | async }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ml-2 mr-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.Renderer2 }, { type: i0.ElementRef }]; } });
+
+class SACBootstrap4DropdownModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SACBootstrap4DropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SACBootstrap4DropdownModule, imports: [CommonModule, SacDropdownComponent, SacDropdownOptionDirective], exports: [SacDropdownComponent, SacDropdownOptionDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SACBootstrap4DropdownModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SACBootstrap4DropdownModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, SacDropdownComponent, SacDropdownOptionDirective],
+                    exports: [SacDropdownComponent, SacDropdownOptionDirective],
+                }]
+        }] });
+
+// #region Exported Classes
 /**
- * Direktive für Dropdown Option List
+ * Option Item in Listbox
  */
-class SacDropdownOptionDirective extends SacDropdownOptionCommon {
+class SacListboxOptionDirective extends SacListboxOptionCommon {
     // #region Constructors
     /**
      * Konstruktor
-     * @param elementRef Referenz auf HTML DOM Element
+     * @param elementRef Referenz auf DOM Element
      * @param renderer Angular Rendering Engine
-     * @param dropdownList Referenz auf DropDown Komponente
+     * @param listbox Referenz auf Listbox Komponente
      */
-    constructor(elementRef, renderer, dropdownList) {
-        super(elementRef, renderer, dropdownList);
+    constructor(elementRef, renderer, listbox) {
+        super(elementRef, renderer, listbox);
     }
-    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 }); }
+    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: SacDropdownOptionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacListboxOptionDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[sacOption],option', standalone: true }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: SacDropdownComponent, decorators: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: SacListboxComponent, decorators: [{
                     type: Optional
                 }, {
                     type: Host
                 }] }]; } });
-
-class SACBootstrap4DropdownModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SACBootstrap4DropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SACBootstrap4DropdownModule, imports: [CommonModule, SacDropdownComponent, SacDropdownOptionDirective], exports: [SacDropdownComponent, SacDropdownOptionDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SACBootstrap4DropdownModule, imports: [CommonModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SACBootstrap4DropdownModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule, SacDropdownComponent, SacDropdownOptionDirective],
-                    exports: [SacDropdownComponent, SacDropdownOptionDirective],
-                }]
-        }] });
-
-// #region Classes
 /**
  * Listbox Komponente
  */
@@ -2243,7 +2252,7 @@ class SacListboxComponent extends SacListboxCommon {
                 multi: true,
                 useExisting: forwardRef(() => SacListboxComponent),
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"row form-group\"\n    [class.no-gutters]=\"disablelabel\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', 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=\"ml-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-control\"\n                [size]=\"rowsize\"\n                [class.is-invalid]=\"invalid && (dirty || touched)\"\n                [ngClass]=\"[componentHeight | toControlHeight]\"\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] }}\n                    </option>\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] }}\n                        </option>\n                    </optgroup>\n                </ng-container>\n            </select>\n            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n            <div\n                class=\"invalid-feedback\"\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                {{ GetErrorMessage() | async }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ml-2 mr-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 SacToLabelWidthCssPipe; }), name: "toLabelWidthCss" }, { kind: "pipe", type: i0.forwardRef(function () { return SacToControlWidthCssPipe; }), name: "toControlWidthCss" }, { kind: "pipe", type: i0.forwardRef(function () { return SacToLabelHeightPipe; }), name: "toLabelHeight" }, { kind: "pipe", type: i0.forwardRef(function () { return SacToControlHeightPipe; }), name: "toControlHeight" }, { kind: "component", type: i0.forwardRef(function () { return SacTooltipComponent; }), selector: "sac-tooltip" }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"row form-group\"\n    [class.no-gutters]=\"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) : 'sr-only', 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=\"ml-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-control\"\n                [size]=\"rowsize\"\n                [class.is-invalid]=\"invalid && (dirty || touched)\"\n                [ngClass]=\"[componentHeight | toControlHeight]\"\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] }}\n                        </option>\n                    </optgroup>\n                </ng-container>\n            </select>\n            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n            <div\n                class=\"invalid-feedback\"\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                {{ GetErrorMessage() | async }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ml-2 mr-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 SacToLabelWidthCssPipe; }), name: "toLabelWidthCss" }, { kind: "pipe", type: i0.forwardRef(function () { return SacToControlWidthCssPipe; }), name: "toControlWidthCss" }, { kind: "pipe", type: i0.forwardRef(function () { return SacToLabelHeightPipe; }), name: "toLabelHeight" }, { kind: "pipe", type: i0.forwardRef(function () { return SacToControlHeightPipe; }), name: "toControlHeight" }, { kind: "component", type: i0.forwardRef(function () { return SacTooltipComponent; }), selector: "sac-tooltip" }, { 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: [{
             type: Component,
@@ -2269,37 +2278,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         SacToLabelHeightPipe,
                         SacToControlHeightPipe,
                         SacTooltipComponent,
-                    ], template: "<div\n    class=\"row form-group\"\n    [class.no-gutters]=\"disablelabel\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', 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=\"ml-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-control\"\n                [size]=\"rowsize\"\n                [class.is-invalid]=\"invalid && (dirty || touched)\"\n                [ngClass]=\"[componentHeight | toControlHeight]\"\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] }}\n                    </option>\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] }}\n                        </option>\n                    </optgroup>\n                </ng-container>\n            </select>\n            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n            <div\n                class=\"invalid-feedback\"\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                {{ GetErrorMessage() | async }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ml-2 mr-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" }]
+                        SacTestingAttributePipe,
+                    ], template: "<div\n    class=\"row form-group\"\n    [class.no-gutters]=\"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) : 'sr-only', 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=\"ml-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-control\"\n                [size]=\"rowsize\"\n                [class.is-invalid]=\"invalid && (dirty || touched)\"\n                [ngClass]=\"[componentHeight | toControlHeight]\"\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] }}\n                        </option>\n                    </optgroup>\n                </ng-container>\n            </select>\n            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n            <div\n                class=\"invalid-feedback\"\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                {{ GetErrorMessage() | async }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ml-2 mr-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 }]; } });
-/**
- * Option Item in Listbox
- */
-class SacListboxOptionDirective extends SacListboxOptionCommon {
-    // #region Constructors
-    /**
-     * Konstruktor
-     * @param elementRef Referenz auf DOM Element
-     * @param renderer Angular Rendering Engine
-     * @param listbox Referenz auf Listbox Komponente
-     */
-    constructor(elementRef, renderer, listbox) {
-        super(elementRef, renderer, listbox);
-    }
-    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 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: SacListboxComponent, decorators: [{
-                    type: Optional
-                }, {
-                    type: Host
-                }] }]; } });
 
 class SACBootstrap4ListModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SACBootstrap4ListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -2484,7 +2469,7 @@ class SacMultilanguageInputComponent extends SacMultilanguageInputCommon {
                 multi: true,
                 useExisting: forwardRef(() => SacMultilanguageInputComponent),
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"row form-group\"\n    [class.no-gutters]=\"disablelabel\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', 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=\"ml-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                <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                <div\n                    placement=\"bottom-right\"\n                    class=\"input-group-append\"\n                    sac-multilanguagemenu\n                    [buttontemplate]=\"menuButton\"\n                    #contextmenu>\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                    <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\n                <div\n                    *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                    class=\"invalid-feedback\">\n                    {{ GetErrorMessage() | async }}\n                </div>\n            </div>\n            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ml-2 mr-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]" }, { 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: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelHeightPipe, name: "toLabelHeight" }, { kind: "pipe", type: SacToControlHeightPipe, name: "toControlHeight" }, { kind: "component", type: SacTooltipComponent, selector: "sac-tooltip" }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"row form-group\"\n    [class.no-gutters]=\"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) : 'sr-only', 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=\"ml-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                <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                <div\n                    placement=\"bottom-right\"\n                    class=\"input-group-append\"\n                    sac-multilanguagemenu\n                    [buttontemplate]=\"menuButton\"\n                    #contextmenu>\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                    <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\n                <div\n                    *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                    class=\"invalid-feedback\">\n                    {{ GetErrorMessage() | async }}\n                </div>\n            </div>\n            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ml-2 mr-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]" }, { 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: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { 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,
@@ -2512,7 +2497,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         SacToLabelHeightPipe,
                         SacToControlHeightPipe,
                         SacTooltipComponent,
-                    ], template: "<div\n    class=\"row form-group\"\n    [class.no-gutters]=\"disablelabel\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', 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=\"ml-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                <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                <div\n                    placement=\"bottom-right\"\n                    class=\"input-group-append\"\n                    sac-multilanguagemenu\n                    [buttontemplate]=\"menuButton\"\n                    #contextmenu>\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                    <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\n                <div\n                    *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                    class=\"invalid-feedback\">\n                    {{ GetErrorMessage() | async }}\n                </div>\n            </div>\n            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ml-2 mr-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" }]
+                        SacTestingAttributePipe,
+                    ], template: "<div\n    class=\"row form-group\"\n    [class.no-gutters]=\"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) : 'sr-only', 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=\"ml-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                <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                <div\n                    placement=\"bottom-right\"\n                    class=\"input-group-append\"\n                    sac-multilanguagemenu\n                    [buttontemplate]=\"menuButton\"\n                    #contextmenu>\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                    <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\n                <div\n                    *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                    class=\"invalid-feedback\">\n                    {{ GetErrorMessage() | async }}\n                </div>\n            </div>\n            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ml-2 mr-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
                 }, {
@@ -2550,7 +2536,7 @@ class SacMultilanguageInputAreaComponent extends SacMultilanguageInputAreaCommon
                 multi: true,
                 useExisting: forwardRef(() => SacMultilanguageInputAreaComponent),
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"row form-group\"\n    [class.no-gutters]=\"disablelabel\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', 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=\"ml-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                <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\n                <div\n                    placement=\"bottom-right\"\n                    class=\"input-group-append\"\n                    sac-multilanguagemenu\n                    [buttontemplate]=\"menuButton\"\n                    #contextmenu>\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                    <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\n                <div\n                    *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                    class=\"invalid-feedback\">\n                    {{ GetErrorMessage() | async }}\n                </div>\n            </div>\n            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ml-2 mr-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]" }, { 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: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelHeightPipe, name: "toLabelHeight" }, { kind: "pipe", type: SacToControlHeightPipe, name: "toControlHeight" }, { kind: "component", type: SacTooltipComponent, selector: "sac-tooltip" }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"row form-group\"\n    [class.no-gutters]=\"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) : 'sr-only', 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=\"ml-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                <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\n                <div\n                    placement=\"bottom-right\"\n                    class=\"input-group-append\"\n                    sac-multilanguagemenu\n                    [buttontemplate]=\"menuButton\"\n                    #contextmenu>\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                    <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\n                <div\n                    *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                    class=\"invalid-feedback\">\n                    {{ GetErrorMessage() | async }}\n                </div>\n            </div>\n            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ml-2 mr-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]" }, { 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: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { 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,
@@ -2578,7 +2564,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         SacToLabelHeightPipe,
                         SacToControlHeightPipe,
                         SacTooltipComponent,
-                    ], template: "<div\n    class=\"row form-group\"\n    [class.no-gutters]=\"disablelabel\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', 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=\"ml-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                <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\n                <div\n                    placement=\"bottom-right\"\n                    class=\"input-group-append\"\n                    sac-multilanguagemenu\n                    [buttontemplate]=\"menuButton\"\n                    #contextmenu>\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                    <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\n                <div\n                    *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                    class=\"invalid-feedback\">\n                    {{ GetErrorMessage() | async }}\n                </div>\n            </div>\n            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ml-2 mr-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" }]
+                        SacTestingAttributePipe,
+                    ], template: "<div\n    class=\"row form-group\"\n    [class.no-gutters]=\"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) : 'sr-only', 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=\"ml-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                <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\n                <div\n                    placement=\"bottom-right\"\n                    class=\"input-group-append\"\n                    sac-multilanguagemenu\n                    [buttontemplate]=\"menuButton\"\n                    #contextmenu>\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                    <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\n                <div\n                    *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                    class=\"invalid-feedback\">\n                    {{ GetErrorMessage() | async }}\n                </div>\n            </div>\n            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ml-2 mr-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
                 }, {
@@ -2648,7 +2635,7 @@ class SacStaticFormContainerComponent extends SacStaticFormContainerCommon {
                 multi: true,
                 useExisting: forwardRef(() => SacStaticFormContainerComponent),
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"row form-group\"\n    [class.no-gutters]=\"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) : 'sr-only', 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=\"ml-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 }}\n            </label>\n            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n            <div\n                class=\"invalid-feedback\"\n                *ngIf=\"isinlineerrorenabled && isinvalid && errormessage\">\n                {{ errormessage }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ml-2 mr-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: SacToControlHeightPipe, name: "toControlHeight" }, { kind: "pipe", type: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelHeightPipe, name: "toLabelHeight" }, { kind: "component", type: SacTooltipComponent, selector: "sac-tooltip" }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"row form-group\"\n    [class.no-gutters]=\"disablelabel\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\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) : 'sr-only', 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=\"ml-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 }}\n            </label>\n            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n            <div\n                class=\"invalid-feedback\"\n                *ngIf=\"isinlineerrorenabled && isinvalid && errormessage\">\n                {{ errormessage }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ml-2 mr-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: SacToControlHeightPipe, name: "toControlHeight" }, { kind: "pipe", type: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { 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,
@@ -2671,7 +2658,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         SacToControlWidthCssPipe,
                         SacToLabelHeightPipe,
                         SacTooltipComponent,
-                    ], template: "<div\n    class=\"row form-group\"\n    [class.no-gutters]=\"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) : 'sr-only', 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=\"ml-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 }}\n            </label>\n            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n            <div\n                class=\"invalid-feedback\"\n                *ngIf=\"isinlineerrorenabled && isinvalid && errormessage\">\n                {{ errormessage }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ml-2 mr-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" }]
+                        SacTestingAttributePipe,
+                    ], template: "<div\n    class=\"row form-group\"\n    [class.no-gutters]=\"disablelabel\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\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) : 'sr-only', 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=\"ml-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 }}\n            </label>\n            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n            <div\n                class=\"invalid-feedback\"\n                *ngIf=\"isinlineerrorenabled && isinvalid && errormessage\">\n                {{ errormessage }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ml-2 mr-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
                 }, {
@@ -2703,7 +2691,7 @@ class SacStaticLabelComponent extends SacStaticLabelCommon {
                 multi: true,
                 useExisting: forwardRef(() => SacStaticLabelComponent),
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"row form-group\"\n    [class.no-gutters]=\"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) : 'sr-only', 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=\"ml-1\"></span> </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            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ml-2 mr-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: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelHeightPipe, name: "toLabelHeight" }, { kind: "pipe", type: SacToControlHeightPipe, name: "toControlHeight" }, { kind: "component", type: SacTooltipComponent, selector: "sac-tooltip" }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"row form-group\"\n    [class.no-gutters]=\"disablelabel\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\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) : 'sr-only', 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=\"ml-1\"></span> </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            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ml-2 mr-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: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { 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,
@@ -2726,7 +2714,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         SacToLabelHeightPipe,
                         SacToControlHeightPipe,
                         SacTooltipComponent,
-                    ], template: "<div\n    class=\"row form-group\"\n    [class.no-gutters]=\"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) : 'sr-only', 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=\"ml-1\"></span> </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            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ml-2 mr-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" }]
+                        SacTestingAttributePipe,
+                    ], template: "<div\n    class=\"row form-group\"\n    [class.no-gutters]=\"disablelabel\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\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) : 'sr-only', 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=\"ml-1\"></span> </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            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ml-2 mr-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
                 }, {
@@ -2768,6 +2757,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Komponente für Tabs
  */
 class SacTabComponent extends SacTabCommon {
+    // #endregion Properties
+    // #region Public Methods
     /**
      * Gibt die TabItems zurück
      * @returns Array von TabItems
@@ -2776,15 +2767,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 -->\n<div class=\"nav nav-tabs\" role=\"tablist\">\n  <a\n    *ngFor=\"let item of _tabItems\"\n    [id]=\"GetTabItemButtonId(item.id)\"\n    role=\"tab\"\n    class=\"nav-item nav-link active\"\n    data-toggle=\"tab\"\n    [ngClass]=\"{ 'active show': item.active, 'disabled': item.disabled }\"\n    (click)=\"selectTab(item)\"\n    [ngStyle]=\"{'cursor': item.disabled ? 'not-allowed' : 'pointer'}\"\n    >{{item.label}}</a\n  >\n</div>\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"] }] }); }
+    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<div\n    class=\"nav nav-tabs\"\n    role=\"tablist\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <a\n        *ngFor=\"let item of _tabItems\"\n        [id]=\"GetTabItemButtonId(item.id)\"\n        role=\"tab\"\n        class=\"nav-item nav-link active\"\n        data-toggle=\"tab\"\n        [ngClass]=\"{ 'active show': item.active, disabled: item.disabled }\"\n        (click)=\"selectTab(item)\"\n        [ngStyle]=\"{ cursor: item.disabled ? 'not-allowed' : 'pointer' }\"\n        >{{ item.label }}</a\n    >\n</div>\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 -->\n<div class=\"nav nav-tabs\" role=\"tablist\">\n  <a\n    *ngFor=\"let item of _tabItems\"\n    [id]=\"GetTabItemButtonId(item.id)\"\n    role=\"tab\"\n    class=\"nav-item nav-link active\"\n    data-toggle=\"tab\"\n    [ngClass]=\"{ 'active show': item.active, 'disabled': item.disabled }\"\n    (click)=\"selectTab(item)\"\n    [ngStyle]=\"{'cursor': item.disabled ? 'not-allowed' : 'pointer'}\"\n    >{{item.label}}</a\n  >\n</div>\n\n<!-- Tab panes -->\n<div class=\"tab-content pl-3 pt-2\">\n  <ng-content></ng-content>\n</div>\n" }]
+            args: [{ selector: 'sac-tab', standalone: true, imports: [NgFor, NgClass, NgStyle, SacTestingAttributePipe], template: "<!-- Nav tabs -->\n<div\n    class=\"nav nav-tabs\"\n    role=\"tablist\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <a\n        *ngFor=\"let item of _tabItems\"\n        [id]=\"GetTabItemButtonId(item.id)\"\n        role=\"tab\"\n        class=\"nav-item nav-link active\"\n        data-toggle=\"tab\"\n        [ngClass]=\"{ 'active show': item.active, disabled: item.disabled }\"\n        (click)=\"selectTab(item)\"\n        [ngStyle]=\"{ cursor: item.disabled ? 'not-allowed' : 'pointer' }\"\n        >{{ item.label }}</a\n    >\n</div>\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]
@@ -2842,7 +2829,7 @@ class SacTinyMceComponent extends SacTinyMceCommon {
                 useExisting: forwardRef(() => SacTinyMceComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"row form-group\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', 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=\"ml-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                [disabled]=\"disabled\"\n                [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n            </editor>\n            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n            <div\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"invalid-feedback\">\n                {{ GetErrorMessage() | async }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ml-2 mr-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<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", styles: [".is-invalid{border:1px solid var(--red)}\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: SacBrowserComponent, selector: "sac-filebrowser" }, { kind: "component", type: SacButtonComponent, selector: "sac-button" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelHeightPipe, name: "toLabelHeight" }, { kind: "component", type: SacTooltipComponent, selector: "sac-tooltip" }, { kind: "pipe", type: SacToControlHeightPipe, name: "toControlHeight" }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"row form-group\"\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) : 'sr-only', 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=\"ml-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)\">\n            </editor>\n            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n            <div\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"invalid-feedback\">\n                {{ GetErrorMessage() | async }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ml-2 mr-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<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", styles: [".is-invalid{border:1px solid var(--red)}::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: SacBrowserComponent, selector: "sac-filebrowser" }, { kind: "component", type: SacButtonComponent, selector: "sac-button" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { 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,
@@ -2871,7 +2858,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         SacToLabelHeightPipe,
                         SacTooltipComponent,
                         SacToControlHeightPipe,
-                    ], template: "<div class=\"row form-group\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', 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=\"ml-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                [disabled]=\"disabled\"\n                [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n            </editor>\n            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n            <div\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"invalid-feedback\">\n                {{ GetErrorMessage() | async }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ml-2 mr-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<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", styles: [".is-invalid{border:1px solid var(--red)}\n"] }]
+                        SacTestingAttributePipe,
+                    ], template: "<div\n    class=\"row form-group\"\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) : 'sr-only', 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=\"ml-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)\">\n            </editor>\n            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n            <div\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"invalid-feedback\">\n                {{ GetErrorMessage() | async }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ml-2 mr-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<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", styles: [".is-invalid{border:1px solid var(--red)}::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
                 }, {
@@ -2929,7 +2917,7 @@ class SacTreeviewComponent extends SacTreeviewCommon {
                 useExisting: forwardRef(() => SacTreeviewComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div\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) : 'sr-only', 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=\"ml-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.mr-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                <small\n                    *ngIf=\"helptextmode === 'text' && helptext\"\n                    class=\"form-text text-muted\">\n                    {{ helptext }}\n                </small>\n            </div>\n\n            <div\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n                class=\"form-control-plaintext align-self-top ml-2 mr-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=\"mr-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.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\">\n        {{ label }}\n    </span>\n</ng-template>\n\n<ng-template\n    #defaultTemplateIcon\n    let-node=\"node\">\n    <div\n        class=\"mr-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" }] }); }
+        ], 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) : 'sr-only', 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=\"ml-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.mr-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                <small\n                    *ngIf=\"helptextmode === 'text' && helptext\"\n                    class=\"form-text text-muted\">\n                    {{ helptext }}\n                </small>\n            </div>\n\n            <div\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n                class=\"form-control-plaintext align-self-top ml-2 mr-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=\"mr-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.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=\"mr-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,
@@ -2946,20 +2934,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         },
                     ], standalone: true, imports: [
                         NgIf,
-                        JsonPipe,
                         NgFor,
                         NgTemplateOutlet,
                         NgClass,
-                        SacContextmenuComponent,
-                        SacContextmenuItemButtonComponent,
-                        SacContextmenuItemSplitterComponent,
                         SacToLabelWidthCssPipe,
                         SacToLabelHeightPipe,
                         SacTooltipComponent,
                         SacToControlWidthCssPipe,
                         AsyncPipe,
                         SacToControlHeightPipe,
-                    ], template: "<div\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) : 'sr-only', 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=\"ml-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.mr-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                <small\n                    *ngIf=\"helptextmode === 'text' && helptext\"\n                    class=\"form-text text-muted\">\n                    {{ helptext }}\n                </small>\n            </div>\n\n            <div\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n                class=\"form-control-plaintext align-self-top ml-2 mr-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=\"mr-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.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\">\n        {{ label }}\n    </span>\n</ng-template>\n\n<ng-template\n    #defaultTemplateIcon\n    let-node=\"node\">\n    <div\n        class=\"mr-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" }]
+                        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) : 'sr-only', 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=\"ml-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.mr-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                <small\n                    *ngIf=\"helptextmode === 'text' && helptext\"\n                    class=\"form-text text-muted\">\n                    {{ helptext }}\n                </small>\n            </div>\n\n            <div\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n                class=\"form-control-plaintext align-self-top ml-2 mr-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=\"mr-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.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=\"mr-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
                 }, {
@@ -3015,7 +3000,7 @@ class SacDropzoneSingleComponent extends SacDropzoneSingleCommon {
                 multi: true,
                 useExisting: forwardRef(() => SacDropzoneSingleComponent),
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div\n    id=\"{{ name }}\"\n    class=\"row form-group\"\n    [class.no-gutters]=\"disablelabel\">\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) : 'sr-only', 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=\"ml-1\"></span> </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\"\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\"\n                    *ngIf=\"uploads.length > 0\">\n                    <div class=\"align-self-center 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                                <div class=\"input-group-append\">\n                                    <!-- image-preview-clear button -->\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                </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            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n            <div\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"invalid-feedback\">\n                {{ GetErrorMessage() | async }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ml-2 mr-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(--red)}.dropzone .content{position:absolute;inset:0}.dropzone .content .is-invalid{color:var(--red)}.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}\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: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelHeightPipe, name: "toLabelHeight" }, { kind: "component", type: SacTooltipComponent, selector: "sac-tooltip" }, { kind: "pipe", type: SacToControlHeightPipe, name: "toControlHeight" }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div\n    id=\"{{ name }}\"\n    class=\"row form-group\"\n    [class.no-gutters]=\"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) : 'sr-only', 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=\"ml-1\"></span> </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\"\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\"\n                    *ngIf=\"uploads.length > 0\">\n                    <div class=\"align-self-center 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                                <div class=\"input-group-append\">\n                                    <!-- image-preview-clear button -->\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                </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            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n            <div\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"invalid-feedback\">\n                {{ GetErrorMessage() | async }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ml-2 mr-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(--red)}.dropzone .content{position:absolute;inset:0}.dropzone .content .is-invalid{color:var(--red)}.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}\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: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { 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,
@@ -3040,7 +3025,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         SacToLabelHeightPipe,
                         SacTooltipComponent,
                         SacToControlHeightPipe,
-                    ], template: "<div\n    id=\"{{ name }}\"\n    class=\"row form-group\"\n    [class.no-gutters]=\"disablelabel\">\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) : 'sr-only', 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=\"ml-1\"></span> </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\"\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\"\n                    *ngIf=\"uploads.length > 0\">\n                    <div class=\"align-self-center 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                                <div class=\"input-group-append\">\n                                    <!-- image-preview-clear button -->\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                </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            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n            <div\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"invalid-feedback\">\n                {{ GetErrorMessage() | async }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ml-2 mr-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(--red)}.dropzone .content{position:absolute;inset:0}.dropzone .content .is-invalid{color:var(--red)}.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}\n"] }]
+                        SacTestingAttributePipe,
+                    ], template: "<div\n    id=\"{{ name }}\"\n    class=\"row form-group\"\n    [class.no-gutters]=\"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) : 'sr-only', 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=\"ml-1\"></span> </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\"\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\"\n                    *ngIf=\"uploads.length > 0\">\n                    <div class=\"align-self-center 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                                <div class=\"input-group-append\">\n                                    <!-- image-preview-clear button -->\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                </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            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n            <div\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"invalid-feedback\">\n                {{ GetErrorMessage() | async }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ml-2 mr-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(--red)}.dropzone .content{position:absolute;inset:0}.dropzone .content .is-invalid{color:var(--red)}.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}\n"] }]
         }], ctorParameters: function () { return [{ type: SacFormLayoutDirective, decorators: [{
                     type: Host
                 }, {
@@ -3075,7 +3061,7 @@ class SacUploadComponent extends SacUploadSingleCommon {
                 multi: true,
                 useExisting: forwardRef(() => SacUploadComponent),
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div\n    id=\"{{ name }}\"\n    class=\"row form-group\"\n    [class.no-gutters]=\"disablelabel\">\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) : 'sr-only', 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=\"ml-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                <div class=\"input-group-prepend\">\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=\"pr-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                <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                <!-- <input type=\"textimage-preview-filename\" class=\"form-control image-preview-filename\" disabled=\"disabled\"> --><!-- don't give a name === doesn't send on POST/GET -->\n                <div class=\"input-group-append\">\n                    <!-- image-preview-clear button -->\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 [ngClass]=\"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 [ngClass]=\"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 [ngClass]=\"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=\"pr-2\"></span\n                        >{{ buttonupload ? buttonupload : (lngResourceService.GetString(validationKeyService.UploadButtonUpload) | async) }}\n                    </button>\n                </div>\n            </div>\n            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n            <div\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"invalid-feedback\">\n                {{ GetErrorMessage() | async }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ml-2 mr-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}.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: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelHeightPipe, name: "toLabelHeight" }, { kind: "pipe", type: SacToControlHeightPipe, name: "toControlHeight" }, { kind: "component", type: SacTooltipComponent, selector: "sac-tooltip" }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div\n    id=\"{{ name }}\"\n    class=\"row form-group\"\n    [class.no-gutters]=\"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) : 'sr-only', 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=\"ml-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                <div class=\"input-group-prepend\">\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=\"pr-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                <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                <!-- <input type=\"textimage-preview-filename\" class=\"form-control image-preview-filename\" disabled=\"disabled\"> --><!-- don't give a name === doesn't send on POST/GET -->\n                <div class=\"input-group-append\">\n                    <!-- image-preview-clear button -->\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 [ngClass]=\"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 [ngClass]=\"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 [ngClass]=\"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=\"pr-2\"></span\n                        >{{ buttonupload ? buttonupload : (lngResourceService.GetString(validationKeyService.UploadButtonUpload) | async) }}\n                    </button>\n                </div>\n            </div>\n            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n            <div\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"invalid-feedback\">\n                {{ GetErrorMessage() | async }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ml-2 mr-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}.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: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { 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,
@@ -3099,7 +3085,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         SacToLabelHeightPipe,
                         SacToControlHeightPipe,
                         SacTooltipComponent,
-                    ], template: "<div\n    id=\"{{ name }}\"\n    class=\"row form-group\"\n    [class.no-gutters]=\"disablelabel\">\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) : 'sr-only', 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=\"ml-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                <div class=\"input-group-prepend\">\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=\"pr-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                <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                <!-- <input type=\"textimage-preview-filename\" class=\"form-control image-preview-filename\" disabled=\"disabled\"> --><!-- don't give a name === doesn't send on POST/GET -->\n                <div class=\"input-group-append\">\n                    <!-- image-preview-clear button -->\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 [ngClass]=\"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 [ngClass]=\"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 [ngClass]=\"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=\"pr-2\"></span\n                        >{{ buttonupload ? buttonupload : (lngResourceService.GetString(validationKeyService.UploadButtonUpload) | async) }}\n                    </button>\n                </div>\n            </div>\n            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n            <div\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"invalid-feedback\">\n                {{ GetErrorMessage() | async }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ml-2 mr-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}.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"] }]
+                        SacTestingAttributePipe,
+                    ], template: "<div\n    id=\"{{ name }}\"\n    class=\"row form-group\"\n    [class.no-gutters]=\"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) : 'sr-only', 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=\"ml-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                <div class=\"input-group-prepend\">\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=\"pr-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                <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                <!-- <input type=\"textimage-preview-filename\" class=\"form-control image-preview-filename\" disabled=\"disabled\"> --><!-- don't give a name === doesn't send on POST/GET -->\n                <div class=\"input-group-append\">\n                    <!-- image-preview-clear button -->\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 [ngClass]=\"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 [ngClass]=\"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 [ngClass]=\"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=\"pr-2\"></span\n                        >{{ buttonupload ? buttonupload : (lngResourceService.GetString(validationKeyService.UploadButtonUpload) | async) }}\n                    </button>\n                </div>\n            </div>\n            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text text-muted\">\n                {{ helptext }}\n            </small>\n            <div\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"invalid-feedback\">\n                {{ GetErrorMessage() | async }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ml-2 mr-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}.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
                 }, {
@@ -3134,7 +3121,7 @@ class SacUploadMultipleComponent extends SacUploadMultipleCommon {
                 multi: true,
                 useExisting: forwardRef(() => SacUploadMultipleComponent),
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div\n    id=\"{{ name }}\"\n    class=\"row form-group\"\n    [class.no-gutters]=\"disablelabel\">\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) : 'sr-only', 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=\"ml-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                            <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=\"pr-2\"></i>\n                                <span class=\"upload-browse\">{{\n                                    buttonbrowse ? buttonbrowse : (lngResourceService.GetString(validationKeyService.UploadButtonBrowse) | async)\n                                }}</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]=\"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 [ngClass]=\"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 [ngClass]=\"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 [ngClass]=\"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=\"pr-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 ml-2 mr-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            </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                    <div class=\"input-group-append\">\n                        <!-- image-preview-clear button -->\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=\"pr-2\"></span\n                            >{{ buttonupload ? buttonupload : (lngResourceService.GetString(validationKeyService.UploadButtonUpload) | async) }}\n                        </button>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <small\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"form-text text-muted\">\n            {{ helptext }}\n        </small>\n    </div>\n</div>\n", styles: [".upload-component .custom-file{height:100%}.upload-component .custom-file .custom-file-input{inset:0;position:absolute}.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: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelHeightPipe, name: "toLabelHeight" }, { kind: "pipe", type: SacToControlHeightPipe, name: "toControlHeight" }, { kind: "component", type: SacTooltipComponent, selector: "sac-tooltip" }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div\n    id=\"{{ name }}\"\n    class=\"row form-group\"\n    [class.no-gutters]=\"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) : 'sr-only', 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=\"ml-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                            <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=\"pr-2\"></i>\n                                <span class=\"upload-browse\">{{\n                                    buttonbrowse ? buttonbrowse : (lngResourceService.GetString(validationKeyService.UploadButtonBrowse) | async)\n                                }}</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]=\"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 [ngClass]=\"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 [ngClass]=\"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 [ngClass]=\"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=\"pr-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 ml-2 mr-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            </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                    <div class=\"input-group-append\">\n                        <!-- image-preview-clear button -->\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=\"pr-2\"></span\n                            >{{ buttonupload ? buttonupload : (lngResourceService.GetString(validationKeyService.UploadButtonUpload) | async) }}\n                        </button>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <small\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"form-text text-muted\">\n            {{ helptext }}\n        </small>\n    </div>\n</div>\n", styles: [".upload-component .custom-file{height:100%}.upload-component .custom-file .custom-file-input{inset:0;position:absolute}.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: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { 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: SacUploadMultipleComponent, decorators: [{
             type: Component,
@@ -3159,7 +3146,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         SacToLabelHeightPipe,
                         SacToControlHeightPipe,
                         SacTooltipComponent,
-                    ], template: "<div\n    id=\"{{ name }}\"\n    class=\"row form-group\"\n    [class.no-gutters]=\"disablelabel\">\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) : 'sr-only', 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=\"ml-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                            <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=\"pr-2\"></i>\n                                <span class=\"upload-browse\">{{\n                                    buttonbrowse ? buttonbrowse : (lngResourceService.GetString(validationKeyService.UploadButtonBrowse) | async)\n                                }}</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]=\"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 [ngClass]=\"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 [ngClass]=\"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 [ngClass]=\"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=\"pr-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 ml-2 mr-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            </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                    <div class=\"input-group-append\">\n                        <!-- image-preview-clear button -->\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=\"pr-2\"></span\n                            >{{ buttonupload ? buttonupload : (lngResourceService.GetString(validationKeyService.UploadButtonUpload) | async) }}\n                        </button>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <small\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"form-text text-muted\">\n            {{ helptext }}\n        </small>\n    </div>\n</div>\n", styles: [".upload-component .custom-file{height:100%}.upload-component .custom-file .custom-file-input{inset:0;position:absolute}.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"] }]
+                        SacTestingAttributePipe,
+                    ], template: "<div\n    id=\"{{ name }}\"\n    class=\"row form-group\"\n    [class.no-gutters]=\"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) : 'sr-only', 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=\"ml-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                            <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=\"pr-2\"></i>\n                                <span class=\"upload-browse\">{{\n                                    buttonbrowse ? buttonbrowse : (lngResourceService.GetString(validationKeyService.UploadButtonBrowse) | async)\n                                }}</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]=\"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 [ngClass]=\"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 [ngClass]=\"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 [ngClass]=\"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=\"pr-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 ml-2 mr-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            </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                    <div class=\"input-group-append\">\n                        <!-- image-preview-clear button -->\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=\"pr-2\"></span\n                            >{{ buttonupload ? buttonupload : (lngResourceService.GetString(validationKeyService.UploadButtonUpload) | async) }}\n                        </button>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <small\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"form-text text-muted\">\n            {{ helptext }}\n        </small>\n    </div>\n</div>\n", styles: [".upload-component .custom-file{height:100%}.upload-component .custom-file .custom-file-input{inset:0;position:absolute}.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
                 }, {
@@ -3220,7 +3208,7 @@ class SacValidationSummaryComponent extends SacValidationSummaryCommon {
                 multi: true,
                 useExisting: SacValidationSummaryComponent,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"alert alert-danger\" role=\"alert\" *ngIf=\"hasErrors\">\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" }] }); }
+        ], 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacValidationSummaryComponent, decorators: [{
             type: Component,
@@ -3230,7 +3218,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             multi: true,
                             useExisting: SacValidationSummaryComponent,
                         },
-                    ], standalone: true, imports: [NgIf, NgFor, AsyncPipe], template: "<div class=\"alert alert-danger\" role=\"alert\" *ngIf=\"hasErrors\">\n  <ul class=\"mb-0\">\n    <li *ngFor=\"let error of formErrors\">{{error | async}}</li>\n  </ul>\n</div>\n" }]
+                    ], 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
                 }, {