@simpleangularcontrols/sac-common 10.0.0-rc.6 → 10.0.0-rc.8

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

@@ -705,6 +705,7 @@
     ];
     SacFormLayoutCommon.propDecorators = {
         componentHeight: [{ type: i0.Input }],
+        helptextmode: [{ type: i0.Input }],
         inlineError: [{ type: i0.Input }],
         isAdaptiveLabel: [{ type: i0.Input }],
         labelSizeLg: [{ type: i0.Input }],
@@ -775,6 +776,16 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(SacDefaultConfigurationService.prototype, "HelptextMode", {
+            /**
+             * @inheritdoc
+             */
+            get: function () {
+                return 'text';
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(SacDefaultConfigurationService.prototype, "InlineErrorEnabled", {
             /**
              * @inheritdoc
@@ -1306,6 +1317,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
@@ -2609,6 +2630,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
              */
@@ -2661,8 +2686,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;
             },
@@ -2720,6 +2749,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
@@ -2868,6 +2907,8 @@
             this.setComponentHeight();
             // set adaptive label property from formlayout directive
             this.setIsAdaptiveLabel();
+            // set method to display helptext
+            this.setHelpTextMode();
             this.OnClassInit();
         };
         /**
@@ -2972,6 +3013,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
          */
@@ -3059,6 +3114,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 }],
@@ -3080,16 +3137,15 @@
         __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 Public Methods
         }
+        // #endregion Properties
+        // #region Public Methods
         /**
          * Control hat keinen Validator
          */
@@ -3102,7 +3158,6 @@
         { type: i0.Directive }
     ];
     SacCheckboxCommon.propDecorators = {
-        tooltiptext: [{ type: i0.Input }],
         checkboxtext: [{ type: i0.Input }],
         stacked: [{ type: i0.Input }]
     };
@@ -3159,19 +3214,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) {
@@ -5018,10 +5081,6 @@
              * Macht das Input readonly
              */
             _this.readonly = false;
-            /**
-             * Text welcher als Tooltip angezeigt wird.
-             */
-            _this.tooltiptext = '';
             return _this;
             // #endregion Protected Methods
         }
@@ -5065,8 +5124,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 }]
     };
 
     /**
@@ -5621,29 +5679,41 @@
         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;
@@ -5651,44 +5721,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;
@@ -5697,19 +5764,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
          */
@@ -5717,43 +5794,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());
@@ -5765,8 +5842,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;
@@ -5778,15 +5855,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;
@@ -5810,14 +5887,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);
@@ -5853,27 +5930,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') {
@@ -5886,8 +5967,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) {
@@ -5900,18 +5983,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
@@ -5922,73 +6007,71 @@
             this.el = el;
             this.iconService = injector.get(SACICON_SERVICE, new SacDefaultIconService());
         }
-        //#endregion
-        //#region Interface Implementations
+        Object.defineProperty(SacGridColumnBaseCommon.prototype, "IconSortDown", {
+            // #endregion Constructors
+            // #region Public Getters And Setters
+            /**
+             * sort down icon for grid header
+             */
+            get: function () {
+                return this.iconService.GridComponentSortDown;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(SacGridColumnBaseCommon.prototype, "IconSortUp", {
+            /**
+             * sort up icon for grid header
+             */
+            get: function () {
+                return this.iconService.GridComponentSortUp;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        // #endregion Public Getters And Setters
+        // #region Public Methods
         /**
-         * lifecycle hook - OnInit. Wird aufgeruren sobald das Komponent initialisiert ist.
+         * Indicates the direction of sorting. The possible values are `none`,`asc`,`desc`
          */
-        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();
+        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';
             }
         };
         /**
-         * lifecycle hook - ngOnDestroy. Wird aufgeruren wenn das Component zerstört wird.
+         * Defines whether the element is a cell in the table.
          */
-        SacGridColumnBaseCommon.prototype.ngOnDestroy = function () {
-            if (this.IsHeader()) {
-                this.grid.UnregisterColumn();
-            }
+        SacGridColumnBaseCommon.prototype.IsBody = function () {
+            return this.type === 'body';
         };
-        //#endregion
-        //#region Type Handling
         /**
-         * die Methode ergibt boolean Wert, ob das Element Header ist.
+         * Defines whether the element is a cell in the footer of the table
          */
-        SacGridColumnBaseCommon.prototype.IsHeader = function () {
-            return this.type === 'header';
+        SacGridColumnBaseCommon.prototype.IsFooter = function () {
+            return this.type === 'footer';
         };
         /**
-         * die Methode ergibt boolean Wert, ob das Element Body ist.
+         * Defines whether the element is a cell in the table header
          */
-        SacGridColumnBaseCommon.prototype.IsBody = function () {
-            return this.type === 'body';
+        SacGridColumnBaseCommon.prototype.IsHeader = function () {
+            return this.type === 'header';
         };
         /**
-         * die Methode ergibt boolean Wert, ob das Element Footer ist.
+         * Defines whether this column is sorted.
          */
-        SacGridColumnBaseCommon.prototype.IsFooter = function () {
-            return this.type === 'footer';
+        SacGridColumnBaseCommon.prototype.IsSortedColumn = function () {
+            return this.grid.sortColumn === this.sortkey;
         };
-        Object.defineProperty(SacGridColumnBaseCommon.prototype, "IconSortUp", {
-            //#endregion
-            /**
-             * sort up icon for grid header
-             */
-            get: function () {
-                return this.iconService.GridComponentSortUp;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SacGridColumnBaseCommon.prototype, "IconSortDown", {
-            /**
-             * sort down icon for grid header
-             */
-            get: function () {
-                return this.iconService.GridComponentSortDown;
-            },
-            enumerable: false,
-            configurable: true
-        });
         /**
-         * 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 &&
@@ -5998,24 +6081,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;
@@ -6029,39 +6113,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);
@@ -6069,8 +6158,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;
@@ -6090,13 +6181,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
          */
@@ -6115,7 +6207,7 @@
     ]; };
 
     /**
-     * Basis Komponente für SacGridImage
+     * Basic component for SacGridImage
      */
     var SacGridImageCommon = /** @class */ (function () {
         function SacGridImageCommon() {
@@ -6130,67 +6222,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());
@@ -6203,7 +6293,7 @@
             // #endregion Constructors
             // #region Public Getters And Setters
             /**
-             * Property für Pager Data
+             * Property for Pager Data
              */
             set: function (p) {
                 if (p != null) {
@@ -6218,7 +6308,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);
@@ -6228,7 +6318,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, {
@@ -6241,7 +6331,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); });
@@ -6252,8 +6342,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) {
@@ -6261,15 +6351,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) {
@@ -6277,19 +6367,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) {
@@ -6297,7 +6387,7 @@
             }
         };
         /**
-         * Paging auf nächste Seite
+         * Paging to next page
          */
         SacPagingCommon.prototype.nextPage = function () {
             if (this.activePageIndex !== this.lastPageIndex) {
@@ -6305,7 +6395,7 @@
             }
         };
         /**
-         * Paging eine Seite zurück
+         * Paging one page back
          */
         SacPagingCommon.prototype.previousPage = function () {
             if (this.activePageIndex !== this.firstPageIndex) {
@@ -6315,7 +6405,7 @@
         // #endregion Public Methods
         // #region Protected Methods
         /**
-         * Erzeugt die Pager Daten
+         * Generates the pager data
          */
         SacPagingCommon.prototype.createPager = function () {
             this.paginators = [];
@@ -6342,8 +6432,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;
@@ -6357,8 +6447,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;
@@ -6372,7 +6462,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);
@@ -6582,6 +6672,7 @@
         function SacDateCommon(formlayout, injector, elementRef) {
             var _this = _super.call(this, formlayout, injector, elementRef) || this;
             _this.elementRef = elementRef;
+            // #region Properties
             /**
              * Format des Datums
              */
@@ -6643,7 +6734,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", {
@@ -7271,6 +7361,7 @@
         function SacDateTimeCommon(formlayout, injector, elementRef) {
             var _this = _super.call(this, formlayout, injector, elementRef) || this;
             _this.elementRef = elementRef;
+            // #region Properties
             /**
              * Format des Datums
              */
@@ -7347,7 +7438,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", {
@@ -7508,6 +7598,7 @@
         function SacTimeCommon(formlayout, injector, elementRef) {
             var _this = _super.call(this, formlayout, injector, elementRef) || this;
             _this.elementRef = elementRef;
+            // #region Properties
             /**
              * Format des Datums
              */
@@ -7564,7 +7655,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", {
@@ -7719,11 +7809,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", {
             /**
@@ -7732,6 +7819,8 @@
             get: function () {
                 return this._isrequired;
             },
+            // #endregion Properties
+            // #region Public Getters And Setters
             /**
              * Definiert den Container als Required Form Item
              */
@@ -7741,6 +7830,8 @@
             enumerable: false,
             configurable: true
         });
+        // #endregion Public Getters And Setters
+        // #region Public Methods
         /**
          * Validierung des Controls
          *
@@ -7758,7 +7849,6 @@
         { type: i0.Directive }
     ];
     SacStaticFormContainerCommon.propDecorators = {
-        tooltiptext: [{ type: i0.Input }],
         isrequired: [{ type: i0.Input }]
     };
 
@@ -8671,15 +8761,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
@@ -8689,50 +8781,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
+             * method if content has changed and proportions need to be reset in the UI.
              */
-            this.TopPos = 0;
-            /**
-             * Position des Tooltips links
-             */
-            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);
@@ -8742,7 +8840,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) {
@@ -8755,128 +8853,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();
@@ -8884,66 +8938,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('|');
@@ -8963,9 +9026,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('|');
@@ -8978,13 +9041,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
@@ -8993,15 +9064,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;
@@ -9020,6 +9091,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 = [
@@ -9032,9 +9197,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
@@ -9106,7 +9271,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;