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

package/fesm2015/simpleangularcontrols-sac-common.js

@@ -1,8 +1,9 @@
-import { EventEmitter, Directive, Input, Output, ɵɵdefineInjectable, Injectable, InjectionToken, ɵɵinject, Inject, Host, Injector, ChangeDetectorRef, ViewChild, HostListener, Renderer2, ElementRef, ViewChildren, ContentChild, TemplateRef, NgZone, ContentChildren, NgModule } from '@angular/core';
+import { EventEmitter, Directive, Output, Input, InjectionToken, ɵɵdefineInjectable, Injectable, ɵɵinject, Inject, Host, Injector, ChangeDetectorRef, ViewChild, HostListener, Renderer2, ElementRef, ViewChildren, ContentChild, TemplateRef, NgZone, ContentChildren, Pipe, NgModule } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Observable, of } from 'rxjs';
 import { NgControl, FormControlName, FormGroupDirective, Validators, FormGroup, NgForm } from '@angular/forms';
 import moment_, { ISO_8601 } from 'moment';
+import { IMaskDirective } from 'angular-imask';
 import { MaskedRange } from 'imask';
 import { UploadxService } from 'ngx-uploadx';
 import { DOCUMENT } from '@angular/common';
@@ -22,33 +23,46 @@ class SacButtonCommon {
          */
         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 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
     }
     // #endregion Properties
     // #region Public Getters And Setters
+    /**
+     * Getter Methode. Ergibt boolean Wert. Definiert, ob das Button desabled ist.
+     */
+    get _isdisabled() {
+        return this._isdisabledvalue;
+    }
+    get isdisabled() {
+        return this._isdisabledvalue;
+    }
     /**
      * Deaktivieren von Buttons
      * @param v Deaktiviert den Button
@@ -62,6 +76,9 @@ class SacButtonCommon {
             this._isdisabledvalue = v === 'true';
         }
     }
+    get isloading() {
+        return this._isloadingvalue;
+    }
     /**
      * Das Input property. Definiert der Status des islaoding property. Es ist benutzt für Aktivation des Spinner des Button.
      */
@@ -73,6 +90,12 @@ class SacButtonCommon {
             this._isloadingvalue = v === 'true';
         }
     }
+    /**
+     * Die Methode returns die definierte Style-Rolle des Buttons
+     */
+    get role() {
+        return this._role;
+    }
     /**
      * Definiert den Style des Buttons
      * @param  v Definiert den Style des Buttons.
@@ -105,24 +128,6 @@ class SacButtonCommon {
                 throw new Error('Invalid role " + v + " for button.');
         }
     }
-    /**
-     * Getter Methode. Ergibt boolean Wert. Definiert, ob das Button desabled ist.
-     */
-    get _isdisabled() {
-        return this._isdisabledvalue;
-    }
-    get isdisabled() {
-        return this._isdisabledvalue;
-    }
-    get isloading() {
-        return this._isloadingvalue;
-    }
-    /**
-     * Die Methode returns die definierte Style-Rolle des Buttons
-     */
-    get role() {
-        return this._role;
-    }
     // #endregion Public Getters And Setters
     // #region Public Methods
     /**
@@ -138,10 +143,11 @@ SacButtonCommon.decorators = [
     { type: Directive }
 ];
 SacButtonCommon.propDecorators = {
+    clicked: [{ type: Output }],
+    e2eidentifier: [{ type: Input }],
     icon: [{ type: Input }],
     name: [{ type: Input }],
     text: [{ type: Input }],
-    clicked: [{ type: Output }],
     isdisabled: [{ type: Input }],
     isloading: [{ type: Input }],
     role: [{ type: Input }]
@@ -171,6 +177,7 @@ var ControlHeight;
  */
 class SacFormLayoutCommon {
     constructor() {
+        // #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.
          */
@@ -219,7 +226,10 @@ class SacFormLayoutCommon {
          * 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
     }
+    // #endregion Properties
+    // #region Public Getters And Setters
     /**
      * Returns whether the inline error messages for the form are active.
      */
@@ -246,6 +256,13 @@ SacFormLayoutCommon.propDecorators = {
     splitlabelandhelptext: [{ type: Input }]
 };
 
+// #region Variables
+/**
+ * injection token for component configuration service
+ */
+const SACCONFIGURATION_SERVICE = new InjectionToken('SacConfigurationService');
+// #endregion Variables
+// #region Exported Classes
 /**
  * abstract class for configuration settings providing in components
  */
@@ -259,6 +276,7 @@ SacAbstractConfigurationService.decorators = [
  * default configuration service for components
  * */
 class SacDefaultConfigurationService extends SacAbstractConfigurationService {
+    // #region Public Getters And Setters
     /**
      * @inheritdoc
      */
@@ -277,6 +295,12 @@ class SacDefaultConfigurationService extends SacAbstractConfigurationService {
     get CurrencyText() {
         return 'CHF';
     }
+    /**
+     * @inheritdoc
+     */
+    get EnableE2EAttributes() {
+        return false;
+    }
     /**
      * @inheritdoc
      */
@@ -342,10 +366,6 @@ SacDefaultConfigurationService.ɵprov = ɵɵdefineInjectable({ factory: function
 SacDefaultConfigurationService.decorators = [
     { type: Injectable, args: [{ providedIn: 'root' },] }
 ];
-/**
- * injection token for component configuration service
- */
-const SACCONFIGURATION_SERVICE = new InjectionToken('SacConfigurationService');
 
 /**
  * Klasse für API Request zum löschen eines Files
@@ -438,10 +458,13 @@ class BrowserNodeRequest {
     }
 }
 
+// #region Variables
 /**
  * Injection Token für Language Service
  */
 const SACFILEBROWSER_SERVICE = new InjectionToken('FileBrowserService');
+// #endregion Variables
+// #region Exported Classes
 /**
  * Abstrakte Implementierung des File Service für die Browser Component
  */
@@ -457,6 +480,7 @@ SacAbstractFileBrowserService.decorators = [
  * Standardimplementierung des Backend Service für die File Browser Component
  */
 class SacDefaultFileBrowserService extends SacAbstractFileBrowserService {
+    // #region Constructors
     /**
      * Konstruktor
      * @param httpclient HTTP Client Service
@@ -465,18 +489,20 @@ class SacDefaultFileBrowserService extends SacAbstractFileBrowserService {
         super();
         this.httpclient = httpclient;
     }
+    // #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
      */
-    GetNode(apiurl, path, allowedextensions) {
-        const url = `${apiurl}/getnodes`;
+    DeleteFile(apiurl, path, allowedextensions) {
+        const url = `${apiurl}/deletefile`;
         if (!path) {
             path = '';
         }
-        const request = new BrowserNodeRequest({
+        const request = new BrowserFileDeleteRequest({
             Path: path,
             AllowedTypes: allowedextensions,
         });
@@ -485,113 +511,115 @@ class SacDefaultFileBrowserService extends SacAbstractFileBrowserService {
         });
     }
     /**
-     * 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
      */
-    SaveNode(apiurl, path, newFoldername) {
-        const url = `${apiurl}/newnode`;
+    DeleteNode(apiurl, path) {
+        const url = `${apiurl}/deletenode`;
         if (!path) {
             path = '';
         }
-        const request = new BrowserNodeNewRequest({
+        const 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
      */
-    RenameNode(apiurl, path, newFoldername) {
-        const url = `${apiurl}/renamenode`;
+    GetFiles(apiurl, path, allowedextensions) {
+        const url = `${apiurl}/getfiles`;
         if (!path) {
             path = '';
         }
-        const request = new BrowserNodeRenameRequest({
+        const 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
      */
-    DeleteNode(apiurl, path) {
-        const url = `${apiurl}/deletenode`;
+    GetNode(apiurl, path, allowedextensions) {
+        const url = `${apiurl}/getnodes`;
         if (!path) {
             path = '';
         }
-        const request = new BrowserNodeDeleteRequest({
+        const 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
      */
-    GetFiles(apiurl, path, allowedextensions) {
-        const url = `${apiurl}/getfiles`;
+    RenameFile(apiurl, path, newFilename, allowedextensions) {
+        const url = `${apiurl}/renamefile`;
         if (!path) {
             path = '';
         }
-        const request = new BrowserNodeRequest({
+        const 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
      */
-    SaveFile(apiurl, path, id, allowedextensions) {
-        const url = `${apiurl}/uploadfile`;
+    RenameNode(apiurl, path, newFoldername) {
+        const url = `${apiurl}/renamenode`;
         if (!path) {
             path = '';
         }
-        const request = new BrowserFileSaveRequest({
+        const 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
      */
-    DeleteFile(apiurl, path, allowedextensions) {
-        const url = `${apiurl}/deletefile`;
+    SaveFile(apiurl, path, id, allowedextensions) {
+        const url = `${apiurl}/uploadfile`;
         if (!path) {
             path = '';
         }
-        const request = new BrowserFileDeleteRequest({
+        const request = new BrowserFileSaveRequest({
             Path: path,
+            UploadId: id,
             AllowedTypes: allowedextensions,
         });
         return this.httpclient.post(url, request, {
@@ -599,23 +627,21 @@ class SacDefaultFileBrowserService extends SacAbstractFileBrowserService {
         });
     }
     /**
-     * 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
      */
-    RenameFile(apiurl, path, newFilename, allowedextensions) {
-        const url = `${apiurl}/renamefile`;
+    SaveNode(apiurl, path, newFoldername) {
+        const url = `${apiurl}/newnode`;
         if (!path) {
             path = '';
         }
-        const request = new BrowserFileRenameRequest({
+        const 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,
         });
     }
@@ -735,6 +761,36 @@ class SacDefaultIconService extends SacAbstractIconService {
     get GenericHelptextIcon() {
         return 'fa fa-info-circle';
     }
+    /**
+     * @inheritdoc
+     */
+    get GridButtonDefaultDeleteIcon() {
+        return 'fa-trash';
+    }
+    /**
+     * @inheritdoc
+     */
+    get GridButtonDefaultDeleteIconSet() {
+        return 'fa';
+    }
+    /**
+     * @inheritdoc
+     */
+    get GridButtonDefaultEditIcon() {
+        return 'fa-pen';
+    }
+    /**
+     * @inheritdoc
+     */
+    get GridButtonDefaultEditIconSet() {
+        return 'fa';
+    }
+    /**
+     * @inheritdoc
+     */
+    get GridButtonDisabledIconSuffix() {
+        return ' disabled';
+    }
     /**
      * @inheritdoc
      */
@@ -840,10 +896,13 @@ var IconType;
     IconType[IconType["CssSprite"] = 2] = "CssSprite";
 })(IconType || (IconType = {}));
 
+// #region Variables
 /**
  * injection token for language service
  */
 const SACLANGUAGE_SERVICE = new InjectionToken('SacLanguageService');
+// #endregion Variables
+// #region Exported Classes
 /**
  * abstract class for languages provides in components
  */
@@ -857,6 +916,7 @@ SacAbstractLanguageService.decorators = [
  * default service for languages
  * */
 class SacDefaultLanguageService extends SacAbstractLanguageService {
+    // #region Public Methods
     /**
      * @inheritdoc
      */
@@ -1469,10 +1529,10 @@ function mapToObject(map) {
     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
@@ -1480,12 +1540,12 @@ function createGuid() {
     }
     else {
         return 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
-            var r = (Math.random() * 16) | 0, v = c == 'x' ? r : (r & 0x3) | 0x8;
+            const 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
@@ -1545,6 +1605,10 @@ class SacBaseModelControl {
          * 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.
          */
@@ -1995,6 +2059,7 @@ SacBaseModelControl.propDecorators = {
     componentHeight: [{ type: Input }],
     disabled: [{ type: Input }],
     disablelabel: [{ type: Input }],
+    e2eidentifier: [{ type: Input }],
     helptext: [{ type: Input }],
     helptextmode: [{ type: Input }],
     inlineError: [{ type: Input }],
@@ -2854,12 +2919,15 @@ SacRadiobuttonCommon.propDecorators = {
  * Base Komponente für Dialog
  */
 class SacDialogCommon {
+    // #endregion Properties
+    // #region Constructors
     /**
      * Konstruktor
      * Inject des Formulars
      */
     constructor(cdRef) {
         this.cdRef = cdRef;
+        // #region Properties
         this.hasSetBodyTag = false;
         /**
          * Boolean Property definiert ob das Dialog angezeigt wird
@@ -2882,19 +2950,25 @@ class SacDialogCommon {
          * 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 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';
     }
+    // #endregion Constructors
+    // #region Public Getters And Setters
     /**
      * Implementation als Setter, da mit ngIf das Element bei Unsichtbarkeit UNDEFINED ist.
      */
@@ -2911,15 +2985,11 @@ class SacDialogCommon {
      * Setter. Erhält das boolen Wert des _show property
      */
     set isvisible(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;
         }
@@ -2934,12 +3004,16 @@ class SacDialogCommon {
     set size(v) {
         this._size = v;
     }
+    // #endregion Public Getters And Setters
+    // #region Protected Getters And Setters
     /**
      * Getter for ChangeDetector.
      */
     get ChangeDetector() {
         return this.cdRef;
     }
+    // #endregion Protected Getters And Setters
+    // #region Public Methods
     /**
      * Die Methode setz den Wert des _show property auf false
      */
@@ -2986,8 +3060,7 @@ class SacDialogCommon {
      */
     show() {
         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;
         }
@@ -3004,6 +3077,7 @@ SacDialogCommon.propDecorators = {
     allowesc: [{ type: Input }],
     backdrop: [{ type: Input }],
     closebutton: [{ type: Input }],
+    e2eidentifier: [{ type: Input }],
     isvisibleChange: [{ type: Output }],
     name: [{ type: Input }],
     title: [{ type: Input }],
@@ -3014,8 +3088,7 @@ SacDialogCommon.propDecorators = {
     onKeydownHandler: [{ type: HostListener, args: ['document:keydown', ['$event'],] }]
 };
 
-// #endregion Type aliases
-// #region Classes
+// #region Exported Classes
 /**
  * Base Komponente für SacFormular
  */
@@ -3120,7 +3193,7 @@ SacFormCommon.ctorParameters = () => [
 SacFormCommon.propDecorators = {
     updateon: [{ type: Input }]
 };
-// #endregion Classes
+// #endregion Exported Types
 
 /**
  * Abstract Klasse für SacBaseListControl. Extendes SacBaseModelControl
@@ -3204,6 +3277,7 @@ SacBaseSelectControl.propDecorators = {
  * @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) {
@@ -3216,11 +3290,14 @@ function _buildValueString(id, value) {
     // String als ID
     return `${id}: ${value}`.slice(0, 50);
 }
+// #endregion Exported Functions
 
 /**
  * Base Dropdown Komponente
  */
 class SacDropdownCommon extends SacBaseSelectControl {
+    // #endregion Properties
+    // #region Constructors
     /**
      * Constructor
      * @param formlayout SacFormLayoutCommon to define scoped layout settings
@@ -3232,6 +3309,7 @@ class SacDropdownCommon extends SacBaseSelectControl {
         super(formlayout, injector);
         this.renderer = renderer;
         this.elementRef = elementRef;
+        // #region Properties
         /**
          * compareWith-Funktion
          */
@@ -3261,6 +3339,8 @@ class SacDropdownCommon extends SacBaseSelectControl {
          */
         this.validationmessagesummaryrequired = this.validationKeyService.ValidationErrorSummaryRequired;
     }
+    // #endregion Constructors
+    // #region Public Getters And Setters
     /**
      * compareWith-Funktion
      */
@@ -3270,6 +3350,8 @@ class SacDropdownCommon extends SacBaseSelectControl {
         }
         this._compareWith = fn;
     }
+    // #endregion Public Getters And Setters
+    // #region Public Methods
     /**
      * Registriert das OptionID-Counter als String
      */
@@ -3320,6 +3402,8 @@ class SacDropdownCommon extends SacBaseSelectControl {
         this.setSelectedValue(value);
         super.writeValue(value);
     }
+    // #endregion Public Methods
+    // #region Private Methods
     /**
      * ID extrahieren
      * @param valueString String bei welchem die ID Extrahiert werden soll
@@ -3388,6 +3472,8 @@ SacDropdownCommon.propDecorators = {
  * SacDropdownOption-Klasse
  */
 class SacDropdownOptionCommon {
+    // #endregion Properties
+    // #region Constructors
     /**
      * Konstruktor
      * @param _element Referenz auf HTML Element
@@ -3398,6 +3484,7 @@ class SacDropdownOptionCommon {
         this._element = _element;
         this._renderer = _renderer;
         this._dropdown = _dropdown;
+        // #region Properties
         /**
          * ID-String
          */
@@ -3406,6 +3493,8 @@ class SacDropdownOptionCommon {
             this.id = this._dropdown.registerOption();
         }
     }
+    // #endregion Constructors
+    // #region Public Getters And Setters
     /**
      * Option ngValue
      */
@@ -3424,6 +3513,8 @@ class SacDropdownOptionCommon {
     set value(value) {
         this._setElementValue(value);
     }
+    // #endregion Public Getters And Setters
+    // #region Public Methods
     /**
      * Den Wert vom Option-Element einstellen
      * @param value Wert
@@ -3485,7 +3576,7 @@ class SacListboxOptionCommon {
     /**
      * NgValue des Controls. Wird für die Mehrfachauswahl benötigt
      */
-    set ngvalue(value) {
+    set ngValue(value) {
         if (this._listbox) {
             this._value = value;
         }
@@ -3528,7 +3619,7 @@ SacListboxOptionCommon.ctorParameters = () => [
     { type: SacListboxCommon }
 ];
 SacListboxOptionCommon.propDecorators = {
-    ngvalue: [{ type: Input }],
+    ngValue: [{ type: Input }],
     value: [{ type: Input }]
 };
 /**
@@ -3642,41 +3733,40 @@ class HTMLCollection {
  */
 class SacTabCommon {
     constructor() {
+        // #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 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
      */
-    ngAfterContentInit() {
-        this.initTabs();
+    GetTabItemButtonId(tabitemid) {
+        return this.name + '_' + tabitemid;
     }
     /**
-     * Initialisiert die Tabs
+     * AfterContentInit Event
      */
-    initTabs() {
-        const activeTab = this.tabItems().filter((tab) => tab.active);
-        this.tabItems().forEach((itm) => {
-            if (this.unloadtabitemswhenhidden !== null) {
-                itm.unloadwhenhidden = this.unloadtabitemswhenhidden;
-            }
-        });
-        if (activeTab.length === 0) {
-            this.selectTab(this.tabItems()[0]);
-        }
+    ngAfterContentInit() {
+        this.initTabs();
     }
-    // #endregion
     /**
      * select new tab
      * @param tab tab that should be selected
@@ -3690,22 +3780,32 @@ class SacTabCommon {
         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
      */
-    GetTabItemButtonId(tabitemid) {
-        return this.name + '_' + tabitemid;
+    initTabs() {
+        const activeTab = this.tabItems().filter((tab) => tab.active);
+        this.tabItems().forEach((itm) => {
+            if (this.unloadtabitemswhenhidden !== null) {
+                itm.unloadwhenhidden = this.unloadtabitemswhenhidden;
+            }
+        });
+        if (activeTab.length === 0) {
+            this.selectTab(this.tabItems()[0]);
+        }
     }
 }
 SacTabCommon.decorators = [
     { type: Directive }
 ];
 SacTabCommon.propDecorators = {
+    e2eidentifier: [{ type: Input }],
     name: [{ type: Input }],
     tablabeltemplate: [{ type: Input }],
-    unloadtabitemswhenhidden: [{ type: Input }],
-    tabselected: [{ type: Output }]
+    tabselected: [{ type: Output }],
+    unloadtabitemswhenhidden: [{ type: Input }]
 };
 
 /**
@@ -3713,6 +3813,7 @@ SacTabCommon.propDecorators = {
  */
 class SacTabItemCommon {
     constructor() {
+        // #region Properties
         /**
          * Boolean Property prüft ob das Tab aktiv ist
          */
@@ -3725,6 +3826,7 @@ class SacTabItemCommon {
          * Das Input property ekzeptiert boolen Wert. Default ist true. Definiert, ob die Komponente hidden sein sollte.
          */
         this.unloadwhenhidden = true;
+        // #endregion Properties
     }
 }
 SacTabItemCommon.decorators = [
@@ -3735,8 +3837,8 @@ SacTabItemCommon.propDecorators = {
     disabled: [{ type: Input }],
     id: [{ type: Input }],
     label: [{ type: Input }],
-    unloadwhenhidden: [{ type: Input }],
-    templateRef: [{ type: ContentChild, args: [TemplateRef, { static: true },] }]
+    templateRef: [{ type: ContentChild, args: [TemplateRef, { static: true },] }],
+    unloadwhenhidden: [{ type: Input }]
 };
 
 /**
@@ -3751,9 +3853,13 @@ class SacValidationSummaryCommon {
      */
     constructor(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));
@@ -3862,6 +3968,7 @@ SacValidationSummaryCommon.ctorParameters = () => [
     { type: Injector }
 ];
 SacValidationSummaryCommon.propDecorators = {
+    e2eidentifier: [{ type: Input }],
     form: [{ type: Input }],
     formGroupName: [{ type: Input }],
     name: [{ type: Input }]
@@ -4481,14 +4588,14 @@ class SacInputSearchCommon extends SacInputCommon {
          * 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 EventEmitter();
+        /**
+         * Name des Such-Icons
+         */
+        this.iconname = '';
         // #endregion Private Methods
     }
     // #endregion Properties
@@ -4530,14 +4637,34 @@ SacInputSearchCommon.decorators = [
 SacInputSearchCommon.propDecorators = {
     buttonmode: [{ type: Input }],
     buttontext: [{ type: Input }],
-    iconname: [{ type: Input }],
-    clicked: [{ type: Output }]
+    clicked: [{ type: Output }],
+    iconname: [{ type: Input }]
 };
 
-// #region Classes
 /**
  * GridResponse class
  */
+// #region Exported Enums
+/**
+ * Enum for sorting
+ */
+var SortOrder;
+(function (SortOrder) {
+    /**
+     * No sorting
+     */
+    SortOrder[SortOrder["None"] = 0] = "None";
+    /**
+     * Ascending
+     */
+    SortOrder[SortOrder["Ascending"] = 1] = "Ascending";
+    /**
+     * Descending
+     */
+    SortOrder[SortOrder["Descending"] = 2] = "Descending";
+})(SortOrder || (SortOrder = {}));
+// #endregion Exported Enums
+// #region Exported Classes
 class GridResponse {
 }
 /**
@@ -4612,27 +4739,7 @@ class SortDescriptor {
         this.SortOrder = sortorder;
     }
 }
-// #endregion Classes
-// #region Enums
-/**
- * Enum for sorting
- */
-var SortOrder;
-(function (SortOrder) {
-    /**
-     * No sorting
-     */
-    SortOrder[SortOrder["None"] = 0] = "None";
-    /**
-     * Ascending
-     */
-    SortOrder[SortOrder["Ascending"] = 1] = "Ascending";
-    /**
-     * Descending
-     */
-    SortOrder[SortOrder["Descending"] = 2] = "Descending";
-})(SortOrder || (SortOrder = {}));
-// #endregion Enums
+// #endregion Exported Classes
 
 /**
  * Basic component for SacGrid
@@ -4660,6 +4767,18 @@ class SacGridCommon {
          * 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
          */
@@ -4672,14 +4791,6 @@ class SacGridCommon {
          * Event when the pager is clicked.
          */
         this.paging = new EventEmitter();
-        /**
-         * Event when a header is clicked so that the grid is sorted.
-         */
-        this.sorting = new EventEmitter();
-        /**
-         * Number of columns in the grid
-         */
-        this.ColumnCount = 0;
         /**
          * Column by which currently sorted.
          */
@@ -4688,6 +4799,10 @@ class SacGridCommon {
          * Current direction of sorting
          */
         this.sortDirection = SortOrder.None;
+        /**
+         * Event when a header is clicked so that the grid is sorted.
+         */
+        this.sorting = new EventEmitter();
         this.validationKeyService = injector.get(SACVALIDATIONKEY_SERVICE, new SacDefaultValidationKeyService());
         // Set Default Values from Injector
         this.pagesizetext = this.validationKeyService.PagingEntries;
@@ -4760,6 +4875,7 @@ SacGridCommon.ctorParameters = () => [
 ];
 SacGridCommon.propDecorators = {
     body: [{ type: Input }],
+    e2eidentifier: [{ type: Input }],
     emptytext: [{ type: Input }],
     headers: [{ type: Input }],
     maxvisiblepagenumbers: [{ type: Input }],
@@ -4768,10 +4884,10 @@ SacGridCommon.propDecorators = {
     pagesizedisabled: [{ type: Input }],
     pagesizes: [{ type: Input }],
     pagesizetext: [{ type: Input }],
-    pagingtext: [{ type: Input }],
-    value: [{ type: Input }],
     paging: [{ type: Output }],
+    pagingtext: [{ type: Input }],
     sorting: [{ type: Output }],
+    value: [{ type: Input }],
     sortdata: [{ type: Input }]
 };
 
@@ -4779,24 +4895,34 @@ SacGridCommon.propDecorators = {
  * Base Grid Action Button
  */
 class SacGridButtonCommon {
-    constructor() {
-        // #region Properties
+    // #endregion Properties
+    // #region Constructors
+    /**
+     * Constructor
+     *
+     * @param injector Injector to resovle services
+     */
+    constructor(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 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());
     }
-    // #endregion Properties
+    // #endregion Constructors
     // #region Public Getters And Setters
+    get isdisabled() {
+        return this._isdisabledvalue;
+    }
     /**
      * Deactivating buttons
      * @param v Deactivates the button. Can be a Boolean or the strings `true` or `false`.
@@ -4810,9 +4936,6 @@ class SacGridButtonCommon {
             this._isdisabledvalue = v === 'true';
         }
     }
-    get isdisabled() {
-        return this._isdisabledvalue;
-    }
     // #endregion Public Getters And Setters
     // #region Public Methods
     /**
@@ -4823,14 +4946,47 @@ class SacGridButtonCommon {
             this.clicked.emit(this.iconstyle);
         }
     }
+    /**
+     * Defines the CSS class for the icon on the button
+     */
+    getIconClass() {
+        let 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;
+    }
 }
 SacGridButtonCommon.decorators = [
     { type: Directive }
 ];
+SacGridButtonCommon.ctorParameters = () => [
+    { type: Injector }
+];
 SacGridButtonCommon.propDecorators = {
+    clicked: [{ type: Output }],
     icon: [{ type: Input }],
     iconstyle: [{ type: Input }],
-    clicked: [{ type: Output }],
+    name: [{ type: Input }],
     isdisabled: [{ type: Input }]
 };
 
@@ -4850,6 +5006,14 @@ class SacGridColumnBaseCommon {
         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
          */
@@ -4921,9 +5085,7 @@ class SacGridColumnBaseCommon {
      * Triggers the events so that the table is sorted according to this column.
      */
     SortByColumn() {
-        if (this.sortkey !== undefined &&
-            this.sortkey !== null &&
-            this.sortkey !== '') {
+        if (this.sortkey !== undefined && this.sortkey !== null && this.sortkey !== '') {
             return this.grid.SortBy(this.sortkey);
         }
     }
@@ -4931,6 +5093,12 @@ class SacGridColumnBaseCommon {
      * Called when the component is destroyed.
      */
     ngOnDestroy() {
+        if (this.headerElement) {
+            this.headerElement.nativeElement.remove();
+        }
+        if (this.bodyElement) {
+            this.bodyElement.nativeElement.remove();
+        }
         if (this.IsHeader()) {
             this.grid.UnregisterColumn();
         }
@@ -4959,13 +5127,17 @@ SacGridColumnBaseCommon.ctorParameters = () => [
     { type: ElementRef }
 ];
 SacGridColumnBaseCommon.propDecorators = {
+    alignment: [{ type: Input }],
+    bodyElement: [{ type: ViewChild, args: ['bodyElement', { static: false },] }],
+    contextstyle: [{ type: Input }],
     header: [{ type: Input }],
+    headerElement: [{ type: ViewChild, args: ['headerElement', { static: false },] }],
     name: [{ type: Input }],
+    rowclicked: [{ type: Output }],
     sortkey: [{ type: Input }],
     type: [{ type: Input }],
     value: [{ type: Input }],
-    width: [{ type: Input }],
-    rowclicked: [{ type: Output }]
+    width: [{ type: Input }]
 };
 
 /**
@@ -4987,18 +5159,18 @@ class SacGridColumnCommon extends SacGridColumnBaseCommon {
     }
     // #endregion Constructors
     // #region Public Getters And Setters
-    /**
-     * Sets the ellipsis property. Can be a Boolean or the strings `true` or `false`.
-     */
-    set ellipsis(v) {
-        this._ellipsis = convertToBoolean(v);
-    }
     /**
      * Getter for the ellipsis property. Always returns a boolean type.
      */
     get ellipsis() {
         return this._ellipsis;
     }
+    /**
+     * Sets the ellipsis property. Can be a Boolean or the strings `true` or `false`.
+     */
+    set ellipsis(v) {
+        this._ellipsis = convertToBoolean(v);
+    }
     // #endregion Public Getters And Setters
     // #region Public Methods
     /**
@@ -5072,6 +5244,30 @@ class SacPagingCommon {
          * 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
          */
@@ -5089,35 +5285,19 @@ class SacPagingCommon {
          */
         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 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;
@@ -5126,17 +5306,6 @@ class SacPagingCommon {
     }
     // #endregion Constructors
     // #region Public Getters And Setters
-    /**
-     * Property for Pager Data
-     */
-    set pagerdata(p) {
-        if (p != null) {
-            this.totalRowCount = p.TotalRowCount;
-            this.activePageIndex = p.CurrentPageIndex;
-            this.pageSize = p.PageSize;
-        }
-        this.createPager();
-    }
     /**
      * Property with text for total entries in page
      */
@@ -5158,6 +5327,17 @@ class SacPagingCommon {
     get getPageSizes() {
         return this.pagesizes.split('|').map((itm) => Number(itm));
     }
+    /**
+     * Property for Pager Data
+     */
+    set pagerdata(p) {
+        if (p != null) {
+            this.totalRowCount = p.TotalRowCount;
+            this.activePageIndex = p.CurrentPageIndex;
+            this.pageSize = p.PageSize;
+        }
+        this.createPager();
+    }
     // #endregion Public Getters And Setters
     // #region Public Methods
     /**
@@ -5295,12 +5475,13 @@ SacPagingCommon.ctorParameters = () => [
     { type: Injector }
 ];
 SacPagingCommon.propDecorators = {
+    e2eidentifier: [{ type: Input }],
     name: [{ type: Input }],
     pagesizedisabled: [{ type: Input }],
     pagesizes: [{ type: Input }],
     pagesizetext: [{ type: Input }],
-    pagingtext: [{ type: Input }],
     paging: [{ type: Output }],
+    pagingtext: [{ type: Input }],
     pagerdata: [{ type: Input }]
 };
 
@@ -5635,7 +5816,7 @@ class PopUpHelper {
             return element.offsetTop;
         }
         const parentValue = this.getOffsetTopParent(element.offsetParent);
-        let offset = element.offsetTop;
+        const offset = element.offsetTop;
         return parentValue + offset;
     }
     /**
@@ -5810,6 +5991,9 @@ class SacBaseDateTimeControl extends SacBaseModelControl {
         else {
             this.value = null;
         }
+        // update imaks reference
+        this.cdRef.detectChanges();
+        this.iMask.maskRef.updateControl();
     }
     /**
      * Returns the position of the tooltip
@@ -5979,6 +6163,7 @@ SacBaseDateTimeControl.ctorParameters = () => [
     { type: ChangeDetectorRef }
 ];
 SacBaseDateTimeControl.propDecorators = {
+    iMask: [{ type: ViewChild, args: [IMaskDirective, { static: false },] }],
     isrequired: [{ type: Input }],
     pickerarrow: [{ type: ViewChild, args: ['pickerarrow', { static: false },] }],
     pickerbutton: [{ type: ViewChild, args: ['pickerbutton', { static: true },] }],
@@ -6249,6 +6434,14 @@ class DateSelectorItem {
         this.isnew = isnew;
     }
 }
+// #endregion Classes
+// #region Variables
+/**
+ * Moment
+ */
+const moment$2 = moment_;
+// #endregion Variables
+// #region Exported Classes
 /**
  *Basis Komponente für SacDateSelector
  */
@@ -6272,10 +6465,18 @@ class SacDateSelectorCommon {
          * 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
          */
@@ -6344,6 +6545,10 @@ class SacDateSelectorCommon {
             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,
         });
@@ -6445,12 +6650,8 @@ class SacDateSelectorCommon {
      */
     selectDate(v) {
         if (v.isenabled) {
-            this.dates.forEach((date) => date
-                .filter((filter) => filter.isnew)
-                .forEach((itm) => (itm.isnew = false)));
-            this.dates.forEach((date) => date
-                .filter((filter) => filter.isselected)
-                .forEach((itm) => (itm.isselected = false)));
+            this.dates.forEach((date) => date.filter((filter) => filter.isnew).forEach((itm) => (itm.isnew = false)));
+            this.dates.forEach((date) => date.filter((filter) => filter.isselected).forEach((itm) => (itm.isselected = false)));
             v.isnew = true;
             v.isselected = true;
             const dateValue = moment$2(v.date);
@@ -6478,6 +6679,9 @@ class SacDateSelectorCommon {
      * Setter für Stunden Uhrzeit
      */
     setHours(v) {
+        if (v >= 24) {
+            return;
+        }
         /**
          * Select Value setzen falls leer
          */
@@ -6493,6 +6697,9 @@ class SacDateSelectorCommon {
      * Setter für Minuten Uhrzeit
      */
     setMinutes(v) {
+        if (v >= 60) {
+            return;
+        }
         /**
          * Select Value setzen falls leer
          */
@@ -6570,9 +6777,7 @@ class SacDateSelectorCommon {
         for (let dayinmonth = 1; dayinmonth <= currentMonth.daysInMonth(); dayinmonth++) {
             let isSelectedDate = false;
             let isNewDate = false;
-            const isCurrentDate = moment$2().month() === this.month &&
-                moment$2().year() === this.year &&
-                moment$2().date() === dayinmonth;
+            const 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 =
@@ -6624,6 +6829,11 @@ class SacDateSelectorCommon {
         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;
@@ -6640,19 +6850,15 @@ SacDateSelectorCommon.ctorParameters = () => [
 SacDateSelectorCommon.propDecorators = {
     autoapplyselection: [{ type: Input }],
     dateselection: [{ type: Input }],
+    e2eidentifier: [{ type: Input }],
     month: [{ type: Input }],
+    name: [{ type: Input }],
     selectdate: [{ type: Output }],
     timeselection: [{ type: Input }],
     year: [{ type: Input }],
     initialvalue: [{ type: Input }]
 };
-// #endregion Classes
-// #region Variables
-/**
- * Moment
- */
-const moment$2 = moment_;
-// #endregion Variables
+// #endregion Exported Classes
 
 /**
  * Komponente für SacDateTimeCommon. Extends SacBaseDateTimeControl
@@ -7143,12 +7349,16 @@ SacStaticFormContainerCommon.propDecorators = {
  **/
 class SacStaticLabelCommon extends SacInputBase {
     constructor() {
+        // #region Properties
         super(...arguments);
         /**
          * Erlaubt HTML Content in der Anzeige des Wertes
          */
         this.allowhtml = false;
+        // #endregion Public Methods
     }
+    // #endregion Properties
+    // #region Public Methods
     /**
      * Validierung des Controls
      *
@@ -7172,18 +7382,15 @@ SacStaticLabelCommon.propDecorators = {
  */
 class SacWizardCommon {
     constructor() {
-        /**
-         * 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 EventEmitter();
+        this.name = '';
         /**
          * Leere Implementation von 'propagateChange'. Muss gemacht werden, damit kein Fehler entsteht
          */
@@ -7192,52 +7399,26 @@ class SacWizardCommon {
          * Leere Implementation von 'propagateTouch'. Muss gemacht werden, damit kein Fehler entsteht
          */
         this.propagateTouch = () => { };
+        /**
+         * EventEmitter wenn der Schritt geändert wird
+         */
+        this.stepchanged = new EventEmitter();
+        // #endregion Private Methods
     }
-    /**
-     * Setter und Getter für aktueller Schritt
-     */
-    set currentstep(v) {
-        this.changeStep(v);
-        this.propagateChange(this._currentstep);
-    }
-    get currentstep() {
-        return this._currentstep;
-    }
-    setStepInternal(step) {
-        this._currentstep = step;
-        this.propagateChange(this._currentstep);
-    }
-    // #region Control initialisieren
-    /**
-     * AfterContentInit Event
-     */
-    ngAfterContentInit() {
-        this.initSteps();
-    }
-    /**
-     * Ursprünglicher Schritt wird selektiert
-     */
-    initSteps() {
-        const activeStep = this.wizardItems().filter((step) => step.active);
-        if (activeStep.length === 0) {
-            const initStep = this.wizardItems().toArray()[0];
-            this.selectStep(initStep);
-            initStep.disabled = false;
-            this.setStepInternal(initStep.id);
-        }
+    // #endregion Properties
+    // #region Public Getters And Setters
+    get currentstep() {
+        return this._currentstep;
     }
-    // #endregion
     /**
-     * Schritt selektieren
-     * @param step Step welcher selektiert werden soll
+     * Setter und Getter für aktueller Schritt
      */
-    selectStep(step) {
-        // Cancel if Navigation disabled
-        if (this.disablenavigation) {
-            return;
-        }
-        this.changeStep(step.id);
+    set currentstep(v) {
+        this.changeStep(v);
+        this.propagateChange(this._currentstep);
     }
+    // #endregion Public Getters And Setters
+    // #region Public Methods
     /**
      * Auf nächsten/vorherigen Schritt gehen
      * @param step Step auf welchen gewechselt werden soll
@@ -7248,7 +7429,7 @@ class SacWizardCommon {
         }
         const wizardItemsArray = this.wizardItems().toArray();
         const itemsCount = wizardItemsArray.length;
-        const currentItemIndex = wizardItemsArray.findIndex(itm => itm.id === step);
+        const currentItemIndex = wizardItemsArray.findIndex((itm) => itm.id === step);
         for (let i = 0; i < itemsCount; i++) {
             const item = wizardItemsArray[i];
             if (i < currentItemIndex) {
@@ -7273,6 +7454,12 @@ class SacWizardCommon {
         this.setStepInternal(step);
         this.stepchanged.emit(step);
     }
+    /**
+     * AfterContentInit Event
+     */
+    ngAfterContentInit() {
+        this.initSteps();
+    }
     /**
      * Methode, damit andere Controls änderungen im Control mitbekommen können
      * Zur Änderungsinfo die Methode propagateChange aufrufen.
@@ -7286,6 +7473,17 @@ class SacWizardCommon {
     registerOnTouched(fn) {
         this.propagateTouch = (obj) => fn(obj);
     }
+    /**
+     * Schritt selektieren
+     * @param step Step welcher selektiert werden soll
+     */
+    selectStep(step) {
+        // Cancel if Navigation disabled
+        if (this.disablenavigation) {
+            return;
+        }
+        this.changeStep(step.id);
+    }
     /**
      * Methode zum schreiben von Werten aus dem Model in das Control
      */
@@ -7294,15 +7492,33 @@ class SacWizardCommon {
             this.changeStep(value);
         }
     }
+    // #endregion Public Methods
+    // #region Private Methods
+    /**
+     * Ursprünglicher Schritt wird selektiert
+     */
+    initSteps() {
+        const activeStep = this.wizardItems().filter((step) => step.active);
+        if (activeStep.length === 0) {
+            const initStep = this.wizardItems().toArray()[0];
+            this.selectStep(initStep);
+            initStep.disabled = false;
+            this.setStepInternal(initStep.id);
+        }
+    }
+    setStepInternal(step) {
+        this._currentstep = step;
+        this.propagateChange(this._currentstep);
+    }
 }
 SacWizardCommon.decorators = [
     { type: Directive }
 ];
 SacWizardCommon.propDecorators = {
-    name: [{ type: Input }],
     disablenavigation: [{ type: Input }],
-    currentstep: [{ type: Input }],
-    stepchanged: [{ type: Output }]
+    name: [{ type: Input }],
+    stepchanged: [{ type: Output }],
+    currentstep: [{ type: Input }]
 };
 
 /**
@@ -7310,14 +7526,16 @@ SacWizardCommon.propDecorators = {
  */
 class SacWizardItemCommon {
     constructor() {
-        /**
-         * 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
     }
 }
 SacWizardItemCommon.decorators = [
@@ -7325,9 +7543,9 @@ SacWizardItemCommon.decorators = [
 ];
 SacWizardItemCommon.propDecorators = {
     active: [{ type: Input }],
-    iscomplete: [{ type: Input }],
     disabled: [{ type: Input }],
     id: [{ type: Input }],
+    iscomplete: [{ type: Input }],
     label: [{ type: Input }]
 };
 
@@ -7335,6 +7553,8 @@ SacWizardItemCommon.propDecorators = {
  * Settings für TinyMCE Dialog
  */
 class TinyMceDialogSettings {
+    // #endregion Properties
+    // #region Constructors
     /**
      * Konstruktor
      * @param init Initale Werte
@@ -7372,6 +7592,10 @@ class SacTinyMceCommon extends SacBaseModelControl {
             file_picker_callback: this.showSelectDialog,
             save_onsavecallback: () => { },
         };
+        /**
+         * TinyMCE Config
+         */
+        this._config = {};
         /**
          * Erlaubt im Filebrowser das löschen von Dateien
          */
@@ -7420,26 +7644,22 @@ class SacTinyMceCommon extends SacBaseModelControl {
          * 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 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 = {};
@@ -7448,19 +7668,25 @@ class SacTinyMceCommon extends SacBaseModelControl {
     // #region Public Getters And Setters
     /**
      * TinyMCE Konfiguration
-     * @link https://www.tiny.cloud/docs/configure/
      */
-    set config(v) {
-        this._config = Object.assign(Object.assign(Object.assign(Object.assign({}, this.getDynamicSettings()), this.baseConfig), this.overwriteDefaultSettings()), v);
+    get config() {
+        return this._config;
     }
     /**
      * TinyMCE Konfiguration
+     * @link https://www.tiny.cloud/docs/configure/
      */
-    get config() {
-        return this._config;
+    set config(v) {
+        this._config = Object.assign(Object.assign(Object.assign(Object.assign({}, this.getDynamicSettings()), this.baseConfig), this.overwriteDefaultSettings()), v);
     }
     // #endregion Public Getters And Setters
     // #region Public Methods
+    /**
+     * event when control is touched
+     */
+    blur() {
+        this.propagateTouch();
+    }
     /**
      * Schliesst den Dateiauswahl Dialog
      */
@@ -7479,10 +7705,8 @@ class SacTinyMceCommon extends SacBaseModelControl {
      */
     setSelectDialogResult() {
         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);
         }
@@ -7507,16 +7731,13 @@ class SacTinyMceCommon extends SacBaseModelControl {
                 });
                 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;
                 }
             });
@@ -7534,7 +7755,7 @@ class SacTinyMceCommon extends SacBaseModelControl {
         }
         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
@@ -7569,9 +7790,9 @@ SacTinyMceCommon.propDecorators = {
     filetypesvideo: [{ type: Input }],
     height: [{ type: Input }],
     isrequired: [{ type: Input }],
+    onsave: [{ type: Output }],
     validationmessagerequired: [{ type: Input }],
     validationmessagesummaryrequired: [{ type: Input }],
-    onsave: [{ type: Output }],
     config: [{ type: Input }]
 };
 
@@ -7603,7 +7824,7 @@ class SacTreeviewCommon extends SacBaseModelControl {
         /**
          * 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.
          */
@@ -7743,10 +7964,10 @@ class SacTreeviewCommon extends SacBaseModelControl {
         return value === true || value === 'true';
     }
     isExpandedState(node) {
-        if (!node || !this.attrexanded) {
+        if (!node || !this.attrexpanded) {
             return false;
         }
-        let value = node[this.attrexanded];
+        let value = node[this.attrexpanded];
         return value === true || value === 'true';
     }
     isHoverState(node) {
@@ -7876,21 +8097,21 @@ class SacTreeviewCommon extends SacBaseModelControl {
         return null;
     }
     invertExpandedState(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;
         }
-        let value = node[this.attrexanded];
+        let 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;
         }
     }
     resetSelectedState(node) {
@@ -7914,7 +8135,7 @@ SacTreeviewCommon.propDecorators = {
     actionclicked: [{ type: Output }],
     attrchildren: [{ type: Input }],
     attrdisableaction: [{ type: Input }],
-    attrexanded: [{ type: Input }],
+    attrexpanded: [{ type: Input }],
     attrhoverstate: [{ type: Input }],
     attricon: [{ type: Input }],
     attrid: [{ type: Input }],
@@ -7984,6 +8205,14 @@ class SacTooltipCommon {
          * 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
          */
@@ -8170,6 +8399,8 @@ SacTooltipCommon.ctorParameters = () => [
 ];
 SacTooltipCommon.propDecorators = {
     content: [{ type: ViewChild, args: ['container', { static: true },] }],
+    e2eidentifier: [{ type: Input }],
+    name: [{ type: Input }],
     position: [{ type: Input }],
     tooltiptext: [{ type: Input }],
     inlinemode: [{ type: Input }],
@@ -8223,9 +8454,22 @@ class SacUploadBase extends SacBaseModelControl {
          * Handling von neuen Files im Input Control
          */
         this.fileListener = () => {
-            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) {
+                const maxFiles = this.GetMaxFiles() + this.UploadedFileCount();
+                const possibleFiles = maxFiles - this.uploadInput.nativeElement.files.length;
+                if (possibleFiles < 0) {
+                    const dataTransfer = new DataTransfer();
+                    const files = Array.from(this.uploadInput.nativeElement.files).splice(0, this.uploadInput.nativeElement.files.length + possibleFiles);
+                    // clone files
+                    files.forEach((file) => dataTransfer.items.add(file));
+                    this.uploadInput.nativeElement.files = dataTransfer.files;
+                }
+            }
+            this.uploadService.handleFileList(this.uploadInput.nativeElement.files);
         };
         /**
          * Definiert das Control als Required
@@ -8552,7 +8796,7 @@ class SacUploadBase extends SacBaseModelControl {
         }
         return error;
     }
-    // #endregion Public Methods
+    // #endregion Protected Methods
     // #region Private Methods
     UpdateFileCount() {
         // HACK: Add addition property to FormControl. Can be fixed if solution for ticket: https://github.com/angular/angular/issues/19686
@@ -8689,7 +8933,7 @@ class SacDropzoneMultipleCommon extends SacUploadBase {
          * Resource Key für Validation Message Required in Validation Summary
          */
         this.validationmessagesummaryminfiles = this.validationKeyService.ValidationErrorSummaryFilesMin;
-        // #endregion Public Methods
+        // #endregion Protected Methods
     }
     // #endregion Properties
     // #region Public Methods
@@ -8804,6 +9048,14 @@ class SacDropzoneMultipleCommon extends SacUploadBase {
         }
         return error;
     }
+    // #endregion Public Methods
+    // #region Protected Methods
+    /**
+     * @inheritdoc
+     */
+    GetMaxFiles() {
+        return this.maxfiles;
+    }
 }
 SacDropzoneMultipleCommon.decorators = [
     { type: Directive }
@@ -8831,7 +9083,7 @@ class SacDropzoneSingleCommon extends SacUploadBase {
          * Höhe der Dropzone. Wert wird mit Einheit angegeben.
          */
         this.uploadheight = null;
-        // #endregion Public Methods
+        // #endregion Protected Methods
     }
     // #endregion Properties
     // #region Public Methods
@@ -8914,6 +9166,14 @@ class SacDropzoneSingleCommon extends SacUploadBase {
             this.active = true;
         }
     }
+    // #endregion Public Methods
+    // #region Protected Methods
+    /**
+     * @inheritdoc
+     */
+    GetMaxFiles() {
+        return 1;
+    }
 }
 SacDropzoneSingleCommon.decorators = [
     { type: Directive }
@@ -8953,7 +9213,7 @@ class SacUploadMultipleCommon extends SacUploadBase {
          * Resource Key für Validation Message Required in Validation Summary
          */
         this.validationmessagesummaryminfiles = this.validationKeyService.ValidationErrorSummaryFilesMin;
-        // #endregion Public Methods
+        // #endregion Protected Methods
     }
     // #endregion Properties
     // #region Public Methods
@@ -9027,6 +9287,14 @@ class SacUploadMultipleCommon extends SacUploadBase {
         }
         return error;
     }
+    // #endregion Public Methods
+    // #region Protected Methods
+    /**
+     * @inheritdoc
+     */
+    GetMaxFiles() {
+        return this.maxfiles;
+    }
 }
 SacUploadMultipleCommon.decorators = [
     { type: Directive }
@@ -9055,7 +9323,7 @@ class SacUploadSingleCommon extends SacUploadBase {
          * Label für Upload Button
          */
         this.buttonupload = '';
-        // #endregion Public Methods
+        // #endregion Protected Methods
     }
     // #endregion Properties
     // #region Public Methods
@@ -9088,6 +9356,14 @@ class SacUploadSingleCommon extends SacUploadBase {
             }
         }
     }
+    // #endregion Public Methods
+    // #region Protected Methods
+    /**
+     * @inheritdoc
+     */
+    GetMaxFiles() {
+        return 1;
+    }
 }
 SacUploadSingleCommon.decorators = [
     { type: Directive }
@@ -9539,43 +9815,35 @@ SacMultilanguageInputAreaCommon.propDecorators = {
  */
 class SacConfirmCommon {
     constructor() {
-        //#region Input / Output Properties
-        /**
-         * Event wenn Dialog geschlossen wird
-         */
-        this.onconfirm = new 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
-    }
-    /**
-     * Definiert, ob für den Dialog ein Image definiert wurde
-     */
-    hasImage() {
-        return this.image !== '';
+        /**
+         * Nachricht die auf dem Dialog angezeigt wird
+         */
+        this.message = '';
+        /**
+         * Event wenn Dialog geschlossen wird
+         */
+        this.onconfirm = new EventEmitter();
+        /**
+       * Dialog Titel für Confirm Dialog
+       */
+        this.title = '';
+        // #endregion Public Methods
     }
-    //#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
@@ -9585,10 +9853,10 @@ class SacConfirmCommon {
         this.isvisible = false;
     }
     /**
-     * Zeigt den Dialog an
+     * Definiert, ob für den Dialog ein Image definiert wurde
      */
-    show() {
-        this.isvisible = true;
+    hasImage() {
+        return this.image !== '';
     }
     /**
      * Blendet den Dialog aus
@@ -9596,16 +9864,22 @@ class SacConfirmCommon {
     hide() {
         this.isvisible = false;
     }
+    /**
+     * Zeigt den Dialog an
+     */
+    show() {
+        this.isvisible = true;
+    }
 }
 SacConfirmCommon.decorators = [
     { type: Directive }
 ];
 SacConfirmCommon.propDecorators = {
-    onconfirm: [{ type: Output }],
-    title: [{ type: Input }],
-    message: [{ type: Input }],
+    buttons: [{ type: Input }],
     image: [{ type: Input }],
-    buttons: [{ type: Input }]
+    message: [{ type: Input }],
+    onconfirm: [{ type: Output }],
+    title: [{ type: Input }]
 };
 
 /**
@@ -10119,10 +10393,18 @@ class SacContextmenuCommon {
          * 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.
          *
@@ -10268,8 +10550,10 @@ SacContextmenuCommon.propDecorators = {
     buttontemplate: [{ type: Input }],
     container: [{ type: Input }],
     cssclass: [{ type: Input }],
+    e2eidentifier: [{ type: Input }],
     isopen: [{ type: Input }],
     menuitems: [{ type: ContentChildren, args: [SacContextmenuItemCommon,] }],
+    name: [{ type: Input }],
     placement: [{ type: Input }],
     onClick: [{ type: HostListener, args: ['document:click', ['$event.target'],] }]
 };
@@ -10918,6 +11202,53 @@ SacFileBrowserCommon.propDecorators = {
     exitEditMode: [{ type: HostListener, args: ['document:click', ['$event.target'],] }]
 };
 
+class SacTestingAttributePipe {
+    // #endregion Properties
+    // #region Constructors
+    /**
+     *
+     */
+    constructor(injector) {
+        // get attribute state from config
+        const configurationService = injector.get(SACCONFIGURATION_SERVICE, new SacDefaultConfigurationService());
+        this.isEnabled = configurationService.EnableE2EAttributes;
+    }
+    // #endregion Constructors
+    // #region Public Methods
+    transform(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;
+    }
+}
+SacTestingAttributePipe.decorators = [
+    { type: Pipe, args: [{
+                name: 'testingattribute',
+            },] }
+];
+SacTestingAttributePipe.ctorParameters = () => [
+    { type: Injector }
+];
+
+class SACCommonUtliltiesModule {
+}
+SACCommonUtliltiesModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [SacTestingAttributePipe],
+                imports: [],
+                exports: [SacTestingAttributePipe],
+            },] }
+];
+
 /**
  * Model für Sprachen
  */
@@ -10936,7 +11267,7 @@ SACCommonListboxOptionModule.decorators = [
     { type: NgModule, args: [{
                 declarations: [],
                 imports: [],
-                exports: []
+                exports: [],
             },] }
 ];
 
@@ -10948,5 +11279,5 @@ SACCommonListboxOptionModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { ControlHeight, GridResponse, IconType, Interpolation, LanguageModel, PagerData, PagerRequest, Positioning, SACCONFIGURATION_SERVICE, SACCommonListboxOptionModule, SACFILEBROWSER_SERVICE, SACICON_SERVICE, SACLANGUAGE_SERVICE, SACLOCALISATION_SERVICE, SACVALIDATIONKEY_SERVICE, SacAbstractConfigurationService, SacAbstractFileBrowserService, SacAbstractIconService, SacAbstractLanguageService, SacAbstractLocalisationService, SacBaseDateTimeControl, SacBaseListControl, SacBaseModelControl, SacBaseSelectControl, SacButtonCommon, SacCheckboxCommon, SacConfirmButton, SacConfirmCommon, SacContextMenuContrainerCommon, SacContextmenuAnchorCommon, SacContextmenuCommon, SacContextmenuItemButtonCommon, SacContextmenuItemCommon, SacDateCommon, SacDateSelectorCommon, SacDateTimeCommon, SacDialogCommon, SacDropdownCommon, SacDropdownOptionCommon, SacDropzoneMultipleCommon, SacDropzoneSingleCommon, SacFileBrowserCommon, SacFormCommon, SacFormLayoutCommon, SacGridButtonCommon, SacGridColumnActionCommon, SacGridColumnBaseCommon, SacGridColumnCommon, SacGridCommon, SacGridImageCommon, SacInputAreaCommon, SacInputBase, SacInputCommon, SacInputCurrencyCommon, SacInputDecimalCommon, SacInputEmailCommon, SacInputIntegerCommon, SacInputPasswordCommon, SacInputSearchCommon, SacListboxCommon, SacListboxOptionCommon, SacMultilanguageInputAreaCommon, SacMultilanguageInputCommon, SacPagingCommon, SacRadiobuttonCommon, SacRadiobuttonsCommon, SacStaticFormContainerCommon, SacStaticLabelCommon, SacTabCommon, SacTabItemCommon, SacTimeCommon, SacTinyMceCommon, SacTooltipCommon, SacTreeviewCommon, SacUploadBase, SacUploadFile, SacUploadMultipleCommon, SacUploadSingleCommon, SacValidationSummaryCommon, SacWizardCommon, SacWizardItemCommon, ServiceConfirmCommon, SortDescriptor, SortOrder, TooltipPosition, Validation, ValidationErrorItem, convertToBoolean, convertToNumber, isDefined, mapToObject, positionElements, positionService };
+export { ControlHeight, GridResponse, IconType, Interpolation, LanguageModel, PagerData, PagerRequest, Positioning, SACCONFIGURATION_SERVICE, SACCommonListboxOptionModule, SACCommonUtliltiesModule, SACFILEBROWSER_SERVICE, SACICON_SERVICE, SACLANGUAGE_SERVICE, SACLOCALISATION_SERVICE, SACVALIDATIONKEY_SERVICE, SacAbstractConfigurationService, SacAbstractFileBrowserService, SacAbstractIconService, SacAbstractLanguageService, SacAbstractLocalisationService, SacBaseDateTimeControl, SacBaseListControl, SacBaseModelControl, SacBaseSelectControl, SacButtonCommon, SacCheckboxCommon, SacConfirmButton, SacConfirmCommon, SacContextMenuContrainerCommon, SacContextmenuAnchorCommon, SacContextmenuCommon, SacContextmenuItemButtonCommon, SacContextmenuItemCommon, SacDateCommon, SacDateSelectorCommon, SacDateTimeCommon, SacDialogCommon, SacDropdownCommon, SacDropdownOptionCommon, SacDropzoneMultipleCommon, SacDropzoneSingleCommon, SacFileBrowserCommon, SacFormCommon, SacFormLayoutCommon, SacGridButtonCommon, SacGridColumnActionCommon, SacGridColumnBaseCommon, SacGridColumnCommon, SacGridCommon, SacGridImageCommon, SacInputAreaCommon, SacInputBase, SacInputCommon, SacInputCurrencyCommon, SacInputDecimalCommon, SacInputEmailCommon, SacInputIntegerCommon, SacInputPasswordCommon, SacInputSearchCommon, SacListboxCommon, SacListboxOptionCommon, SacMultilanguageInputAreaCommon, SacMultilanguageInputCommon, SacPagingCommon, SacRadiobuttonCommon, SacRadiobuttonsCommon, SacStaticFormContainerCommon, SacStaticLabelCommon, SacTabCommon, SacTabItemCommon, SacTestingAttributePipe, SacTimeCommon, SacTinyMceCommon, SacTooltipCommon, SacTreeviewCommon, SacUploadBase, SacUploadFile, SacUploadMultipleCommon, SacUploadSingleCommon, SacValidationSummaryCommon, SacWizardCommon, SacWizardItemCommon, ServiceConfirmCommon, SortDescriptor, SortOrder, TooltipPosition, Validation, ValidationErrorItem, convertToBoolean, convertToNumber, isDefined, mapToObject, positionElements, positionService };
 //# sourceMappingURL=simpleangularcontrols-sac-common.js.map