@simpleangularcontrols/sac-bootstrap5 10.0.0-rc.7 → 10.0.0-rc.8

package/fesm2015/simpleangularcontrols-sac-bootstrap5.js

@@ -2,7 +2,7 @@ import { CommonModule, DOCUMENT } from '@angular/common';
 import { HttpClient, HttpClientModule } from '@angular/common/http';
 import { Component, NgModule, ElementRef, ChangeDetectorRef, Injectable, ComponentFactoryResolver, Inject, ApplicationRef, Injector, forwardRef, NgZone, Renderer2, Directive, HostBinding, SkipSelf, Pipe, Host, Optional, ViewChild, ContentChild, TemplateRef, Input, ContentChildren } from '@angular/core';
 import { NgForm, ControlContainer, FormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
-import { SacButtonCommon, SacDialogCommon, SacConfirmCommon, ServiceConfirmCommon, isDefined, SacConfirmButton, SacContextmenuCommon, SacContextmenuItemButtonCommon, SacContextmenuItemCommon, SacContextmenuAnchorCommon, SacContextMenuContrainerCommon, SacFormCommon, SacFormLayoutCommon, ControlHeight, SacDropzoneMultipleCommon, SacDropzoneSingleCommon, SacUploadSingleCommon, SacUploadMultipleCommon, SacFileBrowserCommon, SacCheckboxCommon, SacRadiobuttonsCommon, SacRadiobuttonCommon, SacDateCommon, SacDateSelectorCommon, SacDateTimeCommon, SacTimeCommon, SacGridCommon, SacGridButtonCommon, SacGridColumnCommon, SacGridColumnBaseCommon, SacGridColumnActionCommon, SacGridImageCommon, SacPagingCommon, SacInputCommon, SacInputAreaCommon, SacInputCurrencyCommon, SacInputDecimalCommon, SacInputEmailCommon, SacInputIntegerCommon, SacInputPasswordCommon, SacInputSearchCommon, SacDropdownCommon, SacDropdownOptionCommon, SacListboxCommon, SacListboxOptionCommon, SacMultilanguageInputCommon, IconType, SacMultilanguageInputAreaCommon, SacStaticFormContainerCommon, SacStaticLabelCommon, SacTabItemCommon, SacTabCommon, SacTinyMceCommon, SacValidationSummaryCommon, SacWizardItemCommon, SacWizardCommon } from '@simpleangularcontrols/sac-common';
+import { SacButtonCommon, SacDialogCommon, SacConfirmCommon, ServiceConfirmCommon, isDefined, SacConfirmButton, SacContextmenuCommon, SacContextmenuItemButtonCommon, SacContextmenuItemCommon, SacContextmenuAnchorCommon, SacContextMenuContrainerCommon, SacFormCommon, SacFormLayoutCommon, ControlHeight, SacTooltipCommon, SacDropzoneMultipleCommon, SacDropzoneSingleCommon, SacUploadSingleCommon, SacUploadMultipleCommon, SacFileBrowserCommon, SacCheckboxCommon, SacRadiobuttonsCommon, SacRadiobuttonCommon, SacDateCommon, SacDateSelectorCommon, SacDateTimeCommon, SacTimeCommon, SacGridCommon, SacGridButtonCommon, SacGridColumnCommon, SacGridColumnBaseCommon, SacGridColumnActionCommon, SacGridImageCommon, SacPagingCommon, SacInputCommon, SacInputAreaCommon, SacInputCurrencyCommon, SacInputDecimalCommon, SacInputEmailCommon, SacInputIntegerCommon, SacInputPasswordCommon, SacInputSearchCommon, SacDropdownCommon, SacDropdownOptionCommon, SacListboxCommon, SacListboxOptionCommon, SacMultilanguageInputCommon, IconType, SacMultilanguageInputAreaCommon, SacStaticFormContainerCommon, SacStaticLabelCommon, SacTabItemCommon, SacTabCommon, SacTinyMceCommon, SacValidationSummaryCommon, SacWizardItemCommon, SacWizardCommon } from '@simpleangularcontrols/sac-common';
 import { forkJoin, Observable } from 'rxjs';
 import { take } from 'rxjs/operators';
 import { IMaskModule } from 'angular-imask';
@@ -643,6 +643,66 @@ SACBootstrap5LayoutModule.decorators = [
             },] }
 ];
 
+/**
+ * Tooltip Komponente
+ *
+ * @example ToolTip Control
+ *
+ *  <ngTooltip tooltiptext="Mein Tooltip" [inlinemode]="true">
+ *    <i class="tooltip"></i>
+ *  </ngTooltip>
+ *
+ * @example ToolTip Control im Inline Mode. Style auf Icon kann auch in Klasse ausgelagert werden.
+ *
+ *  <div class="form-inline">
+ *    <ngInputSearch iconname="Suchen"></ngInputSearch>
+ *    <ngTooltip tooltiptext="Mein Tooltip" [inlinemode]="true">
+ *      <i class="tooltip" style="position: relative; left: 0; top: 3px; display: inline-block; margin-right: 10px;"></i>
+ *    </ngTooltip>
+ *  </div>
+ *
+ */
+class SacTooltipComponent extends SacTooltipCommon {
+    // #region Constructors
+    /**
+     * Konstrukor
+     * @param parent SacFormular Instanz
+     * @param injector Component Injector
+     */
+    constructor(cdRef, ref) {
+        super(cdRef, ref);
+    }
+    // #endregion Constructors
+    // #region Protected Methods
+    /**
+     * Padding Value for Bootstrap5 Tooltip Padding
+     * @returns Static Padding Value for BS5
+     */
+    getTooltipOffset() {
+        return 8;
+    }
+}
+SacTooltipComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'sac-tooltip',
+                template: "<div [style.display]=\"inlinemode ? 'inline' : null\">\r\n  <div\r\n    #container\r\n    (mouseenter)=\"ShowTooltip()\"\r\n    (mouseleave)=\"HideTooltip()\"\r\n    [style.display]=\"inlinemode ? 'inline' : null\"\r\n  >\r\n    <ng-content></ng-content>\r\n  </div>\r\n  <div *ngIf=\"IsTooltipVisible()\" #tooltip>\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.data-popper-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=\"tooltip-arrow\"\r\n        style=\"position: absolute\"\r\n        [style.top.px]=\"GetTooltipPosition() === TooltipPosition.left || GetTooltipPosition() === TooltipPosition.right ? (getToolTipHeight() / 2) - 6.5 : null\"\r\n        [style.left.px]=\"GetTooltipPosition() === TooltipPosition.bottom || GetTooltipPosition() === TooltipPosition.top ? (getToolTipWidth() / 2) - 6.5 : null\"\r\n      ></div>\r\n      <div class=\"tooltip-inner\">{{tooltiptext}}</div>\r\n    </div>\r\n  </div>\r\n</div>\r\n"
+            },] }
+];
+SacTooltipComponent.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: ElementRef }
+];
+
+class SACBootstrap5TooltipModule {
+}
+SACBootstrap5TooltipModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [SacTooltipComponent],
+                imports: [CommonModule],
+                exports: [SacTooltipComponent],
+            },] }
+];
+
 /**
  * Dropzone Komponente für mehrere Uploads
  * @see https://github.com/kukhariev/ngx-uploadx/
@@ -671,7 +731,7 @@ class SacDropzoneMultipleComponent extends SacDropzoneMultipleCommon {
 SacDropzoneMultipleComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sac-dropzonemultiple',
-                template: "<div class=\"row mb-3\" [class.g-0]=\"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) : 'visually-hidden', 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 align-items-center w-50 my-3\"\r\n        *ngIf=\"uploads.length > 0\"\r\n      >\r\n        <div class=\"flex-fill 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              <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      <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 mb-3\" [class.g-0]=\"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) : 'visually-hidden', componentHeight | toLabelHeight]\"\r\n    >{{label}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n    >\r\n      <span [ngClass]=\"HelptextTooltipIcon\" class=\"ms-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 align-items-center w-50 my-3\"\r\n        *ngIf=\"uploads.length > 0\"\r\n      >\r\n        <div class=\"flex-fill 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              <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      <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 *ngIf=\"helptextmode === 'text' && helptext\" class=\"form-text\">\r\n      {{helptext}}\r\n    </div>\r\n  </div>\r\n</div>\r\n",
                 providers: [
                     {
                         provide: NG_VALUE_ACCESSOR,
@@ -722,7 +782,7 @@ class SacDropzoneSingleComponent extends SacDropzoneSingleCommon {
 SacDropzoneSingleComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sac-dropzonesingle',
-                template: "<div class=\"row mb-3\" [class.g-0]=\"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) : 'visually-hidden', 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 position-relative\"\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 align-items-center w-50 my-3\"\r\n        *ngIf=\"uploads.length > 0\"\r\n      >\r\n        <div class=\"flex-fill 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              <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      <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 mb-3\" [class.g-0]=\"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) : 'visually-hidden', componentHeight | toLabelHeight]\"\r\n    >{{label}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n    >\r\n      <span [ngClass]=\"HelptextTooltipIcon\" class=\"ms-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 position-relative\"\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 align-items-center w-50 my-3\"\r\n        *ngIf=\"uploads.length > 0\"\r\n      >\r\n        <div class=\"flex-fill 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              <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      <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 *ngIf=\"helptextmode === 'text' && helptext\" class=\"form-text\">\r\n      {{helptext}}\r\n    </div>\r\n  </div>\r\n</div>\r\n",
                 providers: [
                     {
                         provide: NG_VALUE_ACCESSOR,
@@ -765,7 +825,7 @@ class SacUploadComponent extends SacUploadSingleCommon {
 SacUploadComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sac-upload',
-                template: "<div class=\"row mb-3\" [class.g-0]=\"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) : 'visually-hidden', 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      <!-- 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=\"pe-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        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\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=\"pe-2\"></span>{{\r\n        lngResourceService.GetString(validationKeyService.UploadButtonUpload) |\r\n        async }}\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",
+                template: "<div class=\"row mb-3\" [class.g-0]=\"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) : 'visually-hidden', componentHeight | toLabelHeight]\"\r\n    >{{label}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n    >\r\n      <span [ngClass]=\"HelptextTooltipIcon\" class=\"ms-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      <!-- 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=\"pe-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        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\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=\"pe-2\"></span>{{\r\n        lngResourceService.GetString(validationKeyService.UploadButtonUpload) |\r\n        async }}\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 *ngIf=\"helptextmode === 'text' && helptext\" class=\"form-text\">\r\n      {{helptext}}\r\n    </div>\r\n  </div>\r\n</div>\r\n",
                 providers: [
                     {
                         provide: NG_VALUE_ACCESSOR,
@@ -808,7 +868,7 @@ class SacUploadMultipleComponent extends SacUploadMultipleCommon {
 SacUploadMultipleComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sac-uploadmultiple',
-                template: "<div class=\"row mb-3\" [class.g-0]=\"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) : 'visually-hidden', 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=\"pe-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=\"pe-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\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=\"pe-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",
+                template: "<div class=\"row mb-3\" [class.g-0]=\"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) : 'visually-hidden', componentHeight | toLabelHeight]\"\r\n    >{{label}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n    >\r\n      <span [ngClass]=\"HelptextTooltipIcon\" class=\"ms-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=\"pe-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=\"pe-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 *ngIf=\"helptextmode === 'text' && helptext\" class=\"form-text\">\r\n            {{helptext}}\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\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=\"pe-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",
                 providers: [
                     {
                         provide: NG_VALUE_ACCESSOR,
@@ -841,7 +901,12 @@ SACBootstrap5UploadModule.decorators = [
                     SacDropzoneSingleComponent,
                     SacDropzoneMultipleComponent,
                 ],
-                imports: [CommonModule, FormsModule, SACBootstrap5LayoutModule],
+                imports: [
+                    CommonModule,
+                    FormsModule,
+                    SACBootstrap5LayoutModule,
+                    SACBootstrap5TooltipModule,
+                ],
                 exports: [
                     SacUploadComponent,
                     SacUploadMultipleComponent,
@@ -990,7 +1055,7 @@ class SacCheckboxComponent extends SacCheckboxCommon {
 SacCheckboxComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sac-checkbox',
-                template: "<div class=\"row\" [class.g-0]=\"disablelabel\" [class.mb-3]=\"!stacked\">\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[!disablelabel && !stacked ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden' ]\"\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 class=\"row\" [class.g-0]=\"disablelabel\" [class.mb-3]=\"!stacked\">\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[!disablelabel && !stacked ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden' ]\"\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=\"ms-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\"\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 *ngIf=\"helptextmode === 'text' && helptext\" class=\"form-text\">\r\n      {{helptext}}\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: [
                     {
@@ -1029,7 +1094,7 @@ class SacRadiobuttonsComponent extends SacRadiobuttonsCommon {
 SacRadiobuttonsComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sac-radiobuttons',
-                template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <div\r\n    *ngIf=\"disablelabel === false\"\r\n    class=\"col-12 pt-0\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden' ]\"\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 mb-3\" [class.g-0]=\"disablelabel\">\r\n  <div\r\n    *ngIf=\"disablelabel === false\"\r\n    class=\"col-12 pt-0\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden' ]\"\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=\"ms-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    <div *ngIf=\"helptextmode === 'text' && helptext\" class=\"form-text\">\r\n      {{helptext}}\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: [
                     {
@@ -1082,7 +1147,11 @@ SACBootstrap5CheckboxModule.decorators = [
                     SacRadiobuttonComponent,
                     SacRadiobuttonsComponent,
                 ],
-                imports: [CommonModule, SACBootstrap5LayoutModule],
+                imports: [
+                    CommonModule,
+                    SACBootstrap5LayoutModule,
+                    SACBootstrap5TooltipModule,
+                ],
                 exports: [
                     SacCheckboxComponent,
                     SacRadiobuttonComponent,
@@ -1113,7 +1182,7 @@ class SacDateComponent extends SacDateCommon {
 SacDateComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sac-date',
-                template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12 position-relative\"\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      <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        *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 position-absolute\"\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        margin-top: 7px;\r\n      \"\r\n    >\r\n      <div\r\n        class=\"popover-arrow position-absolute\"\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 mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', 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=\"ms-1\"></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-12 position-relative\"\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      <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        *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 *ngIf=\"helptextmode === 'text' && helptext\" class=\"form-text\">\r\n      {{helptext}}\r\n    </div>\r\n    <div\r\n      class=\"popover fade bs-popover-bottom show position-absolute\"\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        margin-top: 7px;\r\n      \"\r\n    >\r\n      <div\r\n        class=\"popover-arrow position-absolute\"\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: [
                     {
@@ -1165,7 +1234,7 @@ class SacDateTimeComponent extends SacDateTimeCommon {
 SacDateTimeComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sac-datetime',
-                template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12 position-relative\"\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      <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        *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 position-absolute\"\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        margin-top: 7px;\r\n      \"\r\n    >\r\n      <div\r\n        class=\"popover-arrow position-absolute\"\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 mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', 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=\"ms-1\"></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-12 position-relative\"\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      <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        *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 *ngIf=\"helptextmode === 'text' && helptext\" class=\"form-text\">\r\n      {{helptext}}\r\n    </div>\r\n    <div\r\n      class=\"popover fade bs-popover-bottom show position-absolute\"\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        margin-top: 7px;\r\n      \"\r\n    >\r\n      <div\r\n        class=\"popover-arrow position-absolute\"\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: [
                     {
@@ -1205,7 +1274,7 @@ class SacTimeComponent extends SacTimeCommon {
 SacTimeComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sac-time',
-                template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12 position-relative\"\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      <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        *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 position-absolute\"\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        margin-top: 7px;\r\n      \"\r\n    >\r\n      <div\r\n        class=\"popover-arrow position-absolute\"\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 mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', 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=\"ms-1\"></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-12 position-relative\"\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      <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        *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 *ngIf=\"helptextmode === 'text' && helptext\" class=\"form-text\">\r\n      {{helptext}}\r\n    </div>\r\n    <div\r\n      class=\"popover fade bs-popover-bottom show position-absolute\"\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        margin-top: 7px;\r\n      \"\r\n    >\r\n      <div\r\n        class=\"popover-arrow position-absolute\"\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: [
                     {
@@ -1237,7 +1306,12 @@ SACBootstrap5DateTimeModule.decorators = [
                     SacTimeComponent,
                     SacDateSelectorComponent,
                 ],
-                imports: [CommonModule, IMaskModule, SACBootstrap5LayoutModule],
+                imports: [
+                    CommonModule,
+                    IMaskModule,
+                    SACBootstrap5LayoutModule,
+                    SACBootstrap5TooltipModule,
+                ],
                 exports: [
                     SacDateComponent,
                     SacDateTimeComponent,
@@ -1268,7 +1342,7 @@ class SacGridComponent extends SacGridCommon {
 SacGridComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sac-grid',
-                template: "<div class=\"table-responsive\">\r\n  <table class=\"table table-striped table-hover\" id={{name}}>\r\n    <thead class=\"thead-light\">\r\n      <tr>\r\n        <ng-container *ngTemplateOutlet=\"template; context { row: {}, type: 'header'}\">\r\n        </ng-container>\r\n      </tr>\r\n    </thead>\r\n    <tbody>\r\n      <ng-container *ngFor=\"let item of value; let i=index\">\r\n        <tr>\r\n          <ng-container *ngTemplateOutlet=\"template; context { row: item, type: 'body'}\">\r\n          </ng-container>\r\n        </tr>\r\n      </ng-container>\r\n      <tr *ngIf=\"value === undefined || value === null || value.length===0\">\r\n        <td [attr.colspan]=\"ColumnCount\">{{emptytext}}</td>\r\n      </tr>\r\n      <tr>\r\n        <td [attr.colspan]=\"ColumnCount\">\r\n          <div class=\"container-fluid\">\r\n            <sac-paging name=\"{{name}}Paging\" (paging)=\"pageChange($event)\" [pagerdata]=\"pagerdata\" [pagesizes]=\"pagesizes\" [pagingtext]=\"pagingtext\" [pagesizetext]=\"pagesizetext\" [pagesizedisabled]=\"pagesizedisabled\"></sac-paging>\r\n          </div>\r\n        </td>\r\n      </tr>\r\n    </tbody>\r\n  </table>\r\n</div>\r\n",
+                template: "<div class=\"table-responsive\">\r\n  <table class=\"table table-striped table-hover\" id=\"{{name}}\">\r\n    <thead class=\"thead-light\">\r\n      <tr>\r\n        <ng-container\r\n          *ngTemplateOutlet=\"template; context { row: {}, type: 'header'}\"\r\n        >\r\n        </ng-container>\r\n      </tr>\r\n    </thead>\r\n    <tbody>\r\n      <ng-container *ngFor=\"let item of value; let i=index\">\r\n        <tr>\r\n          <ng-container\r\n            *ngTemplateOutlet=\"template; context { row: item, type: 'body'}\"\r\n          >\r\n          </ng-container>\r\n        </tr>\r\n      </ng-container>\r\n      <tr *ngIf=\"value === undefined || value === null || value.length===0\">\r\n        <td [attr.colspan]=\"ColumnCount\">{{emptytext}}</td>\r\n      </tr>\r\n      <tr *ngIf=\"pagerdata\">\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    </tbody>\r\n  </table>\r\n</div>\r\n",
                 // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                 providers: [
                     { provide: NG_VALUE_ACCESSOR, multi: true, useExisting: SacGridComponent },
@@ -1290,19 +1364,11 @@ SacGridComponent.propDecorators = {
 
 /**
  * Grid Action Button
- *
- * @example Standard Action
- *
- * <ngGridButton icon="edit" (clicked)="action('edit')" [isdisabled]="true"></ngGridButton>
- *
- * @example Custom Action
- *
- * <ngGridButton iconstyle="sprite" icon="icon-sprite-base-main_info" (clicked)="action("info")"></ngGridButton>
- *
  */
 class SacGridButtonComponent extends SacGridButtonCommon {
+    // #region Public Methods
     /**
-     * Gibt das Icon für den Button zurück
+     * Returns the icon for the button
      */
     getIconClass() {
         let iconset = this.iconstyle;
@@ -1482,7 +1548,7 @@ class SacInputComponent extends SacInputCommon {
 SacInputComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sac-input',
-                template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', 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 mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', 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=\"ms-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\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 *ngIf=\"helptextmode === 'text' && helptext\" class=\"form-text\">\r\n      {{helptext}}\r\n    </div>\r\n  </div>\r\n</div>\r\n",
                 // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                 providers: [
                     { provide: NG_VALUE_ACCESSOR, multi: true, useExisting: SacInputComponent },
@@ -1516,7 +1582,7 @@ class SacInputAreaComponent extends SacInputAreaCommon {
 SacInputAreaComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sac-inputarea',
-                template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', 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=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', 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=\"ms-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    <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 *ngIf=\"helptextmode === 'text' && helptext\" class=\"form-text\">\r\n      {{helptext}}\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: [
                     {
@@ -1554,7 +1620,7 @@ class SacInputCurrencyComponent extends SacInputCurrencyCommon {
 SacInputCurrencyComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sac-inputcurrency',
-                template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', 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 input-group-sm\"\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      <span class=\"input-group-text\">{{currency}}</span>\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 mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', 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=\"ms-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 input-group-sm\"\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      <span class=\"input-group-text\">{{currency}}</span>\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 *ngIf=\"helptextmode === 'text' && helptext\" class=\"form-text\">\r\n      {{helptext}}\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: [
                     {
@@ -1592,7 +1658,7 @@ class SacInputDecimalComponent extends SacInputDecimalCommon {
 SacInputDecimalComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sac-inputdecimal',
-                template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', 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 mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', 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=\"ms-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\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 *ngIf=\"helptextmode === 'text' && helptext\" class=\"form-text\">\r\n      {{helptext}}\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: [
                     {
@@ -1630,7 +1696,7 @@ class SacInputEmailComponent extends SacInputEmailCommon {
 SacInputEmailComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sac-inputemail',
-                template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', 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      <span class=\"input-group-text\">@</span>\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=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', 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=\"ms-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      <span class=\"input-group-text\">@</span>\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 *ngIf=\"helptextmode === 'text' && helptext\" class=\"form-text\">\r\n      {{helptext}}\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: [
                     {
@@ -1668,7 +1734,7 @@ class SacInputIntegerComponent extends SacInputIntegerCommon {
 SacInputIntegerComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sac-inputinteger',
-                template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', 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=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', 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=\"ms-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\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 *ngIf=\"helptextmode === 'text' && helptext\" class=\"form-text\">\r\n      {{helptext}}\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: [
                     {
@@ -1706,7 +1772,7 @@ class SacInputPasswordComponent extends SacInputPasswordCommon {
 SacInputPasswordComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sac-inputpassword',
-                template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', 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=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', 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=\"ms-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\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 *ngIf=\"helptextmode === 'text' && helptext\" class=\"form-text\">\r\n      {{helptext}}\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: [
                     {
@@ -1744,7 +1810,7 @@ class SacInputSearchComponent extends SacInputSearchCommon {
 SacInputSearchComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sac-inputsearch',
-                template: "<div class=\"row mb-3\" [class.g-0]=\"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) : 'visually-hidden', 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      <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",
+                template: "<div class=\"row mb-3\" [class.g-0]=\"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) : 'visually-hidden', 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=\"ms-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      <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 *ngIf=\"helptextmode === 'text' && helptext\" class=\"form-text\">\r\n      {{helptext}}\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: [
                     {
@@ -1779,7 +1845,11 @@ SACBootstrap5InputModule.decorators = [
                     SacInputPasswordComponent,
                     SacInputSearchComponent,
                 ],
-                imports: [CommonModule, SACBootstrap5LayoutModule],
+                imports: [
+                    CommonModule,
+                    SACBootstrap5LayoutModule,
+                    SACBootstrap5TooltipModule,
+                ],
                 exports: [
                     SacInputComponent,
                     SacInputAreaComponent,
@@ -1813,7 +1883,7 @@ class SacDropdownComponent extends SacDropdownCommon {
 SacDropdownComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sac-dropdown',
-                template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', 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-select\"\r\n      [class.form-select-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.form-select-lg]=\"componentHeight === ControlHeight.Large\"\r\n      [ngClass]=\"{'is-invalid': invalid && (dirty || touched) }\"\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 mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', 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=\"ms-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-select\"\r\n      [class.form-select-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.form-select-lg]=\"componentHeight === ControlHeight.Large\"\r\n      [ngClass]=\"{'is-invalid': invalid && (dirty || touched) }\"\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 *ngIf=\"helptextmode === 'text' && helptext\" class=\"form-text\">\r\n      {{helptext}}\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: [
                     {
@@ -1865,7 +1935,11 @@ class SACBootstrap5DropdownModule {
 SACBootstrap5DropdownModule.decorators = [
     { type: NgModule, args: [{
                 declarations: [SacDropdownComponent, SacDropdownOptionDirective],
-                imports: [CommonModule, SACBootstrap5LayoutModule],
+                imports: [
+                    CommonModule,
+                    SACBootstrap5LayoutModule,
+                    SACBootstrap5TooltipModule,
+                ],
                 exports: [SacDropdownComponent, SacDropdownOptionDirective],
             },] }
 ];
@@ -1888,7 +1962,7 @@ class SacListboxComponent extends SacListboxCommon {
 SacListboxComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sac-listbox',
-                template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', 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-select\"\r\n      [class.form-select-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.form-select-lg]=\"componentHeight === ControlHeight.Large\"\r\n      [size]=\"rowsize\"\r\n      [ngClass]=\"{'is-invalid': invalid && (dirty || touched) }\"\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 mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', 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=\"ms-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-select\"\r\n      [class.form-select-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.form-select-lg]=\"componentHeight === ControlHeight.Large\"\r\n      [size]=\"rowsize\"\r\n      [ngClass]=\"{'is-invalid': invalid && (dirty || touched) }\"\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 *ngIf=\"helptextmode === 'text' && helptext\" class=\"form-text\">\r\n      {{helptext}}\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: [
                     {
@@ -1938,7 +2012,11 @@ class SACBootstrap5ListModule {
 SACBootstrap5ListModule.decorators = [
     { type: NgModule, args: [{
                 declarations: [SacListboxComponent, SacListboxOptionDirective],
-                imports: [CommonModule, SACBootstrap5LayoutModule],
+                imports: [
+                    CommonModule,
+                    SACBootstrap5LayoutModule,
+                    SACBootstrap5TooltipModule,
+                ],
                 exports: [SacListboxComponent, SacListboxOptionDirective],
             },] }
 ];
@@ -1966,7 +2044,7 @@ class SacMultilanguageInputComponent extends SacMultilanguageInputCommon {
 SacMultilanguageInputComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sac-multilanguageinput',
-                template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', 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      placement=\"bottom-right\"\r\n      sac-multilanguagemenu\r\n      [buttontemplate]=\"menuButton\"\r\n      [inputtemplate]=\"menuInput\"\r\n      [validationtemplate]=\"validationMessage\"\r\n      #contextmenu\r\n    >\r\n      <ng-template #menuInput>\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      </ng-template>\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\r\n      <ng-template #validationMessage>\r\n        <div\r\n          *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n          class=\"invalid-feedback\"\r\n        >\r\n          {{ GetErrorMessage() | async }}\r\n        </div></ng-template\r\n      >\r\n\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</div>\r\n<div class=\"row\">\r\n  <div class=\"col text-right\"></div>\r\n</div>\r\n",
+                template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', 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=\"ms-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      placement=\"bottom-right\"\r\n      sac-multilanguagemenu\r\n      [buttontemplate]=\"menuButton\"\r\n      [inputtemplate]=\"menuInput\"\r\n      [validationtemplate]=\"validationMessage\"\r\n      #contextmenu\r\n    >\r\n      <ng-template #menuInput>\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      </ng-template>\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\r\n      <ng-template #validationMessage>\r\n        <div\r\n          *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n          class=\"invalid-feedback\"\r\n        >\r\n          {{ GetErrorMessage() | async }}\r\n        </div></ng-template\r\n      >\r\n\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 *ngIf=\"helptextmode === 'text' && helptext\" class=\"form-text\">\r\n      {{helptext}}\r\n    </div>\r\n  </div>\r\n</div>\r\n<div class=\"row\">\r\n  <div class=\"col text-right\"></div>\r\n</div>\r\n",
                 // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                 providers: [
                     {
@@ -2010,7 +2088,7 @@ class SacMultilanguageInputAreaComponent extends SacMultilanguageInputAreaCommon
 SacMultilanguageInputAreaComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sac-multilanguageinputarea',
-                template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', 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      placement=\"bottom-right\"\r\n      sac-multilanguagemenu\r\n      [buttontemplate]=\"menuButton\"\r\n      [inputtemplate]=\"menuInput\"\r\n      [validationtemplate]=\"validationMessage\"\r\n      #contextmenu\r\n    >\r\n      <ng-template #menuInput>\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      </ng-template>\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\r\n      <ng-template #validationMessage>\r\n        <div\r\n          *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n          class=\"invalid-feedback\"\r\n        >\r\n          {{ GetErrorMessage() | async }}\r\n        </div></ng-template\r\n      >\r\n\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</div>\r\n<div class=\"row\">\r\n  <div class=\"col text-right\"></div>\r\n</div>\r\n",
+                template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', 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=\"ms-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      placement=\"bottom-right\"\r\n      sac-multilanguagemenu\r\n      [buttontemplate]=\"menuButton\"\r\n      [inputtemplate]=\"menuInput\"\r\n      [validationtemplate]=\"validationMessage\"\r\n      #contextmenu\r\n    >\r\n      <ng-template #menuInput>\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      </ng-template>\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\r\n      <ng-template #validationMessage>\r\n        <div\r\n          *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n          class=\"invalid-feedback\"\r\n        >\r\n          {{ GetErrorMessage() | async }}\r\n        </div></ng-template\r\n      >\r\n\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 *ngIf=\"helptextmode === 'text' && helptext\" class=\"form-text\">\r\n      {{helptext}}\r\n    </div>\r\n  </div>\r\n</div>\r\n<div class=\"row\">\r\n  <div class=\"col text-right\"></div>\r\n</div>\r\n",
                 // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                 providers: [
                     {
@@ -2163,7 +2241,11 @@ SACBootstrap5MultilanguageModule.decorators = [
                     SacMultilanguagemenuContainerDirective,
                     SacMultilanguagemenuItemButtonComponent,
                 ],
-                imports: [CommonModule, SACBootstrap5LayoutModule],
+                imports: [
+                    CommonModule,
+                    SACBootstrap5LayoutModule,
+                    SACBootstrap5TooltipModule,
+                ],
                 exports: [SacMultilanguageInputComponent, SacMultilanguageInputAreaComponent],
             },] }
 ];
@@ -2196,7 +2278,7 @@ class SacStaticFormContainerComponent extends SacStaticFormContainerCommon {
 SacStaticFormContainerComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sac-staticformcontainer',
-                template: "<div class=\"row mb-3\" [class.g-0]=\"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) : 'visually-hidden', 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 mb-3\" [class.g-0]=\"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) : 'visually-hidden', 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=\"ms-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    <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 *ngIf=\"helptextmode === 'text' && helptext\" class=\"form-text\">\r\n      {{helptext}}\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: [
                     {
@@ -2234,7 +2316,7 @@ class SacStaticLabelComponent extends SacStaticLabelCommon {
 SacStaticLabelComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sac-staticlabel',
-                template: "<div class=\"row mb-3\" [class.g-0]=\"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) : 'visually-hidden', 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      [id]=\"name\"\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 mb-3\" [class.g-0]=\"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) : 'visually-hidden', 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=\"ms-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    <div *ngIf=\"helptextmode === 'text' && helptext\" class=\"form-text\">\r\n      {{helptext}}\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",
                 // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                 providers: [
                     {
@@ -2260,7 +2342,11 @@ class SACBootstrap5StaticLabelModule {
 SACBootstrap5StaticLabelModule.decorators = [
     { type: NgModule, args: [{
                 declarations: [SacStaticLabelComponent, SacStaticFormContainerComponent],
-                imports: [CommonModule, SACBootstrap5LayoutModule],
+                imports: [
+                    CommonModule,
+                    SACBootstrap5LayoutModule,
+                    SACBootstrap5TooltipModule,
+                ],
                 exports: [SacStaticLabelComponent, SacStaticFormContainerComponent],
             },] }
 ];
@@ -2336,7 +2422,7 @@ class SacTinyMceComponent extends SacTinyMceCommon {
 SacTinyMceComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sac-tinymce',
-                template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <div\r\n    class=\"col\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\r\n  >\r\n    <label for=\"{{name}}\" class=\"form-control-label\">{{label}}</label>\r\n  </div>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <editor\r\n      [id]=\"name + '_tinymce'\"\r\n      [init]=\"_config\"\r\n      [initialValue]=\"value\"\r\n      ngModel\r\n      [ngModelOptions]=\"{standalone: true}\"\r\n      (ngModelChange)=\"setValue($event)\"\r\n      (onSaveContent)=\"save($event.event.content)\"\r\n      [disabled]=\"disabled\"\r\n      [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    ></editor>\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<sac-dialog\r\n  *ngIf=\"selectdialogvisible\"\r\n  [allowesc]=\"false\"\r\n  [backdrop]=\"true\"\r\n  [(isvisible)]=\"selectdialogvisible\"\r\n  title=\"{{ lngResourceService.GetString(validationKeyService.TinyMceFileselectDialogtitle) | async }}\"\r\n  size=\"large\"\r\n  height=\"500px\"\r\n>\r\n  <ng-container dialogbody>\r\n    <sac-filebrowser\r\n      [apiurl]=\"filebrowserapiurl\"\r\n      (file)=\"selectDialogSettings.value = $event\"\r\n      [allowfoldercreate]=\"allowfoldercreate\"\r\n      [allowfolderrename]=\"allowfolderrename\"\r\n      [allowfolderdelete]=\"allowfolderdelete\"\r\n      [allowfileupload]=\"allowfileupload\"\r\n      [allowfilerename]=\"allowfilerename\"\r\n      [allowfiledelete]=\"allowfiledelete\"\r\n      [selectedfile]=\"selectDialogSettings.value\"\r\n      [allowedtypes]=\"selectDialogSettings.allowedtypes\"\r\n    ></sac-filebrowser>\r\n  </ng-container>\r\n  <ng-container dialogfooter>\r\n    <sac-button\r\n      role=\"primary\"\r\n      [name]=\"name + '_modalOk'\"\r\n      text=\"{{ lngResourceService.GetString(validationKeyService.TinyMceFileselectOk) | async }}\"\r\n      (clicked)=\"setSelectDialogResult()\"\r\n    ></sac-button>\r\n    <sac-button\r\n      [name]=\"name + '_modalClose'\"\r\n      text=\"{{ lngResourceService.GetString(validationKeyService.TinyMceFileselectCancel) | async }}\"\r\n      (clicked)=\"closeSelectDialog()\"\r\n    ></sac-button>\r\n  </ng-container>\r\n</sac-dialog>\r\n",
+                template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <div\r\n    class=\"col\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', 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      >\r\n        <span [ngClass]=\"HelptextTooltipIcon\" class=\"ms-1\"></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    <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 *ngIf=\"helptextmode === 'text' && helptext\" class=\"form-text\">\r\n      {{helptext}}\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: [
                     {
@@ -2372,6 +2458,7 @@ SACBootstrap5TinyMceModule.decorators = [
                     SACBootstrap5DialogModule,
                     SACBootstrap5BrowserModule,
                     SACBootstrap5LayoutModule,
+                    SACBootstrap5TooltipModule,
                 ],
                 exports: [SacTinyMceComponent],
             },] }
@@ -2478,5 +2565,5 @@ SACBootstrap5WizardModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { NGFORM_FACTORY, SACBootstrap5BrowserModule, SACBootstrap5ButtonModule, SACBootstrap5CheckboxModule, SACBootstrap5ConfirmModule, SACBootstrap5ContextmenuModule, SACBootstrap5DateTimeModule, SACBootstrap5DialogModule, SACBootstrap5DropdownModule, SACBootstrap5FormModule, SACBootstrap5GridModule, SACBootstrap5InputModule, SACBootstrap5LayoutModule, SACBootstrap5ListModule, SACBootstrap5MultilanguageModule, SACBootstrap5StaticLabelModule, SACBootstrap5TabsModule, SACBootstrap5TinyMceModule, SACBootstrap5UploadModule, SACBootstrap5ValidationSummaryModule, SACBootstrap5WizardModule, SACFORM_FACTORY, SacFormDirective, SacInheritFormDirective, ServiceConfirm, SacBrowserComponent as ɵa, SacDropzoneMultipleComponent as ɵb, SacGridColumnComponent as ɵba, SacGridColumnActionComponent as ɵbb, SacPagingComponent as ɵbc, SacGridButtonComponent as ɵbd, SacGridImageComponent as ɵbe, SacInputComponent as ɵbf, SacInputAreaComponent as ɵbg, SacInputCurrencyComponent as ɵbh, SacInputDecimalComponent as ɵbi, SacInputEmailComponent as ɵbj, SacInputIntegerComponent as ɵbk, SacInputPasswordComponent as ɵbl, SacInputSearchComponent as ɵbm, SacDropdownComponent as ɵbn, SacDropdownOptionDirective as ɵbo, SacListboxComponent as ɵbp, SacListboxOptionDirective as ɵbq, SacMultilanguageInputComponent as ɵbr, SacMultilanguageInputAreaComponent as ɵbs, SacMultilanguagemenuComponent as ɵbt, SacMultilanguagemenuAnchorDirective as ɵbu, SacMultilanguagemenuContainerDirective as ɵbv, SacMultilanguagemenuItemButtonComponent as ɵbw, SacStaticLabelComponent as ɵbx, SacStaticFormContainerComponent as ɵby, SacTabComponent as ɵbz, SacFormLayoutDirective as ɵc, SacTabItemComponent as ɵca, SacTinyMceComponent as ɵcb, SacValidationSummaryComponent as ɵcc, SacWizardComponent as ɵcd, SacWizardItemComponent as ɵce, SacConfirmComponent as ɵd, SacDialogComponent as ɵe, SacButtonComponent as ɵf, SacContextmenuComponent as ɵg, SacContextmenuItemButtonComponent as ɵh, SacContextmenuItemSplitterComponent as ɵi, SacContextmenuAnchorDirective as ɵj, SacContextmenuContainerDirective as ɵk, SacUploadComponent as ɵl, SacUploadMultipleComponent as ɵm, SacDropzoneSingleComponent as ɵn, SacToControlHeightPipe as ɵo, SacToControlWidthCssPipe as ɵp, SacToLabelHeightPipe as ɵq, SacToLabelWidthCssPipe as ɵr, SacCheckboxComponent as ɵs, SacRadiobuttonComponent as ɵt, SacRadiobuttonsComponent as ɵu, SacDateComponent as ɵv, SacDateTimeComponent as ɵw, SacTimeComponent as ɵx, SacDateSelectorComponent as ɵy, SacGridComponent as ɵz };
+export { NGFORM_FACTORY, SACBootstrap5BrowserModule, SACBootstrap5ButtonModule, SACBootstrap5CheckboxModule, SACBootstrap5ConfirmModule, SACBootstrap5ContextmenuModule, SACBootstrap5DateTimeModule, SACBootstrap5DialogModule, SACBootstrap5DropdownModule, SACBootstrap5FormModule, SACBootstrap5GridModule, SACBootstrap5InputModule, SACBootstrap5LayoutModule, SACBootstrap5ListModule, SACBootstrap5MultilanguageModule, SACBootstrap5StaticLabelModule, SACBootstrap5TabsModule, SACBootstrap5TinyMceModule, SACBootstrap5TooltipModule, SACBootstrap5UploadModule, SACBootstrap5ValidationSummaryModule, SACBootstrap5WizardModule, SACFORM_FACTORY, SacFormDirective, SacInheritFormDirective, ServiceConfirm, SacBrowserComponent as ɵa, SacDropzoneMultipleComponent as ɵb, SacGridComponent as ɵba, SacGridColumnComponent as ɵbb, SacGridColumnActionComponent as ɵbc, SacPagingComponent as ɵbd, SacGridButtonComponent as ɵbe, SacGridImageComponent as ɵbf, SacInputComponent as ɵbg, SacInputAreaComponent as ɵbh, SacInputCurrencyComponent as ɵbi, SacInputDecimalComponent as ɵbj, SacInputEmailComponent as ɵbk, SacInputIntegerComponent as ɵbl, SacInputPasswordComponent as ɵbm, SacInputSearchComponent as ɵbn, SacDropdownComponent as ɵbo, SacDropdownOptionDirective as ɵbp, SacListboxComponent as ɵbq, SacListboxOptionDirective as ɵbr, SacMultilanguageInputComponent as ɵbs, SacMultilanguageInputAreaComponent as ɵbt, SacMultilanguagemenuComponent as ɵbu, SacMultilanguagemenuAnchorDirective as ɵbv, SacMultilanguagemenuContainerDirective as ɵbw, SacMultilanguagemenuItemButtonComponent as ɵbx, SacStaticLabelComponent as ɵby, SacStaticFormContainerComponent as ɵbz, SacFormLayoutDirective as ɵc, SacTabComponent as ɵca, SacTabItemComponent as ɵcb, SacTinyMceComponent as ɵcc, SacValidationSummaryComponent as ɵcd, SacWizardComponent as ɵce, SacWizardItemComponent as ɵcf, SacConfirmComponent as ɵd, SacDialogComponent as ɵe, SacButtonComponent as ɵf, SacContextmenuComponent as ɵg, SacContextmenuItemButtonComponent as ɵh, SacContextmenuItemSplitterComponent as ɵi, SacContextmenuAnchorDirective as ɵj, SacContextmenuContainerDirective as ɵk, SacUploadComponent as ɵl, SacUploadMultipleComponent as ɵm, SacDropzoneSingleComponent as ɵn, SacToControlHeightPipe as ɵo, SacToControlWidthCssPipe as ɵp, SacToLabelHeightPipe as ɵq, SacToLabelWidthCssPipe as ɵr, SacTooltipComponent as ɵs, SacCheckboxComponent as ɵt, SacRadiobuttonComponent as ɵu, SacRadiobuttonsComponent as ɵv, SacDateComponent as ɵw, SacDateTimeComponent as ɵx, SacTimeComponent as ɵy, SacDateSelectorComponent as ɵz };
 //# sourceMappingURL=simpleangularcontrols-sac-bootstrap5.js.map