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

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

@@ -648,6 +648,10 @@
     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.
+             */
+            this.checkboxstyle = null;
             /**
              * Defines the standard height of the components
              */
@@ -655,7 +659,11 @@
             /**
              * defines that error messages are displayed under the controls
              */
-            this.inlineError = true;
+            this.inlineError = null;
+            /**
+             * Defines if InputSearch uses an icon at the button or the text
+             */
+            this.inputsearchiconmode = null;
             /**
              * defines that the labels are displayed as adaptive labels
              */
@@ -693,7 +701,7 @@
              * Returns whether the inline error messages for the form are active.
              */
             get: function () {
-                return this.inlineError !== false;
+                return this.inlineError;
             },
             enumerable: false,
             configurable: true
@@ -704,8 +712,11 @@
         { type: i0.Directive }
     ];
     SacFormLayoutCommon.propDecorators = {
+        checkboxstyle: [{ type: i0.Input }],
         componentHeight: [{ type: i0.Input }],
+        helptextmode: [{ type: i0.Input }],
         inlineError: [{ type: i0.Input }],
+        inputsearchiconmode: [{ type: i0.Input }],
         isAdaptiveLabel: [{ type: i0.Input }],
         labelSizeLg: [{ type: i0.Input }],
         labelSizeMd: [{ type: i0.Input }],
@@ -754,8 +765,18 @@
         function SacDefaultConfigurationService() {
             return _super !== null && _super.apply(this, arguments) || this;
         }
-        Object.defineProperty(SacDefaultConfigurationService.prototype, "ComponentHeight", {
+        Object.defineProperty(SacDefaultConfigurationService.prototype, "CheckboxStyle", {
             // #region Public Getters And Setters
+            /**
+             * @inheritdoc
+             */
+            get: function () {
+                return 'checkbox';
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(SacDefaultConfigurationService.prototype, "ComponentHeight", {
             /**
              * @inheritdoc
              */
@@ -775,6 +796,36 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(SacDefaultConfigurationService.prototype, "HelptextMode", {
+            /**
+             * @inheritdoc
+             */
+            get: function () {
+                return 'text';
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(SacDefaultConfigurationService.prototype, "InlineErrorEnabled", {
+            /**
+             * @inheritdoc
+             */
+            get: function () {
+                return true;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(SacDefaultConfigurationService.prototype, "InputSearchIconMode", {
+            /**
+             * @inheritdoc
+             */
+            get: function () {
+                return 'text';
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(SacDefaultConfigurationService.prototype, "LabelSizeLg", {
             /**
              * @inheritdoc
@@ -1296,6 +1347,16 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(SacDefaultIconService.prototype, "GenericHelptextIcon", {
+            /**
+             * @inheritdoc
+             */
+            get: function () {
+                return 'fa fa-info-circle';
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(SacDefaultIconService.prototype, "GridComponentSortDown", {
             /**
              * @inheritdoc
@@ -1316,6 +1377,16 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(SacDefaultIconService.prototype, "InputSearchButtonIcon", {
+            /**
+             * @inheritdoc
+             */
+            get: function () {
+                return 'fas fa-search';
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(SacDefaultIconService.prototype, "TimeComponentSelectorIcon", {
             /**
              * @inheritdoc
@@ -2530,11 +2601,12 @@
         return obj;
     }
 
+    // #region Functions
     /**
      * create a guid with crypto library if availabe and a fallback to Math.Random implementation
      */
     function createGuid() {
-        if (typeof crypto !== undefined) {
+        if (typeof crypto !== undefined && crypto['randomUUID'] !== undefined) {
             // return guid without hyphen
             return crypto['randomUUID']().replace(/\-/gi, '');
         }
@@ -2544,7 +2616,8 @@
                 return v.toString(16);
             });
         }
-    }
+    }
+    // #endregion Functions
 
     /**
      * Abstract Klasse für SacBaseModelControl. Implements ControlValueAccessor, Validator, OnInit
@@ -2597,6 +2670,10 @@
              * Deaktiviert das Label im Template
              */
             this.disablelabel = false;
+            /**
+             * Text to support the user during input.
+             */
+            this.helptext = '';
             /**
              * defines that error messages are displayed under the controls
              */
@@ -2649,8 +2726,12 @@
             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;
             },
@@ -2708,6 +2789,16 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(SacBaseModelControl.prototype, "HelptextTooltipIcon", {
+            /**
+             * Get Icon for Helptext Tooltip
+             */
+            get: function () {
+                return this.iconService.GenericHelptextIcon;
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(SacBaseModelControl.prototype, "dirty", {
             /**
              * Methode ergibt Boolean Wert für dirty
@@ -2748,13 +2839,18 @@
              * Returns whether the inline error messages are active for this control.
              */
             get: function () {
-                var _a, _b;
-                if (((_a = this.formlayout) === null || _a === void 0 ? void 0 : _a.IsInlineErrorEnabled) === null ||
-                    ((_b = this.formlayout) === null || _b === void 0 ? void 0 : _b.IsInlineErrorEnabled) === undefined) {
+                var _a;
+                if (this._inlineerrorenabled !== null) {
                     return this._inlineerrorenabled;
                 }
-                return (this.formlayout.IsInlineErrorEnabled !== false &&
-                    this._inlineerrorenabled !== false);
+                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) {
+                    return this.configurationService.InlineErrorEnabled;
+                }
+                return true;
             },
             enumerable: false,
             configurable: true
@@ -2851,6 +2947,8 @@
             this.setComponentHeight();
             // set adaptive label property from formlayout directive
             this.setIsAdaptiveLabel();
+            // set method to display helptext
+            this.setHelpTextMode();
             this.OnClassInit();
         };
         /**
@@ -2955,6 +3053,20 @@
                 }
             }
         };
+        /**
+         * Set mode for helptext. Can be tooltip or text
+         */
+        SacBaseModelControl.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;
+                }
+            }
+        };
         /**
          * Set adaptive label property from parent layout control
          */
@@ -3042,6 +3154,8 @@
         componentHeight: [{ type: i0.Input }],
         disabled: [{ type: i0.Input }],
         disablelabel: [{ type: i0.Input }],
+        helptext: [{ type: i0.Input }],
+        helptextmode: [{ type: i0.Input }],
         inlineError: [{ type: i0.Input }],
         isAdaptiveLabel: [{ type: i0.Input }],
         labelSizeLg: [{ type: i0.Input }],
@@ -3063,29 +3177,51 @@
         __extends(SacCheckboxCommon, _super);
         function SacCheckboxCommon() {
             var _this = _super.apply(this, __spread(arguments)) || this;
-            /**
-             * Text welcher als Tooltip angezeigt wird.
-             */
-            _this.tooltiptext = '';
             /**
              * Defines that the checkbox can be used in a list of checkboxes and is not handled as a single form control
              */
             _this.stacked = false;
             return _this;
+            // #endregion Private Methods
         }
+        // #endregion Properties
+        // #region Public Methods
+        /**
+         * Init Event
+         */
+        SacCheckboxCommon.prototype.ngOnInit = function () {
+            _super.prototype.ngOnInit.call(this);
+            this.setCheckboxStyle();
+        };
         /**
          * Control hat keinen Validator
          */
         SacCheckboxCommon.prototype.validateData = function (c) {
             return null;
         };
+        // #endregion Public Methods
+        // #region Private Methods
+        /**
+         * Adopts the default display if no display has been defined on the component.
+         */
+        SacCheckboxCommon.prototype.setCheckboxStyle = function () {
+            var _a;
+            if (!this.checkboxstyle) {
+                if ((_a = this.formlayout) === null || _a === void 0 ? void 0 : _a.checkboxstyle) {
+                    this.checkboxstyle = this.formlayout.checkboxstyle;
+                }
+                else {
+                    this.checkboxstyle = this.configurationService.CheckboxStyle;
+                }
+            }
+        };
         return SacCheckboxCommon;
     }(SacBaseModelControl));
     SacCheckboxCommon.decorators = [
         { type: i0.Directive }
     ];
     SacCheckboxCommon.propDecorators = {
-        tooltiptext: [{ type: i0.Input }],
+        checkboxstyle: [{ type: i0.Input }],
         checkboxtext: [{ type: i0.Input }],
         stacked: [{ type: i0.Input }]
     };
@@ -3142,19 +3278,27 @@
         };
     }
 
+    // #region Variables
     /**
      * Moment
      */
     var moment = moment___default['default'];
+    // #endregion Variables
+    // #region Functions
     function isDateValid(value, format) {
         // NULL ist gültig
         if (value === null || value === undefined || value === '') {
             return true;
         }
+        // Check is Iso Date (From API Call)
+        if (moment(value, moment_.ISO_8601, true).isValid()) {
+            return true;
+        }
         var date = moment(value, [format], true);
         date = date.utc();
         return date.isValid();
-    }
+    }
+    // #endregion Functions
 
     function isValidDateValidator(validationMessage, validationMessageSummary) {
         return function (control) {
@@ -5001,10 +5145,6 @@
              * Macht das Input readonly
              */
             _this.readonly = false;
-            /**
-             * Text welcher als Tooltip angezeigt wird.
-             */
-            _this.tooltiptext = '';
             return _this;
             // #endregion Protected Methods
         }
@@ -5048,8 +5188,7 @@
         isrequired: [{ type: i0.Input }],
         placeholder: [{ type: i0.Input }],
         readonly: [{ type: i0.Input }],
-        regexvalidation: [{ type: i0.Input }],
-        tooltiptext: [{ type: i0.Input }]
+        regexvalidation: [{ type: i0.Input }]
     };
 
     /**
@@ -5573,60 +5712,100 @@
         __extends(SacInputSearchCommon, _super);
         function SacInputSearchCommon() {
             var _this = _super.apply(this, __spread(arguments)) || this;
-            /**
-             * Name des Such-Icons
-             */
-            _this.iconname = '';
             /**
              * Text welcher auf dem Button angezeigt wird
              */
             _this.buttontext = '';
+            /**
+             * Name des Such-Icons
+             */
+            _this.iconname = '';
             /**
              * Event wenn auf das Such-Icon geclickt wird
              */
             _this.clicked = new i0.EventEmitter();
             return _this;
+            // #endregion Private Methods
         }
+        // #endregion Properties
+        // #region Public Methods
+        /**
+         * Init Event
+         */
+        SacInputSearchCommon.prototype.ngOnInit = function () {
+            _super.prototype.ngOnInit.call(this);
+            this.setButtonMode();
+            if (!this.iconname) {
+                this.iconname = this.iconService.InputSearchButtonIcon;
+            }
+        };
         /**
          * Methode sendet den Wert des Inputs durch das Event
          */
         SacInputSearchCommon.prototype.searchClick = function () {
             this.clicked.emit(this.value);
         };
+        // #endregion Public Methods
+        // #region Private Methods
+        SacInputSearchCommon.prototype.setButtonMode = function () {
+            var _a;
+            // set mode for search button
+            if (!this.buttonmode) {
+                if ((_a = this.formlayout) === null || _a === void 0 ? void 0 : _a.inputsearchiconmode) {
+                    this.buttonmode = this.formlayout.inputsearchiconmode;
+                }
+                else {
+                    this.buttonmode = this.configurationService.InputSearchIconMode;
+                }
+            }
+        };
         return SacInputSearchCommon;
     }(SacInputCommon));
     SacInputSearchCommon.decorators = [
         { type: i0.Directive }
     ];
     SacInputSearchCommon.propDecorators = {
-        iconname: [{ type: i0.Input }],
+        buttonmode: [{ type: i0.Input }],
         buttontext: [{ type: i0.Input }],
+        iconname: [{ type: i0.Input }],
         clicked: [{ type: i0.Output }]
     };
 
+    // #region Classes
+    /**
+     * GridResponse class
+     */
+    var GridResponse = /** @class */ (function () {
+        function GridResponse() {
+        }
+        return GridResponse;
+    }());
     /**
-     * Model für Pager Settings
+     * Model for pager settings
      */
     var PagerData = /** @class */ (function () {
+        // #endregion Properties
+        // #region Constructors
         /**
-         * Konstruktor
-         * @param PageSize Anzahl Elemente pro Seite
-         * @param CurrentPageIndex Aktuelle Seite
-         * @param TotalRowCount Total Rows in Datenbank
+         * Constructor
+         * @param PageSize Number of elements per page
+         * @param CurrentPageIndex Current page
+         * @param TotalRowCount Total Rows in database
          */
         function PagerData(PageSize, CurrentPageIndex, TotalRowCount) {
+            // #region Properties
             /**
-             * Gesamte Anzahl der Zeilen
-            */
-            this.TotalRowCount = 0;
-            /**
-             * Aktueller Index der Seite
+             * Current index of the page
              */
             this.CurrentPageIndex = 0;
             /**
-             * PageSize
+             * Number of elements on the page
              */
             this.PageSize = 20;
+            /**
+             * Total number of data records
+             */
+            this.TotalRowCount = 0;
             this.PageSize = PageSize;
             this.CurrentPageIndex = CurrentPageIndex;
             this.TotalRowCount = TotalRowCount;
@@ -5634,44 +5813,41 @@
         return PagerData;
     }());
     /**
-     * Model wenn Seite geändert werden soll
+     * Model if page is to be changed
      */
     var PagerRequest = /** @class */ (function () {
+        // #endregion Properties
+        // #region Constructors
         /**
-         * Konstruktor
-         * @param PageSize Seitegrösse / Anzahl Elemente pro Seite
-         * @param NewPageIndex Neuer Seitenindex
+         * Constructor
+         * @param PageSize Page size / number of elements per page
+         * @param NewPageIndex New page index
          */
         function PagerRequest(PageSize, NewPageIndex) {
+            // #region Properties
             /**
-             * Aktueller Index der Seite
+             * Index of the page to which you want to switch
              */
-            this.PageSize = 0;
+            this.NewPageIndex = 0;
             /**
-             * PageSize
+             * Number of elements on the page
              */
-            this.NewPageIndex = 0;
+            this.PageSize = 0;
             this.PageSize = PageSize;
             this.NewPageIndex = NewPageIndex;
         }
         return PagerRequest;
     }());
     /**
-     * GridResponse-Klasse
-     */
-    var GridResponse = /** @class */ (function () {
-        function GridResponse() {
-        }
-        return GridResponse;
-    }());
-    /**
-     * Model für Sortierung
+     * Model for sorting
      */
     var SortDescriptor = /** @class */ (function () {
+        // #endregion Properties
+        // #region Constructors
         /**
-         * Konstruktor
-         * @param sortcolumn Column die Sortiert wird
-         * @param sortorder Art der Sortierung
+         * Constructor
+         * @param sortcolumn Column by which to sort
+         * @param sortorder Type of sorting
          */
         function SortDescriptor(sortcolumn, sortorder) {
             this.SortColumn = sortcolumn;
@@ -5680,19 +5856,29 @@
         return SortDescriptor;
     }());
     (function (SortOrder) {
+        /**
+         * No sorting
+         */
         SortOrder[SortOrder["None"] = 0] = "None";
+        /**
+         * Ascending
+         */
         SortOrder[SortOrder["Ascending"] = 1] = "Ascending";
+        /**
+         * Descending
+         */
         SortOrder[SortOrder["Descending"] = 2] = "Descending";
-    })(exports.SortOrder || (exports.SortOrder = {}));
+    })(exports.SortOrder || (exports.SortOrder = {}));
+    // #endregion Enums
 
     /**
-     * Basis Komponente für SacGrid
+     * Basic component for SacGrid
      */
     var SacGridCommon = /** @class */ (function () {
         // #endregion Properties
         // #region Constructors
         /**
-         * Konstruktor
+         * Constructor
          * @param cd Change Detection Service
          * @param injector DI Injector
          */
@@ -5700,43 +5886,43 @@
             this.cd = cd;
             // #region Properties
             /**
-             * Protected Property. Enthielt die Nummer der aktiven Seite. Type: number. Default ist 1
+             * Page number of the active page.
              */
             this.activePage = 1;
             /**
-             * Protected Property. Enthielt die Nummer der ersten angezeigtenen Seite in Pager. Type: number. Default ist 1
+             * Contains the number of the first page displayed in Pager.
              */
             this.firstPageNumber = 1;
             /**
-             * Protected Property. Enthielt Array of Pages. Default value: empty array []
+             * Contains Array of Pages.
              */
             this.paginators = [];
             /**
-             * Deaktiviert die Auswahl der PageSize im Pager
+             * Deactivates the selection of the PageSize in the pager
              */
             this.pagesizedisabled = false;
             /**
-             * Definiert die Anzahl der Elemente pro Seite die ausgewählt werden können
+             * Defines the number of elements per page that can be selected. The default is 20, 50 and 100. The values must be separated with a `|`.
              */
             this.pagesizes = '20|50|100';
             /**
-             * Output EventEmitter. Wird aufgerufen wenn das Pager geklickt ist.
+             * Event when the pager is clicked.
              */
             this.paging = new i0.EventEmitter();
             /**
-             * Output EventEmitter. Wird aufgerufen wenn ein Header geklickt ist, damit das Column soritert wird.
+             * Event when a header is clicked so that the grid is sorted.
              */
             this.sorting = new i0.EventEmitter();
             /**
-             * Private Property. Enthielt die Column Menge. Type: number. Default ist 0
+             * Number of columns in the grid
              */
             this.ColumnCount = 0;
             /**
-             * Aktuell Sortierte Spalte
+             * Column by which currently sorted.
              */
             this.sortColumn = '';
             /**
-             * Aktuelle Sortierung
+             * Current direction of sorting
              */
             this.sortDirection = exports.SortOrder.None;
             this.validationKeyService = injector.get(SACVALIDATIONKEY_SERVICE, new SacDefaultValidationKeyService());
@@ -5748,8 +5934,8 @@
             // #endregion Constructors
             // #region Public Getters And Setters
             /**
-             * Model für Sortierung
-             * @param sortDescription Settings für aktuelle sortierung
+             * Model for sorting
+             * @param sortDescription Settings for current sorting
              */
             set: function (sortDescription) {
                 this.sortColumn = sortDescription.SortColumn;
@@ -5761,15 +5947,15 @@
         // #endregion Public Getters And Setters
         // #region Public Methods
         /**
-         * Die Methode erhöht die Column-Stücke um eins
+         * The method increases the column elements by one
          */
         SacGridCommon.prototype.RegisterColumn = function () {
             this.ColumnCount++;
-            // Detect Changes ausführen, da ColumnChange nach OnInit ausgeführt wird.
+            // Detect Changes, as ColumnChange is executed after OnInit.
             this.cd.detectChanges();
         };
         /**
-         * Die Methode deffiniert das Sortierung Flow
+         * Method for sorting the data.
          */
         SacGridCommon.prototype.SortBy = function (command) {
             var direction;
@@ -5793,14 +5979,14 @@
             this.sorting.emit(result);
         };
         /**
-         * Die Methode verringert die Column-Stücke um eins
+         * The method reduces the column elements by one
          */
         SacGridCommon.prototype.UnregisterColumn = function () {
             this.ColumnCount--;
         };
         /**
-         * Setzt die neue Seite
-         * @param newStartIndex Neuer Seiten Index (Zero-Based)
+         * Method if Grid is to switch to a new page.
+         * @param newStartIndex New Page Index (Zero-Based)
          */
         SacGridCommon.prototype.pageChange = function (newStartIndex) {
             this.paging.emit(newStartIndex);
@@ -5836,27 +6022,31 @@
      */
     var SacGridButtonCommon = /** @class */ (function () {
         function SacGridButtonCommon() {
+            // #region Properties
             /**
-             * Input Property für Styling des Buttons. Deffiniert die Css Klassen des Buttons
+             * Button is deactivated
              */
-            this.iconstyle = '';
+            this._isdisabledvalue = false;
             /**
-             * Button ist deaktiviert
+             * Input property for styling the button. Defines the CSS classes of the button
              */
-            this._isdisabledvalue = false;
+            this.iconstyle = '';
             /**
-             * Event wenn auf den Button geklickt wird
+             * Event when the button is clicked
              */
             this.clicked = new i0.EventEmitter();
+            // #endregion Public Methods
         }
         Object.defineProperty(SacGridButtonCommon.prototype, "isdisabled", {
             get: function () {
                 return this._isdisabledvalue;
             },
+            // #endregion Properties
+            // #region Public Getters And Setters
             /**
-             * Deaktivieren von Buttons
-             * @param v Deaktiviert den Button
-             * @return Definiert ob der Button deaktiviert ist
+             * Deactivating buttons
+             * @param v Deactivates the button. Can be a Boolean or the strings `true` or `false`.
+             * @return Defines whether the button is deactivated. Is always a Boolean type
              */
             set: function (v) {
                 if (v === null || v === undefined || typeof v === 'boolean') {
@@ -5869,8 +6059,10 @@
             enumerable: false,
             configurable: true
         });
+        // #endregion Public Getters And Setters
+        // #region Public Methods
         /**
-         * Die Methode wird das cklickaction Emitter aktivieren
+         * Triggers the clicked event if the button is not deactivated.
          */
         SacGridButtonCommon.prototype.callaction = function () {
             if (!this._isdisabledvalue) {
@@ -5883,18 +6075,20 @@
         { type: i0.Directive }
     ];
     SacGridButtonCommon.propDecorators = {
-        iconstyle: [{ type: i0.Input }],
         icon: [{ type: i0.Input }],
-        isdisabled: [{ type: i0.Input }],
-        clicked: [{ type: i0.Output }]
+        iconstyle: [{ type: i0.Input }],
+        clicked: [{ type: i0.Output }],
+        isdisabled: [{ type: i0.Input }]
     };
 
     /**
-     * Base Komponente für GridColumn
+     * Base component for GridColumn
      */
     var SacGridColumnBaseCommon = /** @class */ (function () {
+        // #endregion Properties
+        // #region Constructors
         /**
-         * Konstruktor
+         * Constructor
          * @param grid  reference to grid component
          * @param injector di injector to resolve icon service
          * @param el reference to html element
@@ -5905,73 +6099,71 @@
             this.el = el;
             this.iconService = injector.get(SACICON_SERVICE, new SacDefaultIconService());
         }
-        //#endregion
-        //#region Interface Implementations
-        /**
-         * lifecycle hook - OnInit. Wird aufgeruren sobald das Komponent initialisiert ist.
-         */
-        SacGridColumnBaseCommon.prototype.ngOnInit = function () {
-            var rootElement = this.el.nativeElement;
-            var parentElement = rootElement.parentElement;
-            while (rootElement.firstChild) {
-                parentElement.insertBefore(rootElement.firstChild, rootElement);
-            }
-            parentElement.removeChild(rootElement);
-            if (this.IsHeader()) {
-                this.grid.RegisterColumn();
-            }
-        };
-        /**
-         * lifecycle hook - ngOnDestroy. Wird aufgeruren wenn das Component zerstört wird.
-         */
-        SacGridColumnBaseCommon.prototype.ngOnDestroy = function () {
-            if (this.IsHeader()) {
-                this.grid.UnregisterColumn();
-            }
-        };
-        //#endregion
-        //#region Type Handling
-        /**
-         * die Methode ergibt boolean Wert, ob das Element Header ist.
-         */
-        SacGridColumnBaseCommon.prototype.IsHeader = function () {
-            return this.type === 'header';
-        };
-        /**
-         * die Methode ergibt boolean Wert, ob das Element Body ist.
-         */
-        SacGridColumnBaseCommon.prototype.IsBody = function () {
-            return this.type === 'body';
-        };
-        /**
-         * die Methode ergibt boolean Wert, ob das Element Footer ist.
-         */
-        SacGridColumnBaseCommon.prototype.IsFooter = function () {
-            return this.type === 'footer';
-        };
-        Object.defineProperty(SacGridColumnBaseCommon.prototype, "IconSortUp", {
-            //#endregion
+        Object.defineProperty(SacGridColumnBaseCommon.prototype, "IconSortDown", {
+            // #endregion Constructors
+            // #region Public Getters And Setters
             /**
-             * sort up icon for grid header
+             * sort down icon for grid header
              */
             get: function () {
-                return this.iconService.GridComponentSortUp;
+                return this.iconService.GridComponentSortDown;
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(SacGridColumnBaseCommon.prototype, "IconSortDown", {
+        Object.defineProperty(SacGridColumnBaseCommon.prototype, "IconSortUp", {
             /**
-             * sort down icon for grid header
+             * sort up icon for grid header
              */
             get: function () {
-                return this.iconService.GridComponentSortDown;
+                return this.iconService.GridComponentSortUp;
             },
             enumerable: false,
             configurable: true
         });
+        // #endregion Public Getters And Setters
+        // #region Public Methods
+        /**
+         * Indicates the direction of sorting. The possible values are `none`,`asc`,`desc`
+         */
+        SacGridColumnBaseCommon.prototype.GetSortDirection = function () {
+            switch (this.grid.sortDirection) {
+                case exports.SortOrder.None:
+                    return 'none';
+                case exports.SortOrder.Ascending:
+                    return 'asc';
+                case exports.SortOrder.Descending:
+                    return 'desc';
+                default:
+                    return 'none';
+            }
+        };
+        /**
+         * Defines whether the element is a cell in the table.
+         */
+        SacGridColumnBaseCommon.prototype.IsBody = function () {
+            return this.type === 'body';
+        };
+        /**
+         * Defines whether the element is a cell in the footer of the table
+         */
+        SacGridColumnBaseCommon.prototype.IsFooter = function () {
+            return this.type === 'footer';
+        };
+        /**
+         * Defines whether the element is a cell in the table header
+         */
+        SacGridColumnBaseCommon.prototype.IsHeader = function () {
+            return this.type === 'header';
+        };
+        /**
+         * Defines whether this column is sorted.
+         */
+        SacGridColumnBaseCommon.prototype.IsSortedColumn = function () {
+            return this.grid.sortColumn === this.sortkey;
+        };
         /**
-         * Die Methode deffiniert wie das Grid sortiert wird, abhängig von gekligte Column
+         * Triggers the events so that the table is sorted according to this column.
          */
         SacGridColumnBaseCommon.prototype.SortByColumn = function () {
             if (this.sortkey !== undefined &&
@@ -5981,24 +6173,25 @@
             }
         };
         /**
-         * die Methode ergibt boolean Wert und definiert, ob das Column für Sortierung aktiviert ist, gemäß eingegebene sortKey
+         * Called when the component is destroyed.
          */
-        SacGridColumnBaseCommon.prototype.IsSortedColumn = function () {
-            return this.grid.sortColumn === this.sortkey;
+        SacGridColumnBaseCommon.prototype.ngOnDestroy = function () {
+            if (this.IsHeader()) {
+                this.grid.UnregisterColumn();
+            }
         };
         /**
-         * Die methode definiert die Dortirung Richtung. Die Werte sind: none, asc, desc.
+         * Is called when the component is initialized.
          */
-        SacGridColumnBaseCommon.prototype.GetSortDirection = function () {
-            switch (this.grid.sortDirection) {
-                case exports.SortOrder.None:
-                    return 'none';
-                case exports.SortOrder.Ascending:
-                    return 'asc';
-                case exports.SortOrder.Descending:
-                    return 'desc';
-                default:
-                    return 'none';
+        SacGridColumnBaseCommon.prototype.ngOnInit = function () {
+            var rootElement = this.el.nativeElement;
+            var parentElement = rootElement.parentElement;
+            while (rootElement.firstChild) {
+                parentElement.insertBefore(rootElement.firstChild, rootElement);
+            }
+            parentElement.removeChild(rootElement);
+            if (this.IsHeader()) {
+                this.grid.RegisterColumn();
             }
         };
         return SacGridColumnBaseCommon;
@@ -6012,39 +6205,44 @@
         { type: i0.ElementRef }
     ]; };
     SacGridColumnBaseCommon.propDecorators = {
-        name: [{ type: i0.Input }],
-        value: [{ type: i0.Input }],
         header: [{ type: i0.Input }],
-        width: [{ type: i0.Input }],
+        name: [{ type: i0.Input }],
+        sortkey: [{ type: i0.Input }],
         type: [{ type: i0.Input }],
-        sortkey: [{ type: i0.Input }]
+        value: [{ type: i0.Input }],
+        width: [{ type: i0.Input }]
     };
 
     /**
-     * Komponente für SacGridColumnCommon. Extends SacGridColumnBaseCommon
+     * Component for SacGridColumnCommon. Extends SacGridColumnBaseCommon
      */
     var SacGridColumnCommon = /** @class */ (function (_super) {
         __extends(SacGridColumnCommon, _super);
+        // #endregion Properties
+        // #region Constructors
         /**
-         * Konstruktor
+         * Constructor
          */
         function SacGridColumnCommon(grid, injector, el) {
             var _this = _super.call(this, grid, injector, el) || this;
+            // #region Properties
             /**
-             * Das Property enthielt boolean Wert für die CSS Klasse ellipsis. Default is false.
+             *  Defines whether the CSS class ellipsis is set.
              */
             _this._ellipsis = false;
             return _this;
         }
         Object.defineProperty(SacGridColumnCommon.prototype, "ellipsis", {
             /**
-             * Getter für das private property _ellipsis. Ergibt das boolean Wert des Property
+             * Getter for the ellipsis property. Always returns a boolean type.
              */
             get: function () {
                 return this._ellipsis;
             },
+            // #endregion Constructors
+            // #region Public Getters And Setters
             /**
-             * Input Parameter für das css Class ellipsis. Das Setter setzt das boolean Wert auf das private property _ellipsis
+             * Sets the ellipsis property. Can be a Boolean or the strings `true` or `false`.
              */
             set: function (v) {
                 this._ellipsis = convertToBoolean(v);
@@ -6052,8 +6250,10 @@
             enumerable: false,
             configurable: true
         });
+        // #endregion Public Getters And Setters
+        // #region Public Methods
         /**
-         * Die Methode returns das Wert des Property _ellipsis
+         * Checks whether ellipsis is set
          */
         SacGridColumnCommon.prototype.IsEllipsis = function () {
             return this._ellipsis;
@@ -6073,13 +6273,14 @@
     };
 
     /**
-     * Komponente für SacGridColumnActionCommon. Extends SacGridColumnBaseCommon
+     * Component for SacGridColumnActionCommon. Extends SacGridColumnBaseCommon
      */
     var SacGridColumnActionCommon = /** @class */ (function (_super) {
         __extends(SacGridColumnActionCommon, _super);
+        // #region Constructors
         /**
-         * Konstruktor
-         * @param el Element Referenz
+         * Constructor
+         * @param el Element reference
          * @param injector di inector to resolve icon service
          * @param grid SacGridCommon
          */
@@ -6098,7 +6299,7 @@
     ]; };
 
     /**
-     * Basis Komponente für SacGridImage
+     * Basic component for SacGridImage
      */
     var SacGridImageCommon = /** @class */ (function () {
         function SacGridImageCommon() {
@@ -6113,67 +6314,65 @@
     };
 
     /**
-     * Basiskomponente für Paging
+     * Basic component for paging
      */
     var SacPagingCommon = /** @class */ (function () {
         // #endregion Properties
         // #region Constructors
         /**
-         * Konstruktor
-         * Inject des Formulars
+         * Constructor
          * @parent SacFormCommon
          * @injector Injector
          */
         function SacPagingCommon(injector) {
             /**
-             * Total Anzahl Rows
+             * Total number of rows
              */
             this.totalRowCount = 0;
             /**
-             * Auswahl der Seitengrösse deaktivieren
+             * Deactivate page size selection
              */
             this.pagesizedisabled = false;
             /**
-             * Text in Page für Anzahl Seitenelemente pro Seite
-             * Folgende Interpolation Texte sind vorhanden:
-             * {{PAGESIZE}}: Anzahl Elemente pro Seite
+             * Text in Page for number of page elements per page. The following interpolation texts are available:
+             *
+             * {{PAGESIZE}}: Number of elements per page
              */
             this.pagesizes = '20|50|100';
             /**
-             * Text in Page für Anzahl Seitenelemente pro Seite
-             * Folgende Interpolation Texte sind vorhanden:
-             * {{PAGESIZE}}: Anzahl Elemente pro Seite
+             * Text in Page for number of page elements per page. The following interpolation texts are available:
+             *
+             * {{PAGESIZE}}: Number of elements per page
              */
             this.pagesizetext = '';
             /**
-             * Text in Pager für 'Seite x von y'.
-             * Folgende Interpolation Texte sind vorhanden:
-             * {{CURRENTPAGE}}: Aktuelle Seite
-             * {{TOTALPAGES}}: Anzahl Seiten
+             * Text in pager for 'Page x of y'. The following interpolation texts are available:
+             * {{CURRENTPAGE}}: Current page
+             * {{TOTALPAGES}}: Number of pages
              */
             this.pagingtext = '';
             /**
-             * Event wenn im Grid die Seite geändert wird. Als Parameter wird der neue PageIndex mitgegeben.
+             * Event when the page is changed in the grid. The new PageIndex is given as a parameter.
              */
             this.paging = new i0.EventEmitter();
             /**
-             * Aktiver Seitenindex
+             * Active page index
              */
             this.activePageIndex = 0;
             /**
-             * Erster Seitenindex
+             * First page index
              */
             this.firstPageIndex = 0;
             /**
-             * Letzter Seitenindex
+             * Last page index
              */
             this.lastPageIndex = 0;
             /**
-             * Anzahl Elemente pro Seite
+             * Number of elements per page
              */
             this.pageSize = 20;
             /**
-             * Item für jedes Paging Element (Seitenzahl)
+             * Item for each paging element (page number)
              */
             this.paginators = [];
             this.validationKeyService = injector.get(SACVALIDATIONKEY_SERVICE, new SacDefaultValidationKeyService());
@@ -6186,7 +6385,7 @@
             // #endregion Constructors
             // #region Public Getters And Setters
             /**
-             * Property für Pager Data
+             * Property for Pager Data
              */
             set: function (p) {
                 if (p != null) {
@@ -6201,7 +6400,7 @@
         });
         Object.defineProperty(SacPagingCommon.prototype, "PageSizeText", {
             /**
-             * Property mit Text für Total Einträge in Seite
+             * Property with text for total entries in page
              */
             get: function () {
                 return this.lngResourceService.GetString(this.pagesizetext);
@@ -6211,7 +6410,7 @@
         });
         Object.defineProperty(SacPagingCommon.prototype, "PagingText", {
             /**
-             * Text mit Aktueller Seite und Total Seiten
+             * Text with current page and total pages
              */
             get: function () {
                 return this.lngResourceService.GetString(this.pagingtext, {
@@ -6224,7 +6423,7 @@
         });
         Object.defineProperty(SacPagingCommon.prototype, "getPageSizes", {
             /**
-             * Gibt die Page Sizes als Number Array zurück
+             * Returns the page sizes as a number array
              */
             get: function () {
                 return this.pagesizes.split('|').map(function (itm) { return Number(itm); });
@@ -6235,8 +6434,8 @@
         // #endregion Public Getters And Setters
         // #region Public Methods
         /**
-         * Andert die Seite auf den neuen Index
-         * @param newPageIndex Seiten Index. Dies entspricht der Seitenzahl - 1.
+         * Changes the page to the new index
+         * @param newPageIndex Page index. This corresponds to the page number - 1.
          */
         SacPagingCommon.prototype.changePage = function (newPageIndex) {
             if (this.activePageIndex !== newPageIndex) {
@@ -6244,15 +6443,15 @@
             }
         };
         /**
-         * Ändert die Seitengrösse im Pager
-         * @param newSize Neue Anzahl Elemente pro Seite
+         * Changes the page size in the pager
+         * @param newSize New number of elements per page
          */
         SacPagingCommon.prototype.changePageSize = function (newSize) {
             var pagerData = new PagerRequest(newSize, this.activePageIndex);
             this.paging.emit(pagerData);
         };
         /**
-         * Paging auf 1. Seite
+         *Switch to 1st page
          */
         SacPagingCommon.prototype.firstPage = function () {
             if (this.activePageIndex !== this.firstPageIndex) {
@@ -6260,19 +6459,19 @@
             }
         };
         /**
-         * Gibt die aktuelle Seitenzahl zurück
+         * Returns the current page number
          */
         SacPagingCommon.prototype.getCurrentPageNumber = function () {
             return this.activePageIndex + 1;
         };
         /**
-         * Gibt die totale Anzahl Seiten zurück
+         * Returns the total number of pages
          */
         SacPagingCommon.prototype.getTotalPageNumber = function () {
             return this.lastPageIndex + 1;
         };
         /**
-         * Paging auf letzter Seite
+         * Paging on last page
          */
         SacPagingCommon.prototype.lastPage = function () {
             if (this.activePageIndex !== this.lastPageIndex) {
@@ -6280,7 +6479,7 @@
             }
         };
         /**
-         * Paging auf nächste Seite
+         * Paging to next page
          */
         SacPagingCommon.prototype.nextPage = function () {
             if (this.activePageIndex !== this.lastPageIndex) {
@@ -6288,7 +6487,7 @@
             }
         };
         /**
-         * Paging eine Seite zurück
+         * Paging one page back
          */
         SacPagingCommon.prototype.previousPage = function () {
             if (this.activePageIndex !== this.firstPageIndex) {
@@ -6298,7 +6497,7 @@
         // #endregion Public Methods
         // #region Protected Methods
         /**
-         * Erzeugt die Pager Daten
+         * Generates the pager data
          */
         SacPagingCommon.prototype.createPager = function () {
             this.paginators = [];
@@ -6325,8 +6524,8 @@
             }
         };
         /**
-         * Gibt den letzten Seitenindex zurück.
-         * @param totalPageCount Total Anzahl Seiten
+         * Returns the last page index.
+         * @param totalPageCount Total number of pages
          */
         SacPagingCommon.prototype.getEndPageIndex = function (totalPageCount) {
             var endingPageToDisplay = this.activePageIndex + 2;
@@ -6340,8 +6539,8 @@
             return endingPageToDisplay;
         };
         /**
-         * Gibt den Start Index zurück
-         * @param totalPageCount Total Anzahl Seiten
+         * Returns the start index
+         * @param totalPageCount Total number of pages
          */
         SacPagingCommon.prototype.getStartPageIndex = function (totalPageCount) {
             var startingPageToDisplay = 0;
@@ -6355,7 +6554,7 @@
             return startingPageToDisplay;
         };
         /**
-         * Methode löst den Event aus, dass ein Paging stattgefunden hat
+         * method triggers the event that paging has taken place
          */
         SacPagingCommon.prototype.paged = function (newPageIndex) {
             var pagerData = new PagerRequest(this.pageSize, newPageIndex);
@@ -6565,6 +6764,7 @@
         function SacDateCommon(formlayout, injector, elementRef) {
             var _this = _super.call(this, formlayout, injector, elementRef) || this;
             _this.elementRef = elementRef;
+            // #region Properties
             /**
              * Format des Datums
              */
@@ -6626,7 +6826,6 @@
              * Definiert ob der Date Selector angezeigt wird
              */
             _this._showselector = false;
-            _this.iconService = injector.get(SACICON_SERVICE, new SacDefaultIconService());
             return _this;
         }
         Object.defineProperty(SacDateCommon.prototype, "maxdate", {
@@ -7254,6 +7453,7 @@
         function SacDateTimeCommon(formlayout, injector, elementRef) {
             var _this = _super.call(this, formlayout, injector, elementRef) || this;
             _this.elementRef = elementRef;
+            // #region Properties
             /**
              * Format des Datums
              */
@@ -7330,7 +7530,6 @@
              * Definiert ob der Date Selector angezeigt wird
              */
             _this._showselector = false;
-            _this.iconService = injector.get(SACICON_SERVICE, new SacDefaultIconService());
             return _this;
         }
         Object.defineProperty(SacDateTimeCommon.prototype, "maxdate", {
@@ -7491,6 +7690,7 @@
         function SacTimeCommon(formlayout, injector, elementRef) {
             var _this = _super.call(this, formlayout, injector, elementRef) || this;
             _this.elementRef = elementRef;
+            // #region Properties
             /**
              * Format des Datums
              */
@@ -7547,7 +7747,6 @@
              * Definiert ob der Date Selector angezeigt wird
              */
             _this._showselector = false;
-            _this.iconService = injector.get(SACICON_SERVICE, new SacDefaultIconService());
             return _this;
         }
         Object.defineProperty(SacTimeCommon.prototype, "maxtime", {
@@ -7702,11 +7901,8 @@
              * Definiert den Container als Required Form Item
              */
             _this._isrequired = false;
-            /**
-             * Text welcher als Tooltip angezeigt wird.
-             */
-            _this.tooltiptext = '';
             return _this;
+            // #endregion Public Methods
         }
         Object.defineProperty(SacStaticFormContainerCommon.prototype, "isrequired", {
             /**
@@ -7715,6 +7911,8 @@
             get: function () {
                 return this._isrequired;
             },
+            // #endregion Properties
+            // #region Public Getters And Setters
             /**
              * Definiert den Container als Required Form Item
              */
@@ -7724,6 +7922,8 @@
             enumerable: false,
             configurable: true
         });
+        // #endregion Public Getters And Setters
+        // #region Public Methods
         /**
          * Validierung des Controls
          *
@@ -7741,7 +7941,6 @@
         { type: i0.Directive }
     ];
     SacStaticFormContainerCommon.propDecorators = {
-        tooltiptext: [{ type: i0.Input }],
         isrequired: [{ type: i0.Input }]
     };
 
@@ -8654,15 +8853,17 @@
     /**
      * Tooltip Component
      *
-     * Benötigt im HTML Markup folgende Identifier
-     * - container: Container für ng-content in welchem das Element angezeigt wird, wo der Tooltip angehängt wird.
-     * - tooltip: Container für Tooltip
+     * Requires the following identifiers in the HTML markup
+     * - container: Container for ng-content in which the element is displayed where the tooltip is attached.
+     * - tooltip: Container for tooltip
      *
-     * Tooltip muss in 2 Schritten angezeigt werden. In einem ersten Schritt wird der Tooltip Markup erzeugt mit (ngIf). In einem 2. Schritt
-     * kann der Tooltip dann über die CSS visibility angezeigt werden. Wird dies nicht so gemacht, kann es bei gewissen Browsern zu einem Flacker Effekt führen.
+     * Tooltip must be displayed in 2 steps. In a first step the tooltip markup is created with (ngIf). In a 2nd step
+     * the tooltip can then be displayed via the CSS visibility. If this is not done, it can lead to a flickering effect in certain browsers.
      *
      */
     var SacTooltipCommon = /** @class */ (function () {
+        // #endregion Properties
+        // #region Constructors
         /**
          * Konstruktor
          * @param ref Element Referenz
@@ -8672,50 +8873,56 @@
             this.cdRef = cdRef;
             this.ref = ref;
             /**
-             * Property für Enum in Angular HTML Template
-             */
-            this.TooltipPosition = exports.TooltipPosition;
-            /**
-             * Definiert ob der Tooltip sichtbar ist
+             * Defines whether the tooltip is visible
              */
             this._isTooltipVisible = false;
             /**
-             * Position des Tooltips oben
-             */
-            this.TopPos = 0;
-            /**
-             * Position des Tooltips links
+             * method if content has changed and proportions need to be reset in the UI.
              */
-            this.LeftPos = 0;
+            this.onContentChange = function () {
+                // Do nothing if is not visible
+                if (!_this._isTooltipVisible) {
+                    return;
+                }
+                setTimeout(function () {
+                    _this.getLeftPosition();
+                    _this.getTopPosition();
+                });
+            };
             /**
-             * Position des Tooltips. Werte: left|top|right|bottom|auto
+             * Position of the tooltip. Values: left|top|right|bottom|auto
              *
-             * Wert 'auto' kann mit einem anderen Wert kombiniert werden.
+             * Value 'auto' can be combined with another value.
              */
             this.position = 'right|auto';
             /**
-             * Definiert ob der Tooltip sichtbar sein soll
+             * Position of the tooltip on the left
              */
             this.IsTooltipContentVisible = false;
             /**
-             * Methode wenn Content geändert hat und Proporties im UI neu gesetzt werden müssen.
+             * Position des Tooltips links
              */
-            this.onContentChange = function () {
-                setTimeout(function () {
-                    _this.getLeftPosition();
-                    _this.getTopPosition();
-                });
-            };
+            this.LeftPos = 0;
+            /**
+             * Property for enum in Angular HTML template
+             */
+            this.TooltipPosition = exports.TooltipPosition;
+            /**
+             * Position of the tooltip at the top
+             */
+            this.TopPos = 0;
         }
         Object.defineProperty(SacTooltipCommon.prototype, "inlinemode", {
             /**
-             * Getter für Inline Mode für Tooltip
+             * 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 für Inline Mode für Tooltip
+             * Setter for inline mode for tooltip
              */
             set: function (value) {
                 this._inlinemode = convertToBoolean(value);
@@ -8725,7 +8932,7 @@
         });
         Object.defineProperty(SacTooltipCommon.prototype, "tooltip", {
             /**
-             * Setter für Name des Containers für den Tooltip. Wird benötigt, da Tooltip via NGIF ausgeblendet werden kann.
+             * Setter for the name of the container for the tooltip. Is required as the tooltip can be hidden via ngIf.
              */
             set: function (content) {
                 if (content !== undefined) {
@@ -8738,128 +8945,84 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(SacTooltipCommon.prototype, "tooltop", {
+            get: function () {
+                return this.tooltipcontainer;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        // #endregion Public Getters And Setters
+        // #region Public Methods
         /**
-         * Ervent wenn das Control initialisert wird
+         * Returns the position of the tooltip
          */
-        SacTooltipCommon.prototype.ngOnInit = function () {
-            // Register Event Listener
-            window.addEventListener('scroll', this.onContentChange, true);
-            window.addEventListener('resize', this.onContentChange, true);
-            if (this.tooltipcontainer !== undefined) {
-                document.body.appendChild(this.tooltipcontainer.nativeElement);
+        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;
             }
-        };
-        /**
-         * Event wenn das Control zerstört wird.
-         */
-        SacTooltipCommon.prototype.ngOnDestroy = function () {
-            // Unregister Event Listener
-            window.removeEventListener('scroll', this.onContentChange, true);
-            window.removeEventListener('resize', this.onContentChange, true);
-            if (this.tooltipcontainer !== undefined) {
-                document.body.removeChild(this.tooltipcontainer.nativeElement);
+            // tslint:disable-next-line:no-bitwise
+            if (this.HasPosition(exports.TooltipPosition.top) &&
+                validPositions & exports.TooltipPosition.top) {
+                return exports.TooltipPosition.top;
             }
-        };
-        /**
-         * Berechnet die Position des Tooltips von Oben
-         */
-        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();
-                    switch (this.GetTooltipPosition()) {
-                        case exports.TooltipPosition.top:
-                            this.TopPos = contentPosition.top - this.getToolTipHeight();
-                            return contentPosition.top - this.getToolTipHeight();
-                        case exports.TooltipPosition.right:
-                            this.TopPos = contentPosition.top + (contentPosition.height / 2) - (this.getToolTipHeight() / 2);
-                            return contentPosition.top + (contentPosition.height / 2) - (this.getToolTipHeight() / 2);
-                        case exports.TooltipPosition.bottom:
-                            this.TopPos = contentPosition.top + contentPosition.height;
-                            return contentPosition.top + contentPosition.height;
-                        case exports.TooltipPosition.left:
-                            this.TopPos = contentPosition.top + (contentPosition.height / 2) - (this.getToolTipHeight() / 2);
-                            return contentPosition.top + (contentPosition.height / 2) - (this.getToolTipHeight() / 2);
-                    }
-                    return childItem.clientTop + childItem.offsetTop - ((this.getToolTipHeight() / 2) - (childItem.clientHeight / 2));
-                }
-                else {
-                    return this.content.nativeElement.offsetTop;
-                }
+            // tslint:disable-next-line:no-bitwise
+            if (this.HasPosition(exports.TooltipPosition.left) &&
+                validPositions & exports.TooltipPosition.left) {
+                return exports.TooltipPosition.left;
             }
-            else {
-                return this.ref.nativeElement.offsetTop;
+            // tslint:disable-next-line:no-bitwise
+            if (this.HasPosition(exports.TooltipPosition.bottom) &&
+                validPositions & exports.TooltipPosition.bottom) {
+                return exports.TooltipPosition.bottom;
             }
-        };
-        /**
-         * Berechnet die Position des Tooltips von 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;
-                            return contentPosition.left + contentPosition.width;
-                        case exports.TooltipPosition.bottom:
-                            this.LeftPos = contentPosition.left + (childItem.clientWidth / 2) - (this.getToolTipWidth() / 2);
-                            return contentPosition.left + (childItem.clientWidth / 2) - (this.getToolTipWidth() / 2);
-                        case exports.TooltipPosition.left:
-                            this.LeftPos = contentPosition.left - this.getToolTipWidth();
-                            return contentPosition.left - this.getToolTipWidth();
-                    }
-                    return this.content.nativeElement.offsetTop;
+            // Get Auto Position or Default
+            if (this.IsAutoPosition()) {
+                // tslint:disable-next-line:no-bitwise
+                if (validPositions & exports.TooltipPosition.right) {
+                    return exports.TooltipPosition.right;
                 }
-                else {
-                    return this.content.nativeElement.offsetTop;
+                // 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.ref.nativeElement.offsetLeft;
-            }
-        };
-        /**
-         * Berechnet die Höhe des Tooltips
-         */
-        SacTooltipCommon.prototype.getToolTipHeight = function () {
-            if (this.tooltipcontainer) {
-                return this.tooltipcontainer.nativeElement.clientHeight;
-            }
-            else {
-                return 0;
+                return this.GetPosition();
             }
         };
         /**
-         * Berechnet die Breite die Tooltips
+         * Hide tooltip
          */
-        SacTooltipCommon.prototype.getToolTipWidth = function () {
-            if (this.tooltipcontainer) {
-                return this.tooltipcontainer.nativeElement.clientWidth;
-            }
-            else {
-                return 0;
-            }
+        SacTooltipCommon.prototype.HideTooltip = function () {
+            this._isTooltipVisible = false;
+            this.IsTooltipContentVisible = false;
         };
         /**
-         * Definiert ob der Tooltip im Markup vorhanden ist
+         * Defines whether the tooltip is present in the markup
          */
         SacTooltipCommon.prototype.IsTooltipVisible = function () {
             return this._isTooltipVisible;
         };
         /**
-         * Tooltip anzeigen
+         * Show tooltip
          */
         SacTooltipCommon.prototype.ShowTooltip = function () {
             var _this = this;
             this._isTooltipVisible = true;
+            this.cdRef.detectChanges();
             setTimeout(function () {
                 _this.getLeftPosition();
                 _this.getTopPosition();
@@ -8867,66 +9030,75 @@
             });
         };
         /**
-         * Tooltip ausblenden
+         * Calculates the height of the tooltip
          */
-        SacTooltipCommon.prototype.HideTooltip = function () {
-            this._isTooltipVisible = false;
-            this.IsTooltipContentVisible = false;
+        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;
+            }
         };
         /**
-         * Gibt die Position des Tooltips zurück
+         * Calculates the width of the tooltips
          */
-        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;
+        SacTooltipCommon.prototype.getToolTipWidth = function () {
+            if (this.tooltipcontainer) {
+                return this.tooltipcontainer.nativeElement.firstElementChild.clientWidth;
             }
-            // tslint:disable-next-line:no-bitwise
-            if (this.HasPosition(exports.TooltipPosition.left) && (validPositions & exports.TooltipPosition.left)) {
-                return exports.TooltipPosition.left;
+            else {
+                return 0;
             }
-            // tslint:disable-next-line:no-bitwise
-            if (this.HasPosition(exports.TooltipPosition.bottom) && (validPositions & exports.TooltipPosition.bottom)) {
-                return exports.TooltipPosition.bottom;
+        };
+        /**
+         * Detect Changes after view checked. Prevent ExpressionChangedAfterItHasBeenCheckedError error
+         */
+        SacTooltipCommon.prototype.ngAfterViewChecked = function () {
+            // Do nothing if is not visibile
+            if (!this._isTooltipVisible) {
+                return;
             }
-            // 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;
+            this.cdRef.detectChanges();
+        };
+        /**
+         * Detect UI Changes to Calculate Tooltip correct
+         */
+        SacTooltipCommon.prototype.ngDoCheck = function () {
+            // Do nothing if is not visibile
+            if (!this._isTooltipVisible) {
+                return;
             }
-            else {
-                return this.GetPosition();
+            this.getLeftPosition();
+            this.getTopPosition();
+        };
+        /**
+         * Event when the control is destroyed.
+         */
+        SacTooltipCommon.prototype.ngOnDestroy = function () {
+            // Unregister Event Listener
+            window.removeEventListener('scroll', this.onContentChange, true);
+            window.removeEventListener('resize', this.onContentChange, true);
+            if (this.tooltipcontainer !== undefined) {
+                document.body.removeChild(this.tooltipcontainer.nativeElement);
             }
         };
         /**
-         * Definiert ob AutoPosition aktiv ist
+         * Event when the control is initialized
          */
-        SacTooltipCommon.prototype.IsAutoPosition = function () {
-            var positions = this.position.split('|');
-            return positions.indexOf('auto') >= 0;
+        SacTooltipCommon.prototype.ngOnInit = function () {
+            // Register Event Listener
+            window.addEventListener('scroll', this.onContentChange, true);
+            window.addEventListener('resize', this.onContentChange, true);
+            if (this.tooltipcontainer !== undefined) {
+                document.body.appendChild(this.tooltipcontainer.nativeElement);
+            }
         };
+        // #endregion Protected Abstract Methods
+        // #region Private Methods
         /**
-         * Gibt die definierte Position für den Tooltip zurück
+         * Returns the defined position for the tooltip
          */
         SacTooltipCommon.prototype.GetPosition = function () {
             var positions = this.position.split('|');
@@ -8946,9 +9118,9 @@
             return exports.TooltipPosition.right;
         };
         /**
-         * Gibt zurück, ob die Position konfiguriert wurde
+         * Returns whether the position has been configured
          *
-         * @param position Position auf welche geprüft wird
+         * @param position Position to be checked
          */
         SacTooltipCommon.prototype.HasPosition = function (position) {
             var positions = this.position.split('|');
@@ -8961,13 +9133,21 @@
             if (position === exports.TooltipPosition.left && positions.indexOf('left') >= 0) {
                 return true;
             }
-            if (position === exports.TooltipPosition.bottom && positions.indexOf('bottom') >= 0) {
+            if (position === exports.TooltipPosition.bottom &&
+                positions.indexOf('bottom') >= 0) {
                 return true;
             }
             return false;
         };
         /**
-         * Prüft ob die Position gültig ist, resp. der Tooltip auf die Position platz hat
+         * 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
@@ -8976,15 +9156,15 @@
             }
             var allowedPositions = exports.TooltipPosition.none;
             var basePosition = this.content.nativeElement.firstElementChild.getBoundingClientRect();
-            var tooltipRect = this.tooltipcontainer.nativeElement.getBoundingClientRect();
-            var leftPosOk = basePosition.left - tooltipRect.width > 0;
-            var rightPosOk = basePosition.right + tooltipRect.width < window.innerWidth;
+            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;
+            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;
@@ -9003,6 +9183,100 @@
             }
             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;
+                }
+            }
+            else {
+                return this.ref.nativeElement.offsetLeft;
+            }
+        };
+        /**
+         * 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;
+                }
+            }
+            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;
+            }
+            var parentValue = this.getScrollTopParent(element.parentElement);
+            return parentValue + element.scrollTop;
+        };
         return SacTooltipCommon;
     }());
     SacTooltipCommon.decorators = [
@@ -9015,9 +9289,9 @@
     SacTooltipCommon.propDecorators = {
         position: [{ type: i0.Input }],
         tooltiptext: [{ type: i0.Input }],
-        inlinemode: [{ type: i0.Input }],
         content: [{ type: i0.ViewChild, args: ['container', { static: true },] }],
-        tooltip: [{ type: i0.ViewChild, args: ['tooltip', { static: true },] }]
+        inlinemode: [{ type: i0.Input }],
+        tooltip: [{ type: i0.ViewChild, args: ['tooltip', { static: false },] }]
     };
 
     // #region Classes
@@ -9089,7 +9363,6 @@
             };
             _this.validationKeyService = injector.get(SACVALIDATIONKEY_SERVICE, new SacDefaultValidationKeyService());
             _this.lngResourceService = injector.get(SACLOCALISATION_SERVICE, new SacDefaultLocalisationService(_this.validationKeyService));
-            _this.iconService = injector.get(SACICON_SERVICE, new SacDefaultIconService());
             _this.uploads = [];
             _this.options.allowedTypes = '*';
             _this.options.concurrency = 1;
@@ -11974,6 +12247,10 @@
     exports.SacAbstractIconService = SacAbstractIconService;
     exports.SacAbstractLanguageService = SacAbstractLanguageService;
     exports.SacAbstractLocalisationService = SacAbstractLocalisationService;
+    exports.SacBaseDateTimeControl = SacBaseDateTimeControl;
+    exports.SacBaseListControl = SacBaseListControl;
+    exports.SacBaseModelControl = SacBaseModelControl;
+    exports.SacBaseSelectControl = SacBaseSelectControl;
     exports.SacButtonCommon = SacButtonCommon;
     exports.SacCheckboxCommon = SacCheckboxCommon;
     exports.SacConfirmButton = SacConfirmButton;
@@ -12001,6 +12278,7 @@
     exports.SacGridCommon = SacGridCommon;
     exports.SacGridImageCommon = SacGridImageCommon;
     exports.SacInputAreaCommon = SacInputAreaCommon;
+    exports.SacInputBase = SacInputBase;
     exports.SacInputCommon = SacInputCommon;
     exports.SacInputCurrencyCommon = SacInputCurrencyCommon;
     exports.SacInputDecimalCommon = SacInputDecimalCommon;
@@ -12025,6 +12303,7 @@
     exports.SacTreeItemActionCommon = SacTreeItemActionCommon;
     exports.SacTreeViewChildCommon = SacTreeViewChildCommon;
     exports.SacTreeViewCommon = SacTreeViewCommon;
+    exports.SacUploadBase = SacUploadBase;
     exports.SacUploadFile = SacUploadFile;
     exports.SacUploadMultipleCommon = SacUploadMultipleCommon;
     exports.SacUploadSingleCommon = SacUploadSingleCommon;
@@ -12041,12 +12320,6 @@
     exports.mapToObject = mapToObject;
     exports.positionElements = positionElements;
     exports.positionService = positionService;
-    exports.ɵa = SacUploadBase;
-    exports.ɵb = SacBaseModelControl;
-    exports.ɵc = SacBaseSelectControl;
-    exports.ɵd = SacBaseListControl;
-    exports.ɵe = SacInputBase;
-    exports.ɵf = SacBaseDateTimeControl;
 
     Object.defineProperty(exports, '__esModule', { value: true });