@simpleangularcontrols/sac-bootstrap4 10.0.0-rc.2 → 10.0.0-rc.21

package/fesm2015/simpleangularcontrols-sac-bootstrap4.js

@@ -1,8 +1,8 @@
 import { CommonModule, DOCUMENT } from '@angular/common';
 import { HttpClient, HttpClientModule } from '@angular/common/http';
-import { Component, NgModule, ElementRef, ChangeDetectorRef, Injectable, ComponentFactoryResolver, Inject, ApplicationRef, Injector, forwardRef, NgZone, Renderer2, Directive, HostBinding, SkipSelf, Pipe, Host, Optional, ViewChild, ContentChild, TemplateRef, ContentChildren } from '@angular/core';
+import { Component, NgModule, ElementRef, ChangeDetectorRef, Injectable, ComponentFactoryResolver, Inject, ApplicationRef, Injector, NgZone, Renderer2, forwardRef, Directive, HostBinding, SkipSelf, Pipe, Host, Optional, ViewChild, ContentChild, TemplateRef, ContentChildren } from '@angular/core';
 import { NgForm, ControlContainer, FormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
-import { SacButtonCommon, SacDialogCommon, SacConfirmCommon, ServiceConfirmCommon, isDefined, SacConfirmButton, SacContextmenuCommon, SacContextmenuItemButtonCommon, SacContextmenuItemCommon, SacContextmenuAnchorCommon, SacContextMenuContrainerCommon, SacFormCommon, SacFormLayoutCommon, ControlHeight, SacDropzoneMultipleCommon, SacDropzoneSingleCommon, SacUploadSingleCommon, SacUploadMultipleCommon, SacFileBrowserCommon, SacCheckboxCommon, SacRadiobuttonsCommon, SacRadiobuttonCommon, SacDateCommon, SacDateSelectorCommon, SacDateTimeCommon, SacTimeCommon, SacGridCommon, SacGridButtonCommon, SacGridColumnCommon, SacGridColumnBaseCommon, SacGridColumnActionCommon, SacGridImageCommon, SacPagingCommon, SacInputCommon, SacInputAreaCommon, SacInputCurrencyCommon, SacInputDecimalCommon, SacInputEmailCommon, SacInputIntegerCommon, SacInputPasswordCommon, SacInputSearchCommon, SacDropdownCommon, SacDropdownOptionCommon, SacListboxCommon, SacListboxOptionCommon, SacMultilanguageInputCommon, IconType, SacMultilanguageInputAreaCommon, SacStaticFormContainerCommon, SacStaticLabelCommon, SacTabItemCommon, SacTabCommon, SacTinyMceCommon, SacValidationSummaryCommon, SacWizardItemCommon, SacWizardCommon } from '@simpleangularcontrols/sac-common';
+import { SacButtonCommon, SacDialogCommon, SacConfirmCommon, ServiceConfirmCommon, isDefined, SacConfirmButton, SacContextmenuCommon, SacContextmenuItemButtonCommon, SacContextmenuItemCommon, SacContextmenuAnchorCommon, SacContextMenuContrainerCommon, SacFormCommon, SacFormLayoutCommon, ControlHeight, SacTooltipCommon, SacDropzoneMultipleCommon, SacDropzoneSingleCommon, SacUploadSingleCommon, SacUploadMultipleCommon, SacFileBrowserCommon, SacCheckboxCommon, SacRadiobuttonsCommon, SacRadiobuttonCommon, SacDateCommon, SacDateSelectorCommon, SacDateTimeCommon, SacTimeCommon, SacGridCommon, SacGridButtonCommon, SacGridColumnCommon, SacGridColumnBaseCommon, SacGridColumnActionCommon, SacGridImageCommon, SacPagingCommon, SacInputCommon, SacInputAreaCommon, SacInputCurrencyCommon, SacInputDecimalCommon, SacInputEmailCommon, SacInputIntegerCommon, SacInputPasswordCommon, SacInputSearchCommon, SacDropdownCommon, SacDropdownOptionCommon, SacListboxCommon, SacListboxOptionCommon, SacMultilanguageInputCommon, IconType, SacMultilanguageInputAreaCommon, SacStaticFormContainerCommon, SacStaticLabelCommon, SacTabItemCommon, SacTabCommon, SacTinyMceCommon, SacTreeviewCommon, SacValidationSummaryCommon, SacWizardItemCommon, SacWizardCommon } from '@simpleangularcontrols/sac-common';
 import { forkJoin, Observable } from 'rxjs';
 import { take } from 'rxjs/operators';
 import { IMaskModule } from 'angular-imask';
@@ -69,7 +69,7 @@ class SacDialogComponent extends SacDialogCommon {
 SacDialogComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sac-dialog',
-                template: "<div #dialog class=\"modal show\" style=\"display: block\" tabindex=\"-1\" role=\"dialog\" *ngIf=\"_show\">\r\n  <div class=\"modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable\" role=\"document\"\r\n       [class.modal-xl]=\"_size === 'extralarge'\"\r\n       [class.modal-lg]=\"_size === 'large'\"\r\n       [class.modal-sm]=\"_size === 'small'\">\r\n    <div class=\"modal-content\">\r\n      <div class=\"modal-header\">\r\n        <h5 class=\"modal-title\">{{title}}</h5>\r\n        <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\" (click)=\"hide()\" *ngIf=\"closebutton\"><span aria-hidden=\"true\">&times;</span></button>\r\n      </div>\r\n      <div class=\"modal-body\" [style.height]=\"height\">\r\n        <ng-content select=\"[dialogbody]\"></ng-content>\r\n      </div>\r\n      <div class=\"modal-footer\">\r\n        <ng-content select=\"[dialogfooter]\"></ng-content>\r\n      </div>\r\n    </div><!-- /.modal-content -->\r\n  </div><!-- /.modal-dialog -->\r\n</div><!-- /.modal -->\r\n<div class=\"modal-backdrop show\" *ngIf=\"_show && backdrop\" #backdrop></div>\r\n"
+                template: "<div\r\n  #dialog\r\n  class=\"modal show\"\r\n  style=\"display: block\"\r\n  tabindex=\"-1\"\r\n  role=\"dialog\"\r\n  *ngIf=\"_show\"\r\n>\r\n  <div\r\n    class=\"modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable\"\r\n    role=\"document\"\r\n    [class.modal-xl]=\"_size === 'extralarge'\"\r\n    [class.modal-lg]=\"_size === 'large'\"\r\n    [class.modal-sm]=\"_size === 'small'\"\r\n  >\r\n    <div class=\"modal-content\">\r\n      <div class=\"modal-header\">\r\n        <h5 class=\"modal-title\">{{title}}</h5>\r\n        <button\r\n          type=\"button\"\r\n          class=\"close\"\r\n          data-dismiss=\"modal\"\r\n          aria-label=\"Close\"\r\n          (click)=\"hide()\"\r\n          *ngIf=\"closebutton\"\r\n        >\r\n          <span aria-hidden=\"true\">&times;</span>\r\n        </button>\r\n      </div>\r\n      <div class=\"modal-body\">\r\n        <ng-content select=\"[dialogbody]\"></ng-content>\r\n      </div>\r\n      <div class=\"modal-footer\">\r\n        <ng-content select=\"[dialogfooter]\"></ng-content>\r\n      </div>\r\n    </div>\r\n    <!-- /.modal-content -->\r\n  </div>\r\n  <!-- /.modal-dialog -->\r\n</div>\r\n<!-- /.modal -->\r\n<div class=\"modal-backdrop show\" *ngIf=\"_show && backdrop\" #backdrop></div>\r\n"
             },] }
 ];
 SacDialogComponent.ctorParameters = () => [
@@ -97,7 +97,7 @@ class SacConfirmComponent extends SacConfirmCommon {
 SacConfirmComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sac-confirm',
-                template: "<sac-dialog\r\n  [(isvisible)]=\"isvisible\"\r\n  [title]=\"title\"\r\n  [allowesc]=\"false\"\r\n  [closebutton]=\"false\"\r\n  dialogsize=\"small\"\r\n>\r\n  <div dialogbody>\r\n    <div class=\"media\">\r\n      <img\r\n        [attr.src]=\"image\"\r\n        class=\"align-self-center mr-3\"\r\n        *ngIf=\"hasImage()\"\r\n      />\r\n      <div class=\"media-body\">{{message}}</div>\r\n    </div>\r\n  </div>\r\n  <ng-container dialogfooter>\r\n    <ng-container *ngFor=\"let button of buttons\">\r\n      <sac-button\r\n        [name]=\"button.key\"\r\n        [text]=\"button.text\"\r\n        [role]=\"button.role || 'default'\"\r\n        (clicked)=\"confirm(button.key)\"\r\n      ></sac-button>\r\n    </ng-container>\r\n  </ng-container>\r\n</sac-dialog>\r\n"
+                template: "<sac-dialog\r\n  name=\"confirmDialog\"\r\n  [(isvisible)]=\"isvisible\"\r\n  [title]=\"title\"\r\n  [allowesc]=\"false\"\r\n  [closebutton]=\"false\"\r\n  dialogsize=\"small\"\r\n>\r\n  <div dialogbody>\r\n    <div class=\"media\">\r\n      <img\r\n        [attr.src]=\"image\"\r\n        class=\"align-self-center mr-3\"\r\n        *ngIf=\"hasImage()\"\r\n      />\r\n      <div class=\"media-body\">{{message}}</div>\r\n    </div>\r\n  </div>\r\n  <ng-container dialogfooter>\r\n    <ng-container *ngFor=\"let button of buttons\">\r\n      <sac-button\r\n        [name]=\"button.key\"\r\n        [text]=\"button.text\"\r\n        [role]=\"button.role || 'default'\"\r\n        (clicked)=\"confirm(button.key)\"\r\n      ></sac-button>\r\n    </ng-container>\r\n  </ng-container>\r\n</sac-dialog>\r\n"
             },] }
 ];
 
@@ -242,13 +242,7 @@ class SacContextmenuComponent extends SacContextmenuCommon {
 SacContextmenuComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sac-contextmenu',
-                template: "<div class=\"dropdown\" [ngClass]=\"cssclass\">\r\n  <ng-container\r\n    [ngTemplateOutlet]=\"buttontemplate || defaultButtonTemplate\"\r\n  ></ng-container>\r\n\r\n  <div\r\n    class=\"dropdown-menu dropdown-menu-right\"\r\n    sacContextMenuContainer\r\n    [class.show]=\"isopen\"\r\n  >\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #defaultButtonTemplate>\r\n  <button\r\n    sacContextMenuAnchor\r\n    class=\"btn btn-sm btn-link text-secondary text-decoration-none\"\r\n    type=\"button\"\r\n    (click)=\"toggle()\"\r\n  >\r\n    <i [class]=\"IconContextMenu\"></i>\r\n  </button>\r\n</ng-template>\r\n",
-                providers: [
-                    {
-                        provide: SacContextmenuCommon,
-                        useExisting: forwardRef(() => SacContextmenuComponent),
-                    },
-                ]
+                template: "<div class=\"dropdown\" [ngClass]=\"cssclass\">\r\n  <ng-container\r\n    [ngTemplateOutlet]=\"buttontemplate || defaultButtonTemplate\"\r\n  ></ng-container>\r\n\r\n  <div\r\n    class=\"dropdown-menu dropdown-menu-right\"\r\n    sacContextMenuContainer\r\n    [class.show]=\"isopen\"\r\n  >\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #defaultButtonTemplate>\r\n  <button\r\n    sacContextMenuAnchor\r\n    class=\"btn btn-sm btn-link text-secondary text-decoration-none\"\r\n    type=\"button\"\r\n    (click)=\"toggle()\"\r\n  >\r\n    <i [class]=\"IconContextMenu\"></i>\r\n  </button>\r\n</ng-template>\r\n"
             },] }
 ];
 SacContextmenuComponent.ctorParameters = () => [
@@ -260,26 +254,30 @@ SacContextmenuComponent.ctorParameters = () => [
 ];
 
 /**
- * Component für Menü Eintrag in Context Menü
+ * Component for menu entry in context menu
  */
 class SacContextmenuItemButtonComponent extends SacContextmenuItemButtonCommon {
+    // #region Constructors
     /**
      * Constructor
-     * @param contextmenu Instance von Context Menü
      */
-    constructor(contextmenu) {
-        super(contextmenu);
+    constructor() {
+        super();
     }
 }
 SacContextmenuItemButtonComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sac-contextmenubutton',
-                template: "<button\r\n  type=\"button\"\r\n  class=\"dropdown-item\"\r\n  (click)=\"callaction($event)\"\r\n  [class.disabled]=\"isdisabled\"\r\n  [ngClass]=\"cssclass\"\r\n  [attr.disabled]=\"isdisabled ? 'disabled' : null\"\r\n>\r\n  <div class=\"d-flex\">\r\n    <div *ngIf=\"!isicondisabled\" style=\"min-width: 1.5rem\">\r\n      <img *ngIf=\"image\" [src]=\"image\" class=\"align-baseline\" />\r\n      <i *ngIf=\"icon\" [class]=\"iconstyle + ' ' + icon\"></i>\r\n    </div>\r\n    <div class=\"flex-grow-1\">{{ text }}</div>\r\n  </div>\r\n</button>\r\n"
+                template: "<button\r\n    [id]=\"name\"\r\n    type=\"button\"\r\n    class=\"dropdown-item\"\r\n    (click)=\"callaction($event)\"\r\n    [class.disabled]=\"isdisabled\"\r\n    [ngClass]=\"cssclass\"\r\n    [attr.disabled]=\"isdisabled ? 'disabled' : null\">\r\n    <div class=\"d-flex\">\r\n        <div\r\n            *ngIf=\"!isicondisabled\"\r\n            style=\"min-width: 1.5rem\">\r\n            <img\r\n                *ngIf=\"image\"\r\n                [src]=\"image\"\r\n                class=\"align-baseline\" />\r\n            <i\r\n                *ngIf=\"icon\"\r\n                [class]=\"iconstyle + ' ' + icon\"></i>\r\n        </div>\r\n        <div class=\"flex-grow-1\">{{ text }}</div>\r\n    </div>\r\n</button>\r\n",
+                providers: [
+                    {
+                        provide: SacContextmenuItemCommon,
+                        useExisting: forwardRef(() => SacContextmenuItemButtonComponent),
+                    },
+                ]
             },] }
 ];
-SacContextmenuItemButtonComponent.ctorParameters = () => [
-    { type: SacContextmenuCommon }
-];
+SacContextmenuItemButtonComponent.ctorParameters = () => [];
 
 /**
  * Splitter Komponente in Context Menü
@@ -289,7 +287,13 @@ class SacContextmenuItemSplitterComponent extends SacContextmenuItemCommon {
 SacContextmenuItemSplitterComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sac-contextmenusplitter',
-                template: "<div class=\"dropdown-divider\"></div>"
+                template: "<div class=\"dropdown-divider\"></div>",
+                providers: [
+                    {
+                        provide: SacContextmenuItemCommon,
+                        useExisting: forwardRef(() => SacContextmenuItemSplitterComponent),
+                    },
+                ]
             },] }
 ];
 
@@ -408,71 +412,58 @@ SacFormDirective.propDecorators = {
     cssClassForm: [{ type: HostBinding, args: ['class.form',] }]
 };
 
+// #region Classes
 /**
- * Factory Methode für SacForm
- * @param form SacFormular
- */
-function SACFORM_FACTORY(form) {
-    return form;
-}
-/**
- * Factory Methode für NgForm
- * @param form NgForm
- */
-function NGFORM_FACTORY(form) {
-    return form;
-}
-/**
- * Directive zum erben eines NgForm/NgFormular einer übergeordneten Komponente
- *
- * @example Implementation in Markup
- *
- * <div sacInheritForm>
- * </div>
- *
- * @example Model an Sub-Komponente übergeben
- *
- * <div sacInheritForm>
- * <div>SubForm</div>
- * <div>
- *  <ngInput [(ngModel)]="mymodel.fieldarea2" name="subformField3" label="field 3" [isrequired]="true"></ngInput>
- * </div>
- * </div>
- *
- *
- * (at)Component({
- * selector: 'sacInheritForm',
- * templateUrl: './subform.component.html'
- * })
- * export class SubFormComponent implements DoCheck {
- *
- * (at)Input() mymodel;
- * (at)Output() mymodelChange = new EventEmitter();
- *
- * ngDoCheck() {
- *   this.mymodelChange.next(this.mymodel);
- * }
- *}
- *
+ * Directive to inherit an NgForm/NgForm from a parent component
  */
-class SacInheritFormDirective {
+class SacInheritFormDirective extends SacFormCommon {
+    // #region Constructors
+    /**
+     * Construtor
+     * @param injector: injector to receive the NgForm instance
+     */
+    constructor(injector) {
+        super(injector.get(NgForm));
+    }
 }
 SacInheritFormDirective.decorators = [
     { type: Directive, args: [{
                 selector: '[sacInheritForm]',
+                exportAs: 'sacinheritform',
                 providers: [
                     {
                         provide: SacFormDirective,
                         useFactory: SACFORM_FACTORY,
-                        deps: [[new SkipSelf(), SacFormDirective]]
-                    }, {
+                        deps: [[new SkipSelf(), SacFormDirective]],
+                    },
+                    {
                         provide: ControlContainer,
                         useFactory: NGFORM_FACTORY,
-                        deps: [NgForm]
-                    }
-                ]
+                        deps: [NgForm],
+                    },
+                ],
             },] }
-];
+];
+SacInheritFormDirective.ctorParameters = () => [
+    { type: Injector }
+];
+// #endregion Classes
+// #region Functions
+/**
+ * Factory Methode für NgForm
+ * @param form NgForm
+ */
+function NGFORM_FACTORY(form) {
+    return form;
+}
+/**
+ * Factory Methode für SacForm
+ * @param form SacFormular
+ */
+function SACFORM_FACTORY(form) {
+    return form;
+}
+// #endregion Functions
 
 class SACBootstrap4FormModule {
 }
@@ -650,6 +641,66 @@ SACBootstrap4LayoutModule.decorators = [
             },] }
 ];
 
+/**
+ * Tooltip Komponente
+ *
+ * @example ToolTip Control
+ *
+ *  <ngTooltip tooltiptext="Mein Tooltip" [inlinemode]="true">
+ *    <i class="tooltip"></i>
+ *  </ngTooltip>
+ *
+ * @example ToolTip Control im Inline Mode. Style auf Icon kann auch in Klasse ausgelagert werden.
+ *
+ *  <div class="form-inline">
+ *    <ngInputSearch iconname="Suchen"></ngInputSearch>
+ *    <ngTooltip tooltiptext="Mein Tooltip" [inlinemode]="true">
+ *      <i class="tooltip" style="position: relative; left: 0; top: 3px; display: inline-block; margin-right: 10px;"></i>
+ *    </ngTooltip>
+ *  </div>
+ *
+ */
+class SacTooltipComponent extends SacTooltipCommon {
+    // #region Constructors
+    /**
+     * Konstrukor
+     * @param parent SacFormular Instanz
+     * @param injector Component Injector
+     */
+    constructor(cdRef, ref) {
+        super(cdRef, ref);
+    }
+    // #endregion Constructors
+    // #region Protected Methods
+    /**
+     * Padding Value for Bootstrap5 Tooltip Padding
+     * @returns Static Padding Value for BS5
+     */
+    getTooltipOffset() {
+        return 2;
+    }
+}
+SacTooltipComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'sac-tooltip',
+                template: "<div [style.display]=\"inlinemode ? 'inline' : null\">\r\n  <div\r\n    #container\r\n    (mouseenter)=\"ShowTooltip()\"\r\n    (mouseleave)=\"HideTooltip()\"\r\n    [style.display]=\"inlinemode ? 'inline' : null\"\r\n  >\r\n    <ng-content></ng-content>\r\n  </div>\r\n  <div #tooltip *ngIf=\"IsTooltipVisible()\">\r\n    <div\r\n      [class.show]=\"IsTooltipContentVisible\"\r\n      class=\"tooltip bs-tooltip-auto fade\"\r\n      style=\"position: absolute\"\r\n      [style.left.px]=\"LeftPos\"\r\n      [style.top.px]=\"TopPos\"\r\n      [class.top]=\"GetTooltipPosition() === TooltipPosition.top\"\r\n      [class.left]=\"GetTooltipPosition() === TooltipPosition.left\"\r\n      [class.right]=\"GetTooltipPosition() === TooltipPosition.right\"\r\n      [class.bottom]=\"GetTooltipPosition() === TooltipPosition.bottom\"\r\n      [attr.x-placement]=\"GetTooltipPosition() == TooltipPosition.right ? 'right' : GetTooltipPosition() == TooltipPosition.left ? 'left' :  GetTooltipPosition() == TooltipPosition.top ? 'top' :GetTooltipPosition() == TooltipPosition.bottom ? 'bottom' : null\"\r\n    >\r\n      <div\r\n        class=\"arrow\"\r\n        style=\"position: absolute\"\r\n        [style.top.px]=\"GetTooltipPosition() === TooltipPosition.left || GetTooltipPosition() === TooltipPosition.right ? (getToolTipHeight() / 2) - 6.5 : null\"\r\n        [style.left.px]=\"GetTooltipPosition() === TooltipPosition.bottom || GetTooltipPosition() === TooltipPosition.top ? (getToolTipWidth() / 2) - 6.5 : null\"\r\n      ></div>\r\n      <div class=\"tooltip-inner\">{{tooltiptext}}</div>\r\n    </div>\r\n  </div>\r\n</div>\r\n"
+            },] }
+];
+SacTooltipComponent.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: ElementRef }
+];
+
+class SACBootstrap4TooltipModule {
+}
+SACBootstrap4TooltipModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [SacTooltipComponent],
+                imports: [CommonModule],
+                exports: [SacTooltipComponent],
+            },] }
+];
+
 /**
  * Dropzone Komponente für mehrere Uploads
  * @see https://github.com/kukhariev/ngx-uploadx/
@@ -678,7 +729,7 @@ class SacDropzoneMultipleComponent extends SacDropzoneMultipleCommon {
 SacDropzoneMultipleComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sac-dropzonemultiple',
-                template: "<div class=\"row form-group\" [class.no-gutters]=\"disablelabel\">\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}_label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"dropzone d-flex justify-content-center position-relative\"\r\n      (drop)=\"dropHandler($event)\"\r\n      (dragover)=\"onDragOver($event)\"\r\n      (dragleave)=\"onDragLeave($event)\"\r\n      [class.active]=\"active\"\r\n      [style.min-height]=\"uploadheight\"\r\n      [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n    >\r\n      <div\r\n        class=\"content d-flex justify-content-center\"\r\n        *ngIf=\"uploads.length === 0\"\r\n      >\r\n        <div class=\"align-self-center text-center\">\r\n          <div\r\n            [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n          >\r\n            <ng-content></ng-content>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div\r\n        class=\"content d-flex justify-content-center\"\r\n        *ngIf=\"uploads.length > 0\"\r\n      >\r\n        <div class=\"align-self-center progress-container\">\r\n          <div\r\n            class=\"dropzone-uploadstates\"\r\n            [class.mt-1]=\"i > 0\"\r\n            *ngFor=\"let file of uploads; let i = index\"\r\n          >\r\n            <div\r\n              class=\"input-group upload-component upload-component-multiple\"\r\n              [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n              [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n            >\r\n              <div class=\"form-control upload-progress border-secondary\">\r\n                <div class=\"progress\">\r\n                  <div\r\n                    class=\"progress-bar\"\r\n                    [class.progress-bar-success]=\"file.progress===100\"\r\n                    role=\"progressbar\"\r\n                    [attr.aria-valuenow]=\"file.progress\"\r\n                    aria-valuemin=\"0\"\r\n                    aria-valuemax=\"100\"\r\n                    [style.width.%]=\"file.progress\"\r\n                  >\r\n                    <span class=\"progress-text text-dark\">{{ file.name }}</span>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"input-group-append\">\r\n                <!-- image-preview-clear button -->\r\n                <a\r\n                  class=\"btn\"\r\n                  (click)=\"cancel(file.uploadId)\"\r\n                  [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                  [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n                >\r\n                  <span [class]=\"IconDelete\"></span>\r\n                </a>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <input\r\n        #files\r\n        multiple\r\n        id=\"{{ name }}_uploadinput\"\r\n        type=\"file\"\r\n        class=\"custom-file-input\"\r\n        (click)=\"files.value = ''\"\r\n        (uploadxState)=\"onUpload($event)\"\r\n        [disabled]=\"HasQueueItem()\"\r\n      />\r\n    </div>\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                template: "<div\r\n    id=\"{{ name }}\"\r\n    class=\"row form-group\"\r\n    [class.no-gutters]=\"disablelabel\">\r\n    <label\r\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n        id=\"{{ name }}_label\"\r\n        for=\"{{ name }}_uploadinput\"\r\n        class=\"col-12 col-form-label d-flex\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n        [class.required]=\"isrequired\">\r\n        <div\r\n            class=\"text flex-grow-0\"\r\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\r\n            {{ label }}\r\n        </div>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\"\r\n            ><span\r\n                [ngClass]=\"HelptextTooltipIcon\"\r\n                class=\"ml-1\"></span> </sac-tooltip\r\n    ></label>\r\n    <div\r\n        class=\"col-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n            <div\r\n                class=\"dropzone d-flex justify-content-center position-relative\"\r\n                (drop)=\"dropHandler($event)\"\r\n                (dragover)=\"onDragOver($event)\"\r\n                (dragleave)=\"onDragLeave($event)\"\r\n                [class.active]=\"active\"\r\n                [style.min-height]=\"uploadheight\"\r\n                [class.is-invalid]=\"invalid && (dirty || touched)\">\r\n                <div\r\n                    class=\"content d-flex justify-content-center\"\r\n                    *ngIf=\"uploads.length === 0\">\r\n                    <div class=\"align-self-center text-center\">\r\n                        <div [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\r\n                            <ng-content></ng-content>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div\r\n                    class=\"content d-flex justify-content-center\"\r\n                    *ngIf=\"uploads.length > 0\">\r\n                    <div class=\"align-self-center progress-container\">\r\n                        <div\r\n                            class=\"dropzone-uploadstates\"\r\n                            [class.mt-1]=\"i > 0\"\r\n                            *ngFor=\"let file of uploads; let i = index\">\r\n                            <div\r\n                                class=\"input-group upload-component upload-component-multiple\"\r\n                                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n                                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\r\n                                <div class=\"form-control upload-progress border-secondary\">\r\n                                    <div class=\"progress\">\r\n                                        <div\r\n                                            class=\"progress-bar\"\r\n                                            [class.progress-bar-success]=\"file.progress === 100\"\r\n                                            role=\"progressbar\"\r\n                                            [attr.aria-valuenow]=\"file.progress\"\r\n                                            aria-valuemin=\"0\"\r\n                                            aria-valuemax=\"100\"\r\n                                            [style.width.%]=\"file.progress\">\r\n                                            <span class=\"progress-text text-dark\">{{ file.name }}</span>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"input-group-append\">\r\n                                    <!-- image-preview-clear button -->\r\n                                    <a\r\n                                        class=\"btn\"\r\n                                        (click)=\"cancel(file.uploadId)\"\r\n                                        [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                                        [class.btn-danger]=\"invalid && (dirty || touched)\">\r\n                                        <span [class]=\"IconDelete\"></span>\r\n                                    </a>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <input\r\n                    #files\r\n                    multiple\r\n                    id=\"{{ name }}_uploadinput\"\r\n                    type=\"file\"\r\n                    class=\"custom-file-input\"\r\n                    (click)=\"files.value = ''\"\r\n                    (uploadxState)=\"onUpload($event)\"\r\n                    [disabled]=\"HasQueueItem()\" />\r\n            </div>\r\n            <small\r\n                *ngIf=\"helptextmode === 'text' && helptext\"\r\n                class=\"form-text text-muted\">\r\n                {{ helptext }}\r\n            </small>\r\n            <div\r\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n                class=\"invalid-feedback\">\r\n                {{ GetErrorMessage() | async }}\r\n            </div>\r\n        </div>\r\n\r\n        <div\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n            class=\"form-control-plaintext align-self-top ml-2 mr-1 w-auto\"\r\n            [ngClass]=\"[componentHeight | toControlHeight]\">\r\n            <sac-tooltip\r\n                [tooltiptext]=\"helptext\"\r\n                [inlinemode]=\"true\">\r\n                <span\r\n                    [ngClass]=\"HelptextTooltipIcon\"\r\n                    class=\"ml-1\">\r\n                </span>\r\n            </sac-tooltip>\r\n        </div>\r\n    </div>\r\n</div>\r\n",
                 providers: [
                     {
                         provide: NG_VALUE_ACCESSOR,
@@ -729,7 +780,7 @@ class SacDropzoneSingleComponent extends SacDropzoneSingleCommon {
 SacDropzoneSingleComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sac-dropzonesingle',
-                template: "<div class=\"row form-group\" [class.no-gutters]=\"disablelabel\">\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}_label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"dropzone d-flex justify-content-center position-relative\"\r\n      (drop)=\"dropHandler($event)\"\r\n      (dragover)=\"onDragOver($event)\"\r\n      (dragleave)=\"onDragLeave($event)\"\r\n      [style.min-height]=\"uploadheight\"\r\n      [class.active]=\"active\"\r\n      [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n    >\r\n      <div\r\n        class=\"content d-flex justify-content-center\"\r\n        *ngIf=\"uploads.length === 0\"\r\n      >\r\n        <div class=\"align-self-center text-center\">\r\n          <div\r\n            [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n          >\r\n            <ng-content></ng-content>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div\r\n        class=\"content d-flex justify-content-center\"\r\n        *ngIf=\"uploads.length > 0\"\r\n      >\r\n        <div class=\"align-self-center progress-container\">\r\n          <div class=\"dropzone-uploadstates\" *ngFor=\"let file of uploads\">\r\n            <div\r\n              class=\"input-group upload-component upload-component-multiple\"\r\n              [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n              [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n            >\r\n              <div class=\"form-control upload-progress border-secondary\">\r\n                <div class=\"progress\">\r\n                  <div\r\n                    class=\"progress-bar\"\r\n                    [class.progress-bar-success]=\"file.progress===100\"\r\n                    role=\"progressbar\"\r\n                    [attr.aria-valuenow]=\"file.progress\"\r\n                    aria-valuemin=\"0\"\r\n                    aria-valuemax=\"100\"\r\n                    [style.width.%]=\"file.progress\"\r\n                  >\r\n                    <span class=\"progress-text text-dark\">{{ file.name }}</span>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"input-group-append\">\r\n                <!-- image-preview-clear button -->\r\n                <a\r\n                  class=\"btn\"\r\n                  (click)=\"cancel(file.uploadId)\"\r\n                  [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                  [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n                >\r\n                  <span [class]=\"IconDelete\"></span>\r\n                </a>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <input\r\n        #files\r\n        id=\"{{ name }}_uploadinput\"\r\n        type=\"file\"\r\n        class=\"custom-file-input\"\r\n        (click)=\"files.value = ''\"\r\n        (uploadxState)=\"onUpload($event)\"\r\n        [disabled]=\"HasQueueItem()\"\r\n      />\r\n    </div>\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                template: "<div\r\n    id=\"{{ name }}\"\r\n    class=\"row form-group\"\r\n    [class.no-gutters]=\"disablelabel\">\r\n    <label\r\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n        id=\"{{ name }}_label\"\r\n        for=\"{{ name }}_uploadinput\"\r\n        class=\"col-12 col-form-label d-flex\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n        [class.required]=\"isrequired\">\r\n        <div\r\n            class=\"text flex-grow-0\"\r\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\r\n            {{ label }}\r\n        </div>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\"\r\n            ><span\r\n                [ngClass]=\"HelptextTooltipIcon\"\r\n                class=\"ml-1\"></span> </sac-tooltip\r\n    ></label>\r\n    <div\r\n        class=\"col-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n            <div\r\n                class=\"dropzone d-flex justify-content-center position-relative\"\r\n                (drop)=\"dropHandler($event)\"\r\n                (dragover)=\"onDragOver($event)\"\r\n                (dragleave)=\"onDragLeave($event)\"\r\n                [style.min-height]=\"uploadheight\"\r\n                [class.active]=\"active\"\r\n                [class.is-invalid]=\"invalid && (dirty || touched)\">\r\n                <div\r\n                    class=\"content d-flex justify-content-center\"\r\n                    *ngIf=\"uploads.length === 0\">\r\n                    <div class=\"align-self-center text-center\">\r\n                        <div [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\r\n                            <ng-content></ng-content>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div\r\n                    class=\"content d-flex justify-content-center\"\r\n                    *ngIf=\"uploads.length > 0\">\r\n                    <div class=\"align-self-center progress-container\">\r\n                        <div\r\n                            class=\"dropzone-uploadstates\"\r\n                            *ngFor=\"let file of uploads\">\r\n                            <div\r\n                                class=\"input-group upload-component upload-component-multiple\"\r\n                                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n                                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\r\n                                <div class=\"form-control upload-progress border-secondary\">\r\n                                    <div class=\"progress\">\r\n                                        <div\r\n                                            class=\"progress-bar\"\r\n                                            [class.progress-bar-success]=\"file.progress === 100\"\r\n                                            role=\"progressbar\"\r\n                                            [attr.aria-valuenow]=\"file.progress\"\r\n                                            aria-valuemin=\"0\"\r\n                                            aria-valuemax=\"100\"\r\n                                            [style.width.%]=\"file.progress\">\r\n                                            <span class=\"progress-text text-dark\">{{ file.name }}</span>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"input-group-append\">\r\n                                    <!-- image-preview-clear button -->\r\n                                    <a\r\n                                        class=\"btn\"\r\n                                        (click)=\"cancel(file.uploadId)\"\r\n                                        [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                                        [class.btn-danger]=\"invalid && (dirty || touched)\">\r\n                                        <span [class]=\"IconDelete\"></span>\r\n                                    </a>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <input\r\n                    #files\r\n                    id=\"{{ name }}_uploadinput\"\r\n                    type=\"file\"\r\n                    class=\"custom-file-input\"\r\n                    (click)=\"files.value = ''\"\r\n                    (uploadxState)=\"onUpload($event)\"\r\n                    [disabled]=\"HasQueueItem()\" />\r\n            </div>\r\n            <small\r\n                *ngIf=\"helptextmode === 'text' && helptext\"\r\n                class=\"form-text text-muted\">\r\n                {{ helptext }}\r\n            </small>\r\n            <div\r\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n                class=\"invalid-feedback\">\r\n                {{ GetErrorMessage() | async }}\r\n            </div>\r\n        </div>\r\n\r\n        <div\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n            class=\"form-control-plaintext align-self-top ml-2 mr-1 w-auto\"\r\n            [ngClass]=\"[componentHeight | toControlHeight]\">\r\n            <sac-tooltip\r\n                [tooltiptext]=\"helptext\"\r\n                [inlinemode]=\"true\">\r\n                <span\r\n                    [ngClass]=\"HelptextTooltipIcon\"\r\n                    class=\"ml-1\">\r\n                </span>\r\n            </sac-tooltip>\r\n        </div>\r\n    </div>\r\n</div>\r\n",
                 providers: [
                     {
                         provide: NG_VALUE_ACCESSOR,
@@ -772,7 +823,7 @@ class SacUploadComponent extends SacUploadSingleCommon {
 SacUploadComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sac-upload',
-                template: "<div class=\"row form-group\" [class.no-gutters]=\"disablelabel\">\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}_label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group upload-component upload-single\"\r\n      [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n      [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      <div class=\"input-group-prepend\">\r\n        <!-- image-preview-input -->\r\n        <div\r\n          class=\"btn upload-input custom-file\"\r\n          [class.disabled]=\"HasQueueItem()\"\r\n          [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n          [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n        >\r\n          <i class=\"pr-2\" [class]=\"IconBrowse\"></i>\r\n          <span class=\"upload-browse\"\r\n            >{{\r\n            lngResourceService.GetString(validationKeyService.UploadButtonBrowse)\r\n            | async }}</span\r\n          >\r\n          <input\r\n            type=\"file\"\r\n            class=\"custom-file-input\"\r\n            #files\r\n            (click)=\"files.value = ''\"\r\n            (uploadxState)=\"onUpload($event)\"\r\n            multiple\r\n            [disabled]=\"HasQueueItem()\"\r\n          />\r\n        </div>\r\n      </div>\r\n      <div\r\n        class=\"form-control upload-progress\"\r\n        [ngClass]=\"[componentHeight | toControlHeight]\"\r\n        [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n      >\r\n        <div class=\"progress\">\r\n          <div\r\n            class=\"progress-bar\"\r\n            [class.progress-bar-success]=\"Progress()===100\"\r\n            role=\"progressbar\"\r\n            [attr.aria-valuenow]=\"Progress()\"\r\n            aria-valuemin=\"0\"\r\n            aria-valuemax=\"100\"\r\n            [style.width.%]=\"Progress()\"\r\n          >\r\n            <span class=\"progress-text text-dark\"\r\n              >{{ Filename() | async }}</span\r\n            >\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <!-- <input type=\"textimage-preview-filename\" class=\"form-control image-preview-filename\" disabled=\"disabled\"> --><!-- don't give a name === doesn't send on POST/GET -->\r\n      <div class=\"input-group-append\">\r\n        <!-- image-preview-clear button -->\r\n        <button\r\n          class=\"btn\"\r\n          (click)=\"cancelAll()\"\r\n          [attr.disabled]=\"HasQueueItem() === false ? 'disabled' : null\"\r\n          [class.disabled]=\"HasQueueItem() === false ? 'disabled' : null\"\r\n          [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n          [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n        >\r\n          <span [class]=\"IconDelete\"></span>\r\n        </button>\r\n        <button\r\n          *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && IsPaused() === false)\"\r\n          class=\"btn\"\r\n          (click)=\"pauseAll()\"\r\n          [attr.disabled]=\"IsUploading() === false ? 'disabled' : null\"\r\n          [class.disabled]=\"IsUploading() === false ? 'disabled' : null\"\r\n          [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n          [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n        >\r\n          <span [class]=\"IconPause\"></span>\r\n        </button>\r\n        <button\r\n          *ngIf=\"autoupload && enablepause && IsPaused()\"\r\n          class=\"btn\"\r\n          (click)=\"uploadAll()\"\r\n          [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n          [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n        >\r\n          <span [class]=\"IconContinue\"></span>\r\n        </button>\r\n        <button\r\n          *ngIf=\"autoupload === false\"\r\n          class=\"btn text-nowrap\"\r\n          (click)=\"uploadAll()\"\r\n          [attr.disabled]=\"IsStateToUpload() === false ?  'disabled' : null\"\r\n          [class.disabled]=\"IsStateToUpload() === false ?  'disabled' : null\"\r\n          [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n          [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n        >\r\n          <span [class]=\"IconUpload\" class=\"pr-2\"></span>{{\r\n          lngResourceService.GetString(validationKeyService.UploadButtonUpload)\r\n          | async }}\r\n        </button>\r\n      </div>\r\n    </div>\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                template: "<div\r\n    id=\"{{ name }}\"\r\n    class=\"row form-group\"\r\n    [class.no-gutters]=\"disablelabel\">\r\n    <label\r\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n        id=\"{{ name }}_label\"\r\n        for=\"{{ name }}_uploadinput\"\r\n        class=\"col-12 col-form-label d-flex\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n        [class.required]=\"isrequired\">\r\n        <div\r\n            class=\"text flex-grow-0\"\r\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\r\n            {{ label }}\r\n        </div>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [ngClass]=\"HelptextTooltipIcon\"\r\n                class=\"ml-1\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n            <div\r\n                class=\"input-group upload-component upload-single\"\r\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n                [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\r\n                <div class=\"input-group-prepend\">\r\n                    <!-- image-preview-input -->\r\n                    <div\r\n                        class=\"btn upload-input custom-file\"\r\n                        [class.disabled]=\"HasQueueItem()\"\r\n                        [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                        [class.btn-danger]=\"invalid && (dirty || touched)\">\r\n                        <i\r\n                            class=\"pr-2\"\r\n                            [ngClass]=\"IconBrowse\"></i>\r\n                        <span class=\"upload-browse\">{{ lngResourceService.GetString(validationKeyService.UploadButtonBrowse) | async }}</span>\r\n                        <input\r\n                            type=\"file\"\r\n                            id=\"{{ name }}_uploadinput\"\r\n                            class=\"custom-file-input\"\r\n                            #files\r\n                            (click)=\"files.value = ''\"\r\n                            (uploadxState)=\"onUpload($event)\"\r\n                            multiple\r\n                            [disabled]=\"HasQueueItem()\" />\r\n                    </div>\r\n                </div>\r\n                <div\r\n                    class=\"form-control upload-progress\"\r\n                    [ngClass]=\"[componentHeight | toControlHeight]\"\r\n                    [class.is-invalid]=\"invalid && (dirty || touched)\">\r\n                    <div class=\"progress\">\r\n                        <div\r\n                            class=\"progress-bar\"\r\n                            [class.progress-bar-success]=\"Progress() === 100\"\r\n                            role=\"progressbar\"\r\n                            [attr.aria-valuenow]=\"Progress()\"\r\n                            aria-valuemin=\"0\"\r\n                            aria-valuemax=\"100\"\r\n                            [style.width.%]=\"Progress()\">\r\n                            <span class=\"progress-text text-dark\">{{ Filename() | async }}</span>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <!-- <input type=\"textimage-preview-filename\" class=\"form-control image-preview-filename\" disabled=\"disabled\"> --><!-- don't give a name === doesn't send on POST/GET -->\r\n                <div class=\"input-group-append\">\r\n                    <!-- image-preview-clear button -->\r\n                    <button\r\n                        class=\"btn\"\r\n                        (click)=\"cancelAll()\"\r\n                        [attr.disabled]=\"HasQueueItem() === false ? 'disabled' : null\"\r\n                        [class.disabled]=\"HasQueueItem() === false ? 'disabled' : null\"\r\n                        [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                        [class.btn-danger]=\"invalid && (dirty || touched)\">\r\n                        <span [ngClass]=\"IconDelete\"></span>\r\n                    </button>\r\n                    <button\r\n                        *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && IsPaused() === false)\"\r\n                        class=\"btn\"\r\n                        (click)=\"pauseAll()\"\r\n                        [attr.disabled]=\"IsUploading() === false ? 'disabled' : null\"\r\n                        [class.disabled]=\"IsUploading() === false ? 'disabled' : null\"\r\n                        [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                        [class.btn-danger]=\"invalid && (dirty || touched)\">\r\n                        <span [ngClass]=\"IconPause\"></span>\r\n                    </button>\r\n                    <button\r\n                        *ngIf=\"autoupload && enablepause && IsPaused()\"\r\n                        class=\"btn\"\r\n                        (click)=\"uploadAll()\"\r\n                        [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                        [class.btn-danger]=\"invalid && (dirty || touched)\">\r\n                        <span [ngClass]=\"IconContinue\"></span>\r\n                    </button>\r\n                    <button\r\n                        *ngIf=\"autoupload === false\"\r\n                        class=\"btn text-nowrap\"\r\n                        (click)=\"uploadAll()\"\r\n                        [attr.disabled]=\"IsStateToUpload() === false ? 'disabled' : null\"\r\n                        [class.disabled]=\"IsStateToUpload() === false ? 'disabled' : null\"\r\n                        [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                        [class.btn-danger]=\"invalid && (dirty || touched)\">\r\n                        <span\r\n                            [ngClass]=\"IconUpload\"\r\n                            class=\"pr-2\"></span\r\n                        >{{ lngResourceService.GetString(validationKeyService.UploadButtonUpload) | async }}\r\n                    </button>\r\n                </div>\r\n            </div>\r\n            <small\r\n                *ngIf=\"helptextmode === 'text' && helptext\"\r\n                class=\"form-text text-muted\">\r\n                {{ helptext }}\r\n            </small>\r\n            <div\r\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n                class=\"invalid-feedback\">\r\n                {{ GetErrorMessage() | async }}\r\n            </div>\r\n        </div>\r\n\r\n        <div\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n            class=\"form-control-plaintext align-self-top ml-2 mr-1 w-auto\"\r\n            [ngClass]=\"[componentHeight | toControlHeight]\">\r\n            <sac-tooltip\r\n                [tooltiptext]=\"helptext\"\r\n                [inlinemode]=\"true\">\r\n                <span\r\n                    [ngClass]=\"HelptextTooltipIcon\"\r\n                    class=\"ml-1\">\r\n                </span>\r\n            </sac-tooltip>\r\n        </div>\r\n    </div>\r\n</div>\r\n",
                 providers: [
                     {
                         provide: NG_VALUE_ACCESSOR,
@@ -815,7 +866,7 @@ class SacUploadMultipleComponent extends SacUploadMultipleCommon {
 SacUploadMultipleComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sac-uploadmultiple',
-                template: "<div class=\"row form-group\" [class.no-gutters]=\"disablelabel\">\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}_label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div class=\"upload-component\">\r\n      <div class=\"row\">\r\n        <div class=\"col-12\">\r\n          <div\r\n            class=\"btn-group\"\r\n            [class.btn-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n            [class.btn-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n            [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n          >\r\n            <div\r\n              class=\"btn upload-input custom-file\"\r\n              [class.disabled]=\"maxfiles > 0 &&  uploads.length >= maxfiles\"\r\n              [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n              [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n            >\r\n              <i [class]=\"IconBrowse\" class=\"pr-2\"></i>\r\n              <span class=\"upload-browse\">Browse</span>\r\n              <input\r\n                type=\"file\"\r\n                class=\"custom-file-input\"\r\n                #files\r\n                (click)=\"files.value = ''\"\r\n                (uploadxState)=\"onUpload($event)\"\r\n                multiple\r\n                [disabled]=\"maxfiles > 0 &&  uploads.length >= maxfiles\"\r\n              />\r\n            </div>\r\n\r\n            <div\r\n              class=\"btn-group\"\r\n              [class.btn-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n              [class.btn-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n            >\r\n              <!-- image-preview-clear button -->\r\n              <button\r\n                class=\"btn\"\r\n                (click)=\"cancelAll()\"\r\n                [attr.disabled]=\"HasQueueItem() === false ? 'disabled' : null\"\r\n                [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n              >\r\n                <span [class]=\"IconDelete\"></span>\r\n              </button>\r\n              <button\r\n                *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && IsPaused() === false)\"\r\n                class=\"btn\"\r\n                (click)=\"pauseAll()\"\r\n                [attr.disabled]=\"IsUploading() === false ? 'disabled' : null\"\r\n                [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n              >\r\n                <span [class]=\"IconPause\"></span>\r\n              </button>\r\n              <button\r\n                *ngIf=\"autoupload && enablepause && IsPaused() === true\"\r\n                class=\"btn\"\r\n                (click)=\"uploadAll()\"\r\n                [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n              >\r\n                <span [class]=\"IconContinue\"></span>\r\n              </button>\r\n              <button\r\n                *ngIf=\"autoupload === false\"\r\n                class=\"btn text-nowrap\"\r\n                (click)=\"uploadAll()\"\r\n                [attr.disabled]=\"IsStateToUpload() === false ?  'disabled' : null\"\r\n                [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n              >\r\n                <span [class]=\"IconUpload\" class=\"pr-2\"></span> {{\r\n                lngResourceService.GetString(validationKeyService.UploadButtonUpload)\r\n                | async }}\r\n              </button>\r\n            </div>\r\n          </div>\r\n          <div\r\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n            class=\"invalid-feedback\"\r\n          >\r\n            {{ GetErrorMessage() | async }}\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngFor=\"let file of uploads\" style=\"margin-top: 5px\">\r\n        <div\r\n          class=\"input-group upload-component upload-multiple\"\r\n          [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n          [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n        >\r\n          <div\r\n            class=\"form-control upload-progress\"\r\n            [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n          >\r\n            <div class=\"progress\">\r\n              <div\r\n                class=\"progress-bar\"\r\n                [class.progress-bar-success]=\"file.progress===100\"\r\n                role=\"progressbar\"\r\n                [attr.aria-valuenow]=\"file.progress\"\r\n                aria-valuemin=\"0\"\r\n                aria-valuemax=\"100\"\r\n                [style.width.%]=\"file.progress\"\r\n              >\r\n                <span class=\"progress-text text-dark\">{{ file.name }}</span>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"input-group-append\">\r\n            <!-- image-preview-clear button -->\r\n            <button\r\n              class=\"btn\"\r\n              (click)=\"cancel(file.uploadId)\"\r\n              [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n              [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n            >\r\n              <span [class]=\"IconDelete\"></span>\r\n            </button>\r\n            <button\r\n              *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && file.status !== 'paused')\"\r\n              class=\"btn\"\r\n              (click)=\"pause(file.uploadId)\"\r\n              [attr.disabled]=\"file.status !== 'uploading' ? 'disabled' : null\"\r\n              [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n              [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n            >\r\n              <span [class]=\"IconPause\"></span>\r\n            </button>\r\n            <button\r\n              *ngIf=\"autoupload && enablepause && file.status === 'paused'\"\r\n              class=\"btn\"\r\n              (click)=\"upload(file.uploadId)\"\r\n              [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n              [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n            >\r\n              <span [class]=\"IconContinue\"></span>\r\n            </button>\r\n            <button\r\n              *ngIf=\"autoupload === false\"\r\n              class=\"btn text-nowrap\"\r\n              (click)=\"upload(file.uploadId)\"\r\n              [attr.disabled]=\"file.status !== 'added' && file.status !== 'paused' ?  'disabled' : null\"\r\n              [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n              [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n            >\r\n              <span [class]=\"IconUpload\" class=\"pr-2\"></span>{{\r\n              lngResourceService.GetString(validationKeyService.UploadButtonUpload)\r\n              | async }}\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                template: "<div\r\n    id=\"{{ name }}\"\r\n    class=\"row form-group\"\r\n    [class.no-gutters]=\"disablelabel\">\r\n    <label\r\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n        id=\"{{ name }}_label\"\r\n        for=\"{{ name }}_uploadinput\"\r\n        class=\"col-12 col-form-label d-flex\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n        [class.required]=\"isrequired\">\r\n        <div\r\n            class=\"text flex-grow-0\"\r\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\r\n            {{ label }}\r\n        </div>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [ngClass]=\"HelptextTooltipIcon\"\r\n                class=\"ml-1\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\r\n        <div class=\"upload-component\">\r\n            <div class=\"row\">\r\n                <div class=\"col-12\">\r\n                    <div\r\n                        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n                        [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\r\n                        <div\r\n                            class=\"btn-group\"\r\n                            [class.btn-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n                            [class.btn-group-lg]=\"componentHeight === ControlHeight.Large\">\r\n                            <div\r\n                                class=\"btn upload-input custom-file\"\r\n                                [class.disabled]=\"maxfiles > 0 && uploads.length >= maxfiles\"\r\n                                [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                                [class.btn-danger]=\"invalid && (dirty || touched)\">\r\n                                <i\r\n                                    [ngClass]=\"IconBrowse\"\r\n                                    class=\"pr-2\"></i>\r\n                                <span class=\"upload-browse\">Browse</span>\r\n                                <input\r\n                                    type=\"file\"\r\n                                    id=\"{{ name }}_uploadinput\"\r\n                                    class=\"custom-file-input\"\r\n                                    #files\r\n                                    (click)=\"files.value = ''\"\r\n                                    (uploadxState)=\"onUpload($event)\"\r\n                                    multiple\r\n                                    [disabled]=\"maxfiles > 0 && uploads.length >= maxfiles\" />\r\n                            </div>\r\n\r\n                            <div\r\n                                class=\"btn-group\"\r\n                                [class.btn-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n                                [class.btn-group-lg]=\"componentHeight === ControlHeight.Large\">\r\n                                <!-- image-preview-clear button -->\r\n                                <button\r\n                                    class=\"btn\"\r\n                                    (click)=\"cancelAll()\"\r\n                                    [attr.disabled]=\"HasQueueItem() === false ? 'disabled' : null\"\r\n                                    [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                                    [class.btn-danger]=\"invalid && (dirty || touched)\">\r\n                                    <span [ngClass]=\"IconDelete\"></span>\r\n                                </button>\r\n                                <button\r\n                                    *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && IsPaused() === false)\"\r\n                                    class=\"btn\"\r\n                                    (click)=\"pauseAll()\"\r\n                                    [attr.disabled]=\"IsUploading() === false ? 'disabled' : null\"\r\n                                    [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                                    [class.btn-danger]=\"invalid && (dirty || touched)\">\r\n                                    <span [ngClass]=\"IconPause\"></span>\r\n                                </button>\r\n                                <button\r\n                                    *ngIf=\"autoupload && enablepause && IsPaused() === true\"\r\n                                    class=\"btn\"\r\n                                    (click)=\"uploadAll()\"\r\n                                    [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                                    [class.btn-danger]=\"invalid && (dirty || touched)\">\r\n                                    <span [ngClass]=\"IconContinue\"></span>\r\n                                </button>\r\n                                <button\r\n                                    *ngIf=\"autoupload === false\"\r\n                                    class=\"btn text-nowrap\"\r\n                                    (click)=\"uploadAll()\"\r\n                                    [attr.disabled]=\"IsStateToUpload() === false ? 'disabled' : null\"\r\n                                    [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                                    [class.btn-danger]=\"invalid && (dirty || touched)\">\r\n                                    <span\r\n                                        [ngClass]=\"IconUpload\"\r\n                                        class=\"pr-2\"></span>\r\n                                    {{ lngResourceService.GetString(validationKeyService.UploadButtonUpload) | async }}\r\n                                </button>\r\n                            </div>\r\n                        </div>\r\n                        <div\r\n                            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n                            class=\"form-control-plaintext align-self-top ml-2 mr-1 w-auto\"\r\n                            [ngClass]=\"[componentHeight | toControlHeight]\">\r\n                            <sac-tooltip\r\n                                [tooltiptext]=\"helptext\"\r\n                                [inlinemode]=\"true\">\r\n                                <span\r\n                                    [ngClass]=\"HelptextTooltipIcon\"\r\n                                    class=\"ml-1\">\r\n                                </span>\r\n                            </sac-tooltip>\r\n                        </div>\r\n                    </div>\r\n                    <div\r\n                        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n                        class=\"invalid-feedback\">\r\n                        {{ GetErrorMessage() | async }}\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <div\r\n                *ngFor=\"let file of uploads\"\r\n                style=\"margin-top: 5px\">\r\n                <div\r\n                    class=\"input-group upload-component upload-multiple\"\r\n                    [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n                    [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\r\n                    <div\r\n                        class=\"form-control upload-progress\"\r\n                        [class.is-invalid]=\"invalid && (dirty || touched)\">\r\n                        <div class=\"progress\">\r\n                            <div\r\n                                class=\"progress-bar\"\r\n                                [class.progress-bar-success]=\"file.progress === 100\"\r\n                                role=\"progressbar\"\r\n                                [attr.aria-valuenow]=\"file.progress\"\r\n                                aria-valuemin=\"0\"\r\n                                aria-valuemax=\"100\"\r\n                                [style.width.%]=\"file.progress\">\r\n                                <span class=\"progress-text text-dark\">{{ file.name }}</span>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"input-group-append\">\r\n                        <!-- image-preview-clear button -->\r\n                        <button\r\n                            class=\"btn\"\r\n                            (click)=\"cancel(file.uploadId)\"\r\n                            [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                            [class.btn-danger]=\"invalid && (dirty || touched)\">\r\n                            <span [class]=\"IconDelete\"></span>\r\n                        </button>\r\n                        <button\r\n                            *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && file.status !== 'paused')\"\r\n                            class=\"btn\"\r\n                            (click)=\"pause(file.uploadId)\"\r\n                            [attr.disabled]=\"file.status !== 'uploading' ? 'disabled' : null\"\r\n                            [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                            [class.btn-danger]=\"invalid && (dirty || touched)\">\r\n                            <span [class]=\"IconPause\"></span>\r\n                        </button>\r\n                        <button\r\n                            *ngIf=\"autoupload && enablepause && file.status === 'paused'\"\r\n                            class=\"btn\"\r\n                            (click)=\"upload(file.uploadId)\"\r\n                            [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                            [class.btn-danger]=\"invalid && (dirty || touched)\">\r\n                            <span [class]=\"IconContinue\"></span>\r\n                        </button>\r\n                        <button\r\n                            *ngIf=\"autoupload === false\"\r\n                            class=\"btn text-nowrap\"\r\n                            (click)=\"upload(file.uploadId)\"\r\n                            [attr.disabled]=\"file.status !== 'added' && file.status !== 'paused' ? 'disabled' : null\"\r\n                            [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                            [class.btn-danger]=\"invalid && (dirty || touched)\">\r\n                            <span\r\n                                [class]=\"IconUpload\"\r\n                                class=\"pr-2\"></span\r\n                            >{{ lngResourceService.GetString(validationKeyService.UploadButtonUpload) | async }}\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <small\r\n            *ngIf=\"helptextmode === 'text' && helptext\"\r\n            class=\"form-text text-muted\">\r\n            {{ helptext }}\r\n        </small>\r\n    </div>\r\n</div>\r\n",
                 providers: [
                     {
                         provide: NG_VALUE_ACCESSOR,
@@ -848,7 +899,12 @@ SACBootstrap4UploadModule.decorators = [
                     SacDropzoneSingleComponent,
                     SacDropzoneMultipleComponent,
                 ],
-                imports: [CommonModule, FormsModule, SACBootstrap4LayoutModule],
+                imports: [
+                    CommonModule,
+                    FormsModule,
+                    SACBootstrap4LayoutModule,
+                    SACBootstrap4TooltipModule,
+                ],
                 exports: [
                     SacUploadComponent,
                     SacUploadMultipleComponent,
@@ -997,7 +1053,7 @@ class SacCheckboxComponent extends SacCheckboxCommon {
 SacCheckboxComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sac-checkbox',
-                template: "<div\r\n  class=\"row\"\r\n  [class.no-gutters]=\"disablelabel\"\r\n  [class.form-group]=\"!stacked\"\r\n>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\r\n  >\r\n    <label\r\n      *ngIf=\"!disablelabel && !stacked\"\r\n      for=\"{{name}}\"\r\n      class=\"col-form-label\"\r\n      [ngClass]=\"componentHeight | toLabelHeight\"\r\n      >{{label}}</label\r\n    >\r\n  </div>\r\n  <div\r\n    class=\"align-self-center col-12\"\r\n    [ngClass]=\"[!disablelabel && !stacked ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"form-check\"\r\n      [class.form-check-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.form-check-lg]=\"componentHeight === ControlHeight.Large\"\r\n    >\r\n      <input\r\n        class=\"form-check-input\"\r\n        [class.form-check-input-sm]=\"componentHeight === ControlHeight.Small\"\r\n        [class.form-check-input-lg]=\"componentHeight === ControlHeight.Large\"\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"checkbox\"\r\n        [checked]=\"value\"\r\n        (blur)=\"onTouch()\"\r\n        (change)=\"setValue($event.target.checked)\"\r\n        [disabled]=\"isdisabled\"\r\n      />\r\n      <label\r\n        for=\"{{name}}\"\r\n        class=\"form-check-label\"\r\n        [class.form-check-label-sm]=\"componentHeight === ControlHeight.Small\"\r\n        [class.form-check-label-lg]=\"componentHeight === ControlHeight.Large\"\r\n      >\r\n        <ng-container *ngIf=\"checkboxtext\">{{checkboxtext}}</ng-container>\r\n      </label>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                template: "<div\r\n    class=\"row\"\r\n    [class.no-gutters]=\"disablelabel\"\r\n    [class.form-group]=\"!stacked\">\r\n    <div\r\n        class=\"col-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\">\r\n        <label\r\n            *ngIf=\"!disablelabel && !stacked\"\r\n            for=\"{{ name }}\"\r\n            class=\"col-form-label d-flex\"\r\n            [ngClass]=\"componentHeight | toLabelHeight\">\r\n            <div\r\n                class=\"text flex-grow-0\"\r\n                [class.flex-sm-grow-1]=\"splitlabelandhelptext\"\r\n                >{{ label }}</div\r\n            >\r\n            <sac-tooltip\r\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n                [tooltiptext]=\"helptext\"\r\n                [inlinemode]=\"true\"\r\n                ><span\r\n                    [ngClass]=\"HelptextTooltipIcon\"\r\n                    class=\"ml-1\">\r\n                </span>\r\n            </sac-tooltip>\r\n        </label>\r\n    </div>\r\n    <div\r\n        class=\"align-self-center col-12\"\r\n        [ngClass]=\"[!disablelabel && !stacked ? (this.labelSizes | toControlWidthCss) : '']\">\r\n        <div\r\n            [class.form-check]=\"checkboxstyle === 'checkbox'\"\r\n            [class.custom-control]=\"checkboxstyle === 'switch'\"\r\n            [class.custom-switch]=\"checkboxstyle === 'switch'\"\r\n            [class.form-check-sm]=\"componentHeight === ControlHeight.Small\"\r\n            [class.form-check-lg]=\"componentHeight === ControlHeight.Large\">\r\n            <input\r\n                [class.form-check-input]=\"checkboxstyle === 'checkbox'\"\r\n                [class.custom-control-input]=\"checkboxstyle === 'switch'\"\r\n                [class.form-check-input-sm]=\"componentHeight === ControlHeight.Small\"\r\n                [class.form-check-input-lg]=\"componentHeight === ControlHeight.Large\"\r\n                id=\"{{ name }}\"\r\n                name=\"{{ name }}\"\r\n                type=\"checkbox\"\r\n                [checked]=\"value\"\r\n                (blur)=\"onTouch()\"\r\n                (change)=\"setValue($event.target.checked)\"\r\n                [disabled]=\"isdisabled\" />\r\n            <label\r\n                for=\"{{ name }}\"\r\n                [class.form-check-label]=\"checkboxstyle === 'checkbox'\"\r\n                [class.custom-control-label]=\"checkboxstyle === 'switch'\"\r\n                [class.form-check-label-sm]=\"componentHeight === ControlHeight.Small\"\r\n                [class.form-check-label-lg]=\"componentHeight === ControlHeight.Large\">\r\n                <ng-container *ngIf=\"checkboxtext\">{{ checkboxtext }}</ng-container>\r\n            </label>\r\n\r\n            <div\r\n                *ngIf=\"helptextmode === 'tooltip' && helptext && (disablelabel || stacked)\"\r\n                class=\"ml-2 mr-1 d-inline-block\"\r\n                [class.form-check-label-sm]=\"componentHeight === ControlHeight.Small\"\r\n                [class.form-check-label-lg]=\"componentHeight === ControlHeight.Large\">\r\n                <sac-tooltip\r\n                    [tooltiptext]=\"helptext\"\r\n                    [inlinemode]=\"true\">\r\n                    <span\r\n                        [ngClass]=\"HelptextTooltipIcon\"\r\n                        class=\"ml-1\">\r\n                    </span>\r\n                </sac-tooltip>\r\n            </div>\r\n        </div>\r\n        <small\r\n            *ngIf=\"helptextmode === 'text' && helptext\"\r\n            class=\"form-text text-muted\">\r\n            {{ helptext }}\r\n        </small>\r\n    </div>\r\n</div>\r\n",
                 // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                 providers: [
                     {
@@ -1036,7 +1092,7 @@ class SacRadiobuttonsComponent extends SacRadiobuttonsCommon {
 SacRadiobuttonsComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sac-radiobuttons',
-                template: "<div class=\"row form-group\">\r\n  <div\r\n    *ngIf=\"disablelabel === false\"\r\n    class=\"col-12 pt-0\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\r\n  >\r\n    <label\r\n      class=\"col-form-label\"\r\n      [ngClass]=\"componentHeight | toLabelHeight\"\r\n      *ngIf=\"!disablelabel\"\r\n      >{{label}}</label\r\n    >\r\n  </div>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n    [class.pt-1]=\"componentHeight === ControlHeight.Small\"\r\n    [class.pt-2]=\"componentHeight !== ControlHeight.Small\"\r\n  >\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n",
+                template: "<div class=\"row form-group\">\r\n    <div\r\n        *ngIf=\"disablelabel === false\"\r\n        class=\"col-12 pt-0\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\">\r\n        <label\r\n            class=\"col-form-label d-flex\"\r\n            [ngClass]=\"componentHeight | toLabelHeight\"\r\n            *ngIf=\"!disablelabel\">\r\n            <div\r\n                class=\"text flex-grow-0\"\r\n                [class.flex-sm-grow-1]=\"splitlabelandhelptext\"\r\n                >{{ label }}</div\r\n            >\r\n            <sac-tooltip\r\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n                [tooltiptext]=\"helptext\"\r\n                [inlinemode]=\"true\">\r\n                <span\r\n                    [ngClass]=\"HelptextTooltipIcon\"\r\n                    class=\"ml-1\">\r\n                </span>\r\n            </sac-tooltip>\r\n        </label>\r\n    </div>\r\n    <div\r\n        class=\"col-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [class.pt-1]=\"componentHeight === ControlHeight.Small\"\r\n        [class.pt-2]=\"componentHeight !== ControlHeight.Small\">\r\n        <ng-content></ng-content>\r\n        <small\r\n            *ngIf=\"helptextmode === 'text' && helptext\"\r\n            class=\"form-text text-muted\">\r\n            {{ helptext }}\r\n        </small>\r\n    </div>\r\n</div>\r\n",
                 // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                 providers: [
                     {
@@ -1061,23 +1117,28 @@ SacRadiobuttonsComponent.ctorParameters = () => [
  * Radiobutton Komponente
  */
 class SacRadiobuttonComponent extends SacRadiobuttonCommon {
+    // #region Constructors
     /**
      * Konstruktor
      * @param SacRadioButtons Radio Buttons Group Komponente
+     * @param formlayout SacFormLayoutCommon to define scoped layout settings
+     * @param injector Injector for injecting services
      */
-    constructor(sacRadioButtons) {
-        super(sacRadioButtons);
+    constructor(sacRadioButtons, formLayout, injector) {
+        super(sacRadioButtons, formLayout, injector);
     }
 }
 SacRadiobuttonComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sac-radiobutton',
-                template: "<div\r\n  class=\"form-check\"\r\n  [class.form-check-sm]=\"componentHeight === ControlHeight.Small\"\r\n  [class.form-check-lg]=\"componentHeight === ControlHeight.Large\"\r\n  *ngIf=\"hidden===false\"\r\n>\r\n  <input\r\n    id=\"{{getName}}_{{getIndex}}\"\r\n    name=\"{{getName}}\"\r\n    type=\"radio\"\r\n    class=\"form-check-input\"\r\n    [class.form-check-input-sm]=\"componentHeight === ControlHeight.Small\"\r\n    [class.form-check-input-lg]=\"componentHeight === ControlHeight.Large\"\r\n    [value]=\"value\"\r\n    [checked]=\"checked\"\r\n    (change)=\"ChangeEvent()\"\r\n    [disabled]=\"isDisabled\"\r\n  />\r\n  <label\r\n    for=\"{{getName}}_{{getIndex}}\"\r\n    class=\"form-check-label\"\r\n    [class.form-check-label-sm]=\"componentHeight === ControlHeight.Small\"\r\n    [class.form-check-label-lg]=\"componentHeight === ControlHeight.Large\"\r\n  >\r\n    <ng-template\r\n      *ngTemplateOutlet=\"labeltemplate || defaultItemLabelTemplate;context:{ label: label }\"\r\n    >\r\n    </ng-template>\r\n  </label>\r\n</div>\r\n\r\n<ng-template #defaultItemLabelTemplate let-label=\"label\">{{label}}</ng-template>\r\n",
+                template: "<div\r\n    class=\"form-check\"\r\n    [class.form-check-sm]=\"componentHeight === ControlHeight.Small\"\r\n    [class.form-check-lg]=\"componentHeight === ControlHeight.Large\"\r\n    *ngIf=\"hidden === false\">\r\n    <input\r\n        id=\"{{ getName }}_{{ getIndex }}\"\r\n        name=\"{{ getName }}\"\r\n        type=\"radio\"\r\n        class=\"form-check-input\"\r\n        [class.form-check-input-sm]=\"componentHeight === ControlHeight.Small\"\r\n        [class.form-check-input-lg]=\"componentHeight === ControlHeight.Large\"\r\n        [value]=\"value\"\r\n        [checked]=\"checked\"\r\n        (change)=\"ChangeEvent()\"\r\n        [disabled]=\"isDisabled\" />\r\n    <label\r\n        for=\"{{ getName }}_{{ getIndex }}\"\r\n        class=\"form-check-label\"\r\n        [class.form-check-label-sm]=\"componentHeight === ControlHeight.Small\"\r\n        [class.form-check-label-lg]=\"componentHeight === ControlHeight.Large\">\r\n        <ng-template *ngTemplateOutlet=\"labeltemplate || defaultItemLabelTemplate; context: { label: label }\"> </ng-template>\r\n    </label>\r\n    <small\r\n        *ngIf=\"helptextmode === 'text' && helptext\"\r\n        class=\"form-text text-muted\">\r\n        {{ helptext }}\r\n    </small>\r\n    <div\r\n        *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n        class=\"ml-2 mr-1 d-inline-block\"\r\n        [class.form-check-label-sm]=\"componentHeight === ControlHeight.Small\"\r\n        [class.form-check-label-lg]=\"componentHeight === ControlHeight.Large\">\r\n        <sac-tooltip\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [ngClass]=\"HelptextTooltipIcon\"\r\n                class=\"ml-1\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </div>\r\n</div>\r\n\r\n<ng-template\r\n    #defaultItemLabelTemplate\r\n    let-label=\"label\">\r\n    <ng-container>{{ label }}</ng-container>\r\n</ng-template>\r\n",
                 styles: [".form-check-lg{padding-left:1.75rem}.form-check-input{height:1rem;width:1rem}.form-check-input-sm{height:.875rem;margin-top:.4rem;width:.875rem}.form-check-input-lg{height:1.25rem;margin-left:-1.75rem;margin-top:.4rem;width:1.25rem}.form-check-label-sm{font-size:.875rem}.form-check-label-lg{font-size:1.25rem}"]
             },] }
 ];
 SacRadiobuttonComponent.ctorParameters = () => [
-    { type: SacRadiobuttonsComponent, decorators: [{ type: Host }] }
+    { type: SacRadiobuttonsComponent, decorators: [{ type: Host }] },
+    { type: SacFormLayoutDirective, decorators: [{ type: Host }, { type: Optional }] },
+    { type: Injector }
 ];
 
 class SACBootstrap4CheckboxModule {
@@ -1089,7 +1150,11 @@ SACBootstrap4CheckboxModule.decorators = [
                     SacRadiobuttonComponent,
                     SacRadiobuttonsComponent,
                 ],
-                imports: [CommonModule, SACBootstrap4LayoutModule],
+                imports: [
+                    CommonModule,
+                    SACBootstrap4LayoutModule,
+                    SACBootstrap4TooltipModule,
+                ],
                 exports: [
                     SacCheckboxComponent,
                     SacRadiobuttonComponent,
@@ -1098,10 +1163,7 @@ SACBootstrap4CheckboxModule.decorators = [
             },] }
 ];
 
-/**
- * Referenz auf Moment.JS
- */
-const moment = moment_;
+// #region Classes
 /**
  * Komponente für Datumauswahl
  */
@@ -1112,15 +1174,16 @@ class SacDateComponent extends SacDateCommon {
      * @param formLayout SacFormLayout to define scoped layout settings
      * @param injector Injector for injecting services
      * @param elementRef Reference to html dom element
+     * @param cdRef  Change Dectection Servie
      */
-    constructor(formLayout, injector, elementRef) {
-        super(formLayout, injector, elementRef);
+    constructor(formLayout, injector, elementRef, cdRef) {
+        super(formLayout, injector, elementRef, cdRef);
     }
 }
 SacDateComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sac-date',
-                template: "<div class=\"row form-group\" [class.no-gutters]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group\"\r\n      [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n      [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      <input\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        [imask]=\"imaskDate\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        [value]=\"valuestring\"\r\n        [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n        [ngClass]=\"[componentHeight | toControlHeight]\"\r\n        (blur)=\"onTouch()\"\r\n        (accept)=\"setValueString($event)\"\r\n        [disabled]=\"isdisabled\"\r\n      />\r\n      <div class=\"input-group-append\">\r\n        <button\r\n          class=\"btn btn-secondary\"\r\n          type=\"button\"\r\n          (click)=\"showDateSelector()\"\r\n          [disabled]=\"isdisabled\"\r\n        >\r\n          <i [class]=\"IconSelector\"></i>\r\n        </button>\r\n      </div>\r\n      <div\r\n        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n        class=\"invalid-feedback\"\r\n      >\r\n        {{ GetErrorMessage() | async }}\r\n      </div>\r\n    </div>\r\n    <div\r\n      class=\"popover fade bs-popover-bottom show\"\r\n      role=\"tooltip\"\r\n      *ngIf=\"_showselector\"\r\n      style=\"\r\n        display: block;\r\n        left: unset;\r\n        right: 0px;\r\n        top: unset;\r\n        max-width: 325px;\r\n      \"\r\n    >\r\n      <div\r\n        class=\"arrow\"\r\n        style=\"left: unset\"\r\n        [style.right.rem]=\"componentHeight === ControlHeight.Small ? 1.1 : componentHeight === ControlHeight.Large ? 1.8 : 1.4\"\r\n      ></div>\r\n      <h3 class=\"popover-header\" style=\"display: none\"></h3>\r\n      <div class=\"popover-body\">\r\n        <sac-dateselector\r\n          [initialvalue]=\"value\"\r\n          (selectdate)=\"dateselect($event)\"\r\n          dateselection=\"true\"\r\n        ></sac-dateselector>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                template: "<div\r\n    class=\"row form-group\"\r\n    [class.no-gutters]=\"disablelabel\">\r\n    <label\r\n        for=\"{{ name }}\"\r\n        class=\"col-12 col-form-label d-flex\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n        [class.required]=\"isrequired\">\r\n        <div\r\n            class=\"text flex-grow-0\"\r\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\r\n            {{ label }}\r\n        </div>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [ngClass]=\"HelptextTooltipIcon\"\r\n                class=\"ml-1\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n            <div\r\n                class=\"input-group\"\r\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n                [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\r\n                <input\r\n                    id=\"{{ name }}\"\r\n                    name=\"{{ name }}\"\r\n                    type=\"text\"\r\n                    class=\"form-control\"\r\n                    [imask]=\"imaskDate\"\r\n                    [attr.placeholder]=\"placeholder\"\r\n                    [value]=\"valuestring\"\r\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n                    [ngClass]=\"[componentHeight | toControlHeight]\"\r\n                    (blur)=\"onTouch()\"\r\n                    (accept)=\"setValueString($event)\"\r\n                    [disabled]=\"isdisabled\" />\r\n                <div class=\"input-group-append\">\r\n                    <button\r\n                        #pickerbutton\r\n                        class=\"btn btn-secondary\"\r\n                        type=\"button\"\r\n                        (click)=\"showDateSelector()\"\r\n                        [disabled]=\"isdisabled\">\r\n                        <i [class]=\"IconSelector\"></i>\r\n                    </button>\r\n                </div>\r\n                <div\r\n                    *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n                    class=\"invalid-feedback\">\r\n                    {{ GetErrorMessage() | async }}\r\n                </div>\r\n            </div>\r\n            <small\r\n                *ngIf=\"helptextmode === 'text' && helptext\"\r\n                class=\"form-text text-muted\">\r\n                {{ helptext }}\r\n            </small>\r\n            <div\r\n                #picker\r\n                *ngIf=\"_showselector\">\r\n                <div\r\n                    class=\"popover fade show position-absolute m-0\"\r\n                    role=\"tooltip\"\r\n                    *ngIf=\"_showselector\"\r\n                    [class.bs-popover-bottom]=\"GetPickerPosition() == TooltipPosition.bottom || GetPickerPosition() == TooltipPosition.bottomend\"\r\n                    [class.bs-popover-top]=\"GetPickerPosition() == TooltipPosition.top || GetPickerPosition() == TooltipPosition.topend\"\r\n                    [style.left.px]=\"posPopupLeft\"\r\n                    [style.top.px]=\"posPopupTop\">\r\n                    <div\r\n                        #pickerarrow\r\n                        class=\"arrow position-absolute m-0\"\r\n                        style=\"left: unset\"\r\n                        [style.top.px]=\"posArrowTop\"\r\n                        [style.left.px]=\"posArrowLeft\">\r\n                    </div>\r\n\r\n                    <div class=\"popover-body\">\r\n                        <sac-dateselector\r\n                            [initialvalue]=\"value\"\r\n                            (selectdate)=\"dateselect($event)\"\r\n                            dateselection=\"true\"></sac-dateselector>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n            class=\"form-control-plaintext align-self-top ml-2 mr-1 w-auto\"\r\n            [ngClass]=\"[componentHeight | toControlHeight]\">\r\n            <sac-tooltip\r\n                [tooltiptext]=\"helptext\"\r\n                [inlinemode]=\"true\">\r\n                <span\r\n                    [ngClass]=\"HelptextTooltipIcon\"\r\n                    class=\"ml-1\">\r\n                </span>\r\n            </sac-tooltip>\r\n        </div>\r\n    </div>\r\n</div>\r\n",
                 // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                 providers: [
                     {
@@ -1139,8 +1202,16 @@ SacDateComponent.decorators = [
 SacDateComponent.ctorParameters = () => [
     { type: SacFormLayoutDirective, decorators: [{ type: Host }, { type: Optional }] },
     { type: Injector },
-    { type: ElementRef }
-];
+    { type: ElementRef },
+    { type: ChangeDetectorRef }
+];
+// #endregion Classes
+// #region Variables
+/**
+ * Referenz auf Moment.JS
+ */
+const moment = moment_;
+// #endregion Variables
 
 /**
  * DateTime Selektor Komponente
@@ -1164,15 +1235,16 @@ class SacDateTimeComponent extends SacDateTimeCommon {
      * @param formLayout SacFormLayout to define scoped layout settings
      * @param injector Injector for injecting services
      * @param elementRef Reference to html dom element
+     * @param cdRef  Change Dectection Servie
      */
-    constructor(formLayout, injector, elementRef) {
-        super(formLayout, injector, elementRef);
+    constructor(formLayout, injector, elementRef, cdRef) {
+        super(formLayout, injector, elementRef, cdRef);
     }
 }
 SacDateTimeComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sac-datetime',
-                template: "<div class=\"row form-group\" [class.no-gutters]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group\"\r\n      [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n      [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      <input\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        [imask]=\"imaskDate\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        [value]=\"valuestring\"\r\n        [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n        [ngClass]=\"[componentHeight | toControlHeight]\"\r\n        (blur)=\"onTouch()\"\r\n        (accept)=\"setValueString($event)\"\r\n        [disabled]=\"isdisabled\"\r\n      />\r\n      <div class=\"input-group-append\">\r\n        <button\r\n          class=\"btn btn-secondary\"\r\n          type=\"button\"\r\n          (click)=\"showDateSelector()\"\r\n          [disabled]=\"isdisabled\"\r\n        >\r\n          <i [class]=\"IconSelector\"></i>\r\n        </button>\r\n      </div>\r\n      <div\r\n        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n        class=\"invalid-feedback\"\r\n      >\r\n        {{ GetErrorMessage() | async }}\r\n      </div>\r\n    </div>\r\n    <div\r\n      class=\"popover fade bs-popover-bottom show\"\r\n      role=\"tooltip\"\r\n      *ngIf=\"_showselector\"\r\n      style=\"\r\n        display: block;\r\n        left: unset;\r\n        right: 0px;\r\n        top: unset;\r\n        max-width: 325px;\r\n      \"\r\n    >\r\n      <div\r\n        class=\"arrow\"\r\n        style=\"left: unset\"\r\n        [style.right.rem]=\"componentHeight === ControlHeight.Small ? 1.1 : componentHeight === ControlHeight.Large ? 1.8 : 1.4\"\r\n      ></div>\r\n      <h3 class=\"popover-header\" style=\"display: none\"></h3>\r\n      <div class=\"popover-body\">\r\n        <sac-dateselector\r\n          [initialvalue]=\"value\"\r\n          (selectdate)=\"dateselect($event)\"\r\n          dateselection=\"true\"\r\n          timeselection=\"true\"\r\n        ></sac-dateselector>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                template: "<div\r\n    class=\"row form-group\"\r\n    [class.no-gutters]=\"disablelabel\">\r\n    <label\r\n        for=\"{{ name }}\"\r\n        class=\"col-12 col-form-label d-flex\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n        [class.required]=\"isrequired\">\r\n        <div\r\n            class=\"text flex-grow-0\"\r\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\r\n            {{ label }}\r\n        </div>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\"\r\n            ><span\r\n                [ngClass]=\"HelptextTooltipIcon\"\r\n                class=\"ml-1\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n            <div\r\n                class=\"input-group\"\r\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n                [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\r\n                <input\r\n                    id=\"{{ name }}\"\r\n                    name=\"{{ name }}\"\r\n                    type=\"text\"\r\n                    class=\"form-control\"\r\n                    [imask]=\"imaskDate\"\r\n                    [attr.placeholder]=\"placeholder\"\r\n                    [value]=\"valuestring\"\r\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n                    [ngClass]=\"[componentHeight | toControlHeight]\"\r\n                    (blur)=\"onTouch()\"\r\n                    (accept)=\"setValueString($event)\"\r\n                    [disabled]=\"isdisabled\" />\r\n                <div class=\"input-group-append\">\r\n                    <button\r\n                        #pickerbutton\r\n                        class=\"btn btn-secondary\"\r\n                        type=\"button\"\r\n                        (click)=\"showDateSelector()\"\r\n                        [disabled]=\"isdisabled\">\r\n                        <i [class]=\"IconSelector\"></i>\r\n                    </button>\r\n                </div>\r\n                <div\r\n                    *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n                    class=\"invalid-feedback\">\r\n                    {{ GetErrorMessage() | async }}\r\n                </div>\r\n            </div>\r\n            <small\r\n                *ngIf=\"helptextmode === 'text' && helptext\"\r\n                class=\"form-text text-muted\">\r\n                {{ helptext }}\r\n            </small>\r\n\r\n            <div\r\n                #picker\r\n                *ngIf=\"_showselector\"\r\n                ><div\r\n                    class=\"popover fade show position-absolute m-0\"\r\n                    role=\"tooltip\"\r\n                    [class.bs-popover-bottom]=\"GetPickerPosition() == TooltipPosition.bottom || GetPickerPosition() == TooltipPosition.bottomend\"\r\n                    [class.bs-popover-top]=\"GetPickerPosition() == TooltipPosition.top || GetPickerPosition() == TooltipPosition.topend\"\r\n                    [style.left.px]=\"posPopupLeft\"\r\n                    [style.top.px]=\"posPopupTop\">\r\n                    <div\r\n                        #pickerarrow\r\n                        class=\"arrow position-absolute m-0\"\r\n                        style=\"left: unset\"\r\n                        [style.top.px]=\"posArrowTop\"\r\n                        [style.left.px]=\"posArrowLeft\">\r\n                    </div>\r\n                    <div class=\"popover-body\">\r\n                        <sac-dateselector\r\n                            [initialvalue]=\"value\"\r\n                            (selectdate)=\"dateselect($event)\"\r\n                            dateselection=\"true\"\r\n                            timeselection=\"true\"></sac-dateselector>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n            class=\"form-control-plaintext align-self-top ml-2 mr-1 w-auto\"\r\n            [ngClass]=\"[componentHeight | toControlHeight]\">\r\n            <sac-tooltip\r\n                [tooltiptext]=\"helptext\"\r\n                [inlinemode]=\"true\">\r\n                <span\r\n                    [ngClass]=\"HelptextTooltipIcon\"\r\n                    class=\"ml-1\">\r\n                </span>\r\n            </sac-tooltip>\r\n        </div>\r\n    </div>\r\n</div>\r\n",
                 // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                 providers: [
                     {
@@ -1191,7 +1263,8 @@ SacDateTimeComponent.decorators = [
 SacDateTimeComponent.ctorParameters = () => [
     { type: SacFormLayoutDirective, decorators: [{ type: Host }, { type: Optional }] },
     { type: Injector },
-    { type: ElementRef }
+    { type: ElementRef },
+    { type: ChangeDetectorRef }
 ];
 
 /**
@@ -1204,15 +1277,16 @@ class SacTimeComponent extends SacTimeCommon {
      * @param formLayout SacFormLayout to define scoped layout settings
      * @param injector Injector for injecting services
      * @param elementRef Reference to html dom element
+     * @param cdRef  Change Dectection Servie
      */
-    constructor(formLayout, injector, elementRef) {
-        super(formLayout, injector, elementRef);
+    constructor(formLayout, injector, elementRef, cdRef) {
+        super(formLayout, injector, elementRef, cdRef);
     }
 }
 SacTimeComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sac-time',
-                template: "<div class=\"row form-group\" [class.no-gutters]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group\"\r\n      [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n      [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      <input\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        [imask]=\"imaskDate\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        [value]=\"valuestring\"\r\n        [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n        [ngClass]=\"[componentHeight | toControlHeight]\"\r\n        (blur)=\"onTouch()\"\r\n        (accept)=\"setValueString($event)\"\r\n        [disabled]=\"isdisabled\"\r\n      />\r\n      <div class=\"input-group-append\">\r\n        <button\r\n          class=\"btn btn-secondary\"\r\n          type=\"button\"\r\n          (click)=\"showTimeSelector()\"\r\n          [disabled]=\"isdisabled\"\r\n        >\r\n          <i [class]=\"IconSelector\"></i>\r\n        </button>\r\n      </div>\r\n      <div\r\n        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n        class=\"invalid-feedback\"\r\n      >\r\n        {{ GetErrorMessage() | async }}\r\n      </div>\r\n    </div>\r\n    <div\r\n      class=\"popover fade bs-popover-bottom show\"\r\n      role=\"tooltip\"\r\n      *ngIf=\"_showselector\"\r\n      style=\"\r\n        display: block;\r\n        left: unset;\r\n        right: 0px;\r\n        top: unset;\r\n        max-width: 325px;\r\n      \"\r\n    >\r\n      <div\r\n        class=\"arrow\"\r\n        style=\"left: unset\"\r\n        [style.right.rem]=\"componentHeight === ControlHeight.Small ? 1.1 : componentHeight === ControlHeight.Large ? 1.8 : 1.4\"\r\n      ></div>\r\n      <h3 class=\"popover-header\" style=\"display: none\"></h3>\r\n      <div class=\"popover-body\">\r\n        <sac-dateselector\r\n          [initialvalue]=\"value\"\r\n          (selectdate)=\"timeselect($event)\"\r\n          timeselection=\"true\"\r\n        ></sac-dateselector>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                template: "<div\r\n    class=\"row form-group\"\r\n    [class.no-gutters]=\"disablelabel\">\r\n    <label\r\n        for=\"{{ name }}\"\r\n        class=\"col-12 col-form-label d-flex\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n        [class.required]=\"isrequired\">\r\n        <div\r\n            class=\"text flex-grow-0\"\r\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\r\n            {{ label }}\r\n        </div>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\"\r\n            ><span\r\n                [ngClass]=\"HelptextTooltipIcon\"\r\n                class=\"ml-1\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n            <div\r\n                class=\"input-group\"\r\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n                [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\r\n                <input\r\n                    id=\"{{ name }}\"\r\n                    name=\"{{ name }}\"\r\n                    type=\"text\"\r\n                    class=\"form-control\"\r\n                    [imask]=\"imaskDate\"\r\n                    [attr.placeholder]=\"placeholder\"\r\n                    [value]=\"valuestring\"\r\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n                    [ngClass]=\"[componentHeight | toControlHeight]\"\r\n                    (blur)=\"onTouch()\"\r\n                    (accept)=\"setValueString($event)\"\r\n                    [disabled]=\"isdisabled\" />\r\n                <div class=\"input-group-append\">\r\n                    <button\r\n                        #pickerbutton\r\n                        class=\"btn btn-secondary\"\r\n                        type=\"button\"\r\n                        (click)=\"showTimeSelector()\"\r\n                        [disabled]=\"isdisabled\">\r\n                        <i [class]=\"IconSelector\"></i>\r\n                    </button>\r\n                </div>\r\n                <div\r\n                    *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n                    class=\"invalid-feedback\">\r\n                    {{ GetErrorMessage() | async }}\r\n                </div>\r\n            </div>\r\n            <small\r\n                *ngIf=\"helptextmode === 'text' && helptext\"\r\n                class=\"form-text text-muted\">\r\n                {{ helptext }}\r\n            </small>\r\n            <div\r\n                #picker\r\n                *ngIf=\"_showselector\">\r\n                <div\r\n                    class=\"popover fade show position-absolute m-0\"\r\n                    role=\"tooltip\"\r\n                    [class.bs-popover-bottom]=\"GetPickerPosition() == TooltipPosition.bottom || GetPickerPosition() == TooltipPosition.bottomend\"\r\n                    [class.bs-popover-top]=\"GetPickerPosition() == TooltipPosition.top || GetPickerPosition() == TooltipPosition.topend\"\r\n                    [style.left.px]=\"posPopupLeft\"\r\n                    [style.top.px]=\"posPopupTop\">\r\n                    <div\r\n                        #pickerarrow\r\n                        class=\"arrow position-absolute m-0\"\r\n                        style=\"left: unset\"\r\n                        [style.top.px]=\"posArrowTop\"\r\n                        [style.left.px]=\"posArrowLeft\">\r\n                    </div>\r\n\r\n                    <div class=\"popover-body\">\r\n                        <sac-dateselector\r\n                            [initialvalue]=\"value\"\r\n                            (selectdate)=\"timeselect($event)\"\r\n                            timeselection=\"true\"></sac-dateselector>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n            class=\"form-control-plaintext align-self-top ml-2 mr-1 w-auto\"\r\n            [ngClass]=\"[componentHeight | toControlHeight]\">\r\n            <sac-tooltip\r\n                [tooltiptext]=\"helptext\"\r\n                [inlinemode]=\"true\">\r\n                <span\r\n                    [ngClass]=\"HelptextTooltipIcon\"\r\n                    class=\"ml-1\">\r\n                </span>\r\n            </sac-tooltip>\r\n        </div>\r\n    </div>\r\n</div>\r\n",
                 // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                 providers: [
                     {
@@ -1231,7 +1305,8 @@ SacTimeComponent.decorators = [
 SacTimeComponent.ctorParameters = () => [
     { type: SacFormLayoutDirective, decorators: [{ type: Host }, { type: Optional }] },
     { type: Injector },
-    { type: ElementRef }
+    { type: ElementRef },
+    { type: ChangeDetectorRef }
 ];
 
 class SACBootstrap4DateTimeModule {
@@ -1244,7 +1319,12 @@ SACBootstrap4DateTimeModule.decorators = [
                     SacTimeComponent,
                     SacDateSelectorComponent,
                 ],
-                imports: [CommonModule, IMaskModule, SACBootstrap4LayoutModule],
+                imports: [
+                    CommonModule,
+                    IMaskModule,
+                    SACBootstrap4LayoutModule,
+                    SACBootstrap4TooltipModule,
+                ],
                 exports: [
                     SacDateComponent,
                     SacDateTimeComponent,
@@ -1275,7 +1355,7 @@ class SacGridComponent extends SacGridCommon {
 SacGridComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sac-grid',
-                template: "<div class=\"table-responsive\">\r\n  <table class=\"table table-striped table-hover\" id={{name}}>\r\n    <thead class=\"thead-light\">\r\n      <tr>\r\n        <ng-container *ngTemplateOutlet=\"template; context { row: {}, type: 'header'}\">\r\n        </ng-container>\r\n      </tr>\r\n    </thead>\r\n    <tbody>\r\n      <ng-container *ngFor=\"let item of value; let i=index\">\r\n        <tr>\r\n          <ng-container *ngTemplateOutlet=\"template; context { row: item, type: 'body'}\">\r\n          </ng-container>\r\n        </tr>\r\n      </ng-container>\r\n      <tr *ngIf=\"value === undefined || value === null || value.length===0\">\r\n        <td [attr.colspan]=\"ColumnCount\">{{emptytext}}</td>\r\n      </tr>\r\n      <tr>\r\n        <td [attr.colspan]=\"ColumnCount\">\r\n          <div class=\"container-fluid\">\r\n            <sac-paging name=\"{{name}}Paging\" (paging)=\"pageChange($event)\" [pagerdata]=\"pagerdata\" [pagesizes]=\"pagesizes\" [pagingtext]=\"pagingtext\" [pagesizetext]=\"pagesizetext\" [pagesizedisabled]=\"pagesizedisabled\"></sac-paging>\r\n          </div>\r\n        </td>\r\n      </tr>\r\n    </tbody>\r\n  </table>\r\n</div>\r\n",
+                template: "<div class=\"table-responsive\">\r\n  <table class=\"table table-striped table-hover\" id=\"{{name}}\">\r\n    <thead class=\"thead-light\">\r\n      <tr>\r\n        <ng-container\r\n          *ngTemplateOutlet=\"template; context { row: {}, type: 'header'}\"\r\n        >\r\n        </ng-container>\r\n      </tr>\r\n    </thead>\r\n    <tbody>\r\n      <ng-container *ngFor=\"let item of value; let i=index\">\r\n        <tr>\r\n          <ng-container\r\n            *ngTemplateOutlet=\"template; context { row: item, type: 'body'}\"\r\n          >\r\n          </ng-container>\r\n        </tr>\r\n      </ng-container>\r\n      <tr\r\n        *ngIf=\"value === undefined || value === null || value.length===0\"\r\n        data-e2e=\"emptyrow\"\r\n      >\r\n        <td [attr.colspan]=\"ColumnCount\">{{emptytext}}</td>\r\n      </tr>\r\n    </tbody>\r\n    <tfoot *ngIf=\"pagerdata\">\r\n      <tr>\r\n        <td [attr.colspan]=\"ColumnCount\">\r\n          <div class=\"container-fluid\">\r\n            <sac-paging\r\n              name=\"{{name}}Paging\"\r\n              (paging)=\"pageChange($event)\"\r\n              [pagerdata]=\"pagerdata\"\r\n              [pagesizes]=\"pagesizes\"\r\n              [pagingtext]=\"pagingtext\"\r\n              [pagesizetext]=\"pagesizetext\"\r\n              [pagesizedisabled]=\"pagesizedisabled\"\r\n            ></sac-paging>\r\n          </div>\r\n        </td>\r\n      </tr>\r\n    </tfoot>\r\n  </table>\r\n</div>\r\n",
                 // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                 providers: [
                     { provide: NG_VALUE_ACCESSOR, multi: true, useExisting: SacGridComponent },
@@ -1297,19 +1377,11 @@ SacGridComponent.propDecorators = {
 
 /**
  * Grid Action Button
- *
- * @example Standard Action
- *
- * <ngGridButton icon="edit" (clicked)="action('edit')" [isdisabled]="true"></ngGridButton>
- *
- * @example Custom Action
- *
- * <ngGridButton iconstyle="sprite" icon="icon-sprite-base-main_info" (clicked)="action("info")"></ngGridButton>
- *
  */
 class SacGridButtonComponent extends SacGridButtonCommon {
+    // #region Public Methods
     /**
-     * Gibt das Icon für den Button zurück
+     * Returns the icon for the button
      */
     getIconClass() {
         let iconset = this.iconstyle;
@@ -1356,7 +1428,7 @@ class SacGridColumnComponent extends SacGridColumnCommon {
 SacGridColumnComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sac-gridcolumn',
-                template: "<th\r\n  scope=\"col\"\r\n  *ngIf=\"IsHeader()\"\r\n  [style.width]=\"width\"\r\n  (click)=\"SortByColumn()\"\r\n>\r\n  <span>{{header}}</span>\r\n  <span\r\n    class=\"pl-2\"\r\n    [class]=\"IconSortUp\"\r\n    *ngIf=\"IsSortedColumn() && GetSortDirection() ==='asc'\"\r\n  ></span>\r\n  <span\r\n    class=\"pl-2\"\r\n    [class]=\"IconSortDown\"\r\n    *ngIf=\"IsSortedColumn() && GetSortDirection() ==='desc'\"\r\n  ></span>\r\n</th>\r\n<td\r\n  scope=\"col\"\r\n  *ngIf=\"IsBody()\"\r\n  [style.width]=\"width\"\r\n  [class.ellipsis]=\"IsEllipsis()\"\r\n>\r\n  <span [attr.title]=\"IsEllipsis() ? value : null\"> {{value}} </span>\r\n</td>\r\n",
+                template: "<th\r\n    scope=\"col\"\r\n    *ngIf=\"IsHeader()\"\r\n    [style.width]=\"width\"\r\n    (click)=\"SortByColumn()\">\r\n    <span>{{ header }}</span>\r\n    <span\r\n        class=\"pl-2\"\r\n        [class]=\"IconSortUp\"\r\n        *ngIf=\"IsSortedColumn() && GetSortDirection() === 'asc'\"></span>\r\n    <span\r\n        class=\"pl-2\"\r\n        [class]=\"IconSortDown\"\r\n        *ngIf=\"IsSortedColumn() && GetSortDirection() === 'desc'\"></span>\r\n</th>\r\n<td\r\n    scope=\"col\"\r\n    *ngIf=\"IsBody()\"\r\n    [style.width]=\"width\"\r\n    [class.ellipsis]=\"IsEllipsis()\"\r\n    (click)=\"ColumnClick()\"\r\n    [style.max-width]=\"IsEllipsis() ? width : null\"\r\n    [style.overflow]=\"IsEllipsis() ? 'hidden' : null\"\r\n    [style.text-overflow]=\"IsEllipsis() ? 'ellipsis' : null\"\r\n    [style.white-space]=\"IsEllipsis() ? 'nowrap' : null\">\r\n    <span\r\n        [attr.title]=\"IsEllipsis() ? value : null\"\r\n        [innerHtml]=\"value\"></span>\r\n</td>\r\n",
                 providers: [
                     {
                         provide: SacGridColumnBaseCommon,
@@ -1464,11 +1536,23 @@ class SACBootstrap4GridModule {
 }
 SACBootstrap4GridModule.decorators = [
     { type: NgModule, args: [{
-                declarations: [SacGridComponent, SacGridColumnComponent, SacGridColumnActionComponent, SacPagingComponent, SacGridButtonComponent, SacGridImageComponent],
-                imports: [
-                    CommonModule, FormsModule
+                declarations: [
+                    SacGridComponent,
+                    SacGridColumnComponent,
+                    SacGridColumnActionComponent,
+                    SacPagingComponent,
+                    SacGridButtonComponent,
+                    SacGridImageComponent,
+                ],
+                imports: [CommonModule, FormsModule],
+                exports: [
+                    SacGridComponent,
+                    SacGridColumnComponent,
+                    SacGridColumnActionComponent,
+                    SacPagingComponent,
+                    SacGridButtonComponent,
+                    SacGridImageComponent,
                 ],
-                exports: [SacGridComponent, SacGridColumnComponent, SacGridColumnActionComponent, SacPagingComponent, SacGridButtonComponent, SacGridImageComponent]
             },] }
 ];
 
@@ -1489,7 +1573,7 @@ class SacInputComponent extends SacInputCommon {
 SacInputComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sac-input',
-                template: "<div class=\"row form-group\" [class.no-gutters]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <input\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      type=\"text\"\r\n      class=\"form-control\"\r\n      [value]=\"value\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      [readonly]=\"readonly\"\r\n      (blur)=\"onTouch()\"\r\n      (input)=\"setValue($event.target.value)\"\r\n      (keypress)=\"onKeyPress($event)\"\r\n      [attr.maxlength]=\"maxlength\"\r\n      [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n      [ngClass]=\"[componentHeight | toControlHeight]\"\r\n      [disabled]=\"isdisabled\"\r\n    />\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                template: "<div\r\n    class=\"row form-group\"\r\n    [class.no-gutters]=\"disablelabel\">\r\n    <label\r\n        for=\"{{ name }}\"\r\n        class=\"col-12 col-form-label d-flex\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n        [class.required]=\"isrequired\">\r\n        <div\r\n            class=\"text flex-grow-0\"\r\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\r\n            {{ label }}\r\n        </div>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [ngClass]=\"HelptextTooltipIcon\"\r\n                class=\"ml-1\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n            <input\r\n                id=\"{{ name }}\"\r\n                name=\"{{ name }}\"\r\n                type=\"text\"\r\n                class=\"form-control\"\r\n                [value]=\"value\"\r\n                [attr.placeholder]=\"placeholder\"\r\n                [readonly]=\"readonly\"\r\n                (blur)=\"onTouch()\"\r\n                (input)=\"setValue($event.target.value)\"\r\n                (keypress)=\"onKeyPress($event)\"\r\n                [attr.maxlength]=\"maxtextlength\"\r\n                [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n                [ngClass]=\"[componentHeight | toControlHeight]\"\r\n                [disabled]=\"isdisabled\" />\r\n\r\n            <small\r\n                *ngIf=\"helptextmode === 'text' && helptext\"\r\n                class=\"form-text text-muted\">\r\n                {{ helptext }}\r\n            </small>\r\n\r\n            <div\r\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n                class=\"invalid-feedback\">\r\n                {{ GetErrorMessage() | async }}\r\n            </div>\r\n        </div>\r\n\r\n        <div\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n            class=\"form-control-plaintext align-self-top ml-2 mr-1 w-auto\"\r\n            [ngClass]=\"[componentHeight | toControlHeight]\">\r\n            <sac-tooltip\r\n                [tooltiptext]=\"helptext\"\r\n                [inlinemode]=\"true\">\r\n                <span\r\n                    [ngClass]=\"HelptextTooltipIcon\"\r\n                    class=\"ml-1\">\r\n                </span>\r\n            </sac-tooltip>\r\n        </div>\r\n    </div>\r\n</div>\r\n",
                 // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                 providers: [
                     { provide: NG_VALUE_ACCESSOR, multi: true, useExisting: SacInputComponent },
@@ -1523,7 +1607,7 @@ class SacInputAreaComponent extends SacInputAreaCommon {
 SacInputAreaComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sac-inputarea',
-                template: "<div class=\"form-group row\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <textarea\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      type=\"\"\r\n      class=\"form-control\"\r\n      [value]=\"value\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      (blur)=\"onTouch()\"\r\n      (input)=\"setValue($event.target.value)\"\r\n      (keypress)=\"onKeyPress($event)\"\r\n      [attr.rows]=\"rows\"\r\n      [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n      [ngClass]=\"[componentHeight | toControlHeight]\"\r\n      [disabled]=\"isdisabled\"\r\n      [attr.maxlength]=\"maxlength\"\r\n      [readonly]=\"readonly\"\r\n    ></textarea>\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                template: "<div class=\"form-group row\">\r\n    <label\r\n        for=\"{{ name }}\"\r\n        class=\"col-12 col-form-label d-flex\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n        [class.required]=\"isrequired\">\r\n        <div\r\n            class=\"text flex-grow-0\"\r\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\r\n            {{ label }}\r\n        </div>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [ngClass]=\"HelptextTooltipIcon\"\r\n                class=\"ml-1\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n            <textarea\r\n                id=\"{{ name }}\"\r\n                name=\"{{ name }}\"\r\n                type=\"\"\r\n                class=\"form-control\"\r\n                [value]=\"value\"\r\n                [attr.placeholder]=\"placeholder\"\r\n                (blur)=\"onTouch()\"\r\n                (input)=\"setValue($event.target.value)\"\r\n                (keypress)=\"onKeyPress($event)\"\r\n                [attr.rows]=\"rows\"\r\n                [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n                [ngClass]=\"[componentHeight | toControlHeight]\"\r\n                [disabled]=\"isdisabled\"\r\n                [attr.maxlength]=\"maxtextlength\"\r\n                [readonly]=\"readonly\"></textarea>\r\n            <small\r\n                *ngIf=\"helptextmode === 'text' && helptext\"\r\n                class=\"form-text text-muted\">\r\n                {{ helptext }}\r\n            </small>\r\n            <div\r\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n                class=\"invalid-feedback\">\r\n                {{ GetErrorMessage() | async }}\r\n            </div>\r\n        </div>\r\n\r\n        <div\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n            class=\"form-control-plaintext align-self-top ml-2 mr-1 w-auto\"\r\n            [ngClass]=\"[componentHeight | toControlHeight]\">\r\n            <sac-tooltip\r\n                [tooltiptext]=\"helptext\"\r\n                [inlinemode]=\"true\">\r\n                <span\r\n                    [ngClass]=\"HelptextTooltipIcon\"\r\n                    class=\"ml-1\">\r\n                </span>\r\n            </sac-tooltip>\r\n        </div>\r\n    </div>\r\n</div>\r\n",
                 // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                 providers: [
                     {
@@ -1561,7 +1645,7 @@ class SacInputCurrencyComponent extends SacInputCurrencyCommon {
 SacInputCurrencyComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sac-inputcurrency',
-                template: "<div class=\"row form-group\" [class.no-gutters]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group\"\r\n      [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n      [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      <input\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        [value]=\"value\"\r\n        (blur)=\"onTouch()\"\r\n        (input)=\"setValue($event.target.value)\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        (keypress)=\"onKeyPress($event)\"\r\n        [disabled]=\"isdisabled\"\r\n        [readonly]=\"readonly\"\r\n        [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n        [ngClass]=\"[componentHeight | toControlHeight]\"\r\n      />\r\n      <div class=\"input-group-append\">\r\n        <span class=\"input-group-text\">{{currency}}</span>\r\n      </div>\r\n      <div\r\n        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n        class=\"invalid-feedback\"\r\n      >\r\n        {{ GetErrorMessage() | async }}\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                template: "<div\r\n    class=\"row form-group\"\r\n    [class.no-gutters]=\"disablelabel\">\r\n    <label\r\n        for=\"{{ name }}\"\r\n        class=\"col-12 col-form-label d-flex\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n        [class.required]=\"isrequired\">\r\n        <div\r\n            class=\"text flex-grow-0\"\r\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\r\n            {{ label }}\r\n        </div>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [ngClass]=\"HelptextTooltipIcon\"\r\n                class=\"ml-1\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n            <div\r\n                class=\"input-group\"\r\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n                [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\r\n                <input\r\n                    id=\"{{ name }}\"\r\n                    name=\"{{ name }}\"\r\n                    type=\"text\"\r\n                    class=\"form-control\"\r\n                    [value]=\"value\"\r\n                    (blur)=\"onTouch()\"\r\n                    (input)=\"setValue($event.target.value)\"\r\n                    [attr.placeholder]=\"placeholder\"\r\n                    (keypress)=\"onKeyPress($event)\"\r\n                    [disabled]=\"isdisabled\"\r\n                    [readonly]=\"readonly\"\r\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n                    [ngClass]=\"[componentHeight | toControlHeight]\" />\r\n                <div class=\"input-group-append\">\r\n                    <span class=\"input-group-text\">{{ currency }}</span>\r\n                </div>\r\n\r\n                <div\r\n                    *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n                    class=\"invalid-feedback\">\r\n                    {{ GetErrorMessage() | async }}\r\n                </div>\r\n            </div>\r\n            <small\r\n                *ngIf=\"helptextmode === 'text' && helptext\"\r\n                class=\"form-text text-muted\">\r\n                {{ helptext }}\r\n            </small>\r\n        </div>\r\n\r\n        <div\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n            class=\"form-control-plaintext align-self-top ml-2 mr-1 w-auto\"\r\n            [ngClass]=\"[componentHeight | toControlHeight]\">\r\n            <sac-tooltip\r\n                [tooltiptext]=\"helptext\"\r\n                [inlinemode]=\"true\">\r\n                <span\r\n                    [ngClass]=\"HelptextTooltipIcon\"\r\n                    class=\"ml-1\">\r\n                </span>\r\n            </sac-tooltip>\r\n        </div>\r\n    </div>\r\n</div>\r\n",
                 // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                 providers: [
                     {
@@ -1599,7 +1683,7 @@ class SacInputDecimalComponent extends SacInputDecimalCommon {
 SacInputDecimalComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sac-inputdecimal',
-                template: "<div class=\"row form-group\" [class.no-gutters]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <input\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      type=\"text\"\r\n      class=\"form-control\"\r\n      [value]=\"value\"\r\n      (blur)=\"onTouch()\"\r\n      (input)=\"setValue($event.target.value)\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      [readonly]=\"readonly\"\r\n      (keypress)=\"onKeyPress($event)\"\r\n      [disabled]=\"isdisabled\"\r\n      [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n      [ngClass]=\"[componentHeight | toControlHeight]\"\r\n    />\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                template: "<div\r\n    class=\"row form-group\"\r\n    [class.no-gutters]=\"disablelabel\">\r\n    <label\r\n        for=\"{{ name }}\"\r\n        class=\"col-12 col-form-label d-flex\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n        [class.required]=\"isrequired\">\r\n        <div\r\n            class=\"text flex-grow-0\"\r\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\r\n            {{ label }}\r\n        </div>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [ngClass]=\"HelptextTooltipIcon\"\r\n                class=\"ml-1\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n            <input\r\n                id=\"{{ name }}\"\r\n                name=\"{{ name }}\"\r\n                type=\"text\"\r\n                class=\"form-control\"\r\n                [value]=\"value\"\r\n                (blur)=\"onTouch()\"\r\n                (input)=\"setValue($event.target.value)\"\r\n                [attr.placeholder]=\"placeholder\"\r\n                [readonly]=\"readonly\"\r\n                (keypress)=\"onKeyPress($event)\"\r\n                [disabled]=\"isdisabled\"\r\n                [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n                [ngClass]=\"[componentHeight | toControlHeight]\" />\r\n            <small\r\n                *ngIf=\"helptextmode === 'text' && helptext\"\r\n                class=\"form-text text-muted\">\r\n                {{ helptext }}\r\n            </small>\r\n            <div\r\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n                class=\"invalid-feedback\">\r\n                {{ GetErrorMessage() | async }}\r\n            </div>\r\n        </div>\r\n\r\n        <div\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n            class=\"form-control-plaintext align-self-top ml-2 mr-1 w-auto\"\r\n            [ngClass]=\"[componentHeight | toControlHeight]\">\r\n            <sac-tooltip\r\n                [tooltiptext]=\"helptext\"\r\n                [inlinemode]=\"true\">\r\n                <span\r\n                    [ngClass]=\"HelptextTooltipIcon\"\r\n                    class=\"ml-1\">\r\n                </span>\r\n            </sac-tooltip>\r\n        </div>\r\n    </div>\r\n</div>\r\n",
                 // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                 providers: [
                     {
@@ -1637,7 +1721,7 @@ class SacInputEmailComponent extends SacInputEmailCommon {
 SacInputEmailComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sac-inputemail',
-                template: "<div class=\"form-group row\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group\"\r\n      [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n      [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      <div class=\"input-group-prepend\">\r\n        <span class=\"input-group-text\">@</span>\r\n      </div>\r\n      <input\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        [value]=\"value\"\r\n        (blur)=\"onTouch()\"\r\n        (input)=\"setValue($event.target.value)\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        autocomplete=\"email\"\r\n        [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n        [ngClass]=\"[componentHeight | toControlHeight]\"\r\n        [disabled]=\"isdisabled\"\r\n        [readonly]=\"readonly\"\r\n      />\r\n      <div\r\n        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n        class=\"invalid-feedback\"\r\n      >\r\n        {{ GetErrorMessage() | async }}\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                template: "<div class=\"form-group row\">\r\n    <label\r\n        for=\"{{ name }}\"\r\n        class=\"col-12 col-form-label d-flex\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n        [class.required]=\"isrequired\">\r\n        <div\r\n            class=\"text flex-grow-0\"\r\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\r\n            {{ label }}\r\n        </div>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [ngClass]=\"HelptextTooltipIcon\"\r\n                class=\"ml-1\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n            <div\r\n                class=\"input-group\"\r\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n                [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\r\n                <div class=\"input-group-prepend\">\r\n                    <span class=\"input-group-text\">@</span>\r\n                </div>\r\n                <input\r\n                    id=\"{{ name }}\"\r\n                    name=\"{{ name }}\"\r\n                    type=\"text\"\r\n                    class=\"form-control\"\r\n                    [value]=\"value\"\r\n                    (blur)=\"onTouch()\"\r\n                    (input)=\"setValue($event.target.value)\"\r\n                    [attr.placeholder]=\"placeholder\"\r\n                    [attr.maxlength]=\"maxtextlength\"\r\n                    autocomplete=\"email\"\r\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n                    [ngClass]=\"[componentHeight | toControlHeight]\"\r\n                    [disabled]=\"isdisabled\"\r\n                    [readonly]=\"readonly\" />\r\n                <div\r\n                    *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n                    class=\"invalid-feedback\">\r\n                    {{ GetErrorMessage() | async }}\r\n                </div>\r\n            </div>\r\n            <small\r\n                *ngIf=\"helptextmode === 'text' && helptext\"\r\n                class=\"form-text text-muted\">\r\n                {{ helptext }}\r\n            </small>\r\n        </div>\r\n\r\n        <div\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n            class=\"form-control-plaintext align-self-top ml-2 mr-1 w-auto\"\r\n            [ngClass]=\"[componentHeight | toControlHeight]\">\r\n            <sac-tooltip\r\n                [tooltiptext]=\"helptext\"\r\n                [inlinemode]=\"true\">\r\n                <span\r\n                    [ngClass]=\"HelptextTooltipIcon\"\r\n                    class=\"ml-1\">\r\n                </span>\r\n            </sac-tooltip>\r\n        </div>\r\n    </div>\r\n</div>\r\n",
                 // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                 providers: [
                     {
@@ -1675,7 +1759,7 @@ class SacInputIntegerComponent extends SacInputIntegerCommon {
 SacInputIntegerComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sac-inputinteger',
-                template: "<div class=\"form-group row\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <input\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      type=\"text\"\r\n      class=\"form-control\"\r\n      [value]=\"value\"\r\n      (blur)=\"onTouch()\"\r\n      (input)=\"setValue($event.target.value)\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      (keypress)=\"onKeyPress($event)\"\r\n      [disabled]=\"isdisabled\"\r\n      [readonly]=\"readonly\"\r\n      [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n      [ngClass]=\"[componentHeight | toControlHeight]\"\r\n    />\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                template: "<div class=\"form-group row\">\r\n    <label\r\n        for=\"{{ name }}\"\r\n        class=\"col-12 col-form-label d-flex\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n        [class.required]=\"isrequired\">\r\n        <div\r\n            class=\"text flex-grow-0\"\r\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\r\n            {{ label }}\r\n        </div>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [ngClass]=\"HelptextTooltipIcon\"\r\n                class=\"ml-1\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n            <input\r\n                id=\"{{ name }}\"\r\n                name=\"{{ name }}\"\r\n                type=\"text\"\r\n                class=\"form-control\"\r\n                [value]=\"value\"\r\n                (blur)=\"onTouch()\"\r\n                (input)=\"setValue($event.target.value)\"\r\n                [attr.placeholder]=\"placeholder\"\r\n                (keypress)=\"onKeyPress($event)\"\r\n                [disabled]=\"isdisabled\"\r\n                [readonly]=\"readonly\"\r\n                [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n                [ngClass]=\"[componentHeight | toControlHeight]\" />\r\n            <small\r\n                *ngIf=\"helptextmode === 'text' && helptext\"\r\n                class=\"form-text text-muted\">\r\n                {{ helptext }}\r\n            </small>\r\n            <div\r\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n                class=\"invalid-feedback\">\r\n                {{ GetErrorMessage() | async }}\r\n            </div>\r\n        </div>\r\n\r\n        <div\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n            class=\"form-control-plaintext align-self-top ml-2 mr-1 w-auto\"\r\n            [ngClass]=\"[componentHeight | toControlHeight]\">\r\n            <sac-tooltip\r\n                [tooltiptext]=\"helptext\"\r\n                [inlinemode]=\"true\">\r\n                <span\r\n                    [ngClass]=\"HelptextTooltipIcon\"\r\n                    class=\"ml-1\">\r\n                </span>\r\n            </sac-tooltip>\r\n        </div>\r\n    </div>\r\n</div>\r\n",
                 // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                 providers: [
                     {
@@ -1713,7 +1797,7 @@ class SacInputPasswordComponent extends SacInputPasswordCommon {
 SacInputPasswordComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sac-inputpassword',
-                template: "<div class=\"form-group row\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <input\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      type=\"password\"\r\n      class=\"form-control\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      [value]=\"value\"\r\n      (blur)=\"onTouch()\"\r\n      (input)=\"setValue($event.target.value)\"\r\n      [attr.maxlength]=\"maxlength\"\r\n      autocomplete=\"new-password\"\r\n      [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n      [ngClass]=\"[componentHeight | toControlHeight]\"\r\n      [disabled]=\"isdisabled\"\r\n      [readonly]=\"readonly\"\r\n    />\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                template: "<div class=\"form-group row\">\r\n    <label\r\n        for=\"{{ name }}\"\r\n        class=\"col-12 col-form-label d-flex\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n        [class.required]=\"isrequired\">\r\n        <div\r\n            class=\"text flex-grow-0\"\r\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\r\n            {{ label }}\r\n        </div>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [ngClass]=\"HelptextTooltipIcon\"\r\n                class=\"ml-1\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n            <input\r\n                id=\"{{ name }}\"\r\n                name=\"{{ name }}\"\r\n                type=\"password\"\r\n                class=\"form-control\"\r\n                [attr.placeholder]=\"placeholder\"\r\n                [value]=\"value\"\r\n                (blur)=\"onTouch()\"\r\n                (input)=\"setValue($event.target.value)\"\r\n                [attr.maxlength]=\"maxtextlength\"\r\n                autocomplete=\"new-password\"\r\n                [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n                [ngClass]=\"[componentHeight | toControlHeight]\"\r\n                [disabled]=\"isdisabled\"\r\n                [readonly]=\"readonly\" />\r\n            <small\r\n                *ngIf=\"helptextmode === 'text' && helptext\"\r\n                class=\"form-text text-muted\">\r\n                {{ helptext }}\r\n            </small>\r\n            <div\r\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n                class=\"invalid-feedback\">\r\n                {{ GetErrorMessage() | async }}\r\n            </div>\r\n        </div>\r\n\r\n        <div\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n            class=\"form-control-plaintext align-self-top ml-2 mr-1 w-auto\"\r\n            [ngClass]=\"[componentHeight | toControlHeight]\">\r\n            <sac-tooltip\r\n                [tooltiptext]=\"helptext\"\r\n                [inlinemode]=\"true\">\r\n                <span\r\n                    [ngClass]=\"HelptextTooltipIcon\"\r\n                    class=\"ml-1\">\r\n                </span>\r\n            </sac-tooltip>\r\n        </div>\r\n    </div>\r\n</div>\r\n",
                 // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                 providers: [
                     {
@@ -1751,7 +1835,7 @@ class SacInputSearchComponent extends SacInputSearchCommon {
 SacInputSearchComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sac-inputsearch',
-                template: "<div class=\"row form-group\" [class.no-gutters]=\"disablelabel\">\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}_label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group\"\r\n      [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n    >\r\n      <input\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        [value]=\"value\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        (blur)=\"onTouch()\"\r\n        (input)=\"setValue($event.target.value)\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n        [ngClass]=\"[componentHeight | toControlHeight]\"\r\n        [disabled]=\"isdisabled\"\r\n        [readonly]=\"readonly\"\r\n      />\r\n      <div class=\"input-group-append\">\r\n        <input\r\n          type=\"submit\"\r\n          class=\"btn btn-secondary\"\r\n          id=\"{{name}}_search\"\r\n          (click)=\"searchClick()\"\r\n          [value]=\"buttontext\"\r\n        />\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                template: "<div\r\n    class=\"row form-group\"\r\n    [class.no-gutters]=\"disablelabel\">\r\n    <label\r\n        id=\"{{ name }}_label\"\r\n        for=\"{{ name }}\"\r\n        class=\"col-12 col-form-label d-flex\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n        [class.required]=\"isrequired\">\r\n        <div\r\n            class=\"flex-grow-0\"\r\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\r\n            {{ label }}\r\n        </div>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [ngClass]=\"HelptextTooltipIcon\"\r\n                class=\"ml-1\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n            <div\r\n                class=\"input-group\"\r\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\r\n                <input\r\n                    id=\"{{ name }}\"\r\n                    name=\"{{ name }}\"\r\n                    type=\"text\"\r\n                    class=\"form-control\"\r\n                    [value]=\"value\"\r\n                    [attr.placeholder]=\"placeholder\"\r\n                    (blur)=\"onTouch()\"\r\n                    (input)=\"setValue($event.target.value)\"\r\n                    [attr.maxlength]=\"maxtextlength\"\r\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n                    [ngClass]=\"[componentHeight | toControlHeight]\"\r\n                    [disabled]=\"isdisabled\"\r\n                    [readonly]=\"readonly\" />\r\n                <div class=\"input-group-append\">\r\n                    <button\r\n                        type=\"button\"\r\n                        class=\"btn btn-secondary\"\r\n                        id=\"{{ name }}_search\"\r\n                        (click)=\"searchClick()\">\r\n                        <i\r\n                            *ngIf=\"buttonmode === 'icon' || buttonmode === 'mixed'\"\r\n                            [class]=\"iconname\"\r\n                            [class.mr-2]=\"buttonmode === 'mixed'\"></i>\r\n                        <ng-container *ngIf=\"buttonmode === 'text' || buttonmode === 'mixed'\">{{ buttontext }}</ng-container>\r\n                    </button>\r\n                </div>\r\n            </div>\r\n            <small\r\n                *ngIf=\"helptextmode === 'text' && helptext\"\r\n                class=\"form-text text-muted\">\r\n                {{ helptext }}\r\n            </small>\r\n        </div>\r\n\r\n        <div\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n            class=\"form-control-plaintext align-self-top ml-2 mr-1 w-auto\"\r\n            [ngClass]=\"[componentHeight | toControlHeight]\">\r\n            <sac-tooltip\r\n                [tooltiptext]=\"helptext\"\r\n                [inlinemode]=\"true\">\r\n                <span\r\n                    [ngClass]=\"HelptextTooltipIcon\"\r\n                    class=\"ml-1\">\r\n                </span>\r\n            </sac-tooltip>\r\n        </div>\r\n    </div>\r\n</div>\r\n",
                 // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                 providers: [
                     {
@@ -1786,7 +1870,11 @@ SACBootstrap4InputModule.decorators = [
                     SacInputPasswordComponent,
                     SacInputSearchComponent,
                 ],
-                imports: [CommonModule, SACBootstrap4LayoutModule],
+                imports: [
+                    CommonModule,
+                    SACBootstrap4LayoutModule,
+                    SACBootstrap4TooltipModule,
+                ],
                 exports: [
                     SacInputComponent,
                     SacInputAreaComponent,
@@ -1820,7 +1908,7 @@ class SacDropdownComponent extends SacDropdownCommon {
 SacDropdownComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sac-dropdown',
-                template: "<div class=\"row form-group\" [class.no-gutters]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <select\r\n      #dropdownitem\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      class=\"form-control\"\r\n      [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n      [ngClass]=\"[componentHeight | toControlHeight]\"\r\n      (blur)=\"onTouch()\"\r\n      (change)=\"setValue(dropdownitem.value)\"\r\n      [disabled]=\"isdisabled\"\r\n    >\r\n      <option *ngIf=\"emptylabel !== ''\" [ngValue]=\"emptyvalue\">\r\n        {{emptylabel}}\r\n      </option>\r\n\r\n      <ng-content></ng-content>\r\n\r\n      <ng-container *ngIf=\"groupitems === ''\">\r\n        <option\r\n          *ngFor=\"let item of options\"\r\n          [ngValue]=\"optionvalue ? item[optionvalue] : item\"\r\n          [disabled]=\"optionenabled !== '' && item[optionenabled] === false\"\r\n        >\r\n          <ng-template\r\n            *ngTemplateOutlet=\"optionlabeltemplate || defaultItemLabelTemplate;context:{ label: item[optionlabel], item: item }\"\r\n          >\r\n          </ng-template>\r\n        </option>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"groupitems !== ''\">\r\n        <optgroup\r\n          *ngFor=\"let group of options\"\r\n          [attr.label]=\"group[grouplabel]\"\r\n        >\r\n          <option\r\n            *ngFor=\"let item of group[groupitems]\"\r\n            [ngValue]=\"optionvalue ? item[optionvalue] : item\"\r\n            [disabled]=\"optionenabled !== '' && item[optionenabled] === false\"\r\n          >\r\n            <ng-template\r\n              *ngTemplateOutlet=\"optionlabeltemplate || defaultItemLabelTemplate;context:{ label: item[optionlabel], item: item }\"\r\n            >\r\n            </ng-template>\r\n          </option>\r\n        </optgroup>\r\n      </ng-container>\r\n    </select>\r\n    <div\r\n      class=\"invalid-feedback\"\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #defaultItemLabelTemplate let-label=\"label\">\r\n  {{label}}\r\n</ng-template>\r\n",
+                template: "<div\r\n    class=\"row form-group\"\r\n    [class.no-gutters]=\"disablelabel\">\r\n    <label\r\n        for=\"{{ name }}\"\r\n        class=\"col-12 col-form-label d-flex\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n        [class.required]=\"isrequired\"\r\n        ><div\r\n            class=\"text flex-grow-0\"\r\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\r\n            {{ label }}\r\n        </div>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [ngClass]=\"HelptextTooltipIcon\"\r\n                class=\"ml-1\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n            <select\r\n                #dropdownitem\r\n                id=\"{{ name }}\"\r\n                name=\"{{ name }}\"\r\n                class=\"form-control\"\r\n                [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n                [ngClass]=\"[componentHeight | toControlHeight]\"\r\n                (blur)=\"onTouch()\"\r\n                (change)=\"setValue(dropdownitem.value)\"\r\n                [disabled]=\"isdisabled\">\r\n                <option\r\n                    *ngIf=\"emptylabel !== ''\"\r\n                    [ngValue]=\"emptyvalue\">\r\n                    {{ emptylabel }}\r\n                </option>\r\n\r\n                <ng-content></ng-content>\r\n\r\n                <ng-container *ngIf=\"groupitems === ''\">\r\n                    <option\r\n                        *ngFor=\"let item of options\"\r\n                        [ngValue]=\"optionvalue ? item[optionvalue] : item\"\r\n                        [disabled]=\"optionenabled !== '' && item[optionenabled] === false\">\r\n                        <ng-template *ngTemplateOutlet=\"optionlabeltemplate || defaultItemLabelTemplate; context: { label: item[optionlabel], item: item }\"> </ng-template>\r\n                    </option>\r\n                </ng-container>\r\n\r\n                <ng-container *ngIf=\"groupitems !== ''\">\r\n                    <optgroup\r\n                        *ngFor=\"let group of options\"\r\n                        [attr.label]=\"group[grouplabel]\">\r\n                        <option\r\n                            *ngFor=\"let item of group[groupitems]\"\r\n                            [ngValue]=\"optionvalue ? item[optionvalue] : item\"\r\n                            [disabled]=\"optionenabled !== '' && item[optionenabled] === false\">\r\n                            <ng-template *ngTemplateOutlet=\"optionlabeltemplate || defaultItemLabelTemplate; context: { label: item[optionlabel], item: item }\"> </ng-template>\r\n                        </option>\r\n                    </optgroup>\r\n                </ng-container>\r\n            </select>\r\n            <small\r\n                *ngIf=\"helptextmode === 'text' && helptext\"\r\n                class=\"form-text text-muted\">\r\n                {{ helptext }}\r\n            </small>\r\n            <div\r\n                class=\"invalid-feedback\"\r\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\r\n                {{ GetErrorMessage() | async }}\r\n            </div>\r\n        </div>\r\n\r\n        <div\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n            class=\"form-control-plaintext align-self-top ml-2 mr-1 w-auto\"\r\n            [ngClass]=\"[componentHeight | toControlHeight]\">\r\n            <sac-tooltip\r\n                [tooltiptext]=\"helptext\"\r\n                [inlinemode]=\"true\">\r\n                <span\r\n                    [ngClass]=\"HelptextTooltipIcon\"\r\n                    class=\"ml-1\">\r\n                </span>\r\n            </sac-tooltip>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<ng-template\r\n    #defaultItemLabelTemplate\r\n    let-label=\"label\">\r\n    {{ label }}\r\n</ng-template>\r\n",
                 // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                 providers: [
                     {
@@ -1872,7 +1960,11 @@ class SACBootstrap4DropdownModule {
 SACBootstrap4DropdownModule.decorators = [
     { type: NgModule, args: [{
                 declarations: [SacDropdownComponent, SacDropdownOptionDirective],
-                imports: [CommonModule, SACBootstrap4LayoutModule],
+                imports: [
+                    CommonModule,
+                    SACBootstrap4LayoutModule,
+                    SACBootstrap4TooltipModule,
+                ],
                 exports: [SacDropdownComponent, SacDropdownOptionDirective],
             },] }
 ];
@@ -1895,7 +1987,7 @@ class SacListboxComponent extends SacListboxCommon {
 SacListboxComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sac-listbox',
-                template: "<div class=\"row form-group\" [class.no-gutters]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <select\r\n      multiple\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      class=\"form-control\"\r\n      [size]=\"rowsize\"\r\n      [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n      [ngClass]=\"[componentHeight | toControlHeight]\"\r\n      (blur)=\"onTouch()\"\r\n      (change)=\"getSelectedItems($event.target)\"\r\n      [disabled]=\"isdisabled\"\r\n    >\r\n      <ng-content></ng-content>\r\n      <ng-container *ngIf=\"groupitems === ''\">\r\n        <option\r\n          *ngFor=\"let option of options\"\r\n          [value]=\"option[optionvalue]\"\r\n          [disabled]=\"optionenabled !== '' && option[optionenabled] === false\"\r\n        >\r\n          {{option[optionlabel]}}\r\n        </option>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"groupitems !== ''\">\r\n        <optgroup\r\n          *ngFor=\"let option of options\"\r\n          [attr.label]=\"option[grouplabel]\"\r\n        >\r\n          <option\r\n            *ngFor=\"let item of option[groupitems]\"\r\n            [value]=\"item[optionvalue]\"\r\n            [disabled]=\"optionenabled !== '' && item[optionenabled] === false\"\r\n          >\r\n            {{item[optionlabel]}}\r\n          </option>\r\n        </optgroup>\r\n      </ng-container>\r\n    </select>\r\n    <div\r\n      class=\"invalid-feedback\"\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                template: "<div\r\n    class=\"row form-group\"\r\n    [class.no-gutters]=\"disablelabel\">\r\n    <label\r\n        for=\"{{ name }}\"\r\n        class=\"col-12 col-form-label d-flex\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n        [class.required]=\"isrequired\"\r\n        ><div\r\n            class=\"text flex-grow-0\"\r\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\r\n            {{ label }}\r\n        </div>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [ngClass]=\"HelptextTooltipIcon\"\r\n                class=\"ml-1\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n            <select\r\n                multiple\r\n                id=\"{{ name }}\"\r\n                name=\"{{ name }}\"\r\n                class=\"form-control\"\r\n                [size]=\"rowsize\"\r\n                [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n                [ngClass]=\"[componentHeight | toControlHeight]\"\r\n                (blur)=\"onTouch()\"\r\n                (change)=\"getSelectedItems($event.target)\"\r\n                [disabled]=\"isdisabled\">\r\n                <ng-content></ng-content>\r\n                <ng-container *ngIf=\"groupitems === ''\">\r\n                    <option\r\n                        *ngFor=\"let option of options\"\r\n                        [value]=\"option[optionvalue]\"\r\n                        [disabled]=\"optionenabled !== '' && option[optionenabled] === false\">\r\n                        {{ option[optionlabel] }}\r\n                    </option>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"groupitems !== ''\">\r\n                    <optgroup\r\n                        *ngFor=\"let option of options\"\r\n                        [attr.label]=\"option[grouplabel]\">\r\n                        <option\r\n                            *ngFor=\"let item of option[groupitems]\"\r\n                            [value]=\"item[optionvalue]\"\r\n                            [disabled]=\"optionenabled !== '' && item[optionenabled] === false\">\r\n                            {{ item[optionlabel] }}\r\n                        </option>\r\n                    </optgroup>\r\n                </ng-container>\r\n            </select>\r\n            <small\r\n                *ngIf=\"helptextmode === 'text' && helptext\"\r\n                class=\"form-text text-muted\">\r\n                {{ helptext }}\r\n            </small>\r\n            <div\r\n                class=\"invalid-feedback\"\r\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\r\n                {{ GetErrorMessage() | async }}\r\n            </div>\r\n        </div>\r\n\r\n        <div\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n            class=\"form-control-plaintext align-self-top ml-2 mr-1 w-auto\"\r\n            [ngClass]=\"[componentHeight | toControlHeight]\">\r\n            <sac-tooltip\r\n                [tooltiptext]=\"helptext\"\r\n                [inlinemode]=\"true\">\r\n                <span\r\n                    [ngClass]=\"HelptextTooltipIcon\"\r\n                    class=\"ml-1\">\r\n                </span>\r\n            </sac-tooltip>\r\n        </div>\r\n    </div>\r\n</div>\r\n",
                 // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                 providers: [
                     {
@@ -1945,7 +2037,11 @@ class SACBootstrap4ListModule {
 SACBootstrap4ListModule.decorators = [
     { type: NgModule, args: [{
                 declarations: [SacListboxComponent, SacListboxOptionDirective],
-                imports: [CommonModule, SACBootstrap4LayoutModule],
+                imports: [
+                    CommonModule,
+                    SACBootstrap4LayoutModule,
+                    SACBootstrap4TooltipModule,
+                ],
                 exports: [SacListboxComponent, SacListboxOptionDirective],
             },] }
 ];
@@ -1973,7 +2069,7 @@ class SacMultilanguageInputComponent extends SacMultilanguageInputCommon {
 SacMultilanguageInputComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sac-multilanguageinput',
-                template: "<div class=\"row form-group\" [class.no-gutters]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group\"\r\n      [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n      [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      <input\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        [value]=\"LanguageValue\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        (blur)=\"onTouch()\"\r\n        (input)=\"SetLanguageValue($event.target.value)\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n        [ngClass]=\"[componentHeight | toControlHeight]\"\r\n        [disabled]=\"isdisabled\"\r\n      />\r\n      <div\r\n        placement=\"bottom-right\"\r\n        class=\"input-group-append\"\r\n        sac-multilanguagemenu\r\n        [buttontemplate]=\"menuButton\"\r\n        #contextmenu\r\n      >\r\n        <ng-template #menuButton>\r\n          <button\r\n            sacMultilanguageMenuAnchor\r\n            [id]=\"name + '_dropdownitem'\"\r\n            type=\"button\"\r\n            class=\"btn dropdown-toggle\"\r\n            (click)=\"contextmenu.toggle()\"\r\n            [ngClass]=\"[IsAnyEmpty() ? 'btn-warning' : 'btn-secondary']\"\r\n          >\r\n            <img\r\n              src=\"{{SelectedIcon}}\"\r\n              class=\"align-baseline mr-1 ml-1\"\r\n              *ngIf=\"SelectedIconType === IconType.Image\"\r\n            />\r\n            <span\r\n              [ngClass]=\"SelectedIcon\"\r\n              class=\"align-baseline mr-1 ml-1\"\r\n              *ngIf=\"SelectedIconType === IconType.CssSprite\"\r\n            ></span>\r\n          </button>\r\n        </ng-template>\r\n        <ng-container *ngFor=\"let sprache of Languages\">\r\n          <sac-multilanguagemenubutton\r\n            *ngIf=\"sprache.IconType === IconType.Image\"\r\n            text=\"{{sprache.Text}}\"\r\n            image=\"{{sprache.Icon}}\"\r\n            [cssclass]=\"IsEmpty(sprache) ? 'text-danger border-left border-danger': ''\"\r\n            (clicked)=\"SelectLanguage(sprache)\"\r\n          ></sac-multilanguagemenubutton>\r\n          <sac-multilanguagemenubutton\r\n            *ngIf=\"sprache.IconType === IconType.CssSprite\"\r\n            text=\"{{sprache.Text}}\"\r\n            icon=\"{{sprache.Icon}}\"\r\n            [cssclass]=\"IsEmpty(sprache) ? 'text-danger border-left border-danger': ''\"\r\n            (clicked)=\"SelectLanguage(sprache)\"\r\n          ></sac-multilanguagemenubutton>\r\n        </ng-container>\r\n      </div>\r\n      <div\r\n        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n        class=\"invalid-feedback\"\r\n      >\r\n        {{ GetErrorMessage() | async }}\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n<div class=\"row\">\r\n  <div class=\"col text-right\"></div>\r\n</div>\r\n",
+                template: "<div\r\n    class=\"row form-group\"\r\n    [class.no-gutters]=\"disablelabel\">\r\n    <label\r\n        for=\"{{ name }}\"\r\n        class=\"col-12 col-form-label d-flex\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n        [class.required]=\"isrequired\">\r\n        <div\r\n            class=\"text flex-grow-0\"\r\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\r\n            {{ label }}\r\n        </div>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [ngClass]=\"HelptextTooltipIcon\"\r\n                class=\"ml-1\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n            <div\r\n                class=\"input-group\"\r\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n                [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\r\n                <input\r\n                    id=\"{{ name }}\"\r\n                    name=\"{{ name }}\"\r\n                    type=\"text\"\r\n                    class=\"form-control\"\r\n                    [value]=\"LanguageValue\"\r\n                    [attr.placeholder]=\"placeholder\"\r\n                    (blur)=\"onTouch()\"\r\n                    (input)=\"SetLanguageValue($event.target.value)\"\r\n                    [attr.maxlength]=\"maxtextlength\"\r\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n                    [ngClass]=\"[componentHeight | toControlHeight]\"\r\n                    [disabled]=\"isdisabled\" />\r\n                <div\r\n                    placement=\"bottom-right\"\r\n                    class=\"input-group-append\"\r\n                    sac-multilanguagemenu\r\n                    [buttontemplate]=\"menuButton\"\r\n                    #contextmenu>\r\n                    <ng-template #menuButton>\r\n                        <button\r\n                            sacMultilanguageMenuAnchor\r\n                            [id]=\"name + '_dropdownitem'\"\r\n                            type=\"button\"\r\n                            class=\"btn dropdown-toggle\"\r\n                            (click)=\"contextmenu.toggle()\"\r\n                            [ngClass]=\"[IsAnyEmpty() ? 'btn-warning' : 'btn-secondary']\">\r\n                            <img\r\n                                src=\"{{ SelectedIcon }}\"\r\n                                class=\"align-baseline mr-1 ml-1\"\r\n                                *ngIf=\"SelectedIconType === IconType.Image\" />\r\n                            <span\r\n                                [ngClass]=\"SelectedIcon\"\r\n                                class=\"align-baseline mr-1 ml-1\"\r\n                                *ngIf=\"SelectedIconType === IconType.CssSprite\"></span>\r\n                        </button>\r\n                    </ng-template>\r\n                    <ng-container *ngFor=\"let sprache of Languages\">\r\n                        <sac-multilanguagemenubutton\r\n                            *ngIf=\"sprache.IconType === IconType.Image\"\r\n                            text=\"{{ sprache.Text }}\"\r\n                            image=\"{{ sprache.Icon }}\"\r\n                            [cssclass]=\"IsEmpty(sprache) ? 'text-danger border-left border-danger' : ''\"\r\n                            (clicked)=\"SelectLanguage(sprache)\"></sac-multilanguagemenubutton>\r\n                        <sac-multilanguagemenubutton\r\n                            *ngIf=\"sprache.IconType === IconType.CssSprite\"\r\n                            text=\"{{ sprache.Text }}\"\r\n                            icon=\"{{ sprache.Icon }}\"\r\n                            [cssclass]=\"IsEmpty(sprache) ? 'text-danger border-left border-danger' : ''\"\r\n                            (clicked)=\"SelectLanguage(sprache)\"></sac-multilanguagemenubutton>\r\n                    </ng-container>\r\n                </div>\r\n\r\n                <div\r\n                    *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n                    class=\"invalid-feedback\">\r\n                    {{ GetErrorMessage() | async }}\r\n                </div>\r\n            </div>\r\n            <small\r\n                *ngIf=\"helptextmode === 'text' && helptext\"\r\n                class=\"form-text text-muted\">\r\n                {{ helptext }}\r\n            </small>\r\n        </div>\r\n\r\n        <div\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n            class=\"form-control-plaintext align-self-top ml-2 mr-1 w-auto\"\r\n            [ngClass]=\"[componentHeight | toControlHeight]\">\r\n            <sac-tooltip\r\n                [tooltiptext]=\"helptext\"\r\n                [inlinemode]=\"true\">\r\n                <span\r\n                    [ngClass]=\"HelptextTooltipIcon\"\r\n                    class=\"ml-1\">\r\n                </span>\r\n            </sac-tooltip>\r\n        </div>\r\n    </div>\r\n</div>\r\n<div class=\"row\">\r\n    <div class=\"col text-right\"></div>\r\n</div>\r\n",
                 // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                 providers: [
                     {
@@ -2017,7 +2113,7 @@ class SacMultilanguageInputAreaComponent extends SacMultilanguageInputAreaCommon
 SacMultilanguageInputAreaComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sac-multilanguageinputarea',
-                template: "<div class=\"row form-group\" [class.no-gutters]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group\"\r\n      [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n      [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      <textarea\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        [value]=\"LanguageValue\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        (blur)=\"onTouch()\"\r\n        style=\"height: auto\"\r\n        (input)=\"SetLanguageValue($event.target.value)\"\r\n        [attr.rows]=\"rows\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n        [ngClass]=\"[componentHeight | toControlHeight]\"\r\n        [disabled]=\"isdisabled\"\r\n      ></textarea>\r\n\r\n      <div\r\n        placement=\"bottom-right\"\r\n        class=\"input-group-append\"\r\n        sac-multilanguagemenu\r\n        [buttontemplate]=\"menuButton\"\r\n        #contextmenu\r\n      >\r\n        <ng-template #menuButton>\r\n          <button\r\n            sacMultilanguageMenuAnchor\r\n            [id]=\"name + '_dropdownitem'\"\r\n            type=\"button\"\r\n            class=\"btn dropdown-toggle\"\r\n            (click)=\"contextmenu.toggle()\"\r\n            [ngClass]=\"[IsAnyEmpty() ? 'btn-warning' : 'btn-secondary']\"\r\n          >\r\n            <img\r\n              src=\"{{SelectedIcon}}\"\r\n              class=\"align-baseline mr-1 ml-1\"\r\n              *ngIf=\"SelectedIconType === IconType.Image\"\r\n            />\r\n            <i\r\n              [ngClass]=\"SelectedIcon\"\r\n              class=\"align-baseline mr-1 ml-1\"\r\n              *ngIf=\"SelectedIconType === IconType.CssSprite\"\r\n            ></i>\r\n          </button>\r\n        </ng-template>\r\n        <ng-container *ngFor=\"let sprache of Languages\">\r\n          <sac-multilanguagemenubutton\r\n            *ngIf=\"sprache.IconType === IconType.Image\"\r\n            text=\"{{sprache.Text}}\"\r\n            image=\"{{sprache.Icon}}\"\r\n            [cssclass]=\"IsEmpty(sprache) ? 'text-danger border-left border-danger': ''\"\r\n            (clicked)=\"SelectLanguage(sprache)\"\r\n          ></sac-multilanguagemenubutton>\r\n          <sac-multilanguagemenubutton\r\n            *ngIf=\"sprache.IconType === IconType.CssSprite\"\r\n            text=\"{{sprache.Text}}\"\r\n            icon=\"{{sprache.Icon}}\"\r\n            [cssclass]=\"IsEmpty(sprache) ? 'text-danger border-left border-danger': ''\"\r\n            (clicked)=\"SelectLanguage(sprache)\"\r\n          ></sac-multilanguagemenubutton>\r\n        </ng-container>\r\n      </div>\r\n      <div\r\n        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n        class=\"invalid-feedback\"\r\n      >\r\n        {{ GetErrorMessage() | async }}\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n<div class=\"row\">\r\n  <div class=\"col text-right\"></div>\r\n</div>\r\n",
+                template: "<div\r\n    class=\"row form-group\"\r\n    [class.no-gutters]=\"disablelabel\">\r\n    <label\r\n        for=\"{{ name }}\"\r\n        class=\"col-12 col-form-label d-flex\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n        [class.required]=\"isrequired\">\r\n        <div\r\n            class=\"text flex-grow-0\"\r\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\r\n            {{ label }}\r\n        </div>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [ngClass]=\"HelptextTooltipIcon\"\r\n                class=\"ml-1\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n            <div\r\n                class=\"input-group\"\r\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n                [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\r\n                <textarea\r\n                    id=\"{{ name }}\"\r\n                    name=\"{{ name }}\"\r\n                    type=\"text\"\r\n                    class=\"form-control\"\r\n                    [value]=\"LanguageValue\"\r\n                    [attr.placeholder]=\"placeholder\"\r\n                    (blur)=\"onTouch()\"\r\n                    style=\"height: auto\"\r\n                    (input)=\"SetLanguageValue($event.target.value)\"\r\n                    [attr.rows]=\"rows\"\r\n                    [attr.maxlength]=\"maxtextlength\"\r\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n                    [ngClass]=\"[componentHeight | toControlHeight]\"\r\n                    [disabled]=\"isdisabled\"></textarea>\r\n\r\n                <div\r\n                    placement=\"bottom-right\"\r\n                    class=\"input-group-append\"\r\n                    sac-multilanguagemenu\r\n                    [buttontemplate]=\"menuButton\"\r\n                    #contextmenu>\r\n                    <ng-template #menuButton>\r\n                        <button\r\n                            sacMultilanguageMenuAnchor\r\n                            [id]=\"name + '_dropdownitem'\"\r\n                            type=\"button\"\r\n                            class=\"btn dropdown-toggle\"\r\n                            (click)=\"contextmenu.toggle()\"\r\n                            [ngClass]=\"[IsAnyEmpty() ? 'btn-warning' : 'btn-secondary']\">\r\n                            <img\r\n                                src=\"{{ SelectedIcon }}\"\r\n                                class=\"align-baseline mr-1 ml-1\"\r\n                                *ngIf=\"SelectedIconType === IconType.Image\" />\r\n                            <i\r\n                                [ngClass]=\"SelectedIcon\"\r\n                                class=\"align-baseline mr-1 ml-1\"\r\n                                *ngIf=\"SelectedIconType === IconType.CssSprite\"></i>\r\n                        </button>\r\n                    </ng-template>\r\n                    <ng-container *ngFor=\"let sprache of Languages\">\r\n                        <sac-multilanguagemenubutton\r\n                            *ngIf=\"sprache.IconType === IconType.Image\"\r\n                            text=\"{{ sprache.Text }}\"\r\n                            image=\"{{ sprache.Icon }}\"\r\n                            [cssclass]=\"IsEmpty(sprache) ? 'text-danger border-left border-danger' : ''\"\r\n                            (clicked)=\"SelectLanguage(sprache)\"></sac-multilanguagemenubutton>\r\n                        <sac-multilanguagemenubutton\r\n                            *ngIf=\"sprache.IconType === IconType.CssSprite\"\r\n                            text=\"{{ sprache.Text }}\"\r\n                            icon=\"{{ sprache.Icon }}\"\r\n                            [cssclass]=\"IsEmpty(sprache) ? 'text-danger border-left border-danger' : ''\"\r\n                            (clicked)=\"SelectLanguage(sprache)\"></sac-multilanguagemenubutton>\r\n                    </ng-container>\r\n                </div>\r\n\r\n                <div\r\n                    *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n                    class=\"invalid-feedback\">\r\n                    {{ GetErrorMessage() | async }}\r\n                </div>\r\n            </div>\r\n            <small\r\n                *ngIf=\"helptextmode === 'text' && helptext\"\r\n                class=\"form-text text-muted\">\r\n                {{ helptext }}\r\n            </small>\r\n        </div>\r\n\r\n        <div\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n            class=\"form-control-plaintext align-self-top ml-2 mr-1 w-auto\"\r\n            [ngClass]=\"[componentHeight | toControlHeight]\">\r\n            <sac-tooltip\r\n                [tooltiptext]=\"helptext\"\r\n                [inlinemode]=\"true\">\r\n                <span\r\n                    [ngClass]=\"HelptextTooltipIcon\"\r\n                    class=\"ml-1\">\r\n                </span>\r\n            </sac-tooltip>\r\n        </div>\r\n    </div>\r\n</div>\r\n<div class=\"row\">\r\n    <div class=\"col text-right\"></div>\r\n</div>\r\n",
                 // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                 providers: [
                     {
@@ -2132,26 +2228,31 @@ SacMultilanguagemenuContainerDirective.ctorParameters = () => [
 ];
 
 /**
- * Component für Menü Eintrag in Context Menü
+ * Component for menu entry in context menu
  */
 class SacMultilanguagemenuItemButtonComponent extends SacContextmenuItemButtonCommon {
+    // #region Constructors
     /**
      * Constructor
      * @param contextmenu Instance von Context Menü
      */
-    constructor(contextmenu) {
-        super(contextmenu);
+    constructor() {
+        super();
     }
 }
 SacMultilanguagemenuItemButtonComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sac-multilanguagemenubutton',
-                template: "<button\r\n  type=\"button\"\r\n  class=\"dropdown-item\"\r\n  (click)=\"callaction($event)\"\r\n  [class.disabled]=\"isdisabled\"\r\n  [ngClass]=\"cssclass\"\r\n  [attr.disabled]=\"isdisabled ? 'disabled' : null\"\r\n>\r\n  <div class=\"d-flex\">\r\n    <div *ngIf=\"!isicondisabled\" style=\"min-width: 1.5rem\">\r\n      <img *ngIf=\"image\" [src]=\"image\" class=\"align-baseline\" />\r\n      <i *ngIf=\"icon\" [class]=\"iconstyle + ' ' + icon\"></i>\r\n    </div>\r\n    <div class=\"flex-grow-1\">{{ text }}</div>\r\n  </div>\r\n</button>\r\n"
+                template: "<button\r\n  type=\"button\"\r\n  class=\"dropdown-item\"\r\n  (click)=\"callaction($event)\"\r\n  [class.disabled]=\"isdisabled\"\r\n  [ngClass]=\"cssclass\"\r\n  [attr.disabled]=\"isdisabled ? 'disabled' : null\"\r\n>\r\n  <div class=\"d-flex\">\r\n    <div *ngIf=\"!isicondisabled\" style=\"min-width: 1.5rem\">\r\n      <img *ngIf=\"image\" [src]=\"image\" class=\"align-baseline\" />\r\n      <i *ngIf=\"icon\" [class]=\"iconstyle + ' ' + icon\"></i>\r\n    </div>\r\n    <div class=\"flex-grow-1\">{{ text }}</div>\r\n  </div>\r\n</button>\r\n",
+                providers: [
+                    {
+                        provide: SacContextmenuItemCommon,
+                        useExisting: forwardRef(() => SacMultilanguagemenuItemButtonComponent),
+                    },
+                ]
             },] }
 ];
-SacMultilanguagemenuItemButtonComponent.ctorParameters = () => [
-    { type: SacContextmenuCommon }
-];
+SacMultilanguagemenuItemButtonComponent.ctorParameters = () => [];
 
 class SACBootstrap4MultilanguageModule {
 }
@@ -2165,7 +2266,11 @@ SACBootstrap4MultilanguageModule.decorators = [
                     SacMultilanguagemenuContainerDirective,
                     SacMultilanguagemenuItemButtonComponent,
                 ],
-                imports: [CommonModule, SACBootstrap4LayoutModule],
+                imports: [
+                    CommonModule,
+                    SACBootstrap4LayoutModule,
+                    SACBootstrap4TooltipModule,
+                ],
                 exports: [SacMultilanguageInputComponent, SacMultilanguageInputAreaComponent],
             },] }
 ];
@@ -2198,7 +2303,7 @@ class SacStaticFormContainerComponent extends SacStaticFormContainerCommon {
 SacStaticFormContainerComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sac-staticformcontainer',
-                template: "<div class=\"row form-group\" [class.no-gutters]=\"disablelabel\">\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}_label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <ng-content></ng-content>\r\n    <label\r\n      for=\"{{name}}\"\r\n      class=\"form-label-adaptive form-label-fixed\"\r\n      [ngClass]=\"{ 'required': isrequired }\"\r\n      *ngIf=\"isAdaptiveLabel && !disablelabel\"\r\n      >{{label}}</label\r\n    >\r\n    <div\r\n      class=\"invalid-feedback\"\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                template: "<div\r\n    class=\"row form-group\"\r\n    [class.no-gutters]=\"disablelabel\">\r\n    <label\r\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n        id=\"{{ name }}_label\"\r\n        for=\"{{ name }}\"\r\n        class=\"col-12 col-form-label d-flex\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n        [class.required]=\"isrequired\">\r\n        <div\r\n            class=\"text flex-grow-0\"\r\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\r\n            {{ label }}\r\n        </div>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\"\r\n            ><span\r\n                [ngClass]=\"HelptextTooltipIcon\"\r\n                class=\"ml-1\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n        <div\r\n            [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n            [class.was-validated]=\"isinlineerrorenabled && isinvalid && errormessage\">\r\n            <ng-content></ng-content>\r\n            <label\r\n                for=\"{{ name }}\"\r\n                class=\"form-label-adaptive form-label-fixed\"\r\n                [ngClass]=\"{ required: isrequired }\"\r\n                *ngIf=\"isAdaptiveLabel && !disablelabel\">\r\n                {{ label }}\r\n            </label>\r\n            <small\r\n                *ngIf=\"helptextmode === 'text' && helptext\"\r\n                class=\"form-text text-muted\">\r\n                {{ helptext }}\r\n            </small>\r\n            <div\r\n                class=\"invalid-feedback\"\r\n                *ngIf=\"isinlineerrorenabled && isinvalid && errormessage\">\r\n                {{ errormessage }}\r\n            </div>\r\n        </div>\r\n\r\n        <div\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n            class=\"form-control-plaintext align-self-top ml-2 mr-1 w-auto\"\r\n            [ngClass]=\"[componentHeight | toControlHeight]\">\r\n            <sac-tooltip\r\n                [tooltiptext]=\"helptext\"\r\n                [inlinemode]=\"true\">\r\n                <span\r\n                    [ngClass]=\"HelptextTooltipIcon\"\r\n                    class=\"ml-1\">\r\n                </span>\r\n            </sac-tooltip>\r\n        </div>\r\n    </div>\r\n</div>\r\n",
                 // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                 providers: [
                     {
@@ -2236,7 +2341,7 @@ class SacStaticLabelComponent extends SacStaticLabelCommon {
 SacStaticLabelComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sac-staticlabel',
-                template: "<div class=\"row form-group\" [class.no-gutters]=\"disablelabel\">\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}_label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"form-control-plaintext\"\r\n      [ngClass]=\"[componentHeight | toControlHeight]\"\r\n      [innerHTML]=\"value\"\r\n    ></div>\r\n    <label\r\n      for=\"{{name}}\"\r\n      class=\"col-left control-label\"\r\n      *ngIf=\"isAdaptiveLabel && !disablelabel\"\r\n      >{{label}}</label\r\n    >\r\n  </div>\r\n</div>\r\n",
+                template: "<div\r\n    class=\"row form-group\"\r\n    [class.no-gutters]=\"disablelabel\">\r\n    <label\r\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n        id=\"{{ name }}_label\"\r\n        for=\"{{ name }}\"\r\n        class=\"col-12 col-form-label d-flex\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\">\r\n        <div\r\n            class=\"text flex-grow-0\"\r\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\r\n            {{ label }}\r\n        </div>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\"\r\n            ><span\r\n                [ngClass]=\"HelptextTooltipIcon\"\r\n                class=\"ml-1\"></span> </sac-tooltip\r\n    ></label>\r\n    <div\r\n        class=\"col-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n        <div>\r\n            <div\r\n                [id]=\"name\"\r\n                class=\"form-control-plaintext\"\r\n                [ngClass]=\"[componentHeight | toControlHeight]\"\r\n                [innerHTML]=\"value\"></div>\r\n            <small\r\n                *ngIf=\"helptextmode === 'text' && helptext\"\r\n                class=\"form-text text-muted\">\r\n                {{ helptext }}\r\n            </small>\r\n        </div>\r\n\r\n        <div\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n            class=\"form-control-plaintext align-self-top ml-2 mr-1 w-auto\"\r\n            [ngClass]=\"[componentHeight | toControlHeight]\">\r\n            <sac-tooltip\r\n                [tooltiptext]=\"helptext\"\r\n                [inlinemode]=\"true\">\r\n                <span\r\n                    [ngClass]=\"HelptextTooltipIcon\"\r\n                    class=\"ml-1\">\r\n                </span>\r\n            </sac-tooltip>\r\n        </div>\r\n    </div>\r\n</div>\r\n",
                 // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                 providers: [
                     {
@@ -2262,7 +2367,11 @@ class SACBootstrap4StaticLabelModule {
 SACBootstrap4StaticLabelModule.decorators = [
     { type: NgModule, args: [{
                 declarations: [SacStaticLabelComponent, SacStaticFormContainerComponent],
-                imports: [CommonModule, SACBootstrap4LayoutModule],
+                imports: [
+                    CommonModule,
+                    SACBootstrap4LayoutModule,
+                    SACBootstrap4TooltipModule,
+                ],
                 exports: [SacStaticLabelComponent, SacStaticFormContainerComponent],
             },] }
 ];
@@ -2294,7 +2403,7 @@ class SacTabComponent extends SacTabCommon {
 SacTabComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sac-tab',
-                template: "<!-- Nav tabs -->\r\n<div class=\"nav nav-tabs\" role=\"tablist\">\r\n  <a\r\n    *ngFor=\"let item of _tabItems\"\r\n    role=\"tab\"\r\n    class=\"nav-item nav-link active\"\r\n    data-toggle=\"tab\"\r\n    [ngClass]=\"{ 'active show': item.active, 'disabled': item.disabled }\"\r\n    (click)=\"selectTab(item)\"\r\n    [ngStyle]=\"{'cursor': item.disabled ? 'not-allowed' : 'pointer'}\"\r\n    >{{item.label}}</a\r\n  >\r\n</div>\r\n\r\n<!-- Tab panes -->\r\n<div class=\"tab-content pl-3 pt-2\">\r\n  <ng-content></ng-content>\r\n</div>\r\n"
+                template: "<!-- Nav tabs -->\r\n<div class=\"nav nav-tabs\" role=\"tablist\">\r\n  <a\r\n    *ngFor=\"let item of _tabItems\"\r\n    [id]=\"GetTabItemButtonId(item.id)\"\r\n    role=\"tab\"\r\n    class=\"nav-item nav-link active\"\r\n    data-toggle=\"tab\"\r\n    [ngClass]=\"{ 'active show': item.active, 'disabled': item.disabled }\"\r\n    (click)=\"selectTab(item)\"\r\n    [ngStyle]=\"{'cursor': item.disabled ? 'not-allowed' : 'pointer'}\"\r\n    >{{item.label}}</a\r\n  >\r\n</div>\r\n\r\n<!-- Tab panes -->\r\n<div class=\"tab-content pl-3 pt-2\">\r\n  <ng-content></ng-content>\r\n</div>\r\n"
             },] }
 ];
 SacTabComponent.propDecorators = {
@@ -2340,7 +2449,7 @@ class SacTinyMceComponent extends SacTinyMceCommon {
 SacTinyMceComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sac-tinymce',
-                template: "<div class=\"form-row form-group\">\r\n  <div\r\n    class=\"col\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n  >\r\n    <label for=\"{{name}}\" class=\"form-control-label\">{{label}}</label>\r\n  </div>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <editor\r\n      [id]=\"name + '_tinymce'\"\r\n      [init]=\"_config\"\r\n      [initialValue]=\"value\"\r\n      ngModel\r\n      [ngModelOptions]=\"{standalone: true}\"\r\n      (ngModelChange)=\"setValue($event)\"\r\n      (onSaveContent)=\"save($event.event.content)\"\r\n      [disabled]=\"disabled\"\r\n      [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    ></editor>\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<sac-dialog\r\n  *ngIf=\"selectdialogvisible\"\r\n  [allowesc]=\"false\"\r\n  [backdrop]=\"true\"\r\n  [(isvisible)]=\"selectdialogvisible\"\r\n  title=\"{{ lngResourceService.GetString(validationKeyService.TinyMceFileselectDialogtitle) | async }}\"\r\n  size=\"large\"\r\n  height=\"500px\"\r\n>\r\n  <ng-container dialogbody>\r\n    <sac-filebrowser\r\n      [apiurl]=\"filebrowserapiurl\"\r\n      (file)=\"selectDialogSettings.value = $event\"\r\n      [allowfoldercreate]=\"allowfoldercreate\"\r\n      [allowfolderrename]=\"allowfolderrename\"\r\n      [allowfolderdelete]=\"allowfolderdelete\"\r\n      [allowfileupload]=\"allowfileupload\"\r\n      [allowfilerename]=\"allowfilerename\"\r\n      [allowfiledelete]=\"allowfiledelete\"\r\n      [selectedfile]=\"selectDialogSettings.value\"\r\n      [allowedtypes]=\"selectDialogSettings.allowedtypes\"\r\n    ></sac-filebrowser>\r\n  </ng-container>\r\n  <ng-container dialogfooter>\r\n    <sac-button\r\n      role=\"primary\"\r\n      [name]=\"name + '_modalOk'\"\r\n      text=\"{{ lngResourceService.GetString(validationKeyService.TinyMceFileselectOk) | async }}\"\r\n      (clicked)=\"setSelectDialogResult()\"\r\n    ></sac-button>\r\n    <sac-button\r\n      [name]=\"name + '_modalClose'\"\r\n      text=\"{{ lngResourceService.GetString(validationKeyService.TinyMceFileselectCancel) | async }}\"\r\n      (clicked)=\"closeSelectDialog()\"\r\n    ></sac-button>\r\n  </ng-container>\r\n</sac-dialog>\r\n",
+                template: "<div class=\"row form-group\">\r\n    <label\r\n        for=\"{{ name }}\"\r\n        class=\"col-12 col-form-label d-flex\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n        [class.required]=\"isrequired\"\r\n        ><div\r\n            class=\"text flex-grow-0\"\r\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\r\n            {{ label }}\r\n        </div>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [ngClass]=\"HelptextTooltipIcon\"\r\n                class=\"ml-1\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n            <editor\r\n                [id]=\"name + '_tinymce'\"\r\n                [init]=\"_config\"\r\n                [initialValue]=\"value\"\r\n                ngModel\r\n                [ngModelOptions]=\"{ standalone: true }\"\r\n                (ngModelChange)=\"setValue($event)\"\r\n                (onSaveContent)=\"save($event.event.content)\"\r\n                [disabled]=\"disabled\"\r\n                [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\r\n            </editor>\r\n            <small\r\n                *ngIf=\"helptextmode === 'text' && helptext\"\r\n                class=\"form-text text-muted\">\r\n                {{ helptext }}\r\n            </small>\r\n            <div\r\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n                class=\"invalid-feedback\">\r\n                {{ GetErrorMessage() | async }}\r\n            </div>\r\n        </div>\r\n\r\n        <div\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n            class=\"form-control-plaintext align-self-top ml-2 mr-1 w-auto\"\r\n            [ngClass]=\"[componentHeight | toControlHeight]\">\r\n            <sac-tooltip\r\n                [tooltiptext]=\"helptext\"\r\n                [inlinemode]=\"true\">\r\n                <span\r\n                    [ngClass]=\"HelptextTooltipIcon\"\r\n                    class=\"ml-1\">\r\n                </span>\r\n            </sac-tooltip>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<sac-dialog\r\n    *ngIf=\"selectdialogvisible\"\r\n    [allowesc]=\"false\"\r\n    [backdrop]=\"true\"\r\n    [(isvisible)]=\"selectdialogvisible\"\r\n    title=\"{{ lngResourceService.GetString(validationKeyService.TinyMceFileselectDialogtitle) | async }}\"\r\n    size=\"large\"\r\n    height=\"500px\">\r\n    <ng-container dialogbody>\r\n        <sac-filebrowser\r\n            [apiurl]=\"filebrowserapiurl\"\r\n            (file)=\"selectDialogSettings.value = $event\"\r\n            [allowfoldercreate]=\"allowfoldercreate\"\r\n            [allowfolderrename]=\"allowfolderrename\"\r\n            [allowfolderdelete]=\"allowfolderdelete\"\r\n            [allowfileupload]=\"allowfileupload\"\r\n            [allowfilerename]=\"allowfilerename\"\r\n            [allowfiledelete]=\"allowfiledelete\"\r\n            [selectedfile]=\"selectDialogSettings.value\"\r\n            [allowedtypes]=\"selectDialogSettings.allowedtypes\"></sac-filebrowser>\r\n    </ng-container>\r\n    <ng-container dialogfooter>\r\n        <sac-button\r\n            role=\"primary\"\r\n            [name]=\"name + '_modalOk'\"\r\n            text=\"{{ lngResourceService.GetString(validationKeyService.TinyMceFileselectOk) | async }}\"\r\n            (clicked)=\"setSelectDialogResult()\"></sac-button>\r\n        <sac-button\r\n            [name]=\"name + '_modalClose'\"\r\n            text=\"{{ lngResourceService.GetString(validationKeyService.TinyMceFileselectCancel) | async }}\"\r\n            (clicked)=\"closeSelectDialog()\"></sac-button>\r\n    </ng-container>\r\n</sac-dialog>\r\n",
                 // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                 providers: [
                     {
@@ -2376,11 +2485,59 @@ SACBootstrap4TinyMceModule.decorators = [
                     SACBootstrap4ButtonModule,
                     SACBootstrap4DialogModule,
                     SACBootstrap4BrowserModule,
+                    SACBootstrap4TooltipModule,
                 ],
                 exports: [SacTinyMceComponent],
             },] }
 ];
 
+/**
+ * Treeview Compomnent
+ */
+class SacTreeviewComponent extends SacTreeviewCommon {
+    // #region Constructors
+    /**
+     * Constructor
+     * @param formLayout SacFormLayout to define scoped layout settings
+     * @param injector Component Injector
+     */
+    constructor(formLayout, injector) {
+        super(formLayout, injector);
+    }
+}
+SacTreeviewComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'sac-treeview',
+                template: "<div\r\n    class=\"row mb-3\"\r\n    [class.g-0]=\"disablelabel\">\r\n    <label\r\n        for=\"{{ name }}\"\r\n        class=\"col-12 col-form-label d-flex\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n        [class.required]=\"isrequired\">\r\n        <div\r\n            class=\"text flex-grow-0\"\r\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\r\n            {{ label }}\r\n        </div>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [ngClass]=\"HelptextTooltipIcon\"\r\n                class=\"ml-1\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\r\n        <div [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n            <div\r\n                class=\"w-100\"\r\n                [style.min-width]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 0 : null\"\r\n                [class.mr-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n                <ul\r\n                    class=\"list-group list-group-flush\"\r\n                    id=\"{{ name }}\"\r\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n                    [class.border]=\"invalid && (dirty || touched)\"\r\n                    [class.border-danger]=\"invalid && (dirty || touched)\">\r\n                    <ng-container *ngFor=\"let node of data\">\r\n                        <ng-template\r\n                            [ngTemplateOutlet]=\"treeItem\"\r\n                            [ngTemplateOutletContext]=\"{ node: node, deep: 0, path: '', textpath: '' }\">\r\n                        </ng-template>\r\n                    </ng-container>\r\n                </ul>\r\n\r\n                <div\r\n                    *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n                    class=\"invalid-feedback\">\r\n                    {{ GetErrorMessage() | async }}\r\n                </div>\r\n\r\n                <small\r\n                    *ngIf=\"helptextmode === 'text' && helptext\"\r\n                    class=\"form-text text-muted\">\r\n                    {{ helptext }}\r\n                </small>\r\n            </div>\r\n\r\n            <div\r\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n                class=\"form-control-plaintext align-self-top ml-2 mr-1 w-auto\"\r\n                [ngClass]=\"[componentHeight | toControlHeight]\">\r\n                <sac-tooltip\r\n                    [tooltiptext]=\"helptext\"\r\n                    [inlinemode]=\"true\">\r\n                    <span\r\n                        [ngClass]=\"HelptextTooltipIcon\"\r\n                        class=\"ml-1\">\r\n                    </span>\r\n                </sac-tooltip>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n<ng-template\r\n    #treeItem\r\n    let-node=\"node\"\r\n    let-deep=\"deep\"\r\n    let-path=\"path\"\r\n    let-textpath=\"textpath\">\r\n    <li\r\n        class=\"list-group-item list-group-item-action py-1 px-2 d-flex align-items-center\"\r\n        [class.active]=\"isSelectedState(node)\"\r\n        (mouseenter)=\"setHoverState(node, true)\"\r\n        (mouseleave)=\"setHoverState(node, false)\"\r\n        style=\"cursor: pointer\"\r\n        attr.data-path=\"{{ path }}/{{ getStringField(node, attrid) }}\"\r\n        attr.data-textpath=\"{{ textpath }}/{{ getStringField(node, attrlabel) }}\">\r\n        <div\r\n            class=\"mx-3\"\r\n            *ngFor=\"let i of count(deep)\">\r\n        </div>\r\n\r\n        <div\r\n            (click)=\"onNodeClicked(node)\"\r\n            *ngIf=\"expandedstate === 'true' || expandedstate === true\"\r\n            class=\"mr-2\"\r\n            [ngClass]=\"!hasChildren(node) ? iconFolderEmpty : !isExpandedState(node) ? iconFolderCollabsed : isExpandedState(node) ? iconFolderOpen : ''\">\r\n        </div>\r\n\r\n        <div\r\n            (click)=\"onNodeClicked(node)\"\r\n            *ngIf=\"attricon && getStringField(node, attricon)\">\r\n            <ng-template\r\n                [ngTemplateOutlet]=\"templateicon || defaultTemplateIcon\"\r\n                [ngTemplateOutletContext]=\"{ node: node }\">\r\n            </ng-template>\r\n        </div>\r\n\r\n        <div\r\n            (click)=\"onNodeClicked(node)\"\r\n            class=\"flex-grow-1 py-1\"\r\n            [style.overflow]=\"enableellipsis ? 'hidden' : null\"\r\n            [style.text-overflow]=\"enableellipsis ? 'ellipsis' : null\"\r\n            [style.white-space]=\"enableellipsis ? 'nowrap' : null\">\r\n            <ng-template\r\n                [ngTemplateOutlet]=\"templatelabel || defaultTemplateLabel\"\r\n                [ngTemplateOutletContext]=\"{ node: node, label: getStringField(node, attrlabel) }\">\r\n            </ng-template>\r\n        </div>\r\n\r\n        <div\r\n            (click)=\"setSelectedState(node)\"\r\n            class=\"flex-shrink-0\"\r\n            *ngIf=\"!isDisabledState(node) && (showactionalways || isSelectedState(node) || isHoverState(node))\">\r\n            <ng-template\r\n                [ngTemplateOutlet]=\"templateaction || defaultTemplateAction\"\r\n                [ngTemplateOutletContext]=\"{ node: node, actionhandler: onActionClicked.bind(this) }\">\r\n            </ng-template>\r\n        </div>\r\n    </li>\r\n\r\n    <ng-container *ngIf=\"isExpandedState(node)\">\r\n        <ng-template\r\n            *ngFor=\"let child of getChildren(node)\"\r\n            [ngTemplateOutlet]=\"treeItem\"\r\n            [ngTemplateOutletContext]=\"{\r\n                node: child,\r\n                deep: deep + 1,\r\n                path: path + '/' + getStringField(node, attrid),\r\n                textpath: textpath + '/' + getStringField(node, attrlabel)\r\n            }\">\r\n        </ng-template>\r\n    </ng-container>\r\n</ng-template>\r\n<ng-template\r\n    #defaultTemplateLabel\r\n    let-label=\"label\"\r\n    let-node=\"node\">\r\n    <span [title]=\"label\">\r\n        {{ label }}\r\n    </span>\r\n</ng-template>\r\n\r\n<ng-template\r\n    #defaultTemplateIcon\r\n    let-node=\"node\">\r\n    <div\r\n        class=\"mr-2\"\r\n        [ngClass]=\"getStringField(node, attricon)\">\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template\r\n    #defaultTemplateAction\r\n    let-node=\"node\"\r\n    let-actionhandler=\"actionhandler\">\r\n    <a\r\n        class=\"btn btn-sm btn-link text-secondary\"\r\n        (click)=\"actionhandler({ action: 'default', node: node })\">\r\n        <i [class]=\"iconAction\"></i>\r\n    </a>\r\n</ng-template>\r\n",
+                providers: [
+                    {
+                        provide: NG_VALUE_ACCESSOR,
+                        multi: true,
+                        useExisting: SacTreeviewComponent,
+                    },
+                    {
+                        provide: NG_VALIDATORS,
+                        useExisting: forwardRef(() => SacTreeviewComponent),
+                        multi: true,
+                    },
+                ]
+            },] }
+];
+SacTreeviewComponent.ctorParameters = () => [
+    { type: SacFormLayoutDirective, decorators: [{ type: Host }, { type: Optional }] },
+    { type: Injector }
+];
+
+class SACBootstrap4TreeviewModule {
+}
+SACBootstrap4TreeviewModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [SacTreeviewComponent],
+                imports: [CommonModule, SACBootstrap4TooltipModule, SACBootstrap4LayoutModule, SACBootstrap4ContextmenuModule],
+                exports: [SacTreeviewComponent],
+            },] }
+];
+
 /**
  * Validation Summary Kompontente
  */
@@ -2484,5 +2641,5 @@ SACBootstrap4WizardModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { SACBootstrap4BrowserModule, SACBootstrap4ButtonModule, SACBootstrap4CheckboxModule, SACBootstrap4ConfirmModule, SACBootstrap4ContextmenuModule, SACBootstrap4DateTimeModule, SACBootstrap4DialogModule, SACBootstrap4DropdownModule, SACBootstrap4FormModule, SACBootstrap4GridModule, SACBootstrap4InputModule, SACBootstrap4LayoutModule, SACBootstrap4ListModule, SACBootstrap4MultilanguageModule, SACBootstrap4StaticLabelModule, SACBootstrap4TabsModule, SACBootstrap4TinyMceModule, SACBootstrap4UploadModule, SACBootstrap4ValidationSummaryModule, SACBootstrap4WizardModule, SacFormDirective, ServiceConfirm, SacBrowserComponent as ɵa, SacDropzoneMultipleComponent as ɵb, SacTimeComponent as ɵba, SacDateSelectorComponent as ɵbb, SacGridComponent as ɵbc, SacGridColumnComponent as ɵbd, SacGridColumnActionComponent as ɵbe, SacPagingComponent as ɵbf, SacGridButtonComponent as ɵbg, SacGridImageComponent as ɵbh, SacInputComponent as ɵbi, SacInputAreaComponent as ɵbj, SacInputCurrencyComponent as ɵbk, SacInputDecimalComponent as ɵbl, SacInputEmailComponent as ɵbm, SacInputIntegerComponent as ɵbn, SacInputPasswordComponent as ɵbo, SacInputSearchComponent as ɵbp, SacDropdownComponent as ɵbq, SacDropdownOptionDirective as ɵbr, SacListboxComponent as ɵbs, SacListboxOptionDirective as ɵbt, SacMultilanguageInputComponent as ɵbu, SacMultilanguageInputAreaComponent as ɵbv, SacMultilanguagemenuComponent as ɵbw, SacMultilanguagemenuAnchorDirective as ɵbx, SacMultilanguagemenuContainerDirective as ɵby, SacMultilanguagemenuItemButtonComponent as ɵbz, SacFormLayoutDirective as ɵc, SacStaticLabelComponent as ɵca, SacStaticFormContainerComponent as ɵcb, SacTabComponent as ɵcc, SacTabItemComponent as ɵcd, SacTinyMceComponent as ɵce, SacValidationSummaryComponent as ɵcf, SacWizardComponent as ɵcg, SacWizardItemComponent as ɵch, SacConfirmComponent as ɵd, SacDialogComponent as ɵe, SacButtonComponent as ɵf, SacContextmenuComponent as ɵg, SacContextmenuItemButtonComponent as ɵh, SacContextmenuItemSplitterComponent as ɵi, SacContextmenuAnchorDirective as ɵj, SacContextmenuContainerDirective as ɵk, SacUploadComponent as ɵl, SacUploadMultipleComponent as ɵm, SacDropzoneSingleComponent as ɵn, SacToControlHeightPipe as ɵo, SacToControlWidthCssPipe as ɵp, SacToLabelHeightPipe as ɵq, SacToLabelWidthCssPipe as ɵr, SACFORM_FACTORY as ɵs, NGFORM_FACTORY as ɵt, SacInheritFormDirective as ɵu, SacCheckboxComponent as ɵv, SacRadiobuttonComponent as ɵw, SacRadiobuttonsComponent as ɵx, SacDateComponent as ɵy, SacDateTimeComponent as ɵz };
+export { NGFORM_FACTORY, SACBootstrap4BrowserModule, SACBootstrap4ButtonModule, SACBootstrap4CheckboxModule, SACBootstrap4ConfirmModule, SACBootstrap4ContextmenuModule, SACBootstrap4DateTimeModule, SACBootstrap4DialogModule, SACBootstrap4DropdownModule, SACBootstrap4FormModule, SACBootstrap4GridModule, SACBootstrap4InputModule, SACBootstrap4LayoutModule, SACBootstrap4ListModule, SACBootstrap4MultilanguageModule, SACBootstrap4StaticLabelModule, SACBootstrap4TabsModule, SACBootstrap4TinyMceModule, SACBootstrap4TooltipModule, SACBootstrap4TreeviewModule, SACBootstrap4UploadModule, SACBootstrap4ValidationSummaryModule, SACBootstrap4WizardModule, SACFORM_FACTORY, SacBrowserComponent, SacButtonComponent, SacCheckboxComponent, SacConfirmComponent, SacContextmenuAnchorDirective, SacContextmenuComponent, SacContextmenuItemButtonComponent, SacContextmenuItemSplitterComponent, SacDateComponent, SacDateSelectorComponent, SacDateTimeComponent, SacDialogComponent, SacDropdownComponent, SacDropdownOptionDirective, SacDropzoneMultipleComponent, SacDropzoneSingleComponent, SacFormDirective, SacFormLayoutDirective, SacGridButtonComponent, SacGridColumnActionComponent, SacGridColumnComponent, SacGridComponent, SacGridImageComponent, SacInheritFormDirective, SacInputAreaComponent, SacInputComponent, SacInputCurrencyComponent, SacInputDecimalComponent, SacInputEmailComponent, SacInputIntegerComponent, SacInputPasswordComponent, SacInputSearchComponent, SacListboxComponent, SacListboxOptionDirective, SacMultilanguageInputAreaComponent, SacMultilanguageInputComponent, SacPagingComponent, SacRadiobuttonComponent, SacRadiobuttonsComponent, SacStaticFormContainerComponent, SacStaticLabelComponent, SacTabComponent, SacTabItemComponent, SacTimeComponent, SacTinyMceComponent, SacToControlHeightPipe, SacToControlWidthCssPipe, SacToLabelHeightPipe, SacToLabelWidthCssPipe, SacTooltipComponent, SacTreeviewComponent, SacUploadComponent, SacUploadMultipleComponent, SacValidationSummaryComponent, SacWizardComponent, SacWizardItemComponent, ServiceConfirm, SacContextmenuContainerDirective as ɵa, SacMultilanguagemenuComponent as ɵb, SacMultilanguagemenuAnchorDirective as ɵc, SacMultilanguagemenuContainerDirective as ɵd, SacMultilanguagemenuItemButtonComponent as ɵe };
 //# sourceMappingURL=simpleangularcontrols-sac-bootstrap4.js.map