@simpleangularcontrols/sac-bootstrap5 10.0.0-rc.27 → 10.0.0-rc.29

package/bundles/simpleangularcontrols-sac-bootstrap5.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/common/http'), require('@angular/core'), require('@angular/forms'), require('@simpleangularcontrols/sac-common'), require('rxjs'), require('rxjs/operators'), require('angular-imask'), require('moment'), require('@tinymce/tinymce-angular')) :
-    typeof define === 'function' && define.amd ? define('@simpleangularcontrols/sac-bootstrap5', ['exports', '@angular/common', '@angular/common/http', '@angular/core', '@angular/forms', '@simpleangularcontrols/sac-common', 'rxjs', 'rxjs/operators', 'angular-imask', 'moment', '@tinymce/tinymce-angular'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.simpleangularcontrols = global.simpleangularcontrols || {}, global.simpleangularcontrols['sac-bootstrap5'] = {}), global.ng.common, global.ng.common.http, global.ng.core, global.ng.forms, global.sacCommon, global.rxjs, global.rxjs.operators, global.angularImask, global.moment, global.tinymceAngular));
-}(this, (function (exports, common, http, core, forms, sacCommon, rxjs, operators, angularImask, moment_, tinymceAngular) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/common/http'), require('@angular/core'), require('@angular/forms'), require('@simpleangularcontrols/sac-common'), require('rxjs'), require('rxjs/operators'), require('moment'), require('angular-imask'), require('@tinymce/tinymce-angular')) :
+    typeof define === 'function' && define.amd ? define('@simpleangularcontrols/sac-bootstrap5', ['exports', '@angular/common', '@angular/common/http', '@angular/core', '@angular/forms', '@simpleangularcontrols/sac-common', 'rxjs', 'rxjs/operators', 'moment', 'angular-imask', '@tinymce/tinymce-angular'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.simpleangularcontrols = global.simpleangularcontrols || {}, global.simpleangularcontrols['sac-bootstrap5'] = {}), global.ng.common, global.ng.common.http, global.ng.core, global.ng.forms, global.sacCommon, global.rxjs, global.rxjs.operators, global.moment, global.angularImask, global.tinymceAngular));
+}(this, (function (exports, common, http, core, forms, sacCommon, rxjs, operators, moment_, angularImask, tinymceAngular) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -531,7 +531,7 @@
     SacButtonComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-button',
-                    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 me-2\"\n    role=\"status\"\n    aria-hidden=\"true\"\n  ></span>\n  <i *ngIf=\"!isloading && icon !== ''\" [ngClass]=\"icon\" [class.me-2]=\"text\"></i\n  >{{text}}\n</button>\n"
+                    template: "<button\n    [id]=\"name\"\n    type=\"button\"\n    class=\"btn d-flex justify-content-center align-items-center\"\n    [attr.disabled]=\"_isdisabled || isloading ? 'disabled' : null\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\"\n    (click)=\"buttonClick()\"\n    [class.btn-primary]=\"role === 'primary'\"\n    [class.btn-secondary]=\"role === 'secondary' || role === 'default'\"\n    [class.btn-success]=\"role === 'success'\"\n    [class.btn-danger]=\"role === 'danger'\"\n    [class.btn-warning]=\"role === 'warning'\"\n    [class.btn-info]=\"role === 'info'\"\n    [class.btn-link]=\"role === 'link'\">\n    <span\n        *ngIf=\"isloading\"\n        class=\"spinner-border spinner-border-sm me-2\"\n        role=\"status\"\n        aria-hidden=\"true\"></span>\n    <i\n        *ngIf=\"!isloading && icon !== ''\"\n        [ngClass]=\"icon\"\n        [class.me-2]=\"text\"></i\n    >{{ text }}\n</button>\n"
                 },] }
     ];
 
@@ -543,10 +543,8 @@
     SACBootstrap5ButtonModule.decorators = [
         { type: core.NgModule, args: [{
                     declarations: [SacButtonComponent],
-                    imports: [
-                        common.CommonModule
-                    ],
-                    exports: [SacButtonComponent]
+                    imports: [common.CommonModule, sacCommon.SACCommonUtliltiesModule],
+                    exports: [SacButtonComponent],
                 },] }
     ];
 
@@ -555,6 +553,8 @@
      */
     var SacDialogComponent = /** @class */ (function (_super) {
         __extends(SacDialogComponent, _super);
+        // #endregion Properties
+        // #region Constructors
         /**
          * Konstruktor
          * @param el DOM Element Referenz
@@ -565,13 +565,8 @@
             _this.element = el.nativeElement;
             return _this;
         }
-        /**
-         * Event wenn Komponente initialisiert wird
-         */
-        SacDialogComponent.prototype.ngOnInit = function () {
-            // 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
          */
@@ -582,12 +577,19 @@
             }
             _super.prototype.ngOnDestroy.call(this);
         };
+        /**
+         * Event wenn Komponente initialisiert wird
+         */
+        SacDialogComponent.prototype.ngOnInit = function () {
+            // Element an Body für korrektes Styling unter Bootstrap 3 verschieben
+            document.body.appendChild(this.element);
+        };
         return SacDialogComponent;
     }(sacCommon.SacDialogCommon));
     SacDialogComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-dialog',
-                    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=\"btn-close\"\n          data-dismiss=\"modal\"\n          aria-label=\"Close\"\n          (click)=\"hide()\"\n          *ngIf=\"closebutton\"\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"
+                    template: "<div\n    #dialog\n    class=\"modal show\"\n    style=\"display: block\"\n    tabindex=\"-1\"\n    role=\"dialog\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\"\n    *ngIf=\"_show\">\n    <div\n        class=\"modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable\"\n        role=\"document\"\n        [class.modal-xl]=\"_size === 'extralarge'\"\n        [class.modal-lg]=\"_size === 'large'\"\n        [class.modal-sm]=\"_size === 'small'\">\n        <div class=\"modal-content\">\n            <div class=\"modal-header\">\n                <h5 class=\"modal-title\">{{ title }}</h5>\n                <button\n                    type=\"button\"\n                    class=\"btn-close\"\n                    data-dismiss=\"modal\"\n                    aria-label=\"Close\"\n                    (click)=\"hide()\"\n                    *ngIf=\"closebutton\"></button>\n            </div>\n            <div class=\"modal-body\">\n                <ng-content select=\"[dialogbody]\"></ng-content>\n            </div>\n            <div class=\"modal-footer\">\n                <ng-content select=\"[dialogfooter]\"></ng-content>\n            </div>\n        </div>\n        <!-- /.modal-content -->\n    </div>\n    <!-- /.modal-dialog -->\n</div>\n<!-- /.modal -->\n<div\n    class=\"modal-backdrop show\"\n    *ngIf=\"_show && backdrop\"\n    #backdrop></div>\n"
                 },] }
     ];
     SacDialogComponent.ctorParameters = function () { return [
@@ -603,10 +605,8 @@
     SACBootstrap5DialogModule.decorators = [
         { type: core.NgModule, args: [{
                     declarations: [SacDialogComponent],
-                    imports: [
-                        common.CommonModule
-                    ],
-                    exports: [SacDialogComponent]
+                    imports: [common.CommonModule, sacCommon.SACCommonUtliltiesModule],
+                    exports: [SacDialogComponent],
                 },] }
     ];
 
@@ -623,7 +623,7 @@
     SacConfirmComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-confirm',
-                    template: "<sac-dialog\n  name=\"confirmDialog\"\n  [(isvisible)]=\"isvisible\"\n  [title]=\"title\"\n  [allowesc]=\"false\"\n  [closebutton]=\"false\"\n  dialogsize=\"small\"\n>\n  <div dialogbody>\n    <div class=\"d-flex align-items-center\">\n      <div class=\"me-2\">\n        <img\n          [attr.src]=\"image\"\n          class=\"align-self-center mr-3\"\n          *ngIf=\"hasImage()\"\n        />\n      </div>\n      <div class=\"flex-grow-1\">{{message}}</div>\n    </div>\n  </div>\n  <ng-container dialogfooter>\n    <ng-container *ngFor=\"let button of buttons\">\n      <sac-button\n        [name]=\"button.key\"\n        [text]=\"button.text\"\n        [role]=\"button.role || 'default'\"\n        (clicked)=\"confirm(button.key)\"\n      ></sac-button>\n    </ng-container>\n  </ng-container>\n</sac-dialog>\n"
+                    template: "<sac-dialog\n    name=\"confirmDialog\"\n    [(isvisible)]=\"isvisible\"\n    [title]=\"title\"\n    [allowesc]=\"false\"\n    [closebutton]=\"false\"\n    dialogsize=\"small\">\n    <div dialogbody>\n        <div class=\"d-flex align-items-center\">\n            <div class=\"me-2\">\n                <img\n                    [attr.src]=\"image\"\n                    class=\"align-self-center mr-3\"\n                    *ngIf=\"hasImage()\" />\n            </div>\n            <div class=\"flex-grow-1\">{{ message }}</div>\n        </div>\n    </div>\n    <ng-container dialogfooter>\n        <ng-container *ngFor=\"let button of buttons\">\n            <sac-button\n                [name]=\"button.key\"\n                [text]=\"button.text\"\n                [role]=\"button.role || 'default'\"\n                (clicked)=\"confirm(button.key)\"></sac-button>\n        </ng-container>\n    </ng-container>\n</sac-dialog>\n"
                 },] }
     ];
 
@@ -778,7 +778,7 @@
     SacContextmenuComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-contextmenu',
-                    template: "<div class=\"dropdown\" [ngClass]=\"cssclass\">\n  <ng-container\n    [ngTemplateOutlet]=\"buttontemplate || defaultButtonTemplate\"\n  ></ng-container>\n\n  <ul\n    class=\"dropdown-menu dropdown-menu-end\"\n    sacContextMenuContainer\n    [class.show]=\"isopen\"\n  >\n    <ng-content></ng-content>\n  </ul>\n</div>\n\n<ng-template #defaultButtonTemplate>\n  <button\n    sacContextMenuAnchor\n    class=\"btn btn-sm btn-link text-secondary text-decoration-none\"\n    type=\"button\"\n    (click)=\"toggle()\"\n  >\n    <i [class]=\"IconContextMenu\"></i>\n  </button>\n</ng-template>\n"
+                    template: "<div\n    class=\"dropdown\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\"\n    [ngClass]=\"cssclass\">\n    <ng-container [ngTemplateOutlet]=\"buttontemplate || defaultButtonTemplate\"></ng-container>\n\n    <ul\n        class=\"dropdown-menu dropdown-menu-end\"\n        sacContextMenuContainer\n        [class.show]=\"isopen\">\n        <ng-content></ng-content>\n    </ul>\n</div>\n\n<ng-template #defaultButtonTemplate>\n    <button\n        sacContextMenuAnchor\n        class=\"btn btn-sm btn-link text-secondary text-decoration-none\"\n        type=\"button\"\n        (click)=\"toggle()\">\n        <i [class]=\"IconContextMenu\"></i>\n    </button>\n</ng-template>\n"
                 },] }
     ];
     SacContextmenuComponent.ctorParameters = function () { return [
@@ -789,57 +789,6 @@
         { type: core.Injector }
     ]; };
 
-    /**
-     * Component for menu entry in context menu
-     */
-    var SacContextmenuItemButtonComponent = /** @class */ (function (_super) {
-        __extends(SacContextmenuItemButtonComponent, _super);
-        // #region Constructors
-        /**
-         * Constructor
-         */
-        function SacContextmenuItemButtonComponent() {
-            return _super.call(this) || this;
-        }
-        return SacContextmenuItemButtonComponent;
-    }(sacCommon.SacContextmenuItemButtonCommon));
-    SacContextmenuItemButtonComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'sac-contextmenubutton',
-                    template: "<li>\n    <button\n        [id]=\"name\"\n        type=\"button\"\n        class=\"dropdown-item\"\n        (click)=\"callaction($event)\"\n        [class.disabled]=\"isdisabled\"\n        [ngClass]=\"cssclass\"\n        [attr.disabled]=\"isdisabled ? 'disabled' : null\">\n        <div class=\"d-flex\">\n            <div\n                *ngIf=\"!isicondisabled\"\n                style=\"min-width: 1.5rem\">\n                <img\n                    *ngIf=\"image\"\n                    [src]=\"image\"\n                    class=\"align-baseline\" />\n                <i\n                    *ngIf=\"icon\"\n                    [class]=\"iconstyle + ' ' + icon\"></i>\n            </div>\n            <div class=\"flex-grow-1\">{{ text }}</div>\n        </div>\n    </button>\n</li>\n",
-                    providers: [
-                        {
-                            provide: sacCommon.SacContextmenuItemCommon,
-                            useExisting: core.forwardRef(function () { return SacContextmenuItemButtonComponent; }),
-                        },
-                    ]
-                },] }
-    ];
-    SacContextmenuItemButtonComponent.ctorParameters = function () { return []; };
-
-    /**
-     * Splitter Komponente in Context Menü
-     */
-    var SacContextmenuItemSplitterComponent = /** @class */ (function (_super) {
-        __extends(SacContextmenuItemSplitterComponent, _super);
-        function SacContextmenuItemSplitterComponent() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        return SacContextmenuItemSplitterComponent;
-    }(sacCommon.SacContextmenuItemCommon));
-    SacContextmenuItemSplitterComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'sac-contextmenusplitter',
-                    template: "<li><div class=\"dropdown-divider\"></div></li>\n",
-                    providers: [
-                        {
-                            provide: sacCommon.SacContextmenuItemCommon,
-                            useExisting: core.forwardRef(function () { return SacContextmenuItemSplitterComponent; }),
-                        },
-                    ]
-                },] }
-    ];
-
     /**
      * Anker Komponente für Context Menü. Wird zum positionieren des Context Menü in der Page benötigt.
      */
@@ -900,6 +849,57 @@
         { type: core.ElementRef }
     ]; };
 
+    /**
+     * Component for menu entry in context menu
+     */
+    var SacContextmenuItemButtonComponent = /** @class */ (function (_super) {
+        __extends(SacContextmenuItemButtonComponent, _super);
+        // #region Constructors
+        /**
+         * Constructor
+         */
+        function SacContextmenuItemButtonComponent() {
+            return _super.call(this) || this;
+        }
+        return SacContextmenuItemButtonComponent;
+    }(sacCommon.SacContextmenuItemButtonCommon));
+    SacContextmenuItemButtonComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'sac-contextmenubutton',
+                    template: "<li>\n    <button\n        [id]=\"name\"\n        type=\"button\"\n        class=\"dropdown-item\"\n        (click)=\"callaction($event)\"\n        [class.disabled]=\"isdisabled\"\n        [ngClass]=\"cssclass\"\n        [attr.disabled]=\"isdisabled ? 'disabled' : null\">\n        <div class=\"d-flex\">\n            <div\n                *ngIf=\"!isicondisabled\"\n                style=\"min-width: 1.5rem\">\n                <img\n                    *ngIf=\"image\"\n                    [src]=\"image\"\n                    class=\"align-baseline\" />\n                <i\n                    *ngIf=\"icon\"\n                    [class]=\"iconstyle + ' ' + icon\"></i>\n            </div>\n            <div class=\"flex-grow-1\">{{ text }}</div>\n        </div>\n    </button>\n</li>\n",
+                    providers: [
+                        {
+                            provide: sacCommon.SacContextmenuItemCommon,
+                            useExisting: core.forwardRef(function () { return SacContextmenuItemButtonComponent; }),
+                        },
+                    ]
+                },] }
+    ];
+    SacContextmenuItemButtonComponent.ctorParameters = function () { return []; };
+
+    /**
+     * Splitter Komponente in Context Menü
+     */
+    var SacContextmenuItemSplitterComponent = /** @class */ (function (_super) {
+        __extends(SacContextmenuItemSplitterComponent, _super);
+        function SacContextmenuItemSplitterComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        return SacContextmenuItemSplitterComponent;
+    }(sacCommon.SacContextmenuItemCommon));
+    SacContextmenuItemSplitterComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'sac-contextmenusplitter',
+                    template: "<li><div class=\"dropdown-divider\"></div></li>\n",
+                    providers: [
+                        {
+                            provide: sacCommon.SacContextmenuItemCommon,
+                            useExisting: core.forwardRef(function () { return SacContextmenuItemSplitterComponent; }),
+                        },
+                    ]
+                },] }
+    ];
+
     var SACBootstrap5ContextmenuModule = /** @class */ (function () {
         function SACBootstrap5ContextmenuModule() {
         }
@@ -914,7 +914,7 @@
                         SacContextmenuAnchorDirective,
                         SacContextmenuContainerDirective,
                     ],
-                    imports: [common.CommonModule],
+                    imports: [common.CommonModule, sacCommon.SACCommonUtliltiesModule],
                     exports: [
                         SacContextmenuComponent,
                         SacContextmenuItemButtonComponent,
@@ -938,12 +938,15 @@
      */
     var SacFormDirective = /** @class */ (function (_super) {
         __extends(SacFormDirective, _super);
+        // #endregion Properties
+        // #region Constructors
         /**
          * Konstruktor
          * @param form Instanz von NgForm für eigene automatische Formular Logik
          */
         function SacFormDirective(form) {
             var _this = _super.call(this, form) || this;
+            // #region Properties
             /**
              * Setzt die Standard CSS Klasse für auf dem Form Container
              */
@@ -965,7 +968,23 @@
         cssClassForm: [{ type: core.HostBinding, args: ['class.form',] }]
     };
 
-    // #region Classes
+    // #region Exported Functions
+    /**
+     * Factory Methode für NgForm
+     * @param form NgForm
+     */
+    function NGFORM_FACTORY(form) {
+        return form;
+    }
+    /**
+     * Factory Methode für SacForm
+     * @param form SacFormular
+     */
+    function SACFORM_FACTORY(form) {
+        return form;
+    }
+    // #endregion Exported Functions
+    // #region Exported Classes
     /**
      * Directive to inherit an NgForm/NgForm from a parent component
      */
@@ -1002,23 +1021,7 @@
     SacInheritFormDirective.ctorParameters = function () { return [
         { type: core.Injector }
     ]; };
-    // #endregion Classes
-    // #region Functions
-    /**
-     * Factory Methode für NgForm
-     * @param form NgForm
-     */
-    function NGFORM_FACTORY(form) {
-        return form;
-    }
-    /**
-     * Factory Methode für SacForm
-     * @param form SacFormular
-     */
-    function SACFORM_FACTORY(form) {
-        return form;
-    }
-    // #endregion Functions
+    // #endregion Exported Classes
 
     var SACBootstrap5FormModule = /** @class */ (function () {
         function SACBootstrap5FormModule() {
@@ -1269,7 +1272,7 @@
     SacTooltipComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-tooltip',
-                    template: "<div [style.display]=\"inlinemode ? 'inline' : null\">\n    <div\n        #container\n        (mouseenter)=\"ShowTooltip()\"\n        (mouseleave)=\"HideTooltip()\"\n        [style.display]=\"inlinemode ? 'inline' : null\">\n        <ng-content></ng-content>\n    </div>\n    <div\n        *ngIf=\"IsTooltipVisible()\"\n        #tooltip>\n        <div\n            [class.show]=\"IsTooltipContentVisible\"\n            class=\"tooltip bs-tooltip-auto fade\"\n            style=\"position: absolute\"\n            [style.left.px]=\"LeftPos\"\n            [style.top.px]=\"TopPos\"\n            [class.top]=\"GetTooltipPosition() === TooltipPosition.top\"\n            [class.left]=\"GetTooltipPosition() === TooltipPosition.left\"\n            [class.right]=\"GetTooltipPosition() === TooltipPosition.right\"\n            [class.bottom]=\"GetTooltipPosition() === TooltipPosition.bottom\"\n            [attr.data-popper-placement]=\"\n                GetTooltipPosition() == TooltipPosition.right\n                    ? 'right'\n                    : GetTooltipPosition() == TooltipPosition.left\n                    ? 'left'\n                    : GetTooltipPosition() == TooltipPosition.top\n                    ? 'top'\n                    : GetTooltipPosition() == TooltipPosition.bottom\n                    ? 'bottom'\n                    : null\n            \">\n            <div\n                class=\"tooltip-arrow\"\n                style=\"position: absolute\"\n                [style.top.px]=\"posArrowTop\"\n                [style.left.px]=\"posArrowLeft\"></div>\n            <div class=\"tooltip-inner\">{{ tooltiptext }}</div>\n        </div>\n    </div>\n</div>\n"
+                    template: "<div\n    [style.display]=\"inlinemode ? 'inline' : null\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <div\n        #container\n        (mouseenter)=\"ShowTooltip()\"\n        (mouseleave)=\"HideTooltip()\"\n        [style.display]=\"inlinemode ? 'inline' : null\">\n        <ng-content></ng-content>\n    </div>\n    <div\n        *ngIf=\"IsTooltipVisible()\"\n        #tooltip>\n        <div\n            [class.show]=\"IsTooltipContentVisible\"\n            class=\"tooltip bs-tooltip-auto fade\"\n            style=\"position: absolute\"\n            [style.left.px]=\"LeftPos\"\n            [style.top.px]=\"TopPos\"\n            [class.top]=\"GetTooltipPosition() === TooltipPosition.top\"\n            [class.left]=\"GetTooltipPosition() === TooltipPosition.left\"\n            [class.right]=\"GetTooltipPosition() === TooltipPosition.right\"\n            [class.bottom]=\"GetTooltipPosition() === TooltipPosition.bottom\"\n            [attr.data-popper-placement]=\"\n                GetTooltipPosition() == TooltipPosition.right\n                    ? 'right'\n                    : GetTooltipPosition() == TooltipPosition.left\n                    ? 'left'\n                    : GetTooltipPosition() == TooltipPosition.top\n                    ? 'top'\n                    : GetTooltipPosition() == TooltipPosition.bottom\n                    ? 'bottom'\n                    : null\n            \">\n            <div\n                class=\"tooltip-arrow\"\n                style=\"position: absolute\"\n                [style.top.px]=\"posArrowTop\"\n                [style.left.px]=\"posArrowLeft\"></div>\n            <div class=\"tooltip-inner\">{{ tooltiptext }}</div>\n        </div>\n    </div>\n</div>\n"
                 },] }
     ];
     SacTooltipComponent.ctorParameters = function () { return [
@@ -1285,7 +1288,7 @@
     SACBootstrap5TooltipModule.decorators = [
         { type: core.NgModule, args: [{
                     declarations: [SacTooltipComponent],
-                    imports: [common.CommonModule],
+                    imports: [common.CommonModule, sacCommon.SACCommonUtliltiesModule],
                     exports: [SacTooltipComponent],
                 },] }
     ];
@@ -1320,7 +1323,7 @@
     SacDropzoneMultipleComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-dropzonemultiple',
-                    template: "<div\n    id=\"{{ name }}\"\n    class=\"row mb-3\"\n    [class.g-0]=\"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) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n            <div\n                class=\"dropzone d-flex justify-content-center position-relative\"\n                (drop)=\"dropHandler($event)\"\n                (dragover)=\"onDragOver($event)\"\n                (dragleave)=\"onDragLeave($event)\"\n                [class.active]=\"active\"\n                [style.min-height]=\"uploadheight\"\n                [class.is-invalid]=\"invalid && (dirty || touched)\">\n                <div\n                    class=\"content d-flex justify-content-center\"\n                    *ngIf=\"uploads.length === 0\">\n                    <div class=\"align-self-center text-center\">\n                        <div [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                            <ng-content></ng-content>\n                        </div>\n                    </div>\n                </div>\n                <div\n                    class=\"content d-flex justify-content-center align-items-center w-50 my-3\"\n                    *ngIf=\"uploads.length > 0\">\n                    <div class=\"flex-fill progress-container\">\n                        <div\n                            class=\"dropzone-uploadstates\"\n                            [class.mt-1]=\"i > 0\"\n                            *ngFor=\"let file of uploads; let i = index\">\n                            <div\n                                class=\"input-group upload-component upload-component-multiple\"\n                                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\n                                <div class=\"form-control upload-progress border-secondary\">\n                                    <div class=\"progress\">\n                                        <div\n                                            class=\"progress-bar\"\n                                            [class.progress-bar-success]=\"file.progress === 100\"\n                                            role=\"progressbar\"\n                                            [attr.aria-valuenow]=\"file.progress\"\n                                            aria-valuemin=\"0\"\n                                            aria-valuemax=\"100\"\n                                            [style.width.%]=\"file.progress\">\n                                            <span class=\"progress-text text-dark\">{{ file.name }}</span>\n                                        </div>\n                                    </div>\n                                </div>\n                                <a\n                                    class=\"btn\"\n                                    (click)=\"cancel(file.uploadId)\"\n                                    [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\n                                    [class.btn-danger]=\"invalid && (dirty || touched)\">\n                                    <span [class]=\"IconDelete\"></span>\n                                </a>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <input\n                    #files\n                    multiple\n                    id=\"{{ name }}_uploadinput\"\n                    type=\"file\"\n                    class=\"custom-file-input\"\n                    (click)=\"files.value = ''\"\n                    (uploadxState)=\"onUpload($event)\"\n                    [disabled]=\"HasQueueItem()\" />\n            </div>\n            <div\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"invalid-feedback\">\n                {{ GetErrorMessage() | async }}\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n",
+                    template: "<div\n    id=\"{{ name }}\"\n    class=\"row mb-3\"\n    [class.g-0]=\"disablelabel\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}_label\"\n        for=\"{{ name }}_uploadinput\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n            <div\n                class=\"dropzone d-flex justify-content-center position-relative\"\n                (drop)=\"dropHandler($event)\"\n                (dragover)=\"onDragOver($event)\"\n                (dragleave)=\"onDragLeave($event)\"\n                [class.active]=\"active\"\n                [style.min-height]=\"uploadheight\"\n                [class.is-invalid]=\"invalid && (dirty || touched)\">\n                <div\n                    class=\"content d-flex justify-content-center\"\n                    *ngIf=\"uploads.length === 0\">\n                    <div class=\"align-self-center text-center\">\n                        <div [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                            <ng-content></ng-content>\n                        </div>\n                    </div>\n                </div>\n                <div\n                    class=\"content d-flex justify-content-center align-items-center w-50 my-3\"\n                    *ngIf=\"uploads.length > 0\">\n                    <div class=\"flex-fill progress-container\">\n                        <div\n                            class=\"dropzone-uploadstates\"\n                            [class.mt-1]=\"i > 0\"\n                            *ngFor=\"let file of uploads; let i = index\">\n                            <div\n                                class=\"input-group upload-component upload-component-multiple\"\n                                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\n                                <div class=\"form-control upload-progress border-secondary\">\n                                    <div class=\"progress\">\n                                        <div\n                                            class=\"progress-bar\"\n                                            [class.progress-bar-success]=\"file.progress === 100\"\n                                            role=\"progressbar\"\n                                            [attr.aria-valuenow]=\"file.progress\"\n                                            aria-valuemin=\"0\"\n                                            aria-valuemax=\"100\"\n                                            [style.width.%]=\"file.progress\">\n                                            <span class=\"progress-text text-dark\">{{ file.name }}</span>\n                                        </div>\n                                    </div>\n                                </div>\n                                <a\n                                    class=\"btn\"\n                                    (click)=\"cancel(file.uploadId)\"\n                                    [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\n                                    [class.btn-danger]=\"invalid && (dirty || touched)\">\n                                    <span [class]=\"IconDelete\"></span>\n                                </a>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <input\n                    #files\n                    multiple\n                    id=\"{{ name }}_uploadinput\"\n                    type=\"file\"\n                    class=\"custom-file-input\"\n                    (click)=\"files.value = ''\"\n                    (uploadxState)=\"onUpload($event)\"\n                    [disabled]=\"HasQueueItem()\" />\n            </div>\n            <div\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"invalid-feedback\">\n                {{ GetErrorMessage() | async }}\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n",
                     providers: [
                         {
                             provide: forms.NG_VALUE_ACCESSOR,
@@ -1373,7 +1376,7 @@
     SacDropzoneSingleComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-dropzonesingle',
-                    template: "<div\n    id=\"{{ name }}\"\n    class=\"row mb-3\"\n    [class.g-0]=\"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) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n            <div\n                class=\"dropzone d-flex justify-content-center position-relative\"\n                (drop)=\"dropHandler($event)\"\n                (dragover)=\"onDragOver($event)\"\n                (dragleave)=\"onDragLeave($event)\"\n                [style.min-height]=\"uploadheight\"\n                [class.active]=\"active\"\n                [class.is-invalid]=\"invalid && (dirty || touched)\">\n                <div\n                    class=\"content d-flex justify-content-center position-relative\"\n                    *ngIf=\"uploads.length === 0\">\n                    <div class=\"align-self-center text-center\">\n                        <div [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                            <ng-content></ng-content>\n                        </div>\n                    </div>\n                </div>\n                <div\n                    class=\"content d-flex justify-content-center align-items-center w-50 my-3\"\n                    *ngIf=\"uploads.length > 0\">\n                    <div class=\"flex-fill progress-container\">\n                        <div\n                            class=\"dropzone-uploadstates\"\n                            *ngFor=\"let file of uploads\">\n                            <div\n                                class=\"input-group upload-component upload-component-multiple\"\n                                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\n                                <div class=\"form-control upload-progress border-secondary\">\n                                    <div class=\"progress\">\n                                        <div\n                                            class=\"progress-bar\"\n                                            [class.progress-bar-success]=\"file.progress === 100\"\n                                            role=\"progressbar\"\n                                            [attr.aria-valuenow]=\"file.progress\"\n                                            aria-valuemin=\"0\"\n                                            aria-valuemax=\"100\"\n                                            [style.width.%]=\"file.progress\">\n                                            <span class=\"progress-text text-dark\">{{ file.name }}</span>\n                                        </div>\n                                    </div>\n                                </div>\n                                <a\n                                    class=\"btn\"\n                                    (click)=\"cancel(file.uploadId)\"\n                                    [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\n                                    [class.btn-danger]=\"invalid && (dirty || touched)\">\n                                    <span [class]=\"IconDelete\"></span>\n                                </a>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <input\n                    #files\n                    id=\"{{ name }}_uploadinput\"\n                    type=\"file\"\n                    class=\"custom-file-input\"\n                    (click)=\"files.value = ''\"\n                    (uploadxState)=\"onUpload($event)\"\n                    [disabled]=\"HasQueueItem()\" />\n            </div>\n            <div\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"invalid-feedback\">\n                {{ GetErrorMessage() | async }}\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n",
+                    template: "<div\n    id=\"{{ name }}\"\n    class=\"row mb-3\"\n    [class.g-0]=\"disablelabel\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}_label\"\n        for=\"{{ name }}_uploadinput\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n            <div\n                class=\"dropzone d-flex justify-content-center position-relative\"\n                (drop)=\"dropHandler($event)\"\n                (dragover)=\"onDragOver($event)\"\n                (dragleave)=\"onDragLeave($event)\"\n                [style.min-height]=\"uploadheight\"\n                [class.active]=\"active\"\n                [class.is-invalid]=\"invalid && (dirty || touched)\">\n                <div\n                    class=\"content d-flex justify-content-center position-relative\"\n                    *ngIf=\"uploads.length === 0\">\n                    <div class=\"align-self-center text-center\">\n                        <div [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                            <ng-content></ng-content>\n                        </div>\n                    </div>\n                </div>\n                <div\n                    class=\"content d-flex justify-content-center align-items-center w-50 my-3\"\n                    *ngIf=\"uploads.length > 0\">\n                    <div class=\"flex-fill progress-container\">\n                        <div\n                            class=\"dropzone-uploadstates\"\n                            *ngFor=\"let file of uploads\">\n                            <div\n                                class=\"input-group upload-component upload-component-multiple\"\n                                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\n                                <div class=\"form-control upload-progress border-secondary\">\n                                    <div class=\"progress\">\n                                        <div\n                                            class=\"progress-bar\"\n                                            [class.progress-bar-success]=\"file.progress === 100\"\n                                            role=\"progressbar\"\n                                            [attr.aria-valuenow]=\"file.progress\"\n                                            aria-valuemin=\"0\"\n                                            aria-valuemax=\"100\"\n                                            [style.width.%]=\"file.progress\">\n                                            <span class=\"progress-text text-dark\">{{ file.name }}</span>\n                                        </div>\n                                    </div>\n                                </div>\n                                <a\n                                    class=\"btn\"\n                                    (click)=\"cancel(file.uploadId)\"\n                                    [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\n                                    [class.btn-danger]=\"invalid && (dirty || touched)\">\n                                    <span [class]=\"IconDelete\"></span>\n                                </a>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <input\n                    #files\n                    id=\"{{ name }}_uploadinput\"\n                    type=\"file\"\n                    class=\"custom-file-input\"\n                    (click)=\"files.value = ''\"\n                    (uploadxState)=\"onUpload($event)\"\n                    [disabled]=\"HasQueueItem()\" />\n            </div>\n            <div\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"invalid-feedback\">\n                {{ GetErrorMessage() | async }}\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n",
                     providers: [
                         {
                             provide: forms.NG_VALUE_ACCESSOR,
@@ -1418,7 +1421,7 @@
     SacUploadComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-upload',
-                    template: "<div\n    id=\"{{ name }}\"\n    class=\"row mb-3\"\n    [class.g-0]=\"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) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n            <div\n                class=\"input-group upload-component upload-single\"\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\n                [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                <!-- image-preview-input -->\n                <div\n                    class=\"btn upload-input custom-file\"\n                    [class.disabled]=\"HasQueueItem()\"\n                    [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\n                    [class.btn-danger]=\"invalid && (dirty || touched)\">\n                    <i\n                        class=\"pe-2\"\n                        [ngClass]=\"IconBrowse\"></i>\n                    <span class=\"upload-browse\">{{ buttonbrowse ? buttonbrowse : (lngResourceService.GetString(validationKeyService.UploadButtonBrowse) | async) }}</span>\n                    <input\n                        type=\"file\"\n                        id=\"{{ name }}_uploadinput\"\n                        class=\"custom-file-input\"\n                        #files\n                        (click)=\"files.value = ''\"\n                        (uploadxState)=\"onUpload($event)\"\n                        multiple\n                        [disabled]=\"HasQueueItem()\" />\n                </div>\n                <div\n                    class=\"form-control upload-progress\"\n                    [ngClass]=\"[componentHeight | toControlHeight]\"\n                    [class.is-invalid]=\"invalid && (dirty || touched)\">\n                    <div class=\"progress\">\n                        <div\n                            class=\"progress-bar\"\n                            [class.progress-bar-success]=\"Progress() === 100\"\n                            role=\"progressbar\"\n                            [attr.aria-valuenow]=\"Progress()\"\n                            aria-valuemin=\"0\"\n                            aria-valuemax=\"100\"\n                            [style.width.%]=\"Progress()\">\n                            <span class=\"progress-text text-dark\">{{ Filename() | async }}</span>\n                        </div>\n                    </div>\n                </div>\n\n                <button\n                    class=\"btn\"\n                    (click)=\"cancelAll()\"\n                    [attr.disabled]=\"HasQueueItem() === false ? 'disabled' : null\"\n                    [class.disabled]=\"HasQueueItem() === false ? 'disabled' : null\"\n                    [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\n                    [class.btn-danger]=\"invalid && (dirty || touched)\">\n                    <span [class]=\"IconDelete\"></span>\n                </button>\n                <button\n                    *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && IsPaused() === false)\"\n                    class=\"btn\"\n                    (click)=\"pauseAll()\"\n                    [attr.disabled]=\"IsUploading() === false ? 'disabled' : null\"\n                    [class.disabled]=\"IsUploading() === false ? 'disabled' : null\"\n                    [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\n                    [class.btn-danger]=\"invalid && (dirty || touched)\">\n                    <span [class]=\"IconPause\"></span>\n                </button>\n                <button\n                    *ngIf=\"autoupload && enablepause && IsPaused()\"\n                    class=\"btn\"\n                    (click)=\"uploadAll()\"\n                    [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\n                    [class.btn-danger]=\"invalid && (dirty || touched)\">\n                    <span [class]=\"IconContinue\"></span>\n                </button>\n                <button\n                    *ngIf=\"autoupload === false\"\n                    class=\"btn text-nowrap\"\n                    (click)=\"uploadAll()\"\n                    [attr.disabled]=\"IsStateToUpload() === false ? 'disabled' : null\"\n                    [class.disabled]=\"IsStateToUpload() === false ? 'disabled' : null\"\n                    [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\n                    [class.btn-danger]=\"invalid && (dirty || touched)\">\n                    <span\n                        [ngClass]=\"IconUpload\"\n                        class=\"pe-2\"></span\n                    >{{ buttonupload ? buttonupload : (lngResourceService.GetString(validationKeyService.UploadButtonUpload) | async) }}\n                </button>\n            </div>\n            <div\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"invalid-feedback\">\n                {{ GetErrorMessage() | async }}\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n",
+                    template: "<div\n    id=\"{{ name }}\"\n    class=\"row mb-3\"\n    [class.g-0]=\"disablelabel\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}_label\"\n        for=\"{{ name }}_uploadinput\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n            <div\n                class=\"input-group upload-component upload-single\"\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\n                [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                <!-- image-preview-input -->\n                <div\n                    class=\"btn upload-input custom-file\"\n                    [class.disabled]=\"HasQueueItem()\"\n                    [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\n                    [class.btn-danger]=\"invalid && (dirty || touched)\">\n                    <i\n                        class=\"pe-2\"\n                        [ngClass]=\"IconBrowse\"></i>\n                    <span class=\"upload-browse\">{{ buttonbrowse ? buttonbrowse : (lngResourceService.GetString(validationKeyService.UploadButtonBrowse) | async) }}</span>\n                    <input\n                        type=\"file\"\n                        id=\"{{ name }}_uploadinput\"\n                        class=\"custom-file-input\"\n                        #files\n                        (click)=\"files.value = ''\"\n                        (uploadxState)=\"onUpload($event)\"\n                        multiple\n                        [disabled]=\"HasQueueItem()\" />\n                </div>\n                <div\n                    class=\"form-control upload-progress\"\n                    [ngClass]=\"[componentHeight | toControlHeight]\"\n                    [class.is-invalid]=\"invalid && (dirty || touched)\">\n                    <div class=\"progress\">\n                        <div\n                            class=\"progress-bar\"\n                            [class.progress-bar-success]=\"Progress() === 100\"\n                            role=\"progressbar\"\n                            [attr.aria-valuenow]=\"Progress()\"\n                            aria-valuemin=\"0\"\n                            aria-valuemax=\"100\"\n                            [style.width.%]=\"Progress()\">\n                            <span class=\"progress-text text-dark\">{{ Filename() | async }}</span>\n                        </div>\n                    </div>\n                </div>\n\n                <button\n                    class=\"btn\"\n                    (click)=\"cancelAll()\"\n                    [attr.disabled]=\"HasQueueItem() === false ? 'disabled' : null\"\n                    [class.disabled]=\"HasQueueItem() === false ? 'disabled' : null\"\n                    [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\n                    [class.btn-danger]=\"invalid && (dirty || touched)\">\n                    <span [class]=\"IconDelete\"></span>\n                </button>\n                <button\n                    *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && IsPaused() === false)\"\n                    class=\"btn\"\n                    (click)=\"pauseAll()\"\n                    [attr.disabled]=\"IsUploading() === false ? 'disabled' : null\"\n                    [class.disabled]=\"IsUploading() === false ? 'disabled' : null\"\n                    [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\n                    [class.btn-danger]=\"invalid && (dirty || touched)\">\n                    <span [class]=\"IconPause\"></span>\n                </button>\n                <button\n                    *ngIf=\"autoupload && enablepause && IsPaused()\"\n                    class=\"btn\"\n                    (click)=\"uploadAll()\"\n                    [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\n                    [class.btn-danger]=\"invalid && (dirty || touched)\">\n                    <span [class]=\"IconContinue\"></span>\n                </button>\n                <button\n                    *ngIf=\"autoupload === false\"\n                    class=\"btn text-nowrap\"\n                    (click)=\"uploadAll()\"\n                    [attr.disabled]=\"IsStateToUpload() === false ? 'disabled' : null\"\n                    [class.disabled]=\"IsStateToUpload() === false ? 'disabled' : null\"\n                    [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\n                    [class.btn-danger]=\"invalid && (dirty || touched)\">\n                    <span\n                        [ngClass]=\"IconUpload\"\n                        class=\"pe-2\"></span\n                    >{{ buttonupload ? buttonupload : (lngResourceService.GetString(validationKeyService.UploadButtonUpload) | async) }}\n                </button>\n            </div>\n            <div\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"invalid-feedback\">\n                {{ GetErrorMessage() | async }}\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n",
                     providers: [
                         {
                             provide: forms.NG_VALUE_ACCESSOR,
@@ -1463,7 +1466,7 @@
     SacUploadMultipleComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-uploadmultiple',
-                    template: "<div\n    id=\"{{ name }}\"\n    class=\"row mb-3\"\n    [class.g-0]=\"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) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\n        <div class=\"upload-component\">\n            <div class=\"row\">\n                <div class=\"col-12\">\n                    <div\n                        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n                        [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                        <div\n                            class=\"btn-group\"\n                            [class.btn-group-sm]=\"componentHeight === ControlHeight.Small\"\n                            [class.btn-group-lg]=\"componentHeight === ControlHeight.Large\"\n                            [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                            <div\n                                class=\"btn upload-input custom-file\"\n                                [class.disabled]=\"maxfiles > 0 && uploads.length >= maxfiles\"\n                                [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\n                                [class.btn-danger]=\"invalid && (dirty || touched)\">\n                                <i\n                                    [ngClass]=\"IconBrowse\"\n                                    class=\"pe-2\"></i>\n                                <span class=\"upload-browse\">{{\n                                    buttonbrowse ? buttonbrowse : (lngResourceService.GetString(validationKeyService.UploadButtonBrowse) | async)\n                                }}</span>\n                                <input\n                                    id=\"{{ name }}_uploadinput\"\n                                    type=\"file\"\n                                    class=\"custom-file-input\"\n                                    #files\n                                    (click)=\"files.value = ''\"\n                                    (uploadxState)=\"onUpload($event)\"\n                                    multiple\n                                    [disabled]=\"maxfiles > 0 && uploads.length >= maxfiles\" />\n                            </div>\n\n                            <div\n                                class=\"btn-group\"\n                                [class.btn-group-sm]=\"componentHeight === ControlHeight.Small\"\n                                [class.btn-group-lg]=\"componentHeight === ControlHeight.Large\">\n                                <!-- image-preview-clear button -->\n                                <button\n                                    class=\"btn\"\n                                    (click)=\"cancelAll()\"\n                                    [attr.disabled]=\"HasQueueItem() === false ? 'disabled' : null\"\n                                    [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\n                                    [class.btn-danger]=\"invalid && (dirty || touched)\">\n                                    <span [class]=\"IconDelete\"></span>\n                                </button>\n                                <button\n                                    *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && IsPaused() === false)\"\n                                    class=\"btn\"\n                                    (click)=\"pauseAll()\"\n                                    [attr.disabled]=\"IsUploading() === false ? 'disabled' : null\"\n                                    [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\n                                    [class.btn-danger]=\"invalid && (dirty || touched)\">\n                                    <span [class]=\"IconPause\"></span>\n                                </button>\n                                <button\n                                    *ngIf=\"autoupload && enablepause && IsPaused() === true\"\n                                    class=\"btn\"\n                                    (click)=\"uploadAll()\"\n                                    [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\n                                    [class.btn-danger]=\"invalid && (dirty || touched)\">\n                                    <span [class]=\"IconContinue\"></span>\n                                </button>\n                                <button\n                                    *ngIf=\"autoupload === false\"\n                                    class=\"btn text-nowrap\"\n                                    (click)=\"uploadAll()\"\n                                    [attr.disabled]=\"IsStateToUpload() === false ? 'disabled' : null\"\n                                    [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\n                                    [class.btn-danger]=\"invalid && (dirty || touched)\">\n                                    <span\n                                        [ngClass]=\"IconUpload\"\n                                        class=\"pe-2\"></span\n                                    >{{ buttonupload ? buttonupload : (lngResourceService.GetString(validationKeyService.UploadButtonUpload) | async) }}\n                                </button>\n                            </div>\n                        </div>\n                        <div\n                            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n                            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n                            [ngClass]=\"[componentHeight | toControlHeight]\">\n                            <sac-tooltip\n                                [tooltiptext]=\"helptext\"\n                                [inlinemode]=\"true\">\n                                <span\n                                    [ngClass]=\"HelptextTooltipIcon\"\n                                    class=\"ml-1\">\n                                </span>\n                            </sac-tooltip>\n                        </div>\n                    </div>\n                    <div\n                        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                        class=\"invalid-feedback\">\n                        {{ GetErrorMessage() | async }}\n                    </div>\n                    <div\n                        *ngIf=\"helptextmode === 'text' && helptext\"\n                        class=\"form-text\">\n                        {{ helptext }}\n                    </div>\n                </div>\n\n                <div\n                    *ngFor=\"let file of uploads\"\n                    style=\"margin-top: 5px\">\n                    <div\n                        class=\"input-group upload-component upload-multiple\"\n                        [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                        [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\n                        <div\n                            class=\"form-control upload-progress\"\n                            [class.is-invalid]=\"invalid && (dirty || touched)\">\n                            <div class=\"progress\">\n                                <div\n                                    class=\"progress-bar\"\n                                    [class.progress-bar-success]=\"file.progress === 100\"\n                                    role=\"progressbar\"\n                                    [attr.aria-valuenow]=\"file.progress\"\n                                    aria-valuemin=\"0\"\n                                    aria-valuemax=\"100\"\n                                    [style.width.%]=\"file.progress\">\n                                    <span class=\"progress-text text-dark\">{{ file.name }}</span>\n                                </div>\n                            </div>\n                        </div>\n\n                        <button\n                            class=\"btn\"\n                            (click)=\"cancel(file.uploadId)\"\n                            [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\n                            [class.btn-danger]=\"invalid && (dirty || touched)\">\n                            <span [class]=\"IconDelete\"></span>\n                        </button>\n                        <button\n                            *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && file.status !== 'paused')\"\n                            class=\"btn\"\n                            (click)=\"pause(file.uploadId)\"\n                            [attr.disabled]=\"file.status !== 'uploading' ? 'disabled' : null\"\n                            [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\n                            [class.btn-danger]=\"invalid && (dirty || touched)\">\n                            <span [class]=\"IconPause\"></span>\n                        </button>\n                        <button\n                            *ngIf=\"autoupload && enablepause && file.status === 'paused'\"\n                            class=\"btn\"\n                            (click)=\"upload(file.uploadId)\"\n                            [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\n                            [class.btn-danger]=\"invalid && (dirty || touched)\">\n                            <span [class]=\"IconContinue\"></span>\n                        </button>\n                        <button\n                            *ngIf=\"autoupload === false\"\n                            class=\"btn text-nowrap\"\n                            (click)=\"upload(file.uploadId)\"\n                            [attr.disabled]=\"file.status !== 'added' && file.status !== 'paused' ? 'disabled' : null\"\n                            [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\n                            [class.btn-danger]=\"invalid && (dirty || touched)\">\n                            <span\n                                [ngClass]=\"IconUpload\"\n                                class=\"pe-2\"></span\n                            >{{ buttonupload ? buttonupload : (lngResourceService.GetString(validationKeyService.UploadButtonUpload) | async) }}\n                        </button>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n",
+                    template: "<div\n    id=\"{{ name }}\"\n    class=\"row mb-3\"\n    [class.g-0]=\"disablelabel\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}_label\"\n        for=\"{{ name }}_uploadinput\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\n        <div class=\"upload-component\">\n            <div class=\"row\">\n                <div class=\"col-12\">\n                    <div\n                        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n                        [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                        <div\n                            class=\"btn-group\"\n                            [class.btn-group-sm]=\"componentHeight === ControlHeight.Small\"\n                            [class.btn-group-lg]=\"componentHeight === ControlHeight.Large\"\n                            [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                            <div\n                                class=\"btn upload-input custom-file\"\n                                [class.disabled]=\"maxfiles > 0 && uploads.length >= maxfiles\"\n                                [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\n                                [class.btn-danger]=\"invalid && (dirty || touched)\">\n                                <i\n                                    [ngClass]=\"IconBrowse\"\n                                    class=\"pe-2\"></i>\n                                <span class=\"upload-browse\">{{\n                                    buttonbrowse ? buttonbrowse : (lngResourceService.GetString(validationKeyService.UploadButtonBrowse) | async)\n                                }}</span>\n                                <input\n                                    id=\"{{ name }}_uploadinput\"\n                                    type=\"file\"\n                                    class=\"custom-file-input\"\n                                    #files\n                                    (click)=\"files.value = ''\"\n                                    (uploadxState)=\"onUpload($event)\"\n                                    multiple\n                                    [disabled]=\"maxfiles > 0 && uploads.length >= maxfiles\" />\n                            </div>\n\n                            <div\n                                class=\"btn-group\"\n                                [class.btn-group-sm]=\"componentHeight === ControlHeight.Small\"\n                                [class.btn-group-lg]=\"componentHeight === ControlHeight.Large\">\n                                <!-- image-preview-clear button -->\n                                <button\n                                    class=\"btn\"\n                                    (click)=\"cancelAll()\"\n                                    [attr.disabled]=\"HasQueueItem() === false ? 'disabled' : null\"\n                                    [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\n                                    [class.btn-danger]=\"invalid && (dirty || touched)\">\n                                    <span [class]=\"IconDelete\"></span>\n                                </button>\n                                <button\n                                    *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && IsPaused() === false)\"\n                                    class=\"btn\"\n                                    (click)=\"pauseAll()\"\n                                    [attr.disabled]=\"IsUploading() === false ? 'disabled' : null\"\n                                    [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\n                                    [class.btn-danger]=\"invalid && (dirty || touched)\">\n                                    <span [class]=\"IconPause\"></span>\n                                </button>\n                                <button\n                                    *ngIf=\"autoupload && enablepause && IsPaused() === true\"\n                                    class=\"btn\"\n                                    (click)=\"uploadAll()\"\n                                    [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\n                                    [class.btn-danger]=\"invalid && (dirty || touched)\">\n                                    <span [class]=\"IconContinue\"></span>\n                                </button>\n                                <button\n                                    *ngIf=\"autoupload === false\"\n                                    class=\"btn text-nowrap\"\n                                    (click)=\"uploadAll()\"\n                                    [attr.disabled]=\"IsStateToUpload() === false ? 'disabled' : null\"\n                                    [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\n                                    [class.btn-danger]=\"invalid && (dirty || touched)\">\n                                    <span\n                                        [ngClass]=\"IconUpload\"\n                                        class=\"pe-2\"></span\n                                    >{{ buttonupload ? buttonupload : (lngResourceService.GetString(validationKeyService.UploadButtonUpload) | async) }}\n                                </button>\n                            </div>\n                        </div>\n                        <div\n                            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n                            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n                            [ngClass]=\"[componentHeight | toControlHeight]\">\n                            <sac-tooltip\n                                [tooltiptext]=\"helptext\"\n                                [inlinemode]=\"true\">\n                                <span\n                                    [ngClass]=\"HelptextTooltipIcon\"\n                                    class=\"ml-1\">\n                                </span>\n                            </sac-tooltip>\n                        </div>\n                    </div>\n                    <div\n                        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                        class=\"invalid-feedback\">\n                        {{ GetErrorMessage() | async }}\n                    </div>\n                    <div\n                        *ngIf=\"helptextmode === 'text' && helptext\"\n                        class=\"form-text\">\n                        {{ helptext }}\n                    </div>\n                </div>\n\n                <div\n                    *ngFor=\"let file of uploads\"\n                    style=\"margin-top: 5px\">\n                    <div\n                        class=\"input-group upload-component upload-multiple\"\n                        [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                        [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\n                        <div\n                            class=\"form-control upload-progress\"\n                            [class.is-invalid]=\"invalid && (dirty || touched)\">\n                            <div class=\"progress\">\n                                <div\n                                    class=\"progress-bar\"\n                                    [class.progress-bar-success]=\"file.progress === 100\"\n                                    role=\"progressbar\"\n                                    [attr.aria-valuenow]=\"file.progress\"\n                                    aria-valuemin=\"0\"\n                                    aria-valuemax=\"100\"\n                                    [style.width.%]=\"file.progress\">\n                                    <span class=\"progress-text text-dark\">{{ file.name }}</span>\n                                </div>\n                            </div>\n                        </div>\n\n                        <button\n                            class=\"btn\"\n                            (click)=\"cancel(file.uploadId)\"\n                            [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\n                            [class.btn-danger]=\"invalid && (dirty || touched)\">\n                            <span [class]=\"IconDelete\"></span>\n                        </button>\n                        <button\n                            *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && file.status !== 'paused')\"\n                            class=\"btn\"\n                            (click)=\"pause(file.uploadId)\"\n                            [attr.disabled]=\"file.status !== 'uploading' ? 'disabled' : null\"\n                            [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\n                            [class.btn-danger]=\"invalid && (dirty || touched)\">\n                            <span [class]=\"IconPause\"></span>\n                        </button>\n                        <button\n                            *ngIf=\"autoupload && enablepause && file.status === 'paused'\"\n                            class=\"btn\"\n                            (click)=\"upload(file.uploadId)\"\n                            [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\n                            [class.btn-danger]=\"invalid && (dirty || touched)\">\n                            <span [class]=\"IconContinue\"></span>\n                        </button>\n                        <button\n                            *ngIf=\"autoupload === false\"\n                            class=\"btn text-nowrap\"\n                            (click)=\"upload(file.uploadId)\"\n                            [attr.disabled]=\"file.status !== 'added' && file.status !== 'paused' ? 'disabled' : null\"\n                            [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\n                            [class.btn-danger]=\"invalid && (dirty || touched)\">\n                            <span\n                                [ngClass]=\"IconUpload\"\n                                class=\"pe-2\"></span\n                            >{{ buttonupload ? buttonupload : (lngResourceService.GetString(validationKeyService.UploadButtonUpload) | async) }}\n                        </button>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n",
                     providers: [
                         {
                             provide: forms.NG_VALUE_ACCESSOR,
@@ -1504,13 +1507,9 @@
                         forms.FormsModule,
                         SACBootstrap5LayoutModule,
                         SACBootstrap5TooltipModule,
+                        sacCommon.SACCommonUtliltiesModule,
                     ],
-                    exports: [
-                        SacUploadComponent,
-                        SacUploadMultipleComponent,
-                        SacDropzoneSingleComponent,
-                        SacDropzoneMultipleComponent,
-                    ],
+                    exports: [SacUploadComponent, SacUploadMultipleComponent, SacDropzoneSingleComponent, SacDropzoneMultipleComponent],
                 },] }
     ];
 
@@ -1663,7 +1662,7 @@
     SacCheckboxComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-checkbox',
-                    template: "<div\n    class=\"row\"\n    [class.g-0]=\"disablelabel\"\n    [class.mb-3]=\"!stacked\">\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[!disablelabel && !stacked ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden']\">\n        <label\n            *ngIf=\"!disablelabel && !stacked\"\n            for=\"{{ name }}\"\n            class=\"col-form-label d-flex\"\n            [ngClass]=\"componentHeight | toLabelHeight\">\n            <div\n                class=\"text flex-grow-0\"\n                [class.flex-sm-grow-1]=\"splitlabelandhelptext\"\n                >{{ label }}</div\n            >\n            <sac-tooltip\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ms-1\">\n                </span>\n            </sac-tooltip>\n        </label>\n    </div>\n    <div\n        class=\"align-self-center col-12\"\n        [ngClass]=\"[!disablelabel && !stacked ? (this.labelSizes | toControlWidthCss) : '']\">\n        <div\n            class=\"form-check\"\n            [class.form-switch]=\"checkboxstyle === 'switch'\"\n            [attr.role]=\"checkboxstyle === 'switch' ? 'switch' : null\"\n            [class.form-check-sm]=\"componentHeight === ControlHeight.Small\"\n            [class.form-check-lg]=\"componentHeight === ControlHeight.Large\">\n            <input\n                class=\"form-check-input\"\n                [class.form-check-input-sm]=\"componentHeight === ControlHeight.Small\"\n                [class.form-check-input-lg]=\"componentHeight === ControlHeight.Large\"\n                id=\"{{ name }}\"\n                name=\"{{ name }}\"\n                type=\"checkbox\"\n                [checked]=\"value\"\n                (blur)=\"onTouch()\"\n                (change)=\"setValue($event.target.checked)\"\n                [disabled]=\"isdisabled\" />\n            <label\n                for=\"{{ name }}\"\n                class=\"form-check-label\"\n                [class.form-check-label-sm]=\"componentHeight === ControlHeight.Small\"\n                [class.form-check-label-lg]=\"componentHeight === ControlHeight.Large\">\n                <ng-container *ngIf=\"checkboxtext\">{{ checkboxtext }}</ng-container>\n            </label>\n        </div>\n        <div\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"form-text\">\n            {{ helptext }}\n        </div>\n    </div>\n</div>\n",
+                    template: "<div\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\"\n    class=\"row\"\n    [class.g-0]=\"disablelabel\"\n    [class.mb-3]=\"!stacked\">\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[!disablelabel && !stacked ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden']\">\n        <label\n            *ngIf=\"!disablelabel && !stacked\"\n            for=\"{{ name }}\"\n            class=\"col-form-label d-flex\"\n            [ngClass]=\"componentHeight | toLabelHeight\">\n            <div\n                class=\"text flex-grow-0\"\n                [class.flex-sm-grow-1]=\"splitlabelandhelptext\"\n                >{{ label }}</div\n            >\n            <sac-tooltip\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ms-1\">\n                </span>\n            </sac-tooltip>\n        </label>\n    </div>\n    <div\n        class=\"align-self-center col-12\"\n        [ngClass]=\"[!disablelabel && !stacked ? (this.labelSizes | toControlWidthCss) : '']\">\n        <div\n            class=\"form-check\"\n            [class.form-switch]=\"checkboxstyle === 'switch'\"\n            [attr.role]=\"checkboxstyle === 'switch' ? 'switch' : null\"\n            [class.form-check-sm]=\"componentHeight === ControlHeight.Small\"\n            [class.form-check-lg]=\"componentHeight === ControlHeight.Large\">\n            <input\n                class=\"form-check-input\"\n                [class.form-check-input-sm]=\"componentHeight === ControlHeight.Small\"\n                [class.form-check-input-lg]=\"componentHeight === ControlHeight.Large\"\n                id=\"{{ name }}\"\n                name=\"{{ name }}\"\n                type=\"checkbox\"\n                [checked]=\"value\"\n                (blur)=\"onTouch()\"\n                (change)=\"setValue($event.target.checked)\"\n                [disabled]=\"isdisabled\" />\n            <label\n                for=\"{{ name }}\"\n                class=\"form-check-label\"\n                [class.form-check-label-sm]=\"componentHeight === ControlHeight.Small\"\n                [class.form-check-label-lg]=\"componentHeight === ControlHeight.Large\">\n                <ng-container *ngIf=\"checkboxtext\">{{ checkboxtext }}</ng-container>\n            </label>\n        </div>\n        <div\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"form-text\">\n            {{ helptext }}\n        </div>\n    </div>\n</div>\n",
                     // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                     providers: [
                         {
@@ -1704,7 +1703,7 @@
     SacRadiobuttonsComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-radiobuttons',
-                    template: "<div\n    class=\"row mb-3\"\n    [class.g-0]=\"disablelabel\">\n    <div\n        *ngIf=\"disablelabel === false\"\n        class=\"col-12 pt-0\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden']\">\n        <label\n            class=\"col-form-label d-flex\"\n            [ngClass]=\"componentHeight | toLabelHeight\"\n            *ngIf=\"!disablelabel\">\n            <div\n                class=\"text flex-grow-0\"\n                [class.flex-sm-grow-1]=\"splitlabelandhelptext\"\n                >{{ label }}</div\n            >\n            <sac-tooltip\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ms-1\">\n                </span>\n            </sac-tooltip>\n        </label>\n    </div>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.pt-1]=\"componentHeight === ControlHeight.Small\"\n        [class.pt-2]=\"componentHeight !== ControlHeight.Small\">\n        <ng-content></ng-content>\n        <div\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"form-text\">\n            {{ helptext }}\n        </div>\n    </div>\n</div>\n",
+                    template: "<div\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\"\n    class=\"row mb-3\"\n    [class.g-0]=\"disablelabel\">\n    <div\n        *ngIf=\"disablelabel === false\"\n        class=\"col-12 pt-0\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden']\">\n        <label\n            class=\"col-form-label d-flex\"\n            [ngClass]=\"componentHeight | toLabelHeight\"\n            *ngIf=\"!disablelabel\">\n            <div\n                class=\"text flex-grow-0\"\n                [class.flex-sm-grow-1]=\"splitlabelandhelptext\"\n                >{{ label }}</div\n            >\n            <sac-tooltip\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ms-1\">\n                </span>\n            </sac-tooltip>\n        </label>\n    </div>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.pt-1]=\"componentHeight === ControlHeight.Small\"\n        [class.pt-2]=\"componentHeight !== ControlHeight.Small\">\n        <ng-content></ng-content>\n        <div\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"form-text\"\n            >{{ helptext }}</div\n        >\n    </div>\n</div>\n",
                     // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                     providers: [
                         {
@@ -1762,25 +1761,19 @@
     }());
     SACBootstrap5CheckboxModule.decorators = [
         { type: core.NgModule, args: [{
-                    declarations: [
-                        SacCheckboxComponent,
-                        SacRadiobuttonComponent,
-                        SacRadiobuttonsComponent,
-                    ],
-                    imports: [
-                        common.CommonModule,
-                        SACBootstrap5LayoutModule,
-                        SACBootstrap5TooltipModule,
-                    ],
-                    exports: [
-                        SacCheckboxComponent,
-                        SacRadiobuttonComponent,
-                        SacRadiobuttonsComponent,
-                    ],
+                    declarations: [SacCheckboxComponent, SacRadiobuttonComponent, SacRadiobuttonsComponent],
+                    imports: [common.CommonModule, SACBootstrap5LayoutModule, SACBootstrap5TooltipModule, sacCommon.SACCommonUtliltiesModule],
+                    exports: [SacCheckboxComponent, SacRadiobuttonComponent, SacRadiobuttonsComponent],
                 },] }
     ];
 
-    // #region Classes
+    // #region Variables
+    /**
+     * Referenz auf Moment.JS
+     */
+    var moment = moment___default['default'];
+    // #endregion Variables
+    // #region Exported Classes
     /**
      * Komponente für Datumauswahl
      */
@@ -1802,7 +1795,7 @@
     SacDateComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-date',
-                    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) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12 position-relative\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n            <div\n                class=\"input-group\"\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\n                [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                <input\n                    id=\"{{ name }}\"\n                    name=\"{{ name }}\"\n                    type=\"text\"\n                    class=\"form-control\"\n                    [imask]=\"imaskDate\"\n                    [attr.placeholder]=\"placeholder\"\n                    [value]=\"valuestring\"\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\n                    [ngClass]=\"[componentHeight | toControlHeight]\"\n                    (blur)=\"onTouch()\"\n                    (accept)=\"setValueString($event)\"\n                    [disabled]=\"isdisabled\" />\n                <button\n                    #pickerbutton\n                    class=\"btn btn-secondary\"\n                    type=\"button\"\n                    (click)=\"showDateSelector()\"\n                    [disabled]=\"isdisabled\">\n                    <i [class]=\"IconSelector\"></i>\n                </button>\n                <div\n                    *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                    class=\"invalid-feedback\">\n                    {{ GetErrorMessage() | async }}\n                </div>\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n            <div\n                #picker\n                *ngIf=\"_showselector\">\n                <div\n                    class=\"popover fade show position-absolute bs-popover-auto\"\n                    role=\"tooltip\"\n                    [attr.data-popper-placement]=\"\n                        GetPickerPosition() == TooltipPosition.right\n                            ? 'right'\n                            : GetPickerPosition() == TooltipPosition.left\n                            ? 'left'\n                            : GetPickerPosition() == TooltipPosition.top || GetPickerPosition() == TooltipPosition.topend\n                            ? 'top'\n                            : GetPickerPosition() == TooltipPosition.bottom || GetPickerPosition() == TooltipPosition.bottomend\n                            ? 'bottom'\n                            : null\n                    \"\n                    [style.left.px]=\"posPopupLeft\"\n                    [style.top.px]=\"posPopupTop\">\n                    <div\n                        #pickerarrow\n                        class=\"popover-arrow position-absolute\"\n                        style=\"left: unset\"\n                        [style.top.px]=\"posArrowTop\"\n                        [style.left.px]=\"posArrowLeft\">\n                    </div>\n\n                    <div class=\"popover-body\">\n                        <sac-dateselector\n                            [initialvalue]=\"value\"\n                            (selectdate)=\"dateselect($event)\"\n                            dateselection=\"true\"></sac-dateselector>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n",
+                    template: "<div\n    class=\"row mb-3\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\"\n    [class.g-0]=\"disablelabel\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12 position-relative\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n            <div\n                class=\"input-group\"\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\n                [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                <input\n                    id=\"{{ name }}\"\n                    name=\"{{ name }}\"\n                    type=\"text\"\n                    class=\"form-control\"\n                    [imask]=\"imaskDate\"\n                    [attr.placeholder]=\"placeholder\"\n                    [value]=\"valuestring\"\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\n                    [ngClass]=\"[componentHeight | toControlHeight]\"\n                    (blur)=\"onTouch()\"\n                    (accept)=\"setValueString($event)\"\n                    [disabled]=\"isdisabled\" />\n                <button\n                    #pickerbutton\n                    class=\"btn btn-secondary\"\n                    type=\"button\"\n                    (click)=\"showDateSelector()\"\n                    [disabled]=\"isdisabled\">\n                    <i [class]=\"IconSelector\"></i>\n                </button>\n                <div\n                    *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                    class=\"invalid-feedback\">\n                    {{ GetErrorMessage() | async }}\n                </div>\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n            <div\n                #picker\n                *ngIf=\"_showselector\">\n                <div\n                    class=\"popover fade show position-absolute bs-popover-auto\"\n                    role=\"tooltip\"\n                    [attr.data-popper-placement]=\"\n                        GetPickerPosition() == TooltipPosition.right\n                            ? 'right'\n                            : GetPickerPosition() == TooltipPosition.left\n                            ? 'left'\n                            : GetPickerPosition() == TooltipPosition.top || GetPickerPosition() == TooltipPosition.topend\n                            ? 'top'\n                            : GetPickerPosition() == TooltipPosition.bottom || GetPickerPosition() == TooltipPosition.bottomend\n                            ? 'bottom'\n                            : null\n                    \"\n                    [style.left.px]=\"posPopupLeft\"\n                    [style.top.px]=\"posPopupTop\">\n                    <div\n                        #pickerarrow\n                        class=\"popover-arrow position-absolute\"\n                        style=\"left: unset\"\n                        [style.top.px]=\"posArrowTop\"\n                        [style.left.px]=\"posArrowLeft\">\n                    </div>\n\n                    <div class=\"popover-body\">\n                        <sac-dateselector\n                            name=\"{{ name }}_picker\"\n                            [initialvalue]=\"value\"\n                            (selectdate)=\"dateselect($event)\"\n                            dateselection=\"true\"></sac-dateselector>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n",
                     // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                     providers: [
                         {
@@ -1824,13 +1817,7 @@
         { type: core.ElementRef },
         { type: core.ChangeDetectorRef }
     ]; };
-    // #endregion Classes
-    // #region Variables
-    /**
-     * Referenz auf Moment.JS
-     */
-    var moment = moment___default['default'];
-    // #endregion Variables
+    // #endregion Exported Classes
 
     /**
      * DateTime Selektor Komponente
@@ -1845,7 +1832,7 @@
     SacDateSelectorComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-dateselector',
-                    template: "<div class=\"calendar-selector\">\n  <div *ngIf=\"dateselection\">\n    <div class=\"container\">\n      <div class=\"row\">\n        <div class=\"col text-start\">\n          <a (click)=\"monthBack()\"><span [class]=\"iconMonthPrev\"></span></a>\n        </div>\n        <div class=\"col text-center\">{{month+1}}/{{year}}</div>\n        <div class=\"col text-end\">\n          <a (click)=\"monthNext()\"><span [class]=\"iconMonthNext\"></span></a>\n        </div>\n      </div>\n    </div>\n    <div></div>\n    <div class=\"container\">\n      <div class=\"row\">\n        <ng-container *ngFor=\"let week of dates; let i=index\">\n          <ng-container *ngFor=\"let item of week\">\n            <div\n              class=\"p-2 col text-center\"\n              [ngStyle]=\"{'cursor': item.isenabled ? 'pointer' : null}\"\n              [ngClass]=\"{'day-current': item.iscurrent, 'day-selected': item.isselected, 'day-new': item.isnew, 'day-disabled': !item.isenabled}\"\n              (click)=\"selectDate(item)\"\n            >\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 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=\"flex-grow-1 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"
+                    template: "<div\n    class=\"calendar-selector\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <div *ngIf=\"dateselection\">\n        <div class=\"container\">\n            <div class=\"row\">\n                <div class=\"col text-start\">\n                    <a (click)=\"monthBack()\"><span [class]=\"iconMonthPrev\"></span></a>\n                </div>\n                <div class=\"col text-center\">{{ month + 1 }}/{{ year }}</div>\n                <div class=\"col text-end\">\n                    <a (click)=\"monthNext()\"><span [class]=\"iconMonthNext\"></span></a>\n                </div>\n            </div>\n        </div>\n        <div></div>\n        <div class=\"container\">\n            <div class=\"row\">\n                <ng-container *ngFor=\"let week of dates; let i = index\">\n                    <ng-container *ngFor=\"let item of week\">\n                        <div\n                            class=\"p-2 col text-center\"\n                            [ngStyle]=\"{ cursor: item.isenabled ? 'pointer' : null }\"\n                            [ngClass]=\"{ 'day-current': item.iscurrent, 'day-selected': item.isselected, 'day-new': item.isnew, 'day-disabled': !item.isenabled }\"\n                            (click)=\"selectDate(item)\"\n                            >{{ item.displaytext }}</div\n                        >\n                    </ng-container>\n                    <div class=\"w-100\"></div>\n                </ng-container>\n            </div>\n        </div>\n    </div>\n    <div\n        class=\"d-flex justify-content-start\"\n        *ngIf=\"timeselection\">\n        <div class=\"p-2\">\n            <div class=\"form-group\">\n                <label>Stunde</label>\n                <input\n                    type=\"number\"\n                    class=\"form-control form-control-sm\"\n                    [value]=\"getHours()\"\n                    (input)=\"setHours($event.target.value)\"\n                    min=\"0\"\n                    max=\"23\" />\n            </div>\n        </div>\n        <div class=\"p-2\">\n            <div class=\"form-group\">\n                <label>Minute</label>\n                <input\n                    type=\"number\"\n                    class=\"form-control form-control-sm\"\n                    [value]=\"getMinutes()\"\n                    (input)=\"setMinutes($event.target.value)\"\n                    min=\"0\"\n                    max=\"59\" />\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-row\">\n        <div class=\"flex-grow-1 p-2\">\n            <button\n                type=\"button\"\n                class=\"btn btn-secondary\"\n                (click)=\"setToday()\">\n                Heute\n            </button>\n        </div>\n        <div class=\"p-2\">\n            <button\n                type=\"button\"\n                class=\"btn btn-secondary\"\n                (click)=\"resetSelection()\">\n                Reset\n            </button>\n        </div>\n        <div class=\"p-2\">\n            <button\n                type=\"button\"\n                class=\"btn btn-primary\"\n                (click)=\"applySelection()\">\n                Apply\n            </button>\n        </div>\n    </div>\n</div>\n"
                 },] }
     ];
 
@@ -1870,7 +1857,7 @@
     SacDateTimeComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-datetime',
-                    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) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12 position-relative\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n            <div\n                class=\"input-group\"\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\n                [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                <input\n                    id=\"{{ name }}\"\n                    name=\"{{ name }}\"\n                    type=\"text\"\n                    class=\"form-control\"\n                    [imask]=\"imaskDate\"\n                    [attr.placeholder]=\"placeholder\"\n                    [value]=\"valuestring\"\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\n                    [ngClass]=\"[componentHeight | toControlHeight]\"\n                    (blur)=\"onTouch()\"\n                    (accept)=\"setValueString($event)\"\n                    [disabled]=\"isdisabled\" />\n                <button\n                    #pickerbutton\n                    class=\"btn btn-secondary\"\n                    type=\"button\"\n                    (click)=\"showDateSelector()\"\n                    [disabled]=\"isdisabled\">\n                    <i [class]=\"IconSelector\"></i>\n                </button>\n                <div\n                    *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                    class=\"invalid-feedback\">\n                    {{ GetErrorMessage() | async }}\n                </div>\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n            <div\n                #picker\n                *ngIf=\"_showselector\">\n                <div\n                    class=\"popover fade show position-absolute bs-popover-auto\"\n                    role=\"tooltip\"\n                    [attr.data-popper-placement]=\"\n                        GetPickerPosition() == TooltipPosition.right\n                            ? 'right'\n                            : GetPickerPosition() == TooltipPosition.left\n                            ? 'left'\n                            : GetPickerPosition() == TooltipPosition.top || GetPickerPosition() == TooltipPosition.topend\n                            ? 'top'\n                            : GetPickerPosition() == TooltipPosition.bottom || GetPickerPosition() == TooltipPosition.bottomend\n                            ? 'bottom'\n                            : null\n                    \"\n                    [style.left.px]=\"posPopupLeft\"\n                    [style.top.px]=\"posPopupTop\">\n                    <div\n                        #pickerarrow\n                        class=\"popover-arrow position-absolute\"\n                        style=\"left: unset\"\n                        [style.top.px]=\"posArrowTop\"\n                        [style.left.px]=\"posArrowLeft\">\n                    </div>\n\n                    <div class=\"popover-body\">\n                        <sac-dateselector\n                            [initialvalue]=\"value\"\n                            (selectdate)=\"dateselect($event)\"\n                            dateselection=\"true\"\n                            timeselection=\"true\"></sac-dateselector>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n",
+                    template: "<div\n    class=\"row mb-3\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\"\n    [class.g-0]=\"disablelabel\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12 position-relative\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n            <div\n                class=\"input-group\"\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\n                [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                <input\n                    id=\"{{ name }}\"\n                    name=\"{{ name }}\"\n                    type=\"text\"\n                    class=\"form-control\"\n                    [imask]=\"imaskDate\"\n                    [attr.placeholder]=\"placeholder\"\n                    [value]=\"valuestring\"\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\n                    [ngClass]=\"[componentHeight | toControlHeight]\"\n                    (blur)=\"onTouch()\"\n                    (accept)=\"setValueString($event)\"\n                    [disabled]=\"isdisabled\" />\n                <button\n                    #pickerbutton\n                    class=\"btn btn-secondary\"\n                    type=\"button\"\n                    (click)=\"showDateSelector()\"\n                    [disabled]=\"isdisabled\">\n                    <i [class]=\"IconSelector\"></i>\n                </button>\n                <div\n                    *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                    class=\"invalid-feedback\">\n                    {{ GetErrorMessage() | async }}\n                </div>\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n            <div\n                #picker\n                *ngIf=\"_showselector\">\n                <div\n                    class=\"popover fade show position-absolute bs-popover-auto\"\n                    role=\"tooltip\"\n                    [attr.data-popper-placement]=\"\n                        GetPickerPosition() == TooltipPosition.right\n                            ? 'right'\n                            : GetPickerPosition() == TooltipPosition.left\n                            ? 'left'\n                            : GetPickerPosition() == TooltipPosition.top || GetPickerPosition() == TooltipPosition.topend\n                            ? 'top'\n                            : GetPickerPosition() == TooltipPosition.bottom || GetPickerPosition() == TooltipPosition.bottomend\n                            ? 'bottom'\n                            : null\n                    \"\n                    [style.left.px]=\"posPopupLeft\"\n                    [style.top.px]=\"posPopupTop\">\n                    <div\n                        #pickerarrow\n                        class=\"popover-arrow position-absolute\"\n                        style=\"left: unset\"\n                        [style.top.px]=\"posArrowTop\"\n                        [style.left.px]=\"posArrowLeft\">\n                    </div>\n\n                    <div class=\"popover-body\">\n                        <sac-dateselector\n                            name=\"{{ name }}_picker\"\n                            [initialvalue]=\"value\"\n                            (selectdate)=\"dateselect($event)\"\n                            dateselection=\"true\"\n                            timeselection=\"true\"></sac-dateselector>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n",
                     // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                     providers: [
                         {
@@ -1914,7 +1901,7 @@
     SacTimeComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-time',
-                    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) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12 position-relative\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n            <div\n                class=\"input-group\"\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\n                [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                <input\n                    id=\"{{ name }}\"\n                    name=\"{{ name }}\"\n                    type=\"text\"\n                    class=\"form-control\"\n                    [imask]=\"imaskDate\"\n                    [attr.placeholder]=\"placeholder\"\n                    [value]=\"valuestring\"\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\n                    [ngClass]=\"[componentHeight | toControlHeight]\"\n                    (blur)=\"onTouch()\"\n                    (accept)=\"setValueString($event)\"\n                    [disabled]=\"isdisabled\" />\n                <button\n                    #pickerbutton\n                    class=\"btn btn-secondary\"\n                    type=\"button\"\n                    (click)=\"showTimeSelector()\"\n                    [disabled]=\"isdisabled\">\n                    <i [class]=\"IconSelector\"></i>\n                </button>\n                <div\n                    *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                    class=\"invalid-feedback\">\n                    {{ GetErrorMessage() | async }}\n                </div>\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n            <div\n                #picker\n                *ngIf=\"_showselector\">\n                <div\n                    class=\"popover fade show position-absolute bs-popover-auto\"\n                    role=\"tooltip\"\n                    [attr.data-popper-placement]=\"\n                        GetPickerPosition() == TooltipPosition.right\n                            ? 'right'\n                            : GetPickerPosition() == TooltipPosition.left\n                            ? 'left'\n                            : GetPickerPosition() == TooltipPosition.top || GetPickerPosition() == TooltipPosition.topend\n                            ? 'top'\n                            : GetPickerPosition() == TooltipPosition.bottom || GetPickerPosition() == TooltipPosition.bottomend\n                            ? 'bottom'\n                            : null\n                    \"\n                    [style.left.px]=\"posPopupLeft\"\n                    [style.top.px]=\"posPopupTop\">\n                    <div\n                        #pickerarrow\n                        class=\"popover-arrow position-absolute\"\n                        style=\"left: unset\"\n                        [style.top.px]=\"posArrowTop\"\n                        [style.left.px]=\"posArrowLeft\">\n                    </div>\n\n                    <div class=\"popover-body\">\n                        <sac-dateselector\n                            [initialvalue]=\"value\"\n                            (selectdate)=\"timeselect($event)\"\n                            timeselection=\"true\"></sac-dateselector>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n",
+                    template: "<div\n    class=\"row mb-3\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\"\n    [class.g-0]=\"disablelabel\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12 position-relative\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n            <div\n                class=\"input-group\"\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\n                [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                <input\n                    id=\"{{ name }}\"\n                    name=\"{{ name }}\"\n                    type=\"text\"\n                    class=\"form-control\"\n                    [imask]=\"imaskDate\"\n                    [attr.placeholder]=\"placeholder\"\n                    [value]=\"valuestring\"\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\n                    [ngClass]=\"[componentHeight | toControlHeight]\"\n                    (blur)=\"onTouch()\"\n                    (accept)=\"setValueString($event)\"\n                    [disabled]=\"isdisabled\" />\n                <button\n                    #pickerbutton\n                    class=\"btn btn-secondary\"\n                    type=\"button\"\n                    (click)=\"showTimeSelector()\"\n                    [disabled]=\"isdisabled\">\n                    <i [class]=\"IconSelector\"></i>\n                </button>\n                <div\n                    *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                    class=\"invalid-feedback\">\n                    {{ GetErrorMessage() | async }}\n                </div>\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n            <div\n                #picker\n                *ngIf=\"_showselector\">\n                <div\n                    class=\"popover fade show position-absolute bs-popover-auto\"\n                    role=\"tooltip\"\n                    [attr.data-popper-placement]=\"\n                        GetPickerPosition() == TooltipPosition.right\n                            ? 'right'\n                            : GetPickerPosition() == TooltipPosition.left\n                            ? 'left'\n                            : GetPickerPosition() == TooltipPosition.top || GetPickerPosition() == TooltipPosition.topend\n                            ? 'top'\n                            : GetPickerPosition() == TooltipPosition.bottom || GetPickerPosition() == TooltipPosition.bottomend\n                            ? 'bottom'\n                            : null\n                    \"\n                    [style.left.px]=\"posPopupLeft\"\n                    [style.top.px]=\"posPopupTop\">\n                    <div\n                        #pickerarrow\n                        class=\"popover-arrow position-absolute\"\n                        style=\"left: unset\"\n                        [style.top.px]=\"posArrowTop\"\n                        [style.left.px]=\"posArrowLeft\">\n                    </div>\n\n                    <div class=\"popover-body\">\n                        <sac-dateselector\n                            name=\"{{ name }}_picker\"\n                            [initialvalue]=\"value\"\n                            (selectdate)=\"timeselect($event)\"\n                            timeselection=\"true\"></sac-dateselector>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n",
                     // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                     providers: [
                         {
@@ -1944,24 +1931,15 @@
     }());
     SACBootstrap5DateTimeModule.decorators = [
         { type: core.NgModule, args: [{
-                    declarations: [
-                        SacDateComponent,
-                        SacDateTimeComponent,
-                        SacTimeComponent,
-                        SacDateSelectorComponent,
-                    ],
+                    declarations: [SacDateComponent, SacDateTimeComponent, SacTimeComponent, SacDateSelectorComponent],
                     imports: [
                         common.CommonModule,
                         angularImask.IMaskModule,
                         SACBootstrap5LayoutModule,
                         SACBootstrap5TooltipModule,
+                        sacCommon.SACCommonUtliltiesModule,
                     ],
-                    exports: [
-                        SacDateComponent,
-                        SacDateTimeComponent,
-                        SacTimeComponent,
-                        SacDateSelectorComponent,
-                    ],
+                    exports: [SacDateComponent, SacDateTimeComponent, SacTimeComponent, SacDateSelectorComponent],
                 },] }
     ];
 
@@ -1978,6 +1956,7 @@
          */
         function SacGridComponent(cdRef, injector) {
             var _this = _super.call(this, cdRef, injector) || this;
+            // #region Properties
             /**
              * Setzt die Ellipsis Funktion auf der Column
              */
@@ -1989,7 +1968,7 @@
     SacGridComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-grid',
-                    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 *ngIf=\"pagerdata\">\n        <td [attr.colspan]=\"ColumnCount\">\n          <div class=\"container-fluid\">\n            <sac-paging\n              name=\"{{name}}Paging\"\n              (paging)=\"pageChange($event)\"\n              [pagerdata]=\"pagerdata\"\n              [pagesizes]=\"pagesizes\"\n              [pagingtext]=\"pagingtext\"\n              [pagesizetext]=\"pagesizetext\"\n              [pagesizedisabled]=\"pagesizedisabled\"\n            ></sac-paging>\n          </div>\n        </td>\n      </tr>\n    </tfoot>\n  </table>\n</div>\n",
+                    template: "<div\n    class=\"table-responsive\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <table\n        class=\"table table-striped table-hover\"\n        id=\"{{ name }}\">\n        <thead class=\"thead-light\">\n            <tr>\n                <ng-container *ngTemplateOutlet=\"template; context: { row: {}, type: 'header' }\"> </ng-container>\n            </tr>\n        </thead>\n        <tbody>\n            <ng-container *ngFor=\"let item of value; let i = index\">\n                <tr>\n                    <ng-container *ngTemplateOutlet=\"template; context: { row: item, type: 'body' }\"> </ng-container>\n                </tr>\n            </ng-container>\n            <tr\n                *ngIf=\"value === undefined || value === null || value.length === 0\"\n                data-e2e=\"emptyrow\">\n                <td [attr.colspan]=\"ColumnCount\">{{ emptytext }}</td>\n            </tr>\n        </tbody>\n        <tfoot *ngIf=\"pagerdata\">\n            <tr *ngIf=\"pagerdata\">\n                <td [attr.colspan]=\"ColumnCount\">\n                    <div class=\"container-fluid\">\n                        <sac-paging\n                            name=\"{{ name }}Paging\"\n                            (paging)=\"pageChange($event)\"\n                            [pagerdata]=\"pagerdata\"\n                            [pagesizes]=\"pagesizes\"\n                            [pagingtext]=\"pagingtext\"\n                            [pagesizetext]=\"pagesizetext\"\n                            [pagesizedisabled]=\"pagesizedisabled\"></sac-paging>\n                    </div>\n                </td>\n            </tr>\n        </tfoot>\n    </table>\n</div>\n",
                     // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                     providers: [
                         { provide: forms.NG_VALUE_ACCESSOR, multi: true, useExisting: SacGridComponent },
@@ -2014,48 +1993,33 @@
      */
     var SacGridButtonComponent = /** @class */ (function (_super) {
         __extends(SacGridButtonComponent, _super);
-        function SacGridButtonComponent() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        // #region Public Methods
+        // #region Constructors
         /**
-         * Returns the icon for the button
-         */
-        SacGridButtonComponent.prototype.getIconClass = function () {
-            var iconset = this.iconstyle;
-            var 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';
-            }
-            var result = iconset + ' ' + iconcss;
-            return result.trim();
-        };
+         * Construtor
+         *
+         * @param injector Injector to resolve  icons
+         */
+        function SacGridButtonComponent(injector) {
+            return _super.call(this, injector) || this;
+        }
         return SacGridButtonComponent;
     }(sacCommon.SacGridButtonCommon));
     SacGridButtonComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-gridbutton',
-                    template: "<a (click)=\"callaction()\" style=\"padding-right: 5px;\" [class.disabled]=\"isdisabled\" [attr.disabled]=\"isdisabled ? 'disabled' : null\"><span class=\"{{getIconClass()}}\"></span></a>\n"
+                    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"
                 },] }
     ];
+    SacGridButtonComponent.ctorParameters = function () { return [
+        { type: core.Injector }
+    ]; };
 
     /**
      * Grid Column Komponente
      */
     var SacGridColumnComponent = /** @class */ (function (_super) {
         __extends(SacGridColumnComponent, _super);
+        // #region Constructors
         /**
          * Konstruktor
          * @param grid Grid Referenz
@@ -2069,7 +2033,7 @@
     SacGridColumnComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-gridcolumn',
-                    template: "<th\n    scope=\"col\"\n    *ngIf=\"IsHeader()\"\n    [style.width]=\"width\"\n    (click)=\"SortByColumn()\">\n    <span>{{ header }}</span>\n    <span\n        class=\"ps-2\"\n        [class]=\"IconSortUp\"\n        *ngIf=\"IsSortedColumn() && GetSortDirection() === 'asc'\"></span>\n    <span\n        class=\"ps-2\"\n        [class]=\"IconSortDown\"\n        *ngIf=\"IsSortedColumn() && GetSortDirection() === 'desc'\"></span>\n</th>\n<td\n    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\">\n    </span>\n</td>\n",
+                    template: "<th\n    #headerElement\n    scope=\"col\"\n    *ngIf=\"IsHeader()\"\n    [style.width]=\"width\"\n    (click)=\"SortByColumn()\"\n    [class.text-right]=\"alignment === 'right'\"\n    [class.text-center]=\"alignment === 'center'\">\n    <span>{{ header }}</span>\n    <span\n        class=\"ps-2\"\n        [class]=\"IconSortUp\"\n        *ngIf=\"IsSortedColumn() && GetSortDirection() === 'asc'\"></span>\n    <span\n        class=\"ps-2\"\n        [class]=\"IconSortDown\"\n        *ngIf=\"IsSortedColumn() && GetSortDirection() === 'desc'\"></span>\n</th>\n<td\n    #bodyElement\n    scope=\"col\"\n    *ngIf=\"IsBody()\"\n    [style.width]=\"width\"\n    [class.ellipsis]=\"IsEllipsis()\"\n    (click)=\"ColumnClick()\"\n    [style.max-width]=\"IsEllipsis() ? width : null\"\n    [style.overflow]=\"IsEllipsis() ? 'hidden' : null\"\n    [style.text-overflow]=\"IsEllipsis() ? 'ellipsis' : null\"\n    [style.white-space]=\"IsEllipsis() ? 'nowrap' : null\"\n    [class.text-right]=\"alignment === 'right'\"\n    [class.text-center]=\"alignment === 'center'\"\n    [class.table-primary]=\"contextstyle === 'active' || contextstyle === 'primary'\"\n    [class.table-secondary]=\"contextstyle === 'secondary'\"\n    [class.table-light]=\"contextstyle === 'light'\"\n    [class.table-dark]=\"contextstyle === 'dark'\"\n    [class.table-success]=\"contextstyle === 'success'\"\n    [class.table-warning]=\"contextstyle === 'warning'\"\n    [class.table-danger]=\"contextstyle === 'danger'\"\n    [class.table-info]=\"contextstyle === 'info'\">\n    <span\n        [attr.title]=\"IsEllipsis() ? value : null\"\n        [innerHtml]=\"value\">\n    </span>\n</td>\n",
                     providers: [
                         {
                             provide: sacCommon.SacGridColumnBaseCommon,
@@ -2089,6 +2053,7 @@
      */
     var SacGridColumnActionComponent = /** @class */ (function (_super) {
         __extends(SacGridColumnActionComponent, _super);
+        // #region Constructors
         /**
          * Konstruktor
          * @param grid Referenz auf Grid
@@ -2104,7 +2069,7 @@
     SacGridColumnActionComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-gridcolumnaction',
-                    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",
+                    template: "<th\n    #headerElement\n    scope=\"col\"\n    *ngIf=\"IsHeader()\"\n    [style.width]=\"width\"\n    [class.text-right]=\"alignment === 'right'\"\n    [class.text-center]=\"alignment === 'center'\">\n    <span></span>\n</th>\n<td\n    #bodyElement\n    scope=\"col\"\n    class=\"px-2\"\n    [class.text-right]=\"alignment === 'right'\"\n    [class.text-center]=\"alignment === 'center'\"\n    *ngIf=\"IsBody()\"\n    [class.table-primary]=\"contextstyle === 'active' || contextstyle === 'primary'\"\n    [class.table-secondary]=\"contextstyle === 'secondary'\"\n    [class.table-light]=\"contextstyle === 'light'\"\n    [class.table-dark]=\"contextstyle === 'dark'\"\n    [class.table-success]=\"contextstyle === 'success'\"\n    [class.table-warning]=\"contextstyle === 'warning'\"\n    [class.table-danger]=\"contextstyle === 'danger'\"\n    [class.table-info]=\"contextstyle === 'info'\">\n    <ng-content></ng-content>\n</td>\n",
                     providers: [
                         {
                             provide: sacCommon.SacGridColumnBaseCommon,
@@ -2127,26 +2092,12 @@
         function SacGridImageComponent() {
             return _super !== null && _super.apply(this, arguments) || this;
         }
-        /**
-         * Gibt die CSS Klassen für Sprite Images zurück
-         * @returns CSS Klasse
-         */
-        SacGridImageComponent.prototype.getIconClass = function () {
-            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;
-            }
-        };
         return SacGridImageComponent;
     }(sacCommon.SacGridImageCommon));
     SacGridImageComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-gridimage',
-                    template: "<span><span class=\"{{getIconClass()}}\"></span></span>\n"
+                    template: "<span><span [ngClass]=\"iconstyle\"></span></span>\n"
                 },] }
     ];
 
@@ -2155,6 +2106,7 @@
      */
     var SacPagingComponent = /** @class */ (function (_super) {
         __extends(SacPagingComponent, _super);
+        // #region Constructors
         /**
          * Konstruktor
          * @param injector Angular Dependency Injection Service
@@ -2167,7 +2119,7 @@
     SacPagingComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-paging',
-                    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-select form-select-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=\"ms-2\">{{ PageSizeText | async }}</div>\n        </div>\n    </div>\n</div>\n",
+                    template: "<div\n    class=\"d-flex justify-content-between align-items-center flex-wrap\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\"\n    id=\"{{ name }}\">\n    <div\n        class=\"col-pagination order-2 order-md-1\"\n        id=\"{{ name }}_pages\">\n        <ul class=\"pagination mb-4 mb-md-0\">\n            <li\n                class=\"page-item\"\n                [ngClass]=\"{ 'aspNetDisabled disabled': activePageIndex === firstPageIndex }\">\n                <a\n                    class=\"page-link\"\n                    (click)=\"firstPage()\"\n                    >\u00AB</a\n                >\n            </li>\n            <li\n                class=\"page-item\"\n                *ngFor=\"let page of paginators; let i = index\"\n                [ngClass]=\"{ active: page === activePageIndex }\">\n                <a\n                    class=\"page-link\"\n                    (click)=\"changePage(page)\"\n                    >{{ page + 1 }}</a\n                >\n            </li>\n            <li\n                class=\"page-item\"\n                [ngClass]=\"{ 'aspNetDisabled disabled': activePageIndex === lastPageIndex }\">\n                <a\n                    class=\"page-link\"\n                    (click)=\"lastPage()\"\n                    >\u00BB</a\n                >\n            </li>\n        </ul>\n    </div>\n    <div class=\"col-summary order-1 order-md-2\">\n        <div class=\"mb-4 mb-md-0 mr-4 mb-md-0\">{{ PagingText | async }}</div>\n    </div>\n    <div\n        class=\"col-pagesize order-3\"\n        *ngIf=\"!pagesizedisabled\">\n        <div\n            class=\"d-flex align-items-center\"\n            id=\"{{ name }}_size\">\n            <select\n                class=\"form-select form-select-sm\"\n                style=\"width: 85px\"\n                id=\"{{ name }}_pagesize\"\n                [ngModel]=\"pageSize\"\n                (ngModelChange)=\"changePageSize($event)\">\n                <option\n                    [ngValue]=\"size\"\n                    *ngFor=\"let size of getPageSizes\">\n                    {{ size }}\n                </option>\n            </select>\n            <div class=\"ms-2\">{{ PageSizeText | async }}</div>\n        </div>\n    </div>\n</div>\n",
                     // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                     providers: [
                         { provide: forms.NG_VALUE_ACCESSOR, multi: true, useExisting: SacPagingComponent },
@@ -2190,11 +2142,23 @@
     }());
     SACBootstrap5GridModule.decorators = [
         { type: core.NgModule, args: [{
-                    declarations: [SacGridComponent, SacGridColumnComponent, SacGridColumnActionComponent, SacPagingComponent, SacGridButtonComponent, SacGridImageComponent],
-                    imports: [
-                        common.CommonModule, forms.FormsModule
+                    declarations: [
+                        SacGridComponent,
+                        SacGridColumnComponent,
+                        SacGridColumnActionComponent,
+                        SacPagingComponent,
+                        SacGridButtonComponent,
+                        SacGridImageComponent,
+                    ],
+                    imports: [common.CommonModule, forms.FormsModule, sacCommon.SACCommonUtliltiesModule],
+                    exports: [
+                        SacGridComponent,
+                        SacGridColumnComponent,
+                        SacGridColumnActionComponent,
+                        SacPagingComponent,
+                        SacGridButtonComponent,
+                        SacGridImageComponent,
                     ],
-                    exports: [SacGridComponent, SacGridColumnComponent, SacGridColumnActionComponent, SacPagingComponent, SacGridButtonComponent, SacGridImageComponent]
                 },] }
     ];
 
@@ -2217,7 +2181,7 @@
     SacInputComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-input',
-                    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) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n            <input\n                id=\"{{ name }}\"\n                name=\"{{ name }}\"\n                type=\"text\"\n                class=\"form-control\"\n                [value]=\"value\"\n                [attr.placeholder]=\"placeholder\"\n                [readonly]=\"readonly\"\n                (blur)=\"onTouch()\"\n                (input)=\"setValue($event.target.value)\"\n                (keypress)=\"onKeyPress($event)\"\n                [attr.maxlength]=\"maxtextlength\"\n                [class.is-invalid]=\"invalid && (dirty || touched)\"\n                [ngClass]=\"[componentHeight | toControlHeight]\"\n                [disabled]=\"isdisabled\" />\n\n            <div\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"invalid-feedback\">\n                {{ GetErrorMessage() | async }}\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n",
+                    template: "<div\n    class=\"row mb-3\"\n    [class.g-0]=\"disablelabel\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n            <input\n                id=\"{{ name }}\"\n                name=\"{{ name }}\"\n                type=\"text\"\n                class=\"form-control\"\n                [value]=\"value\"\n                [attr.placeholder]=\"placeholder\"\n                [readonly]=\"readonly\"\n                (blur)=\"onTouch()\"\n                (input)=\"setValue($event.target.value)\"\n                (keypress)=\"onKeyPress($event)\"\n                [attr.maxlength]=\"maxtextlength\"\n                [class.is-invalid]=\"invalid && (dirty || touched)\"\n                [ngClass]=\"[componentHeight | toControlHeight]\"\n                [disabled]=\"isdisabled\" />\n\n            <div\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"invalid-feedback\">\n                {{ GetErrorMessage() | async }}\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n",
                     // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                     providers: [
                         { provide: forms.NG_VALUE_ACCESSOR, multi: true, useExisting: SacInputComponent },
@@ -2253,7 +2217,7 @@
     SacInputAreaComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-inputarea',
-                    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) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n            <textarea\n                id=\"{{ name }}\"\n                name=\"{{ name }}\"\n                type=\"\"\n                class=\"form-control\"\n                [value]=\"value\"\n                [attr.placeholder]=\"placeholder\"\n                (blur)=\"onTouch()\"\n                (input)=\"setValue($event.target.value)\"\n                (keypress)=\"onKeyPress($event)\"\n                [attr.rows]=\"rows\"\n                [class.is-invalid]=\"invalid && (dirty || touched)\"\n                [ngClass]=\"[componentHeight | toControlHeight]\"\n                [disabled]=\"isdisabled\"\n                [attr.maxlength]=\"maxtextlength\"\n                [readonly]=\"readonly\"></textarea>\n            <div\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"invalid-feedback\">\n                {{ GetErrorMessage() | async }}\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n",
+                    template: "<div\n    class=\"row mb-3\"\n    [class.g-0]=\"disablelabel\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n            <textarea\n                id=\"{{ name }}\"\n                name=\"{{ name }}\"\n                type=\"\"\n                class=\"form-control\"\n                [value]=\"value\"\n                [attr.placeholder]=\"placeholder\"\n                (blur)=\"onTouch()\"\n                (input)=\"setValue($event.target.value)\"\n                (keypress)=\"onKeyPress($event)\"\n                [attr.rows]=\"rows\"\n                [class.is-invalid]=\"invalid && (dirty || touched)\"\n                [ngClass]=\"[componentHeight | toControlHeight]\"\n                [disabled]=\"isdisabled\"\n                [attr.maxlength]=\"maxtextlength\"\n                [readonly]=\"readonly\"></textarea>\n            <div\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"invalid-feedback\">\n                {{ GetErrorMessage() | async }}\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n",
                     // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                     providers: [
                         {
@@ -2293,7 +2257,7 @@
     SacInputCurrencyComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-inputcurrency',
-                    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) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n            <div\n                class=\"input-group input-group-sm\"\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\n                [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                <input\n                    id=\"{{ name }}\"\n                    name=\"{{ name }}\"\n                    type=\"text\"\n                    inputmode=\"decimal\"\n                    class=\"form-control\"\n                    [value]=\"value\"\n                    (blur)=\"onTouch()\"\n                    (input)=\"setValue($event.target.value)\"\n                    [attr.placeholder]=\"placeholder\"\n                    (keypress)=\"onKeyPress($event)\"\n                    [disabled]=\"isdisabled\"\n                    [readonly]=\"readonly\"\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\n                    [ngClass]=\"[componentHeight | toControlHeight]\" />\n                <span class=\"input-group-text\">{{ currency }}</span>\n                <div\n                    *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                    class=\"invalid-feedback\">\n                    {{ GetErrorMessage() | async }}\n                </div>\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n",
+                    template: "<div\n    class=\"row mb-3\"\n    [class.g-0]=\"disablelabel\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n            <div\n                class=\"input-group input-group-sm\"\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\n                [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                <input\n                    id=\"{{ name }}\"\n                    name=\"{{ name }}\"\n                    type=\"text\"\n                    inputmode=\"decimal\"\n                    class=\"form-control\"\n                    [value]=\"value\"\n                    (blur)=\"onTouch()\"\n                    (input)=\"setValue($event.target.value)\"\n                    [attr.placeholder]=\"placeholder\"\n                    (keypress)=\"onKeyPress($event)\"\n                    [disabled]=\"isdisabled\"\n                    [readonly]=\"readonly\"\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\n                    [ngClass]=\"[componentHeight | toControlHeight]\" />\n                <span class=\"input-group-text\">{{ currency }}</span>\n                <div\n                    *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                    class=\"invalid-feedback\">\n                    {{ GetErrorMessage() | async }}\n                </div>\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n",
                     // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                     providers: [
                         {
@@ -2333,7 +2297,7 @@
     SacInputDecimalComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-inputdecimal',
-                    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) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n            <input\n                id=\"{{ name }}\"\n                name=\"{{ name }}\"\n                type=\"text\"\n                inputmode=\"decimal\"\n                class=\"form-control\"\n                [value]=\"value\"\n                (blur)=\"onTouch()\"\n                (input)=\"setValue($event.target.value)\"\n                [attr.placeholder]=\"placeholder\"\n                [readonly]=\"readonly\"\n                (keypress)=\"onKeyPress($event)\"\n                [disabled]=\"isdisabled\"\n                [class.is-invalid]=\"invalid && (dirty || touched)\"\n                [ngClass]=\"[componentHeight | toControlHeight]\" />\n\n            <div\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"invalid-feedback\">\n                {{ GetErrorMessage() | async }}\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n",
+                    template: "<div\n    class=\"row mb-3\"\n    [class.g-0]=\"disablelabel\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n            <input\n                id=\"{{ name }}\"\n                name=\"{{ name }}\"\n                type=\"text\"\n                inputmode=\"decimal\"\n                class=\"form-control\"\n                [value]=\"value\"\n                (blur)=\"onTouch()\"\n                (input)=\"setValue($event.target.value)\"\n                [attr.placeholder]=\"placeholder\"\n                [readonly]=\"readonly\"\n                (keypress)=\"onKeyPress($event)\"\n                [disabled]=\"isdisabled\"\n                [class.is-invalid]=\"invalid && (dirty || touched)\"\n                [ngClass]=\"[componentHeight | toControlHeight]\" />\n\n            <div\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"invalid-feedback\">\n                {{ GetErrorMessage() | async }}\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n",
                     // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                     providers: [
                         {
@@ -2373,7 +2337,7 @@
     SacInputEmailComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-inputemail',
-                    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) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n            <div\n                class=\"input-group\"\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\n                [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                <span class=\"input-group-text\">@</span>\n                <input\n                    id=\"{{ name }}\"\n                    name=\"{{ name }}\"\n                    type=\"text\"\n                    inputmode=\"email\"\n                    class=\"form-control\"\n                    [value]=\"value\"\n                    (blur)=\"onTouch()\"\n                    (input)=\"setValue($event.target.value)\"\n                    [attr.placeholder]=\"placeholder\"\n                    [attr.maxlength]=\"maxtextlength\"\n                    autocomplete=\"email\"\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\n                    [ngClass]=\"[componentHeight | toControlHeight]\"\n                    [disabled]=\"isdisabled\"\n                    [readonly]=\"readonly\" />\n                <div\n                    *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                    class=\"invalid-feedback\">\n                    {{ GetErrorMessage() | async }}\n                </div>\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n",
+                    template: "<div\n    class=\"row mb-3\"\n    [class.g-0]=\"disablelabel\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n            <div\n                class=\"input-group\"\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\n                [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                <span class=\"input-group-text\">@</span>\n                <input\n                    id=\"{{ name }}\"\n                    name=\"{{ name }}\"\n                    type=\"text\"\n                    inputmode=\"email\"\n                    class=\"form-control\"\n                    [value]=\"value\"\n                    (blur)=\"onTouch()\"\n                    (input)=\"setValue($event.target.value)\"\n                    (keypress)=\"onKeyPress($event)\"\n                    [attr.placeholder]=\"placeholder\"\n                    [attr.maxlength]=\"maxtextlength\"\n                    autocomplete=\"email\"\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\n                    [ngClass]=\"[componentHeight | toControlHeight]\"\n                    [disabled]=\"isdisabled\"\n                    [readonly]=\"readonly\" />\n                <div\n                    *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                    class=\"invalid-feedback\">\n                    {{ GetErrorMessage() | async }}\n                </div>\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n",
                     // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                     providers: [
                         {
@@ -2413,7 +2377,7 @@
     SacInputIntegerComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-inputinteger',
-                    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) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n            <input\n                id=\"{{ name }}\"\n                name=\"{{ name }}\"\n                type=\"text\"\n                inputmode=\"decimal\"\n                class=\"form-control\"\n                [value]=\"value\"\n                (blur)=\"onTouch()\"\n                (input)=\"setValue($event.target.value)\"\n                [attr.placeholder]=\"placeholder\"\n                (keypress)=\"onKeyPress($event)\"\n                [disabled]=\"isdisabled\"\n                [readonly]=\"readonly\"\n                [class.is-invalid]=\"invalid && (dirty || touched)\"\n                [ngClass]=\"[componentHeight | toControlHeight]\" />\n\n            <div\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"invalid-feedback\">\n                {{ GetErrorMessage() | async }}\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n",
+                    template: "<div\n    class=\"row mb-3\"\n    [class.g-0]=\"disablelabel\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n            <input\n                id=\"{{ name }}\"\n                name=\"{{ name }}\"\n                type=\"text\"\n                inputmode=\"decimal\"\n                class=\"form-control\"\n                [value]=\"value\"\n                (blur)=\"onTouch()\"\n                (input)=\"setValue($event.target.value)\"\n                [attr.placeholder]=\"placeholder\"\n                (keypress)=\"onKeyPress($event)\"\n                [disabled]=\"isdisabled\"\n                [readonly]=\"readonly\"\n                [class.is-invalid]=\"invalid && (dirty || touched)\"\n                [ngClass]=\"[componentHeight | toControlHeight]\" />\n\n            <div\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"invalid-feedback\">\n                {{ GetErrorMessage() | async }}\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n",
                     // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                     providers: [
                         {
@@ -2453,7 +2417,7 @@
     SacInputPasswordComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-inputpassword',
-                    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) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n            <div\n                [class.input-group]=\"passwordeye\"\n                [class.has-validation]=\"passwordeye && isinlineerrorenabled && invalid && (dirty || touched)\">\n                <input\n                    id=\"{{ name }}\"\n                    name=\"{{ name }}\"\n                    [type]=\"passwordeyevisible ? 'text' : 'password'\"\n                    class=\"form-control\"\n                    [attr.placeholder]=\"placeholder\"\n                    [value]=\"value\"\n                    (blur)=\"onTouch()\"\n                    (input)=\"setValue($event.target.value)\"\n                    [attr.maxlength]=\"maxtextlength\"\n                    autocomplete=\"new-password\"\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\n                    [ngClass]=\"[componentHeight | toControlHeight]\"\n                    [disabled]=\"isdisabled\"\n                    [readonly]=\"readonly\" />\n                <a\n                    *ngIf=\"passwordeye\"\n                    class=\"btn btn-outline-secondary\"\n                    (click)=\"onTogglePasswordEye()\"\n                    ><span [ngClass]=\"passwordeyevisible ? PasswordEyeVisibleIcon : PasswordEyeHiddenIcon\"></span>\n                </a>\n                <div\n                    *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                    class=\"invalid-feedback\">\n                    {{ GetErrorMessage() | async }}\n                </div>\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n",
+                    template: "<div\n    class=\"row mb-3\"\n    [class.g-0]=\"disablelabel\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n            <div\n                [class.input-group]=\"passwordeye\"\n                [class.has-validation]=\"passwordeye && isinlineerrorenabled && invalid && (dirty || touched)\">\n                <input\n                    id=\"{{ name }}\"\n                    name=\"{{ name }}\"\n                    [type]=\"passwordeyevisible ? 'text' : 'password'\"\n                    class=\"form-control\"\n                    [attr.placeholder]=\"placeholder\"\n                    [value]=\"value\"\n                    (blur)=\"onTouch()\"\n                    (input)=\"setValue($event.target.value)\"\n                    (keypress)=\"onKeyPress($event)\"\n                    [attr.maxlength]=\"maxtextlength\"\n                    autocomplete=\"new-password\"\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\n                    [ngClass]=\"[componentHeight | toControlHeight]\"\n                    [disabled]=\"isdisabled\"\n                    [readonly]=\"readonly\" />\n                <a\n                    *ngIf=\"passwordeye\"\n                    class=\"btn btn-outline-secondary\"\n                    (click)=\"onTogglePasswordEye()\"\n                    ><span [ngClass]=\"passwordeyevisible ? PasswordEyeVisibleIcon : PasswordEyeHiddenIcon\"></span>\n                </a>\n                <div\n                    *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                    class=\"invalid-feedback\">\n                    {{ GetErrorMessage() | async }}\n                </div>\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n",
                     // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                     providers: [
                         {
@@ -2493,7 +2457,7 @@
     SacInputSearchComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-inputsearch',
-                    template: "<div\n    class=\"row mb-3\"\n    [class.g-0]=\"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) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n            <div\n                class=\"input-group\"\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\n                <input\n                    id=\"{{ name }}\"\n                    name=\"{{ name }}\"\n                    type=\"text\"\n                    inputmode=\"search\"\n                    class=\"form-control\"\n                    [value]=\"value\"\n                    [attr.placeholder]=\"placeholder\"\n                    (blur)=\"onTouch()\"\n                    (input)=\"setValue($event.target.value)\"\n                    [attr.maxlength]=\"maxtextlength\"\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\n                    [ngClass]=\"[componentHeight | toControlHeight]\"\n                    [disabled]=\"isdisabled\"\n                    [readonly]=\"readonly\" />\n                <button\n                    type=\"button\"\n                    class=\"btn btn-secondary\"\n                    id=\"{{ name }}_search\"\n                    (click)=\"searchClick()\">\n                    <i\n                        *ngIf=\"buttonmode === 'icon' || buttonmode === 'mixed'\"\n                        [class]=\"iconname\"\n                        [class.me-2]=\"buttonmode === 'mixed'\"></i>\n                    <ng-container *ngIf=\"buttonmode === 'text' || buttonmode === 'mixed'\">{{ buttontext }}</ng-container>\n                </button>\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n",
+                    template: "<div\n    class=\"row mb-3\"\n    [class.g-0]=\"disablelabel\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <label\n        id=\"{{ name }}_label\"\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n            <div\n                class=\"input-group\"\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\n                <input\n                    id=\"{{ name }}\"\n                    name=\"{{ name }}\"\n                    type=\"text\"\n                    inputmode=\"search\"\n                    class=\"form-control\"\n                    [value]=\"value\"\n                    [attr.placeholder]=\"placeholder\"\n                    (blur)=\"onTouch()\"\n                    (input)=\"setValue($event.target.value)\"\n                    (keypress)=\"onKeyPress($event)\"\n                    [attr.maxlength]=\"maxtextlength\"\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\n                    [ngClass]=\"[componentHeight | toControlHeight]\"\n                    [disabled]=\"isdisabled\"\n                    [readonly]=\"readonly\" />\n                <button\n                    type=\"button\"\n                    class=\"btn btn-secondary\"\n                    id=\"{{ name }}_search\"\n                    (click)=\"searchClick()\">\n                    <i\n                        *ngIf=\"buttonmode === 'icon' || buttonmode === 'mixed'\"\n                        [class]=\"iconname\"\n                        [class.me-2]=\"buttonmode === 'mixed'\"></i>\n                    <ng-container *ngIf=\"buttonmode === 'text' || buttonmode === 'mixed'\">{{ buttontext }}</ng-container>\n                </button>\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n",
                     // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                     providers: [
                         {
@@ -2531,11 +2495,7 @@
                         SacInputPasswordComponent,
                         SacInputSearchComponent,
                     ],
-                    imports: [
-                        common.CommonModule,
-                        SACBootstrap5LayoutModule,
-                        SACBootstrap5TooltipModule,
-                    ],
+                    imports: [common.CommonModule, SACBootstrap5LayoutModule, SACBootstrap5TooltipModule, sacCommon.SACCommonUtliltiesModule],
                     exports: [
                         SacInputComponent,
                         SacInputAreaComponent,
@@ -2549,7 +2509,11 @@
                 },] }
     ];
 
-    // #region Classes
+    // #region Variables
+    var DROPDOWN_TOKEN = new core.InjectionToken('SacDropdownToken');
+    var LISTBOX_TOKEN = new core.InjectionToken('SacListboxToken');
+    // #endregion Variables
+
     /**
      * Dropdown Komponente
      */
@@ -2571,9 +2535,10 @@
     SacDropdownComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-dropdown',
-                    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) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n            <select\n                #dropdownitem\n                id=\"{{ name }}\"\n                name=\"{{ name }}\"\n                class=\"form-select\"\n                [class.form-select-sm]=\"componentHeight === ControlHeight.Small\"\n                [class.form-select-lg]=\"componentHeight === ControlHeight.Large\"\n                [ngClass]=\"{ 'is-invalid': invalid && (dirty || touched) }\"\n                (blur)=\"onTouch()\"\n                (change)=\"setValue(dropdownitem.value)\"\n                [disabled]=\"isdisabled\">\n                <option\n                    *ngIf=\"emptylabel !== ''\"\n                    [ngValue]=\"emptyvalue\">\n                    {{ emptylabel }}\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            <div\n                class=\"invalid-feedback\"\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                {{ GetErrorMessage() | async }}\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n\n<ng-template\n    #defaultItemLabelTemplate\n    let-label=\"label\">\n    {{ label }}\n</ng-template>\n",
+                    template: "<div\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\"\n    class=\"row mb-3\"\n    [class.g-0]=\"disablelabel\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n            <select\n                #dropdownitem\n                id=\"{{ name }}\"\n                name=\"{{ name }}\"\n                class=\"form-select\"\n                [class.form-select-sm]=\"componentHeight === ControlHeight.Small\"\n                [class.form-select-lg]=\"componentHeight === ControlHeight.Large\"\n                [ngClass]=\"{ 'is-invalid': invalid && (dirty || touched) }\"\n                (blur)=\"onTouch()\"\n                (change)=\"setValue(dropdownitem.value)\"\n                [disabled]=\"isdisabled\">\n                <option\n                    *ngIf=\"emptylabel !== ''\"\n                    [ngValue]=\"emptyvalue\"\n                    >{{ emptylabel }}</option\n                >\n\n                <ng-content></ng-content>\n\n                <ng-container *ngIf=\"groupitems === ''\">\n                    <option\n                        *ngFor=\"let item of options\"\n                        [ngValue]=\"optionvalue ? item[optionvalue] : item\"\n                        [disabled]=\"optionenabled !== '' && item[optionenabled] === false\">\n                        <ng-template *ngTemplateOutlet=\"optionlabeltemplate || defaultItemLabelTemplate; context: { label: item[optionlabel], item: item }\"> </ng-template>\n                    </option>\n                </ng-container>\n\n                <ng-container *ngIf=\"groupitems !== ''\">\n                    <optgroup\n                        *ngFor=\"let group of options\"\n                        [attr.label]=\"group[grouplabel]\">\n                        <option\n                            *ngFor=\"let item of group[groupitems]\"\n                            [ngValue]=\"optionvalue ? item[optionvalue] : item\"\n                            [disabled]=\"optionenabled !== '' && item[optionenabled] === false\">\n                            <ng-template *ngTemplateOutlet=\"optionlabeltemplate || defaultItemLabelTemplate; context: { label: item[optionlabel], item: item }\"> </ng-template>\n                        </option>\n                    </optgroup>\n                </ng-container>\n            </select>\n            <div\n                class=\"invalid-feedback\"\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                {{ GetErrorMessage() | async }}\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n\n<ng-template\n    #defaultItemLabelTemplate\n    let-label=\"label\"\n    >{{ label }}</ng-template\n>\n",
                     // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                     providers: [
+                        { provide: DROPDOWN_TOKEN, useExisting: core.forwardRef(function () { return SacDropdownComponent; }) },
                         {
                             provide: forms.NG_VALUE_ACCESSOR,
                             multi: true,
@@ -2593,6 +2558,7 @@
         { type: core.Renderer2 },
         { type: core.ElementRef }
     ]; };
+
     /**
      * Direktive für Dropdown Option List
      */
@@ -2616,9 +2582,8 @@
     SacDropdownOptionDirective.ctorParameters = function () { return [
         { type: core.ElementRef },
         { type: core.Renderer2 },
-        { type: SacDropdownComponent, decorators: [{ type: core.Optional }, { type: core.Host }] }
+        { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [DROPDOWN_TOKEN,] }] }
     ]; };
-    // #endregion Classes
 
     var SACBootstrap5DropdownModule = /** @class */ (function () {
         function SACBootstrap5DropdownModule() {
@@ -2628,16 +2593,11 @@
     SACBootstrap5DropdownModule.decorators = [
         { type: core.NgModule, args: [{
                     declarations: [SacDropdownComponent, SacDropdownOptionDirective],
-                    imports: [
-                        common.CommonModule,
-                        SACBootstrap5LayoutModule,
-                        SACBootstrap5TooltipModule,
-                    ],
+                    imports: [common.CommonModule, SACBootstrap5LayoutModule, SACBootstrap5TooltipModule, sacCommon.SACCommonUtliltiesModule],
                     exports: [SacDropdownComponent, SacDropdownOptionDirective],
                 },] }
     ];
 
-    // #region Classes
     /**
      * Listbox Komponente
      */
@@ -2657,9 +2617,10 @@
     SacListboxComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-listbox',
-                    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) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\"\n            ><span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n            <select\n                multiple\n                id=\"{{ name }}\"\n                name=\"{{ name }}\"\n                class=\"form-select\"\n                [class.form-select-sm]=\"componentHeight === ControlHeight.Small\"\n                [class.form-select-lg]=\"componentHeight === ControlHeight.Large\"\n                [size]=\"rowsize\"\n                [ngClass]=\"{ 'is-invalid': invalid && (dirty || touched) }\"\n                (blur)=\"onTouch()\"\n                (change)=\"getSelectedItems($event.target)\"\n                [disabled]=\"isdisabled\">\n                <ng-content></ng-content>\n                <ng-container *ngIf=\"groupitems === ''\">\n                    <option\n                        *ngFor=\"let option of options\"\n                        [value]=\"option[optionvalue]\"\n                        [disabled]=\"optionenabled !== '' && option[optionenabled] === false\">\n                        {{ option[optionlabel] }}\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            <div\n                class=\"invalid-feedback\"\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                {{ GetErrorMessage() | async }}\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n",
+                    template: "<div\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\"\n    class=\"row mb-3\"\n    [class.g-0]=\"disablelabel\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\"\n            ><span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n            <select\n                multiple\n                id=\"{{ name }}\"\n                name=\"{{ name }}\"\n                class=\"form-select\"\n                [class.form-select-sm]=\"componentHeight === ControlHeight.Small\"\n                [class.form-select-lg]=\"componentHeight === ControlHeight.Large\"\n                [size]=\"rowsize\"\n                [ngClass]=\"{ 'is-invalid': invalid && (dirty || touched) }\"\n                (blur)=\"onTouch()\"\n                (change)=\"getSelectedItems($event.target)\"\n                [disabled]=\"isdisabled\">\n                <ng-content></ng-content>\n                <ng-container *ngIf=\"groupitems === ''\">\n                    <option\n                        *ngFor=\"let option of options\"\n                        [value]=\"option[optionvalue]\"\n                        [disabled]=\"optionenabled !== '' && option[optionenabled] === false\"\n                        >{{ option[optionlabel] }}</option\n                    >\n                </ng-container>\n                <ng-container *ngIf=\"groupitems !== ''\">\n                    <optgroup\n                        *ngFor=\"let option of options\"\n                        [attr.label]=\"option[grouplabel]\">\n                        <option\n                            *ngFor=\"let item of option[groupitems]\"\n                            [value]=\"item[optionvalue]\"\n                            [disabled]=\"optionenabled !== '' && item[optionenabled] === false\"\n                            >{{ item[optionlabel] }}</option\n                        >\n                    </optgroup>\n                </ng-container>\n            </select>\n            <div\n                class=\"invalid-feedback\"\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                {{ GetErrorMessage() | async }}\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n",
                     // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                     providers: [
+                        { provide: LISTBOX_TOKEN, useExisting: SacListboxComponent },
                         {
                             provide: forms.NG_VALUE_ACCESSOR,
                             multi: true,
@@ -2677,6 +2638,7 @@
         { type: SacFormLayoutDirective, decorators: [{ type: core.Host }, { type: core.Optional }] },
         { type: core.Injector }
     ]; };
+
     /**
      * Option Item in Listbox
      */
@@ -2700,9 +2662,8 @@
     SacListboxOptionDirective.ctorParameters = function () { return [
         { type: core.ElementRef },
         { type: core.Renderer2 },
-        { type: SacListboxComponent, decorators: [{ type: core.Optional }, { type: core.Host }] }
+        { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [LISTBOX_TOKEN,] }] }
     ]; };
-    // #endregion Classes
 
     var SACBootstrap5ListModule = /** @class */ (function () {
         function SACBootstrap5ListModule() {
@@ -2712,11 +2673,7 @@
     SACBootstrap5ListModule.decorators = [
         { type: core.NgModule, args: [{
                     declarations: [SacListboxComponent, SacListboxOptionDirective],
-                    imports: [
-                        common.CommonModule,
-                        SACBootstrap5LayoutModule,
-                        SACBootstrap5TooltipModule,
-                    ],
+                    imports: [common.CommonModule, SACBootstrap5LayoutModule, SACBootstrap5TooltipModule, sacCommon.SACCommonUtliltiesModule],
                     exports: [SacListboxComponent, SacListboxOptionDirective],
                 },] }
     ];
@@ -2747,7 +2704,7 @@
     SacMultilanguageInputComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-multilanguageinput',
-                    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) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n            <div\n                class=\"input-group\"\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\n                [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                placement=\"bottom-right\"\n                sac-multilanguagemenu\n                [buttontemplate]=\"menuButton\"\n                [inputtemplate]=\"menuInput\"\n                [validationtemplate]=\"validationMessage\"\n                #contextmenu>\n                <ng-template #menuInput>\n                    <input\n                        id=\"{{ name }}\"\n                        name=\"{{ name }}\"\n                        type=\"text\"\n                        class=\"form-control\"\n                        [value]=\"LanguageValue\"\n                        [attr.placeholder]=\"placeholder\"\n                        (blur)=\"onTouch()\"\n                        (input)=\"SetLanguageValue($event.target.value)\"\n                        [attr.maxlength]=\"maxtextlength\"\n                        [class.is-invalid]=\"invalid && (dirty || touched)\"\n                        [ngClass]=\"[componentHeight | toControlHeight]\"\n                        [disabled]=\"isdisabled\" />\n                </ng-template>\n\n                <ng-template #menuButton>\n                    <button\n                        sacMultilanguageMenuAnchor\n                        [id]=\"name + '_dropdownitem'\"\n                        type=\"button\"\n                        class=\"btn dropdown-toggle\"\n                        (click)=\"contextmenu.toggle()\"\n                        [ngClass]=\"[IsAnyEmpty() ? 'btn-warning' : 'btn-secondary']\">\n                        <img\n                            src=\"{{ SelectedIcon }}\"\n                            class=\"align-baseline mr-1 ml-1\"\n                            *ngIf=\"SelectedIconType === IconType.Image\" />\n                        <span\n                            [ngClass]=\"SelectedIcon\"\n                            class=\"align-baseline mr-1 ml-1\"\n                            *ngIf=\"SelectedIconType === IconType.CssSprite\"></span>\n                    </button>\n                </ng-template>\n\n                <ng-template #validationMessage>\n                    <div\n                        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                        class=\"invalid-feedback\">\n                        {{ GetErrorMessage() | async }}\n                    </div></ng-template\n                >\n\n                <ng-container *ngFor=\"let sprache of Languages\">\n                    <sac-multilanguagemenubutton\n                        *ngIf=\"sprache.IconType === IconType.Image\"\n                        text=\"{{ sprache.Text }}\"\n                        image=\"{{ sprache.Icon }}\"\n                        [cssclass]=\"IsEmpty(sprache) ? 'text-danger border-left border-danger' : ''\"\n                        (clicked)=\"SelectLanguage(sprache)\"></sac-multilanguagemenubutton>\n                    <sac-multilanguagemenubutton\n                        *ngIf=\"sprache.IconType === IconType.CssSprite\"\n                        text=\"{{ sprache.Text }}\"\n                        icon=\"{{ sprache.Icon }}\"\n                        [cssclass]=\"IsEmpty(sprache) ? 'text-danger border-left border-danger' : ''\"\n                        (clicked)=\"SelectLanguage(sprache)\"></sac-multilanguagemenubutton>\n                </ng-container>\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n<div class=\"row\">\n    <div class=\"col text-right\"></div>\n</div>\n",
+                    template: "<div\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\"\n    class=\"row mb-3\"\n    [class.g-0]=\"disablelabel\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n            <div\n                class=\"input-group\"\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\n                [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                placement=\"bottom-right\"\n                sac-multilanguagemenu\n                [buttontemplate]=\"menuButton\"\n                [inputtemplate]=\"menuInput\"\n                [validationtemplate]=\"validationMessage\"\n                #contextmenu>\n                <ng-template #menuInput>\n                    <input\n                        id=\"{{ name }}\"\n                        name=\"{{ name }}\"\n                        type=\"text\"\n                        class=\"form-control\"\n                        [value]=\"LanguageValue\"\n                        [attr.placeholder]=\"placeholder\"\n                        (blur)=\"onTouch()\"\n                        (input)=\"SetLanguageValue($event.target.value)\"\n                        [attr.maxlength]=\"maxtextlength\"\n                        [class.is-invalid]=\"invalid && (dirty || touched)\"\n                        [ngClass]=\"[componentHeight | toControlHeight]\"\n                        [disabled]=\"isdisabled\" />\n                </ng-template>\n\n                <ng-template #menuButton>\n                    <button\n                        sacMultilanguageMenuAnchor\n                        [id]=\"name + '_dropdownitem'\"\n                        type=\"button\"\n                        class=\"btn dropdown-toggle\"\n                        (click)=\"contextmenu.toggle()\"\n                        [ngClass]=\"[IsAnyEmpty() ? 'btn-warning' : 'btn-secondary']\">\n                        <img\n                            src=\"{{ SelectedIcon }}\"\n                            class=\"align-baseline mr-1 ml-1\"\n                            *ngIf=\"SelectedIconType === IconType.Image\" />\n                        <span\n                            [ngClass]=\"SelectedIcon\"\n                            class=\"align-baseline mr-1 ml-1\"\n                            *ngIf=\"SelectedIconType === IconType.CssSprite\"></span>\n                    </button>\n                </ng-template>\n\n                <ng-template #validationMessage>\n                    <div\n                        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                        class=\"invalid-feedback\">\n                        {{ GetErrorMessage() | async }}\n                    </div></ng-template\n                >\n\n                <ng-container *ngFor=\"let sprache of Languages\">\n                    <sac-multilanguagemenubutton\n                        *ngIf=\"sprache.IconType === IconType.Image\"\n                        text=\"{{ sprache.Text }}\"\n                        image=\"{{ sprache.Icon }}\"\n                        [cssclass]=\"IsEmpty(sprache) ? 'text-danger border-left border-danger' : ''\"\n                        (clicked)=\"SelectLanguage(sprache)\"></sac-multilanguagemenubutton>\n                    <sac-multilanguagemenubutton\n                        *ngIf=\"sprache.IconType === IconType.CssSprite\"\n                        text=\"{{ sprache.Text }}\"\n                        icon=\"{{ sprache.Icon }}\"\n                        [cssclass]=\"IsEmpty(sprache) ? 'text-danger border-left border-danger' : ''\"\n                        (clicked)=\"SelectLanguage(sprache)\"></sac-multilanguagemenubutton>\n                </ng-container>\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n<div class=\"row\">\n    <div class=\"col text-right\"></div>\n</div>\n",
                     // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                     providers: [
                         {
@@ -2794,7 +2751,7 @@
     SacMultilanguageInputAreaComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-multilanguageinputarea',
-                    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) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n            <div\n                class=\"input-group\"\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\n                [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                placement=\"bottom-right\"\n                sac-multilanguagemenu\n                [buttontemplate]=\"menuButton\"\n                [inputtemplate]=\"menuInput\"\n                [validationtemplate]=\"validationMessage\"\n                #contextmenu>\n                <ng-template #menuInput>\n                    <textarea\n                        id=\"{{ name }}\"\n                        name=\"{{ name }}\"\n                        type=\"text\"\n                        class=\"form-control\"\n                        [value]=\"LanguageValue\"\n                        [attr.placeholder]=\"placeholder\"\n                        (blur)=\"onTouch()\"\n                        style=\"height: auto\"\n                        (input)=\"SetLanguageValue($event.target.value)\"\n                        [attr.rows]=\"rows\"\n                        [attr.maxlength]=\"maxtextlength\"\n                        [class.is-invalid]=\"invalid && (dirty || touched)\"\n                        [ngClass]=\"[componentHeight | toControlHeight]\"\n                        [disabled]=\"isdisabled\"></textarea>\n                </ng-template>\n\n                <ng-template #menuButton>\n                    <button\n                        sacMultilanguageMenuAnchor\n                        [id]=\"name + '_dropdownitem'\"\n                        type=\"button\"\n                        class=\"btn dropdown-toggle\"\n                        (click)=\"contextmenu.toggle()\"\n                        [ngClass]=\"[IsAnyEmpty() ? 'btn-warning' : 'btn-secondary']\">\n                        <img\n                            src=\"{{ SelectedIcon }}\"\n                            class=\"align-baseline mr-1 ml-1\"\n                            *ngIf=\"SelectedIconType === IconType.Image\" />\n                        <i\n                            [ngClass]=\"SelectedIcon\"\n                            class=\"align-baseline mr-1 ml-1\"\n                            *ngIf=\"SelectedIconType === IconType.CssSprite\"></i>\n                    </button>\n                </ng-template>\n\n                <ng-template #validationMessage>\n                    <div\n                        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                        class=\"invalid-feedback\">\n                        {{ GetErrorMessage() | async }}\n                    </div></ng-template\n                >\n\n                <ng-container *ngFor=\"let sprache of Languages\">\n                    <sac-multilanguagemenubutton\n                        *ngIf=\"sprache.IconType === IconType.Image\"\n                        text=\"{{ sprache.Text }}\"\n                        image=\"{{ sprache.Icon }}\"\n                        [cssclass]=\"IsEmpty(sprache) ? 'text-danger border-left border-danger' : ''\"\n                        (clicked)=\"SelectLanguage(sprache)\"></sac-multilanguagemenubutton>\n                    <sac-multilanguagemenubutton\n                        *ngIf=\"sprache.IconType === IconType.CssSprite\"\n                        text=\"{{ sprache.Text }}\"\n                        icon=\"{{ sprache.Icon }}\"\n                        [cssclass]=\"IsEmpty(sprache) ? 'text-danger border-left border-danger' : ''\"\n                        (clicked)=\"SelectLanguage(sprache)\"></sac-multilanguagemenubutton>\n                </ng-container>\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n<div class=\"row\">\n    <div class=\"col text-right\"></div>\n</div>\n",
+                    template: "<div\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\"\n    class=\"row mb-3\"\n    [class.g-0]=\"disablelabel\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n            <div\n                class=\"input-group\"\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\n                [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                placement=\"bottom-right\"\n                sac-multilanguagemenu\n                [buttontemplate]=\"menuButton\"\n                [inputtemplate]=\"menuInput\"\n                [validationtemplate]=\"validationMessage\"\n                #contextmenu>\n                <ng-template #menuInput>\n                    <textarea\n                        id=\"{{ name }}\"\n                        name=\"{{ name }}\"\n                        type=\"text\"\n                        class=\"form-control\"\n                        [value]=\"LanguageValue\"\n                        [attr.placeholder]=\"placeholder\"\n                        (blur)=\"onTouch()\"\n                        style=\"height: auto\"\n                        (input)=\"SetLanguageValue($event.target.value)\"\n                        [attr.rows]=\"rows\"\n                        [attr.maxlength]=\"maxtextlength\"\n                        [class.is-invalid]=\"invalid && (dirty || touched)\"\n                        [ngClass]=\"[componentHeight | toControlHeight]\"\n                        [disabled]=\"isdisabled\"></textarea>\n                </ng-template>\n\n                <ng-template #menuButton>\n                    <button\n                        sacMultilanguageMenuAnchor\n                        [id]=\"name + '_dropdownitem'\"\n                        type=\"button\"\n                        class=\"btn dropdown-toggle\"\n                        (click)=\"contextmenu.toggle()\"\n                        [ngClass]=\"[IsAnyEmpty() ? 'btn-warning' : 'btn-secondary']\">\n                        <img\n                            src=\"{{ SelectedIcon }}\"\n                            class=\"align-baseline mr-1 ml-1\"\n                            *ngIf=\"SelectedIconType === IconType.Image\" />\n                        <i\n                            [ngClass]=\"SelectedIcon\"\n                            class=\"align-baseline mr-1 ml-1\"\n                            *ngIf=\"SelectedIconType === IconType.CssSprite\"></i>\n                    </button>\n                </ng-template>\n\n                <ng-template #validationMessage>\n                    <div\n                        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                        class=\"invalid-feedback\">\n                        {{ GetErrorMessage() | async }}\n                    </div></ng-template\n                >\n\n                <ng-container *ngFor=\"let sprache of Languages\">\n                    <sac-multilanguagemenubutton\n                        *ngIf=\"sprache.IconType === IconType.Image\"\n                        text=\"{{ sprache.Text }}\"\n                        image=\"{{ sprache.Icon }}\"\n                        [cssclass]=\"IsEmpty(sprache) ? 'text-danger border-left border-danger' : ''\"\n                        (clicked)=\"SelectLanguage(sprache)\"></sac-multilanguagemenubutton>\n                    <sac-multilanguagemenubutton\n                        *ngIf=\"sprache.IconType === IconType.CssSprite\"\n                        text=\"{{ sprache.Text }}\"\n                        icon=\"{{ sprache.Icon }}\"\n                        [cssclass]=\"IsEmpty(sprache) ? 'text-danger border-left border-danger' : ''\"\n                        (clicked)=\"SelectLanguage(sprache)\"></sac-multilanguagemenubutton>\n                </ng-container>\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n<div class=\"row\">\n    <div class=\"col text-right\"></div>\n</div>\n",
                     // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                     providers: [
                         {
@@ -2838,7 +2795,7 @@
     SacMultilanguagemenuComponent.decorators = [
         { type: core.Component, args: [{
                     selector: '[sac-multilanguagemenu]',
-                    template: "<ng-container\n  [ngTemplateOutlet]=\"inputtemplate || defaultInputTemplate\"\n></ng-container>\n<ng-container\n  [ngTemplateOutlet]=\"buttontemplate || defaultButtonTemplate\"\n></ng-container>\n<ng-container\n  [ngTemplateOutlet]=\"validationtemplate || defaultValidationTemplate\"\n></ng-container>\n\n<ul\n  class=\"dropdown-menu dropdown-menu-right\"\n  sacMultilanguageMenuContainer\n  [class.show]=\"isopen\"\n>\n  <ng-content></ng-content>\n</ul>\n\n<ng-template #defaultButtonTemplate>\n  <button\n    sacMultilanguageMenuAnchor\n    class=\"btn btn-secondary dropdown-toggle\"\n    type=\"button\"\n    (click)=\"toggle()\"\n  ></button>\n</ng-template>\n\n<ng-template #defaultInputTemplate>\n  <input type=\"text\" class=\"form-control\" />\n</ng-template>\n\n<ng-template #defaultValidationTemplate></ng-template>\n",
+                    template: "<ng-container [ngTemplateOutlet]=\"inputtemplate || defaultInputTemplate\"></ng-container>\n<ng-container [ngTemplateOutlet]=\"buttontemplate || defaultButtonTemplate\"></ng-container>\n<ng-container [ngTemplateOutlet]=\"validationtemplate || defaultValidationTemplate\"></ng-container>\n\n<ul\n    class=\"dropdown-menu dropdown-menu-right\"\n    sacMultilanguageMenuContainer\n    [class.show]=\"isopen\">\n    <ng-content></ng-content>\n</ul>\n\n<ng-template #defaultButtonTemplate>\n    <button\n        sacMultilanguageMenuAnchor\n        class=\"btn btn-secondary dropdown-toggle\"\n        type=\"button\"\n        (click)=\"toggle()\"></button>\n</ng-template>\n\n<ng-template #defaultInputTemplate>\n    <input\n        type=\"text\"\n        class=\"form-control\" />\n</ng-template>\n\n<ng-template #defaultValidationTemplate></ng-template>\n",
                     providers: [
                         {
                             provide: sacCommon.SacContextmenuCommon,
@@ -2936,7 +2893,7 @@
     SacMultilanguagemenuItemButtonComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-multilanguagemenubutton',
-                    template: "<li>\n  <button\n    type=\"button\"\n    class=\"dropdown-item\"\n    (click)=\"callaction($event)\"\n    [class.disabled]=\"isdisabled\"\n    [ngClass]=\"cssclass\"\n    [attr.disabled]=\"isdisabled ? 'disabled' : null\"\n  >\n    <div class=\"d-flex\">\n      <div *ngIf=\"!isicondisabled\" style=\"min-width: 1.5rem\">\n        <img *ngIf=\"image\" [src]=\"image\" class=\"align-baseline\" />\n        <i *ngIf=\"icon\" [class]=\"iconstyle + ' ' + icon\"></i>\n      </div>\n      <div class=\"flex-grow-1\">{{ text }}</div>\n    </div>\n  </button>\n</li>\n",
+                    template: "<li>\n    <button\n        type=\"button\"\n        class=\"dropdown-item\"\n        (click)=\"callaction($event)\"\n        [class.disabled]=\"isdisabled\"\n        [ngClass]=\"cssclass\"\n        [attr.disabled]=\"isdisabled ? 'disabled' : null\">\n        <div class=\"d-flex\">\n            <div\n                *ngIf=\"!isicondisabled\"\n                style=\"min-width: 1.5rem\">\n                <img\n                    *ngIf=\"image\"\n                    [src]=\"image\"\n                    class=\"align-baseline\" />\n                <i\n                    *ngIf=\"icon\"\n                    [class]=\"iconstyle + ' ' + icon\"></i>\n            </div>\n            <div class=\"flex-grow-1\">{{ text }}</div>\n        </div>\n    </button>\n</li>\n",
                     providers: [
                         {
                             provide: sacCommon.SacContextmenuItemCommon,
@@ -2962,11 +2919,7 @@
                         SacMultilanguagemenuContainerDirective,
                         SacMultilanguagemenuItemButtonComponent,
                     ],
-                    imports: [
-                        common.CommonModule,
-                        SACBootstrap5LayoutModule,
-                        SACBootstrap5TooltipModule,
-                    ],
+                    imports: [common.CommonModule, SACBootstrap5LayoutModule, SACBootstrap5TooltipModule, sacCommon.SACCommonUtliltiesModule],
                     exports: [SacMultilanguageInputComponent, SacMultilanguageInputAreaComponent],
                 },] }
     ];
@@ -3001,7 +2954,7 @@
     SacStaticFormContainerComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-staticformcontainer',
-                    template: "<div\n    class=\"row mb-3\"\n    [class.g-0]=\"disablelabel\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}_label\"\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div\n            [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            [class.was-validated]=\"isinlineerrorenabled && isinvalid && errormessage\">\n            <ng-content></ng-content>\n            <label\n                for=\"{{ name }}\"\n                class=\"form-label-adaptive form-label-fixed\"\n                [ngClass]=\"{ required: isrequired }\"\n                *ngIf=\"isAdaptiveLabel && !disablelabel\"\n                >{{ label }}</label\n            >\n            <div\n                class=\"invalid-feedback\"\n                *ngIf=\"isinlineerrorenabled && isinvalid && errormessage\">\n                {{ errormessage }}\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n",
+                    template: "<div\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\"\n    class=\"row mb-3\"\n    [class.g-0]=\"disablelabel\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}_label\"\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div\n            [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            [class.was-validated]=\"isinlineerrorenabled && isinvalid && errormessage\">\n            <ng-content></ng-content>\n            <label\n                for=\"{{ name }}\"\n                class=\"form-label-adaptive form-label-fixed\"\n                [ngClass]=\"{ required: isrequired }\"\n                *ngIf=\"isAdaptiveLabel && !disablelabel\"\n                >{{ label }}</label\n            >\n            <div\n                class=\"invalid-feedback\"\n                *ngIf=\"isinlineerrorenabled && isinvalid && errormessage\">\n                {{ errormessage }}\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n",
                     // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                     providers: [
                         {
@@ -3041,7 +2994,7 @@
     SacStaticLabelComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-staticlabel',
-                    template: "<div\n    class=\"row mb-3\"\n    [class.g-0]=\"disablelabel\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}_label\"\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\"\n            ><span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div>\n            <div\n                [id]=\"name\"\n                class=\"form-control-plaintext\"\n                [ngClass]=\"[componentHeight | toControlHeight]\"\n                [innerHTML]=\"value\"></div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n",
+                    template: "<div\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\"\n    class=\"row mb-3\"\n    [class.g-0]=\"disablelabel\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}_label\"\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\"\n            ><span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div>\n            <div\n                [id]=\"name\"\n                class=\"form-control-plaintext\"\n                [ngClass]=\"[componentHeight | toControlHeight]\"\n                [innerHTML]=\"value\"></div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n",
                     // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                     providers: [
                         {
@@ -3070,11 +3023,7 @@
     SACBootstrap5StaticLabelModule.decorators = [
         { type: core.NgModule, args: [{
                     declarations: [SacStaticLabelComponent, SacStaticFormContainerComponent],
-                    imports: [
-                        common.CommonModule,
-                        SACBootstrap5LayoutModule,
-                        SACBootstrap5TooltipModule,
-                    ],
+                    imports: [common.CommonModule, SACBootstrap5LayoutModule, SACBootstrap5TooltipModule, sacCommon.SACCommonUtliltiesModule],
                     exports: [SacStaticLabelComponent, SacStaticFormContainerComponent],
                 },] }
     ];
@@ -3092,7 +3041,7 @@
     SacTabItemComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-tabitem',
-                    template: "<div [id]=\"id\" [hidden]=\"unloadwhenhidden === false && active === false\" *ngIf=\"(unloadwhenhidden === true && active === true) || unloadwhenhidden === false\" class=\"tab-pane\">\n  <ng-template [ngTemplateOutlet]=\"templateRef\"></ng-template>\n</div>\n"
+                    template: "<div\n    [id]=\"id\"\n    [hidden]=\"unloadwhenhidden === false && active === false\"\n    *ngIf=\"(unloadwhenhidden === true && active === true) || unloadwhenhidden === false\"\n    class=\"tab-pane\">\n    <ng-template [ngTemplateOutlet]=\"templateRef\"></ng-template>\n</div>\n"
                 },] }
     ];
 
@@ -3104,6 +3053,8 @@
         function SacTabComponent() {
             return _super !== null && _super.apply(this, arguments) || this;
         }
+        // #endregion Properties
+        // #region Public Methods
         /**
          * Gibt die TabItems zurück
          * @returns Array von TabItems
@@ -3116,7 +3067,7 @@
     SacTabComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-tab',
-                    template: "<!-- Nav tabs -->\n<ul class=\"nav nav-tabs\" role=\"tablist\">\n  <li class=\"nav-item\" *ngFor=\"let item of _tabItems\">\n    <a\n      [id]=\"GetTabItemButtonId(item.id)\"\n      role=\"tab\"\n      class=\"nav-link\"\n      data-toggle=\"tab\"\n      [ngClass]=\"{ 'active': item.active, 'disabled': item.disabled }\"\n      (click)=\"selectTab(item)\"\n      [ngStyle]=\"{'cursor': item.disabled ? 'not-allowed' : 'pointer'}\"\n      >{{item.label}}</a\n    >\n  </li>\n</ul>\n\n<!-- Tab panes -->\n<div class=\"tab-content pl-3 pt-2\">\n  <ng-content></ng-content>\n</div>\n"
+                    template: "<!-- Nav tabs -->\n<ul\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\"\n    class=\"nav nav-tabs\"\n    role=\"tablist\">\n    <li\n        class=\"nav-item\"\n        *ngFor=\"let item of _tabItems\">\n        <a\n            [id]=\"GetTabItemButtonId(item.id)\"\n            role=\"tab\"\n            class=\"nav-link\"\n            data-toggle=\"tab\"\n            [ngClass]=\"{ active: item.active, disabled: item.disabled }\"\n            (click)=\"selectTab(item)\"\n            [ngStyle]=\"{ cursor: item.disabled ? 'not-allowed' : 'pointer' }\"\n            >{{ item.label }}</a\n        >\n    </li>\n</ul>\n\n<!-- Tab panes -->\n<div class=\"tab-content pl-3 pt-2\">\n    <ng-content></ng-content>\n</div>\n"
                 },] }
     ];
     SacTabComponent.propDecorators = {
@@ -3131,7 +3082,7 @@
     SACBootstrap5TabsModule.decorators = [
         { type: core.NgModule, args: [{
                     declarations: [SacTabComponent, SacTabItemComponent],
-                    imports: [common.CommonModule],
+                    imports: [common.CommonModule, sacCommon.SACCommonUtliltiesModule],
                     exports: [SacTabComponent, SacTabItemComponent],
                 },] }
     ];
@@ -3165,7 +3116,7 @@
     SacTinyMceComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-tinymce',
-                    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) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n            <editor\n                [id]=\"name + '_tinymce'\"\n                [init]=\"_config\"\n                [initialValue]=\"value\"\n                ngModel\n                [ngModelOptions]=\"{ standalone: true }\"\n                (ngModelChange)=\"setValue($event)\"\n                (onSaveContent)=\"save($event.event.content)\"\n                [disabled]=\"disabled\"\n                [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\"></editor>\n            <div\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"invalid-feedback\">\n                {{ GetErrorMessage() | async }}\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n\n    <sac-dialog\n        *ngIf=\"selectdialogvisible\"\n        [allowesc]=\"false\"\n        [backdrop]=\"true\"\n        [(isvisible)]=\"selectdialogvisible\"\n        title=\"{{ lngResourceService.GetString(validationKeyService.TinyMceFileselectDialogtitle) | async }}\"\n        size=\"large\"\n        height=\"500px\">\n        <ng-container dialogbody>\n            <sac-filebrowser\n                [apiurl]=\"filebrowserapiurl\"\n                (file)=\"selectDialogSettings.value = $event\"\n                [allowfoldercreate]=\"allowfoldercreate\"\n                [allowfolderrename]=\"allowfolderrename\"\n                [allowfolderdelete]=\"allowfolderdelete\"\n                [allowfileupload]=\"allowfileupload\"\n                [allowfilerename]=\"allowfilerename\"\n                [allowfiledelete]=\"allowfiledelete\"\n                [selectedfile]=\"selectDialogSettings.value\"\n                [allowedtypes]=\"selectDialogSettings.allowedtypes\"></sac-filebrowser>\n        </ng-container>\n        <ng-container dialogfooter>\n            <sac-button\n                role=\"primary\"\n                [name]=\"name + '_modalOk'\"\n                text=\"{{ lngResourceService.GetString(validationKeyService.TinyMceFileselectOk) | async }}\"\n                (clicked)=\"setSelectDialogResult()\"></sac-button>\n            <sac-button\n                [name]=\"name + '_modalClose'\"\n                text=\"{{ lngResourceService.GetString(validationKeyService.TinyMceFileselectCancel) | async }}\"\n                (clicked)=\"closeSelectDialog()\"></sac-button>\n        </ng-container>\n    </sac-dialog>\n</div>\n",
+                    template: "<div\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\"\n    class=\"row mb-3\"\n    [class.g-0]=\"disablelabel\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n            <editor\n                [id]=\"name + '_tinymce'\"\n                [init]=\"_config\"\n                [initialValue]=\"value\"\n                ngModel\n                [ngModelOptions]=\"{ standalone: true }\"\n                (ngModelChange)=\"setValue($event)\"\n                (onSaveContent)=\"save($event.event.content)\"\n                (onBlur)=\"blur()\"\n                [disabled]=\"disabled\"\n                [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\"></editor>\n            <div\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"invalid-feedback\">\n                {{ GetErrorMessage() | async }}\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"form-text\">\n                {{ helptext }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n            [ngClass]=\"[componentHeight | toControlHeight]\">\n            <sac-tooltip\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [ngClass]=\"HelptextTooltipIcon\"\n                    class=\"ml-1\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n\n    <sac-dialog\n        *ngIf=\"selectdialogvisible\"\n        [allowesc]=\"false\"\n        [backdrop]=\"true\"\n        [(isvisible)]=\"selectdialogvisible\"\n        title=\"{{ lngResourceService.GetString(validationKeyService.TinyMceFileselectDialogtitle) | async }}\"\n        size=\"large\"\n        height=\"500px\">\n        <ng-container dialogbody>\n            <sac-filebrowser\n                [apiurl]=\"filebrowserapiurl\"\n                (file)=\"selectDialogSettings.value = $event\"\n                [allowfoldercreate]=\"allowfoldercreate\"\n                [allowfolderrename]=\"allowfolderrename\"\n                [allowfolderdelete]=\"allowfolderdelete\"\n                [allowfileupload]=\"allowfileupload\"\n                [allowfilerename]=\"allowfilerename\"\n                [allowfiledelete]=\"allowfiledelete\"\n                [selectedfile]=\"selectDialogSettings.value\"\n                [allowedtypes]=\"selectDialogSettings.allowedtypes\"></sac-filebrowser>\n        </ng-container>\n        <ng-container dialogfooter>\n            <sac-button\n                role=\"primary\"\n                [name]=\"name + '_modalOk'\"\n                text=\"{{ lngResourceService.GetString(validationKeyService.TinyMceFileselectOk) | async }}\"\n                (clicked)=\"setSelectDialogResult()\"></sac-button>\n            <sac-button\n                [name]=\"name + '_modalClose'\"\n                text=\"{{ lngResourceService.GetString(validationKeyService.TinyMceFileselectCancel) | async }}\"\n                (clicked)=\"closeSelectDialog()\"></sac-button>\n        </ng-container>\n    </sac-dialog>\n</div>\n",
                     // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                     providers: [
                         {
@@ -3179,7 +3130,7 @@
                             multi: true,
                         },
                     ],
-                    styles: [".is-invalid{border:1px solid var(--bs-form-invalid-border-color)}"]
+                    styles: [".is-invalid{border:1px solid var(--bs-form-invalid-border-color)}::ng-deep .tox.tox-tinymce-aux{z-index:900}::ng-deep .tox.tox-tinymce-aux .tox-dialog-wrap{z-index:800}"]
                 },] }
     ];
     SacTinyMceComponent.ctorParameters = function () { return [
@@ -3205,6 +3156,7 @@
                         SACBootstrap5BrowserModule,
                         SACBootstrap5LayoutModule,
                         SACBootstrap5TooltipModule,
+                        sacCommon.SACCommonUtliltiesModule,
                     ],
                     exports: [SacTinyMceComponent],
                 },] }
@@ -3229,7 +3181,7 @@
     SacTreeviewComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-treeview',
-                    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) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\n        <div [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n            <div\n                class=\"w-100\"\n                [style.min-width]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 0 : null\"\n                [class.me-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n                <ul\n                    class=\"list-group list-group-flush\"\n                    id=\"{{ name }}\"\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\n                    [class.border]=\"invalid && (dirty || touched)\"\n                    [class.border-danger]=\"invalid && (dirty || touched)\">\n                    <ng-container *ngFor=\"let node of data\">\n                        <ng-template\n                            [ngTemplateOutlet]=\"treeItem\"\n                            [ngTemplateOutletContext]=\"{ node: node, deep: 0, path: '', textpath: '' }\">\n                        </ng-template>\n                    </ng-container>\n                </ul>\n\n                <div\n                    *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                    class=\"invalid-feedback\">\n                    {{ GetErrorMessage() | async }}\n                </div>\n\n                <div\n                    *ngIf=\"helptextmode === 'text' && helptext\"\n                    class=\"form-text\">\n                    {{ helptext }}\n                </div>\n            </div>\n\n            <div\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n                class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n                [ngClass]=\"[componentHeight | toControlHeight]\">\n                <sac-tooltip\n                    [tooltiptext]=\"helptext\"\n                    [inlinemode]=\"true\">\n                    <span\n                        [ngClass]=\"HelptextTooltipIcon\"\n                        class=\"ml-1\">\n                    </span>\n                </sac-tooltip>\n            </div>\n        </div>\n    </div>\n</div>\n<ng-template\n    #treeItem\n    let-node=\"node\"\n    let-deep=\"deep\"\n    let-path=\"path\"\n    let-textpath=\"textpath\">\n    <li\n        class=\"list-group-item list-group-item-action py-1 px-2 d-flex align-items-center\"\n        [class.active]=\"isSelectedState(node)\"\n        (mouseenter)=\"setHoverState(node, true)\"\n        (mouseleave)=\"setHoverState(node, false)\"\n        style=\"cursor: pointer\"\n        attr.data-path=\"{{ path }}/{{ getStringField(node, attrid) }}\"\n        attr.data-textpath=\"{{ textpath }}/{{ getStringField(node, attrlabel) }}\">\n        <div\n            class=\"mx-3\"\n            *ngFor=\"let i of count(deep)\">\n        </div>\n\n        <div\n            (click)=\"onNodeClicked(node)\"\n            *ngIf=\"expandedstate === 'true' || expandedstate === true\"\n            class=\"me-2\"\n            [ngClass]=\"!hasChildren(node) ? iconFolderEmpty : !isExpandedState(node) ? iconFolderCollabsed : isExpandedState(node) ? iconFolderOpen : ''\">\n        </div>\n\n        <div\n            (click)=\"onNodeClicked(node)\"\n            *ngIf=\"attricon && getStringField(node, attricon)\">\n            <ng-template\n                [ngTemplateOutlet]=\"templateicon || defaultTemplateIcon\"\n                [ngTemplateOutletContext]=\"{ node: node }\">\n            </ng-template>\n        </div>\n\n        <div\n            (click)=\"onNodeClicked(node)\"\n            class=\"flex-grow-1 py-1\"\n            [style.max-width.percent]=\"enableellipsis ? '100' : null\"\n            [style.overflow]=\"enableellipsis ? 'hidden' : null\"\n            [style.text-overflow]=\"enableellipsis ? 'ellipsis' : null\"\n            [style.white-space]=\"enableellipsis ? 'nowrap' : null\">\n            <ng-template\n                [ngTemplateOutlet]=\"templatelabel || defaultTemplateLabel\"\n                [ngTemplateOutletContext]=\"{ node: node, label: getStringField(node, attrlabel) }\">\n            </ng-template>\n        </div>\n\n        <div\n            (click)=\"setSelectedState(node)\"\n            class=\"flex-shrink-0\"\n            *ngIf=\"!isDisabledState(node) && (showactionalways || isSelectedState(node) || isHoverState(node))\">\n            <ng-template\n                [ngTemplateOutlet]=\"templateaction || defaultTemplateAction\"\n                [ngTemplateOutletContext]=\"{ node: node, actionhandler: onActionClicked.bind(this) }\">\n            </ng-template>\n        </div>\n    </li>\n\n    <ng-container *ngIf=\"isExpandedState(node)\">\n        <ng-template\n            *ngFor=\"let child of getChildren(node)\"\n            [ngTemplateOutlet]=\"treeItem\"\n            [ngTemplateOutletContext]=\"{\n                node: child,\n                deep: deep + 1,\n                path: path + '/' + getStringField(node, attrid),\n                textpath: textpath + '/' + getStringField(node, attrlabel)\n            }\">\n        </ng-template>\n    </ng-container>\n</ng-template>\n<ng-template\n    #defaultTemplateLabel\n    let-label=\"label\"\n    let-node=\"node\">\n    <span [title]=\"label\">\n        {{ label }}\n    </span>\n</ng-template>\n\n<ng-template\n    #defaultTemplateIcon\n    let-node=\"node\">\n    <div\n        class=\"me-2\"\n        [ngClass]=\"getStringField(node, attricon)\">\n    </div>\n</ng-template>\n\n<ng-template\n    #defaultTemplateAction\n    let-node=\"node\"\n    let-actionhandler=\"actionhandler\">\n    <a\n        class=\"btn btn-sm btn-link text-secondary\"\n        (click)=\"actionhandler({ action: 'default', node: node })\">\n        <i [class]=\"iconAction\"></i>\n    </a>\n</ng-template>\n",
+                    template: "<div\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\"\n    class=\"row mb-3\"\n    [class.g-0]=\"disablelabel\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-12 col-form-label d-flex\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\n        [class.required]=\"isrequired\">\n        <div\n            class=\"text flex-grow-0\"\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\n            {{ label }}\n        </div>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [ngClass]=\"HelptextTooltipIcon\"\n                class=\"ms-1\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\n        <div [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n            <div\n                class=\"w-100\"\n                [style.min-width]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 0 : null\"\n                [class.me-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n                <ul\n                    class=\"list-group list-group-flush\"\n                    id=\"{{ name }}\"\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\n                    [class.border]=\"invalid && (dirty || touched)\"\n                    [class.border-danger]=\"invalid && (dirty || touched)\">\n                    <ng-container *ngFor=\"let node of data\">\n                        <ng-template\n                            [ngTemplateOutlet]=\"treeItem\"\n                            [ngTemplateOutletContext]=\"{ node: node, deep: 0, path: '', textpath: '' }\">\n                        </ng-template>\n                    </ng-container>\n                </ul>\n\n                <div\n                    *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                    class=\"invalid-feedback\">\n                    {{ GetErrorMessage() | async }}\n                </div>\n\n                <div\n                    *ngIf=\"helptextmode === 'text' && helptext\"\n                    class=\"form-text\">\n                    {{ helptext }}\n                </div>\n            </div>\n\n            <div\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n                class=\"form-control-plaintext align-self-top ms-2 me-1 w-auto\"\n                [ngClass]=\"[componentHeight | toControlHeight]\">\n                <sac-tooltip\n                    [tooltiptext]=\"helptext\"\n                    [inlinemode]=\"true\">\n                    <span\n                        [ngClass]=\"HelptextTooltipIcon\"\n                        class=\"ml-1\">\n                    </span>\n                </sac-tooltip>\n            </div>\n        </div>\n    </div>\n</div>\n<ng-template\n    #treeItem\n    let-node=\"node\"\n    let-deep=\"deep\"\n    let-path=\"path\"\n    let-textpath=\"textpath\">\n    <li\n        class=\"list-group-item list-group-item-action py-1 px-2 d-flex align-items-center\"\n        [class.active]=\"isSelectedState(node)\"\n        (mouseenter)=\"setHoverState(node, true)\"\n        (mouseleave)=\"setHoverState(node, false)\"\n        style=\"cursor: pointer\"\n        attr.data-path=\"{{ path }}/{{ getStringField(node, attrid) }}\"\n        attr.data-textpath=\"{{ textpath }}/{{ getStringField(node, attrlabel) }}\">\n        <div\n            class=\"mx-3\"\n            *ngFor=\"let i of count(deep)\">\n        </div>\n\n        <div\n            (click)=\"onNodeClicked(node)\"\n            *ngIf=\"expandedstate === 'true' || expandedstate === true\"\n            class=\"me-2\"\n            [ngClass]=\"!hasChildren(node) ? iconFolderEmpty : !isExpandedState(node) ? iconFolderCollabsed : isExpandedState(node) ? iconFolderOpen : ''\">\n        </div>\n\n        <div\n            (click)=\"onNodeClicked(node)\"\n            *ngIf=\"attricon && getStringField(node, attricon)\">\n            <ng-template\n                [ngTemplateOutlet]=\"templateicon || defaultTemplateIcon\"\n                [ngTemplateOutletContext]=\"{ node: node }\">\n            </ng-template>\n        </div>\n\n        <div\n            (click)=\"onNodeClicked(node)\"\n            class=\"flex-grow-1 py-1\"\n            [style.max-width.percent]=\"enableellipsis ? '100' : null\"\n            [style.overflow]=\"enableellipsis ? 'hidden' : null\"\n            [style.text-overflow]=\"enableellipsis ? 'ellipsis' : null\"\n            [style.white-space]=\"enableellipsis ? 'nowrap' : null\">\n            <ng-template\n                [ngTemplateOutlet]=\"templatelabel || defaultTemplateLabel\"\n                [ngTemplateOutletContext]=\"{ node: node, label: getStringField(node, attrlabel) }\">\n            </ng-template>\n        </div>\n\n        <div\n            (click)=\"setSelectedState(node)\"\n            class=\"flex-shrink-0\"\n            *ngIf=\"!isDisabledState(node) && (showactionalways || isSelectedState(node) || isHoverState(node))\">\n            <ng-template\n                [ngTemplateOutlet]=\"templateaction || defaultTemplateAction\"\n                [ngTemplateOutletContext]=\"{ node: node, actionhandler: onActionClicked.bind(this) }\">\n            </ng-template>\n        </div>\n    </li>\n\n    <ng-container *ngIf=\"isExpandedState(node)\">\n        <ng-template\n            *ngFor=\"let child of getChildren(node)\"\n            [ngTemplateOutlet]=\"treeItem\"\n            [ngTemplateOutletContext]=\"{\n                node: child,\n                deep: deep + 1,\n                path: path + '/' + getStringField(node, attrid),\n                textpath: textpath + '/' + getStringField(node, attrlabel)\n            }\">\n        </ng-template>\n    </ng-container>\n</ng-template>\n<ng-template\n    #defaultTemplateLabel\n    let-label=\"label\"\n    let-node=\"node\">\n    <span [title]=\"label\">{{ label }}</span>\n</ng-template>\n\n<ng-template\n    #defaultTemplateIcon\n    let-node=\"node\">\n    <div\n        class=\"me-2\"\n        [ngClass]=\"getStringField(node, attricon)\">\n    </div>\n</ng-template>\n\n<ng-template\n    #defaultTemplateAction\n    let-node=\"node\"\n    let-actionhandler=\"actionhandler\">\n    <a\n        class=\"btn btn-sm btn-link text-secondary\"\n        (click)=\"actionhandler({ action: 'default', node: node })\">\n        <i [class]=\"iconAction\"></i>\n    </a>\n</ng-template>\n",
                     providers: [
                         {
                             provide: forms.NG_VALUE_ACCESSOR,
@@ -3257,7 +3209,13 @@
     SACBootstrap5TreeviewModule.decorators = [
         { type: core.NgModule, args: [{
                     declarations: [SacTreeviewComponent],
-                    imports: [common.CommonModule, SACBootstrap5LayoutModule, SACBootstrap5ContextmenuModule, SACBootstrap5TooltipModule],
+                    imports: [
+                        common.CommonModule,
+                        SACBootstrap5LayoutModule,
+                        SACBootstrap5ContextmenuModule,
+                        SACBootstrap5TooltipModule,
+                        sacCommon.SACCommonUtliltiesModule,
+                    ],
                     exports: [SacTreeviewComponent],
                 },] }
     ];
@@ -3281,7 +3239,7 @@
     SacValidationSummaryComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-validationsummary',
-                    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",
+                    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",
                     // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                     providers: [
                         {
@@ -3305,10 +3263,8 @@
     SACBootstrap5ValidationSummaryModule.decorators = [
         { type: core.NgModule, args: [{
                     declarations: [SacValidationSummaryComponent],
-                    imports: [
-                        common.CommonModule
-                    ],
-                    exports: [SacValidationSummaryComponent]
+                    imports: [common.CommonModule, sacCommon.SACCommonUtliltiesModule],
+                    exports: [SacValidationSummaryComponent],
                 },] }
     ];
 
@@ -3337,6 +3293,8 @@
         function SacWizardComponent() {
             return _super !== null && _super.apply(this, arguments) || this;
         }
+        // #endregion Properties
+        // #region Public Methods
         /**
          * Gibt die Wizard Items zurück
          * @returns Collection von WizardItems
@@ -3349,11 +3307,9 @@
     SacWizardComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-wizard',
-                    template: "<ul class=\"nav nav-wizard\" role=\"tablist\">\n  <li *ngFor=\"let item of _wizardItems\" class=\"nav-item\" [ngClass]=\"{ 'active': item._active, 'disabled': item._disabled, 'success': item._iscomplete }\"\n      [ngStyle]=\"{'cursor': item._disabled ? 'not-allowed' : 'pointer'}\">\n    <a role=\"tab\" (click)=\"selectStep(item)\">\n      <div class=\"circle\">\n        <span class=\"step\"></span>\n      </div>\n    </a>\n    <div class=\"info\">\n      <a (click)=\"selectStep(item)\">{{item._label}}</a>\n    </div>\n  </li>\n</ul>\n",
+                    template: "<ul\n    class=\"nav nav-wizard\"\n    role=\"tablist\">\n    <li\n        *ngFor=\"let item of _wizardItems\"\n        class=\"nav-item\"\n        [ngClass]=\"{ active: item._active, disabled: item._disabled, success: item._iscomplete }\"\n        [ngStyle]=\"{ cursor: item._disabled ? 'not-allowed' : 'pointer' }\">\n        <a\n            role=\"tab\"\n            (click)=\"selectStep(item)\">\n            <div class=\"circle\">\n                <span class=\"step\"></span>\n            </div>\n        </a>\n        <div class=\"info\">\n            <a>{{ item._label }}</a>\n        </div>\n    </li>\n</ul>\n",
                     // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
-                    providers: [
-                        { provide: forms.NG_VALUE_ACCESSOR, multi: true, useExisting: SacWizardComponent },
-                    ]
+                    providers: [{ provide: forms.NG_VALUE_ACCESSOR, multi: true, useExisting: SacWizardComponent }]
                 },] }
     ];
     SacWizardComponent.propDecorators = {
@@ -3368,7 +3324,7 @@
     SACBootstrap5WizardModule.decorators = [
         { type: core.NgModule, args: [{
                     declarations: [SacWizardComponent, SacWizardItemComponent],
-                    imports: [common.CommonModule, SACBootstrap5LayoutModule],
+                    imports: [common.CommonModule, SACBootstrap5LayoutModule, sacCommon.SACCommonUtliltiesModule],
                     exports: [SacWizardComponent, SacWizardItemComponent],
                 },] }
     ];
@@ -3463,10 +3419,12 @@
     exports.SacWizardItemComponent = SacWizardItemComponent;
     exports.ServiceConfirm = ServiceConfirm;
     exports.ɵa = SacContextmenuContainerDirective;
-    exports.ɵb = SacMultilanguagemenuComponent;
-    exports.ɵc = SacMultilanguagemenuAnchorDirective;
-    exports.ɵd = SacMultilanguagemenuContainerDirective;
-    exports.ɵe = SacMultilanguagemenuItemButtonComponent;
+    exports.ɵb = DROPDOWN_TOKEN;
+    exports.ɵc = LISTBOX_TOKEN;
+    exports.ɵd = SacMultilanguagemenuComponent;
+    exports.ɵe = SacMultilanguagemenuAnchorDirective;
+    exports.ɵf = SacMultilanguagemenuContainerDirective;
+    exports.ɵg = SacMultilanguagemenuItemButtonComponent;
 
     Object.defineProperty(exports, '__esModule', { value: true });