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

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,10 @@ class SacGridColumnBaseCommon {
         this.grid = grid;
         this.injector = injector;
         this.el = el;
+        /**
+         * Align the column
+         */
+        this.alignment = 'left';
         /**
          * Click on Column Element
          */
@@ -4921,9 +5081,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 +5089,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 +5123,16 @@ SacGridColumnBaseCommon.ctorParameters = () => [
     { type: ElementRef }
 ];
 SacGridColumnBaseCommon.propDecorators = {
+    alignment: [{ type: Input }],
+    bodyElement: [{ type: ViewChild, args: ['bodyElement', { static: false },] }],
     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 +5154,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 +5239,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 +5280,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 +5301,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 +5322,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 +5470,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 +5811,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 +5986,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 +6158,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 +6429,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 +6460,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 +6540,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 +6645,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 +6674,9 @@ class SacDateSelectorCommon {
      * Setter für Stunden Uhrzeit
      */
     setHours(v) {
+        if (v >= 24) {
+            return;
+        }
         /**
          * Select Value setzen falls leer
          */
@@ -6493,6 +6692,9 @@ class SacDateSelectorCommon {
      * Setter für Minuten Uhrzeit
      */
     setMinutes(v) {
+        if (v >= 60) {
+            return;
+        }
         /**
          * Select Value setzen falls leer
          */
@@ -6570,9 +6772,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 +6824,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 +6845,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 +7344,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 +7377,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 +7394,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 +7424,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 +7449,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 +7468,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 +7487,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 +7521,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 +7538,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 +7548,8 @@ SacWizardItemCommon.propDecorators = {
  * Settings für TinyMCE Dialog
  */
 class TinyMceDialogSettings {
+    // #endregion Properties
+    // #region Constructors
     /**
      * Konstruktor
      * @param init Initale Werte
@@ -7372,6 +7587,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 +7639,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 +7663,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 +7700,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 +7726,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 +7750,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 +7785,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 }]
 };
 
@@ -7984,6 +8200,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 +8394,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 +8449,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 +8791,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 +8928,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 +9043,14 @@ class SacDropzoneMultipleCommon extends SacUploadBase {
         }
         return error;
     }
+    // #endregion Public Methods
+    // #region Protected Methods
+    /**
+     * @inheritdoc
+     */
+    GetMaxFiles() {
+        return this.maxfiles;
+    }
 }
 SacDropzoneMultipleCommon.decorators = [
     { type: Directive }
@@ -8831,7 +9078,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 +9161,14 @@ class SacDropzoneSingleCommon extends SacUploadBase {
             this.active = true;
         }
     }
+    // #endregion Public Methods
+    // #region Protected Methods
+    /**
+     * @inheritdoc
+     */
+    GetMaxFiles() {
+        return 1;
+    }
 }
 SacDropzoneSingleCommon.decorators = [
     { type: Directive }
@@ -8953,7 +9208,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 +9282,14 @@ class SacUploadMultipleCommon extends SacUploadBase {
         }
         return error;
     }
+    // #endregion Public Methods
+    // #region Protected Methods
+    /**
+     * @inheritdoc
+     */
+    GetMaxFiles() {
+        return this.maxfiles;
+    }
 }
 SacUploadMultipleCommon.decorators = [
     { type: Directive }
@@ -9055,7 +9318,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 +9351,14 @@ class SacUploadSingleCommon extends SacUploadBase {
             }
         }
     }
+    // #endregion Public Methods
+    // #region Protected Methods
+    /**
+     * @inheritdoc
+     */
+    GetMaxFiles() {
+        return 1;
+    }
 }
 SacUploadSingleCommon.decorators = [
     { type: Directive }
@@ -9539,43 +9810,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 +9848,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 +9859,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 +10388,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 +10545,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 +11197,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 +11262,7 @@ SACCommonListboxOptionModule.decorators = [
     { type: NgModule, args: [{
                 declarations: [],
                 imports: [],
-                exports: []
+                exports: [],
             },] }
 ];
 
@@ -10948,5 +11274,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