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

package/fesm2015/simpleangularcontrols-sac-common.js

@@ -2,7 +2,7 @@ import { EventEmitter, Directive, Input, Output, ɵɵdefineInjectable, Injectabl
 import { NgControl, FormControlName, FormGroupDirective, Validators, FormGroup, NgForm } from '@angular/forms';
 import { Observable, of } from 'rxjs';
 import { HttpClient } from '@angular/common/http';
-import moment_ from 'moment';
+import moment_, { ISO_8601 } from 'moment';
 import { MaskedRange } from 'imask';
 import { UploadxService } from 'ngx-uploadx';
 import { DOCUMENT } from '@angular/common';
@@ -172,6 +172,10 @@ var ControlHeight;
 class SacFormLayoutCommon {
     constructor() {
         // #region Properties
+        /**
+         * Defines the default display for a checkbox. You can choose between a checkbox and a switch. If no style is defined, the global style or the style on the control is used.
+         */
+        this.checkboxstyle = null;
         /**
          * Defines the standard height of the components
          */
@@ -179,7 +183,11 @@ class SacFormLayoutCommon {
         /**
          * 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
          */
@@ -216,15 +224,18 @@ class SacFormLayoutCommon {
      * Returns whether the inline error messages for the form are active.
      */
     get IsInlineErrorEnabled() {
-        return this.inlineError !== false;
+        return this.inlineError;
     }
 }
 SacFormLayoutCommon.decorators = [
     { type: Directive }
 ];
 SacFormLayoutCommon.propDecorators = {
+    checkboxstyle: [{ type: Input }],
     componentHeight: [{ type: Input }],
+    helptextmode: [{ type: Input }],
     inlineError: [{ type: Input }],
+    inputsearchiconmode: [{ type: Input }],
     isAdaptiveLabel: [{ type: Input }],
     labelSizeLg: [{ type: Input }],
     labelSizeMd: [{ type: Input }],
@@ -249,6 +260,12 @@ SacAbstractConfigurationService.decorators = [
  * */
 class SacDefaultConfigurationService extends SacAbstractConfigurationService {
     // #region Public Getters And Setters
+    /**
+     * @inheritdoc
+     */
+    get CheckboxStyle() {
+        return 'checkbox';
+    }
     /**
      * @inheritdoc
      */
@@ -261,6 +278,24 @@ class SacDefaultConfigurationService extends SacAbstractConfigurationService {
     get CurrencyText() {
         return 'CHF';
     }
+    /**
+     * @inheritdoc
+     */
+    get HelptextMode() {
+        return 'text';
+    }
+    /**
+     * @inheritdoc
+     */
+    get InlineErrorEnabled() {
+        return true;
+    }
+    /**
+     * @inheritdoc
+     */
+    get InputSearchIconMode() {
+        return 'text';
+    }
     /**
      * @inheritdoc
      */
@@ -685,6 +720,12 @@ class SacDefaultIconService extends SacAbstractIconService {
     get DateTimeSelectorComponentMonthPrevIcon() {
         return 'fa fa-chevron-left';
     }
+    /**
+     * @inheritdoc
+     */
+    get GenericHelptextIcon() {
+        return 'fa fa-info-circle';
+    }
     /**
      * @inheritdoc
      */
@@ -697,6 +738,12 @@ class SacDefaultIconService extends SacAbstractIconService {
     get GridComponentSortUp() {
         return 'fa fa-caret-up';
     }
+    /**
+     * @inheritdoc
+     */
+    get InputSearchButtonIcon() {
+        return 'fas fa-search';
+    }
     /**
      * @inheritdoc
      */
@@ -1491,11 +1538,12 @@ function mapToObject(map) {
     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, '');
     }
@@ -1505,7 +1553,8 @@ function createGuid() {
             return v.toString(16);
         });
     }
-}
+}
+// #endregion Functions
 
 /**
  * Abstract Klasse für SacBaseModelControl. Implements ControlValueAccessor, Validator, OnInit
@@ -1558,6 +1607,10 @@ class SacBaseModelControl {
          * 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
          */
@@ -1610,6 +1663,7 @@ class SacBaseModelControl {
         this.validationKeyService = injector.get(SACVALIDATIONKEY_SERVICE, new SacDefaultValidationKeyService());
         this.lngResourceService = injector.get(SACLOCALISATION_SERVICE, new SacDefaultLocalisationService(this.validationKeyService));
         this.configurationService = injector.get(SACCONFIGURATION_SERVICE, new SacDefaultConfigurationService());
+        this.iconService = injector.get(SACICON_SERVICE, new SacDefaultIconService());
     }
     // #endregion Constructors
     // #region Public Getters And Setters
@@ -1642,6 +1696,12 @@ class SacBaseModelControl {
         this._value = this.ConvertInputValue(v);
         this.propagateChange(this._value);
     }
+    /**
+     * Get Icon for Helptext Tooltip
+     */
+    get HelptextTooltipIcon() {
+        return this.iconService.GenericHelptextIcon;
+    }
     /**
      * Methode ergibt Boolean Wert für dirty
      */
@@ -1651,6 +1711,9 @@ class SacBaseModelControl {
         }
         return this._dirty;
     }
+    /**
+     * Show error messages inline
+     */
     get inlineerrorenabled() {
         return this._inlineerrorenabled;
     }
@@ -1672,13 +1735,18 @@ class SacBaseModelControl {
      * Returns whether the inline error messages are active for this control.
      */
     get isinlineerrorenabled() {
-        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;
     }
     /**
      * Definiert den Label Text
@@ -1776,6 +1844,8 @@ class SacBaseModelControl {
         this.setComponentHeight();
         // set adaptive label property from formlayout directive
         this.setIsAdaptiveLabel();
+        // set method to display helptext
+        this.setHelpTextMode();
         this.OnClassInit();
     }
     /**
@@ -1880,6 +1950,20 @@ class SacBaseModelControl {
             }
         }
     }
+    /**
+     * Set mode for helptext. Can be tooltip or text
+     */
+    setHelpTextMode() {
+        var _a;
+        if (!this.helptextmode) {
+            if ((_a = this.formlayout) === null || _a === void 0 ? void 0 : _a.helptextmode) {
+                this.helptextmode = this.formlayout.helptextmode;
+            }
+            else {
+                this.helptextmode = this.configurationService.HelptextMode;
+            }
+        }
+    }
     /**
      * Set adaptive label property from parent layout control
      */
@@ -1966,6 +2050,8 @@ SacBaseModelControl.propDecorators = {
     componentHeight: [{ type: Input }],
     disabled: [{ type: Input }],
     disablelabel: [{ type: Input }],
+    helptext: [{ type: Input }],
+    helptextmode: [{ type: Input }],
     inlineError: [{ type: Input }],
     isAdaptiveLabel: [{ type: Input }],
     labelSizeLg: [{ type: Input }],
@@ -1985,15 +2071,22 @@ SacBaseModelControl.propDecorators = {
  */
 class SacCheckboxCommon extends SacBaseModelControl {
     constructor() {
+        // #region Properties
         super(...arguments);
-        /**
-         * 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;
+        // #endregion Private Methods
+    }
+    // #endregion Properties
+    // #region Public Methods
+    /**
+     * Init Event
+     */
+    ngOnInit() {
+        super.ngOnInit();
+        this.setCheckboxStyle();
     }
     /**
      * Control hat keinen Validator
@@ -2001,12 +2094,28 @@ class SacCheckboxCommon extends SacBaseModelControl {
     validateData(c) {
         return null;
     }
+    // #endregion Public Methods
+    // #region Private Methods
+    /**
+     * Adopts the default display if no display has been defined on the component.
+     */
+    setCheckboxStyle() {
+        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;
+            }
+        }
+    }
 }
 SacCheckboxCommon.decorators = [
     { type: Directive }
 ];
 SacCheckboxCommon.propDecorators = {
-    tooltiptext: [{ type: Input }],
+    checkboxstyle: [{ type: Input }],
     checkboxtext: [{ type: Input }],
     stacked: [{ type: Input }]
 };
@@ -2059,19 +2168,27 @@ function emailValidator(validationMessage, validationMessageSummary) {
     };
 }
 
+// #region Variables
 /**
  * Moment
  */
 const moment = moment_;
+// #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, ISO_8601, true).isValid()) {
+        return true;
+    }
     let date = moment(value, [format], true);
     date = date.utc();
     return date.isValid();
-}
+}
+// #endregion Functions
 
 function isValidDateValidator(validationMessage, validationMessageSummary) {
     return (control) => {
@@ -3781,10 +3898,6 @@ class SacInputBase extends SacBaseModelControl {
          * Macht das Input readonly
          */
         this.readonly = false;
-        /**
-         * Text welcher als Tooltip angezeigt wird.
-         */
-        this.tooltiptext = '';
         // #endregion Protected Methods
     }
     // #endregion Properties
@@ -3826,8 +3939,7 @@ SacInputBase.propDecorators = {
     isrequired: [{ type: Input }],
     placeholder: [{ type: Input }],
     readonly: [{ type: Input }],
-    regexvalidation: [{ type: Input }],
-    tooltiptext: [{ type: Input }]
+    regexvalidation: [{ type: Input }]
 };
 
 /**
@@ -4330,19 +4442,33 @@ SacInputPasswordCommon.propDecorators = {
  */
 class SacInputSearchCommon extends SacInputCommon {
     constructor() {
+        // #region Properties
         super(...arguments);
-        /**
-         * 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 EventEmitter();
+        // #endregion Private Methods
+    }
+    // #endregion Properties
+    // #region Public Methods
+    /**
+     * Init Event
+     */
+    ngOnInit() {
+        super.ngOnInit();
+        this.setButtonMode();
+        if (!this.iconname) {
+            this.iconname = this.iconService.InputSearchButtonIcon;
+        }
     }
     /**
      * Methode sendet den Wert des Inputs durch das Event
@@ -4350,103 +4476,139 @@ class SacInputSearchCommon extends SacInputCommon {
     searchClick() {
         this.clicked.emit(this.value);
     }
+    // #endregion Public Methods
+    // #region Private Methods
+    setButtonMode() {
+        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;
+            }
+        }
+    }
 }
 SacInputSearchCommon.decorators = [
     { type: Directive }
 ];
 SacInputSearchCommon.propDecorators = {
-    iconname: [{ type: Input }],
+    buttonmode: [{ type: Input }],
     buttontext: [{ type: Input }],
+    iconname: [{ type: Input }],
     clicked: [{ type: Output }]
 };
 
+// #region Classes
+/**
+ * GridResponse class
+ */
+class GridResponse {
+}
 /**
- * Model für Pager Settings
+ * Model for pager settings
  */
 class PagerData {
+    // #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
      */
     constructor(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;
     }
 }
 /**
- * Model wenn Seite geändert werden soll
+ * Model if page is to be changed
  */
 class PagerRequest {
+    // #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
      */
     constructor(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;
     }
 }
 /**
- * GridResponse-Klasse
- */
-class GridResponse {
-}
-/**
- * Model für Sortierung
+ * Model for sorting
  */
 class SortDescriptor {
+    // #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
      */
     constructor(sortcolumn, sortorder) {
         this.SortColumn = sortcolumn;
         this.SortOrder = sortorder;
     }
 }
+// #endregion Classes
+// #region Enums
 /**
- * Enum für Sortierung
+ * Enum for sorting
  */
 var SortOrder;
 (function (SortOrder) {
+    /**
+     * No sorting
+     */
     SortOrder[SortOrder["None"] = 0] = "None";
+    /**
+     * Ascending
+     */
     SortOrder[SortOrder["Ascending"] = 1] = "Ascending";
+    /**
+     * Descending
+     */
     SortOrder[SortOrder["Descending"] = 2] = "Descending";
-})(SortOrder || (SortOrder = {}));
+})(SortOrder || (SortOrder = {}));
+// #endregion Enums
 
 /**
- * Basis Komponente für SacGrid
+ * Basic component for SacGrid
  */
 class SacGridCommon {
     // #endregion Properties
     // #region Constructors
     /**
-     * Konstruktor
+     * Constructor
      * @param cd Change Detection Service
      * @param injector DI Injector
      */
@@ -4454,43 +4616,43 @@ class SacGridCommon {
         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 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 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 = SortOrder.None;
         this.validationKeyService = injector.get(SACVALIDATIONKEY_SERVICE, new SacDefaultValidationKeyService());
@@ -4501,8 +4663,8 @@ class SacGridCommon {
     // #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 sortdata(sortDescription) {
         this.sortColumn = sortDescription.SortColumn;
@@ -4511,15 +4673,15 @@ class SacGridCommon {
     // #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
      */
     RegisterColumn() {
         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.
      */
     SortBy(command) {
         let direction;
@@ -4543,14 +4705,14 @@ class SacGridCommon {
         this.sorting.emit(result);
     }
     /**
-     * Die Methode verringert die Column-Stücke um eins
+     * The method reduces the column elements by one
      */
     UnregisterColumn() {
         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)
      */
     pageChange(newStartIndex) {
         this.paging.emit(newStartIndex);
@@ -4585,23 +4747,27 @@ SacGridCommon.propDecorators = {
  */
 class SacGridButtonCommon {
     constructor() {
+        // #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 EventEmitter();
+        // #endregion Public Methods
     }
+    // #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 isdisabled(v) {
         if (v === null || v === undefined || typeof v === 'boolean') {
@@ -4614,8 +4780,10 @@ class SacGridButtonCommon {
     get isdisabled() {
         return this._isdisabledvalue;
     }
+    // #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.
      */
     callaction() {
         if (!this._isdisabledvalue) {
@@ -4627,18 +4795,20 @@ SacGridButtonCommon.decorators = [
     { type: Directive }
 ];
 SacGridButtonCommon.propDecorators = {
-    iconstyle: [{ type: Input }],
     icon: [{ type: Input }],
-    isdisabled: [{ type: Input }],
-    clicked: [{ type: Output }]
+    iconstyle: [{ type: Input }],
+    clicked: [{ type: Output }],
+    isdisabled: [{ type: Input }]
 };
 
 /**
- * Base Komponente für GridColumn
+ * Base component for GridColumn
  */
 class SacGridColumnBaseCommon {
+    // #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
@@ -4647,67 +4817,75 @@ class SacGridColumnBaseCommon {
         this.grid = grid;
         this.injector = injector;
         this.el = el;
+        /**
+         * Click on Column Element
+         */
+        this.rowclicked = new EventEmitter();
         this.iconService = injector.get(SACICON_SERVICE, new SacDefaultIconService());
     }
-    //#endregion
-    //#region Interface Implementations
+    // #endregion Constructors
+    // #region Public Getters And Setters
     /**
-     * lifecycle hook - OnInit. Wird aufgeruren sobald das Komponent initialisiert ist.
+     * sort down icon for grid header
      */
-    ngOnInit() {
-        const rootElement = this.el.nativeElement;
-        const parentElement = rootElement.parentElement;
-        while (rootElement.firstChild) {
-            parentElement.insertBefore(rootElement.firstChild, rootElement);
-        }
-        parentElement.removeChild(rootElement);
-        if (this.IsHeader()) {
-            this.grid.RegisterColumn();
-        }
+    get IconSortDown() {
+        return this.iconService.GridComponentSortDown;
     }
     /**
-     * lifecycle hook - ngOnDestroy. Wird aufgeruren wenn das Component zerstört wird.
+     * sort up icon for grid header
      */
-    ngOnDestroy() {
-        if (this.IsHeader()) {
-            this.grid.UnregisterColumn();
-        }
+    get IconSortUp() {
+        return this.iconService.GridComponentSortUp;
     }
-    //#endregion
-    //#region Type Handling
+    // #endregion Public Getters And Setters
+    // #region Public Methods
     /**
-     * die Methode ergibt boolean Wert, ob das Element Header ist.
+     * Method when Colument element is clicked. Triggers a RowClicked
      */
-    IsHeader() {
-        return this.type === 'header';
+    ColumnClick() {
+        this.rowclicked.emit();
     }
     /**
-     * die Methode ergibt boolean Wert, ob das Element Body ist.
+     * Indicates the direction of sorting. The possible values are `none`,`asc`,`desc`
+     */
+    GetSortDirection() {
+        switch (this.grid.sortDirection) {
+            case SortOrder.None:
+                return 'none';
+            case SortOrder.Ascending:
+                return 'asc';
+            case SortOrder.Descending:
+                return 'desc';
+            default:
+                return 'none';
+        }
+    }
+    /**
+     * Defines whether the element is a cell in the table.
      */
     IsBody() {
         return this.type === 'body';
     }
     /**
-     * die Methode ergibt boolean Wert, ob das Element Footer ist.
+     * Defines whether the element is a cell in the footer of the table
      */
     IsFooter() {
         return this.type === 'footer';
     }
-    //#endregion
     /**
-     * sort up icon for grid header
+     * Defines whether the element is a cell in the table header
      */
-    get IconSortUp() {
-        return this.iconService.GridComponentSortUp;
+    IsHeader() {
+        return this.type === 'header';
     }
     /**
-     * sort down icon for grid header
+     * Defines whether this column is sorted.
      */
-    get IconSortDown() {
-        return this.iconService.GridComponentSortDown;
+    IsSortedColumn() {
+        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.
      */
     SortByColumn() {
         if (this.sortkey !== undefined &&
@@ -4717,27 +4895,28 @@ class SacGridColumnBaseCommon {
         }
     }
     /**
-     * die Methode ergibt boolean Wert und definiert, ob das Column für Sortierung aktiviert ist, gemäß eingegebene sortKey
+     * Called when the component is destroyed.
      */
-    IsSortedColumn() {
-        return this.grid.sortColumn === this.sortkey;
+    ngOnDestroy() {
+        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.
      */
-    GetSortDirection() {
-        switch (this.grid.sortDirection) {
-            case SortOrder.None:
-                return 'none';
-            case SortOrder.Ascending:
-                return 'asc';
-            case SortOrder.Descending:
-                return 'desc';
-            default:
-                return 'none';
+    ngOnInit() {
+        const rootElement = this.el.nativeElement;
+        const parentElement = rootElement.parentElement;
+        while (rootElement.firstChild) {
+            parentElement.insertBefore(rootElement.firstChild, rootElement);
         }
-    }
-}
+        parentElement.removeChild(rootElement);
+        if (this.IsHeader()) {
+            this.grid.RegisterColumn();
+        }
+    }
+}
 SacGridColumnBaseCommon.decorators = [
     { type: Directive }
 ];
@@ -4747,42 +4926,50 @@ SacGridColumnBaseCommon.ctorParameters = () => [
     { type: ElementRef }
 ];
 SacGridColumnBaseCommon.propDecorators = {
+    header: [{ type: Input }],
     name: [{ type: Input }],
+    sortkey: [{ type: Input }],
+    type: [{ type: Input }],
     value: [{ type: Input }],
-    header: [{ type: Input }],
     width: [{ type: Input }],
-    type: [{ type: Input }],
-    sortkey: [{ type: Input }]
+    rowclicked: [{ type: Output }]
 };
 
 /**
- * Komponente für SacGridColumnCommon. Extends SacGridColumnBaseCommon
+ * Component for SacGridColumnCommon. Extends SacGridColumnBaseCommon
  */
 class SacGridColumnCommon extends SacGridColumnBaseCommon {
+    // #endregion Properties
+    // #region Constructors
     /**
-     * Konstruktor
+     * Constructor
      */
     constructor(grid, injector, el) {
         super(grid, injector, el);
+        // #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;
     }
+    // #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 ellipsis(v) {
         this._ellipsis = convertToBoolean(v);
     }
     /**
-     * Getter für das private property _ellipsis. Ergibt das boolean Wert des Property
+     * Getter for the ellipsis property. Always returns a boolean type.
      */
     get ellipsis() {
         return this._ellipsis;
     }
+    // #endregion Public Getters And Setters
+    // #region Public Methods
     /**
-     * Die Methode returns das Wert des Property _ellipsis
+     * Checks whether ellipsis is set
      */
     IsEllipsis() {
         return this._ellipsis;
@@ -4801,12 +4988,13 @@ SacGridColumnCommon.propDecorators = {
 };
 
 /**
- * Komponente für SacGridColumnActionCommon. Extends SacGridColumnBaseCommon
+ * Component for SacGridColumnActionCommon. Extends SacGridColumnBaseCommon
  */
 class SacGridColumnActionCommon extends SacGridColumnBaseCommon {
+    // #region Constructors
     /**
-     * Konstruktor
-     * @param el Element Referenz
+     * Constructor
+     * @param el Element reference
      * @param injector di inector to resolve icon service
      * @param grid SacGridCommon
      */
@@ -4824,7 +5012,7 @@ SacGridColumnActionCommon.ctorParameters = () => [
 ];
 
 /**
- * Basis Komponente für SacGridImage
+ * Basic component for SacGridImage
  */
 class SacGridImageCommon {
 }
@@ -4836,67 +5024,65 @@ SacGridImageCommon.propDecorators = {
 };
 
 /**
- * Basiskomponente für Paging
+ * Basic component for paging
  */
 class SacPagingCommon {
     // #endregion Properties
     // #region Constructors
     /**
-     * Konstruktor
-     * Inject des Formulars
+     * Constructor
      * @parent SacFormCommon
      * @injector Injector
      */
     constructor(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 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());
@@ -4908,7 +5094,7 @@ class SacPagingCommon {
     // #endregion Constructors
     // #region Public Getters And Setters
     /**
-     * Property für Pager Data
+     * Property for Pager Data
      */
     set pagerdata(p) {
         if (p != null) {
@@ -4919,13 +5105,13 @@ class SacPagingCommon {
         this.createPager();
     }
     /**
-     * Property mit Text für Total Einträge in Seite
+     * Property with text for total entries in page
      */
     get PageSizeText() {
         return this.lngResourceService.GetString(this.pagesizetext);
     }
     /**
-     * Text mit Aktueller Seite und Total Seiten
+     * Text with current page and total pages
      */
     get PagingText() {
         return this.lngResourceService.GetString(this.pagingtext, {
@@ -4934,7 +5120,7 @@ class SacPagingCommon {
         });
     }
     /**
-     * Gibt die Page Sizes als Number Array zurück
+     * Returns the page sizes as a number array
      */
     get getPageSizes() {
         return this.pagesizes.split('|').map((itm) => Number(itm));
@@ -4942,8 +5128,8 @@ class SacPagingCommon {
     // #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.
      */
     changePage(newPageIndex) {
         if (this.activePageIndex !== newPageIndex) {
@@ -4951,15 +5137,15 @@ class SacPagingCommon {
         }
     }
     /**
-     * Ä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
      */
     changePageSize(newSize) {
         const pagerData = new PagerRequest(newSize, this.activePageIndex);
         this.paging.emit(pagerData);
     }
     /**
-     * Paging auf 1. Seite
+     *Switch to 1st page
      */
     firstPage() {
         if (this.activePageIndex !== this.firstPageIndex) {
@@ -4967,19 +5153,19 @@ class SacPagingCommon {
         }
     }
     /**
-     * Gibt die aktuelle Seitenzahl zurück
+     * Returns the current page number
      */
     getCurrentPageNumber() {
         return this.activePageIndex + 1;
     }
     /**
-     * Gibt die totale Anzahl Seiten zurück
+     * Returns the total number of pages
      */
     getTotalPageNumber() {
         return this.lastPageIndex + 1;
     }
     /**
-     * Paging auf letzter Seite
+     * Paging on last page
      */
     lastPage() {
         if (this.activePageIndex !== this.lastPageIndex) {
@@ -4987,7 +5173,7 @@ class SacPagingCommon {
         }
     }
     /**
-     * Paging auf nächste Seite
+     * Paging to next page
      */
     nextPage() {
         if (this.activePageIndex !== this.lastPageIndex) {
@@ -4995,7 +5181,7 @@ class SacPagingCommon {
         }
     }
     /**
-     * Paging eine Seite zurück
+     * Paging one page back
      */
     previousPage() {
         if (this.activePageIndex !== this.firstPageIndex) {
@@ -5005,7 +5191,7 @@ class SacPagingCommon {
     // #endregion Public Methods
     // #region Protected Methods
     /**
-     * Erzeugt die Pager Daten
+     * Generates the pager data
      */
     createPager() {
         this.paginators = [];
@@ -5032,8 +5218,8 @@ class SacPagingCommon {
         }
     }
     /**
-     * Gibt den letzten Seitenindex zurück.
-     * @param totalPageCount Total Anzahl Seiten
+     * Returns the last page index.
+     * @param totalPageCount Total number of pages
      */
     getEndPageIndex(totalPageCount) {
         let endingPageToDisplay = this.activePageIndex + 2;
@@ -5047,8 +5233,8 @@ class SacPagingCommon {
         return endingPageToDisplay;
     }
     /**
-     * Gibt den Start Index zurück
-     * @param totalPageCount Total Anzahl Seiten
+     * Returns the start index
+     * @param totalPageCount Total number of pages
      */
     getStartPageIndex(totalPageCount) {
         let startingPageToDisplay = 0;
@@ -5062,7 +5248,7 @@ class SacPagingCommon {
         return startingPageToDisplay;
     }
     /**
-     * Methode löst den Event aus, dass ein Paging stattgefunden hat
+     * method triggers the event that paging has taken place
      */
     paged(newPageIndex) {
         const pagerData = new PagerRequest(this.pageSize, newPageIndex);
@@ -5263,6 +5449,7 @@ class SacDateCommon extends SacBaseDateTimeControl {
     constructor(formlayout, injector, elementRef) {
         super(formlayout, injector, elementRef);
         this.elementRef = elementRef;
+        // #region Properties
         /**
          * Format des Datums
          */
@@ -5324,7 +5511,6 @@ class SacDateCommon extends SacBaseDateTimeControl {
          * Definiert ob der Date Selector angezeigt wird
          */
         this._showselector = false;
-        this.iconService = injector.get(SACICON_SERVICE, new SacDefaultIconService());
     }
     // #endregion Constructors
     // #region Public Getters And Setters
@@ -5923,6 +6109,7 @@ class SacDateTimeCommon extends SacBaseDateTimeControl {
     constructor(formlayout, injector, elementRef) {
         super(formlayout, injector, elementRef);
         this.elementRef = elementRef;
+        // #region Properties
         /**
          * Format des Datums
          */
@@ -5999,7 +6186,6 @@ class SacDateTimeCommon extends SacBaseDateTimeControl {
          * Definiert ob der Date Selector angezeigt wird
          */
         this._showselector = false;
-        this.iconService = injector.get(SACICON_SERVICE, new SacDefaultIconService());
     }
     // #endregion Constructors
     // #region Public Getters And Setters
@@ -6145,6 +6331,7 @@ class SacTimeCommon extends SacBaseDateTimeControl {
     constructor(formlayout, injector, elementRef) {
         super(formlayout, injector, elementRef);
         this.elementRef = elementRef;
+        // #region Properties
         /**
          * Format des Datums
          */
@@ -6201,7 +6388,6 @@ class SacTimeCommon extends SacBaseDateTimeControl {
          * Definiert ob der Date Selector angezeigt wird
          */
         this._showselector = false;
-        this.iconService = injector.get(SACICON_SERVICE, new SacDefaultIconService());
     }
     // #endregion Constructors
     // #region Public Getters And Setters
@@ -6336,28 +6522,30 @@ SacTimeCommon.propDecorators = {
  **/
 class SacStaticFormContainerCommon extends SacBaseModelControl {
     constructor() {
+        // #region Properties
         super(...arguments);
         /**
          * Definiert den Container als Required Form Item
          */
         this._isrequired = false;
-        /**
-         * Text welcher als Tooltip angezeigt wird.
-         */
-        this.tooltiptext = '';
+        // #endregion Public Methods
     }
+    // #endregion Properties
+    // #region Public Getters And Setters
     /**
      * Definiert den Container als Required Form Item
      */
-    get isrequired() {
-        return this._isrequired;
+    set isrequired(v) {
+        this._isrequired = convertToBoolean(v);
     }
     /**
      * Definiert den Container als Required Form Item
      */
-    set isrequired(v) {
-        this._isrequired = convertToBoolean(v);
+    get isrequired() {
+        return this._isrequired;
     }
+    // #endregion Public Getters And Setters
+    // #region Public Methods
     /**
      * Validierung des Controls
      *
@@ -6374,7 +6562,6 @@ SacStaticFormContainerCommon.decorators = [
     { type: Directive }
 ];
 SacStaticFormContainerCommon.propDecorators = {
-    tooltiptext: [{ type: Input }],
     isrequired: [{ type: Input }]
 };
 
@@ -7230,15 +7417,17 @@ var TooltipPosition;
 /**
  * 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.
  *
  */
 class SacTooltipCommon {
+    // #endregion Properties
+    // #region Constructors
     /**
      * Konstruktor
      * @param ref Element Referenz
@@ -7247,55 +7436,55 @@ class SacTooltipCommon {
         this.cdRef = cdRef;
         this.ref = ref;
         /**
-         * Property für Enum in Angular HTML Template
-         */
-        this.TooltipPosition = 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 = () => {
+            // Do nothing if is not visible
+            if (!this._isTooltipVisible) {
+                return;
+            }
+            setTimeout(() => {
+                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 = () => {
-            setTimeout(() => {
-                this.getLeftPosition();
-                this.getTopPosition();
-            });
-        };
+        this.LeftPos = 0;
+        /**
+         * Property for enum in Angular HTML template
+         */
+        this.TooltipPosition = TooltipPosition;
+        /**
+         * Position of the tooltip at the top
+         */
+        this.TopPos = 0;
     }
+    // #endregion Constructors
+    // #region Public Getters And Setters
     /**
-     * Setter für Inline Mode für Tooltip
+     * Setter for inline mode for tooltip
      */
     set inlinemode(value) {
         this._inlinemode = convertToBoolean(value);
     }
     /**
-     * Getter für Inline Mode für Tooltip
-     */
-    get inlinemode() {
-        return this._inlinemode;
-    }
-    /**
-     * 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 tooltip(content) {
         if (content !== undefined) {
@@ -7306,158 +7495,39 @@ class SacTooltipCommon {
         this.cdRef.detectChanges();
     }
     /**
-     * Ervent wenn das Control initialisert wird
-     */
-    ngOnInit() {
-        // 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);
-        }
-    }
-    /**
-     * Event wenn das Control zerstört wird.
-     */
-    ngOnDestroy() {
-        // 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);
-        }
-    }
-    /**
-     * Berechnet die Position des Tooltips von Oben
-     */
-    getTopPosition() {
-        if (this.content !== null && this.content !== undefined) {
-            const item = this.content.nativeElement;
-            if (item.children.length >= 1) {
-                const childItem = item.firstElementChild;
-                const contentPosition = childItem.getBoundingClientRect();
-                switch (this.GetTooltipPosition()) {
-                    case TooltipPosition.top:
-                        this.TopPos = contentPosition.top - this.getToolTipHeight();
-                        return contentPosition.top - this.getToolTipHeight();
-                    case TooltipPosition.right:
-                        this.TopPos = contentPosition.top + (contentPosition.height / 2) - (this.getToolTipHeight() / 2);
-                        return contentPosition.top + (contentPosition.height / 2) - (this.getToolTipHeight() / 2);
-                    case TooltipPosition.bottom:
-                        this.TopPos = contentPosition.top + contentPosition.height;
-                        return contentPosition.top + contentPosition.height;
-                    case 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;
-            }
-        }
-        else {
-            return this.ref.nativeElement.offsetTop;
-        }
-    }
-    /**
-     * Berechnet die Position des Tooltips von Links
-     */
-    getLeftPosition() {
-        if (this.content !== null && this.content !== undefined) {
-            const item = this.content.nativeElement;
-            if (item.children.length >= 1) {
-                const childItem = item.firstElementChild;
-                const contentPosition = childItem.getBoundingClientRect();
-                switch (this.GetTooltipPosition()) {
-                    case TooltipPosition.top:
-                        this.LeftPos = contentPosition.left + (contentPosition.width / 2) - (this.getToolTipWidth() / 2);
-                        return contentPosition.left + (contentPosition.width / 2) - (this.getToolTipWidth() / 2);
-                    case TooltipPosition.right:
-                        this.LeftPos = contentPosition.left + contentPosition.width;
-                        return contentPosition.left + contentPosition.width;
-                    case TooltipPosition.bottom:
-                        this.LeftPos = contentPosition.left + (childItem.clientWidth / 2) - (this.getToolTipWidth() / 2);
-                        return contentPosition.left + (childItem.clientWidth / 2) - (this.getToolTipWidth() / 2);
-                    case TooltipPosition.left:
-                        this.LeftPos = contentPosition.left - this.getToolTipWidth();
-                        return contentPosition.left - this.getToolTipWidth();
-                }
-                return this.content.nativeElement.offsetTop;
-            }
-            else {
-                return this.content.nativeElement.offsetTop;
-            }
-        }
-        else {
-            return this.ref.nativeElement.offsetLeft;
-        }
-    }
-    /**
-     * Berechnet die Höhe des Tooltips
+     * Property for inline mode for tooltip. Sets the display mode on the wrapper element to `inline`
      */
-    getToolTipHeight() {
-        if (this.tooltipcontainer) {
-            return this.tooltipcontainer.nativeElement.clientHeight;
-        }
-        else {
-            return 0;
-        }
-    }
-    /**
-     * Berechnet die Breite die Tooltips
-     */
-    getToolTipWidth() {
-        if (this.tooltipcontainer) {
-            return this.tooltipcontainer.nativeElement.clientWidth;
-        }
-        else {
-            return 0;
-        }
-    }
-    /**
-     * Definiert ob der Tooltip im Markup vorhanden ist
-     */
-    IsTooltipVisible() {
-        return this._isTooltipVisible;
-    }
-    /**
-     * Tooltip anzeigen
-     */
-    ShowTooltip() {
-        this._isTooltipVisible = true;
-        setTimeout(() => {
-            this.getLeftPosition();
-            this.getTopPosition();
-            this.IsTooltipContentVisible = true;
-        });
+    get inlinemode() {
+        return this._inlinemode;
     }
-    /**
-     * Tooltip ausblenden
-     */
-    HideTooltip() {
-        this._isTooltipVisible = false;
-        this.IsTooltipContentVisible = false;
+    get tooltop() {
+        return this.tooltipcontainer;
     }
+    // #endregion Public Getters And Setters
+    // #region Public Methods
     /**
-     * Gibt die Position des Tooltips zurück
+     * Returns the position of the tooltip
      */
     GetTooltipPosition() {
         const validPositions = this.ValidatePositions();
         // tslint:disable-next-line:no-bitwise
-        if (this.HasPosition(TooltipPosition.right) && (validPositions & TooltipPosition.right)) {
+        if (this.HasPosition(TooltipPosition.right) &&
+            validPositions & TooltipPosition.right) {
             return TooltipPosition.right;
         }
         // tslint:disable-next-line:no-bitwise
-        if (this.HasPosition(TooltipPosition.top) && (validPositions & TooltipPosition.top)) {
+        if (this.HasPosition(TooltipPosition.top) &&
+            validPositions & TooltipPosition.top) {
             return TooltipPosition.top;
         }
         // tslint:disable-next-line:no-bitwise
-        if (this.HasPosition(TooltipPosition.left) && (validPositions & TooltipPosition.left)) {
+        if (this.HasPosition(TooltipPosition.left) &&
+            validPositions & TooltipPosition.left) {
             return TooltipPosition.left;
         }
         // tslint:disable-next-line:no-bitwise
-        if (this.HasPosition(TooltipPosition.bottom) && (validPositions & TooltipPosition.bottom)) {
+        if (this.HasPosition(TooltipPosition.bottom) &&
+            validPositions & TooltipPosition.bottom) {
             return TooltipPosition.bottom;
         }
         // Get Auto Position or Default
@@ -7485,14 +7555,100 @@ class SacTooltipCommon {
         }
     }
     /**
-     * Definiert ob AutoPosition aktiv ist
+     * Hide tooltip
      */
-    IsAutoPosition() {
-        const positions = this.position.split('|');
-        return positions.indexOf('auto') >= 0;
+    HideTooltip() {
+        this._isTooltipVisible = false;
+        this.IsTooltipContentVisible = false;
+    }
+    /**
+     * Defines whether the tooltip is present in the markup
+     */
+    IsTooltipVisible() {
+        return this._isTooltipVisible;
+    }
+    /**
+     * Show tooltip
+     */
+    ShowTooltip() {
+        this._isTooltipVisible = true;
+        this.cdRef.detectChanges();
+        setTimeout(() => {
+            this.getLeftPosition();
+            this.getTopPosition();
+            this.IsTooltipContentVisible = true;
+        });
+    }
+    /**
+     * Calculates the height of the tooltip
+     */
+    getToolTipHeight() {
+        var _a;
+        if (this.tooltipcontainer) {
+            return (_a = this.tooltipcontainer.nativeElement.firstElementChild.clientHeight) !== null && _a !== void 0 ? _a : 0;
+        }
+        else {
+            return 0;
+        }
+    }
+    /**
+     * Calculates the width of the tooltips
+     */
+    getToolTipWidth() {
+        if (this.tooltipcontainer) {
+            return this.tooltipcontainer.nativeElement.firstElementChild.clientWidth;
+        }
+        else {
+            return 0;
+        }
+    }
+    /**
+     * Detect Changes after view checked. Prevent ExpressionChangedAfterItHasBeenCheckedError error
+     */
+    ngAfterViewChecked() {
+        // Do nothing if is not visibile
+        if (!this._isTooltipVisible) {
+            return;
+        }
+        this.cdRef.detectChanges();
+    }
+    /**
+     * Detect UI Changes to Calculate Tooltip correct
+     */
+    ngDoCheck() {
+        // Do nothing if is not visibile
+        if (!this._isTooltipVisible) {
+            return;
+        }
+        this.getLeftPosition();
+        this.getTopPosition();
+    }
+    /**
+     * Event when the control is destroyed.
+     */
+    ngOnDestroy() {
+        // 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);
+        }
     }
     /**
-     * Gibt die definierte Position für den Tooltip zurück
+     * Event when the control is initialized
+     */
+    ngOnInit() {
+        // 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
+    /**
+     * Returns the defined position for the tooltip
      */
     GetPosition() {
         const positions = this.position.split('|');
@@ -7512,9 +7668,9 @@ class SacTooltipCommon {
         return 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
      */
     HasPosition(position) {
         const positions = this.position.split('|');
@@ -7527,13 +7683,21 @@ class SacTooltipCommon {
         if (position === TooltipPosition.left && positions.indexOf('left') >= 0) {
             return true;
         }
-        if (position === TooltipPosition.bottom && positions.indexOf('bottom') >= 0) {
+        if (position === 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
+     */
+    IsAutoPosition() {
+        const positions = this.position.split('|');
+        return positions.indexOf('auto') >= 0;
+    }
+    /**
+     * Checks whether the position is valid or whether the tooltip on the position has space
      */
     ValidatePositions() {
         // Check if Container is false
@@ -7542,15 +7706,15 @@ class SacTooltipCommon {
         }
         let allowedPositions = TooltipPosition.none;
         const basePosition = this.content.nativeElement.firstElementChild.getBoundingClientRect();
-        const tooltipRect = this.tooltipcontainer.nativeElement.getBoundingClientRect();
-        const leftPosOk = basePosition.left - tooltipRect.width > 0;
-        const rightPosOk = basePosition.right + tooltipRect.width < window.innerWidth;
+        const tooltipRect = this.tooltipcontainer.nativeElement.firstElementChild.getBoundingClientRect();
+        const leftPosOk = basePosition.left - tooltipRect.width + (this.getTooltipOffset() * -1) > 0;
+        const rightPosOk = basePosition.right + tooltipRect.width + this.getTooltipOffset() < window.innerWidth;
         const topPosOk = basePosition.top - tooltipRect.height > 0;
         const bottomPosOk = basePosition.bottom + tooltipRect.height < window.innerHeight;
-        const leftHalfPosOk = basePosition.left - (tooltipRect.width / 2) > 0;
-        const rightHalfPosOk = basePosition.right + (tooltipRect.width / 2) < window.innerWidth;
-        const topHalfPosOk = basePosition.top - (tooltipRect.height / 2) > 0;
-        const bottomHalfPosOk = basePosition.bottom + (tooltipRect.height / 2) < window.innerHeight;
+        const leftHalfPosOk = basePosition.left - tooltipRect.width / 2 > 0;
+        const rightHalfPosOk = basePosition.right + tooltipRect.width / 2 < window.innerWidth;
+        const topHalfPosOk = basePosition.top - tooltipRect.height / 2 > 0;
+        const bottomHalfPosOk = basePosition.bottom + tooltipRect.height / 2 < window.innerHeight;
         if (leftPosOk && topHalfPosOk && bottomHalfPosOk) {
             // tslint:disable-next-line:no-bitwise
             allowedPositions = allowedPositions | TooltipPosition.left;
@@ -7569,6 +7733,100 @@ class SacTooltipCommon {
         }
         return allowedPositions;
     }
+    /**
+     * Calculates the position of the tooltip from links
+     */
+    getLeftPosition() {
+        if (this.content !== null && this.content !== undefined) {
+            const item = this.content.nativeElement;
+            if (item.children.length >= 1) {
+                const childItem = item.firstElementChild;
+                const contentPosition = childItem.getBoundingClientRect();
+                switch (this.GetTooltipPosition()) {
+                    case TooltipPosition.top:
+                        this.LeftPos = contentPosition.left + contentPosition.width / 2 - this.getToolTipWidth() / 2;
+                        return (contentPosition.left + contentPosition.width / 2 - this.getToolTipWidth() / 2);
+                    case TooltipPosition.right:
+                        this.LeftPos = contentPosition.left + contentPosition.width + this.getTooltipOffset();
+                        return contentPosition.left + contentPosition.width + this.getTooltipOffset();
+                    case TooltipPosition.bottom:
+                        this.LeftPos = contentPosition.left + contentPosition.width / 2 - this.getToolTipWidth() / 2;
+                        return (contentPosition.left + contentPosition.width / 2 - this.getToolTipWidth() / 2);
+                    case TooltipPosition.left:
+                        this.LeftPos = contentPosition.left - this.getToolTipWidth() + (this.getTooltipOffset() * -1);
+                        return contentPosition.left - this.getToolTipWidth() + (this.getTooltipOffset() * -1);
+                }
+                return this.content.nativeElement.offsetTop;
+            }
+            else {
+                return this.content.nativeElement.offsetTop;
+            }
+        }
+        else {
+            return this.ref.nativeElement.offsetLeft;
+        }
+    }
+    /**
+     * Calculates the position of the tooltip from the top
+     */
+    getTopPosition() {
+        if (this.content !== null && this.content !== undefined) {
+            const item = this.content.nativeElement;
+            if (item.children.length >= 1) {
+                const childItem = item.firstElementChild;
+                const contentPosition = childItem.getBoundingClientRect();
+                // Get Position with Scroll (Scrollbars inside page should be substracted)
+                const contentPositionTop = childItem.offsetTop + this.getOffsetTopParent(childItem.offsetParent) - this.getScrollTopParent(childItem.parentElement);
+                switch (this.GetTooltipPosition()) {
+                    case TooltipPosition.top:
+                        this.TopPos = contentPositionTop - this.getToolTipHeight() + (this.getTooltipOffset() * -1);
+                        return contentPositionTop - this.getToolTipHeight() + (this.getTooltipOffset() * -1);
+                    case TooltipPosition.right:
+                        this.TopPos = contentPositionTop + (contentPosition.height / 2) - (this.getToolTipHeight() / 2);
+                        return contentPositionTop + (contentPosition.height / 2) - (this.getToolTipHeight() / 2);
+                    case TooltipPosition.bottom:
+                        this.TopPos = contentPositionTop + contentPosition.height + this.getTooltipOffset();
+                        return contentPositionTop + contentPosition.height + this.getTooltipOffset();
+                    case TooltipPosition.left:
+                        this.TopPos = contentPositionTop + contentPosition.height / 2 - this.getToolTipHeight() / 2;
+                        return (contentPositionTop + contentPosition.height / 2 - this.getToolTipHeight() / 2);
+                }
+                return (childItem.clientTop + childItem.offsetTop - (this.getToolTipHeight() / 2 - childItem.clientHeight / 2));
+            }
+            else {
+                return this.content.nativeElement.offsetTop;
+            }
+        }
+        else {
+            return this.ref.nativeElement.offsetTop;
+        }
+    }
+    /**
+     * Calculates the top of the page inside all elements
+     * @param element HTML Element
+     * @returns summarized top value for absolute position
+     */
+    getOffsetTopParent(element) {
+        if (!element.offsetParent) {
+            return element.offsetTop;
+        }
+        const parentValue = this.getOffsetTopParent(element.offsetParent);
+        let offset = element.offsetTop;
+        return parentValue + offset;
+    }
+    /**
+     * Caclulate Scrollbars inside tree
+     * @param element HTML Element
+     * @returns Scroll top value of element with all childs
+     */
+    getScrollTopParent(element) {
+        // Body Scroll should not be calculated
+        if (!element.parentElement) {
+            return 0;
+        }
+        const parentValue = this.getScrollTopParent(element.parentElement);
+        return parentValue + element.scrollTop;
+    }
 }
 SacTooltipCommon.decorators = [
     { type: Directive }
@@ -7580,9 +7838,9 @@ SacTooltipCommon.ctorParameters = () => [
 SacTooltipCommon.propDecorators = {
     position: [{ type: Input }],
     tooltiptext: [{ type: Input }],
-    inlinemode: [{ type: Input }],
     content: [{ type: ViewChild, args: ['container', { static: true },] }],
-    tooltip: [{ type: ViewChild, args: ['tooltip', { static: true },] }]
+    inlinemode: [{ type: Input }],
+    tooltip: [{ type: ViewChild, args: ['tooltip', { static: false },] }]
 };
 
 // #region Classes
@@ -7653,7 +7911,6 @@ class SacUploadBase extends SacBaseModelControl {
         };
         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;
@@ -10315,5 +10572,5 @@ SACCommonListboxOptionModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { ControlHeight, GridResponse, IconType, Interpolation, LanguageModel, PagerData, PagerRequest, Positioning, SACCONFIGURATION_SERVICE, SACCommonListboxOptionModule, SACFILEBROWSER_SERVICE, SACICON_SERVICE, SACLANGUAGE_SERVICE, SACLOCALISATION_SERVICE, SACVALIDATIONKEY_SERVICE, SacAbstractConfigurationService, SacAbstractFileBrowserService, SacAbstractIconService, SacAbstractLanguageService, SacAbstractLocalisationService, SacButtonCommon, SacCheckboxCommon, SacConfirmButton, SacConfirmCommon, SacContextMenuContrainerCommon, SacContextmenuAnchorCommon, SacContextmenuCommon, SacContextmenuItemButtonCommon, SacContextmenuItemCommon, SacDateCommon, SacDateSelectorCommon, SacDateTimeCommon, SacDialogCommon, SacDropdownCommon, SacDropdownOptionCommon, SacDropzoneMultipleCommon, SacDropzoneSingleCommon, SacFileBrowserCommon, SacFormCommon, SacFormLayoutCommon, SacGridButtonCommon, SacGridColumnActionCommon, SacGridColumnBaseCommon, SacGridColumnCommon, SacGridCommon, SacGridImageCommon, SacInputAreaCommon, SacInputCommon, SacInputCurrencyCommon, SacInputDecimalCommon, SacInputEmailCommon, SacInputIntegerCommon, SacInputPasswordCommon, SacInputSearchCommon, SacListboxCommon, SacListboxOptionCommon, SacMultilanguageInputAreaCommon, SacMultilanguageInputCommon, SacPagingCommon, SacRadiobuttonCommon, SacRadiobuttonsCommon, SacStaticFormContainerCommon, SacStaticLabelCommon, SacTabCommon, SacTabItemCommon, SacTimeCommon, SacTinyMceCommon, SacTooltipCommon, SacTreeItemActionCommon, SacTreeViewChildCommon, SacTreeViewCommon, SacUploadFile, SacUploadMultipleCommon, SacUploadSingleCommon, SacValidationSummaryCommon, SacWizardCommon, SacWizardItemCommon, ServiceConfirmCommon, SortDescriptor, SortOrder, TooltipPosition, Validation, ValidationErrorItem, convertToBoolean, convertToNumber, isDefined, mapToObject, positionElements, positionService, SacUploadBase as ɵa, SacBaseModelControl as ɵb, SacBaseSelectControl as ɵc, SacBaseListControl as ɵd, SacInputBase as ɵe, SacBaseDateTimeControl as ɵf };
+export { ControlHeight, GridResponse, IconType, Interpolation, LanguageModel, PagerData, PagerRequest, Positioning, SACCONFIGURATION_SERVICE, SACCommonListboxOptionModule, SACFILEBROWSER_SERVICE, SACICON_SERVICE, SACLANGUAGE_SERVICE, SACLOCALISATION_SERVICE, SACVALIDATIONKEY_SERVICE, SacAbstractConfigurationService, SacAbstractFileBrowserService, SacAbstractIconService, SacAbstractLanguageService, SacAbstractLocalisationService, SacBaseDateTimeControl, SacBaseListControl, SacBaseModelControl, SacBaseSelectControl, SacButtonCommon, SacCheckboxCommon, SacConfirmButton, SacConfirmCommon, SacContextMenuContrainerCommon, SacContextmenuAnchorCommon, SacContextmenuCommon, SacContextmenuItemButtonCommon, SacContextmenuItemCommon, SacDateCommon, SacDateSelectorCommon, SacDateTimeCommon, SacDialogCommon, SacDropdownCommon, SacDropdownOptionCommon, SacDropzoneMultipleCommon, SacDropzoneSingleCommon, SacFileBrowserCommon, SacFormCommon, SacFormLayoutCommon, SacGridButtonCommon, SacGridColumnActionCommon, SacGridColumnBaseCommon, SacGridColumnCommon, SacGridCommon, SacGridImageCommon, SacInputAreaCommon, SacInputBase, SacInputCommon, SacInputCurrencyCommon, SacInputDecimalCommon, SacInputEmailCommon, SacInputIntegerCommon, SacInputPasswordCommon, SacInputSearchCommon, SacListboxCommon, SacListboxOptionCommon, SacMultilanguageInputAreaCommon, SacMultilanguageInputCommon, SacPagingCommon, SacRadiobuttonCommon, SacRadiobuttonsCommon, SacStaticFormContainerCommon, SacStaticLabelCommon, SacTabCommon, SacTabItemCommon, SacTimeCommon, SacTinyMceCommon, SacTooltipCommon, SacTreeItemActionCommon, SacTreeViewChildCommon, SacTreeViewCommon, SacUploadBase, SacUploadFile, SacUploadMultipleCommon, SacUploadSingleCommon, SacValidationSummaryCommon, SacWizardCommon, SacWizardItemCommon, ServiceConfirmCommon, SortDescriptor, SortOrder, TooltipPosition, Validation, ValidationErrorItem, convertToBoolean, convertToNumber, isDefined, mapToObject, positionElements, positionService };
 //# sourceMappingURL=simpleangularcontrols-sac-common.js.map