@simpleangularcontrols/sac-common 10.0.0-rc.11 → 10.0.0-rc.12

package/fesm2015/simpleangularcontrols-sac-common.js

@@ -1,6 +1,6 @@
 import { EventEmitter, Directive, Input, Output, ɵɵdefineInjectable, Injectable, InjectionToken, ɵɵinject, Inject, Host, Injector, ChangeDetectorRef, ViewChild, HostListener, Renderer2, ElementRef, ViewChildren, ContentChild, TemplateRef, NgZone, NgModule } from '@angular/core';
-import { NgControl, FormControlName, FormGroupDirective, Validators, FormGroup, NgForm } from '@angular/forms';
 import { Observable, of } from 'rxjs';
+import { NgControl, FormControlName, FormGroupDirective, Validators, FormGroup, NgForm } from '@angular/forms';
 import { HttpClient } from '@angular/common/http';
 import moment_, { ISO_8601 } from 'moment';
 import { MaskedRange } from 'imask';
@@ -171,7 +171,6 @@ 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.
          */
@@ -216,10 +215,11 @@ class SacFormLayoutCommon {
          * default label size for extra extra large devices
          */
         this.labelSizeXxl = null;
-        // #endregion Public Getters And Setters
+        /**
+         * 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 Properties
-    // #region Public Getters And Setters
     /**
      * Returns whether the inline error messages for the form are active.
      */
@@ -242,10 +242,10 @@ SacFormLayoutCommon.propDecorators = {
     labelSizeSm: [{ type: Input }],
     labelSizeXl: [{ type: Input }],
     labelSizeXs: [{ type: Input }],
-    labelSizeXxl: [{ type: Input }]
+    labelSizeXxl: [{ type: Input }],
+    splitlabelandhelptext: [{ type: Input }]
 };
 
-// #region Classes
 /**
  * abstract class for configuration settings providing in components
  */
@@ -259,7 +259,6 @@ SacAbstractConfigurationService.decorators = [
  * default configuration service for components
  * */
 class SacDefaultConfigurationService extends SacAbstractConfigurationService {
-    // #region Public Getters And Setters
     /**
      * @inheritdoc
      */
@@ -332,13 +331,17 @@ class SacDefaultConfigurationService extends SacAbstractConfigurationService {
     get LabelSizeXxl() {
         return null;
     }
+    /**
+     * @inheritdoc
+     */
+    get SplitLabelAndHelptext() {
+        return false;
+    }
 }
 SacDefaultConfigurationService.ɵprov = ɵɵdefineInjectable({ factory: function SacDefaultConfigurationService_Factory() { return new SacDefaultConfigurationService(); }, token: SacDefaultConfigurationService, providedIn: "root" });
 SacDefaultConfigurationService.decorators = [
     { type: Injectable, args: [{ providedIn: 'root' },] }
 ];
-// #endregion Classes
-// #region Variables
 /**
  * injection token for component configuration service
  */
@@ -1560,8 +1563,6 @@ function createGuid() {
  * Abstract Klasse für SacBaseModelControl. Implements ControlValueAccessor, Validator, OnInit
  */
 class SacBaseModelControl {
-    // #endregion Properties
-    // #region Constructors
     /**
      * Constructor
      * @param formlayout SacFormLayoutCommon to define scoped layout settings
@@ -1569,11 +1570,13 @@ class SacBaseModelControl {
      */
     constructor(formlayout, injector) {
         this.injector = injector;
-        // #region Properties
         /**
          * Inline Errors für das Control
          */
         this._inlineerrorenabled = null;
+        /**
+         * Label Text
+         */
         this._label = '';
         /**
          * Boolean Property dirty; default Wert - false
@@ -1595,6 +1598,10 @@ class SacBaseModelControl {
          * Form layout instance if exists
          */
         this.formlayout = null;
+        /**
+         * ControlHeight enum for use in HTML markup
+         */
+        this.ControlHeight = ControlHeight;
         /**
          * Defines the standard height of the components
          */
@@ -1647,10 +1654,6 @@ class SacBaseModelControl {
          * Name des Controls
          */
         this.name = createGuid();
-        /**
-         * ControlHeight enum for use in HTML markup
-         */
-        this.ControlHeight = ControlHeight;
         /**
          * Leere Implementation von "propagateChange". Muss gemacht werden, damit kein Fehler entsteht
          */
@@ -1659,43 +1662,16 @@ class SacBaseModelControl {
          * Leere Implementation von "propagateTouch". Muss gemacht werden, damit kein Fehler entsteht
          */
         this.propagateTouch = () => { };
+        /**
+         * 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;
         this.formlayout = formlayout;
         this.validationKeyService = injector.get(SACVALIDATIONKEY_SERVICE, new SacDefaultValidationKeyService());
         this.lngResourceService = injector.get(SACLOCALISATION_SERVICE, new SacDefaultLocalisationService(this.validationKeyService));
         this.configurationService = injector.get(SACCONFIGURATION_SERVICE, new SacDefaultConfigurationService());
         this.iconService = injector.get(SACICON_SERVICE, new SacDefaultIconService());
     }
-    // #endregion Constructors
-    // #region Public Getters And Setters
-    /**
-     * Aktiviert oder Deaktiviert die Inline Errors für das Control
-     */
-    set inlineerrorenabled(value) {
-        if (value === null || value === undefined) {
-            this._inlineerrorenabled = null;
-        }
-        else {
-            this._inlineerrorenabled = convertToBoolean(value);
-        }
-    }
-    /**
-     * Definiert den Label Text
-     */
-    set label(v) {
-        this._label = v;
-        this.UpdateLabelToControl();
-    }
-    /**
-     * Set Methode für NgModel Binding in Html Markup
-     * Input wird benötigt, damit der Wert auch über das Markup gesetzt werden kann.
-     */
-    set value(v) {
-        if (this.disabled) {
-            return;
-        }
-        this._value = this.ConvertInputValue(v);
-        this.propagateChange(this._value);
-    }
     /**
      * Get Icon for Helptext Tooltip
      */
@@ -1717,6 +1693,17 @@ class SacBaseModelControl {
     get inlineerrorenabled() {
         return this._inlineerrorenabled;
     }
+    /**
+     * Aktiviert oder Deaktiviert die Inline Errors für das Control
+     */
+    set inlineerrorenabled(value) {
+        if (value === null || value === undefined) {
+            this._inlineerrorenabled = null;
+        }
+        else {
+            this._inlineerrorenabled = convertToBoolean(value);
+        }
+    }
     /**
      * Methode ergibt boolean Wert wenn Form invalid oder nicht invalid ist
      */
@@ -1754,6 +1741,13 @@ class SacBaseModelControl {
     get label() {
         return this._label;
     }
+    /**
+     * Definiert den Label Text
+     */
+    set label(v) {
+        this._label = v;
+        this.UpdateLabelToControl();
+    }
     /**
      * returns an object with all label sizes. These values can then be transferred to corresponding CSS classes using a pipe
      */
@@ -1782,8 +1776,17 @@ class SacBaseModelControl {
     get value() {
         return this._value;
     }
-    // #endregion Public Getters And Setters
-    // #region Public Methods
+    /**
+     * Set Methode für NgModel Binding in Html Markup
+     * Input wird benötigt, damit der Wert auch über das Markup gesetzt werden kann.
+     */
+    set value(v) {
+        if (this.disabled) {
+            return;
+        }
+        this._value = this.ConvertInputValue(v);
+        this.propagateChange(this._value);
+    }
     /**
      * Methode ergibt Error anhand von gegebenen Kriterien
      */
@@ -1846,6 +1849,8 @@ class SacBaseModelControl {
         this.setIsAdaptiveLabel();
         // set method to display helptext
         this.setHelpTextMode();
+        // set SplitMode for Labels
+        this.setLabelSplitMode();
         this.OnClassInit();
     }
     /**
@@ -1899,8 +1904,6 @@ class SacBaseModelControl {
     writeValue(value) {
         this._value = value;
     }
-    // #endregion Public Abstract Methods
-    // #region Protected Methods
     /**
      * Method can Overwriten in Parent Classes
      * @param value Wert welcher in den korrekten Typ konvertiert werden soll
@@ -1927,8 +1930,6 @@ class SacBaseModelControl {
             this.ngControl.updateValueAndValidity({ onlySelf: true });
         }
     }
-    // #endregion Protected Methods
-    // #region Private Methods
     UpdateLabelToControl() {
         // HACK: Add addition property to FormControl. Can be fixed if solution for ticket: https://github.com/angular/angular/issues/19686
         if (this.ngControl) {
@@ -2038,6 +2039,18 @@ class SacBaseModelControl {
             }
         }
     }
+    setLabelSplitMode() {
+        var _a;
+        if (!this.splitlabelandhelptext) {
+            if ((_a = this.formlayout) === null || _a === void 0 ? void 0 : _a.splitlabelandhelptext) {
+                this.splitlabelandhelptext = this.formlayout.splitlabelandhelptext;
+            }
+            else {
+                this.splitlabelandhelptext =
+                    this.configurationService.SplitLabelAndHelptext;
+            }
+        }
+    }
 }
 SacBaseModelControl.decorators = [
     { type: Directive }
@@ -2061,6 +2074,7 @@ SacBaseModelControl.propDecorators = {
     labelSizeXs: [{ type: Input }],
     labelSizeXxl: [{ type: Input }],
     name: [{ type: Input }],
+    splitlabelandhelptext: [{ type: Input }],
     inlineerrorenabled: [{ type: Input }],
     label: [{ type: Input }],
     value: [{ type: Input }]
@@ -2168,6 +2182,19 @@ function emailValidator(validationMessage, validationMessageSummary) {
     };
 }
 
+function equalsValueValidator(requiredvalue, validationMessage, validationMessageSummary) {
+    return (control) => {
+        if (control.value !== requiredvalue) {
+            const parameters = new Map();
+            parameters.set('EQUALSVALUE', requiredvalue);
+            return CreateValidationError('equals', validationMessage, validationMessageSummary, parameters);
+        }
+        else {
+            return null;
+        }
+    };
+}
+
 // #region Variables
 /**
  * Moment
@@ -2381,6 +2408,19 @@ function multilanguageRequiredAnyValidator(languages, validationMessage, validat
     };
 }
 
+function notEqualsValueValidator(invalidValue, validationMessage, validationMessageSummary) {
+    return (control) => {
+        if (control.value === invalidValue) {
+            const parameters = new Map();
+            parameters.set('EQUALSVALUE', invalidValue);
+            return CreateValidationError('notequals', validationMessage, validationMessageSummary, parameters);
+        }
+        else {
+            return null;
+        }
+    };
+}
+
 function patternValidator(pattern, validationMessage, validationMessageSummary) {
     return (control) => {
         const validator = Validators.pattern(pattern);
@@ -2406,15 +2446,10 @@ function requiredValidator(validationMessage, validationMessageSummary) {
     };
 }
 
-/**
- * Moment
- */
-const moment$1 = moment_;
 /**
  * Klasse mit Standard Validatoren
  */
 class Validation {
-    // #region Public Static Methods
     /**
      * Die Methode ist von jedem Validator aufgerufen. Die setzt sowohl den errorType des gerpüfte Item, als auch die ErrorMessage (gemäss von errorType, FieldName und Parameters).
      * @param errorType Typ den Fehler
@@ -2436,6 +2471,18 @@ class Validation {
     static email(validationMessage, validationMessageSummary) {
         return emailValidator(validationMessage, validationMessageSummary);
     }
+    /**
+     * Validator validate if value is the requiredValue
+     * @param requiredValue Value that control should have
+     * @param control Control to be validate
+     * @param fieldName Label of control
+     * @param validationMessage validation message near the control
+     * @param validationMessageSummary validation inside the validation summary
+  
+     */
+    static equals(requiredValue, validationMessage, validationMessageSummary) {
+        return equalsValueValidator(requiredValue, validationMessage, validationMessageSummary);
+    }
     /**
      * Validator der prüft ob der Wert ein Datum ist.
      * @param control Control mit IDateTimeControl Interface implementierung
@@ -2556,6 +2603,17 @@ class Validation {
     static multilanguageRequiredAny(languages, validationMessage, validationMessageSummary) {
         return multilanguageRequiredAnyValidator(languages, validationMessage, validationMessageSummary);
     }
+    /**
+     * Validator validate if value is not the invalidValue
+     * @param invalidValue Value that control doesn't should have
+     * @param control Control to be validate
+     * @param fieldName Label of control
+     * @param validationMessage validation message near the control
+     * @param validationMessageSummary validation inside the validation summary
+     */
+    static notequals(invalidValue, validationMessage, validationMessageSummary) {
+        return notEqualsValueValidator(invalidValue, validationMessage, validationMessageSummary);
+    }
     /**
      * Validierung mit einem RegEx Pattern
      * @param control Control das validiert werden soll.
@@ -2577,7 +2635,11 @@ class Validation {
     static required(validationMessage, validationMessageSummary) {
         return requiredValidator(validationMessage, validationMessageSummary);
     }
-}
+}
+/**
+ * Moment
+ */
+const moment$1 = moment_;
 
 /**
  * Basis Komponente für SacRadiobuttonsCommon. Extends SacBaseModelControl
@@ -2692,62 +2754,67 @@ SacRadiobuttonsCommon.propDecorators = {
  * Basis Komponente für SacRadiobutton.
  */
 class SacRadiobuttonCommon {
+    // #endregion Properties
+    // #region Constructors
     /**
      * Konstruktor
      * @param SacRadioButtons
+     * @param formlayout SacFormLayoutCommon to define scoped layout settings
+     * @param injector Injector for injecting services
      */
-    constructor(sacRadioButtons) {
+    constructor(sacRadioButtons, formlayout, injector) {
         this.sacRadioButtons = sacRadioButtons;
+        this.injector = injector;
+        // #region Properties
         /**
-         * ControlHeight enum for use in HTML markup
+         * Boolean Property zum Ausblenden des Controls; default Wert - false
          */
-        this.ControlHeight = ControlHeight;
+        this._hidden = false;
         /**
-         * Output Event
+         * Form layout instance if exists
          */
-        this.onselectitem = new EventEmitter();
+        this.formlayout = null;
         /**
-         * Boolean Property zum Ausblenden des Controls; default Wert - false
+         * public public public public public public public public public public public public public ControlHeight enum for use in HTML markup
          */
-        this._hidden = false;
+        this.ControlHeight = ControlHeight;
         /**
          * Unique Index für RadioButton
          */
         this._index = null;
+        /**
+         * Text to support the user during input.
+         */
+        this.helptext = '';
+        /**
+         * Output Event
+         */
+        this.onselectitem = new EventEmitter();
+        this.formlayout = formlayout;
+        this.configurationService = injector.get(SACCONFIGURATION_SERVICE, new SacDefaultConfigurationService());
+        this.iconService = injector.get(SACICON_SERVICE, new SacDefaultIconService());
         // Registration des Controls in SacRadioButtons Container
         this.sacRadioButtons.RegisterRadioButton(this);
     }
+    // #endregion Constructors
+    // #region Public Getters And Setters
     /**
-     * Methode ergibt Boolean, ob Control disabled ist
+     * Get Icon for Helptext Tooltip
      */
-    get isDisabled() {
-        return this.disabled || this.sacRadioButtons.disabled;
+    get HelptextTooltipIcon() {
+        return this.iconService.GenericHelptextIcon;
     }
     /**
-     * Setter für hidden Property
+     * define the control height from parent control
      */
-    set hidden(v) {
-        if (v === null || v === undefined || typeof v === 'boolean') {
-            this._hidden = v;
-        }
-        else {
-            this._hidden = v === 'true';
-        }
-        // Model Reset falls RadioButton selektiert war
-        if (this._hidden && this.checked) {
-            this.sacRadioButtons.SelectItem(null);
-        }
-    }
-    get hidden() {
-        return this._hidden;
+    get componentHeight() {
+        return this.sacRadioButtons.componentHeight;
     }
     /**
      * Getter für Unique Index
      */
     get getIndex() {
-        if (this._index === null &&
-            this.sacRadioButtons !== null &&
-            this.sacRadioButtons !== undefined) {
+        if (this._index === null && this.sacRadioButtons !== null && this.sacRadioButtons !== undefined) {
             this._index = this.sacRadioButtons.GetRadionButtonIndex();
         }
         return this._index;
@@ -2758,22 +2825,32 @@ class SacRadiobuttonCommon {
     get getName() {
         return this.sacRadioButtons.name;
     }
+    get hidden() {
+        return this._hidden;
+    }
     /**
-     * define the control height from parent control
+     * Setter für hidden Property
      */
-    get componentHeight() {
-        return this.sacRadioButtons.componentHeight;
+    set hidden(v) {
+        if (v === null || v === undefined || typeof v === 'boolean') {
+            this._hidden = v;
+        }
+        else {
+            this._hidden = v === 'true';
+        }
+        // Model Reset falls RadioButton selektiert war
+        if (this._hidden && this.checked) {
+            this.sacRadioButtons.SelectItem(null);
+        }
     }
-    //#endregion
-    //#region Control Events
     /**
-     * Event wenn die Komponente zerstört wird
+     * Methode ergibt Boolean, ob Control disabled ist
      */
-    ngOnDestroy() {
-        // De-Registration des Controls in SacRadioButtons Container
-        this.sacRadioButtons.UnregisterRadioButton(this);
+    get isDisabled() {
+        return this.disabled || this.sacRadioButtons.disabled;
     }
-    //#endregion
+    // #endregion Public Getters And Setters
+    // #region Public Methods
     /**
      * Event bei Änderungen
      */
@@ -2783,29 +2860,58 @@ class SacRadiobuttonCommon {
             this.onselectitem.emit();
         }
     }
+    /**
+     * Event wenn die Komponente zerstört wird
+     */
+    ngOnDestroy() {
+        // De-Registration des Controls in SacRadioButtons Container
+        this.sacRadioButtons.UnregisterRadioButton(this);
+    }
+    ngOnInit() {
+        // set method to display helptext
+        this.setHelpTextMode();
+    }
+    // #endregion Public Methods
+    // #region Private Methods
+    /**
+     * Set mode for helptext. Can be tooltip or text
+     */
+    setHelpTextMode() {
+        var _a;
+        if (!this.helptextmode) {
+            if ((_a = this.formlayout) === null || _a === void 0 ? void 0 : _a.helptextmode) {
+                this.helptextmode = this.formlayout.helptextmode;
+            }
+            else {
+                this.helptextmode = this.configurationService.HelptextMode;
+            }
+        }
+    }
 }
 SacRadiobuttonCommon.decorators = [
     { type: Directive }
 ];
 SacRadiobuttonCommon.ctorParameters = () => [
-    { type: SacRadiobuttonsCommon }
+    { type: SacRadiobuttonsCommon },
+    { type: SacFormLayoutCommon, decorators: [{ type: Host }] },
+    { type: Injector }
 ];
 SacRadiobuttonCommon.propDecorators = {
-    value: [{ type: Input }],
-    label: [{ type: Input }],
     checked: [{ type: Input }],
     disabled: [{ type: Input }],
+    helptext: [{ type: Input }],
+    helptextmode: [{ type: Input }],
+    label: [{ type: Input }],
+    labeltemplate: [{ type: Input }],
     onselectitem: [{ type: Output }],
-    hidden: [{ type: Input }],
-    labeltemplate: [{ type: Input }]
+    value: [{ type: Input }],
+    hidden: [{ type: Input }]
 };
 
 /**
  * Base Komponente für Dialog
  */
 class SacDialogCommon {
-    // #endregion
-    // #region Constructor
     /**
      * Konstruktor
      * Inject des Formulars
@@ -2822,11 +2928,6 @@ class SacDialogCommon {
          * Die akzeptabel keywordssind: 'small', 'large', 'extralarge', 'medium', ''.
          */
         this._size = '';
-        // #region Properties
-        /**
-         * Input Property. Erhält den Title des Dialog. Default Value: 'Dialog'.
-         */
-        this.title = 'Dialog';
         /**
          * Das input property akzeptiert boolen Wert. Definiert ob das Dialog darf durch ESC geschlossen werden. Default ist true.
          */
@@ -2835,26 +2936,22 @@ class SacDialogCommon {
          * Das input property akzeptiert boolen Wert. Definiert ob das Dialog darf durch click außerhalb des Dialog-Fenster geschlossen werden. Default ist true.
          */
         this.backdrop = true;
-        /**
-         * Input Property. Erhält den Namen des Dialog - benutzt für das ID. Default Value: ''
-         */
-        this.name = '';
         /**
          * Steuert ob im Header des Dialogs ein Button angezeigt wird.
          */
         this.closebutton = true;
         /**
-         * Input Property. Erhält die Breite des Dialog
+         * Output Emitter. Wird aufgerufen, wenn das Wert des _show property geändert ist - damait das Dialog geöfnet/geschlossen wird.
          */
-        this.width = null;
+        this.isvisibleChange = new EventEmitter();
         /**
-         * Definiert eine feste Höhe beim Dialog.
+         * Input Property. Erhält den Namen des Dialog - benutzt für das ID. Default Value: ''
          */
-        this.height = null;
+        this.name = '';
         /**
-         * Output Emitter. Wird aufgerufen, wenn das Wert des _show property geändert ist - damait das Dialog geöfnet/geschlossen wird.
+         * Input Property. Erhält den Title des Dialog. Default Value: 'Dialog'.
          */
-        this.isvisibleChange = new EventEmitter();
+        this.title = 'Dialog';
     }
     /**
      * Implementation als Setter, da mit ngIf das Element bei Unsichtbarkeit UNDEFINED ist.
@@ -2863,14 +2960,10 @@ class SacDialogCommon {
         this.dialogElement = content;
     }
     /**
-     * Das Input akzeptiert sowohl default size-css-Klassen als auch custom Klassen.
-     * case insensitive.
-     * Die akzeptabel default-size-Klassen sind: 'small', 'large', 'extralarge', 'medium', ''.
-     * Wenn size ist NICHT gesetzt (oder 'medium' oder ''), default ist in medium size: max-width 500px.
+     * Getter. Ergibt das boolen Wert des _show property
      */
-    set size(v) {
-        v = v.toLowerCase();
-        this._size = v;
+    get isvisible() {
+        return this._show;
     }
     /**
      * Setter. Erhält das boolen Wert des _show property
@@ -2891,77 +2984,40 @@ class SacDialogCommon {
         this._show = v;
     }
     /**
-     * Getter. Ergibt das boolen Wert des _show property
+     * Das Input akzeptiert sowohl default size-css-Klassen als auch custom Klassen.
+     * case insensitive.
+     * Die akzeptabel default-size-Klassen sind: 'small', 'large', 'extralarge', 'medium', ''.
+     * Wenn size ist NICHT gesetzt (oder 'medium' oder ''), default ist in medium size: max-width 500px.
      */
-    get isvisible() {
-        return this._show;
+    set size(v) {
+        this._size = v;
     }
     /**
-     * Die Funktion prüft ob es ein default css classe für Size des Dialog durch den size Input gesetzt wurde.
+     * Getter for ChangeDetector.
      */
-    issetdefaultsize() {
-        let result = false;
-        switch (this._size) {
-            case 'small':
-                result = true;
-                break;
-            case 'medium':
-                result = true;
-                break;
-            case 'large':
-                result = true;
-                break;
-            case 'extralarge':
-                result = true;
-                break;
-            case '':
-                result = true;
-                break;
-        }
-        return result;
+    get ChangeDetector() {
+        return this.cdRef;
     }
-    // #endregion
     /**
-     * Methode wenn Componente entfernt wird
+     * Die Methode setz den Wert des _show property auf false
      */
-    ngOnDestroy() {
+    hide() {
         if (this.hasSetBodyTag && document.body.classList.contains('modal-open')) {
             document.body.classList.remove('modal-open');
             this.hasSetBodyTag = false;
         }
-    }
-    // #region Methods
-    /**
-     * Die Methode setz den Wert des _show property auf true
-     */
-    show() {
-        this._show = true;
-        if (!this.hasSetBodyTag &&
-            !document.body.classList.contains('modal-open')) {
-            document.body.classList.add('modal-open');
-            this.hasSetBodyTag = true;
-        }
+        this._show = false;
         this.isvisibleChange.emit(this._show);
     }
     /**
-     * Die Methode setz den Wert des _show property auf false
+     * Methode wenn Componente entfernt wird
      */
-    hide() {
+    ngOnDestroy() {
         if (this.hasSetBodyTag && document.body.classList.contains('modal-open')) {
             document.body.classList.remove('modal-open');
             this.hasSetBodyTag = false;
         }
-        this._show = false;
-        this.isvisibleChange.emit(this._show);
-    }
-    /**
-     * Getter for ChangeDetector.
-     */
-    get ChangeDetector() {
-        return this.cdRef;
     }
-    // #endregion
-    // #region Host Actions
     /**
      * Allow Close by Click outside Dialog
      */
@@ -2983,6 +3039,18 @@ class SacDialogCommon {
             this.hide();
         }
     }
+    /**
+     * Die Methode setz den Wert des _show property auf true
+     */
+    show() {
+        this._show = true;
+        if (!this.hasSetBodyTag &&
+            !document.body.classList.contains('modal-open')) {
+            document.body.classList.add('modal-open');
+            this.hasSetBodyTag = true;
+        }
+        this.isvisibleChange.emit(this._show);
+    }
 }
 SacDialogCommon.decorators = [
     { type: Directive }
@@ -2991,17 +3059,15 @@ SacDialogCommon.ctorParameters = () => [
     { type: ChangeDetectorRef }
 ];
 SacDialogCommon.propDecorators = {
-    dialogElementSetter: [{ type: ViewChild, args: ['dialog', { static: false },] }],
-    title: [{ type: Input }],
     allowesc: [{ type: Input }],
     backdrop: [{ type: Input }],
-    name: [{ type: Input }],
     closebutton: [{ type: Input }],
-    width: [{ type: Input }],
-    height: [{ type: Input }],
-    size: [{ type: Input }],
     isvisibleChange: [{ type: Output }],
+    name: [{ type: Input }],
+    title: [{ type: Input }],
+    dialogElementSetter: [{ type: ViewChild, args: ['dialog', { static: false },] }],
     isvisible: [{ type: Input }],
+    size: [{ type: Input }],
     onClick: [{ type: HostListener, args: ['click', ['$event'],] }],
     onKeydownHandler: [{ type: HostListener, args: ['document:keydown', ['$event'],] }]
 };
@@ -3191,13 +3257,28 @@ SacBaseSelectControl.propDecorators = {
     groupitems: [{ type: Input }]
 };
 
-// #region Classes
+/**
+ * Function um ein Key Value Pair für das Dropdown zu erzeugen
+ * @param id ID
+ * @param value Wert der an das Element gebunden werden soll
+ */
+function _buildValueString(id, value) {
+    // Wenn ID null ist Object zurückgeben
+    if (id == null) {
+        return `${value}`;
+    }
+    // Mapping Objekt zu String
+    if (value && typeof value === 'object') {
+        value = 'Object';
+    }
+    // String als ID
+    return `${id}: ${value}`.slice(0, 50);
+}
+
 /**
  * Base Dropdown Komponente
  */
 class SacDropdownCommon extends SacBaseSelectControl {
-    // #endregion Properties
-    // #region Constructors
     /**
      * Constructor
      * @param formlayout SacFormLayoutCommon to define scoped layout settings
@@ -3209,11 +3290,18 @@ class SacDropdownCommon extends SacBaseSelectControl {
         super(formlayout, injector);
         this.renderer = renderer;
         this.elementRef = elementRef;
-        // #region Properties
         /**
          * compareWith-Funktion
          */
         this._compareWith = Object.is;
+        /**
+         * Counter vom OptionID; default Wert = 0
+         */
+        this._optionIdCounter = 0;
+        /**
+         * OptionMap
+         */
+        this._optionMap = new Map();
         /**
          * Label Text für Empty Item
          */
@@ -3230,17 +3318,7 @@ class SacDropdownCommon extends SacBaseSelectControl {
          * Resource Key für Validation Message Required in Validation Summary
          */
         this.validationmessagesummaryrequired = this.validationKeyService.ValidationErrorSummaryRequired;
-        /**
-         * Counter vom OptionID; default Wert = 0
-         */
-        this._optionIdCounter = 0;
-        /**
-         * OptionMap
-         */
-        this._optionMap = new Map();
     }
-    // #endregion Constructors
-    // #region Public Getters And Setters
     /**
      * compareWith-Funktion
      */
@@ -3250,8 +3328,6 @@ class SacDropdownCommon extends SacBaseSelectControl {
         }
         this._compareWith = fn;
     }
-    // #endregion Public Getters And Setters
-    // #region Public Methods
     /**
      * Registriert das OptionID-Counter als String
      */
@@ -3286,6 +3362,12 @@ class SacDropdownCommon extends SacBaseSelectControl {
         if (this.isrequired) {
             error = Validation.required(this.validationmessagerequired, this.validationmessagesummaryrequired)(c);
         }
+        if (error) {
+            return error;
+        }
+        if (this.isrequired && this.emptyvalue !== null) {
+            error = Validation.notequals(this.emptyvalue, this.validationmessagerequired, this.validationmessagesummaryrequired)(c);
+        }
         return error;
     }
     /**
@@ -3296,8 +3378,6 @@ 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
@@ -3360,13 +3440,12 @@ SacDropdownCommon.propDecorators = {
     validationmessagerequired: [{ type: Input }],
     validationmessagesummaryrequired: [{ type: Input }],
     comparewith: [{ type: Input }]
-};
+};
+
 /**
  * SacDropdownOption-Klasse
  */
 class SacDropdownOptionCommon {
-    // #endregion Properties
-    // #region Constructors
     /**
      * Konstruktor
      * @param _element Referenz auf HTML Element
@@ -3377,7 +3456,6 @@ class SacDropdownOptionCommon {
         this._element = _element;
         this._renderer = _renderer;
         this._dropdown = _dropdown;
-        // #region Properties
         /**
          * ID-String
          */
@@ -3386,8 +3464,6 @@ class SacDropdownOptionCommon {
             this.id = this._dropdown.registerOption();
         }
     }
-    // #endregion Constructors
-    // #region Public Getters And Setters
     /**
      * Option ngValue
      */
@@ -3406,8 +3482,6 @@ 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
@@ -3435,27 +3509,7 @@ SacDropdownOptionCommon.ctorParameters = () => [
 SacDropdownOptionCommon.propDecorators = {
     ngValue: [{ type: Input }],
     value: [{ type: Input }]
-};
-// #endregion Classes
-// #region Functions
-/**
- * Function um ein Key Value Pair für das Dropdown zu erzeugen
- * @param id ID
- * @param value Wert der an das Element gebunden werden soll
- */
-function _buildValueString(id, value) {
-    // Wenn ID null ist Object zurückgeben
-    if (id == null) {
-        return `${value}`;
-    }
-    // Mapping Objekt zu String
-    if (value && typeof value === 'object') {
-        value = 'Object';
-    }
-    // String als ID
-    return `${id}: ${value}`.slice(0, 50);
-}
-// #endregion Functions
+};
 
 // tsco:ignore
 // #endregion Interfaces
@@ -5272,70 +5326,486 @@ SacPagingCommon.propDecorators = {
 };
 
 /**
- * Moment
- */
-const moment$2 = moment_;
-/**
- * Base Klasse für Date/Time Controls
+ * Enum für Tooltip Positionen
  */
-class SacBaseDateTimeControl extends SacBaseModelControl {
-    // #endregion Properties
-    // #region Constructors
-    /**
-     * Constructor
-     * @param formlayout SacFormLayoutCommon to define scoped layout settings
-     * @param injector Injector for injecting services
-     * @param elementRef reference to html element
-     */
-    constructor(formlayout, injector, elementRef) {
-        super(formlayout, injector);
-        this.elementRef = elementRef;
-        // #region Properties
-        /**
-         * das property enthielt das Value als string. Default ist ''
-         */
-        this._valueAsString = '';
-        /**
-         * Definiert das Control als Required
-         */
-        this.isrequired = false;
-        /**
-         * TextBox Placeholder
-         */
-        this.placeholder = null;
-        /**
-         * Resource Key für Validation Message DateTimeFormat bei Control
-         */
-        this.validationmessagedatetimeformat = this.validationKeyService.ValidationErrorDatetimeFormat;
-        /**
-         * Resource Key für Validation Message DateTimeFormat in Validation Summary
-         */
-        this.validationmessagedatetimeformatsummary = this.validationKeyService.ValidationErrorSummaryDatetimeFormat;
-        /**
-         * 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.validationmessagerequiredsummary = this.validationKeyService.ValidationErrorSummaryRequired;
+var TooltipPosition;
+(function (TooltipPosition) {
+    TooltipPosition[TooltipPosition["none"] = 0] = "none";
+    // tslint:disable-next-line:no-bitwise
+    TooltipPosition[TooltipPosition["top"] = 1] = "top";
+    // tslint:disable-next-line:no-bitwise
+    TooltipPosition[TooltipPosition["right"] = 2] = "right";
+    // tslint:disable-next-line:no-bitwise
+    TooltipPosition[TooltipPosition["bottom"] = 4] = "bottom";
+    // tslint:disable-next-line:no-bitwise
+    TooltipPosition[TooltipPosition["left"] = 8] = "left";
+    // tslint:disable-next-line:no-bitwise
+    TooltipPosition[TooltipPosition["topend"] = 16] = "topend";
+    // tslint:disable-next-line:no-bitwise
+    TooltipPosition[TooltipPosition["bottomend"] = 32] = "bottomend";
+})(TooltipPosition || (TooltipPosition = {}));
+
+class PopUpHelper {
+    // #region Public Methods
+    getContainerHeight(referenceContainer, referenceIsContainer) {
+        if (referenceContainer) {
+            return referenceIsContainer
+                ? referenceContainer.nativeElement.firstElementChild.clientHeight
+                : referenceContainer.nativeElement.offsetHeight;
+        }
+        else {
+            return 0;
+        }
     }
-    // #endregion Constructors
-    // #region Public Getters And Setters
-    /**
-     * Das Input bekommt das value von typ string
-     */
-    set valuestring(v) {
-        this._valueAsString = v;
-        let date = moment$2(v, [this.GetDateTimeFormatString()], true);
-        date = this.ModifyParsedDateTimeValue(date).utc();
-        if (date.isValid()) {
-            this.value = date.toDate();
+    getContainerWidth(referenceContainer, referenceIsContainer) {
+        if (referenceContainer) {
+            return referenceIsContainer
+                ? referenceContainer.nativeElement.firstElementChild.clientWidth
+                : referenceContainer.nativeElement.offsetWidth;
         }
         else {
-            this.value = null;
+            return 0;
         }
     }
+    /**
+     * Get Position who the popup would be positioned
+     *
+     * @param referenceContainer Element Reference to HTML Element which is the reference to positioning the popup
+     * @param popupcontentcontainer Element Reference to container of popup
+     * @param popupOffset Offset for popup positioning
+     * @param allowedPositions Allowed Positions for the popup
+     * @returns Returns the position where the popup should be displayed
+     */
+    getDisplayPosition(referenceContainer, popupcontentcontainer, arrowWidth, arrowHeight, allowedPositions, referenceIsContainer) {
+        const validPositions = this.validatePositions(referenceContainer, popupcontentcontainer, arrowWidth, arrowHeight, referenceIsContainer);
+        // tslint:disable-next-line:no-bitwise
+        if (this.hasPosition(allowedPositions, TooltipPosition.right) && validPositions & TooltipPosition.right) {
+            return TooltipPosition.right;
+        }
+        // tslint:disable-next-line:no-bitwise
+        if (this.hasPosition(allowedPositions, TooltipPosition.top) && validPositions & TooltipPosition.top) {
+            return TooltipPosition.top;
+        }
+        // tslint:disable-next-line:no-bitwise
+        if (this.hasPosition(allowedPositions, TooltipPosition.left) && validPositions & TooltipPosition.left) {
+            return TooltipPosition.left;
+        }
+        // tslint:disable-next-line:no-bitwise
+        if (this.hasPosition(allowedPositions, TooltipPosition.bottom) && validPositions & TooltipPosition.bottom) {
+            return TooltipPosition.bottom;
+        }
+        if (this.hasPosition(allowedPositions, TooltipPosition.topend) && validPositions & TooltipPosition.topend) {
+            return TooltipPosition.topend;
+        }
+        if (this.hasPosition(allowedPositions, TooltipPosition.bottomend) &&
+            validPositions & TooltipPosition.bottomend) {
+            return TooltipPosition.bottomend;
+        }
+        // Get Auto Position or Default
+        if (this.isAutoPosition(allowedPositions)) {
+            // tslint:disable-next-line:no-bitwise
+            if (validPositions & TooltipPosition.right) {
+                return TooltipPosition.right;
+            }
+            // tslint:disable-next-line:no-bitwise
+            if (validPositions & TooltipPosition.top) {
+                return TooltipPosition.top;
+            }
+            // tslint:disable-next-line:no-bitwise
+            if (validPositions & TooltipPosition.left) {
+                return TooltipPosition.left;
+            }
+            // tslint:disable-next-line:no-bitwise
+            if (validPositions & TooltipPosition.bottom) {
+                return TooltipPosition.bottom;
+            }
+            return TooltipPosition.right;
+        }
+        else {
+            return this.getPosition(allowedPositions);
+        }
+    }
+    /**
+     * Calculates the height of the popup
+     *
+     * @param container Element Reference to container of popup
+     */
+    getPopupHeight(container) {
+        var _a;
+        if (container) {
+            return (_a = container.nativeElement.firstElementChild.clientHeight) !== null && _a !== void 0 ? _a : 0;
+        }
+        else {
+            return 0;
+        }
+    }
+    /**
+     * Calculates the width of the popup
+     *
+     * @param container Element Reference to container of popup
+     */
+    getPopupWidth(container) {
+        if (container) {
+            return container.nativeElement.firstElementChild.clientWidth;
+        }
+        else {
+            return 0;
+        }
+    }
+    /**
+     * Returns the defined position for the tooltip
+     *
+     * @param allowedPositions Allowed positions defined in markup for popup
+     */
+    getPosition(allowedPositions) {
+        if (this.hasPosition(allowedPositions, TooltipPosition.left)) {
+            return TooltipPosition.left;
+        }
+        if (this.hasPosition(allowedPositions, TooltipPosition.top)) {
+            return TooltipPosition.top;
+        }
+        if (this.hasPosition(allowedPositions, TooltipPosition.right)) {
+            return TooltipPosition.right;
+        }
+        if (this.hasPosition(allowedPositions, TooltipPosition.bottom)) {
+            return TooltipPosition.bottom;
+        }
+        if (this.hasPosition(allowedPositions, TooltipPosition.topend)) {
+            return TooltipPosition.topend;
+        }
+        if (this.hasPosition(allowedPositions, TooltipPosition.bottomend)) {
+            return TooltipPosition.bottomend;
+        }
+        // Default Position if empty
+        return TooltipPosition.right;
+    }
+    /**
+     * Calculates the position of the tooltip from links
+     *
+     * @param controlReference Element Reference to angular component
+     * @param popupContainer Element Reference to container of popup
+     * @param referenceContainer Element Reference to HTML Element which is the reference to positioning the popup
+     * @param popupOffset Offset for popup positioning
+     * @param requestedPosition Requested Position by Control
+     */
+    getPositionLeft(referenceContainer, popupContainer, controlReference, arrowWidth, arrowHeight, requestedPosition, referenceIsContainer) {
+        if (referenceContainer !== null && referenceContainer !== undefined) {
+            const item = referenceContainer.nativeElement;
+            if (item.children.length >= 1) {
+                const childItem = referenceIsContainer ? item.firstElementChild : item;
+                const contentPosition = childItem.getBoundingClientRect();
+                switch (this.getDisplayPosition(referenceContainer, popupContainer, arrowWidth, arrowHeight, requestedPosition, referenceIsContainer)) {
+                    case TooltipPosition.top:
+                    case TooltipPosition.bottom:
+                        return (contentPosition.left + contentPosition.width / 2 - this.getPopupWidth(popupContainer) / 2);
+                    case TooltipPosition.topend:
+                    case TooltipPosition.bottomend:
+                        return contentPosition.left + contentPosition.width - this.getPopupWidth(popupContainer);
+                    case TooltipPosition.right:
+                        return contentPosition.left + contentPosition.width + arrowWidth / 2;
+                    case TooltipPosition.left:
+                        return contentPosition.left - this.getPopupWidth(popupContainer) + (arrowWidth / 2) * -1;
+                }
+                return referenceContainer.nativeElement.offsetTop;
+            }
+            else {
+                return referenceContainer.nativeElement.offsetTop;
+            }
+        }
+        else {
+            return controlReference.nativeElement.offsetLeft;
+        }
+    }
+    /**
+     * Calculates the position of the tooltip from the top
+     *
+     * @param controlReference Element Reference to angular component
+     * @param popupContainer Element Reference to container of popup
+     * @param referenceContainer Element Reference to HTML Element which is the reference to positioning the popup
+     * @param popupOffset Offset for popup positioning
+     * @param requestedPosition Requested Position by Control
+     */
+    getPositionTop(referenceContainer, popupContainer, controlReference, arrowWidth, arrowHeight, requestedPosition, referenceIsContainer) {
+        if (referenceContainer !== null && referenceContainer !== undefined) {
+            const item = referenceContainer.nativeElement;
+            if (item.children.length >= 1) {
+                const childItem = referenceIsContainer ? item.firstElementChild : item;
+                const contentPosition = childItem.getBoundingClientRect();
+                // Get Position with Scroll (Scrollbars inside page should be substracted)
+                const contentPositionTop = childItem.offsetTop +
+                    this.getOffsetTopParent(childItem.offsetParent) +
+                    this.getScrollTopParent(childItem.parentElement);
+                switch (this.getDisplayPosition(referenceContainer, popupContainer, arrowWidth, arrowHeight, requestedPosition, referenceIsContainer)) {
+                    case TooltipPosition.top:
+                    case TooltipPosition.topend:
+                        return contentPositionTop - this.getPopupHeight(popupContainer) + (arrowHeight / 2) * -1;
+                    case TooltipPosition.right:
+                    case TooltipPosition.left:
+                        return (contentPositionTop + contentPosition.height / 2 - this.getPopupHeight(popupContainer) / 2);
+                    case TooltipPosition.bottom:
+                    case TooltipPosition.bottomend:
+                        return contentPositionTop + contentPosition.height + arrowHeight / 2;
+                }
+                return (childItem.clientTop +
+                    childItem.offsetTop -
+                    (this.getPopupHeight(popupContainer) / 2 - childItem.offsetHeight / 2));
+            }
+            else {
+                return referenceContainer.nativeElement.offsetTop;
+            }
+        }
+        else {
+            return controlReference.nativeElement.offsetTop;
+        }
+    }
+    /**
+     * Returns whether the position has been configured
+     *
+     * @param allowedPositions Positions that allowed by control
+     * @param requestedPosition Position to be checked
+     */
+    hasPosition(allowedPositions, requestedPosition) {
+        const positions = allowedPositions.split('|');
+        if (requestedPosition === TooltipPosition.right && positions.indexOf('right') >= 0) {
+            return true;
+        }
+        if (requestedPosition === TooltipPosition.top && positions.indexOf('top') >= 0) {
+            return true;
+        }
+        if (requestedPosition === TooltipPosition.left && positions.indexOf('left') >= 0) {
+            return true;
+        }
+        if (requestedPosition === TooltipPosition.bottom && positions.indexOf('bottom') >= 0) {
+            return true;
+        }
+        if (requestedPosition === TooltipPosition.topend && positions.indexOf('topend') >= 0) {
+            return true;
+        }
+        if (requestedPosition === TooltipPosition.bottomend && positions.indexOf('bottomend') >= 0) {
+            return true;
+        }
+        return false;
+    }
+    /**
+     * Defines whether AutoPosition is active
+     * @param positionProperty List of allowed positions
+     */
+    isAutoPosition(positionProperty) {
+        const positions = positionProperty.split('|');
+        return positions.indexOf('auto') >= 0;
+    }
+    /**
+     * Checks whether the position is valid or whether the tooltip on the position has space
+     */
+    validatePositions(referenceContainer, popupcontentcontainer, arrowWidth, arrowHeight, referenceIsContainer) {
+        // Check if Container is false
+        if (popupcontentcontainer === undefined) {
+            return TooltipPosition.right;
+        }
+        let allowedPositions = TooltipPosition.none;
+        const basePosition = referenceIsContainer
+            ? referenceContainer.nativeElement.firstElementChild.getBoundingClientRect()
+            : referenceContainer.nativeElement.getBoundingClientRect();
+        const tooltipRect = popupcontentcontainer.nativeElement.firstElementChild.getBoundingClientRect();
+        const leftPosOk = basePosition.left - tooltipRect.width + arrowWidth * -1 > 0;
+        const rightPosOk = basePosition.right + tooltipRect.width + arrowWidth < window.innerWidth;
+        const topPosOk = basePosition.top - tooltipRect.height + arrowHeight > 0;
+        const bottomPosOk = basePosition.bottom + tooltipRect.height + arrowHeight < window.innerHeight;
+        const leftHalfPosOk = basePosition.left - tooltipRect.width / 2 > 0;
+        const rightHalfPosOk = basePosition.right + tooltipRect.width / 2 < window.innerWidth;
+        const topHalfPosOk = basePosition.top - tooltipRect.height / 2 > 0;
+        const bottomHalfPosOk = basePosition.bottom + tooltipRect.height / 2 < window.innerHeight;
+        if (leftPosOk && topPosOk) {
+            // tslint:disable-next-line:no-bitwise
+            allowedPositions = allowedPositions | TooltipPosition.topend;
+        }
+        if (leftPosOk && bottomPosOk) {
+            // tslint:disable-next-line:no-bitwise
+            allowedPositions = allowedPositions | TooltipPosition.bottomend;
+        }
+        if (leftPosOk && topHalfPosOk && bottomHalfPosOk) {
+            // tslint:disable-next-line:no-bitwise
+            allowedPositions = allowedPositions | TooltipPosition.left;
+        }
+        if (rightPosOk && topHalfPosOk && bottomHalfPosOk) {
+            // tslint:disable-next-line:no-bitwise
+            allowedPositions = allowedPositions | TooltipPosition.right;
+        }
+        if (topPosOk && leftHalfPosOk && rightHalfPosOk) {
+            // tslint:disable-next-line:no-bitwise
+            allowedPositions = allowedPositions | TooltipPosition.top;
+        }
+        if (bottomPosOk && leftHalfPosOk && rightHalfPosOk) {
+            // tslint:disable-next-line:no-bitwise
+            allowedPositions = allowedPositions | TooltipPosition.bottom;
+        }
+        return allowedPositions;
+    }
+    // #endregion Public Methods
+    // #region Private Methods
+    /**
+     * Calculates the top of the page inside all elements
+     * @param element HTML Element
+     * @returns summarized top value for absolute position
+     */
+    getOffsetTopParent(element) {
+        if (element === null) {
+            return 0;
+        }
+        if (!element.offsetParent) {
+            return element.offsetTop;
+        }
+        const parentValue = this.getOffsetTopParent(element.offsetParent);
+        let offset = element.offsetTop;
+        return parentValue + offset;
+    }
+    /**
+     * Caclulate Scrollbars inside tree
+     * @param element HTML Element
+     * @param [isFixed=false] Invert Scroll Position value when style is fixed to preserve negative values
+     * @returns Scroll top value of element with all childs
+     */
+    getScrollTopParent(element, isFixed = false) {
+        if (element === null) {
+            return 0;
+        }
+        // Body Scroll should not be calculated
+        if (!element.parentElement) {
+            return isFixed ? element.scrollTop : 0;
+        }
+        let isCurrentFixed = false;
+        if (window.getComputedStyle(element).getPropertyValue('position') === 'fixed') {
+            isCurrentFixed = true;
+        }
+        const parentValue = this.getScrollTopParent(element.parentElement, isFixed || isCurrentFixed);
+        if (isFixed) {
+            return parentValue + element.scrollTop;
+        }
+        else {
+            return parentValue + element.scrollTop * -1;
+        }
+    }
+}
+
+/**
+ * Base Klasse für Date/Time Controls
+ */
+class SacBaseDateTimeControl extends SacBaseModelControl {
+    // #endregion Properties
+    // #region Constructors
+    /**
+     * Constructor
+     * @param formlayout SacFormLayoutCommon to define scoped layout settings
+     * @param injector Injector for injecting services
+     * @param elementRef reference to html element
+     */
+    constructor(formlayout, injector, elementRef, cdRef) {
+        super(formlayout, injector);
+        this.elementRef = elementRef;
+        this.cdRef = cdRef;
+        // #region Properties
+        /**
+         * Helper class to display tooltip on correct position
+         */
+        this.popupHelper = new PopUpHelper();
+        /**
+         * das property enthielt das Value als string. Default ist ''
+         */
+        this._valueAsString = '';
+        /**
+         * Property for enum in Angular HTML template
+         */
+        this.TooltipPosition = TooltipPosition;
+        /**
+         * Definiert ob der Date Selector angezeigt wird
+         */
+        this._showselector = false;
+        /**
+         * Definiert das Control als Required
+         */
+        this.isrequired = false;
+        /**
+         * Moment JS Instance
+         */
+        this.moment = moment_;
+        /**
+         * Arrow Item of Picker Element. Required to set the position of arrow correctly
+         */
+        this.pickerPosition = TooltipPosition;
+        /**
+         * TextBox Placeholder
+         */
+        this.placeholder = null;
+        /**
+         * Position of the picker arrow at the left
+         */
+        this.posArrowLeft = null;
+        /**
+         * Position of the picker arrow at the top
+         */
+        this.posArrowTop = null;
+        /**
+         * Position of the picker at the left
+         */
+        this.posPopupLeft = 0;
+        /**
+         * Position of the picker at the top
+         */
+        this.posPopupTop = 0;
+        /**
+         * Position of the datetime picker. Values: left|top|right|bottom|auto
+         *
+         * Value 'auto' can be combined with another value.
+         */
+        this.position = 'bottomend|topend';
+        /**
+         * Resource Key für Validation Message DateTimeFormat bei Control
+         */
+        this.validationmessagedatetimeformat = this.validationKeyService.ValidationErrorDatetimeFormat;
+        /**
+         * Resource Key für Validation Message DateTimeFormat in Validation Summary
+         */
+        this.validationmessagedatetimeformatsummary = this.validationKeyService.ValidationErrorSummaryDatetimeFormat;
+        /**
+         * 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.validationmessagerequiredsummary = this.validationKeyService.ValidationErrorSummaryRequired;
+        // #endregion Protected Methods
+        // #region Private Methods
+        /**
+         * method if content has changed and proportions need to be reset in the UI.
+         */
+        this.onContentChange = () => {
+            // Do nothing if is not visible
+            if (!this._showselector) {
+                return;
+            }
+            setTimeout(() => {
+                this.getPositionLeft();
+                this.getPositionTop();
+            });
+        };
+    }
+    // #endregion Constructors
+    // #region Public Getters And Setters
+    /**
+     * Setter for the name of the container for the tooltip. Is required as the tooltip can be hidden via ngIf.
+     */
+    set picker(picker) {
+        if (picker !== undefined) {
+            document.body.appendChild(picker.nativeElement);
+        }
+        this.pickercontainer = picker;
+        this.onContentChange();
+        this.cdRef.detectChanges();
+    }
+    get tooltop() {
+        return this.pickercontainer;
+    }
     /**
      * getter für valuestring
      */
@@ -5344,12 +5814,30 @@ class SacBaseDateTimeControl extends SacBaseModelControl {
             return this._valueAsString;
         }
         else {
-            const date = moment$2.utc(this.value);
+            const date = this.moment.utc(this.value);
             return date.local().format(this.GetDateTimeFormatString());
         }
     }
-    // #endregion Public Getters And Setters
-    // #region Public Methods
+    /**
+     * Das Input bekommt das value von typ string
+     */
+    set valuestring(v) {
+        this._valueAsString = v;
+        let date = this.moment(v, [this.GetDateTimeFormatString()], true);
+        date = this.ModifyParsedDateTimeValue(date).utc();
+        if (date.isValid()) {
+            this.value = date.toDate();
+        }
+        else {
+            this.value = null;
+        }
+    }
+    /**
+     * Returns the position of the tooltip
+     */
+    GetPickerPosition() {
+        return this.popupHelper.getDisplayPosition(this.pickerbutton, this.pickercontainer, this.getArrowWidth(), this.getArrowHeight(), this.position, false);
+    }
     /**
      * JSON Date String in ein UTC DateTime Object konvertieren, welches vom Control verwendete werden kann
      */
@@ -5361,14 +5849,37 @@ class SacBaseDateTimeControl extends SacBaseModelControl {
         const hours = date.getUTCHours();
         const minutes = date.getUTCMinutes();
         const seconds = date.getUTCSeconds();
-        return moment$2(Date.UTC(year, month, day, hours, minutes, seconds));
+        return this.moment(Date.UTC(year, month, day, hours, minutes, seconds));
+    }
+    /**
+     * Calculates the height of the tooltip
+     */
+    getPickerHeight() {
+        return this.popupHelper.getPopupHeight(this.pickercontainer);
+    }
+    /**
+     * Calculates the width of the picker
+     */
+    getPickerWidth() {
+        return this.popupHelper.getPopupWidth(this.pickercontainer);
+    }
+    ngDoCheck() {
+        // this.onContentChange();
+    }
+    ngOnDestroy() {
+        // Unregister Event Listener
+        window.removeEventListener('scroll', this.onContentChange, true);
+        window.removeEventListener('resize', this.onContentChange, true);
     }
     /**
      * Init Event
      */
-    ngAfterViewInit() {
-        super.ngAfterViewInit();
-        this.SetDateTimeFormat();
+    ngOnInit() {
+        super.ngOnInit();
+        this.setDateTimeFormat();
+        // Register Event Listener
+        window.addEventListener('scroll', this.onContentChange, true);
+        window.addEventListener('resize', this.onContentChange, true);
     }
     /**
      * setzt das value von typ string zu property valuestring
@@ -5402,13 +5913,59 @@ class SacBaseDateTimeControl extends SacBaseModelControl {
         }
         super.writeValue(this._value);
     }
-    // #endregion Public Abstract Methods
-    // #region Private Methods
-    SetDateTimeFormat() {
+    // #endregion Public Methods
+    // #region Protected Methods
+    getArrowHeight() {
+        return this.pickerarrow ? this.pickerarrow.nativeElement.offsetHeight : 0;
+    }
+    getArrowWidth() {
+        return this.pickerarrow ? this.pickerarrow.nativeElement.offsetWidth : 0;
+    }
+    /**
+     * Calculates the position of the tooltip from links
+     */
+    getPositionLeft() {
+        const value = this.popupHelper.getPositionLeft(this.pickerbutton, this.pickercontainer, this.elementRef, this.getArrowWidth(), this.getArrowHeight(), this.position, false);
+        this.posPopupLeft = value;
+        switch (this.GetPickerPosition()) {
+            case TooltipPosition.top:
+            case TooltipPosition.bottom:
+                this.posArrowLeft = this.getPickerWidth() / 2 - -this.getArrowWidth();
+                break;
+            case TooltipPosition.topend:
+            case TooltipPosition.bottomend:
+                this.posArrowLeft =
+                    this.getPickerWidth() -
+                        this.getArrowWidth() / 2 -
+                        this.popupHelper.getContainerWidth(this.pickerbutton, false) / 2;
+                break;
+            default:
+                this.posArrowLeft = null;
+                break;
+        }
+        return value;
+    }
+    /**
+     * Calculates the position of the tooltip from the top
+     */
+    getPositionTop() {
+        const value = this.popupHelper.getPositionTop(this.pickerbutton, this.pickercontainer, this.elementRef, this.getArrowWidth(), this.getArrowHeight(), this.position, false);
+        this.posPopupTop = value;
+        switch (this.GetPickerPosition()) {
+            case TooltipPosition.left:
+            case TooltipPosition.right:
+                this.posArrowTop = this.getPickerHeight() / 2 - 6.5;
+                break;
+            default:
+                this.posArrowTop = null;
+                break;
+        }
+        return value;
+    }
+    setDateTimeFormat() {
         // HACK: Add addition property to FormControl. Can be fixed if solution for ticket: https://github.com/angular/angular/issues/19686
         if (this.ngControl) {
-            this.ngControl.datetimeformatstring =
-                this.GetDateTimeFormatString();
+            this.ngControl.datetimeformatstring = this.GetDateTimeFormatString();
         }
     }
 }
@@ -5418,22 +5975,23 @@ SacBaseDateTimeControl.decorators = [
 SacBaseDateTimeControl.ctorParameters = () => [
     { type: SacFormLayoutCommon },
     { type: Injector },
-    { type: ElementRef }
+    { type: ElementRef },
+    { type: ChangeDetectorRef }
 ];
 SacBaseDateTimeControl.propDecorators = {
     isrequired: [{ type: Input }],
+    pickerarrow: [{ type: ViewChild, args: ['pickerarrow', { static: false },] }],
+    pickerbutton: [{ type: ViewChild, args: ['pickerbutton', { static: true },] }],
     placeholder: [{ type: Input }],
+    position: [{ type: Input }],
     validationmessagedatetimeformat: [{ type: Input }],
     validationmessagedatetimeformatsummary: [{ type: Input }],
     validationmessagerequired: [{ type: Input }],
     validationmessagerequiredsummary: [{ type: Input }],
+    picker: [{ type: ViewChild, args: ['picker', { static: false },] }],
     valuestring: [{ type: Input }]
 };
 
-/**
- * Moment
- */
-const moment$3 = moment_;
 /**
  * Komponente für SacDateCommon. Extends SacBaseDateTimeControl
  */
@@ -5445,9 +6003,10 @@ class SacDateCommon extends SacBaseDateTimeControl {
      * @param formlayout SacFormLayoutCommon to define scoped layout settings
      * @param injector Injector for injecting services
      * @param elementRef reference to html element
+     * @param cdRef  Change Dectection Servie
      */
-    constructor(formlayout, injector, elementRef) {
-        super(formlayout, injector, elementRef);
+    constructor(formlayout, injector, elementRef, cdRef) {
+        super(formlayout, injector, elementRef, cdRef);
         this.elementRef = elementRef;
         // #region Properties
         /**
@@ -5483,6 +6042,18 @@ class SacDateCommon extends SacBaseDateTimeControl {
             lazy: false,
             overwrite: true,
         };
+        /**
+         * Min Date
+         */
+        this._maxdate = null;
+        /**
+         * Min Date
+         */
+        this._mindate = null;
+        /**
+         * Moment JS module instance
+         */
+        this.moment = moment_;
         /**
          * Resource Key für Validation Message MaxDate bei Control
          */
@@ -5499,26 +6070,20 @@ class SacDateCommon extends SacBaseDateTimeControl {
          * Resource Key für Validation Message MinDate in Validation Summary
          */
         this.validationmessagesummarymindate = this.validationKeyService.ValidationErrorSummaryMinDate;
-        /**
-         * Min Date
-         */
-        this._maxdate = null;
-        /**
-         * Min Date
-         */
-        this._mindate = null;
-        /**
-         * Definiert ob der Date Selector angezeigt wird
-         */
-        this._showselector = false;
     }
     // #endregion Constructors
     // #region Public Getters And Setters
+    /**
+     * icon for date selector button
+     */
+    get IconSelector() {
+        return this.iconService.DateComponentSelectorIcon;
+    }
     /**
      * Min Date
      */
     set maxdate(v) {
-        const date = moment$3(v, [this.DATEFORMAT], true);
+        const date = this.moment(v, [this.DATEFORMAT], true);
         if (date.isValid()) {
             this._maxdate = super.getDate(date).toDate();
         }
@@ -5530,7 +6095,7 @@ class SacDateCommon extends SacBaseDateTimeControl {
      * Min Date
      */
     set mindate(v) {
-        const date = moment$3(v, [this.DATEFORMAT], true);
+        const date = this.moment(v, [this.DATEFORMAT], true);
         if (date.isValid()) {
             this._mindate = super.getDate(date).toDate();
         }
@@ -5538,23 +6103,8 @@ class SacDateCommon extends SacBaseDateTimeControl {
             this._mindate = null;
         }
     }
-    /**
-     * icon for date selector button
-     */
-    get IconSelector() {
-        return this.iconService.DateComponentSelectorIcon;
-    }
     // #endregion Public Getters And Setters
     // #region Public Methods
-    /**
-     * HostListener
-     */
-    onClick(targetElement) {
-        const clickedInside = this.elementRef.nativeElement.contains(targetElement);
-        if (!clickedInside) {
-            this._showselector = false;
-        }
-    }
     /**
      * Methode ergibt Datum-Format vom String
      */
@@ -5575,10 +6125,23 @@ class SacDateCommon extends SacBaseDateTimeControl {
             this.setValueString('');
         }
         else {
-            this.value = moment$3(v.date).utc().toDate();
+            this.value = this.moment(v.date).utc().toDate();
         }
         this._showselector = false;
     }
+    /**
+     * HostListener
+     */
+    onClick(targetElement) {
+        if (!this.pickercontainer) {
+            return;
+        }
+        const clickedInsideContainer = this.pickercontainer.nativeElement.contains(targetElement);
+        const clickedInsideReference = this.pickerbutton.nativeElement.contains(targetElement);
+        if (!clickedInsideContainer && !clickedInsideReference) {
+            this._showselector = false;
+        }
+    }
     /**
      * Zeigt Date Selector an
      */
@@ -5623,7 +6186,8 @@ SacDateCommon.decorators = [
 SacDateCommon.ctorParameters = () => [
     { type: SacFormLayoutCommon },
     { type: Injector },
-    { type: ElementRef }
+    { type: ElementRef },
+    { type: ChangeDetectorRef }
 ];
 SacDateCommon.propDecorators = {
     validationmessagemaxdate: [{ type: Input }],
@@ -5751,11 +6315,11 @@ class SacDateSelectorCommon {
             this._initialValue = null;
         }
         else {
-            this._initialValue = moment$4(v);
+            this._initialValue = moment$2(v);
         }
         this._selectedValue = null;
         if (this._initialValue === null) {
-            this.initCalendar(moment$4());
+            this.initCalendar(moment$2());
         }
         else {
             this.initCalendar(this._initialValue);
@@ -5889,7 +6453,7 @@ class SacDateSelectorCommon {
                 .forEach((itm) => (itm.isselected = false)));
             v.isnew = true;
             v.isselected = true;
-            const dateValue = moment$4(v.date);
+            const dateValue = moment$2(v.date);
             // Übernehmen der Zeit aus dem bestehenden Wert
             if (this._selectedValue === null) {
                 if (this._initialValue !== null) {
@@ -5944,7 +6508,7 @@ class SacDateSelectorCommon {
      * Auswahl auf aktuelle Zeit stellen
      */
     setToday() {
-        this._selectedValue = moment$4();
+        this._selectedValue = moment$2();
         /**
          * Sekunden un Milisekunden Clean
          */
@@ -5980,20 +6544,20 @@ class SacDateSelectorCommon {
      * Initial Datum
      */
     initDates() {
-        const currentMonth = moment$4(new Date(this.year, this.month, 1));
-        const lastMonth = moment$4(new Date(this.year, this.month, 1));
+        const currentMonth = moment$2(new Date(this.year, this.month, 1));
+        const lastMonth = moment$2(new Date(this.year, this.month, 1));
         lastMonth.add({ months: -1 });
-        const nextMonths = moment$4(new Date(this.year, this.month, 1));
+        const nextMonths = moment$2(new Date(this.year, this.month, 1));
         nextMonths.add({ months: 1 });
         const weekdayBegin = currentMonth.weekday();
-        const weekdayEnd = moment$4(new Date(currentMonth.year(), currentMonth.month(), currentMonth.daysInMonth())).weekday();
+        const weekdayEnd = moment$2(new Date(currentMonth.year(), currentMonth.month(), currentMonth.daysInMonth())).weekday();
         // Clear Array
         const daysInCalendar = [];
         this.dates = [];
         if (weekdayBegin !== this.beginOfCalendar) {
             const lastMonthDay = lastMonth.daysInMonth();
             const lastMonthDate = new Date(lastMonth.year(), lastMonth.month(), lastMonthDay);
-            const lastMonthWeekday = moment$4(lastMonthDate).weekday();
+            const lastMonthWeekday = moment$2(lastMonthDate).weekday();
             let daysInLastMonth = 7 - ((7 + this.beginOfCalendar - lastMonthWeekday) % 7);
             if (daysInLastMonth === 7) {
                 daysInLastMonth = 0;
@@ -6006,9 +6570,9 @@ class SacDateSelectorCommon {
         for (let dayinmonth = 1; dayinmonth <= currentMonth.daysInMonth(); dayinmonth++) {
             let isSelectedDate = false;
             let isNewDate = false;
-            const isCurrentDate = moment$4().month() === this.month &&
-                moment$4().year() === this.year &&
-                moment$4().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 =
@@ -6023,7 +6587,7 @@ class SacDateSelectorCommon {
                         this._selectedValue.year() === this.year &&
                         this._selectedValue.date() === dayinmonth;
             }
-            daysInCalendar.push(new DateSelectorItem(dayinmonth.toString(), moment$4([this.year, this.month, dayinmonth]).toDate(), true, isSelectedDate, isCurrentDate, isNewDate));
+            daysInCalendar.push(new DateSelectorItem(dayinmonth.toString(), moment$2([this.year, this.month, dayinmonth]).toDate(), true, isSelectedDate, isCurrentDate, isNewDate));
         }
         let endOfCalender;
         if (this.beginOfCalendar === 0) {
@@ -6059,7 +6623,7 @@ class SacDateSelectorCommon {
          */
         if (this._selectedValue === null) {
             if (this._initialValue === null) {
-                this._selectedValue = moment$4();
+                this._selectedValue = moment$2();
             }
             else {
                 this._selectedValue = this._initialValue;
@@ -6087,13 +6651,9 @@ SacDateSelectorCommon.propDecorators = {
 /**
  * Moment
  */
-const moment$4 = moment_;
+const moment$2 = moment_;
 // #endregion Variables
 
-/**
- * Moment
- */
-const moment$5 = moment_;
 /**
  * Komponente für SacDateTimeCommon. Extends SacBaseDateTimeControl
  */
@@ -6106,8 +6666,8 @@ class SacDateTimeCommon extends SacBaseDateTimeControl {
      * @param injector Injector for injecting services
      * @param elementRef reference to html element
      */
-    constructor(formlayout, injector, elementRef) {
-        super(formlayout, injector, elementRef);
+    constructor(formlayout, injector, elementRef, cdRef) {
+        super(formlayout, injector, elementRef, cdRef);
         this.elementRef = elementRef;
         // #region Properties
         /**
@@ -6158,6 +6718,18 @@ class SacDateTimeCommon extends SacBaseDateTimeControl {
             lazy: false,
             overwrite: true,
         };
+        /**
+         * Maximaler Wert des Datums
+         */
+        this._maxdate = null;
+        /**
+         * Minimaler Wert des Datums
+         */
+        this._mindate = null;
+        /**
+         * Moment JS module instance
+         */
+        this.moment = moment_;
         /**
          * Resource Key für Validation Message MaxDate bei Control
          */
@@ -6174,26 +6746,20 @@ class SacDateTimeCommon extends SacBaseDateTimeControl {
          * Resource Key für Validation Message MinDate in Validation Summary
          */
         this.validationmessagesummarymindate = this.validationKeyService.ValidationErrorSummaryMinDate;
-        /**
-         * Maximaler Wert des Datums
-         */
-        this._maxdate = null;
-        /**
-         * Minimaler Wert des Datums
-         */
-        this._mindate = null;
-        /**
-         * Definiert ob der Date Selector angezeigt wird
-         */
-        this._showselector = false;
     }
     // #endregion Constructors
     // #region Public Getters And Setters
+    /**
+     * icon for date selector button
+     */
+    get IconSelector() {
+        return this.iconService.DateTimeComponentSelectorIcon;
+    }
     /**
      * Max Date
      */
     set maxdate(v) {
-        const date = moment$5(v, [this.DATEFORMAT], true);
+        const date = this.moment(v, [this.DATEFORMAT], true);
         if (date.isValid()) {
             this._maxdate = super.getDate(date).toDate();
         }
@@ -6205,7 +6771,7 @@ class SacDateTimeCommon extends SacBaseDateTimeControl {
      * Min Date
      */
     set mindate(v) {
-        const date = moment$5(v, [this.DATEFORMAT], true);
+        const date = this.moment(v, [this.DATEFORMAT], true);
         if (date.isValid()) {
             this._mindate = super.getDate(date).toDate();
         }
@@ -6213,23 +6779,8 @@ class SacDateTimeCommon extends SacBaseDateTimeControl {
             this._mindate = null;
         }
     }
-    /**
-     * icon for date selector button
-     */
-    get IconSelector() {
-        return this.iconService.DateTimeComponentSelectorIcon;
-    }
     // #endregion Public Getters And Setters
     // #region Public Methods
-    /**
-     * HostListener
-     */
-    onClick(targetElement) {
-        const clickedInside = this.elementRef.nativeElement.contains(targetElement);
-        if (!clickedInside) {
-            this._showselector = false;
-        }
-    }
     /**
      * Methode ergibt Datum-Format vom String
      */
@@ -6250,10 +6801,23 @@ class SacDateTimeCommon extends SacBaseDateTimeControl {
             this.setValueString('');
         }
         else {
-            this.value = moment$5(v.date).utc().toDate();
+            this.value = this.moment(v.date).utc().toDate();
         }
         this._showselector = false;
     }
+    /**
+     * HostListener
+     */
+    onClick(targetElement) {
+        if (!this.pickercontainer) {
+            return;
+        }
+        const clickedInsideContainer = this.pickercontainer.nativeElement.contains(targetElement);
+        const clickedInsideReference = this.pickerbutton.nativeElement.contains(targetElement);
+        if (!clickedInsideContainer && !clickedInsideReference) {
+            this._showselector = false;
+        }
+    }
     /**
      * DateSelector wird beim Click-Event angezeigt
      */
@@ -6300,7 +6864,8 @@ SacDateTimeCommon.decorators = [
 SacDateTimeCommon.ctorParameters = () => [
     { type: SacFormLayoutCommon },
     { type: Injector },
-    { type: ElementRef }
+    { type: ElementRef },
+    { type: ChangeDetectorRef }
 ];
 SacDateTimeCommon.propDecorators = {
     validationmessagemaxdate: [{ type: Input }],
@@ -6312,10 +6877,6 @@ SacDateTimeCommon.propDecorators = {
     onClick: [{ type: HostListener, args: ['document:click', ['$event.target'],] }]
 };
 
-/**
- * Moment
- */
-const moment$6 = moment_;
 /**
  * Komponente für SacTimeCommon. Extends SacBaseDateTimeControl
  */
@@ -6328,8 +6889,8 @@ class SacTimeCommon extends SacBaseDateTimeControl {
      * @param injector Injector for injecting services
      * @param elementRef reference to html element
      */
-    constructor(formlayout, injector, elementRef) {
-        super(formlayout, injector, elementRef);
+    constructor(formlayout, injector, elementRef, cdRef) {
+        super(formlayout, injector, elementRef, cdRef);
         this.elementRef = elementRef;
         // #region Properties
         /**
@@ -6360,6 +6921,18 @@ class SacTimeCommon extends SacBaseDateTimeControl {
             lazy: false,
             overwrite: true,
         };
+        /**
+         * Max Time
+         */
+        this._maxtime = null;
+        /**
+         * Min Time
+         */
+        this._mintime = null;
+        /**
+         * Moment JS module instance
+         */
+        this.moment = moment_;
         /**
          * Resource Key für Validation Message MinTime bei Control
          */
@@ -6376,26 +6949,20 @@ class SacTimeCommon extends SacBaseDateTimeControl {
          * Resource Key für Validation Message MinTime in Validation Summary
          */
         this.validationmessagesummarymintime = this.validationKeyService.ValidationErrorSummaryMinTime;
-        /**
-         * Max Time
-         */
-        this._maxtime = null;
-        /**
-         * Min Time
-         */
-        this._mintime = null;
-        /**
-         * Definiert ob der Date Selector angezeigt wird
-         */
-        this._showselector = false;
     }
     // #endregion Constructors
     // #region Public Getters And Setters
+    /**
+     * icon for date selector button
+     */
+    get IconSelector() {
+        return this.iconService.TimeComponentSelectorIcon;
+    }
     /**
      * Max Time
      */
     set maxtime(v) {
-        let time = moment$6(v, [this.TIMEFORMAT], true);
+        let time = this.moment(v, [this.TIMEFORMAT], true);
         time = this.ModifyParsedDateTimeValue(time);
         if (time.isValid()) {
             this._maxtime = super.getDate(time).toDate();
@@ -6408,32 +6975,17 @@ class SacTimeCommon extends SacBaseDateTimeControl {
      * Min Time
      */
     set mintime(v) {
-        let time = moment$6(v, [this.TIMEFORMAT], true);
+        let time = this.moment(v, [this.TIMEFORMAT], true);
         time = this.ModifyParsedDateTimeValue(time);
         if (time.isValid()) {
-            this._mintime = super.getDate(time).toDate();
-        }
-        else {
-            this._mintime = null;
-        }
-    }
-    /**
-     * icon for date selector button
-     */
-    get IconSelector() {
-        return this.iconService.TimeComponentSelectorIcon;
-    }
-    // #endregion Public Getters And Setters
-    // #region Public Methods
-    /**
-     * HostListener
-     */
-    onClick(targetElement) {
-        const clickedInside = this.elementRef.nativeElement.contains(targetElement);
-        if (!clickedInside) {
-            this._showselector = false;
+            this._mintime = super.getDate(time).toDate();
+        }
+        else {
+            this._mintime = null;
         }
     }
+    // #endregion Public Getters And Setters
+    // #region Public Methods
     /**
      * Methode ergibt Datum-Format vom String
      */
@@ -6449,6 +7001,19 @@ class SacTimeCommon extends SacBaseDateTimeControl {
         v.year(1900);
         return v;
     }
+    /**
+     * HostListener
+     */
+    onClick(targetElement) {
+        if (!this.pickercontainer) {
+            return;
+        }
+        const clickedInsideContainer = this.pickercontainer.nativeElement.contains(targetElement);
+        const clickedInsideReference = this.pickerbutton.nativeElement.contains(targetElement);
+        if (!clickedInsideContainer && !clickedInsideReference) {
+            this._showselector = false;
+        }
+    }
     /**
      * Zeigt Date Selector an
      */
@@ -6470,7 +7035,7 @@ class SacTimeCommon extends SacBaseDateTimeControl {
             this.setValueString('');
         }
         else {
-            this.value = moment$6(v.date).utc().toDate();
+            this.value = this.moment(v.date).utc().toDate();
         }
         this._showselector = false;
     }
@@ -6505,7 +7070,8 @@ SacTimeCommon.decorators = [
 SacTimeCommon.ctorParameters = () => [
     { type: SacFormLayoutCommon },
     { type: Injector },
-    { type: ElementRef }
+    { type: ElementRef },
+    { type: ChangeDetectorRef }
 ];
 SacTimeCommon.propDecorators = {
     validationmessagemaxtime: [{ type: Input }],
@@ -6528,6 +7094,14 @@ class SacStaticFormContainerCommon extends SacBaseModelControl {
          * Definiert den Container als Required Form Item
          */
         this._isrequired = false;
+        /**
+         * Error message to be displayed
+         */
+        this.errormessage = '';
+        /**
+         * Activates the error message on the container control
+         */
+        this.isinvalid = false;
         // #endregion Public Methods
     }
     // #endregion Properties
@@ -6535,14 +7109,14 @@ class SacStaticFormContainerCommon extends SacBaseModelControl {
     /**
      * Definiert den Container als Required Form Item
      */
-    set isrequired(v) {
-        this._isrequired = convertToBoolean(v);
+    get isrequired() {
+        return this._isrequired;
     }
     /**
      * Definiert den Container als Required Form Item
      */
-    get isrequired() {
-        return this._isrequired;
+    set isrequired(v) {
+        this._isrequired = convertToBoolean(v);
     }
     // #endregion Public Getters And Setters
     // #region Public Methods
@@ -6562,6 +7136,8 @@ SacStaticFormContainerCommon.decorators = [
     { type: Directive }
 ];
 SacStaticFormContainerCommon.propDecorators = {
+    errormessage: [{ type: Input }],
+    isinvalid: [{ type: Input }],
     isrequired: [{ type: Input }]
 };
 
@@ -7398,22 +7974,6 @@ SacTreeViewChildCommon.decorators = [
     { type: Directive }
 ];
 
-/**
- * Enum für Tooltip Positionen
- */
-var TooltipPosition;
-(function (TooltipPosition) {
-    TooltipPosition[TooltipPosition["none"] = 0] = "none";
-    // tslint:disable-next-line:no-bitwise
-    TooltipPosition[TooltipPosition["top"] = 1] = "top";
-    // tslint:disable-next-line:no-bitwise
-    TooltipPosition[TooltipPosition["right"] = 2] = "right";
-    // tslint:disable-next-line:no-bitwise
-    TooltipPosition[TooltipPosition["bottom"] = 4] = "bottom";
-    // tslint:disable-next-line:no-bitwise
-    TooltipPosition[TooltipPosition["left"] = 8] = "left";
-})(TooltipPosition || (TooltipPosition = {}));
-
 /**
  * Tooltip Component
  *
@@ -7435,29 +7995,15 @@ class SacTooltipCommon {
     constructor(cdRef, ref) {
         this.cdRef = cdRef;
         this.ref = ref;
+        // #region Properties
         /**
-         * Defines whether the tooltip is visible
-         */
-        this._isTooltipVisible = false;
-        /**
-         * method if content has changed and proportions need to be reset in the UI.
+         * Helper class to display tooltip on correct position
          */
-        this.onContentChange = () => {
-            // Do nothing if is not visible
-            if (!this._isTooltipVisible) {
-                return;
-            }
-            setTimeout(() => {
-                this.getLeftPosition();
-                this.getTopPosition();
-            });
-        };
+        this.popupHelper = new PopUpHelper();
         /**
-         * Position of the tooltip. Values: left|top|right|bottom|auto
-         *
-         * Value 'auto' can be combined with another value.
+         * Defines whether the tooltip is visible
          */
-        this.position = 'right|auto';
+        this._isTooltipVisible = false;
         /**
          * Position of the tooltip on the left
          */
@@ -7474,9 +8020,42 @@ class SacTooltipCommon {
          * Position of the tooltip at the top
          */
         this.TopPos = 0;
+        /**
+         * Position of the picker arrow at the left
+         */
+        this.posArrowLeft = null;
+        /**
+         * Position of the picker arrow at the top
+         */
+        this.posArrowTop = null;
+        /**
+         * Position of the tooltip. Values: left|top|right|bottom|auto
+         *
+         * Value 'auto' can be combined with another value.
+         */
+        this.position = 'right|auto';
+        /**
+         * method if content has changed and proportions need to be reset in the UI.
+         */
+        this.onContentChange = () => {
+            // Do nothing if is not visible
+            if (!this._isTooltipVisible) {
+                return;
+            }
+            setTimeout(() => {
+                this.getLeftPosition();
+                this.getTopPosition();
+            });
+        };
     }
     // #endregion Constructors
     // #region Public Getters And Setters
+    /**
+     * Property for inline mode for tooltip. Sets the display mode on the wrapper element to `inline`
+     */
+    get inlinemode() {
+        return this._inlinemode;
+    }
     /**
      * Setter for inline mode for tooltip
      */
@@ -7494,12 +8073,6 @@ class SacTooltipCommon {
         this.onContentChange();
         this.cdRef.detectChanges();
     }
-    /**
-     * Property for inline mode for tooltip. Sets the display mode on the wrapper element to `inline`
-     */
-    get inlinemode() {
-        return this._inlinemode;
-    }
     get tooltop() {
         return this.tooltipcontainer;
     }
@@ -7509,50 +8082,7 @@ class SacTooltipCommon {
      * Returns the position of the tooltip
      */
     GetTooltipPosition() {
-        const validPositions = this.ValidatePositions();
-        // tslint:disable-next-line:no-bitwise
-        if (this.HasPosition(TooltipPosition.right) &&
-            validPositions & TooltipPosition.right) {
-            return TooltipPosition.right;
-        }
-        // tslint:disable-next-line:no-bitwise
-        if (this.HasPosition(TooltipPosition.top) &&
-            validPositions & TooltipPosition.top) {
-            return TooltipPosition.top;
-        }
-        // tslint:disable-next-line:no-bitwise
-        if (this.HasPosition(TooltipPosition.left) &&
-            validPositions & TooltipPosition.left) {
-            return TooltipPosition.left;
-        }
-        // tslint:disable-next-line:no-bitwise
-        if (this.HasPosition(TooltipPosition.bottom) &&
-            validPositions & TooltipPosition.bottom) {
-            return TooltipPosition.bottom;
-        }
-        // Get Auto Position or Default
-        if (this.IsAutoPosition()) {
-            // tslint:disable-next-line:no-bitwise
-            if (validPositions & TooltipPosition.right) {
-                return TooltipPosition.right;
-            }
-            // tslint:disable-next-line:no-bitwise
-            if (validPositions & TooltipPosition.top) {
-                return TooltipPosition.top;
-            }
-            // tslint:disable-next-line:no-bitwise
-            if (validPositions & TooltipPosition.left) {
-                return TooltipPosition.left;
-            }
-            // tslint:disable-next-line:no-bitwise
-            if (validPositions & TooltipPosition.bottom) {
-                return TooltipPosition.bottom;
-            }
-            return TooltipPosition.right;
-        }
-        else {
-            return this.GetPosition();
-        }
+        return this.popupHelper.getDisplayPosition(this.content, this.tooltipcontainer, this.getTooltipOffset(), this.getTooltipOffset(), this.position, true);
     }
     /**
      * Hide tooltip
@@ -7583,24 +8113,13 @@ class SacTooltipCommon {
      * Calculates the height of the tooltip
      */
     getToolTipHeight() {
-        var _a;
-        if (this.tooltipcontainer) {
-            return (_a = this.tooltipcontainer.nativeElement.firstElementChild.clientHeight) !== null && _a !== void 0 ? _a : 0;
-        }
-        else {
-            return 0;
-        }
+        return this.popupHelper.getPopupHeight(this.tooltipcontainer);
     }
     /**
      * Calculates the width of the tooltips
      */
     getToolTipWidth() {
-        if (this.tooltipcontainer) {
-            return this.tooltipcontainer.nativeElement.firstElementChild.clientWidth;
-        }
-        else {
-            return 0;
-        }
+        return this.popupHelper.getPopupWidth(this.tooltipcontainer);
     }
     /**
      * Detect Changes after view checked. Prevent ExpressionChangedAfterItHasBeenCheckedError error
@@ -7645,187 +8164,37 @@ class SacTooltipCommon {
             document.body.appendChild(this.tooltipcontainer.nativeElement);
         }
     }
-    // #endregion Protected Abstract Methods
+    // #endregion Protected Methods
     // #region Private Methods
-    /**
-     * Returns the defined position for the tooltip
-     */
-    GetPosition() {
-        const positions = this.position.split('|');
-        if (this.HasPosition(TooltipPosition.left)) {
-            return TooltipPosition.left;
-        }
-        if (this.HasPosition(TooltipPosition.top)) {
-            return TooltipPosition.top;
-        }
-        if (this.HasPosition(TooltipPosition.right)) {
-            return TooltipPosition.right;
-        }
-        if (this.HasPosition(TooltipPosition.bottom)) {
-            return TooltipPosition.bottom;
-        }
-        // Default Position if empty
-        return TooltipPosition.right;
-    }
-    /**
-     * Returns whether the position has been configured
-     *
-     * @param position Position to be checked
-     */
-    HasPosition(position) {
-        const positions = this.position.split('|');
-        if (position === TooltipPosition.right && positions.indexOf('right') >= 0) {
-            return true;
-        }
-        if (position === TooltipPosition.top && positions.indexOf('top') >= 0) {
-            return true;
-        }
-        if (position === TooltipPosition.left && positions.indexOf('left') >= 0) {
-            return true;
-        }
-        if (position === TooltipPosition.bottom &&
-            positions.indexOf('bottom') >= 0) {
-            return true;
-        }
-        return false;
-    }
-    /**
-     * Defines whether AutoPosition is active
-     */
-    IsAutoPosition() {
-        const positions = this.position.split('|');
-        return positions.indexOf('auto') >= 0;
-    }
-    /**
-     * Checks whether the position is valid or whether the tooltip on the position has space
-     */
-    ValidatePositions() {
-        // Check if Container is false
-        if (this.tooltipcontainer === undefined) {
-            return TooltipPosition.right;
-        }
-        let allowedPositions = TooltipPosition.none;
-        const basePosition = this.content.nativeElement.firstElementChild.getBoundingClientRect();
-        const tooltipRect = this.tooltipcontainer.nativeElement.firstElementChild.getBoundingClientRect();
-        const leftPosOk = basePosition.left - tooltipRect.width + (this.getTooltipOffset() * -1) > 0;
-        const rightPosOk = basePosition.right + tooltipRect.width + this.getTooltipOffset() < window.innerWidth;
-        const topPosOk = basePosition.top - tooltipRect.height > 0;
-        const bottomPosOk = basePosition.bottom + tooltipRect.height < window.innerHeight;
-        const leftHalfPosOk = basePosition.left - tooltipRect.width / 2 > 0;
-        const rightHalfPosOk = basePosition.right + tooltipRect.width / 2 < window.innerWidth;
-        const topHalfPosOk = basePosition.top - tooltipRect.height / 2 > 0;
-        const bottomHalfPosOk = basePosition.bottom + tooltipRect.height / 2 < window.innerHeight;
-        if (leftPosOk && topHalfPosOk && bottomHalfPosOk) {
-            // tslint:disable-next-line:no-bitwise
-            allowedPositions = allowedPositions | TooltipPosition.left;
-        }
-        if (rightPosOk && topHalfPosOk && bottomHalfPosOk) {
-            // tslint:disable-next-line:no-bitwise
-            allowedPositions = allowedPositions | TooltipPosition.right;
-        }
-        if (topPosOk && leftHalfPosOk && rightHalfPosOk) {
-            // tslint:disable-next-line:no-bitwise
-            allowedPositions = allowedPositions | TooltipPosition.top;
-        }
-        if (bottomPosOk && leftHalfPosOk && rightHalfPosOk) {
-            // tslint:disable-next-line:no-bitwise
-            allowedPositions = allowedPositions | TooltipPosition.bottom;
-        }
-        return allowedPositions;
-    }
     /**
      * Calculates the position of the tooltip from links
      */
     getLeftPosition() {
-        if (this.content !== null && this.content !== undefined) {
-            const item = this.content.nativeElement;
-            if (item.children.length >= 1) {
-                const childItem = item.firstElementChild;
-                const contentPosition = childItem.getBoundingClientRect();
-                switch (this.GetTooltipPosition()) {
-                    case TooltipPosition.top:
-                        this.LeftPos = contentPosition.left + contentPosition.width / 2 - this.getToolTipWidth() / 2;
-                        return (contentPosition.left + contentPosition.width / 2 - this.getToolTipWidth() / 2);
-                    case TooltipPosition.right:
-                        this.LeftPos = contentPosition.left + contentPosition.width + this.getTooltipOffset();
-                        return contentPosition.left + contentPosition.width + this.getTooltipOffset();
-                    case TooltipPosition.bottom:
-                        this.LeftPos = contentPosition.left + contentPosition.width / 2 - this.getToolTipWidth() / 2;
-                        return (contentPosition.left + contentPosition.width / 2 - this.getToolTipWidth() / 2);
-                    case TooltipPosition.left:
-                        this.LeftPos = contentPosition.left - this.getToolTipWidth() + (this.getTooltipOffset() * -1);
-                        return contentPosition.left - this.getToolTipWidth() + (this.getTooltipOffset() * -1);
-                }
-                return this.content.nativeElement.offsetTop;
-            }
-            else {
-                return this.content.nativeElement.offsetTop;
-            }
+        const value = this.popupHelper.getPositionLeft(this.content, this.tooltipcontainer, this.ref, this.getTooltipOffset(), this.getTooltipOffset(), this.position, true);
+        this.LeftPos = value;
+        const requiredPosition = this.GetTooltipPosition();
+        if (requiredPosition === TooltipPosition.left || requiredPosition === TooltipPosition.right) {
+            this.posArrowTop = this.getToolTipHeight() / 2 - 6.5;
         }
         else {
-            return this.ref.nativeElement.offsetLeft;
+            this.posArrowTop = null;
         }
+        return value;
     }
     /**
      * Calculates the position of the tooltip from the top
      */
     getTopPosition() {
-        if (this.content !== null && this.content !== undefined) {
-            const item = this.content.nativeElement;
-            if (item.children.length >= 1) {
-                const childItem = item.firstElementChild;
-                const contentPosition = childItem.getBoundingClientRect();
-                // Get Position with Scroll (Scrollbars inside page should be substracted)
-                const contentPositionTop = childItem.offsetTop + this.getOffsetTopParent(childItem.offsetParent) - this.getScrollTopParent(childItem.parentElement);
-                switch (this.GetTooltipPosition()) {
-                    case TooltipPosition.top:
-                        this.TopPos = contentPositionTop - this.getToolTipHeight() + (this.getTooltipOffset() * -1);
-                        return contentPositionTop - this.getToolTipHeight() + (this.getTooltipOffset() * -1);
-                    case TooltipPosition.right:
-                        this.TopPos = contentPositionTop + (contentPosition.height / 2) - (this.getToolTipHeight() / 2);
-                        return contentPositionTop + (contentPosition.height / 2) - (this.getToolTipHeight() / 2);
-                    case TooltipPosition.bottom:
-                        this.TopPos = contentPositionTop + contentPosition.height + this.getTooltipOffset();
-                        return contentPositionTop + contentPosition.height + this.getTooltipOffset();
-                    case TooltipPosition.left:
-                        this.TopPos = contentPositionTop + contentPosition.height / 2 - this.getToolTipHeight() / 2;
-                        return (contentPositionTop + contentPosition.height / 2 - this.getToolTipHeight() / 2);
-                }
-                return (childItem.clientTop + childItem.offsetTop - (this.getToolTipHeight() / 2 - childItem.clientHeight / 2));
-            }
-            else {
-                return this.content.nativeElement.offsetTop;
-            }
+        const value = this.popupHelper.getPositionTop(this.content, this.tooltipcontainer, this.ref, this.getTooltipOffset(), this.getTooltipOffset(), this.position, true);
+        this.TopPos = value;
+        const requiredPosition = this.GetTooltipPosition();
+        if (requiredPosition === TooltipPosition.bottom || requiredPosition === TooltipPosition.top) {
+            this.posArrowLeft = this.getToolTipWidth() / 2 - 6.5;
         }
         else {
-            return this.ref.nativeElement.offsetTop;
-        }
-    }
-    /**
-     * Calculates the top of the page inside all elements
-     * @param element HTML Element
-     * @returns summarized top value for absolute position
-     */
-    getOffsetTopParent(element) {
-        if (!element.offsetParent) {
-            return element.offsetTop;
+            this.posArrowLeft = null;
         }
-        const parentValue = this.getOffsetTopParent(element.offsetParent);
-        let offset = element.offsetTop;
-        return parentValue + offset;
-    }
-    /**
-     * Caclulate Scrollbars inside tree
-     * @param element HTML Element
-     * @returns Scroll top value of element with all childs
-     */
-    getScrollTopParent(element) {
-        // Body Scroll should not be calculated
-        if (!element.parentElement) {
-            return 0;
-        }
-        const parentValue = this.getScrollTopParent(element.parentElement);
-        return parentValue + element.scrollTop;
+        return value;
     }
 }
 SacTooltipCommon.decorators = [
@@ -7836,9 +8205,9 @@ SacTooltipCommon.ctorParameters = () => [
     { type: ElementRef }
 ];
 SacTooltipCommon.propDecorators = {
+    content: [{ type: ViewChild, args: ['container', { static: true },] }],
     position: [{ type: Input }],
     tooltiptext: [{ type: Input }],
-    content: [{ type: ViewChild, args: ['container', { static: true },] }],
     inlinemode: [{ type: Input }],
     tooltip: [{ type: ViewChild, args: ['tooltip', { static: false },] }]
 };