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

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('@angular/common/http'), require('rxjs'), require('@angular/forms'), require('moment'), require('imask'), require('ngx-uploadx'), require('@angular/common')) :
+    typeof define === 'function' && define.amd ? define('@simpleangularcontrols/sac-common', ['exports', '@angular/core', '@angular/common/http', 'rxjs', '@angular/forms', 'moment', 'imask', 'ngx-uploadx', '@angular/common'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.simpleangularcontrols = global.simpleangularcontrols || {}, global.simpleangularcontrols['sac-common'] = {}), global.ng.core, global.ng.common.http, global.rxjs, global.ng.forms, global.moment, global.IMask, global.ngxUploadx, global.ng.common));
+}(this, (function (exports, i0, i1, rxjs, forms, moment_, IMask, ngxUploadx, common) { 'use strict';
 
     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
      */
@@ -1397,6 +1404,46 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(SacDefaultIconService.prototype, "TreeviewNodeActionIcon", {
+            /**
+             * @inheritdoc
+             */
+            get: function () {
+                return 'fa fa-pen';
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(SacDefaultIconService.prototype, "TreeviewNodeClosedIcon", {
+            /**
+             * @inheritdoc
+             */
+            get: function () {
+                return 'fa fa-folder-plus';
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(SacDefaultIconService.prototype, "TreeviewNodeEmptyIcon", {
+            /**
+             * @inheritdoc
+             */
+            get: function () {
+                return 'fa fa-folder';
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(SacDefaultIconService.prototype, "TreeviewNodeOpenIcon", {
+            /**
+             * @inheritdoc
+             */
+            get: function () {
+                return 'fa fa-folder-open';
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(SacDefaultIconService.prototype, "UploadComponentBrowseIcon", {
             /**
              * @inheritdoc
@@ -2637,6 +2684,9 @@
              * Inline Errors für das Control
              */
             this._inlineerrorenabled = null;
+            /**
+             * Label Text
+             */
             this._label = '';
             /**
              * Boolean Property dirty; default Wert - false
@@ -2658,6 +2708,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 +2764,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 +2772,58 @@
              * 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;
-            },
+        Object.defineProperty(SacBaseModelControl.prototype, "HelptextTooltipIcon", {
             // #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", {
-            /**
-             * 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.ngControl !== undefined) {
+                    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
@@ -2817,9 +2833,7 @@
              * Methode ergibt boolean Wert wenn Form invalid oder nicht invalid ist
              */
             get: function () {
-                return (this.ngControl !== undefined &&
-                    this.ngControl !== null &&
-                    this.ngControl.invalid);
+                return this.ngControl !== undefined && this.ngControl !== null && this.ngControl.invalid;
             },
             enumerable: false,
             configurable: true
@@ -2843,8 +2857,7 @@
                 if (this._inlineerrorenabled !== null) {
                     return this._inlineerrorenabled;
                 }
-                if (this.formlayout !== null &&
-                    this.formlayout.IsInlineErrorEnabled !== null) {
+                if (this.formlayout !== null && this.formlayout.IsInlineErrorEnabled !== null) {
                     return (_a = this.formlayout) === null || _a === void 0 ? void 0 : _a.IsInlineErrorEnabled;
                 }
                 if (this.configurationService.InlineErrorEnabled !== null) {
@@ -2855,6 +2868,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
@@ -2877,7 +2907,7 @@
              * Methode ergibt Boolean Wert für touched
              */
             get: function () {
-                if (this.ngControl !== null) {
+                if (this.ngControl !== null && this.ngControl !== undefined) {
                     this._touched = this.ngControl.touched;
                 }
                 return this._touched;
@@ -2885,6 +2915,27 @@
             enumerable: false,
             configurable: true
         });
+        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
+        });
         // #endregion Public Getters And Setters
         // #region Public Methods
         /**
@@ -2923,24 +2974,21 @@
             return this.lngResourceService.GetString(errorItem.errorMessageKey, parameters);
         };
         /**
-         * In Angular 10 the Control Label for Reactive Forms can be set first time here. With Angular 13 is supported by init in OnInit
+         * Init Event
          */
-        SacBaseModelControl.prototype.ngAfterViewInit = function () {
+        SacBaseModelControl.prototype.ngOnInit = function () {
             // receive form via formcontrolname or formcontrol instance
             var formControl = this.injector.get(forms.NgControl, null);
             if (formControl instanceof forms.FormControlName) {
                 var form = this.injector.get(forms.FormGroupDirective, null);
                 this.ngControl = form.getControl(formControl);
             }
-            else if (formControl) {
-                this.ngControl = formControl.control;
+            else {
+                if (formControl) {
+                    this.ngControl = formControl.control;
+                }
             }
             this.UpdateLabelToControl();
-        };
-        /**
-         * Init Event
-         */
-        SacBaseModelControl.prototype.ngOnInit = function () {
             // set label sizes from formlayout directive
             this.setLabelSizes();
             // set component heigth from fromlayout directive
@@ -2949,6 +2997,8 @@
             this.setIsAdaptiveLabel();
             // set method to display helptext
             this.setHelpTextMode();
+            // set SplitMode for Labels
+            this.setLabelSplitMode();
             this.OnClassInit();
         };
         /**
@@ -3002,7 +3052,7 @@
         SacBaseModelControl.prototype.writeValue = function (value) {
             this._value = value;
         };
-        // #endregion Public Abstract Methods
+        // #endregion Public Methods
         // #region Protected Methods
         /**
          * Method can Overwriten in Parent Classes
@@ -3141,6 +3191,17 @@
                 }
             }
         };
+        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 +3226,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 +3340,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 +3566,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 +3604,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 +3633,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 +3765,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 +3798,11 @@
             return requiredValidator(validationMessage, validationMessageSummary);
         };
         return Validation;
-    }());
+    }());
+    /**
+     * Moment
+     */
+    var moment$1 = moment___default['default'];
 
     /**
      * Basis Komponente für SacRadiobuttonsCommon. Extends SacBaseModelControl
@@ -3810,59 +3920,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 +3989,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 +4007,49 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(SacRadiobuttonCommon.prototype, "componentHeight", {
+        Object.defineProperty(SacRadiobuttonCommon.prototype, "hidden", {
+            get: function () {
+                return this._hidden;
+            },
             /**
-             * define the control height from parent control
+             * 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
+        });
+        Object.defineProperty(SacRadiobuttonCommon.prototype, "isDisabled", {
+            /**
+             * Methode ergibt Boolean, ob Control disabled ist
              */
             get: function () {
-                return this.sacRadioButtons.componentHeight;
+                return this.disabled || this.sacRadioButtons.disabled;
             },
             enumerable: false,
             configurable: true
         });
-        //#endregion
-        //#region Control Events
+        // #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 +4057,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 +4083,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 +4119,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 +4127,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 +4154,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 +4182,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 +4246,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 +4267,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 +4503,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 +4537,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 +4565,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 +4580,6 @@
             enumerable: false,
             configurable: true
         });
-        // #endregion Public Getters And Setters
-        // #region Public Methods
         /**
          * Registriert das OptionID-Counter als String
          */
@@ -4486,6 +4614,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 +4630,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 +4704,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 +4720,6 @@
             this._element = _element;
             this._renderer = _renderer;
             this._dropdown = _dropdown;
-            // #region Properties
             /**
              * ID-String
              */
@@ -4599,8 +4729,6 @@
             }
         }
         Object.defineProperty(SacDropdownOptionCommon.prototype, "ngValue", {
-            // #endregion Constructors
-            // #region Public Getters And Setters
             /**
              * Option ngValue
              */
@@ -4626,8 +4754,6 @@
             enumerable: false,
             configurable: true
         });
-        // #endregion Public Getters And Setters
-        // #region Public Methods
         /**
          * Den Wert vom Option-Element einstellen
          * @param value Wert
@@ -4656,27 +4782,7 @@
     SacDropdownOptionCommon.propDecorators = {
         ngValue: [{ type: i0.Input }],
         value: [{ type: i0.Input }]
-    };
-    // #endregion Classes
-    // #region Functions
-    /**
-     * Function um ein Key Value Pair für das Dropdown zu erzeugen
-     * @param id ID
-     * @param value Wert der an das Element gebunden werden soll
-     */
-    function _buildValueString(id, value) {
-        // Wenn ID null ist Object zurückgeben
-        if (id == null) {
-            return "" + value;
-        }
-        // Mapping Objekt zu String
-        if (value && typeof value === 'object') {
-            value = 'Object';
-        }
-        // String als ID
-        return (id + ": " + value).slice(0, 50);
-    }
-    // #endregion Functions
+    };
 
     // #endregion Interfaces
     // #region Classes
@@ -6590,9 +6696,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
      */
@@ -6606,22 +7073,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 = '';
+            /**
+             * 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;
+            /**
+             * Position of the picker at the top
+             */
+            _this.posPopupTop = 0;
+            /**
+             * Position of the datetime picker. Values: left|top|right|bottom|auto
+             *
+             * Value 'auto' can be combined with another value.
+             */
+            _this.position = 'bottomend|topend';
             /**
              * Resource Key für Validation Message DateTimeFormat bei Control
              */
@@ -6638,8 +7148,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
@@ -6649,18 +7198,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();
@@ -6672,8 +7219,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
          */
@@ -6685,14 +7236,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
@@ -6726,13 +7300,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;
@@ -6743,22 +7363,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
      */
@@ -6771,9 +7392,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
             /**
@@ -6809,6 +7431,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
              */
@@ -6825,28 +7459,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();
                 }
@@ -6862,7 +7494,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();
                 }
@@ -6873,27 +7505,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
          */
@@ -6914,10 +7527,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
          */
@@ -6963,7 +7589,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 }],
@@ -7101,11 +7728,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);
@@ -7242,7 +7869,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) {
@@ -7297,7 +7924,7 @@
          * Auswahl auf aktuelle Zeit stellen
          */
         SacDateSelectorCommon.prototype.setToday = function () {
-            this._selectedValue = moment$4();
+            this._selectedValue = moment$2();
             /**
              * Sekunden un Milisekunden Clean
              */
@@ -7333,20 +7960,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;
@@ -7359,9 +7986,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 =
@@ -7376,7 +8003,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) {
@@ -7412,7 +8039,7 @@
              */
             if (this._selectedValue === null) {
                 if (this._initialValue === null) {
-                    this._selectedValue = moment$4();
+                    this._selectedValue = moment$2();
                 }
                 else {
                     this._selectedValue = this._initialValue;
@@ -7441,13 +8068,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
      */
@@ -7461,8 +8084,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
             /**
@@ -7513,6 +8136,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
              */
@@ -7529,28 +8164,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();
                 }
@@ -7566,7 +8199,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();
                 }
@@ -7577,27 +8210,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
          */
@@ -7618,10 +8232,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
          */
@@ -7669,7 +8296,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 }],
@@ -7681,10 +8309,6 @@
         onClick: [{ type: i0.HostListener, args: ['document:click', ['$event.target'],] }]
     };
 
-    /**
-     * Moment
-     */
-    var moment$6 = moment___default['default'];
     /**
      * Komponente für SacTimeCommon. Extends SacBaseDateTimeControl
      */
@@ -7698,8 +8322,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
             /**
@@ -7730,6 +8354,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
              */
@@ -7746,28 +8382,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, "maxtime", {
+        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", {
             /**
              * 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();
@@ -7784,7 +8418,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();
@@ -7796,27 +8430,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;
-            }
-        };
+        // #endregion Public Getters And Setters
+        // #region Public Methods
         /**
          * Methode ergibt Datum-Format vom String
          */
@@ -7832,6 +8447,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
          */
@@ -7853,7 +8481,7 @@
                 this.setValueString('');
             }
             else {
-                this.value = moment$6(v.date).utc().toDate();
+                this.value = this.moment(v.date).utc().toDate();
             }
             this._showselector = false;
         };
@@ -7889,7 +8517,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 }],
@@ -7912,18 +8541,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
              */
@@ -7952,6 +8589,8 @@
         { type: i0.Directive }
     ];
     SacStaticFormContainerCommon.propDecorators = {
+        errormessage: [{ type: i0.Input }],
+        isinvalid: [{ type: i0.Input }],
         isrequired: [{ type: i0.Input }]
     };
 
@@ -8411,456 +9050,329 @@
     };
 
     /**
-     *Basis Komponente für SacTreeItemAction
+     * Basis Komponente für SacTreeView
      */
-    var SacTreeItemActionCommon = /** @class */ (function () {
-        /**
-         * Konstruktor
-         * @param el Element Referenz
-         */
-        function SacTreeItemActionCommon(el) {
-            this.el = el;
-            /**
-             * Event wenn auf das Icon geclickt wird
-             */
-            this.clicked = new i0.EventEmitter();
-        }
-        /**
-         * lifecycle OnInit hook. Wird aufgeruren sobald das Komponent initialisiert ist.
-         */
-        SacTreeItemActionCommon.prototype.ngOnInit = function () {
-            var rootElement = this.el.nativeElement;
-            var parentElement = rootElement.parentElement;
-            while (rootElement.firstChild) {
-                parentElement.insertBefore(rootElement.firstChild, rootElement);
-            }
-            parentElement.removeChild(rootElement);
-        };
-        /**
-         * Die Methode erstellt die CSS Klasse des Icon. Akzeptiert ein Key-word und baut ein vollständige CSS Klasse.
-         */
-        SacTreeItemActionCommon.prototype.transformClass = function (initialClass) {
-            switch (initialClass) {
-                case 'add':
-                    return 'jstree-icon icon icon-base-add jstree-add';
-                case 'delete':
-                    return 'jstree-icon icon icon-base-delete jstree-delete';
-                default:
-                    return initialClass;
-            }
-        };
+    var SacTreeviewCommon = /** @class */ (function (_super) {
+        __extends(SacTreeviewCommon, _super);
+        // #endregion Properties
+        // #region Constructors
         /**
-         * Die Methode wird das cklickaction Emitter aktivieren.
+         * Constructor
+         * @param injector Service Injector
          */
-        SacTreeItemActionCommon.prototype.iconaction = function () {
-            this.clicked.emit();
-        };
-        return SacTreeItemActionCommon;
-    }());
-    SacTreeItemActionCommon.decorators = [
-        { type: i0.Directive }
-    ];
-    SacTreeItemActionCommon.ctorParameters = function () { return [
-        { type: i0.ElementRef }
-    ]; };
-    SacTreeItemActionCommon.propDecorators = {
-        item: [{ type: i0.Input }],
-        title: [{ type: i0.Input }],
-        iconstyle: [{ type: i0.Input }],
-        clicked: [{ type: i0.Output }]
-    };
-
-    /**
-     * Basis Komponente für SacTreeView
-     */
-    var SacTreeViewCommon = /** @class */ (function () {
-        function SacTreeViewCommon() {
+        function SacTreeviewCommon(formlayout, injector) {
+            var _this = _super.call(this, formlayout, injector) || this;
+            // #region Properties
             /**
-             * Das Property enthielt array of nodes. Default value: empty array [].
+             * Event when Action is clicked on Node.  An object of the type 'TreeviewAction' is returned. In the default case, 'action' in this object is always the value 'default'. The value can be changed via the 'templateaction'.
              */
-            this.nodes = [];
+            _this.actionclicked = new i0.EventEmitter();
             /**
-             * Das Property enthielt node attribute: 'isCollapsed'. Es wird benutzt beim rendering. Für Expand/Collapsed Sicht des Node(Wert)
+             * Property on the data object that contains the children of the structure element. Must be an array of objects. The default value is 'children'
              */
-            this.collapseAttr = 'isCollapsed';
+            _this.attrchildren = 'children';
             /**
-             * Das Property enthielt node attribute: 'isSelected'. Es wird benutzt beim Vorbereitung des Data des TreeView
+             * Defines the property on the 'data' object with which the actions for a node can be deactivated. A 'disabled' property is used by default.
              */
-            this.selectAttr = 'isSelected';
+            _this.attrdisableaction = 'disabled';
             /**
-             * Das Property enthielt node attribute: 'isIndeterminate'. Es wird benutzt beim Vorbereitung des Data des TreeView
+             * Property on the 'data' object that stores the expanded state. Property must be of type boolean. Default is 'expanded'
              */
-            this.inDeterminateAttr = 'isIndeterminate';
+            _this.attrexanded = 'expanded';
             /**
-             * Providen data for tree.
+             * Property for saving the HoverState on the field. If the property is not present on the node, it is automatically created and removed again. The value can usually be left at the default value unless there is a conflict with a property on the node that is required for other purposes.
              */
-            this._data = [];
+            _this.attrhoverstate = 'hoverstate';
             /**
-             * Input property für den Namen des TreeView. Type string. Default value: ""
+             * Property on 'data' object, which contains the icon for the node. By default, the property is not set, which hides the icon in the node.
              */
-            this.name = '';
+            _this.attricon = null;
             /**
-             * A flag indicating data is flatten in array and prepare is required.(Default
-             * is false).
+             * property on the 'data' object contains an ID of the node. The default is 'id'. If the property is set to NULL, the selectedId event is no longer triggered.
              */
-            this.prepareData = false;
+            _this.attrid = 'id';
             /**
-             * Attribute for Text in Tree
+             * Property on 'data' object, which contains the label for the node. Default is 'label'
              */
-            this.textAttr = 'data';
+            _this.attrlabel = 'label';
             /**
-             * Name of ID property in input data.
+             * Property on 'data' object, which defines whether the node is selected or not. It should be ensured that only 1 node has the value for Selected set to true. Default is 'selected'.
              */
-            this.idAttr = 'id';
+            _this.attrselected = 'selected';
             /**
-             * Name of parent property in input data.
+             * Event when a node is collapsed. Returns the node element as a parameter
              */
-            this.parentAttr = 'PARENT_ID';
+            _this.collabsed = new i0.EventEmitter();
             /**
-             * Name of children list property in input data.
+             * The property contains an array of nodes. The data must already map the tree via child properties.
              */
-            this.childrenAttr = 'children';
+            _this.data = [];
             /**
-             * Output Emitter. Emit das ID des selected Node.
+             * Activates the 'expand' and 'collabse' event even if a node has no children. This is helpful if node elements are to be reloaded at runtime.
              */
-            this.selectedidchange = new i0.EventEmitter();
+            _this.enableasynchload = false;
             /**
-             * Output Emitter. Emit das TextAttr des selected Node.
+             * Activates Ellipsis on the node labels
              */
-            this.selectedtextchanged = new i0.EventEmitter();
+            _this.enableellipsis = true;
             /**
-             * Output Emitter. Emit wenn ein Node selektiert wird.
+             * Event when a node is expanded. Returns the node element as a parameter
              */
-            this.selecteditem = new i0.EventEmitter();
-        }
-        Object.defineProperty(SacTreeViewCommon.prototype, "data", {
+            _this.expanded = new i0.EventEmitter();
             /**
-             * Getter für Data des TreeView
+             * Defines whether an icon for the expanded/collapsed status should be displayed.
              */
-            get: function () {
-                return this._data;
-            },
+            _this.expandedstate = true;
             /**
-             * Input Property für Data des TreeView
+             * A node must be selected
              */
-            set: function (value) {
-                this._data = value;
-                this.nodes = value;
-                // this.nodes.forEach(node => node["typeId"] = "13")
-                this.LoadTree();
-                if (this._collapseAll !== undefined) {
-                    this.collapseAllNode(this._collapseAll);
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SacTreeViewCommon.prototype, "treeviewTemplate", {
+            _this.isrequired = false;
             /**
-             * Getter für das TreeView Template
+             * Name of the TreeView control
              */
-            get: function () {
-                return this.template;
-            },
+            _this.name = '';
             /**
-             * Die Directive erhält die actions für das TreeView
+             * Event when a node is selected. Returns the id attribute as a parameter. The event is not triggered if 'attrid' is not set.
              */
-            set: function (v) {
-                this.template = v;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SacTreeViewCommon.prototype, "treefileicon", {
+            _this.selected = new i0.EventEmitter();
             /**
-             * Getter property. Ergibt das FileIcon für das TreeView
+             * Event when a node is selected. Returns the node element as a parameter.
              */
-            get: function () {
-                return this.fileicontemplate;
-            },
+            _this.selectednode = new i0.EventEmitter();
             /**
-             * Setter property. Deffiniert das FileIcon für das TreeView
+             * Resource Key für Validation Message Required bei Control
              */
-            set: function (v) {
-                this.fileicontemplate = v;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SacTreeViewCommon.prototype, "collapseall", {
+            _this.validationmessagerequired = _this.validationKeyService.ValidationErrorRequired;
             /**
-             * Getter für das collapse property. Ergibt boolean Wert, ob die Items collapsed/expand sind.
+             * Resource Key für Validation Message Required in Validation Summary
              */
+            _this.validationmessagesummaryrequired = _this.validationKeyService.ValidationErrorSummaryRequired;
+            return _this;
+        }
+        Object.defineProperty(SacTreeviewCommon.prototype, "iconAction", {
+            // #endregion Constructors
+            // #region Public Getters And Setters
             get: function () {
-                return this._collapseAll;
-            },
-            // @Input("titleAction") _titleAction: string
-            /**
-             * Collapse or expand all parent nodes.
-             */
-            set: function (value) {
-                this._collapseAll = value;
-                if (this.nodes && this.nodes.length && this.nodes.length > 0) {
-                    this.collapseAllNode(this._collapseAll);
-                }
-                // this._recursiveEdit(
-                //   this.nodes, this.childrenAttr, this.collapseAttr, this._collapseAll);
-                // this.cd.detectChanges();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SacTreeViewCommon.prototype, "selectall", {
-            /**
-             * Select or deselect all nodes.
-             */
-            set: function (value) {
-                this._selectAll = value;
-                this._recursiveEdit(this.nodes, this.childrenAttr, this.selectAttr, value);
-                this._recursiveEdit(this.nodes, this.childrenAttr, this.inDeterminateAttr, false);
+                return this.iconService.TreeviewNodeActionIcon;
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(SacTreeViewCommon.prototype, "selectedid", {
+        Object.defineProperty(SacTreeviewCommon.prototype, "iconFolderCollabsed", {
             /**
-             * Input property - setter. Deffiniert das ID des selektierten Item(node)
+             * CSS icon for folders in tree there are collabsed
+             * @returns css class with icon
              */
-            set: function (v) {
-                this.selectedNode = this.findNode(this.nodes, v, this.idAttr);
-                // if (this.selectedNode) {
-                //   this.selectedIdEmitter.emit(this.selectedNode[this.idAttr]);
-                //   this.selectedTextEmitter.emit(this.selectedNode[this.textAttr]);
-                // }
+            get: function () {
+                return this.iconService.TreeviewNodeClosedIcon;
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(SacTreeViewCommon.prototype, "selectedId", {
+        Object.defineProperty(SacTreeviewCommon.prototype, "iconFolderEmpty", {
             /**
-             * Getter. Ergibt das ID des selektierten Item(node)
+             * CSS icon class for folders without subfolders
+             * @returns css class with icon
              */
             get: function () {
-                return this.selectedNode ? this.selectedNode[this.idAttr] : null;
+                return this.iconService.TreeviewNodeEmptyIcon;
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(SacTreeViewCommon.prototype, "selectedNode", {
+        Object.defineProperty(SacTreeviewCommon.prototype, "iconFolderOpen", {
             /**
-             * Getter für das selektierte Wert(node). Ergibt das selektierte Wert(node).
+             * CSS icon for folders in tree there are expanded
+             * @returns css class with icon
              */
             get: function () {
-                return this._selectedNode;
-            },
-            /**
-             * Setter für das selektierte Wert(node). Wenn aufgerufen das ID und TextAttr des selected Node wird emitted
-             */
-            set: function (v) {
-                this._selectedNode = v;
-                if (this._selectedNode) {
-                    this.selectedidchange.emit(this.selectedId);
-                    this.selectedtextchanged.emit(v[this.textAttr]);
-                }
+                return this.iconService.TreeviewNodeOpenIcon;
             },
             enumerable: false,
             configurable: true
         });
+        // #endregion Public Getters And Setters
+        // #region Public Methods
         /**
-         * A lifecycle hook that is called after Angular has initialized all data-bound properties of a directive.
-         * Define an ngOnInit() method to handle any additional initialization tasks.
+         * Creates an array of a certain size. Is required for a For in the UI, as Angular does not support counting loops
+         * @param size Size of the array
+         * @returns Array
          */
-        SacTreeViewCommon.prototype.ngOnInit = function () {
-            this.collapseAllNode(this._collapseAll);
-            if (this.selectedId)
-                this.openSelectedNode(this.nodes);
+        SacTreeviewCommon.prototype.count = function (size) {
+            return new Array(size);
         };
-        /**
-         * Funktion setzt alle parent items recusiv zum selected node
-         * auf collapsed = false
-         */
-        SacTreeViewCommon.prototype.openSelectedNode = function (data) {
-            var result = false;
-            for (var i = 0; i < data.length; i++) {
-                if (data[i][this.childrenAttr].length &&
-                    data[i][this.idAttr] != this.selectedId)
-                    result = this.openSelectedNode(data[i][this.childrenAttr]);
-                if (result || data[i][this.idAttr] == this.selectedId) {
-                    data[i][this.collapseAttr] = false;
-                    return true;
-                }
+        SacTreeviewCommon.prototype.getChildren = function (node) {
+            if (!node || !this.attrchildren) {
+                return [];
             }
-            return false;
+            var children = node[this.attrchildren];
+            if (!Array.isArray(children)) {
+                return [];
+            }
+            return children;
         };
-        /**
-         * Die Methode vorbereitet die Daten für das TreeView. Die Funktion sollte geändert werden abhängig von dem kommenden Daten (wenn array)
-         */
-        SacTreeViewCommon.prototype.LoadTree = function () {
-            //if the tree structure require array the function below should be changed
-            var cloned = this._data.map(function (x) { return Object.assign({}, x); });
-            // If data is flat, prepare data with recursive function.
-            this.nodes = this.prepareData ? this._getPreparedData(cloned) : this._data;
+        SacTreeviewCommon.prototype.getStringField = function (node, fieldname) {
+            if (!node) {
+                return '';
+            }
+            if (!fieldname) {
+                return node;
+            }
+            var value = node[fieldname];
+            if (!value) {
+                return '';
+            }
+            return value;
         };
-        /**
-         * Die Methode collapse/expand den selectierten Node
-         */
-        SacTreeViewCommon.prototype.onCollapseClick = function (node) {
-            if (node[this.childrenAttr].length) {
-                node[this.collapseAttr] = !node[this.collapseAttr];
+        SacTreeviewCommon.prototype.hasChildren = function (node) {
+            return this.getChildren(node).length > 0;
+        };
+        SacTreeviewCommon.prototype.isDisabledState = function (node) {
+            if (!node || !this.attrdisableaction) {
+                return false;
             }
+            var value = node[this.attrdisableaction];
+            return value === true || value === 'true';
         };
-        /**
-         * Die Methode set den selektierten Node und emit es.
-         */
-        SacTreeViewCommon.prototype.onClick = function (node) {
-            this.selectedNode = node;
-            this.selecteditem.emit(this.selectedNode);
-            // this.cd.detectChanges();
+        SacTreeviewCommon.prototype.isExpandedState = function (node) {
+            if (!node || !this.attrexanded) {
+                return false;
+            }
+            var value = node[this.attrexanded];
+            return value === true || value === 'true';
         };
-        /**
-         * Die Methode wird ein event mit Meldung zu Parent emit-en.
-         */
-        SacTreeViewCommon.prototype.sendMsgToParent = function (msg) {
-            this.selecteditem.emit(msg);
+        SacTreeviewCommon.prototype.isHoverState = function (node) {
+            if (!node || !this.attrhoverstate) {
+                return false;
+            }
+            var value = node[this.attrhoverstate];
+            return value === true || value === 'true';
         };
-        /**
-         * Die Methode wird alle Nodes collapse
-         */
-        SacTreeViewCommon.prototype.collapseAllNode = function (command) {
-            var _this = this;
-            this.nodes.forEach(function (node) {
-                if (node[_this.childrenAttr].length) {
-                    collapseAllHIdden(node, _this.collapseAttr, command, _this.childrenAttr);
-                }
-            });
-            function collapseAllHIdden(node, collapseAttr, command, childrenAttr) {
-                node[collapseAttr] = command;
-                node.children.forEach(function (child) {
-                    if (child[childrenAttr].length) {
-                        collapseAllHIdden(child, collapseAttr, command, childrenAttr);
-                    }
-                });
+        SacTreeviewCommon.prototype.isSelectedState = function (node) {
+            if (!node || !this.attrselected) {
+                return false;
             }
+            var value = node[this.attrselected];
+            return value === true || value === 'true';
         };
         /**
-         * Funktion gibt node aus der liste zurück, welches das Value auf dem gewünschten Attribut hat
-         * Wenn node nicht gefunden wird, wird null zurück gegeben
-         * @param data Liste der nodes
-         * @param searchValue Das gesuchte value
-         * @param attr Der namen des Attributs auf dem das value gesucht wird
+         * Method is called by clicking an action
+         * @param action action and node
          */
-        SacTreeViewCommon.prototype.findNode = function (data, searchValue, attr) {
-            var result = null;
-            for (var i = 0; i < data.length; i++) {
-                if (data[i][attr] == searchValue)
-                    result = data[i];
-                else {
-                    if (data[i][this.childrenAttr].length) {
-                        var recursiveResult = this.findNode(data[i][this.childrenAttr], searchValue, attr);
-                        if (recursiveResult)
-                            result = recursiveResult;
-                    }
-                }
+        SacTreeviewCommon.prototype.onActionClicked = function (action) {
+            this.actionclicked.emit(action);
+        };
+        SacTreeviewCommon.prototype.onNodeClicked = function (node) {
+            if (this.isDisabledState(node) || this.isSelectedState(node)) {
+                this.invertExpandedState(node);
             }
-            return result;
+            this.setSelectedState(node);
         };
-        /**
-         * Die Methode editiert (recursive) alle eingegebene Nodes abhängig von gegebenen Attibute und Value Kriterien.
-         */
-        SacTreeViewCommon.prototype._recursiveEdit = function (list, childrenAttr, attr, value) {
-            if (Array.isArray(list)) {
-                for (var i = 0, len = list.length; i < len; i++) {
-                    list[i][attr] = value;
-                    if (list[i][childrenAttr].length) {
-                        this._recursiveEdit(list[i][childrenAttr], childrenAttr, attr, value);
-                    }
-                }
+        SacTreeviewCommon.prototype.setHoverState = function (node, state) {
+            if (!node || !this.attrhoverstate) {
+                return;
+            }
+            if (state) {
+                node[this.attrhoverstate] = true;
+                return;
+            }
+            if (!node.hasOwnProperty(this.attrhoverstate)) {
+                return;
             }
+            delete node[this.attrhoverstate];
         };
-        /**
-         * Die Methode erstellt eine standarte Sicht-Liste von Nodes
-         */
-        SacTreeViewCommon.prototype._getPreparedData = function (list) {
-            var tree = [], lookup = {};
-            for (var i = 0, len = list.length; i < len; i++) {
-                lookup[list[i][this.idAttr]] = list[i];
-                list[i][this.childrenAttr] = [];
-                list[i][this.collapseAttr] = true;
-                list[i][this.selectAttr] = false;
-                list[i][this.inDeterminateAttr] = false;
+        SacTreeviewCommon.prototype.setSelectedState = function (node) {
+            var _this = this;
+            if (!node || !this.attrselected) {
+                return;
             }
-            for (var i = 0, len = list.length; i < len; i++) {
-                if (list[i][this.parentAttr]) {
-                    lookup[list[i][this.parentAttr]][this.childrenAttr].push(list[i]);
-                }
-                else {
-                    tree.push(list[i]);
-                }
+            // reset selected state of any node
+            this.data.forEach(function (rootNode) { return _this.resetSelectedState(rootNode); });
+            // set selected node as selected
+            node[this.attrselected] = true;
+            // Update ngModel
+            this.setValue(node);
+            // Raise Selected Events
+            this.selectednode.emit(node);
+            if (!this.attrid) {
+                return;
             }
-            return tree;
+            var id = this.getStringField(node, this.attrid);
+            this.selected.emit(id);
         };
-        return SacTreeViewCommon;
-    }());
-    SacTreeViewCommon.decorators = [
+        SacTreeviewCommon.prototype.validateData = function (c) {
+            var error = null;
+            if (this.isrequired) {
+                error = Validation.required(this.validationmessagerequired, this.validationmessagesummaryrequired)(c);
+            }
+            return error;
+        };
+        // #endregion Public Methods
+        // #region Private Methods
+        SacTreeviewCommon.prototype.invertExpandedState = function (node) {
+            if (!node || !this.attrexanded) {
+                return;
+            }
+            // Items with no children cannot be collabsed
+            if (!this.hasChildren(node) && !(this.enableasynchload === true || this.enableasynchload === 'true')) {
+                return;
+            }
+            var value = node[this.attrexanded];
+            if (value === true || value === 'true') {
+                this.collabsed.emit(node);
+                node[this.attrexanded] = false;
+            }
+            else {
+                this.expanded.emit(node);
+                node[this.attrexanded] = true;
+            }
+        };
+        SacTreeviewCommon.prototype.resetSelectedState = function (node) {
+            var _this = this;
+            if (!node || !this.attrselected) {
+                return;
+            }
+            node[this.attrselected] = false;
+            this.getChildren(node).forEach(function (child) {
+                _this.resetSelectedState(child);
+            });
+        };
+        return SacTreeviewCommon;
+    }(SacBaseModelControl));
+    SacTreeviewCommon.decorators = [
         { type: i0.Directive }
     ];
-    SacTreeViewCommon.propDecorators = {
+    SacTreeviewCommon.ctorParameters = function () { return [
+        { type: SacFormLayoutCommon, decorators: [{ type: i0.Host }] },
+        { type: i0.Injector }
+    ]; };
+    SacTreeviewCommon.propDecorators = {
+        actionclicked: [{ type: i0.Output }],
+        attrchildren: [{ type: i0.Input }],
+        attrdisableaction: [{ type: i0.Input }],
+        attrexanded: [{ type: i0.Input }],
+        attrhoverstate: [{ type: i0.Input }],
+        attricon: [{ type: i0.Input }],
+        attrid: [{ type: i0.Input }],
+        attrlabel: [{ type: i0.Input }],
+        attrselected: [{ type: i0.Input }],
+        collabsed: [{ type: i0.Output }],
         data: [{ type: i0.Input }],
-        template: [{ type: i0.Input }],
-        treeviewTemplate: [{ type: i0.ContentChild, args: ['actions', { static: true },] }],
-        fileicontemplate: [{ type: i0.Input }],
-        treefileicon: [{ type: i0.ContentChild, args: ['treefileicon', { static: true },] }],
+        enableasynchload: [{ type: i0.Input }],
+        enableellipsis: [{ type: i0.Input }],
+        expanded: [{ type: i0.Output }],
+        expandedstate: [{ type: i0.Input }],
+        isrequired: [{ type: i0.Input }],
         name: [{ type: i0.Input }],
-        prepareData: [{ type: i0.Input }],
-        textAttr: [{ type: i0.Input }],
-        idAttr: [{ type: i0.Input }],
-        parentAttr: [{ type: i0.Input }],
-        childrenAttr: [{ type: i0.Input }],
-        title: [{ type: i0.Input }],
-        collapseall: [{ type: i0.Input }],
-        selectall: [{ type: i0.Input }],
-        selectedid: [{ type: i0.Input }],
-        selectedidchange: [{ type: i0.Output }],
-        selectedtextchanged: [{ type: i0.Output }],
-        selecteditem: [{ type: i0.Output }]
+        selected: [{ type: i0.Output }],
+        selectednode: [{ type: i0.Output }],
+        showactionalways: [{ type: i0.Input }],
+        templateaction: [{ type: i0.Input }],
+        templatelabel: [{ type: i0.Input }],
+        validationmessagerequired: [{ type: i0.Input }],
+        validationmessagesummaryrequired: [{ type: i0.Input }]
     };
 
-    /**
-     * Komponente für SacTreeViewChildCommon. Extends SacTreeViewCommon
-     */
-    var SacTreeViewChildCommon = /** @class */ (function (_super) {
-        __extends(SacTreeViewChildCommon, _super);
-        function SacTreeViewChildCommon() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        /**
-         * A lifecycle hook that is called after Angular has initialized all data-bound properties of a directive.
-         * Define an ngOnInit() method to handle any additional initialization tasks.
-         */
-        SacTreeViewChildCommon.prototype.ngOnInit = function () {
-            this.collapseAllNode(this.collapseall);
-        };
-        return SacTreeViewChildCommon;
-    }(SacTreeViewCommon));
-    SacTreeViewChildCommon.decorators = [
-        { 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
      *
@@ -8883,29 +9395,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
              */
@@ -8922,16 +9420,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
              */
@@ -8969,50 +9494,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
@@ -9044,24 +9526,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
@@ -9106,187 +9577,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;
-            }
-            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;
+                this.posArrowLeft = null;
             }
-            var parentValue = this.getScrollTopParent(element.parentElement);
-            return parentValue + element.scrollTop;
+            return value;
         };
         return SacTooltipCommon;
     }());
@@ -9298,9 +9619,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 },] }]
     };
@@ -11287,6 +11608,27 @@
         { type: i0.ElementRef }
     ]; };
 
+    /**
+     * Base Context Menu Item
+     */
+    var SacContextmenuItemCommon = /** @class */ (function () {
+        function SacContextmenuItemCommon() {
+            // #region Properties
+            /**
+             * Reference to the higher-level context menu. This property is always set automatically by the context menu. However, it may be necessary to set the reference manually.
+             */
+            this.contextmenu = null;
+            // #endregion Properties
+        }
+        return SacContextmenuItemCommon;
+    }());
+    SacContextmenuItemCommon.decorators = [
+        { type: i0.Directive }
+    ];
+    SacContextmenuItemCommon.propDecorators = {
+        contextmenu: [{ type: i0.Input }]
+    };
+
     /**
      * Base Context Menü Element. Die Logik wurde aus NG-BOOTSTRAP übernommen.
      */
@@ -11336,12 +11678,7 @@
              *
              * Please see the [positioning overview](#/positioning) for more details.
              */
-            this.placement = [
-                'bottom-left',
-                'bottom-right',
-                'top-left',
-                'top-right',
-            ];
+            this.placement = ['bottom-left', 'bottom-right', 'top-left', 'top-right'];
             this.zoneSubscription = this.ngZone.onStable.subscribe(function () {
                 _this._positionMenu();
             });
@@ -11361,17 +11698,6 @@
         });
         // #endregion Public Getters And Setters
         // #region Public Methods
-        /**
-         * HostListener um das Dropdown zu schliessen wenn nicht auf das Element geklickt wird.
-         */
-        SacContextmenuCommon.prototype.onClick = function (targetElement) {
-            var anchor = this._anchor || this._anchorTemplate;
-            if (this._menu &&
-                !this._menu.nativeElement.contains(targetElement) &&
-                !anchor.nativeElement.contains(targetElement)) {
-                this.close();
-            }
-        };
         /**
          * Schliesst das Dropdown
          */
@@ -11379,6 +11705,10 @@
             this._resetContainer();
             this.isopen = false;
         };
+        SacContextmenuCommon.prototype.ngAfterContentInit = function () {
+            var _this = this;
+            this.menuitems.forEach(function (button) { return (button.contextmenu = _this); });
+        };
         /**
          * Event wenn Component entfernt wird.
          */
@@ -11388,6 +11718,17 @@
             }
             this.zoneSubscription.unsubscribe();
         };
+        /**
+         * HostListener um das Dropdown zu schliessen wenn nicht auf das Element geklickt wird.
+         */
+        SacContextmenuCommon.prototype.onClick = function (targetElement) {
+            var anchor = this._anchor || this._anchorTemplate;
+            if (this._menu &&
+                !this._menu.nativeElement.contains(targetElement) &&
+                !anchor.nativeElement.contains(targetElement)) {
+                this.close();
+            }
+        };
         /**
          * Öffnet das Dropdown / Zeigt das Menü an.
          */
@@ -11431,8 +11772,7 @@
             if (container === 'body') {
                 var renderer = this.renderer;
                 var dropdownMenuElement = this._menu.nativeElement;
-                var bodyContainer = (this.bodyContainer =
-                    this.bodyContainer || renderer.createElement('div'));
+                var bodyContainer = (this.bodyContainer = this.bodyContainer || renderer.createElement('div'));
                 // Override some styles to have the positioning working
                 renderer.setStyle(bodyContainer, 'position', 'absolute');
                 renderer.setStyle(dropdownMenuElement, 'position', 'static');
@@ -11471,41 +11811,31 @@
         { type: i0.Injector }
     ]; };
     SacContextmenuCommon.propDecorators = {
-        _anchorTemplate: [{ type: i0.ContentChild, args: [SacContextmenuAnchorCommon, { static: false },] }],
         _anchor: [{ type: i0.ViewChild, args: [SacContextmenuAnchorCommon, { static: false },] }],
+        _anchorTemplate: [{ type: i0.ContentChild, args: [SacContextmenuAnchorCommon, { static: false },] }],
         _menu: [{ type: i0.ViewChild, args: [SacContextMenuContrainerCommon, { static: false },] }],
         buttontemplate: [{ type: i0.Input }],
         container: [{ type: i0.Input }],
         cssclass: [{ type: i0.Input }],
         isopen: [{ type: i0.Input }],
+        menuitems: [{ type: i0.ContentChildren, args: [i0.forwardRef(function () { return SacContextmenuItemCommon; }),] }],
         placement: [{ type: i0.Input }],
         onClick: [{ type: i0.HostListener, args: ['document:click', ['$event.target'],] }]
     };
 
-    /**
-     * Base Context Menu Item
-     */
-    var SacContextmenuItemCommon = /** @class */ (function () {
-        function SacContextmenuItemCommon() {
-        }
-        return SacContextmenuItemCommon;
-    }());
-    SacContextmenuItemCommon.decorators = [
-        { type: i0.Directive }
-    ];
-
     /**
      * Base Context Menu Button Item
      */
     var SacContextmenuItemButtonCommon = /** @class */ (function (_super) {
         __extends(SacContextmenuItemButtonCommon, _super);
+        // #endregion Properties
+        // #region Constructors
         /**
          * Constructor
-         * @param contextmenu Instance of Context Menü.
          */
-        function SacContextmenuItemButtonCommon(contextmenu) {
+        function SacContextmenuItemButtonCommon() {
             var _this = _super.call(this) || this;
-            _this.contextmenu = contextmenu;
+            // #region Properties
             /**
              * Menu Item ist deaktiviert
              */
@@ -11514,6 +11844,10 @@
              * Icon Column in Menü ist deaktiviert
              */
             _this._isicondisabled = false;
+            /**
+             * Event wenn auf den Button geklickt wird
+             */
+            _this.clicked = new i0.EventEmitter();
             /**
              * css class for button styling
              */
@@ -11523,12 +11857,14 @@
              */
             _this.iconstyle = '';
             /**
-             * Event wenn auf den Button geklickt wird
+             * name of button. used for generate id and name
              */
-            _this.clicked = new i0.EventEmitter();
+            _this.name = '';
             return _this;
         }
         Object.defineProperty(SacContextmenuItemButtonCommon.prototype, "isdisabled", {
+            // #endregion Constructors
+            // #region Public Getters And Setters
             /**
              * Menu Item ist deaktiviert
              */
@@ -11570,13 +11906,17 @@
             enumerable: false,
             configurable: true
         });
+        // #endregion Public Getters And Setters
+        // #region Public Methods
         /**
          * Die Methode wird das cklickaction Emitter aktivieren
          */
         SacContextmenuItemButtonCommon.prototype.callaction = function (event) {
             if (!this._isdisabled) {
                 this.clicked.emit();
-                this.contextmenu.close();
+                if (this.contextmenu !== null) {
+                    this.contextmenu.close();
+                }
             }
             event.stopPropagation();
         };
@@ -11585,18 +11925,17 @@
     SacContextmenuItemButtonCommon.decorators = [
         { type: i0.Directive }
     ];
-    SacContextmenuItemButtonCommon.ctorParameters = function () { return [
-        { type: SacContextmenuCommon }
-    ]; };
+    SacContextmenuItemButtonCommon.ctorParameters = function () { return []; };
     SacContextmenuItemButtonCommon.propDecorators = {
-        icon: [{ type: i0.Input }],
+        clicked: [{ type: i0.Output }],
         cssclass: [{ type: i0.Input }],
+        icon: [{ type: i0.Input }],
         iconstyle: [{ type: i0.Input }],
         image: [{ type: i0.Input }],
-        isdisabled: [{ type: i0.Input }],
-        isicondisabled: [{ type: i0.Input }],
+        name: [{ type: i0.Input }],
         text: [{ type: i0.Input }],
-        clicked: [{ type: i0.Output }]
+        isdisabled: [{ type: i0.Input }],
+        isicondisabled: [{ type: i0.Input }]
     };
 
     /**
@@ -12311,9 +12650,7 @@
     exports.SacTimeCommon = SacTimeCommon;
     exports.SacTinyMceCommon = SacTinyMceCommon;
     exports.SacTooltipCommon = SacTooltipCommon;
-    exports.SacTreeItemActionCommon = SacTreeItemActionCommon;
-    exports.SacTreeViewChildCommon = SacTreeViewChildCommon;
-    exports.SacTreeViewCommon = SacTreeViewCommon;
+    exports.SacTreeviewCommon = SacTreeviewCommon;
     exports.SacUploadBase = SacUploadBase;
     exports.SacUploadFile = SacUploadFile;
     exports.SacUploadMultipleCommon = SacUploadMultipleCommon;