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

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

@@ -592,7 +592,7 @@
     SacConfirmComponent.decorators = [
         { type: core.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"
                 },] }
     ];
 
@@ -930,74 +930,60 @@
         cssClassForm: [{ type: core.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
      */
-    var SacInheritFormDirective = /** @class */ (function () {
-        function SacInheritFormDirective() {
+    var SacInheritFormDirective = /** @class */ (function (_super) {
+        __extends(SacInheritFormDirective, _super);
+        // #region Constructors
+        /**
+         * Construtor
+         * @param injector: injector to receive the NgForm instance
+         */
+        function SacInheritFormDirective(injector) {
+            return _super.call(this, injector.get(forms.NgForm)) || this;
         }
         return SacInheritFormDirective;
-    }());
+    }(sacCommon.SacFormCommon));
     SacInheritFormDirective.decorators = [
         { type: core.Directive, args: [{
                     selector: '[sacInheritForm]',
+                    exportAs: 'sacinheritform',
                     providers: [
                         {
                             provide: SacFormDirective,
                             useFactory: SACFORM_FACTORY,
-                            deps: [[new core.SkipSelf(), SacFormDirective]]
-                        }, {
+                            deps: [[new core.SkipSelf(), SacFormDirective]],
+                        },
+                        {
                             provide: forms.ControlContainer,
                             useFactory: NGFORM_FACTORY,
-                            deps: [forms.NgForm]
-                        }
-                    ]
+                            deps: [forms.NgForm],
+                        },
+                    ],
                 },] }
-    ];
+    ];
+    SacInheritFormDirective.ctorParameters = function () { return [
+        { type: core.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
 
     var SACBootstrap4FormModule = /** @class */ (function () {
         function SACBootstrap4FormModule() {
@@ -1198,6 +1184,71 @@
                 },] }
     ];
 
+    /**
+     * 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>
+     *
+     */
+    var SacTooltipComponent = /** @class */ (function (_super) {
+        __extends(SacTooltipComponent, _super);
+        // #region Constructors
+        /**
+         * Konstrukor
+         * @param parent SacFormular Instanz
+         * @param injector Component Injector
+         */
+        function SacTooltipComponent(cdRef, ref) {
+            return _super.call(this, cdRef, ref) || this;
+        }
+        // #endregion Constructors
+        // #region Protected Methods
+        /**
+         * Padding Value for Bootstrap5 Tooltip Padding
+         * @returns Static Padding Value for BS5
+         */
+        SacTooltipComponent.prototype.getTooltipOffset = function () {
+            return 2;
+        };
+        return SacTooltipComponent;
+    }(sacCommon.SacTooltipCommon));
+    SacTooltipComponent.decorators = [
+        { type: core.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 = function () { return [
+        { type: core.ChangeDetectorRef },
+        { type: core.ElementRef }
+    ]; };
+
+    var SACBootstrap4TooltipModule = /** @class */ (function () {
+        function SACBootstrap4TooltipModule() {
+        }
+        return SACBootstrap4TooltipModule;
+    }());
+    SACBootstrap4TooltipModule.decorators = [
+        { type: core.NgModule, args: [{
+                    declarations: [SacTooltipComponent],
+                    imports: [common.CommonModule],
+                    exports: [SacTooltipComponent],
+                },] }
+    ];
+
     /**
      * Dropzone Komponente für mehrere Uploads
      * @see https://github.com/kukhariev/ngx-uploadx/
@@ -1228,7 +1279,7 @@
     SacDropzoneMultipleComponent.decorators = [
         { type: core.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 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}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" 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  >\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    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\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",
                     providers: [
                         {
                             provide: forms.NG_VALUE_ACCESSOR,
@@ -1281,7 +1332,7 @@
     SacDropzoneSingleComponent.decorators = [
         { type: core.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 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}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" 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  >\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    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\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",
                     providers: [
                         {
                             provide: forms.NG_VALUE_ACCESSOR,
@@ -1326,7 +1377,7 @@
     SacUploadComponent.decorators = [
         { type: core.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 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}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" 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  >\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    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\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",
                     providers: [
                         {
                             provide: forms.NG_VALUE_ACCESSOR,
@@ -1371,7 +1422,7 @@
     SacUploadMultipleComponent.decorators = [
         { type: core.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 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}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" 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  >\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    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\r\n  </div>\r\n</div>\r\n",
                     providers: [
                         {
                             provide: forms.NG_VALUE_ACCESSOR,
@@ -1407,7 +1458,12 @@
                         SacDropzoneSingleComponent,
                         SacDropzoneMultipleComponent,
                     ],
-                    imports: [common.CommonModule, forms.FormsModule, SACBootstrap4LayoutModule],
+                    imports: [
+                        common.CommonModule,
+                        forms.FormsModule,
+                        SACBootstrap4LayoutModule,
+                        SACBootstrap4TooltipModule,
+                    ],
                     exports: [
                         SacUploadComponent,
                         SacUploadMultipleComponent,
@@ -1566,7 +1622,7 @@
     SacCheckboxComponent.decorators = [
         { type: core.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>\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}}<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> </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  >\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    >\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      />\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      >\r\n        <ng-container *ngIf=\"checkboxtext\">{{checkboxtext}}</ng-container>\r\n      </label>\r\n    </div>\r\n    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\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: [
                         {
@@ -1607,7 +1663,7 @@
     SacRadiobuttonsComponent.decorators = [
         { type: core.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  >\r\n    <label\r\n      class=\"col-form-label\"\r\n      [ngClass]=\"componentHeight | toLabelHeight\"\r\n      *ngIf=\"!disablelabel\"\r\n      >{{label}}<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> </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  >\r\n    <ng-content></ng-content>\r\n    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\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: [
                         {
@@ -1665,7 +1721,11 @@
                         SacRadiobuttonComponent,
                         SacRadiobuttonsComponent,
                     ],
-                    imports: [common.CommonModule, SACBootstrap4LayoutModule],
+                    imports: [
+                        common.CommonModule,
+                        SACBootstrap4LayoutModule,
+                        SACBootstrap4TooltipModule,
+                    ],
                     exports: [
                         SacCheckboxComponent,
                         SacRadiobuttonComponent,
@@ -1698,7 +1758,7 @@
     SacDateComponent.decorators = [
         { type: core.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 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}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" 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  >\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    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\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",
                     // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                     providers: [
                         {
@@ -1757,7 +1817,7 @@
     SacDateTimeComponent.decorators = [
         { type: core.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 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}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" 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  >\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    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\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",
                     // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                     providers: [
                         {
@@ -1799,7 +1859,7 @@
     SacTimeComponent.decorators = [
         { type: core.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 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}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" 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  >\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    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\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",
                     // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                     providers: [
                         {
@@ -1834,7 +1894,12 @@
                         SacTimeComponent,
                         SacDateSelectorComponent,
                     ],
-                    imports: [common.CommonModule, angularImask.IMaskModule, SACBootstrap4LayoutModule],
+                    imports: [
+                        common.CommonModule,
+                        angularImask.IMaskModule,
+                        SACBootstrap4LayoutModule,
+                        SACBootstrap4TooltipModule,
+                    ],
                     exports: [
                         SacDateComponent,
                         SacDateTimeComponent,
@@ -1868,7 +1933,7 @@
     SacGridComponent.decorators = [
         { type: core.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: forms.NG_VALUE_ACCESSOR, multi: true, useExisting: SacGridComponent },
@@ -1890,23 +1955,15 @@
 
     /**
      * 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>
-     *
      */
     var SacGridButtonComponent = /** @class */ (function (_super) {
         __extends(SacGridButtonComponent, _super);
         function SacGridButtonComponent() {
             return _super !== null && _super.apply(this, arguments) || this;
         }
+        // #region Public Methods
         /**
-         * Gibt das Icon für den Button zurück
+         * Returns the icon for the button
          */
         SacGridButtonComponent.prototype.getIconClass = function () {
             var iconset = this.iconstyle;
@@ -1956,7 +2013,7 @@
     SacGridColumnComponent.decorators = [
         { type: core.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>\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  (click)=\"ColumnClick()\"\r\n>\r\n  <span [attr.title]=\"IsEllipsis() ? value : null\"> {{value}} </span>\r\n</td>\r\n",
                     providers: [
                         {
                             provide: sacCommon.SacGridColumnBaseCommon,
@@ -2077,11 +2134,23 @@
     }());
     SACBootstrap4GridModule.decorators = [
         { type: core.NgModule, args: [{
-                    declarations: [SacGridComponent, SacGridColumnComponent, SacGridColumnActionComponent, SacPagingComponent, SacGridButtonComponent, SacGridImageComponent],
-                    imports: [
-                        common.CommonModule, forms.FormsModule
+                    declarations: [
+                        SacGridComponent,
+                        SacGridColumnComponent,
+                        SacGridColumnActionComponent,
+                        SacPagingComponent,
+                        SacGridButtonComponent,
+                        SacGridImageComponent,
+                    ],
+                    imports: [common.CommonModule, forms.FormsModule],
+                    exports: [
+                        SacGridComponent,
+                        SacGridColumnComponent,
+                        SacGridColumnActionComponent,
+                        SacPagingComponent,
+                        SacGridButtonComponent,
+                        SacGridImageComponent,
                     ],
-                    exports: [SacGridComponent, SacGridColumnComponent, SacGridColumnActionComponent, SacPagingComponent, SacGridButtonComponent, SacGridImageComponent]
                 },] }
     ];
 
@@ -2104,7 +2173,7 @@
     SacInputComponent.decorators = [
         { type: core.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 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}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" 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  >\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    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\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",
                     // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                     providers: [
                         { provide: forms.NG_VALUE_ACCESSOR, multi: true, useExisting: SacInputComponent },
@@ -2140,7 +2209,7 @@
     SacInputAreaComponent.decorators = [
         { type: core.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\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    >{{label}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" 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  >\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    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\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",
                     // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                     providers: [
                         {
@@ -2180,7 +2249,7 @@
     SacInputCurrencyComponent.decorators = [
         { type: core.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 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}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" 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  >\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\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    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\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: [
                         {
@@ -2220,7 +2289,7 @@
     SacInputDecimalComponent.decorators = [
         { type: core.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 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}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" 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  >\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    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\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",
                     // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                     providers: [
                         {
@@ -2260,7 +2329,7 @@
     SacInputEmailComponent.decorators = [
         { type: core.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\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    >{{label}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" 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  >\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    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\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: [
                         {
@@ -2300,7 +2369,7 @@
     SacInputIntegerComponent.decorators = [
         { type: core.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\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    >{{label}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" 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  >\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    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\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",
                     // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                     providers: [
                         {
@@ -2340,7 +2409,7 @@
     SacInputPasswordComponent.decorators = [
         { type: core.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\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    >{{label}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" 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  >\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    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\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",
                     // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                     providers: [
                         {
@@ -2380,7 +2449,7 @@
     SacInputSearchComponent.decorators = [
         { type: core.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 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}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" 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  >\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        <button\r\n          type=\"submit\"\r\n          class=\"btn btn-secondary\"\r\n          id=\"{{name}}_search\"\r\n          (click)=\"searchClick()\"\r\n        >\r\n          <i\r\n            *ngIf=\"buttonmode === 'icon' || buttonmode === 'mixed'\"\r\n            [class]=\"iconname\"\r\n            [class.mr-2]=\"buttonmode === 'mixed'\"\r\n          ></i>\r\n          <ng-container *ngIf=\"buttonmode === 'text' || buttonmode === 'mixed'\"\r\n            >{{buttontext}}</ng-container\r\n          >\r\n        </button>\r\n      </div>\r\n    </div>\r\n    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\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: [
                         {
@@ -2418,7 +2487,11 @@
                         SacInputPasswordComponent,
                         SacInputSearchComponent,
                     ],
-                    imports: [common.CommonModule, SACBootstrap4LayoutModule],
+                    imports: [
+                        common.CommonModule,
+                        SACBootstrap4LayoutModule,
+                        SACBootstrap4TooltipModule,
+                    ],
                     exports: [
                         SacInputComponent,
                         SacInputAreaComponent,
@@ -2454,7 +2527,7 @@
     SacDropdownComponent.decorators = [
         { type: core.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 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}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" 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  >\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    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\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",
                     // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                     providers: [
                         {
@@ -2511,7 +2584,11 @@
     SACBootstrap4DropdownModule.decorators = [
         { type: core.NgModule, args: [{
                     declarations: [SacDropdownComponent, SacDropdownOptionDirective],
-                    imports: [common.CommonModule, SACBootstrap4LayoutModule],
+                    imports: [
+                        common.CommonModule,
+                        SACBootstrap4LayoutModule,
+                        SACBootstrap4TooltipModule,
+                    ],
                     exports: [SacDropdownComponent, SacDropdownOptionDirective],
                 },] }
     ];
@@ -2536,7 +2613,7 @@
     SacListboxComponent.decorators = [
         { type: core.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 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}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" 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  >\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    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\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",
                     // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                     providers: [
                         {
@@ -2591,7 +2668,11 @@
     SACBootstrap4ListModule.decorators = [
         { type: core.NgModule, args: [{
                     declarations: [SacListboxComponent, SacListboxOptionDirective],
-                    imports: [common.CommonModule, SACBootstrap4LayoutModule],
+                    imports: [
+                        common.CommonModule,
+                        SACBootstrap4LayoutModule,
+                        SACBootstrap4TooltipModule,
+                    ],
                     exports: [SacListboxComponent, SacListboxOptionDirective],
                 },] }
     ];
@@ -2622,7 +2703,7 @@
     SacMultilanguageInputComponent.decorators = [
         { type: core.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 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}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" 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  >\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\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    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\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: [
                         {
@@ -2669,7 +2750,7 @@
     SacMultilanguageInputAreaComponent.decorators = [
         { type: core.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 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}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" 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  >\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\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    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\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: [
                         {
@@ -2828,7 +2909,11 @@
                         SacMultilanguagemenuContainerDirective,
                         SacMultilanguagemenuItemButtonComponent,
                     ],
-                    imports: [common.CommonModule, SACBootstrap4LayoutModule],
+                    imports: [
+                        common.CommonModule,
+                        SACBootstrap4LayoutModule,
+                        SACBootstrap4TooltipModule,
+                    ],
                     exports: [SacMultilanguageInputComponent, SacMultilanguageInputAreaComponent],
                 },] }
     ];
@@ -2863,7 +2948,7 @@
     SacStaticFormContainerComponent.decorators = [
         { type: core.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 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}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" 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  >\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    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\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",
                     // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                     providers: [
                         {
@@ -2903,7 +2988,7 @@
     SacStaticLabelComponent.decorators = [
         { type: core.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 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}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" 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  >\r\n    <div\r\n      [id]=\"name\"\r\n      class=\"form-control-plaintext\"\r\n      [ngClass]=\"[componentHeight | toControlHeight]\"\r\n      [innerHTML]=\"value\"\r\n    ></div>\r\n    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\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",
                     // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                     providers: [
                         {
@@ -2932,7 +3017,11 @@
     SACBootstrap4StaticLabelModule.decorators = [
         { type: core.NgModule, args: [{
                     declarations: [SacStaticLabelComponent, SacStaticFormContainerComponent],
-                    imports: [common.CommonModule, SACBootstrap4LayoutModule],
+                    imports: [
+                        common.CommonModule,
+                        SACBootstrap4LayoutModule,
+                        SACBootstrap4TooltipModule,
+                    ],
                     exports: [SacStaticLabelComponent, SacStaticFormContainerComponent],
                 },] }
     ];
@@ -2974,7 +3063,7 @@
     SacTabComponent.decorators = [
         { type: core.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 = {
@@ -3025,7 +3114,7 @@
     SacTinyMceComponent.decorators = [
         { type: core.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=\"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\"\r\n      >{{label}}<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> </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  >\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=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\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",
                     // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                     providers: [
                         {
@@ -3064,6 +3153,7 @@
                         SACBootstrap4ButtonModule,
                         SACBootstrap4DialogModule,
                         SACBootstrap4BrowserModule,
+                        SACBootstrap4TooltipModule,
                     ],
                     exports: [SacTinyMceComponent],
                 },] }
@@ -3190,6 +3280,7 @@
      * Generated bundle index. Do not edit.
      */
 
+    exports.NGFORM_FACTORY = NGFORM_FACTORY;
     exports.SACBootstrap4BrowserModule = SACBootstrap4BrowserModule;
     exports.SACBootstrap4ButtonModule = SACBootstrap4ButtonModule;
     exports.SACBootstrap4CheckboxModule = SACBootstrap4CheckboxModule;
@@ -3207,48 +3298,49 @@
     exports.SACBootstrap4StaticLabelModule = SACBootstrap4StaticLabelModule;
     exports.SACBootstrap4TabsModule = SACBootstrap4TabsModule;
     exports.SACBootstrap4TinyMceModule = SACBootstrap4TinyMceModule;
+    exports.SACBootstrap4TooltipModule = SACBootstrap4TooltipModule;
     exports.SACBootstrap4UploadModule = SACBootstrap4UploadModule;
     exports.SACBootstrap4ValidationSummaryModule = SACBootstrap4ValidationSummaryModule;
     exports.SACBootstrap4WizardModule = SACBootstrap4WizardModule;
+    exports.SACFORM_FACTORY = SACFORM_FACTORY;
     exports.SacFormDirective = SacFormDirective;
+    exports.SacInheritFormDirective = SacInheritFormDirective;
     exports.ServiceConfirm = ServiceConfirm;
     exports.ɵa = SacBrowserComponent;
     exports.ɵb = SacDropzoneMultipleComponent;
-    exports.ɵba = SacTimeComponent;
-    exports.ɵbb = SacDateSelectorComponent;
-    exports.ɵbc = SacGridComponent;
-    exports.ɵbd = SacGridColumnComponent;
-    exports.ɵbe = SacGridColumnActionComponent;
-    exports.ɵbf = SacPagingComponent;
-    exports.ɵbg = SacGridButtonComponent;
-    exports.ɵbh = SacGridImageComponent;
-    exports.ɵbi = SacInputComponent;
-    exports.ɵbj = SacInputAreaComponent;
-    exports.ɵbk = SacInputCurrencyComponent;
-    exports.ɵbl = SacInputDecimalComponent;
-    exports.ɵbm = SacInputEmailComponent;
-    exports.ɵbn = SacInputIntegerComponent;
-    exports.ɵbo = SacInputPasswordComponent;
-    exports.ɵbp = SacInputSearchComponent;
-    exports.ɵbq = SacDropdownComponent;
-    exports.ɵbr = SacDropdownOptionDirective;
-    exports.ɵbs = SacListboxComponent;
-    exports.ɵbt = SacListboxOptionDirective;
-    exports.ɵbu = SacMultilanguageInputComponent;
-    exports.ɵbv = SacMultilanguageInputAreaComponent;
-    exports.ɵbw = SacMultilanguagemenuComponent;
-    exports.ɵbx = SacMultilanguagemenuAnchorDirective;
-    exports.ɵby = SacMultilanguagemenuContainerDirective;
-    exports.ɵbz = SacMultilanguagemenuItemButtonComponent;
+    exports.ɵba = SacGridComponent;
+    exports.ɵbb = SacGridColumnComponent;
+    exports.ɵbc = SacGridColumnActionComponent;
+    exports.ɵbd = SacPagingComponent;
+    exports.ɵbe = SacGridButtonComponent;
+    exports.ɵbf = SacGridImageComponent;
+    exports.ɵbg = SacInputComponent;
+    exports.ɵbh = SacInputAreaComponent;
+    exports.ɵbi = SacInputCurrencyComponent;
+    exports.ɵbj = SacInputDecimalComponent;
+    exports.ɵbk = SacInputEmailComponent;
+    exports.ɵbl = SacInputIntegerComponent;
+    exports.ɵbm = SacInputPasswordComponent;
+    exports.ɵbn = SacInputSearchComponent;
+    exports.ɵbo = SacDropdownComponent;
+    exports.ɵbp = SacDropdownOptionDirective;
+    exports.ɵbq = SacListboxComponent;
+    exports.ɵbr = SacListboxOptionDirective;
+    exports.ɵbs = SacMultilanguageInputComponent;
+    exports.ɵbt = SacMultilanguageInputAreaComponent;
+    exports.ɵbu = SacMultilanguagemenuComponent;
+    exports.ɵbv = SacMultilanguagemenuAnchorDirective;
+    exports.ɵbw = SacMultilanguagemenuContainerDirective;
+    exports.ɵbx = SacMultilanguagemenuItemButtonComponent;
+    exports.ɵby = SacStaticLabelComponent;
+    exports.ɵbz = SacStaticFormContainerComponent;
     exports.ɵc = SacFormLayoutDirective;
-    exports.ɵca = SacStaticLabelComponent;
-    exports.ɵcb = SacStaticFormContainerComponent;
-    exports.ɵcc = SacTabComponent;
-    exports.ɵcd = SacTabItemComponent;
-    exports.ɵce = SacTinyMceComponent;
-    exports.ɵcf = SacValidationSummaryComponent;
-    exports.ɵcg = SacWizardComponent;
-    exports.ɵch = SacWizardItemComponent;
+    exports.ɵca = SacTabComponent;
+    exports.ɵcb = SacTabItemComponent;
+    exports.ɵcc = SacTinyMceComponent;
+    exports.ɵcd = SacValidationSummaryComponent;
+    exports.ɵce = SacWizardComponent;
+    exports.ɵcf = SacWizardItemComponent;
     exports.ɵd = SacConfirmComponent;
     exports.ɵe = SacDialogComponent;
     exports.ɵf = SacButtonComponent;
@@ -3264,14 +3356,14 @@
     exports.ɵp = SacToControlWidthCssPipe;
     exports.ɵq = SacToLabelHeightPipe;
     exports.ɵr = SacToLabelWidthCssPipe;
-    exports.ɵs = SACFORM_FACTORY;
-    exports.ɵt = NGFORM_FACTORY;
-    exports.ɵu = SacInheritFormDirective;
-    exports.ɵv = SacCheckboxComponent;
-    exports.ɵw = SacRadiobuttonComponent;
-    exports.ɵx = SacRadiobuttonsComponent;
-    exports.ɵy = SacDateComponent;
-    exports.ɵz = SacDateTimeComponent;
+    exports.ɵs = SacTooltipComponent;
+    exports.ɵt = SacCheckboxComponent;
+    exports.ɵu = SacRadiobuttonComponent;
+    exports.ɵv = SacRadiobuttonsComponent;
+    exports.ɵw = SacDateComponent;
+    exports.ɵx = SacDateTimeComponent;
+    exports.ɵy = SacTimeComponent;
+    exports.ɵz = SacDateSelectorComponent;
 
     Object.defineProperty(exports, '__esModule', { value: true });