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

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/forms'), require('rxjs'), require('@angular/common/http'), require('moment'), require('imask'), require('ngx-uploadx'), require('@angular/common')) :
-    typeof define === 'function' && define.amd ? define('@simpleangularcontrols/sac-common', ['exports', '@angular/core', '@angular/forms', 'rxjs', '@angular/common/http', 'moment', 'imask', 'ngx-uploadx', '@angular/common'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.simpleangularcontrols = global.simpleangularcontrols || {}, global.simpleangularcontrols['sac-common'] = {}), global.ng.core, global.ng.forms, global.rxjs, global.ng.common.http, global.moment, global.IMask, global.ngxUploadx, global.ng.common));
-}(this, (function (exports, i0, forms, rxjs, i1, moment_, IMask, ngxUploadx, common) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('@angular/forms'), require('@angular/common/http'), require('moment'), require('imask'), require('ngx-uploadx'), require('@angular/common')) :
+    typeof define === 'function' && define.amd ? define('@simpleangularcontrols/sac-common', ['exports', '@angular/core', 'rxjs', '@angular/forms', '@angular/common/http', 'moment', 'imask', 'ngx-uploadx', '@angular/common'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.simpleangularcontrols = global.simpleangularcontrols || {}, global.simpleangularcontrols['sac-common'] = {}), global.ng.core, global.rxjs, global.ng.forms, global.ng.common.http, global.moment, global.IMask, global.ngxUploadx, global.ng.common));
+}(this, (function (exports, i0, rxjs, forms, i1, moment_, IMask, ngxUploadx, common) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -647,7 +647,6 @@
      */
     var SacFormLayoutCommon = /** @class */ (function () {
         function SacFormLayoutCommon() {
-            // #region Properties
             /**
              * Defines the default display for a checkbox. You can choose between a checkbox and a switch. If no style is defined, the global style or the style on the control is used.
              */
@@ -692,11 +691,12 @@
              * 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;
         }
         Object.defineProperty(SacFormLayoutCommon.prototype, "IsInlineErrorEnabled", {
-            // #endregion Properties
-            // #region Public Getters And Setters
             /**
              * Returns whether the inline error messages for the form are active.
              */
@@ -723,7 +723,8 @@
         labelSizeSm: [{ type: i0.Input }],
         labelSizeXl: [{ type: i0.Input }],
         labelSizeXs: [{ type: i0.Input }],
-        labelSizeXxl: [{ type: i0.Input }]
+        labelSizeXxl: [{ type: i0.Input }],
+        splitlabelandhelptext: [{ type: i0.Input }]
     };
 
     /**
@@ -744,7 +745,6 @@
         ControlHeight[ControlHeight["Large"] = 2] = "Large";
     })(exports.ControlHeight || (exports.ControlHeight = {}));
 
-    // #region Classes
     /**
      * abstract class for configuration settings providing in components
      */
@@ -766,7 +766,6 @@
             return _super !== null && _super.apply(this, arguments) || this;
         }
         Object.defineProperty(SacDefaultConfigurationService.prototype, "CheckboxStyle", {
-            // #region Public Getters And Setters
             /**
              * @inheritdoc
              */
@@ -886,14 +885,22 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(SacDefaultConfigurationService.prototype, "SplitLabelAndHelptext", {
+            /**
+             * @inheritdoc
+             */
+            get: function () {
+                return false;
+            },
+            enumerable: false,
+            configurable: true
+        });
         return SacDefaultConfigurationService;
     }(SacAbstractConfigurationService));
     SacDefaultConfigurationService.ɵprov = i0.ɵɵdefineInjectable({ factory: function SacDefaultConfigurationService_Factory() { return new SacDefaultConfigurationService(); }, token: SacDefaultConfigurationService, providedIn: "root" });
     SacDefaultConfigurationService.decorators = [
         { type: i0.Injectable, args: [{ providedIn: 'root' },] }
     ];
-    // #endregion Classes
-    // #region Variables
     /**
      * injection token for component configuration service
      */
@@ -2623,8 +2630,6 @@
      * Abstract Klasse für SacBaseModelControl. Implements ControlValueAccessor, Validator, OnInit
      */
     var SacBaseModelControl = /** @class */ (function () {
-        // #endregion Properties
-        // #region Constructors
         /**
          * Constructor
          * @param formlayout SacFormLayoutCommon to define scoped layout settings
@@ -2632,11 +2637,13 @@
          */
         function SacBaseModelControl(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
@@ -2658,6 +2665,10 @@
              * Form layout instance if exists
              */
             this.formlayout = null;
+            /**
+             * ControlHeight enum for use in HTML markup
+             */
+            this.ControlHeight = exports.ControlHeight;
             /**
              * Defines the standard height of the components
              */
@@ -2710,10 +2721,6 @@
              * Name des Controls
              */
             this.name = createGuid();
-            /**
-             * ControlHeight enum for use in HTML markup
-             */
-            this.ControlHeight = exports.ControlHeight;
             /**
              * Leere Implementation von "propagateChange". Muss gemacht werden, damit kein Fehler entsteht
              */
@@ -2722,92 +2729,56 @@
              * Leere Implementation von "propagateTouch". Muss gemacht werden, damit kein Fehler entsteht
              */
             this.propagateTouch = function () { };
+            /**
+             * 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());
         }
-        Object.defineProperty(SacBaseModelControl.prototype, "inlineerrorenabled", {
-            /**
-             * Show error messages inline
-             */
-            get: function () {
-                return this._inlineerrorenabled;
-            },
-            // #endregion Constructors
-            // #region Public Getters And Setters
-            /**
-             * Aktiviert oder Deaktiviert die Inline Errors für das Control
-             */
-            set: function (value) {
-                if (value === null || value === undefined) {
-                    this._inlineerrorenabled = null;
-                }
-                else {
-                    this._inlineerrorenabled = convertToBoolean(value);
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SacBaseModelControl.prototype, "label", {
+        Object.defineProperty(SacBaseModelControl.prototype, "HelptextTooltipIcon", {
             /**
-             * Definiert den Label Text
+             * Get Icon for Helptext Tooltip
              */
             get: function () {
-                return this._label;
-            },
-            /**
-             * Definiert den Label Text
-             */
-            set: function (v) {
-                this._label = v;
-                this.UpdateLabelToControl();
+                return this.iconService.GenericHelptextIcon;
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(SacBaseModelControl.prototype, "value", {
+        Object.defineProperty(SacBaseModelControl.prototype, "dirty", {
             /**
-             * Get Methode für NgModel Binding in Html Markup
+             * Methode ergibt Boolean Wert für dirty
              */
             get: function () {
-                return this._value;
-            },
-            /**
-             * Set Methode für NgModel Binding in Html Markup
-             * Input wird benötigt, damit der Wert auch über das Markup gesetzt werden kann.
-             */
-            set: function (v) {
-                if (this.disabled) {
-                    return;
+                if (this.ngControl !== null) {
+                    this._dirty = this.ngControl.dirty;
                 }
-                this._value = this.ConvertInputValue(v);
-                this.propagateChange(this._value);
+                return this._dirty;
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(SacBaseModelControl.prototype, "HelptextTooltipIcon", {
+        Object.defineProperty(SacBaseModelControl.prototype, "inlineerrorenabled", {
             /**
-             * Get Icon for Helptext Tooltip
+             * Show error messages inline
              */
             get: function () {
-                return this.iconService.GenericHelptextIcon;
+                return this._inlineerrorenabled;
             },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SacBaseModelControl.prototype, "dirty", {
             /**
-             * Methode ergibt Boolean Wert für dirty
+             * Aktiviert oder Deaktiviert die Inline Errors für das Control
              */
-            get: function () {
-                if (this.ngControl !== null) {
-                    this._dirty = this.ngControl.dirty;
+            set: function (value) {
+                if (value === null || value === undefined) {
+                    this._inlineerrorenabled = null;
+                }
+                else {
+                    this._inlineerrorenabled = convertToBoolean(value);
                 }
-                return this._dirty;
             },
             enumerable: false,
             configurable: true
@@ -2855,6 +2826,23 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(SacBaseModelControl.prototype, "label", {
+            /**
+             * Definiert den Label Text
+             */
+            get: function () {
+                return this._label;
+            },
+            /**
+             * Definiert den Label Text
+             */
+            set: function (v) {
+                this._label = v;
+                this.UpdateLabelToControl();
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(SacBaseModelControl.prototype, "labelSizes", {
             /**
              * returns an object with all label sizes. These values can then be transferred to corresponding CSS classes using a pipe
@@ -2885,8 +2873,27 @@
             enumerable: false,
             configurable: true
         });
-        // #endregion Public Getters And Setters
-        // #region Public Methods
+        Object.defineProperty(SacBaseModelControl.prototype, "value", {
+            /**
+             * Get Methode für NgModel Binding in Html Markup
+             */
+            get: function () {
+                return this._value;
+            },
+            /**
+             * Set Methode für NgModel Binding in Html Markup
+             * Input wird benötigt, damit der Wert auch über das Markup gesetzt werden kann.
+             */
+            set: function (v) {
+                if (this.disabled) {
+                    return;
+                }
+                this._value = this.ConvertInputValue(v);
+                this.propagateChange(this._value);
+            },
+            enumerable: false,
+            configurable: true
+        });
         /**
          * Methode ergibt Error anhand von gegebenen Kriterien
          */
@@ -2949,6 +2956,8 @@
             this.setIsAdaptiveLabel();
             // set method to display helptext
             this.setHelpTextMode();
+            // set SplitMode for Labels
+            this.setLabelSplitMode();
             this.OnClassInit();
         };
         /**
@@ -3002,8 +3011,6 @@
         SacBaseModelControl.prototype.writeValue = function (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
@@ -3030,8 +3037,6 @@
                 this.ngControl.updateValueAndValidity({ onlySelf: true });
             }
         };
-        // #endregion Protected Methods
-        // #region Private Methods
         SacBaseModelControl.prototype.UpdateLabelToControl = function () {
             // HACK: Add addition property to FormControl. Can be fixed if solution for ticket: https://github.com/angular/angular/issues/19686
             if (this.ngControl) {
@@ -3141,6 +3146,18 @@
                 }
             }
         };
+        SacBaseModelControl.prototype.setLabelSplitMode = function () {
+            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;
+                }
+            }
+        };
         return SacBaseModelControl;
     }());
     SacBaseModelControl.decorators = [
@@ -3165,6 +3182,7 @@
         labelSizeXs: [{ type: i0.Input }],
         labelSizeXxl: [{ type: i0.Input }],
         name: [{ type: i0.Input }],
+        splitlabelandhelptext: [{ type: i0.Input }],
         inlineerrorenabled: [{ type: i0.Input }],
         label: [{ type: i0.Input }],
         value: [{ type: i0.Input }]
@@ -3278,6 +3296,19 @@
         };
     }
 
+    function equalsValueValidator(requiredvalue, validationMessage, validationMessageSummary) {
+        return function (control) {
+            if (control.value !== requiredvalue) {
+                var parameters = new Map();
+                parameters.set('EQUALSVALUE', requiredvalue);
+                return CreateValidationError('equals', validationMessage, validationMessageSummary, parameters);
+            }
+            else {
+                return null;
+            }
+        };
+    }
+
     // #region Variables
     /**
      * Moment
@@ -3491,6 +3522,19 @@
         };
     }
 
+    function notEqualsValueValidator(invalidValue, validationMessage, validationMessageSummary) {
+        return function (control) {
+            if (control.value === invalidValue) {
+                var parameters = new Map();
+                parameters.set('EQUALSVALUE', invalidValue);
+                return CreateValidationError('notequals', validationMessage, validationMessageSummary, parameters);
+            }
+            else {
+                return null;
+            }
+        };
+    }
+
     function patternValidator(pattern, validationMessage, validationMessageSummary) {
         return function (control) {
             var validator = forms.Validators.pattern(pattern);
@@ -3516,17 +3560,12 @@
         };
     }
 
-    /**
-     * Moment
-     */
-    var moment$1 = moment___default['default'];
     /**
      * Klasse mit Standard Validatoren
      */
     var Validation = /** @class */ (function () {
         function 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
@@ -3550,6 +3589,18 @@
         Validation.email = function (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
+      
+         */
+        Validation.equals = function (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
@@ -3670,6 +3721,17 @@
         Validation.multilanguageRequiredAny = function (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
+         */
+        Validation.notequals = function (invalidValue, validationMessage, validationMessageSummary) {
+            return notEqualsValueValidator(invalidValue, validationMessage, validationMessageSummary);
+        };
         /**
          * Validierung mit einem RegEx Pattern
          * @param control Control das validiert werden soll.
@@ -3692,7 +3754,11 @@
             return requiredValidator(validationMessage, validationMessageSummary);
         };
         return Validation;
-    }());
+    }());
+    /**
+     * Moment
+     */
+    var moment$1 = moment___default['default'];
 
     /**
      * Basis Komponente für SacRadiobuttonsCommon. Extends SacBaseModelControl
@@ -3810,59 +3876,66 @@
      * Basis Komponente für SacRadiobutton.
      */
     var SacRadiobuttonCommon = /** @class */ (function () {
+        // #endregion Properties
+        // #region Constructors
         /**
          * Konstruktor
          * @param SacRadioButtons
+         * @param formlayout SacFormLayoutCommon to define scoped layout settings
+         * @param injector Injector for injecting services
          */
-        function SacRadiobuttonCommon(sacRadioButtons) {
+        function SacRadiobuttonCommon(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 = exports.ControlHeight;
+            this._hidden = false;
             /**
-             * Output Event
+             * Form layout instance if exists
              */
-            this.onselectitem = new i0.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 = exports.ControlHeight;
             /**
              * Unique Index für RadioButton
              */
             this._index = null;
+            /**
+             * Text to support the user during input.
+             */
+            this.helptext = '';
+            /**
+             * Output Event
+             */
+            this.onselectitem = new i0.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);
         }
-        Object.defineProperty(SacRadiobuttonCommon.prototype, "isDisabled", {
+        Object.defineProperty(SacRadiobuttonCommon.prototype, "HelptextTooltipIcon", {
+            // #endregion Constructors
+            // #region Public Getters And Setters
             /**
-             * Methode ergibt Boolean, ob Control disabled ist
+             * Get Icon for Helptext Tooltip
              */
             get: function () {
-                return this.disabled || this.sacRadioButtons.disabled;
+                return this.iconService.GenericHelptextIcon;
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(SacRadiobuttonCommon.prototype, "hidden", {
-            get: function () {
-                return this._hidden;
-            },
+        Object.defineProperty(SacRadiobuttonCommon.prototype, "componentHeight", {
             /**
-             * Setter für hidden Property
+             * define the control height from parent control
              */
-            set: function (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: function () {
+                return this.sacRadioButtons.componentHeight;
             },
             enumerable: false,
             configurable: true
@@ -3872,9 +3945,7 @@
              * Getter für Unique Index
              */
             get: function () {
-                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;
@@ -3892,18 +3963,49 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(SacRadiobuttonCommon.prototype, "componentHeight", {
-            /**
-             * define the control height from parent control
-             */
+        Object.defineProperty(SacRadiobuttonCommon.prototype, "hidden", {
             get: function () {
-                return this.sacRadioButtons.componentHeight;
+                return this._hidden;
             },
-            enumerable: false,
-            configurable: true
+            /**
+             * Setter für hidden Property
+             */
+            set: function (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);
+                }
+            },
+            enumerable: false,
+            configurable: true
         });
-        //#endregion
-        //#region Control Events
+        Object.defineProperty(SacRadiobuttonCommon.prototype, "isDisabled", {
+            /**
+             * Methode ergibt Boolean, ob Control disabled ist
+             */
+            get: function () {
+                return this.disabled || this.sacRadioButtons.disabled;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        // #endregion Public Getters And Setters
+        // #region Public Methods
+        /**
+         * Event bei Änderungen
+         */
+        SacRadiobuttonCommon.prototype.ChangeEvent = function () {
+            if (!this.disabled) {
+                this.sacRadioButtons.SelectItem(this.value);
+                this.onselectitem.emit();
+            }
+        };
         /**
          * Event wenn die Komponente zerstört wird
          */
@@ -3911,14 +4013,24 @@
             // De-Registration des Controls in SacRadioButtons Container
             this.sacRadioButtons.UnregisterRadioButton(this);
         };
-        //#endregion
+        SacRadiobuttonCommon.prototype.ngOnInit = function () {
+            // set method to display helptext
+            this.setHelpTextMode();
+        };
+        // #endregion Public Methods
+        // #region Private Methods
         /**
-         * Event bei Änderungen
+         * Set mode for helptext. Can be tooltip or text
          */
-        SacRadiobuttonCommon.prototype.ChangeEvent = function () {
-            if (!this.disabled) {
-                this.sacRadioButtons.SelectItem(this.value);
-                this.onselectitem.emit();
+        SacRadiobuttonCommon.prototype.setHelpTextMode = function () {
+            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;
+                }
             }
         };
         return SacRadiobuttonCommon;
@@ -3927,24 +4039,26 @@
         { type: i0.Directive }
     ];
     SacRadiobuttonCommon.ctorParameters = function () { return [
-        { type: SacRadiobuttonsCommon }
+        { type: SacRadiobuttonsCommon },
+        { type: SacFormLayoutCommon, decorators: [{ type: i0.Host }] },
+        { type: i0.Injector }
     ]; };
     SacRadiobuttonCommon.propDecorators = {
-        value: [{ type: i0.Input }],
-        label: [{ type: i0.Input }],
         checked: [{ type: i0.Input }],
         disabled: [{ type: i0.Input }],
+        helptext: [{ type: i0.Input }],
+        helptextmode: [{ type: i0.Input }],
+        label: [{ type: i0.Input }],
+        labeltemplate: [{ type: i0.Input }],
         onselectitem: [{ type: i0.Output }],
-        hidden: [{ type: i0.Input }],
-        labeltemplate: [{ type: i0.Input }]
+        value: [{ type: i0.Input }],
+        hidden: [{ type: i0.Input }]
     };
 
     /**
      * Base Komponente für Dialog
      */
     var SacDialogCommon = /** @class */ (function () {
-        // #endregion
-        // #region Constructor
         /**
          * Konstruktor
          * Inject des Formulars
@@ -3961,11 +4075,6 @@
              * 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.
              */
@@ -3974,26 +4083,22 @@
              * 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 i0.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 i0.EventEmitter();
+            this.title = 'Dialog';
         }
         Object.defineProperty(SacDialogCommon.prototype, "dialogElementSetter", {
             /**
@@ -4005,20 +4110,6 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(SacDialogCommon.prototype, "size", {
-            /**
-             * 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.
-             */
-            set: function (v) {
-                v = v.toLowerCase();
-                this._size = v;
-            },
-            enumerable: false,
-            configurable: true
-        });
         Object.defineProperty(SacDialogCommon.prototype, "isvisible", {
             /**
              * Getter. Ergibt das boolen Wert des _show property
@@ -4047,76 +4138,49 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(SacDialogCommon.prototype, "size", {
+            /**
+             * 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.
+             */
+            set: function (v) {
+                this._size = v;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(SacDialogCommon.prototype, "ChangeDetector", {
+            /**
+             * Getter for ChangeDetector.
+             */
+            get: function () {
+                return this.cdRef;
+            },
+            enumerable: false,
+            configurable: true
+        });
         /**
-         * Die Funktion prüft ob es ein default css classe für Size des Dialog durch den size Input gesetzt wurde.
-         */
-        SacDialogCommon.prototype.issetdefaultsize = function () {
-            var 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;
-        };
-        // #endregion
-        /**
-         * Methode wenn Componente entfernt wird
+         * Die Methode setz den Wert des _show property auf false
          */
-        SacDialogCommon.prototype.ngOnDestroy = function () {
+        SacDialogCommon.prototype.hide = function () {
             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
-         */
-        SacDialogCommon.prototype.show = function () {
-            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
          */
-        SacDialogCommon.prototype.hide = function () {
+        SacDialogCommon.prototype.ngOnDestroy = function () {
             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);
         };
-        Object.defineProperty(SacDialogCommon.prototype, "ChangeDetector", {
-            /**
-             * Getter for ChangeDetector.
-             */
-            get: function () {
-                return this.cdRef;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        // #endregion
-        // #region Host Actions
         /**
          * Allow Close by Click outside Dialog
          */
@@ -4138,6 +4202,18 @@
                 this.hide();
             }
         };
+        /**
+         * Die Methode setz den Wert des _show property auf true
+         */
+        SacDialogCommon.prototype.show = function () {
+            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);
+        };
         return SacDialogCommon;
     }());
     SacDialogCommon.decorators = [
@@ -4147,17 +4223,15 @@
         { type: i0.ChangeDetectorRef }
     ]; };
     SacDialogCommon.propDecorators = {
-        dialogElementSetter: [{ type: i0.ViewChild, args: ['dialog', { static: false },] }],
-        title: [{ type: i0.Input }],
         allowesc: [{ type: i0.Input }],
         backdrop: [{ type: i0.Input }],
-        name: [{ type: i0.Input }],
         closebutton: [{ type: i0.Input }],
-        width: [{ type: i0.Input }],
-        height: [{ type: i0.Input }],
-        size: [{ type: i0.Input }],
         isvisibleChange: [{ type: i0.Output }],
+        name: [{ type: i0.Input }],
+        title: [{ type: i0.Input }],
+        dialogElementSetter: [{ type: i0.ViewChild, args: ['dialog', { static: false },] }],
         isvisible: [{ type: i0.Input }],
+        size: [{ type: i0.Input }],
         onClick: [{ type: i0.HostListener, args: ['click', ['$event'],] }],
         onKeydownHandler: [{ type: i0.HostListener, args: ['document:keydown', ['$event'],] }]
     };
@@ -4385,14 +4459,29 @@
         groupitems: [{ type: i0.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
      */
     var SacDropdownCommon = /** @class */ (function (_super) {
         __extends(SacDropdownCommon, _super);
-        // #endregion Properties
-        // #region Constructors
         /**
          * Constructor
          * @param formlayout SacFormLayoutCommon to define scoped layout settings
@@ -4404,11 +4493,18 @@
             var _this = _super.call(this, formlayout, injector) || this;
             _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
              */
@@ -4425,19 +4521,9 @@
              * 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();
             return _this;
         }
         Object.defineProperty(SacDropdownCommon.prototype, "comparewith", {
-            // #endregion Constructors
-            // #region Public Getters And Setters
             /**
              * compareWith-Funktion
              */
@@ -4450,8 +4536,6 @@
             enumerable: false,
             configurable: true
         });
-        // #endregion Public Getters And Setters
-        // #region Public Methods
         /**
          * Registriert das OptionID-Counter als String
          */
@@ -4486,6 +4570,12 @@
             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;
         };
         /**
@@ -4496,8 +4586,6 @@
             this.setSelectedValue(value);
             _super.prototype.writeValue.call(this, value);
         };
-        // #endregion Public Methods
-        // #region Private Methods
         /**
          * ID extrahieren
          * @param valueString String bei welchem die ID Extrahiert werden soll
@@ -4572,13 +4660,12 @@
         validationmessagerequired: [{ type: i0.Input }],
         validationmessagesummaryrequired: [{ type: i0.Input }],
         comparewith: [{ type: i0.Input }]
-    };
+    };
+
     /**
      * SacDropdownOption-Klasse
      */
     var SacDropdownOptionCommon = /** @class */ (function () {
-        // #endregion Properties
-        // #region Constructors
         /**
          * Konstruktor
          * @param _element Referenz auf HTML Element
@@ -4589,7 +4676,6 @@
             this._element = _element;
             this._renderer = _renderer;
             this._dropdown = _dropdown;
-            // #region Properties
             /**
              * ID-String
              */
@@ -4599,8 +4685,6 @@
             }
         }
         Object.defineProperty(SacDropdownOptionCommon.prototype, "ngValue", {
-            // #endregion Constructors
-            // #region Public Getters And Setters
             /**
              * Option ngValue
              */
@@ -4626,8 +4710,6 @@
             enumerable: false,
             configurable: true
         });
-        // #endregion Public Getters And Setters
-        // #region Public Methods
         /**
          * Den Wert vom Option-Element einstellen
          * @param value Wert
@@ -4656,32 +4738,12 @@
     SacDropdownOptionCommon.propDecorators = {
         ngValue: [{ type: i0.Input }],
         value: [{ type: i0.Input }]
-    };
-    // #endregion Classes
-    // #region Functions
+    };
+
+    // #endregion Interfaces
+    // #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);
-    }
-    // #endregion Functions
-
-    // #endregion Interfaces
-    // #region Classes
-    /**
-     * Basis Komponente für SacListboxOption
+     * Basis Komponente für SacListboxOption
      */
     var SacListboxOptionCommon = /** @class */ (function () {
         // #endregion Properties
@@ -6097,6 +6159,10 @@
             this.grid = grid;
             this.injector = injector;
             this.el = el;
+            /**
+             * Click on Column Element
+             */
+            this.rowclicked = new i0.EventEmitter();
             this.iconService = injector.get(SACICON_SERVICE, new SacDefaultIconService());
         }
         Object.defineProperty(SacGridColumnBaseCommon.prototype, "IconSortDown", {
@@ -6123,6 +6189,12 @@
         });
         // #endregion Public Getters And Setters
         // #region Public Methods
+        /**
+         * Method when Colument element is clicked. Triggers a RowClicked
+         */
+        SacGridColumnBaseCommon.prototype.ColumnClick = function () {
+            this.rowclicked.emit();
+        };
         /**
          * Indicates the direction of sorting. The possible values are `none`,`asc`,`desc`
          */
@@ -6210,7 +6282,8 @@
         sortkey: [{ type: i0.Input }],
         type: [{ type: i0.Input }],
         value: [{ type: i0.Input }],
-        width: [{ type: i0.Input }]
+        width: [{ type: i0.Input }],
+        rowclicked: [{ type: i0.Output }]
     };
 
     /**
@@ -6579,9 +6652,370 @@
     };
 
     /**
-     * Moment
+     * Enum für Tooltip Positionen
      */
-    var moment$2 = moment___default['default'];
+    (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";
+    })(exports.TooltipPosition || (exports.TooltipPosition = {}));
+
+    var PopUpHelper = /** @class */ (function () {
+        function PopUpHelper() {
+        }
+        // #region Public Methods
+        PopUpHelper.prototype.getContainerHeight = function (referenceContainer, referenceIsContainer) {
+            if (referenceContainer) {
+                return referenceIsContainer
+                    ? referenceContainer.nativeElement.firstElementChild.clientHeight
+                    : referenceContainer.nativeElement.offsetHeight;
+            }
+            else {
+                return 0;
+            }
+        };
+        PopUpHelper.prototype.getContainerWidth = function (referenceContainer, referenceIsContainer) {
+            if (referenceContainer) {
+                return referenceIsContainer
+                    ? referenceContainer.nativeElement.firstElementChild.clientWidth
+                    : referenceContainer.nativeElement.offsetWidth;
+            }
+            else {
+                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
+         */
+        PopUpHelper.prototype.getDisplayPosition = function (referenceContainer, popupcontentcontainer, arrowWidth, arrowHeight, allowedPositions, referenceIsContainer) {
+            var validPositions = this.validatePositions(referenceContainer, popupcontentcontainer, arrowWidth, arrowHeight, referenceIsContainer);
+            // tslint:disable-next-line:no-bitwise
+            if (this.hasPosition(allowedPositions, exports.TooltipPosition.right) && validPositions & exports.TooltipPosition.right) {
+                return exports.TooltipPosition.right;
+            }
+            // tslint:disable-next-line:no-bitwise
+            if (this.hasPosition(allowedPositions, exports.TooltipPosition.top) && validPositions & exports.TooltipPosition.top) {
+                return exports.TooltipPosition.top;
+            }
+            // tslint:disable-next-line:no-bitwise
+            if (this.hasPosition(allowedPositions, exports.TooltipPosition.left) && validPositions & exports.TooltipPosition.left) {
+                return exports.TooltipPosition.left;
+            }
+            // tslint:disable-next-line:no-bitwise
+            if (this.hasPosition(allowedPositions, exports.TooltipPosition.bottom) && validPositions & exports.TooltipPosition.bottom) {
+                return exports.TooltipPosition.bottom;
+            }
+            if (this.hasPosition(allowedPositions, exports.TooltipPosition.topend) && validPositions & exports.TooltipPosition.topend) {
+                return exports.TooltipPosition.topend;
+            }
+            if (this.hasPosition(allowedPositions, exports.TooltipPosition.bottomend) &&
+                validPositions & exports.TooltipPosition.bottomend) {
+                return exports.TooltipPosition.bottomend;
+            }
+            // Get Auto Position or Default
+            if (this.isAutoPosition(allowedPositions)) {
+                // tslint:disable-next-line:no-bitwise
+                if (validPositions & exports.TooltipPosition.right) {
+                    return exports.TooltipPosition.right;
+                }
+                // tslint:disable-next-line:no-bitwise
+                if (validPositions & exports.TooltipPosition.top) {
+                    return exports.TooltipPosition.top;
+                }
+                // tslint:disable-next-line:no-bitwise
+                if (validPositions & exports.TooltipPosition.left) {
+                    return exports.TooltipPosition.left;
+                }
+                // tslint:disable-next-line:no-bitwise
+                if (validPositions & exports.TooltipPosition.bottom) {
+                    return exports.TooltipPosition.bottom;
+                }
+                return exports.TooltipPosition.right;
+            }
+            else {
+                return this.getPosition(allowedPositions);
+            }
+        };
+        /**
+         * Calculates the height of the popup
+         *
+         * @param container Element Reference to container of popup
+         */
+        PopUpHelper.prototype.getPopupHeight = function (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
+         */
+        PopUpHelper.prototype.getPopupWidth = function (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
+         */
+        PopUpHelper.prototype.getPosition = function (allowedPositions) {
+            if (this.hasPosition(allowedPositions, exports.TooltipPosition.left)) {
+                return exports.TooltipPosition.left;
+            }
+            if (this.hasPosition(allowedPositions, exports.TooltipPosition.top)) {
+                return exports.TooltipPosition.top;
+            }
+            if (this.hasPosition(allowedPositions, exports.TooltipPosition.right)) {
+                return exports.TooltipPosition.right;
+            }
+            if (this.hasPosition(allowedPositions, exports.TooltipPosition.bottom)) {
+                return exports.TooltipPosition.bottom;
+            }
+            if (this.hasPosition(allowedPositions, exports.TooltipPosition.topend)) {
+                return exports.TooltipPosition.topend;
+            }
+            if (this.hasPosition(allowedPositions, exports.TooltipPosition.bottomend)) {
+                return exports.TooltipPosition.bottomend;
+            }
+            // Default Position if empty
+            return exports.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
+         */
+        PopUpHelper.prototype.getPositionLeft = function (referenceContainer, popupContainer, controlReference, arrowWidth, arrowHeight, requestedPosition, referenceIsContainer) {
+            if (referenceContainer !== null && referenceContainer !== undefined) {
+                var item = referenceContainer.nativeElement;
+                if (item.children.length >= 1) {
+                    var childItem = referenceIsContainer ? item.firstElementChild : item;
+                    var contentPosition = childItem.getBoundingClientRect();
+                    switch (this.getDisplayPosition(referenceContainer, popupContainer, arrowWidth, arrowHeight, requestedPosition, referenceIsContainer)) {
+                        case exports.TooltipPosition.top:
+                        case exports.TooltipPosition.bottom:
+                            return (contentPosition.left + contentPosition.width / 2 - this.getPopupWidth(popupContainer) / 2);
+                        case exports.TooltipPosition.topend:
+                        case exports.TooltipPosition.bottomend:
+                            return contentPosition.left + contentPosition.width - this.getPopupWidth(popupContainer);
+                        case exports.TooltipPosition.right:
+                            return contentPosition.left + contentPosition.width + arrowWidth / 2;
+                        case exports.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
+         */
+        PopUpHelper.prototype.getPositionTop = function (referenceContainer, popupContainer, controlReference, arrowWidth, arrowHeight, requestedPosition, referenceIsContainer) {
+            if (referenceContainer !== null && referenceContainer !== undefined) {
+                var item = referenceContainer.nativeElement;
+                if (item.children.length >= 1) {
+                    var childItem = referenceIsContainer ? item.firstElementChild : item;
+                    var contentPosition = childItem.getBoundingClientRect();
+                    // Get Position with Scroll (Scrollbars inside page should be substracted)
+                    var contentPositionTop = childItem.offsetTop +
+                        this.getOffsetTopParent(childItem.offsetParent) +
+                        this.getScrollTopParent(childItem.parentElement);
+                    switch (this.getDisplayPosition(referenceContainer, popupContainer, arrowWidth, arrowHeight, requestedPosition, referenceIsContainer)) {
+                        case exports.TooltipPosition.top:
+                        case exports.TooltipPosition.topend:
+                            return contentPositionTop - this.getPopupHeight(popupContainer) + (arrowHeight / 2) * -1;
+                        case exports.TooltipPosition.right:
+                        case exports.TooltipPosition.left:
+                            return (contentPositionTop + contentPosition.height / 2 - this.getPopupHeight(popupContainer) / 2);
+                        case exports.TooltipPosition.bottom:
+                        case exports.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
+         */
+        PopUpHelper.prototype.hasPosition = function (allowedPositions, requestedPosition) {
+            var positions = allowedPositions.split('|');
+            if (requestedPosition === exports.TooltipPosition.right && positions.indexOf('right') >= 0) {
+                return true;
+            }
+            if (requestedPosition === exports.TooltipPosition.top && positions.indexOf('top') >= 0) {
+                return true;
+            }
+            if (requestedPosition === exports.TooltipPosition.left && positions.indexOf('left') >= 0) {
+                return true;
+            }
+            if (requestedPosition === exports.TooltipPosition.bottom && positions.indexOf('bottom') >= 0) {
+                return true;
+            }
+            if (requestedPosition === exports.TooltipPosition.topend && positions.indexOf('topend') >= 0) {
+                return true;
+            }
+            if (requestedPosition === exports.TooltipPosition.bottomend && positions.indexOf('bottomend') >= 0) {
+                return true;
+            }
+            return false;
+        };
+        /**
+         * Defines whether AutoPosition is active
+         * @param positionProperty List of allowed positions
+         */
+        PopUpHelper.prototype.isAutoPosition = function (positionProperty) {
+            var positions = positionProperty.split('|');
+            return positions.indexOf('auto') >= 0;
+        };
+        /**
+         * Checks whether the position is valid or whether the tooltip on the position has space
+         */
+        PopUpHelper.prototype.validatePositions = function (referenceContainer, popupcontentcontainer, arrowWidth, arrowHeight, referenceIsContainer) {
+            // Check if Container is false
+            if (popupcontentcontainer === undefined) {
+                return exports.TooltipPosition.right;
+            }
+            var allowedPositions = exports.TooltipPosition.none;
+            var basePosition = referenceIsContainer
+                ? referenceContainer.nativeElement.firstElementChild.getBoundingClientRect()
+                : referenceContainer.nativeElement.getBoundingClientRect();
+            var tooltipRect = popupcontentcontainer.nativeElement.firstElementChild.getBoundingClientRect();
+            var leftPosOk = basePosition.left - tooltipRect.width + arrowWidth * -1 > 0;
+            var rightPosOk = basePosition.right + tooltipRect.width + arrowWidth < window.innerWidth;
+            var topPosOk = basePosition.top - tooltipRect.height + arrowHeight > 0;
+            var bottomPosOk = basePosition.bottom + tooltipRect.height + arrowHeight < window.innerHeight;
+            var leftHalfPosOk = basePosition.left - tooltipRect.width / 2 > 0;
+            var rightHalfPosOk = basePosition.right + tooltipRect.width / 2 < window.innerWidth;
+            var topHalfPosOk = basePosition.top - tooltipRect.height / 2 > 0;
+            var bottomHalfPosOk = basePosition.bottom + tooltipRect.height / 2 < window.innerHeight;
+            if (leftPosOk && topPosOk) {
+                // tslint:disable-next-line:no-bitwise
+                allowedPositions = allowedPositions | exports.TooltipPosition.topend;
+            }
+            if (leftPosOk && bottomPosOk) {
+                // tslint:disable-next-line:no-bitwise
+                allowedPositions = allowedPositions | exports.TooltipPosition.bottomend;
+            }
+            if (leftPosOk && topHalfPosOk && bottomHalfPosOk) {
+                // tslint:disable-next-line:no-bitwise
+                allowedPositions = allowedPositions | exports.TooltipPosition.left;
+            }
+            if (rightPosOk && topHalfPosOk && bottomHalfPosOk) {
+                // tslint:disable-next-line:no-bitwise
+                allowedPositions = allowedPositions | exports.TooltipPosition.right;
+            }
+            if (topPosOk && leftHalfPosOk && rightHalfPosOk) {
+                // tslint:disable-next-line:no-bitwise
+                allowedPositions = allowedPositions | exports.TooltipPosition.top;
+            }
+            if (bottomPosOk && leftHalfPosOk && rightHalfPosOk) {
+                // tslint:disable-next-line:no-bitwise
+                allowedPositions = allowedPositions | exports.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
+         */
+        PopUpHelper.prototype.getOffsetTopParent = function (element) {
+            if (element === null) {
+                return 0;
+            }
+            if (!element.offsetParent) {
+                return element.offsetTop;
+            }
+            var parentValue = this.getOffsetTopParent(element.offsetParent);
+            var 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
+         */
+        PopUpHelper.prototype.getScrollTopParent = function (element, isFixed) {
+            if (isFixed === void 0) { isFixed = false; }
+            if (element === null) {
+                return 0;
+            }
+            // Body Scroll should not be calculated
+            if (!element.parentElement) {
+                return isFixed ? element.scrollTop : 0;
+            }
+            var isCurrentFixed = false;
+            if (window.getComputedStyle(element).getPropertyValue('position') === 'fixed') {
+                isCurrentFixed = true;
+            }
+            var parentValue = this.getScrollTopParent(element.parentElement, isFixed || isCurrentFixed);
+            if (isFixed) {
+                return parentValue + element.scrollTop;
+            }
+            else {
+                return parentValue + element.scrollTop * -1;
+            }
+        };
+        return PopUpHelper;
+    }());
+
     /**
      * Base Klasse für Date/Time Controls
      */
@@ -6595,22 +7029,65 @@
          * @param injector Injector for injecting services
          * @param elementRef reference to html element
          */
-        function SacBaseDateTimeControl(formlayout, injector, elementRef) {
+        function SacBaseDateTimeControl(formlayout, injector, elementRef, cdRef) {
             var _this = _super.call(this, formlayout, injector) || this;
             _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 = '';
+            _this._valueAsString = '';
+            /**
+             * Property for enum in Angular HTML template
+             */
+            _this.TooltipPosition = exports.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___default['default'];
+            /**
+             * Arrow Item of Picker Element. Required to set the position of arrow correctly
+             */
+            _this.pickerPosition = exports.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;
             /**
-             * Definiert das Control als Required
+             * Position of the picker at the top
              */
-            _this.isrequired = false;
+            _this.posPopupTop = 0;
             /**
-             * TextBox Placeholder
+             * Position of the datetime picker. Values: left|top|right|bottom|auto
+             *
+             * Value 'auto' can be combined with another value.
              */
-            _this.placeholder = null;
+            _this.position = 'bottomend|topend';
             /**
              * Resource Key für Validation Message DateTimeFormat bei Control
              */
@@ -6627,8 +7104,47 @@
              * 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 = function () {
+                // Do nothing if is not visible
+                if (!_this._showselector) {
+                    return;
+                }
+                setTimeout(function () {
+                    _this.getPositionLeft();
+                    _this.getPositionTop();
+                });
+            };
             return _this;
         }
+        Object.defineProperty(SacBaseDateTimeControl.prototype, "picker", {
+            // #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: function (picker) {
+                if (picker !== undefined) {
+                    document.body.appendChild(picker.nativeElement);
+                }
+                this.pickercontainer = picker;
+                this.onContentChange();
+                this.cdRef.detectChanges();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(SacBaseDateTimeControl.prototype, "tooltop", {
+            get: function () {
+                return this.pickercontainer;
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(SacBaseDateTimeControl.prototype, "valuestring", {
             /**
              * getter für valuestring
@@ -6638,18 +7154,16 @@
                     return this._valueAsString;
                 }
                 else {
-                    var date = moment$2.utc(this.value);
+                    var date = this.moment.utc(this.value);
                     return date.local().format(this.GetDateTimeFormatString());
                 }
             },
-            // #endregion Constructors
-            // #region Public Getters And Setters
             /**
              * Das Input bekommt das value von typ string
              */
             set: function (v) {
                 this._valueAsString = v;
-                var date = moment$2(v, [this.GetDateTimeFormatString()], true);
+                var date = this.moment(v, [this.GetDateTimeFormatString()], true);
                 date = this.ModifyParsedDateTimeValue(date).utc();
                 if (date.isValid()) {
                     this.value = date.toDate();
@@ -6661,8 +7175,12 @@
             enumerable: false,
             configurable: true
         });
-        // #endregion Public Getters And Setters
-        // #region Public Methods
+        /**
+         * Returns the position of the tooltip
+         */
+        SacBaseDateTimeControl.prototype.GetPickerPosition = function () {
+            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
          */
@@ -6674,14 +7192,37 @@
             var hours = date.getUTCHours();
             var minutes = date.getUTCMinutes();
             var 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
+         */
+        SacBaseDateTimeControl.prototype.getPickerHeight = function () {
+            return this.popupHelper.getPopupHeight(this.pickercontainer);
+        };
+        /**
+         * Calculates the width of the picker
+         */
+        SacBaseDateTimeControl.prototype.getPickerWidth = function () {
+            return this.popupHelper.getPopupWidth(this.pickercontainer);
+        };
+        SacBaseDateTimeControl.prototype.ngDoCheck = function () {
+            // this.onContentChange();
+        };
+        SacBaseDateTimeControl.prototype.ngOnDestroy = function () {
+            // Unregister Event Listener
+            window.removeEventListener('scroll', this.onContentChange, true);
+            window.removeEventListener('resize', this.onContentChange, true);
         };
         /**
          * Init Event
          */
-        SacBaseDateTimeControl.prototype.ngAfterViewInit = function () {
-            _super.prototype.ngAfterViewInit.call(this);
-            this.SetDateTimeFormat();
+        SacBaseDateTimeControl.prototype.ngOnInit = function () {
+            _super.prototype.ngOnInit.call(this);
+            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
@@ -6715,13 +7256,59 @@
             }
             _super.prototype.writeValue.call(this, this._value);
         };
-        // #endregion Public Abstract Methods
-        // #region Private Methods
-        SacBaseDateTimeControl.prototype.SetDateTimeFormat = function () {
+        // #endregion Public Methods
+        // #region Protected Methods
+        SacBaseDateTimeControl.prototype.getArrowHeight = function () {
+            return this.pickerarrow ? this.pickerarrow.nativeElement.offsetHeight : 0;
+        };
+        SacBaseDateTimeControl.prototype.getArrowWidth = function () {
+            return this.pickerarrow ? this.pickerarrow.nativeElement.offsetWidth : 0;
+        };
+        /**
+         * Calculates the position of the tooltip from links
+         */
+        SacBaseDateTimeControl.prototype.getPositionLeft = function () {
+            var value = this.popupHelper.getPositionLeft(this.pickerbutton, this.pickercontainer, this.elementRef, this.getArrowWidth(), this.getArrowHeight(), this.position, false);
+            this.posPopupLeft = value;
+            switch (this.GetPickerPosition()) {
+                case exports.TooltipPosition.top:
+                case exports.TooltipPosition.bottom:
+                    this.posArrowLeft = this.getPickerWidth() / 2 - -this.getArrowWidth();
+                    break;
+                case exports.TooltipPosition.topend:
+                case exports.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
+         */
+        SacBaseDateTimeControl.prototype.getPositionTop = function () {
+            var value = this.popupHelper.getPositionTop(this.pickerbutton, this.pickercontainer, this.elementRef, this.getArrowWidth(), this.getArrowHeight(), this.position, false);
+            this.posPopupTop = value;
+            switch (this.GetPickerPosition()) {
+                case exports.TooltipPosition.left:
+                case exports.TooltipPosition.right:
+                    this.posArrowTop = this.getPickerHeight() / 2 - 6.5;
+                    break;
+                default:
+                    this.posArrowTop = null;
+                    break;
+            }
+            return value;
+        };
+        SacBaseDateTimeControl.prototype.setDateTimeFormat = function () {
             // 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();
             }
         };
         return SacBaseDateTimeControl;
@@ -6732,22 +7319,23 @@
     SacBaseDateTimeControl.ctorParameters = function () { return [
         { type: SacFormLayoutCommon },
         { type: i0.Injector },
-        { type: i0.ElementRef }
+        { type: i0.ElementRef },
+        { type: i0.ChangeDetectorRef }
     ]; };
     SacBaseDateTimeControl.propDecorators = {
         isrequired: [{ type: i0.Input }],
+        pickerarrow: [{ type: i0.ViewChild, args: ['pickerarrow', { static: false },] }],
+        pickerbutton: [{ type: i0.ViewChild, args: ['pickerbutton', { static: true },] }],
         placeholder: [{ type: i0.Input }],
+        position: [{ type: i0.Input }],
         validationmessagedatetimeformat: [{ type: i0.Input }],
         validationmessagedatetimeformatsummary: [{ type: i0.Input }],
         validationmessagerequired: [{ type: i0.Input }],
         validationmessagerequiredsummary: [{ type: i0.Input }],
+        picker: [{ type: i0.ViewChild, args: ['picker', { static: false },] }],
         valuestring: [{ type: i0.Input }]
     };
 
-    /**
-     * Moment
-     */
-    var moment$3 = moment___default['default'];
     /**
      * Komponente für SacDateCommon. Extends SacBaseDateTimeControl
      */
@@ -6760,9 +7348,10 @@
          * @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
          */
-        function SacDateCommon(formlayout, injector, elementRef) {
-            var _this = _super.call(this, formlayout, injector, elementRef) || this;
+        function SacDateCommon(formlayout, injector, elementRef, cdRef) {
+            var _this = _super.call(this, formlayout, injector, elementRef, cdRef) || this;
             _this.elementRef = elementRef;
             // #region Properties
             /**
@@ -6798,6 +7387,18 @@
                 lazy: false,
                 overwrite: true,
             };
+            /**
+             * Min Date
+             */
+            _this._maxdate = null;
+            /**
+             * Min Date
+             */
+            _this._mindate = null;
+            /**
+             * Moment JS module instance
+             */
+            _this.moment = moment___default['default'];
             /**
              * Resource Key für Validation Message MaxDate bei Control
              */
@@ -6814,28 +7415,26 @@
              * 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;
             return _this;
         }
-        Object.defineProperty(SacDateCommon.prototype, "maxdate", {
+        Object.defineProperty(SacDateCommon.prototype, "IconSelector", {
             // #endregion Constructors
             // #region Public Getters And Setters
+            /**
+             * icon for date selector button
+             */
+            get: function () {
+                return this.iconService.DateComponentSelectorIcon;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(SacDateCommon.prototype, "maxdate", {
             /**
              * Min Date
              */
             set: function (v) {
-                var date = moment$3(v, [this.DATEFORMAT], true);
+                var date = this.moment(v, [this.DATEFORMAT], true);
                 if (date.isValid()) {
                     this._maxdate = _super.prototype.getDate.call(this, date).toDate();
                 }
@@ -6851,7 +7450,7 @@
              * Min Date
              */
             set: function (v) {
-                var date = moment$3(v, [this.DATEFORMAT], true);
+                var date = this.moment(v, [this.DATEFORMAT], true);
                 if (date.isValid()) {
                     this._mindate = _super.prototype.getDate.call(this, date).toDate();
                 }
@@ -6862,27 +7461,8 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(SacDateCommon.prototype, "IconSelector", {
-            /**
-             * icon for date selector button
-             */
-            get: function () {
-                return this.iconService.DateComponentSelectorIcon;
-            },
-            enumerable: false,
-            configurable: true
-        });
         // #endregion Public Getters And Setters
         // #region Public Methods
-        /**
-         * HostListener
-         */
-        SacDateCommon.prototype.onClick = function (targetElement) {
-            var clickedInside = this.elementRef.nativeElement.contains(targetElement);
-            if (!clickedInside) {
-                this._showselector = false;
-            }
-        };
         /**
          * Methode ergibt Datum-Format vom String
          */
@@ -6903,10 +7483,23 @@
                 this.setValueString('');
             }
             else {
-                this.value = moment$3(v.date).utc().toDate();
+                this.value = this.moment(v.date).utc().toDate();
             }
             this._showselector = false;
         };
+        /**
+         * HostListener
+         */
+        SacDateCommon.prototype.onClick = function (targetElement) {
+            if (!this.pickercontainer) {
+                return;
+            }
+            var clickedInsideContainer = this.pickercontainer.nativeElement.contains(targetElement);
+            var clickedInsideReference = this.pickerbutton.nativeElement.contains(targetElement);
+            if (!clickedInsideContainer && !clickedInsideReference) {
+                this._showselector = false;
+            }
+        };
         /**
          * Zeigt Date Selector an
          */
@@ -6952,7 +7545,8 @@
     SacDateCommon.ctorParameters = function () { return [
         { type: SacFormLayoutCommon },
         { type: i0.Injector },
-        { type: i0.ElementRef }
+        { type: i0.ElementRef },
+        { type: i0.ChangeDetectorRef }
     ]; };
     SacDateCommon.propDecorators = {
         validationmessagemaxdate: [{ type: i0.Input }],
@@ -7090,11 +7684,11 @@
                     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);
@@ -7231,7 +7825,7 @@
                     .forEach(function (itm) { return (itm.isselected = false); }); });
                 v.isnew = true;
                 v.isselected = true;
-                var dateValue = moment$4(v.date);
+                var dateValue = moment$2(v.date);
                 // Übernehmen der Zeit aus dem bestehenden Wert
                 if (this._selectedValue === null) {
                     if (this._initialValue !== null) {
@@ -7286,7 +7880,7 @@
          * Auswahl auf aktuelle Zeit stellen
          */
         SacDateSelectorCommon.prototype.setToday = function () {
-            this._selectedValue = moment$4();
+            this._selectedValue = moment$2();
             /**
              * Sekunden un Milisekunden Clean
              */
@@ -7322,20 +7916,20 @@
          * Initial Datum
          */
         SacDateSelectorCommon.prototype.initDates = function () {
-            var currentMonth = moment$4(new Date(this.year, this.month, 1));
-            var lastMonth = moment$4(new Date(this.year, this.month, 1));
+            var currentMonth = moment$2(new Date(this.year, this.month, 1));
+            var lastMonth = moment$2(new Date(this.year, this.month, 1));
             lastMonth.add({ months: -1 });
-            var nextMonths = moment$4(new Date(this.year, this.month, 1));
+            var nextMonths = moment$2(new Date(this.year, this.month, 1));
             nextMonths.add({ months: 1 });
             var weekdayBegin = currentMonth.weekday();
-            var weekdayEnd = moment$4(new Date(currentMonth.year(), currentMonth.month(), currentMonth.daysInMonth())).weekday();
+            var weekdayEnd = moment$2(new Date(currentMonth.year(), currentMonth.month(), currentMonth.daysInMonth())).weekday();
             // Clear Array
             var daysInCalendar = [];
             this.dates = [];
             if (weekdayBegin !== this.beginOfCalendar) {
                 var lastMonthDay = lastMonth.daysInMonth();
                 var lastMonthDate = new Date(lastMonth.year(), lastMonth.month(), lastMonthDay);
-                var lastMonthWeekday = moment$4(lastMonthDate).weekday();
+                var lastMonthWeekday = moment$2(lastMonthDate).weekday();
                 var daysInLastMonth = 7 - ((7 + this.beginOfCalendar - lastMonthWeekday) % 7);
                 if (daysInLastMonth === 7) {
                     daysInLastMonth = 0;
@@ -7348,9 +7942,9 @@
             for (var dayinmonth = 1; dayinmonth <= currentMonth.daysInMonth(); dayinmonth++) {
                 var isSelectedDate = false;
                 var isNewDate = false;
-                var isCurrentDate = moment$4().month() === this.month &&
-                    moment$4().year() === this.year &&
-                    moment$4().date() === dayinmonth;
+                var isCurrentDate = moment$2().month() === this.month &&
+                    moment$2().year() === this.year &&
+                    moment$2().date() === dayinmonth;
                 // Initial Wert setzen, falls vorhanden
                 if (this._initialValue !== null) {
                     isSelectedDate =
@@ -7365,7 +7959,7 @@
                             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));
             }
             var endOfCalender;
             if (this.beginOfCalendar === 0) {
@@ -7401,7 +7995,7 @@
              */
             if (this._selectedValue === null) {
                 if (this._initialValue === null) {
-                    this._selectedValue = moment$4();
+                    this._selectedValue = moment$2();
                 }
                 else {
                     this._selectedValue = this._initialValue;
@@ -7430,13 +8024,9 @@
     /**
      * Moment
      */
-    var moment$4 = moment___default['default'];
+    var moment$2 = moment___default['default'];
     // #endregion Variables
 
-    /**
-     * Moment
-     */
-    var moment$5 = moment___default['default'];
     /**
      * Komponente für SacDateTimeCommon. Extends SacBaseDateTimeControl
      */
@@ -7450,8 +8040,8 @@
          * @param injector Injector for injecting services
          * @param elementRef reference to html element
          */
-        function SacDateTimeCommon(formlayout, injector, elementRef) {
-            var _this = _super.call(this, formlayout, injector, elementRef) || this;
+        function SacDateTimeCommon(formlayout, injector, elementRef, cdRef) {
+            var _this = _super.call(this, formlayout, injector, elementRef, cdRef) || this;
             _this.elementRef = elementRef;
             // #region Properties
             /**
@@ -7502,6 +8092,18 @@
                 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___default['default'];
             /**
              * Resource Key für Validation Message MaxDate bei Control
              */
@@ -7518,28 +8120,26 @@
              * 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;
             return _this;
         }
-        Object.defineProperty(SacDateTimeCommon.prototype, "maxdate", {
+        Object.defineProperty(SacDateTimeCommon.prototype, "IconSelector", {
             // #endregion Constructors
             // #region Public Getters And Setters
+            /**
+             * icon for date selector button
+             */
+            get: function () {
+                return this.iconService.DateTimeComponentSelectorIcon;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(SacDateTimeCommon.prototype, "maxdate", {
             /**
              * Max Date
              */
             set: function (v) {
-                var date = moment$5(v, [this.DATEFORMAT], true);
+                var date = this.moment(v, [this.DATEFORMAT], true);
                 if (date.isValid()) {
                     this._maxdate = _super.prototype.getDate.call(this, date).toDate();
                 }
@@ -7555,7 +8155,7 @@
              * Min Date
              */
             set: function (v) {
-                var date = moment$5(v, [this.DATEFORMAT], true);
+                var date = this.moment(v, [this.DATEFORMAT], true);
                 if (date.isValid()) {
                     this._mindate = _super.prototype.getDate.call(this, date).toDate();
                 }
@@ -7566,27 +8166,8 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(SacDateTimeCommon.prototype, "IconSelector", {
-            /**
-             * icon for date selector button
-             */
-            get: function () {
-                return this.iconService.DateTimeComponentSelectorIcon;
-            },
-            enumerable: false,
-            configurable: true
-        });
         // #endregion Public Getters And Setters
         // #region Public Methods
-        /**
-         * HostListener
-         */
-        SacDateTimeCommon.prototype.onClick = function (targetElement) {
-            var clickedInside = this.elementRef.nativeElement.contains(targetElement);
-            if (!clickedInside) {
-                this._showselector = false;
-            }
-        };
         /**
          * Methode ergibt Datum-Format vom String
          */
@@ -7607,10 +8188,23 @@
                 this.setValueString('');
             }
             else {
-                this.value = moment$5(v.date).utc().toDate();
+                this.value = this.moment(v.date).utc().toDate();
             }
             this._showselector = false;
         };
+        /**
+         * HostListener
+         */
+        SacDateTimeCommon.prototype.onClick = function (targetElement) {
+            if (!this.pickercontainer) {
+                return;
+            }
+            var clickedInsideContainer = this.pickercontainer.nativeElement.contains(targetElement);
+            var clickedInsideReference = this.pickerbutton.nativeElement.contains(targetElement);
+            if (!clickedInsideContainer && !clickedInsideReference) {
+                this._showselector = false;
+            }
+        };
         /**
          * DateSelector wird beim Click-Event angezeigt
          */
@@ -7658,7 +8252,8 @@
     SacDateTimeCommon.ctorParameters = function () { return [
         { type: SacFormLayoutCommon },
         { type: i0.Injector },
-        { type: i0.ElementRef }
+        { type: i0.ElementRef },
+        { type: i0.ChangeDetectorRef }
     ]; };
     SacDateTimeCommon.propDecorators = {
         validationmessagemaxdate: [{ type: i0.Input }],
@@ -7670,10 +8265,6 @@
         onClick: [{ type: i0.HostListener, args: ['document:click', ['$event.target'],] }]
     };
 
-    /**
-     * Moment
-     */
-    var moment$6 = moment___default['default'];
     /**
      * Komponente für SacTimeCommon. Extends SacBaseDateTimeControl
      */
@@ -7687,8 +8278,8 @@
          * @param injector Injector for injecting services
          * @param elementRef reference to html element
          */
-        function SacTimeCommon(formlayout, injector, elementRef) {
-            var _this = _super.call(this, formlayout, injector, elementRef) || this;
+        function SacTimeCommon(formlayout, injector, elementRef, cdRef) {
+            var _this = _super.call(this, formlayout, injector, elementRef, cdRef) || this;
             _this.elementRef = elementRef;
             // #region Properties
             /**
@@ -7719,6 +8310,18 @@
                 lazy: false,
                 overwrite: true,
             };
+            /**
+             * Max Time
+             */
+            _this._maxtime = null;
+            /**
+             * Min Time
+             */
+            _this._mintime = null;
+            /**
+             * Moment JS module instance
+             */
+            _this.moment = moment___default['default'];
             /**
              * Resource Key für Validation Message MinTime bei Control
              */
@@ -7735,28 +8338,26 @@
              * 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;
             return _this;
         }
+        Object.defineProperty(SacTimeCommon.prototype, "IconSelector", {
+            // #endregion Constructors
+            // #region Public Getters And Setters
+            /**
+             * icon for date selector button
+             */
+            get: function () {
+                return this.iconService.TimeComponentSelectorIcon;
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(SacTimeCommon.prototype, "maxtime", {
-            // #endregion Constructors
-            // #region Public Getters And Setters
             /**
              * Max Time
              */
             set: function (v) {
-                var time = moment$6(v, [this.TIMEFORMAT], true);
+                var time = this.moment(v, [this.TIMEFORMAT], true);
                 time = this.ModifyParsedDateTimeValue(time);
                 if (time.isValid()) {
                     this._maxtime = _super.prototype.getDate.call(this, time).toDate();
@@ -7773,7 +8374,7 @@
              * Min Time
              */
             set: function (v) {
-                var time = moment$6(v, [this.TIMEFORMAT], true);
+                var time = this.moment(v, [this.TIMEFORMAT], true);
                 time = this.ModifyParsedDateTimeValue(time);
                 if (time.isValid()) {
                     this._mintime = _super.prototype.getDate.call(this, time).toDate();
@@ -7785,27 +8386,8 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(SacTimeCommon.prototype, "IconSelector", {
-            /**
-             * icon for date selector button
-             */
-            get: function () {
-                return this.iconService.TimeComponentSelectorIcon;
-            },
-            enumerable: false,
-            configurable: true
-        });
         // #endregion Public Getters And Setters
         // #region Public Methods
-        /**
-         * HostListener
-         */
-        SacTimeCommon.prototype.onClick = function (targetElement) {
-            var clickedInside = this.elementRef.nativeElement.contains(targetElement);
-            if (!clickedInside) {
-                this._showselector = false;
-            }
-        };
         /**
          * Methode ergibt Datum-Format vom String
          */
@@ -7821,6 +8403,19 @@
             v.year(1900);
             return v;
         };
+        /**
+         * HostListener
+         */
+        SacTimeCommon.prototype.onClick = function (targetElement) {
+            if (!this.pickercontainer) {
+                return;
+            }
+            var clickedInsideContainer = this.pickercontainer.nativeElement.contains(targetElement);
+            var clickedInsideReference = this.pickerbutton.nativeElement.contains(targetElement);
+            if (!clickedInsideContainer && !clickedInsideReference) {
+                this._showselector = false;
+            }
+        };
         /**
          * Zeigt Date Selector an
          */
@@ -7842,7 +8437,7 @@
                 this.setValueString('');
             }
             else {
-                this.value = moment$6(v.date).utc().toDate();
+                this.value = this.moment(v.date).utc().toDate();
             }
             this._showselector = false;
         };
@@ -7878,7 +8473,8 @@
     SacTimeCommon.ctorParameters = function () { return [
         { type: SacFormLayoutCommon },
         { type: i0.Injector },
-        { type: i0.ElementRef }
+        { type: i0.ElementRef },
+        { type: i0.ChangeDetectorRef }
     ]; };
     SacTimeCommon.propDecorators = {
         validationmessagemaxtime: [{ type: i0.Input }],
@@ -7901,18 +8497,26 @@
              * 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;
             return _this;
             // #endregion Public Methods
         }
         Object.defineProperty(SacStaticFormContainerCommon.prototype, "isrequired", {
+            // #endregion Properties
+            // #region Public Getters And Setters
             /**
              * Definiert den Container als Required Form Item
              */
             get: function () {
                 return this._isrequired;
             },
-            // #endregion Properties
-            // #region Public Getters And Setters
             /**
              * Definiert den Container als Required Form Item
              */
@@ -7941,6 +8545,8 @@
         { type: i0.Directive }
     ];
     SacStaticFormContainerCommon.propDecorators = {
+        errormessage: [{ type: i0.Input }],
+        isinvalid: [{ type: i0.Input }],
         isrequired: [{ type: i0.Input }]
     };
 
@@ -8835,21 +9441,6 @@
         { type: i0.Directive }
     ];
 
-    /**
-     * Enum für Tooltip Positionen
-     */
-    (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";
-    })(exports.TooltipPosition || (exports.TooltipPosition = {}));
-
     /**
      * Tooltip Component
      *
@@ -8872,29 +9463,15 @@
             var _this = this;
             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 = function () {
-                // Do nothing if is not visible
-                if (!_this._isTooltipVisible) {
-                    return;
-                }
-                setTimeout(function () {
-                    _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
              */
@@ -8911,16 +9488,43 @@
              * 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 = function () {
+                // Do nothing if is not visible
+                if (!_this._isTooltipVisible) {
+                    return;
+                }
+                setTimeout(function () {
+                    _this.getLeftPosition();
+                    _this.getTopPosition();
+                });
+            };
         }
         Object.defineProperty(SacTooltipCommon.prototype, "inlinemode", {
+            // #endregion Constructors
+            // #region Public Getters And Setters
             /**
              * Property for inline mode for tooltip. Sets the display mode on the wrapper element to `inline`
              */
             get: function () {
                 return this._inlinemode;
             },
-            // #endregion Constructors
-            // #region Public Getters And Setters
             /**
              * Setter for inline mode for tooltip
              */
@@ -8958,50 +9562,7 @@
          * Returns the position of the tooltip
          */
         SacTooltipCommon.prototype.GetTooltipPosition = function () {
-            var validPositions = this.ValidatePositions();
-            // tslint:disable-next-line:no-bitwise
-            if (this.HasPosition(exports.TooltipPosition.right) &&
-                validPositions & exports.TooltipPosition.right) {
-                return exports.TooltipPosition.right;
-            }
-            // tslint:disable-next-line:no-bitwise
-            if (this.HasPosition(exports.TooltipPosition.top) &&
-                validPositions & exports.TooltipPosition.top) {
-                return exports.TooltipPosition.top;
-            }
-            // tslint:disable-next-line:no-bitwise
-            if (this.HasPosition(exports.TooltipPosition.left) &&
-                validPositions & exports.TooltipPosition.left) {
-                return exports.TooltipPosition.left;
-            }
-            // tslint:disable-next-line:no-bitwise
-            if (this.HasPosition(exports.TooltipPosition.bottom) &&
-                validPositions & exports.TooltipPosition.bottom) {
-                return exports.TooltipPosition.bottom;
-            }
-            // Get Auto Position or Default
-            if (this.IsAutoPosition()) {
-                // tslint:disable-next-line:no-bitwise
-                if (validPositions & exports.TooltipPosition.right) {
-                    return exports.TooltipPosition.right;
-                }
-                // tslint:disable-next-line:no-bitwise
-                if (validPositions & exports.TooltipPosition.top) {
-                    return exports.TooltipPosition.top;
-                }
-                // tslint:disable-next-line:no-bitwise
-                if (validPositions & exports.TooltipPosition.left) {
-                    return exports.TooltipPosition.left;
-                }
-                // tslint:disable-next-line:no-bitwise
-                if (validPositions & exports.TooltipPosition.bottom) {
-                    return exports.TooltipPosition.bottom;
-                }
-                return exports.TooltipPosition.right;
-            }
-            else {
-                return this.GetPosition();
-            }
+            return this.popupHelper.getDisplayPosition(this.content, this.tooltipcontainer, this.getTooltipOffset(), this.getTooltipOffset(), this.position, true);
         };
         /**
          * Hide tooltip
@@ -9033,24 +9594,13 @@
          * Calculates the height of the tooltip
          */
         SacTooltipCommon.prototype.getToolTipHeight = function () {
-            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
          */
         SacTooltipCommon.prototype.getToolTipWidth = function () {
-            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
@@ -9095,187 +9645,37 @@
                 document.body.appendChild(this.tooltipcontainer.nativeElement);
             }
         };
-        // #endregion Protected Abstract Methods
+        // #endregion Protected Methods
         // #region Private Methods
-        /**
-         * Returns the defined position for the tooltip
-         */
-        SacTooltipCommon.prototype.GetPosition = function () {
-            var positions = this.position.split('|');
-            if (this.HasPosition(exports.TooltipPosition.left)) {
-                return exports.TooltipPosition.left;
-            }
-            if (this.HasPosition(exports.TooltipPosition.top)) {
-                return exports.TooltipPosition.top;
-            }
-            if (this.HasPosition(exports.TooltipPosition.right)) {
-                return exports.TooltipPosition.right;
-            }
-            if (this.HasPosition(exports.TooltipPosition.bottom)) {
-                return exports.TooltipPosition.bottom;
-            }
-            // Default Position if empty
-            return exports.TooltipPosition.right;
-        };
-        /**
-         * Returns whether the position has been configured
-         *
-         * @param position Position to be checked
-         */
-        SacTooltipCommon.prototype.HasPosition = function (position) {
-            var positions = this.position.split('|');
-            if (position === exports.TooltipPosition.right && positions.indexOf('right') >= 0) {
-                return true;
-            }
-            if (position === exports.TooltipPosition.top && positions.indexOf('top') >= 0) {
-                return true;
-            }
-            if (position === exports.TooltipPosition.left && positions.indexOf('left') >= 0) {
-                return true;
-            }
-            if (position === exports.TooltipPosition.bottom &&
-                positions.indexOf('bottom') >= 0) {
-                return true;
-            }
-            return false;
-        };
-        /**
-         * Defines whether AutoPosition is active
-         */
-        SacTooltipCommon.prototype.IsAutoPosition = function () {
-            var positions = this.position.split('|');
-            return positions.indexOf('auto') >= 0;
-        };
-        /**
-         * Checks whether the position is valid or whether the tooltip on the position has space
-         */
-        SacTooltipCommon.prototype.ValidatePositions = function () {
-            // Check if Container is false
-            if (this.tooltipcontainer === undefined) {
-                return exports.TooltipPosition.right;
-            }
-            var allowedPositions = exports.TooltipPosition.none;
-            var basePosition = this.content.nativeElement.firstElementChild.getBoundingClientRect();
-            var tooltipRect = this.tooltipcontainer.nativeElement.firstElementChild.getBoundingClientRect();
-            var leftPosOk = basePosition.left - tooltipRect.width + (this.getTooltipOffset() * -1) > 0;
-            var rightPosOk = basePosition.right + tooltipRect.width + this.getTooltipOffset() < window.innerWidth;
-            var topPosOk = basePosition.top - tooltipRect.height > 0;
-            var bottomPosOk = basePosition.bottom + tooltipRect.height < window.innerHeight;
-            var leftHalfPosOk = basePosition.left - tooltipRect.width / 2 > 0;
-            var rightHalfPosOk = basePosition.right + tooltipRect.width / 2 < window.innerWidth;
-            var topHalfPosOk = basePosition.top - tooltipRect.height / 2 > 0;
-            var bottomHalfPosOk = basePosition.bottom + tooltipRect.height / 2 < window.innerHeight;
-            if (leftPosOk && topHalfPosOk && bottomHalfPosOk) {
-                // tslint:disable-next-line:no-bitwise
-                allowedPositions = allowedPositions | exports.TooltipPosition.left;
-            }
-            if (rightPosOk && topHalfPosOk && bottomHalfPosOk) {
-                // tslint:disable-next-line:no-bitwise
-                allowedPositions = allowedPositions | exports.TooltipPosition.right;
-            }
-            if (topPosOk && leftHalfPosOk && rightHalfPosOk) {
-                // tslint:disable-next-line:no-bitwise
-                allowedPositions = allowedPositions | exports.TooltipPosition.top;
-            }
-            if (bottomPosOk && leftHalfPosOk && rightHalfPosOk) {
-                // tslint:disable-next-line:no-bitwise
-                allowedPositions = allowedPositions | exports.TooltipPosition.bottom;
-            }
-            return allowedPositions;
-        };
         /**
          * Calculates the position of the tooltip from links
          */
         SacTooltipCommon.prototype.getLeftPosition = function () {
-            if (this.content !== null && this.content !== undefined) {
-                var item = this.content.nativeElement;
-                if (item.children.length >= 1) {
-                    var childItem = item.firstElementChild;
-                    var contentPosition = childItem.getBoundingClientRect();
-                    switch (this.GetTooltipPosition()) {
-                        case exports.TooltipPosition.top:
-                            this.LeftPos = contentPosition.left + contentPosition.width / 2 - this.getToolTipWidth() / 2;
-                            return (contentPosition.left + contentPosition.width / 2 - this.getToolTipWidth() / 2);
-                        case exports.TooltipPosition.right:
-                            this.LeftPos = contentPosition.left + contentPosition.width + this.getTooltipOffset();
-                            return contentPosition.left + contentPosition.width + this.getTooltipOffset();
-                        case exports.TooltipPosition.bottom:
-                            this.LeftPos = contentPosition.left + contentPosition.width / 2 - this.getToolTipWidth() / 2;
-                            return (contentPosition.left + contentPosition.width / 2 - this.getToolTipWidth() / 2);
-                        case exports.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;
-                }
+            var value = this.popupHelper.getPositionLeft(this.content, this.tooltipcontainer, this.ref, this.getTooltipOffset(), this.getTooltipOffset(), this.position, true);
+            this.LeftPos = value;
+            var requiredPosition = this.GetTooltipPosition();
+            if (requiredPosition === exports.TooltipPosition.left || requiredPosition === exports.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
          */
         SacTooltipCommon.prototype.getTopPosition = function () {
-            if (this.content !== null && this.content !== undefined) {
-                var item = this.content.nativeElement;
-                if (item.children.length >= 1) {
-                    var childItem = item.firstElementChild;
-                    var contentPosition = childItem.getBoundingClientRect();
-                    // Get Position with Scroll (Scrollbars inside page should be substracted)
-                    var contentPositionTop = childItem.offsetTop + this.getOffsetTopParent(childItem.offsetParent) - this.getScrollTopParent(childItem.parentElement);
-                    switch (this.GetTooltipPosition()) {
-                        case exports.TooltipPosition.top:
-                            this.TopPos = contentPositionTop - this.getToolTipHeight() + (this.getTooltipOffset() * -1);
-                            return contentPositionTop - this.getToolTipHeight() + (this.getTooltipOffset() * -1);
-                        case exports.TooltipPosition.right:
-                            this.TopPos = contentPositionTop + (contentPosition.height / 2) - (this.getToolTipHeight() / 2);
-                            return contentPositionTop + (contentPosition.height / 2) - (this.getToolTipHeight() / 2);
-                        case exports.TooltipPosition.bottom:
-                            this.TopPos = contentPositionTop + contentPosition.height + this.getTooltipOffset();
-                            return contentPositionTop + contentPosition.height + this.getTooltipOffset();
-                        case exports.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;
-                }
+            var value = this.popupHelper.getPositionTop(this.content, this.tooltipcontainer, this.ref, this.getTooltipOffset(), this.getTooltipOffset(), this.position, true);
+            this.TopPos = value;
+            var requiredPosition = this.GetTooltipPosition();
+            if (requiredPosition === exports.TooltipPosition.bottom || requiredPosition === exports.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
-         */
-        SacTooltipCommon.prototype.getOffsetTopParent = function (element) {
-            if (!element.offsetParent) {
-                return element.offsetTop;
+                this.posArrowLeft = null;
             }
-            var parentValue = this.getOffsetTopParent(element.offsetParent);
-            var offset = element.offsetTop;
-            return parentValue + offset;
-        };
-        /**
-         * Caclulate Scrollbars inside tree
-         * @param element HTML Element
-         * @returns Scroll top value of element with all childs
-         */
-        SacTooltipCommon.prototype.getScrollTopParent = function (element) {
-            // Body Scroll should not be calculated
-            if (!element.parentElement) {
-                return 0;
-            }
-            var parentValue = this.getScrollTopParent(element.parentElement);
-            return parentValue + element.scrollTop;
+            return value;
         };
         return SacTooltipCommon;
     }());
@@ -9287,9 +9687,9 @@
         { type: i0.ElementRef }
     ]; };
     SacTooltipCommon.propDecorators = {
+        content: [{ type: i0.ViewChild, args: ['container', { static: true },] }],
         position: [{ type: i0.Input }],
         tooltiptext: [{ type: i0.Input }],
-        content: [{ type: i0.ViewChild, args: ['container', { static: true },] }],
         inlinemode: [{ type: i0.Input }],
         tooltip: [{ type: i0.ViewChild, args: ['tooltip', { static: false },] }]
     };