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

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common/http'), require('rxjs'), require('@angular/forms'), require('moment'), require('imask'), require('ngx-uploadx'), require('@angular/common')) :
-    typeof define === 'function' && define.amd ? define('@simpleangularcontrols/sac-common', ['exports', '@angular/core', '@angular/common/http', 'rxjs', '@angular/forms', 'moment', 'imask', 'ngx-uploadx', '@angular/common'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.simpleangularcontrols = global.simpleangularcontrols || {}, global.simpleangularcontrols['sac-common'] = {}), global.ng.core, global.ng.common.http, global.rxjs, global.ng.forms, global.moment, global.IMask, global.ngxUploadx, global.ng.common));
-}(this, (function (exports, i0, i1, rxjs, forms, moment_, IMask, ngxUploadx, common) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common/http'), require('rxjs'), require('@angular/forms'), require('moment'), require('angular-imask'), require('imask'), require('ngx-uploadx'), require('@angular/common')) :
+    typeof define === 'function' && define.amd ? define('@simpleangularcontrols/sac-common', ['exports', '@angular/core', '@angular/common/http', 'rxjs', '@angular/forms', 'moment', 'angular-imask', 'imask', 'ngx-uploadx', '@angular/common'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.simpleangularcontrols = global.simpleangularcontrols || {}, global.simpleangularcontrols['sac-common'] = {}), global.ng.core, global.ng.common.http, global.rxjs, global.ng.forms, global.moment, global.angularImask, global.IMask, global.ngxUploadx, global.ng.common));
+}(this, (function (exports, i0, i1, rxjs, forms, moment_, angularImask, IMask, ngxUploadx, common) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -23,37 +23,51 @@
              */
             this._role = 'default';
             /**
-             * Input Property für Icon Style Klasse; default Wert - ''
-             */
-            this.icon = '';
-            /**
-             * Input Property für Name; default Wert - ''
-             */
-            this.name = '';
-            /**
-             * Input Property für Text des Buttons; default Wert - ''
+             * Das boolean property ist benutzt für Aktivation des Spinner des Button. Default ist false.
              */
-            this.text = '';
+            this._isloadingvalue = false;
             /**
              * Output Event Emitter
              */
             this.clicked = new i0.EventEmitter();
             /**
-             * Das boolean property ist benutzt für Aktivation des Spinner des Button. Default ist false.
+             * Identifier used for the E2E data attribute.
              */
-            this._isloadingvalue = false;
+            this.e2eidentifier = null;
             /**
              * Boolean Property für Error; default Wert - false
              */
             this.hasError = false;
+            /**
+             * Input Property für Icon Style Klasse; default Wert - ''
+             */
+            this.icon = '';
+            /**
+             * Input Property für Name; default Wert - ''
+             */
+            this.name = '';
+            /**
+             * Input Property für Text des Buttons; default Wert - ''
+             */
+            this.text = '';
             // #endregion Public Methods
         }
+        Object.defineProperty(SacButtonCommon.prototype, "_isdisabled", {
+            // #endregion Properties
+            // #region Public Getters And Setters
+            /**
+             * Getter Methode. Ergibt boolean Wert. Definiert, ob das Button desabled ist.
+             */
+            get: function () {
+                return this._isdisabledvalue;
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(SacButtonCommon.prototype, "isdisabled", {
             get: function () {
                 return this._isdisabledvalue;
             },
-            // #endregion Properties
-            // #region Public Getters And Setters
             /**
              * Deaktivieren von Buttons
              * @param v Deaktiviert den Button
@@ -130,16 +144,6 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(SacButtonCommon.prototype, "_isdisabled", {
-            /**
-             * Getter Methode. Ergibt boolean Wert. Definiert, ob das Button desabled ist.
-             */
-            get: function () {
-                return this._isdisabledvalue;
-            },
-            enumerable: false,
-            configurable: true
-        });
         // #endregion Public Getters And Setters
         // #region Public Methods
         /**
@@ -156,10 +160,11 @@
         { type: i0.Directive }
     ];
     SacButtonCommon.propDecorators = {
+        clicked: [{ type: i0.Output }],
+        e2eidentifier: [{ type: i0.Input }],
         icon: [{ type: i0.Input }],
         name: [{ type: i0.Input }],
         text: [{ type: i0.Input }],
-        clicked: [{ type: i0.Output }],
         isdisabled: [{ type: i0.Input }],
         isloading: [{ type: i0.Input }],
         role: [{ type: i0.Input }]
@@ -678,6 +683,7 @@
      */
     var SacFormLayoutCommon = /** @class */ (function () {
         function SacFormLayoutCommon() {
+            // #region Properties
             /**
              * Defines the default display for a checkbox. You can choose between a checkbox and a switch. If no style is defined, the global style or the style on the control is used.
              */
@@ -726,8 +732,11 @@
              * Detach label text and tooltip from each other in Label so that label and tooltip can be aligned differently. This is in Bootstrap 3 not supported!
              */
             this.splitlabelandhelptext = null;
+            // #endregion Public Getters And Setters
         }
         Object.defineProperty(SacFormLayoutCommon.prototype, "IsInlineErrorEnabled", {
+            // #endregion Properties
+            // #region Public Getters And Setters
             /**
              * Returns whether the inline error messages for the form are active.
              */
@@ -776,6 +785,13 @@
         ControlHeight[ControlHeight["Large"] = 2] = "Large";
     })(exports.ControlHeight || (exports.ControlHeight = {}));
 
+    // #region Variables
+    /**
+     * injection token for component configuration service
+     */
+    var SACCONFIGURATION_SERVICE = new i0.InjectionToken('SacConfigurationService');
+    // #endregion Variables
+    // #region Exported Classes
     /**
      * abstract class for configuration settings providing in components
      */
@@ -797,6 +813,7 @@
             return _super !== null && _super.apply(this, arguments) || this;
         }
         Object.defineProperty(SacDefaultConfigurationService.prototype, "CheckboxStyle", {
+            // #region Public Getters And Setters
             /**
              * @inheritdoc
              */
@@ -826,6 +843,16 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(SacDefaultConfigurationService.prototype, "EnableE2EAttributes", {
+            /**
+             * @inheritdoc
+             */
+            get: function () {
+                return false;
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(SacDefaultConfigurationService.prototype, "HelptextMode", {
             /**
              * @inheritdoc
@@ -932,10 +959,6 @@
     SacDefaultConfigurationService.decorators = [
         { type: i0.Injectable, args: [{ providedIn: 'root' },] }
     ];
-    /**
-     * injection token for component configuration service
-     */
-    var SACCONFIGURATION_SERVICE = new i0.InjectionToken('SacConfigurationService');
 
     /**
      * Klasse für API Request zum löschen eines Files
@@ -1035,10 +1058,13 @@
         return BrowserNodeRequest;
     }());
 
+    // #region Variables
     /**
      * Injection Token für Language Service
      */
     var SACFILEBROWSER_SERVICE = new i0.InjectionToken('FileBrowserService');
+    // #endregion Variables
+    // #region Exported Classes
     /**
      * Abstrakte Implementierung des File Service für die Browser Component
      */
@@ -1058,6 +1084,7 @@
      */
     var SacDefaultFileBrowserService = /** @class */ (function (_super) {
         __extends(SacDefaultFileBrowserService, _super);
+        // #region Constructors
         /**
          * Konstruktor
          * @param httpclient HTTP Client Service
@@ -1067,18 +1094,20 @@
             _this.httpclient = httpclient;
             return _this;
         }
+        // #endregion Constructors
+        // #region Public Methods
         /**
-         * Gibt einen Node zurück
+         * Löscht eine Datei
          * @param apiurl URL zu API Service
-         * @param path Pfad des Node welcher angefordert wird
-         * @param allowedextensions Erlaubte Extensions die angezeigt werden dürfen
+         * @param path Pfad des Files welches gelöscht werden soll
+         * @param allowedextensions Erlaubte Extensions für Files
          */
-        SacDefaultFileBrowserService.prototype.GetNode = function (apiurl, path, allowedextensions) {
-            var url = apiurl + "/getnodes";
+        SacDefaultFileBrowserService.prototype.DeleteFile = function (apiurl, path, allowedextensions) {
+            var url = apiurl + "/deletefile";
             if (!path) {
                 path = '';
             }
-            var request = new BrowserNodeRequest({
+            var request = new BrowserFileDeleteRequest({
                 Path: path,
                 AllowedTypes: allowedextensions,
             });
@@ -1087,113 +1116,115 @@
             });
         };
         /**
-         * Speichert einen Node
+         * Löscht einen Node
          * @param apiurl URL zu API Service
-         * @param path Pfad in welchem der Node gespeichert werden soll
-         * @param newFoldername Name des neuen Nodes
+         * @param path Pfad des Nodes welcher gelöscht werden soll
          */
-        SacDefaultFileBrowserService.prototype.SaveNode = function (apiurl, path, newFoldername) {
-            var url = apiurl + "/newnode";
+        SacDefaultFileBrowserService.prototype.DeleteNode = function (apiurl, path) {
+            var url = apiurl + "/deletenode";
             if (!path) {
                 path = '';
             }
-            var request = new BrowserNodeNewRequest({
+            var request = new BrowserNodeDeleteRequest({
                 Path: path,
-                NewFoldername: newFoldername,
             });
             return this.httpclient.post(url, request, {
                 withCredentials: true,
             });
         };
         /**
-         * Rename eines Nodes
+         * Methode welche die Dateien eines Nodes ausliest
          * @param apiurl URL zu API Service
-         * @param path Pfad des Nodes welcher umbenannt werden soll
-         * @param newFoldername Neuer Name des Nodes
+         * @param path Pfad des Nodes in welchem die Files gelesen werden sollen
+         * @param allowedextensions Erlaubte File Extensions
          */
-        SacDefaultFileBrowserService.prototype.RenameNode = function (apiurl, path, newFoldername) {
-            var url = apiurl + "/renamenode";
+        SacDefaultFileBrowserService.prototype.GetFiles = function (apiurl, path, allowedextensions) {
+            var url = apiurl + "/getfiles";
             if (!path) {
                 path = '';
             }
-            var request = new BrowserNodeRenameRequest({
+            var request = new BrowserNodeRequest({
                 Path: path,
-                NewFoldername: newFoldername,
+                AllowedTypes: allowedextensions,
             });
-            return this.httpclient.put(url, request, {
+            return this.httpclient.post(url, request, {
                 withCredentials: true,
             });
         };
         /**
-         * Löscht einen Node
+         * Gibt einen Node zurück
          * @param apiurl URL zu API Service
-         * @param path Pfad des Nodes welcher gelöscht werden soll
+         * @param path Pfad des Node welcher angefordert wird
+         * @param allowedextensions Erlaubte Extensions die angezeigt werden dürfen
          */
-        SacDefaultFileBrowserService.prototype.DeleteNode = function (apiurl, path) {
-            var url = apiurl + "/deletenode";
+        SacDefaultFileBrowserService.prototype.GetNode = function (apiurl, path, allowedextensions) {
+            var url = apiurl + "/getnodes";
             if (!path) {
                 path = '';
             }
-            var request = new BrowserNodeDeleteRequest({
+            var request = new BrowserNodeRequest({
                 Path: path,
+                AllowedTypes: allowedextensions,
             });
             return this.httpclient.post(url, request, {
                 withCredentials: true,
             });
         };
         /**
-         * Methode welche die Dateien eines Nodes ausliest
+         * Methode welche eine Datei umbenannt
          * @param apiurl URL zu API Service
-         * @param path Pfad des Nodes in welchem die Files gelesen werden sollen
-         * @param allowedextensions Erlaubte File Extensions
+         * @param path Pfad zum File welches umbenannt werden soll
+         * @param newFilename Neuer Dateiname
+         * @param allowedextensions Erlaubte Extension für Files
          */
-        SacDefaultFileBrowserService.prototype.GetFiles = function (apiurl, path, allowedextensions) {
-            var url = apiurl + "/getfiles";
+        SacDefaultFileBrowserService.prototype.RenameFile = function (apiurl, path, newFilename, allowedextensions) {
+            var url = apiurl + "/renamefile";
             if (!path) {
                 path = '';
             }
-            var request = new BrowserNodeRequest({
+            var request = new BrowserFileRenameRequest({
                 Path: path,
+                NewFilename: newFilename,
                 AllowedTypes: allowedextensions,
             });
-            return this.httpclient.post(url, request, {
+            return this.httpclient.put(url, request, {
                 withCredentials: true,
             });
         };
         /**
-         * Speichert eine Hochgeladene Datei in der Struktur
+         * Rename eines Nodes
          * @param apiurl URL zu API Service
-         * @param path Pfad in welchem das neue File gespeichert werden soll
-         * @param id ID des Uploads
-         * @param allowedextensions Erlaubte Extensions für den Upload
+         * @param path Pfad des Nodes welcher umbenannt werden soll
+         * @param newFoldername Neuer Name des Nodes
          */
-        SacDefaultFileBrowserService.prototype.SaveFile = function (apiurl, path, id, allowedextensions) {
-            var url = apiurl + "/uploadfile";
+        SacDefaultFileBrowserService.prototype.RenameNode = function (apiurl, path, newFoldername) {
+            var url = apiurl + "/renamenode";
             if (!path) {
                 path = '';
             }
-            var request = new BrowserFileSaveRequest({
+            var request = new BrowserNodeRenameRequest({
                 Path: path,
-                UploadId: id,
-                AllowedTypes: allowedextensions,
+                NewFoldername: newFoldername,
             });
-            return this.httpclient.post(url, request, {
+            return this.httpclient.put(url, request, {
                 withCredentials: true,
             });
         };
         /**
-         * Löscht eine Datei
+         * Speichert eine Hochgeladene Datei in der Struktur
          * @param apiurl URL zu API Service
-         * @param path Pfad des Files welches gelöscht werden soll
-         * @param allowedextensions Erlaubte Extensions für Files
+         * @param path Pfad in welchem das neue File gespeichert werden soll
+         * @param id ID des Uploads
+         * @param allowedextensions Erlaubte Extensions für den Upload
          */
-        SacDefaultFileBrowserService.prototype.DeleteFile = function (apiurl, path, allowedextensions) {
-            var url = apiurl + "/deletefile";
+        SacDefaultFileBrowserService.prototype.SaveFile = function (apiurl, path, id, allowedextensions) {
+            var url = apiurl + "/uploadfile";
             if (!path) {
                 path = '';
             }
-            var request = new BrowserFileDeleteRequest({
+            var request = new BrowserFileSaveRequest({
                 Path: path,
+                UploadId: id,
                 AllowedTypes: allowedextensions,
             });
             return this.httpclient.post(url, request, {
@@ -1201,23 +1232,21 @@
             });
         };
         /**
-         * Methode welche eine Datei umbenannt
+         * Speichert einen Node
          * @param apiurl URL zu API Service
-         * @param path Pfad zum File welches umbenannt werden soll
-         * @param newFilename Neuer Dateiname
-         * @param allowedextensions Erlaubte Extension für Files
+         * @param path Pfad in welchem der Node gespeichert werden soll
+         * @param newFoldername Name des neuen Nodes
          */
-        SacDefaultFileBrowserService.prototype.RenameFile = function (apiurl, path, newFilename, allowedextensions) {
-            var url = apiurl + "/renamefile";
+        SacDefaultFileBrowserService.prototype.SaveNode = function (apiurl, path, newFoldername) {
+            var url = apiurl + "/newnode";
             if (!path) {
                 path = '';
             }
-            var request = new BrowserFileRenameRequest({
+            var request = new BrowserNodeNewRequest({
                 Path: path,
-                NewFilename: newFilename,
-                AllowedTypes: allowedextensions,
+                NewFoldername: newFoldername,
             });
-            return this.httpclient.put(url, request, {
+            return this.httpclient.post(url, request, {
                 withCredentials: true,
             });
         };
@@ -1401,6 +1430,56 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(SacDefaultIconService.prototype, "GridButtonDefaultDeleteIcon", {
+            /**
+             * @inheritdoc
+             */
+            get: function () {
+                return 'fa-trash';
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(SacDefaultIconService.prototype, "GridButtonDefaultDeleteIconSet", {
+            /**
+             * @inheritdoc
+             */
+            get: function () {
+                return 'fa';
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(SacDefaultIconService.prototype, "GridButtonDefaultEditIcon", {
+            /**
+             * @inheritdoc
+             */
+            get: function () {
+                return 'fa-pen';
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(SacDefaultIconService.prototype, "GridButtonDefaultEditIconSet", {
+            /**
+             * @inheritdoc
+             */
+            get: function () {
+                return 'fa';
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(SacDefaultIconService.prototype, "GridButtonDisabledIconSuffix", {
+            /**
+             * @inheritdoc
+             */
+            get: function () {
+                return ' disabled';
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(SacDefaultIconService.prototype, "GridComponentSortDown", {
             /**
              * @inheritdoc
@@ -1566,10 +1645,13 @@
         IconType[IconType["CssSprite"] = 2] = "CssSprite";
     })(exports.IconType || (exports.IconType = {}));
 
+    // #region Variables
     /**
      * injection token for language service
      */
     var SACLANGUAGE_SERVICE = new i0.InjectionToken('SacLanguageService');
+    // #endregion Variables
+    // #region Exported Classes
     /**
      * abstract class for languages provides in components
      */
@@ -1590,6 +1672,7 @@
         function SacDefaultLanguageService() {
             return _super !== null && _super.apply(this, arguments) || this;
         }
+        // #region Public Methods
         /**
          * @inheritdoc
          */
@@ -2591,10 +2674,10 @@
         return obj;
     }
 
-    // #region Functions
     /**
      * create a guid with crypto library if availabe and a fallback to Math.Random implementation
      */
+    // #region Exported Functions
     function createGuid() {
         if (typeof crypto !== undefined && crypto['randomUUID'] !== undefined) {
             // return guid without hyphen
@@ -2602,12 +2685,12 @@
         }
         else {
             return 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
-                var r = (Math.random() * 16) | 0, v = c == 'x' ? r : (r & 0x3) | 0x8;
+                var r = (Math.random() * 16) | 0, v = c === 'x' ? r : (r & 0x3) | 0x8;
                 return v.toString(16);
             });
         }
     }
-    // #endregion Functions
+    // #endregion Exported Functions
 
     /**
      * Abstract Klasse für SacBaseModelControl. Implements ControlValueAccessor, Validator, OnInit
@@ -2667,6 +2750,10 @@
              * Deaktiviert das Label im Template
              */
             this.disablelabel = false;
+            /**
+             * Identifier used for the E2E data attribute.
+             */
+            this.e2eidentifier = null;
             /**
              * Text to support the user during input.
              */
@@ -3158,6 +3245,7 @@
         componentHeight: [{ type: i0.Input }],
         disabled: [{ type: i0.Input }],
         disablelabel: [{ type: i0.Input }],
+        e2eidentifier: [{ type: i0.Input }],
         helptext: [{ type: i0.Input }],
         helptextmode: [{ type: i0.Input }],
         inlineError: [{ type: i0.Input }],
@@ -4056,12 +4144,15 @@
      * Base Komponente für Dialog
      */
     var SacDialogCommon = /** @class */ (function () {
+        // #endregion Properties
+        // #region Constructors
         /**
          * Konstruktor
          * Inject des Formulars
          */
         function SacDialogCommon(cdRef) {
             this.cdRef = cdRef;
+            // #region Properties
             this.hasSetBodyTag = false;
             /**
              * Boolean Property definiert ob das Dialog angezeigt wird
@@ -4084,20 +4175,26 @@
              * Steuert ob im Header des Dialogs ein Button angezeigt wird.
              */
             this.closebutton = true;
+            /**
+             * Identifier used for the E2E data attribute.
+             */
+            this.e2eidentifier = null;
             /**
              * Output Emitter. Wird aufgerufen, wenn das Wert des _show property geändert ist - damait das Dialog geöfnet/geschlossen wird.
              */
             this.isvisibleChange = new i0.EventEmitter();
             /**
-             * Input Property. Erhält den Namen des Dialog - benutzt für das ID. Default Value: ''
+             * name of control
              */
-            this.name = '';
+            this.name = createGuid();
             /**
              * Input Property. Erhält den Title des Dialog. Default Value: 'Dialog'.
              */
             this.title = 'Dialog';
         }
         Object.defineProperty(SacDialogCommon.prototype, "dialogElementSetter", {
+            // #endregion Constructors
+            // #region Public Getters And Setters
             /**
              * Implementation als Setter, da mit ngIf das Element bei Unsichtbarkeit UNDEFINED ist.
              */
@@ -4118,15 +4215,11 @@
              * Setter. Erhält das boolen Wert des _show property
              */
             set: function (v) {
-                if (v &&
-                    !this.hasSetBodyTag &&
-                    !document.body.classList.contains('modal-open')) {
+                if (v && !this.hasSetBodyTag && !document.body.classList.contains('modal-open')) {
                     document.body.classList.add('modal-open');
                     this.hasSetBodyTag = true;
                 }
-                if (!v &&
-                    this.hasSetBodyTag &&
-                    document.body.classList.contains('modal-open')) {
+                if (!v && this.hasSetBodyTag && document.body.classList.contains('modal-open')) {
                     document.body.classList.remove('modal-open');
                     this.hasSetBodyTag = false;
                 }
@@ -4149,6 +4242,8 @@
             configurable: true
         });
         Object.defineProperty(SacDialogCommon.prototype, "ChangeDetector", {
+            // #endregion Public Getters And Setters
+            // #region Protected Getters And Setters
             /**
              * Getter for ChangeDetector.
              */
@@ -4158,6 +4253,8 @@
             enumerable: false,
             configurable: true
         });
+        // #endregion Protected Getters And Setters
+        // #region Public Methods
         /**
          * Die Methode setz den Wert des _show property auf false
          */
@@ -4204,8 +4301,7 @@
          */
         SacDialogCommon.prototype.show = function () {
             this._show = true;
-            if (!this.hasSetBodyTag &&
-                !document.body.classList.contains('modal-open')) {
+            if (!this.hasSetBodyTag && !document.body.classList.contains('modal-open')) {
                 document.body.classList.add('modal-open');
                 this.hasSetBodyTag = true;
             }
@@ -4223,6 +4319,7 @@
         allowesc: [{ type: i0.Input }],
         backdrop: [{ type: i0.Input }],
         closebutton: [{ type: i0.Input }],
+        e2eidentifier: [{ type: i0.Input }],
         isvisibleChange: [{ type: i0.Output }],
         name: [{ type: i0.Input }],
         title: [{ type: i0.Input }],
@@ -4233,8 +4330,7 @@
         onKeydownHandler: [{ type: i0.HostListener, args: ['document:keydown', ['$event'],] }]
     };
 
-    // #endregion Type aliases
-    // #region Classes
+    // #region Exported Classes
     /**
      * Base Komponente für SacFormular
      */
@@ -4367,7 +4463,7 @@
     SacFormCommon.propDecorators = {
         updateon: [{ type: i0.Input }]
     };
-    // #endregion Classes
+    // #endregion Exported Types
 
     /**
      * Abstract Klasse für SacBaseListControl. Extendes SacBaseModelControl
@@ -4461,6 +4557,7 @@
      * @param id ID
      * @param value Wert der an das Element gebunden werden soll
      */
+    // #region Exported Functions
     function _buildValueString(id, value) {
         // Wenn ID null ist Object zurückgeben
         if (id == null) {
@@ -4473,12 +4570,15 @@
         // String als ID
         return (id + ": " + value).slice(0, 50);
     }
+    // #endregion Exported Functions
 
     /**
      * Base Dropdown Komponente
      */
     var SacDropdownCommon = /** @class */ (function (_super) {
         __extends(SacDropdownCommon, _super);
+        // #endregion Properties
+        // #region Constructors
         /**
          * Constructor
          * @param formlayout SacFormLayoutCommon to define scoped layout settings
@@ -4490,6 +4590,7 @@
             var _this = _super.call(this, formlayout, injector) || this;
             _this.renderer = renderer;
             _this.elementRef = elementRef;
+            // #region Properties
             /**
              * compareWith-Funktion
              */
@@ -4521,6 +4622,8 @@
             return _this;
         }
         Object.defineProperty(SacDropdownCommon.prototype, "comparewith", {
+            // #endregion Constructors
+            // #region Public Getters And Setters
             /**
              * compareWith-Funktion
              */
@@ -4533,6 +4636,8 @@
             enumerable: false,
             configurable: true
         });
+        // #endregion Public Getters And Setters
+        // #region Public Methods
         /**
          * Registriert das OptionID-Counter als String
          */
@@ -4583,6 +4688,8 @@
             this.setSelectedValue(value);
             _super.prototype.writeValue.call(this, value);
         };
+        // #endregion Public Methods
+        // #region Private Methods
         /**
          * ID extrahieren
          * @param valueString String bei welchem die ID Extrahiert werden soll
@@ -4663,6 +4770,8 @@
      * SacDropdownOption-Klasse
      */
     var SacDropdownOptionCommon = /** @class */ (function () {
+        // #endregion Properties
+        // #region Constructors
         /**
          * Konstruktor
          * @param _element Referenz auf HTML Element
@@ -4673,6 +4782,7 @@
             this._element = _element;
             this._renderer = _renderer;
             this._dropdown = _dropdown;
+            // #region Properties
             /**
              * ID-String
              */
@@ -4682,6 +4792,8 @@
             }
         }
         Object.defineProperty(SacDropdownOptionCommon.prototype, "ngValue", {
+            // #endregion Constructors
+            // #region Public Getters And Setters
             /**
              * Option ngValue
              */
@@ -4707,6 +4819,8 @@
             enumerable: false,
             configurable: true
         });
+        // #endregion Public Getters And Setters
+        // #region Public Methods
         /**
          * Den Wert vom Option-Element einstellen
          * @param value Wert
@@ -4763,7 +4877,7 @@
                 this._listbox.registerOption(this);
             }
         }
-        Object.defineProperty(SacListboxOptionCommon.prototype, "ngvalue", {
+        Object.defineProperty(SacListboxOptionCommon.prototype, "ngValue", {
             // #endregion Constructors
             // #region Public Getters And Setters
             /**
@@ -4820,7 +4934,7 @@
         { type: SacListboxCommon }
     ]; };
     SacListboxOptionCommon.propDecorators = {
-        ngvalue: [{ type: i0.Input }],
+        ngValue: [{ type: i0.Input }],
         value: [{ type: i0.Input }]
     };
     /**
@@ -4939,42 +5053,40 @@
      */
     var SacTabCommon = /** @class */ (function () {
         function SacTabCommon() {
+            // #region Properties
             /**
-             * control name
+             * Identifier used for the E2E data attribute.
              */
-            this.name = '';
+            this.e2eidentifier = null;
             /**
-             * dispose tabs when they are hidden
+             * name of control
              */
-            this.unloadtabitemswhenhidden = null;
+            this.name = createGuid();
             /**
              * Event when new tab is selected
              */
             this.tabselected = new i0.EventEmitter();
+            /**
+             * dispose tabs when they are hidden
+             */
+            this.unloadtabitemswhenhidden = null;
+            // #endregion Private Methods
         }
-        // #region Control initialisieren
+        // #endregion Properties
+        // #region Public Methods
         /**
-         * AfterContentInit Event
+         * get id of tab button
+         * @param tabitemid id of tab
          */
-        SacTabCommon.prototype.ngAfterContentInit = function () {
-            this.initTabs();
+        SacTabCommon.prototype.GetTabItemButtonId = function (tabitemid) {
+            return this.name + '_' + tabitemid;
         };
         /**
-         * Initialisiert die Tabs
+         * AfterContentInit Event
          */
-        SacTabCommon.prototype.initTabs = function () {
-            var _this = this;
-            var activeTab = this.tabItems().filter(function (tab) { return tab.active; });
-            this.tabItems().forEach(function (itm) {
-                if (_this.unloadtabitemswhenhidden !== null) {
-                    itm.unloadwhenhidden = _this.unloadtabitemswhenhidden;
-                }
-            });
-            if (activeTab.length === 0) {
-                this.selectTab(this.tabItems()[0]);
-            }
+        SacTabCommon.prototype.ngAfterContentInit = function () {
+            this.initTabs();
         };
-        // #endregion
         /**
          * select new tab
          * @param tab tab that should be selected
@@ -4988,12 +5100,22 @@
             tab.active = true;
             this.tabselected.emit(tab.id);
         };
+        // #endregion Public Methods
+        // #region Private Methods
         /**
-         * get id of tab button
-         * @param tabitemid id of tab
+         * Initialisiert die Tabs
          */
-        SacTabCommon.prototype.GetTabItemButtonId = function (tabitemid) {
-            return this.name + '_' + tabitemid;
+        SacTabCommon.prototype.initTabs = function () {
+            var _this = this;
+            var activeTab = this.tabItems().filter(function (tab) { return tab.active; });
+            this.tabItems().forEach(function (itm) {
+                if (_this.unloadtabitemswhenhidden !== null) {
+                    itm.unloadwhenhidden = _this.unloadtabitemswhenhidden;
+                }
+            });
+            if (activeTab.length === 0) {
+                this.selectTab(this.tabItems()[0]);
+            }
         };
         return SacTabCommon;
     }());
@@ -5001,10 +5123,11 @@
         { type: i0.Directive }
     ];
     SacTabCommon.propDecorators = {
+        e2eidentifier: [{ type: i0.Input }],
         name: [{ type: i0.Input }],
         tablabeltemplate: [{ type: i0.Input }],
-        unloadtabitemswhenhidden: [{ type: i0.Input }],
-        tabselected: [{ type: i0.Output }]
+        tabselected: [{ type: i0.Output }],
+        unloadtabitemswhenhidden: [{ type: i0.Input }]
     };
 
     /**
@@ -5012,6 +5135,7 @@
      */
     var SacTabItemCommon = /** @class */ (function () {
         function SacTabItemCommon() {
+            // #region Properties
             /**
              * Boolean Property prüft ob das Tab aktiv ist
              */
@@ -5024,6 +5148,7 @@
              * Das Input property ekzeptiert boolen Wert. Default ist true. Definiert, ob die Komponente hidden sein sollte.
              */
             this.unloadwhenhidden = true;
+            // #endregion Properties
         }
         return SacTabItemCommon;
     }());
@@ -5035,8 +5160,8 @@
         disabled: [{ type: i0.Input }],
         id: [{ type: i0.Input }],
         label: [{ type: i0.Input }],
-        unloadwhenhidden: [{ type: i0.Input }],
-        templateRef: [{ type: i0.ContentChild, args: [i0.TemplateRef, { static: true },] }]
+        templateRef: [{ type: i0.ContentChild, args: [i0.TemplateRef, { static: true },] }],
+        unloadwhenhidden: [{ type: i0.Input }]
     };
 
     /**
@@ -5051,9 +5176,13 @@
          */
         function SacValidationSummaryCommon(parent, injector) {
             /**
-             * Name-Property
+             * Identifier used for the E2E data attribute.
              */
-            this.name = '';
+            this.e2eidentifier = null;
+            /**
+             * name of control
+             */
+            this.name = createGuid();
             this.parent = parent;
             this.validationKeyService = injector.get(SACVALIDATIONKEY_SERVICE, new SacDefaultValidationKeyService());
             this.lngResourceService = injector.get(SACLOCALISATION_SERVICE, new SacDefaultLocalisationService(this.validationKeyService));
@@ -5172,6 +5301,7 @@
         { type: i0.Injector }
     ]; };
     SacValidationSummaryCommon.propDecorators = {
+        e2eidentifier: [{ type: i0.Input }],
         form: [{ type: i0.Input }],
         formGroupName: [{ type: i0.Input }],
         name: [{ type: i0.Input }]
@@ -5819,14 +5949,14 @@
              * Text welcher auf dem Button angezeigt wird
              */
             _this.buttontext = '';
-            /**
-             * Name des Such-Icons
-             */
-            _this.iconname = '';
             /**
              * Event wenn auf das Such-Icon geclickt wird
              */
             _this.clicked = new i0.EventEmitter();
+            /**
+             * Name des Such-Icons
+             */
+            _this.iconname = '';
             return _this;
             // #endregion Private Methods
         }
@@ -5870,14 +6000,29 @@
     SacInputSearchCommon.propDecorators = {
         buttonmode: [{ type: i0.Input }],
         buttontext: [{ type: i0.Input }],
-        iconname: [{ type: i0.Input }],
-        clicked: [{ type: i0.Output }]
+        clicked: [{ type: i0.Output }],
+        iconname: [{ type: i0.Input }]
     };
 
-    // #region Classes
     /**
      * GridResponse class
      */
+    (function (SortOrder) {
+        /**
+         * No sorting
+         */
+        SortOrder[SortOrder["None"] = 0] = "None";
+        /**
+         * Ascending
+         */
+        SortOrder[SortOrder["Ascending"] = 1] = "Ascending";
+        /**
+         * Descending
+         */
+        SortOrder[SortOrder["Descending"] = 2] = "Descending";
+    })(exports.SortOrder || (exports.SortOrder = {}));
+    // #endregion Exported Enums
+    // #region Exported Classes
     var GridResponse = /** @class */ (function () {
         function GridResponse() {
         }
@@ -5958,21 +6103,7 @@
         }
         return SortDescriptor;
     }());
-    (function (SortOrder) {
-        /**
-         * No sorting
-         */
-        SortOrder[SortOrder["None"] = 0] = "None";
-        /**
-         * Ascending
-         */
-        SortOrder[SortOrder["Ascending"] = 1] = "Ascending";
-        /**
-         * Descending
-         */
-        SortOrder[SortOrder["Descending"] = 2] = "Descending";
-    })(exports.SortOrder || (exports.SortOrder = {}));
-    // #endregion Enums
+    // #endregion Exported Classes
 
     /**
      * Basic component for SacGrid
@@ -6000,6 +6131,18 @@
              * Contains Array of Pages.
              */
             this.paginators = [];
+            /**
+             * Number of columns in the grid
+             */
+            this.ColumnCount = 0;
+            /**
+             * Identifier used for the E2E data attribute.
+             */
+            this.e2eidentifier = null;
+            /**
+             * name of control
+             */
+            this.name = createGuid();
             /**
              * Deactivates the selection of the PageSize in the pager
              */
@@ -6012,14 +6155,6 @@
              * Event when the pager is clicked.
              */
             this.paging = new i0.EventEmitter();
-            /**
-             * Event when a header is clicked so that the grid is sorted.
-             */
-            this.sorting = new i0.EventEmitter();
-            /**
-             * Number of columns in the grid
-             */
-            this.ColumnCount = 0;
             /**
              * Column by which currently sorted.
              */
@@ -6028,6 +6163,10 @@
              * Current direction of sorting
              */
             this.sortDirection = exports.SortOrder.None;
+            /**
+             * Event when a header is clicked so that the grid is sorted.
+             */
+            this.sorting = new i0.EventEmitter();
             this.validationKeyService = injector.get(SACVALIDATIONKEY_SERVICE, new SacDefaultValidationKeyService());
             // Set Default Values from Injector
             this.pagesizetext = this.validationKeyService.PagingEntries;
@@ -6105,6 +6244,7 @@
     ]; };
     SacGridCommon.propDecorators = {
         body: [{ type: i0.Input }],
+        e2eidentifier: [{ type: i0.Input }],
         emptytext: [{ type: i0.Input }],
         headers: [{ type: i0.Input }],
         maxvisiblepagenumbers: [{ type: i0.Input }],
@@ -6113,10 +6253,10 @@
         pagesizedisabled: [{ type: i0.Input }],
         pagesizes: [{ type: i0.Input }],
         pagesizetext: [{ type: i0.Input }],
-        pagingtext: [{ type: i0.Input }],
-        value: [{ type: i0.Input }],
         paging: [{ type: i0.Output }],
+        pagingtext: [{ type: i0.Input }],
         sorting: [{ type: i0.Output }],
+        value: [{ type: i0.Input }],
         sortdata: [{ type: i0.Input }]
     };
 
@@ -6124,28 +6264,35 @@
      * Base Grid Action Button
      */
     var SacGridButtonCommon = /** @class */ (function () {
-        function SacGridButtonCommon() {
-            // #region Properties
+        // #endregion Properties
+        // #region Constructors
+        /**
+         * Constructor
+         *
+         * @param injector Injector to resovle services
+         */
+        function SacGridButtonCommon(injector) {
+            this.injector = injector;
             /**
              * Button is deactivated
              */
             this._isdisabledvalue = false;
-            /**
-             * Input property for styling the button. Defines the CSS classes of the button
-             */
-            this.iconstyle = '';
             /**
              * Event when the button is clicked
              */
             this.clicked = new i0.EventEmitter();
-            // #endregion Public Methods
+            /**
+             * Input property for styling the button. Defines the CSS classes of the button
+             */
+            this.iconstyle = '';
+            this.iconService = injector.get(SACICON_SERVICE, new SacDefaultIconService());
         }
         Object.defineProperty(SacGridButtonCommon.prototype, "isdisabled", {
+            // #endregion Constructors
+            // #region Public Getters And Setters
             get: function () {
                 return this._isdisabledvalue;
             },
-            // #endregion Properties
-            // #region Public Getters And Setters
             /**
              * Deactivating buttons
              * @param v Deactivates the button. Can be a Boolean or the strings `true` or `false`.
@@ -6172,15 +6319,48 @@
                 this.clicked.emit(this.iconstyle);
             }
         };
+        /**
+         * Defines the CSS class for the icon on the button
+         */
+        SacGridButtonCommon.prototype.getIconClass = function () {
+            var cssclass;
+            // Handle Default Icons
+            if (this.iconstyle === '') {
+                switch (this.icon) {
+                    case 'edit':
+                        cssclass = this.iconService.GridButtonDefaultEditIconSet + " " + this.iconService.GridButtonDefaultEditIcon;
+                        break;
+                    case 'delete':
+                        cssclass = this.iconService.GridButtonDefaultDeleteIconSet + " " + this.iconService.GridButtonDefaultDeleteIcon;
+                        break;
+                    default:
+                        cssclass = this.icon;
+                        break;
+                }
+            }
+            else {
+                cssclass = this.iconstyle + " " + this.icon;
+            }
+            // trim style
+            cssclass = cssclass.trim();
+            if (this._isdisabledvalue) {
+                cssclass += this.iconService.GridButtonDisabledIconSuffix;
+            }
+            return cssclass;
+        };
         return SacGridButtonCommon;
     }());
     SacGridButtonCommon.decorators = [
         { type: i0.Directive }
     ];
+    SacGridButtonCommon.ctorParameters = function () { return [
+        { type: i0.Injector }
+    ]; };
     SacGridButtonCommon.propDecorators = {
+        clicked: [{ type: i0.Output }],
         icon: [{ type: i0.Input }],
         iconstyle: [{ type: i0.Input }],
-        clicked: [{ type: i0.Output }],
+        name: [{ type: i0.Input }],
         isdisabled: [{ type: i0.Input }]
     };
 
@@ -6200,6 +6380,14 @@
             this.grid = grid;
             this.injector = injector;
             this.el = el;
+            /**
+             * Align the column
+             */
+            this.alignment = 'left';
+            /**
+             * defines the style of the row
+             */
+            this.contextstyle = 'none';
             /**
              * Click on Column Element
              */
@@ -6279,9 +6467,7 @@
          * Triggers the events so that the table is sorted according to this column.
          */
         SacGridColumnBaseCommon.prototype.SortByColumn = function () {
-            if (this.sortkey !== undefined &&
-                this.sortkey !== null &&
-                this.sortkey !== '') {
+            if (this.sortkey !== undefined && this.sortkey !== null && this.sortkey !== '') {
                 return this.grid.SortBy(this.sortkey);
             }
         };
@@ -6289,6 +6475,12 @@
          * Called when the component is destroyed.
          */
         SacGridColumnBaseCommon.prototype.ngOnDestroy = function () {
+            if (this.headerElement) {
+                this.headerElement.nativeElement.remove();
+            }
+            if (this.bodyElement) {
+                this.bodyElement.nativeElement.remove();
+            }
             if (this.IsHeader()) {
                 this.grid.UnregisterColumn();
             }
@@ -6318,13 +6510,17 @@
         { type: i0.ElementRef }
     ]; };
     SacGridColumnBaseCommon.propDecorators = {
+        alignment: [{ type: i0.Input }],
+        bodyElement: [{ type: i0.ViewChild, args: ['bodyElement', { static: false },] }],
+        contextstyle: [{ type: i0.Input }],
         header: [{ type: i0.Input }],
+        headerElement: [{ type: i0.ViewChild, args: ['headerElement', { static: false },] }],
         name: [{ type: i0.Input }],
+        rowclicked: [{ type: i0.Output }],
         sortkey: [{ type: i0.Input }],
         type: [{ type: i0.Input }],
         value: [{ type: i0.Input }],
-        width: [{ type: i0.Input }],
-        rowclicked: [{ type: i0.Output }]
+        width: [{ type: i0.Input }]
     };
 
     /**
@@ -6347,14 +6543,14 @@
             return _this;
         }
         Object.defineProperty(SacGridColumnCommon.prototype, "ellipsis", {
+            // #endregion Constructors
+            // #region Public Getters And Setters
             /**
              * Getter for the ellipsis property. Always returns a boolean type.
              */
             get: function () {
                 return this._ellipsis;
             },
-            // #endregion Constructors
-            // #region Public Getters And Setters
             /**
              * Sets the ellipsis property. Can be a Boolean or the strings `true` or `false`.
              */
@@ -6443,6 +6639,30 @@
              * Total number of rows
              */
             this.totalRowCount = 0;
+            /**
+             * Active page index
+             */
+            this.activePageIndex = 0;
+            /**
+             * Identifier used for the E2E data attribute.
+             */
+            this.e2eidentifier = null;
+            /**
+             * First page index
+             */
+            this.firstPageIndex = 0;
+            /**
+             * Last page index
+             */
+            this.lastPageIndex = 0;
+            /**
+             * name of control
+             */
+            this.name = createGuid();
+            /**
+             * Number of elements per page
+             */
+            this.pageSize = 20;
             /**
              * Deactivate page size selection
              */
@@ -6460,59 +6680,28 @@
              */
             this.pagesizetext = '';
             /**
-             * Text in pager for 'Page x of y'. The following interpolation texts are available:
-             * {{CURRENTPAGE}}: Current page
-             * {{TOTALPAGES}}: Number of pages
+             * Item for each paging element (page number)
              */
-            this.pagingtext = '';
+            this.paginators = [];
             /**
              * Event when the page is changed in the grid. The new PageIndex is given as a parameter.
              */
             this.paging = new i0.EventEmitter();
             /**
-             * Active page index
-             */
-            this.activePageIndex = 0;
-            /**
-             * First page index
-             */
-            this.firstPageIndex = 0;
-            /**
-             * Last page index
-             */
-            this.lastPageIndex = 0;
-            /**
-             * Number of elements per page
-             */
-            this.pageSize = 20;
-            /**
-             * Item for each paging element (page number)
+             * Text in pager for 'Page x of y'. The following interpolation texts are available:
+             * {{CURRENTPAGE}}: Current page
+             * {{TOTALPAGES}}: Number of pages
              */
-            this.paginators = [];
+            this.pagingtext = '';
             this.validationKeyService = injector.get(SACVALIDATIONKEY_SERVICE, new SacDefaultValidationKeyService());
             // Set Default Values from Injector
             this.pagesizetext = this.validationKeyService.PagingEntries;
             this.pagingtext = this.validationKeyService.PagingPageOf;
             this.lngResourceService = injector.get(SACLOCALISATION_SERVICE, new SacDefaultLocalisationService(this.validationKeyService));
         }
-        Object.defineProperty(SacPagingCommon.prototype, "pagerdata", {
+        Object.defineProperty(SacPagingCommon.prototype, "PageSizeText", {
             // #endregion Constructors
             // #region Public Getters And Setters
-            /**
-             * Property for Pager Data
-             */
-            set: function (p) {
-                if (p != null) {
-                    this.totalRowCount = p.TotalRowCount;
-                    this.activePageIndex = p.CurrentPageIndex;
-                    this.pageSize = p.PageSize;
-                }
-                this.createPager();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SacPagingCommon.prototype, "PageSizeText", {
             /**
              * Property with text for total entries in page
              */
@@ -6545,6 +6734,21 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(SacPagingCommon.prototype, "pagerdata", {
+            /**
+             * Property for Pager Data
+             */
+            set: function (p) {
+                if (p != null) {
+                    this.totalRowCount = p.TotalRowCount;
+                    this.activePageIndex = p.CurrentPageIndex;
+                    this.pageSize = p.PageSize;
+                }
+                this.createPager();
+            },
+            enumerable: false,
+            configurable: true
+        });
         // #endregion Public Getters And Setters
         // #region Public Methods
         /**
@@ -6683,12 +6887,13 @@
         { type: i0.Injector }
     ]; };
     SacPagingCommon.propDecorators = {
+        e2eidentifier: [{ type: i0.Input }],
         name: [{ type: i0.Input }],
         pagesizedisabled: [{ type: i0.Input }],
         pagesizes: [{ type: i0.Input }],
         pagesizetext: [{ type: i0.Input }],
-        pagingtext: [{ type: i0.Input }],
         paging: [{ type: i0.Output }],
+        pagingtext: [{ type: i0.Input }],
         pagerdata: [{ type: i0.Input }]
     };
 
@@ -7212,6 +7417,9 @@
                 else {
                     this.value = null;
                 }
+                // update imaks reference
+                this.cdRef.detectChanges();
+                this.iMask.maskRef.updateControl();
             },
             enumerable: false,
             configurable: true
@@ -7385,6 +7593,7 @@
         { type: i0.ChangeDetectorRef }
     ]; };
     SacBaseDateTimeControl.propDecorators = {
+        iMask: [{ type: i0.ViewChild, args: [angularImask.IMaskDirective, { static: false },] }],
         isrequired: [{ type: i0.Input }],
         pickerarrow: [{ type: i0.ViewChild, args: ['pickerarrow', { static: false },] }],
         pickerbutton: [{ type: i0.ViewChild, args: ['pickerbutton', { static: true },] }],
@@ -7671,6 +7880,14 @@
         }
         return DateSelectorItem;
     }());
+    // #endregion Classes
+    // #region Variables
+    /**
+     * Moment
+     */
+    var moment$2 = moment___default['default'];
+    // #endregion Variables
+    // #region Exported Classes
     /**
      *Basis Komponente für SacDateSelector
      */
@@ -7694,10 +7911,18 @@
              * Datum Selector
              */
             this.dateselection = false;
+            /**
+             * Identifier used for the E2E data attribute.
+             */
+            this.e2eidentifier = null;
             /**
              * Monat
              */
             this.month = 4;
+            /**
+             * name of control
+             */
+            this.name = createGuid();
             /**
              * Output Event beim Datum Selektieren
              */
@@ -7778,6 +8003,10 @@
                 tempValue.year(1900);
                 this._selectedValue = tempValue.utc();
             }
+            if (this._selectedValue === null && this._initialValue !== null) {
+                this.selectdate.emit({ date: this._initialValue.local() });
+                return;
+            }
             this.selectdate.emit({
                 date: this._selectedValue,
             });
@@ -7879,12 +8108,8 @@
          */
         SacDateSelectorCommon.prototype.selectDate = function (v) {
             if (v.isenabled) {
-                this.dates.forEach(function (date) { return date
-                    .filter(function (filter) { return filter.isnew; })
-                    .forEach(function (itm) { return (itm.isnew = false); }); });
-                this.dates.forEach(function (date) { return date
-                    .filter(function (filter) { return filter.isselected; })
-                    .forEach(function (itm) { return (itm.isselected = false); }); });
+                this.dates.forEach(function (date) { return date.filter(function (filter) { return filter.isnew; }).forEach(function (itm) { return (itm.isnew = false); }); });
+                this.dates.forEach(function (date) { return date.filter(function (filter) { return filter.isselected; }).forEach(function (itm) { return (itm.isselected = false); }); });
                 v.isnew = true;
                 v.isselected = true;
                 var dateValue = moment$2(v.date);
@@ -7912,6 +8137,9 @@
          * Setter für Stunden Uhrzeit
          */
         SacDateSelectorCommon.prototype.setHours = function (v) {
+            if (v >= 24) {
+                return;
+            }
             /**
              * Select Value setzen falls leer
              */
@@ -7927,6 +8155,9 @@
          * Setter für Minuten Uhrzeit
          */
         SacDateSelectorCommon.prototype.setMinutes = function (v) {
+            if (v >= 60) {
+                return;
+            }
             /**
              * Select Value setzen falls leer
              */
@@ -8004,9 +8235,7 @@
             for (var dayinmonth = 1; dayinmonth <= currentMonth.daysInMonth(); dayinmonth++) {
                 var isSelectedDate = false;
                 var isNewDate = false;
-                var isCurrentDate = moment$2().month() === this.month &&
-                    moment$2().year() === this.year &&
-                    moment$2().date() === dayinmonth;
+                var isCurrentDate = moment$2().month() === this.month && moment$2().year() === this.year && moment$2().date() === dayinmonth;
                 // Initial Wert setzen, falls vorhanden
                 if (this._initialValue !== null) {
                     isSelectedDate =
@@ -8058,6 +8287,11 @@
             if (this._selectedValue === null) {
                 if (this._initialValue === null) {
                     this._selectedValue = moment$2();
+                    /**
+                     * clean seconds and miliseconds for initial values
+                     */
+                    this._selectedValue.second(0);
+                    this._selectedValue.millisecond(0);
                 }
                 else {
                     this._selectedValue = this._initialValue;
@@ -8075,19 +8309,15 @@
     SacDateSelectorCommon.propDecorators = {
         autoapplyselection: [{ type: i0.Input }],
         dateselection: [{ type: i0.Input }],
+        e2eidentifier: [{ type: i0.Input }],
         month: [{ type: i0.Input }],
+        name: [{ type: i0.Input }],
         selectdate: [{ type: i0.Output }],
         timeselection: [{ type: i0.Input }],
         year: [{ type: i0.Input }],
         initialvalue: [{ type: i0.Input }]
     };
-    // #endregion Classes
-    // #region Variables
-    /**
-     * Moment
-     */
-    var moment$2 = moment___default['default'];
-    // #endregion Variables
+    // #endregion Exported Classes
 
     /**
      * Komponente für SacDateTimeCommon. Extends SacBaseDateTimeControl
@@ -8621,7 +8851,10 @@
              */
             _this.allowhtml = false;
             return _this;
+            // #endregion Public Methods
         }
+        // #endregion Properties
+        // #region Public Methods
         /**
          * Validierung des Controls
          *
@@ -8646,18 +8879,15 @@
      */
     var SacWizardCommon = /** @class */ (function () {
         function SacWizardCommon() {
-            /**
-             * Name des Controls
-             */
-            this.name = '';
+            // #region Properties
             /**
              * Boolean Property prüft ob Navigation im Wizard disabled ist; default Wert - false
              */
             this.disablenavigation = false;
             /**
-             * EventEmitter wenn der Schritt geändert wird
+             * Name des Controls
              */
-            this.stepchanged = new i0.EventEmitter();
+            this.name = '';
             /**
              * Leere Implementation von 'propagateChange'. Muss gemacht werden, damit kein Fehler entsteht
              */
@@ -8666,8 +8896,15 @@
              * Leere Implementation von 'propagateTouch'. Muss gemacht werden, damit kein Fehler entsteht
              */
             this.propagateTouch = function () { };
+            /**
+             * EventEmitter wenn der Schritt geändert wird
+             */
+            this.stepchanged = new i0.EventEmitter();
+            // #endregion Private Methods
         }
         Object.defineProperty(SacWizardCommon.prototype, "currentstep", {
+            // #endregion Properties
+            // #region Public Getters And Setters
             get: function () {
                 return this._currentstep;
             },
@@ -8681,41 +8918,8 @@
             enumerable: false,
             configurable: true
         });
-        SacWizardCommon.prototype.setStepInternal = function (step) {
-            this._currentstep = step;
-            this.propagateChange(this._currentstep);
-        };
-        // #region Control initialisieren
-        /**
-         * AfterContentInit Event
-         */
-        SacWizardCommon.prototype.ngAfterContentInit = function () {
-            this.initSteps();
-        };
-        /**
-         * Ursprünglicher Schritt wird selektiert
-         */
-        SacWizardCommon.prototype.initSteps = function () {
-            var activeStep = this.wizardItems().filter(function (step) { return step.active; });
-            if (activeStep.length === 0) {
-                var initStep = this.wizardItems().toArray()[0];
-                this.selectStep(initStep);
-                initStep.disabled = false;
-                this.setStepInternal(initStep.id);
-            }
-        };
-        // #endregion
-        /**
-         * Schritt selektieren
-         * @param step Step welcher selektiert werden soll
-         */
-        SacWizardCommon.prototype.selectStep = function (step) {
-            // Cancel if Navigation disabled
-            if (this.disablenavigation) {
-                return;
-            }
-            this.changeStep(step.id);
-        };
+        // #endregion Public Getters And Setters
+        // #region Public Methods
         /**
          * Auf nächsten/vorherigen Schritt gehen
          * @param step Step auf welchen gewechselt werden soll
@@ -8751,6 +8955,12 @@
             this.setStepInternal(step);
             this.stepchanged.emit(step);
         };
+        /**
+         * AfterContentInit Event
+         */
+        SacWizardCommon.prototype.ngAfterContentInit = function () {
+            this.initSteps();
+        };
         /**
          * Methode, damit andere Controls änderungen im Control mitbekommen können
          * Zur Änderungsinfo die Methode propagateChange aufrufen.
@@ -8764,6 +8974,17 @@
         SacWizardCommon.prototype.registerOnTouched = function (fn) {
             this.propagateTouch = function (obj) { return fn(obj); };
         };
+        /**
+         * Schritt selektieren
+         * @param step Step welcher selektiert werden soll
+         */
+        SacWizardCommon.prototype.selectStep = function (step) {
+            // Cancel if Navigation disabled
+            if (this.disablenavigation) {
+                return;
+            }
+            this.changeStep(step.id);
+        };
         /**
          * Methode zum schreiben von Werten aus dem Model in das Control
          */
@@ -8772,16 +8993,34 @@
                 this.changeStep(value);
             }
         };
+        // #endregion Public Methods
+        // #region Private Methods
+        /**
+         * Ursprünglicher Schritt wird selektiert
+         */
+        SacWizardCommon.prototype.initSteps = function () {
+            var activeStep = this.wizardItems().filter(function (step) { return step.active; });
+            if (activeStep.length === 0) {
+                var initStep = this.wizardItems().toArray()[0];
+                this.selectStep(initStep);
+                initStep.disabled = false;
+                this.setStepInternal(initStep.id);
+            }
+        };
+        SacWizardCommon.prototype.setStepInternal = function (step) {
+            this._currentstep = step;
+            this.propagateChange(this._currentstep);
+        };
         return SacWizardCommon;
     }());
     SacWizardCommon.decorators = [
         { type: i0.Directive }
     ];
     SacWizardCommon.propDecorators = {
-        name: [{ type: i0.Input }],
         disablenavigation: [{ type: i0.Input }],
-        currentstep: [{ type: i0.Input }],
-        stepchanged: [{ type: i0.Output }]
+        name: [{ type: i0.Input }],
+        stepchanged: [{ type: i0.Output }],
+        currentstep: [{ type: i0.Input }]
     };
 
     /**
@@ -8789,14 +9028,16 @@
      */
     var SacWizardItemCommon = /** @class */ (function () {
         function SacWizardItemCommon() {
-            /**
-             * Prüft ob der Schritt abgeschlossen wurde.
-             */
-            this.iscomplete = false;
+            // #region Properties
             /**
              * Prüft ob der Schritt disabled ist.
              */
             this.disabled = true;
+            /**
+             * Prüft ob der Schritt abgeschlossen wurde.
+             */
+            this.iscomplete = false;
+            // #endregion Properties
         }
         return SacWizardItemCommon;
     }());
@@ -8805,9 +9046,9 @@
     ];
     SacWizardItemCommon.propDecorators = {
         active: [{ type: i0.Input }],
-        iscomplete: [{ type: i0.Input }],
         disabled: [{ type: i0.Input }],
         id: [{ type: i0.Input }],
+        iscomplete: [{ type: i0.Input }],
         label: [{ type: i0.Input }]
     };
 
@@ -8815,6 +9056,8 @@
      * Settings für TinyMCE Dialog
      */
     var TinyMceDialogSettings = /** @class */ (function () {
+        // #endregion Properties
+        // #region Constructors
         /**
          * Konstruktor
          * @param init Initale Werte
@@ -8854,6 +9097,10 @@
                 file_picker_callback: _this.showSelectDialog,
                 save_onsavecallback: function () { },
             };
+            /**
+             * TinyMCE Config
+             */
+            _this._config = {};
             /**
              * Erlaubt im Filebrowser das löschen von Dateien
              */
@@ -8902,40 +9149,36 @@
              * Definiert das Control als Required
              */
             _this.isrequired = false;
-            /**
-             * Resource Key für Validation Message Required bei Control
-             */
-            _this.validationmessagerequired = _this.validationKeyService.ValidationErrorRequired;
-            /**
-             * Resource Key für Validation Message Required in Validation Summary
-             */
-            _this.validationmessagesummaryrequired = _this.validationKeyService.ValidationErrorSummaryRequired;
             /**
              * Event wenn Save Action in TinyMCE ausgelöst wird
              */
             _this.onsave = new i0.EventEmitter();
-            /**
-             * TinyMCE Config
-             */
-            _this._config = {};
             /**
              * Der Select Dialog wird angezeigt
              */
             _this.selectdialogvisible = false;
+            /**
+             * Resource Key für Validation Message Required bei Control
+             */
+            _this.validationmessagerequired = _this.validationKeyService.ValidationErrorRequired;
+            /**
+             * Resource Key für Validation Message Required in Validation Summary
+             */
+            _this.validationmessagesummaryrequired = _this.validationKeyService.ValidationErrorSummaryRequired;
             _this.validationKeyService = injector.get(SACVALIDATIONKEY_SERVICE, new SacDefaultValidationKeyService());
             _this.lngResourceService = injector.get(SACLOCALISATION_SERVICE, new SacDefaultLocalisationService(_this.validationKeyService));
             _this.config = {};
             return _this;
         }
         Object.defineProperty(SacTinyMceCommon.prototype, "config", {
+            // #endregion Constructors
+            // #region Public Getters And Setters
             /**
              * TinyMCE Konfiguration
              */
             get: function () {
                 return this._config;
             },
-            // #endregion Constructors
-            // #region Public Getters And Setters
             /**
              * TinyMCE Konfiguration
              * @link https://www.tiny.cloud/docs/configure/
@@ -8948,6 +9191,12 @@
         });
         // #endregion Public Getters And Setters
         // #region Public Methods
+        /**
+         * event when control is touched
+         */
+        SacTinyMceCommon.prototype.blur = function () {
+            this.propagateTouch();
+        };
         /**
          * Schliesst den Dateiauswahl Dialog
          */
@@ -8966,10 +9215,8 @@
          */
         SacTinyMceCommon.prototype.setSelectDialogResult = function () {
             if (this.selectDialogSettings.value) {
-                if (this.selectDialogSettings.value.startsWith('/') ||
-                    this.selectDialogSettings.value.startsWith('\\')) {
-                    this.selectDialogSettings.value =
-                        this.selectDialogSettings.value.substring(1);
+                if (this.selectDialogSettings.value.startsWith('/') || this.selectDialogSettings.value.startsWith('\\')) {
+                    this.selectDialogSettings.value = this.selectDialogSettings.value.substring(1);
                 }
                 this.selectDialogSettings.callback(this.selectDialogSettings.value);
             }
@@ -8995,16 +9242,13 @@
                     });
                     switch (meta.filetype) {
                         case 'image':
-                            _this.settings.angular.selectDialogSettings.allowedtypes =
-                                _this.settings.angular.filetypesimages;
+                            _this.settings.angular.selectDialogSettings.allowedtypes = _this.settings.angular.filetypesimages;
                             break;
                         case 'media':
-                            _this.settings.angular.selectDialogSettings.allowedtypes =
-                                _this.settings.angular.filetypesvideo;
+                            _this.settings.angular.selectDialogSettings.allowedtypes = _this.settings.angular.filetypesvideo;
                             break;
                         default:
-                            _this.settings.angular.selectDialogSettings.allowedtypes =
-                                _this.settings.angular.filetypesfiles;
+                            _this.settings.angular.selectDialogSettings.allowedtypes = _this.settings.angular.filetypesfiles;
                             break;
                     }
                 });
@@ -9022,7 +9266,7 @@
             }
             return error;
         };
-        // #endregion Public Abstract Methods
+        // #endregion Public Methods
         // #region Private Methods
         /**
          * Gibt die TinyMCE Settings zurück, die aus den Properties der Angular Komponenten erzeugt werden
@@ -9058,9 +9302,9 @@
         filetypesvideo: [{ type: i0.Input }],
         height: [{ type: i0.Input }],
         isrequired: [{ type: i0.Input }],
+        onsave: [{ type: i0.Output }],
         validationmessagerequired: [{ type: i0.Input }],
         validationmessagesummaryrequired: [{ type: i0.Input }],
-        onsave: [{ type: i0.Output }],
         config: [{ type: i0.Input }]
     };
 
@@ -9093,7 +9337,7 @@
             /**
              * Property on the 'data' object that stores the expanded state. Property must be of type boolean. Default is 'expanded'
              */
-            _this.attrexanded = 'expanded';
+            _this.attrexpanded = 'expanded';
             /**
              * Property for saving the HoverState on the field. If the property is not present on the node, it is automatically created and removed again. The value can usually be left at the default value unless there is a conflict with a property on the node that is required for other purposes.
              */
@@ -9250,10 +9494,10 @@
             return value === true || value === 'true';
         };
         SacTreeviewCommon.prototype.isExpandedState = function (node) {
-            if (!node || !this.attrexanded) {
+            if (!node || !this.attrexpanded) {
                 return false;
             }
-            var value = node[this.attrexanded];
+            var value = node[this.attrexpanded];
             return value === true || value === 'true';
         };
         SacTreeviewCommon.prototype.isHoverState = function (node) {
@@ -9396,21 +9640,21 @@
             return null;
         };
         SacTreeviewCommon.prototype.invertExpandedState = function (node) {
-            if (!node || !this.attrexanded) {
+            if (!node || !this.attrexpanded) {
                 return;
             }
             // Items with no children cannot be collabsed
             if (!this.hasChildren(node) && !(this.enableasynchload === true || this.enableasynchload === 'true')) {
                 return;
             }
-            var value = node[this.attrexanded];
+            var value = node[this.attrexpanded];
             if (value === true || value === 'true') {
                 this.collabsed.emit(node);
-                node[this.attrexanded] = false;
+                node[this.attrexpanded] = false;
             }
             else {
                 this.expanded.emit(node);
-                node[this.attrexanded] = true;
+                node[this.attrexpanded] = true;
             }
         };
         SacTreeviewCommon.prototype.resetSelectedState = function (node) {
@@ -9436,7 +9680,7 @@
         actionclicked: [{ type: i0.Output }],
         attrchildren: [{ type: i0.Input }],
         attrdisableaction: [{ type: i0.Input }],
-        attrexanded: [{ type: i0.Input }],
+        attrexpanded: [{ type: i0.Input }],
         attrhoverstate: [{ type: i0.Input }],
         attricon: [{ type: i0.Input }],
         attrid: [{ type: i0.Input }],
@@ -9507,6 +9751,14 @@
              * Position of the tooltip at the top
              */
             this.TopPos = 0;
+            /**
+             * Identifier used for the E2E data attribute.
+             */
+            this.e2eidentifier = null;
+            /**
+             * name of control
+             */
+            this.name = createGuid();
             /**
              * Position of the picker arrow at the left
              */
@@ -9707,6 +9959,8 @@
     ]; };
     SacTooltipCommon.propDecorators = {
         content: [{ type: i0.ViewChild, args: ['container', { static: true },] }],
+        e2eidentifier: [{ type: i0.Input }],
+        name: [{ type: i0.Input }],
         position: [{ type: i0.Input }],
         tooltiptext: [{ type: i0.Input }],
         inlinemode: [{ type: i0.Input }],
@@ -9761,9 +10015,22 @@
              * Handling von neuen Files im Input Control
              */
             _this.fileListener = function () {
-                if (_this.uploadInput.nativeElement.files) {
-                    _this.uploadService.handleFileList(_this.uploadInput.nativeElement.files);
+                // exit if files is null or undefined
+                if (!_this.uploadInput.nativeElement.files) {
+                    return;
                 }
+                if (_this.GetMaxFiles() > 0) {
+                    var maxFiles = _this.GetMaxFiles() + _this.UploadedFileCount();
+                    var possibleFiles = maxFiles - _this.uploadInput.nativeElement.files.length;
+                    if (possibleFiles < 0) {
+                        var dataTransfer_1 = new DataTransfer();
+                        var files = Array.from(_this.uploadInput.nativeElement.files).splice(0, _this.uploadInput.nativeElement.files.length + possibleFiles);
+                        // clone files
+                        files.forEach(function (file) { return dataTransfer_1.items.add(file); });
+                        _this.uploadInput.nativeElement.files = dataTransfer_1.files;
+                    }
+                }
+                _this.uploadService.handleFileList(_this.uploadInput.nativeElement.files);
             };
             /**
              * Definiert das Control als Required
@@ -10131,7 +10398,7 @@
             }
             return error;
         };
-        // #endregion Public Methods
+        // #endregion Protected Methods
         // #region Private Methods
         SacUploadBase.prototype.UpdateFileCount = function () {
             // HACK: Add addition property to FormControl. Can be fixed if solution for ticket: https://github.com/angular/angular/issues/19686
@@ -10271,7 +10538,7 @@
              */
             _this.validationmessagesummaryminfiles = _this.validationKeyService.ValidationErrorSummaryFilesMin;
             return _this;
-            // #endregion Public Methods
+            // #endregion Protected Methods
         }
         // #endregion Properties
         // #region Public Methods
@@ -10386,6 +10653,14 @@
             }
             return error;
         };
+        // #endregion Public Methods
+        // #region Protected Methods
+        /**
+         * @inheritdoc
+         */
+        SacDropzoneMultipleCommon.prototype.GetMaxFiles = function () {
+            return this.maxfiles;
+        };
         return SacDropzoneMultipleCommon;
     }(SacUploadBase));
     SacDropzoneMultipleCommon.decorators = [
@@ -10415,7 +10690,7 @@
              */
             _this.uploadheight = null;
             return _this;
-            // #endregion Public Methods
+            // #endregion Protected Methods
         }
         // #endregion Properties
         // #region Public Methods
@@ -10498,6 +10773,14 @@
                 this.active = true;
             }
         };
+        // #endregion Public Methods
+        // #region Protected Methods
+        /**
+         * @inheritdoc
+         */
+        SacDropzoneSingleCommon.prototype.GetMaxFiles = function () {
+            return 1;
+        };
         return SacDropzoneSingleCommon;
     }(SacUploadBase));
     SacDropzoneSingleCommon.decorators = [
@@ -10539,7 +10822,7 @@
              */
             _this.validationmessagesummaryminfiles = _this.validationKeyService.ValidationErrorSummaryFilesMin;
             return _this;
-            // #endregion Public Methods
+            // #endregion Protected Methods
         }
         // #endregion Properties
         // #region Public Methods
@@ -10613,6 +10896,14 @@
             }
             return error;
         };
+        // #endregion Public Methods
+        // #region Protected Methods
+        /**
+         * @inheritdoc
+         */
+        SacUploadMultipleCommon.prototype.GetMaxFiles = function () {
+            return this.maxfiles;
+        };
         return SacUploadMultipleCommon;
     }(SacUploadBase));
     SacUploadMultipleCommon.decorators = [
@@ -10643,7 +10934,7 @@
              */
             _this.buttonupload = '';
             return _this;
-            // #endregion Public Methods
+            // #endregion Protected Methods
         }
         // #endregion Properties
         // #region Public Methods
@@ -10676,6 +10967,14 @@
                 }
             }
         };
+        // #endregion Public Methods
+        // #region Protected Methods
+        /**
+         * @inheritdoc
+         */
+        SacUploadSingleCommon.prototype.GetMaxFiles = function () {
+            return 1;
+        };
         return SacUploadSingleCommon;
     }(SacUploadBase));
     SacUploadSingleCommon.decorators = [
@@ -11168,43 +11467,35 @@
      */
     var SacConfirmCommon = /** @class */ (function () {
         function SacConfirmCommon() {
-            //#region Input / Output Properties
-            /**
-             * Event wenn Dialog geschlossen wird
-             */
-            this.onconfirm = new i0.EventEmitter();
-            /**
-           * Dialog Titel für Confirm Dialog
-           */
-            this.title = '';
+            // #region Properties
             /**
-             * Nachricht die auf dem Dialog angezeigt wird
+             * Map mit Buttons die in Dialog angezeigt werden.
              */
-            this.message = '';
+            this.buttons = [];
             /**
              * Icon welches auf dem Dialog angezeigt wird
              */
             this.image = '';
-            /**
-             * Map mit Buttons die in Dialog angezeigt werden.
-             */
-            this.buttons = [];
-            //#endregion
-            //#region Internal Properties and Methods
             /**
              * Definiert ob der Dialog sichtbar ist
              */
             this.isvisible = false;
-            //#endregion
+            /**
+             * Nachricht die auf dem Dialog angezeigt wird
+             */
+            this.message = '';
+            /**
+             * Event wenn Dialog geschlossen wird
+             */
+            this.onconfirm = new i0.EventEmitter();
+            /**
+           * Dialog Titel für Confirm Dialog
+           */
+            this.title = '';
+            // #endregion Public Methods
         }
-        /**
-         * Definiert, ob für den Dialog ein Image definiert wurde
-         */
-        SacConfirmCommon.prototype.hasImage = function () {
-            return this.image !== '';
-        };
-        //#endregion
-        //#region Public Methods
+        // #endregion Properties
+        // #region Public Methods
         /**
          * Action wenn Button auf Dialog geklickt wurde. Löst den EventEmitter aus und blendet den Dialog aus.
          * @param action
@@ -11214,10 +11505,10 @@
             this.isvisible = false;
         };
         /**
-         * Zeigt den Dialog an
+         * Definiert, ob für den Dialog ein Image definiert wurde
          */
-        SacConfirmCommon.prototype.show = function () {
-            this.isvisible = true;
+        SacConfirmCommon.prototype.hasImage = function () {
+            return this.image !== '';
         };
         /**
          * Blendet den Dialog aus
@@ -11225,17 +11516,23 @@
         SacConfirmCommon.prototype.hide = function () {
             this.isvisible = false;
         };
+        /**
+         * Zeigt den Dialog an
+         */
+        SacConfirmCommon.prototype.show = function () {
+            this.isvisible = true;
+        };
         return SacConfirmCommon;
     }());
     SacConfirmCommon.decorators = [
         { type: i0.Directive }
     ];
     SacConfirmCommon.propDecorators = {
-        onconfirm: [{ type: i0.Output }],
-        title: [{ type: i0.Input }],
-        message: [{ type: i0.Input }],
+        buttons: [{ type: i0.Input }],
         image: [{ type: i0.Input }],
-        buttons: [{ type: i0.Input }]
+        message: [{ type: i0.Input }],
+        onconfirm: [{ type: i0.Output }],
+        title: [{ type: i0.Input }]
     };
 
     /**
@@ -11775,10 +12072,18 @@
              * Extra CSS Klassen für das Control
              */
             this.cssclass = '';
+            /**
+             * Identifier used for the E2E data attribute.
+             */
+            this.e2eidentifier = null;
             /**
              * Definiert ob das Dropdown offen ist.
              */
             this.isopen = false;
+            /**
+             * name of control
+             */
+            this.name = createGuid();
             /**
              * The preferred placement of the dropdown.
              *
@@ -11931,8 +12236,10 @@
         buttontemplate: [{ type: i0.Input }],
         container: [{ type: i0.Input }],
         cssclass: [{ type: i0.Input }],
+        e2eidentifier: [{ type: i0.Input }],
         isopen: [{ type: i0.Input }],
         menuitems: [{ type: i0.ContentChildren, args: [SacContextmenuItemCommon,] }],
+        name: [{ type: i0.Input }],
         placement: [{ type: i0.Input }],
         onClick: [{ type: i0.HostListener, args: ['document:click', ['$event.target'],] }]
     };
@@ -12659,6 +12966,57 @@
         exitEditMode: [{ type: i0.HostListener, args: ['document:click', ['$event.target'],] }]
     };
 
+    var SacTestingAttributePipe = /** @class */ (function () {
+        // #endregion Properties
+        // #region Constructors
+        /**
+         *
+         */
+        function SacTestingAttributePipe(injector) {
+            // get attribute state from config
+            var configurationService = injector.get(SACCONFIGURATION_SERVICE, new SacDefaultConfigurationService());
+            this.isEnabled = configurationService.EnableE2EAttributes;
+        }
+        // #endregion Constructors
+        // #region Public Methods
+        SacTestingAttributePipe.prototype.transform = function (controlname, e2eattribute) {
+            // return null to disable attribute if disabled
+            if (!this.isEnabled) {
+                return null;
+            }
+            if (e2eattribute) {
+                return e2eattribute;
+            }
+            if (controlname) {
+                return controlname;
+            }
+            // disable attribute if name and e2e attribute is not set
+            return null;
+        };
+        return SacTestingAttributePipe;
+    }());
+    SacTestingAttributePipe.decorators = [
+        { type: i0.Pipe, args: [{
+                    name: 'testingattribute',
+                },] }
+    ];
+    SacTestingAttributePipe.ctorParameters = function () { return [
+        { type: i0.Injector }
+    ]; };
+
+    var SACCommonUtliltiesModule = /** @class */ (function () {
+        function SACCommonUtliltiesModule() {
+        }
+        return SACCommonUtliltiesModule;
+    }());
+    SACCommonUtliltiesModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    declarations: [SacTestingAttributePipe],
+                    imports: [],
+                    exports: [SacTestingAttributePipe],
+                },] }
+    ];
+
     /**
      * Model für Sprachen
      */
@@ -12681,7 +13039,7 @@
         { type: i0.NgModule, args: [{
                     declarations: [],
                     imports: [],
-                    exports: []
+                    exports: [],
                 },] }
     ];
 
@@ -12701,6 +13059,7 @@
     exports.Positioning = Positioning;
     exports.SACCONFIGURATION_SERVICE = SACCONFIGURATION_SERVICE;
     exports.SACCommonListboxOptionModule = SACCommonListboxOptionModule;
+    exports.SACCommonUtliltiesModule = SACCommonUtliltiesModule;
     exports.SACFILEBROWSER_SERVICE = SACFILEBROWSER_SERVICE;
     exports.SACICON_SERVICE = SACICON_SERVICE;
     exports.SACLANGUAGE_SERVICE = SACLANGUAGE_SERVICE;
@@ -12761,6 +13120,7 @@
     exports.SacStaticLabelCommon = SacStaticLabelCommon;
     exports.SacTabCommon = SacTabCommon;
     exports.SacTabItemCommon = SacTabItemCommon;
+    exports.SacTestingAttributePipe = SacTestingAttributePipe;
     exports.SacTimeCommon = SacTimeCommon;
     exports.SacTinyMceCommon = SacTinyMceCommon;
     exports.SacTooltipCommon = SacTooltipCommon;