@simpleangularcontrols/sac-bootstrap5 13.0.0-rc.7 → 13.0.0-rc.9

package/fesm2015/simpleangularcontrols-sac-bootstrap5.mjs

@@ -1,4 +1,4 @@
-import * as i2 from '@angular/common';
+import * as i3 from '@angular/common';
 import { CommonModule, DOCUMENT } from '@angular/common';
 import * as i1$1 from '@angular/common/http';
 import { HttpClientModule } from '@angular/common/http';
@@ -7,13 +7,13 @@ import { Component, ComponentFactoryResolver, Injectable, Inject, NgModule, forw
 import * as i9 from '@angular/forms';
 import { NgForm, ControlContainer, FormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
 import * as i1 from '@simpleangularcontrols/sac-common';
-import { SacDialogCommon, SacButtonCommon, SacConfirmCommon, ServiceConfirmCommon, isDefined, SacConfirmButton, SacContextMenuContrainerCommon, SacContextmenuAnchorCommon, SacContextmenuCommon, SacContextmenuItemButtonCommon, SacContextmenuItemCommon, SacFormCommon, SacFormLayoutCommon, ControlHeight, SacDropzoneMultipleCommon, SacDropzoneSingleCommon, SacUploadSingleCommon, SacUploadMultipleCommon, SacFileBrowserCommon, SacCheckboxCommon, SacRadiobuttonsCommon, SacRadiobuttonCommon, SacDateSelectorCommon, SacDateCommon, SacDateTimeCommon, SacTimeCommon, SacPagingCommon, SacGridCommon, SacGridButtonCommon, SacGridColumnCommon, SacGridColumnBaseCommon, SacGridColumnActionCommon, SacGridImageCommon, 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 { SacDialogCommon, SacButtonCommon, SacConfirmCommon, ServiceConfirmCommon, isDefined, SacConfirmButton, SacContextMenuContrainerCommon, SacContextmenuAnchorCommon, SacContextmenuCommon, SacContextmenuItemButtonCommon, SacContextmenuItemCommon, SacFormCommon, SacFormLayoutCommon, ControlHeight, SacTooltipCommon, SacDropzoneMultipleCommon, SacDropzoneSingleCommon, SacUploadSingleCommon, SacUploadMultipleCommon, SacFileBrowserCommon, SacCheckboxCommon, SacRadiobuttonsCommon, SacRadiobuttonCommon, SacDateSelectorCommon, SacDateCommon, SacDateTimeCommon, SacTimeCommon, SacPagingCommon, SacGridCommon, SacGridButtonCommon, SacGridColumnCommon, SacGridColumnBaseCommon, SacGridColumnActionCommon, SacGridImageCommon, 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 * as i4 from 'angular-imask';
+import * as i5 from 'angular-imask';
 import { IMaskModule } from 'angular-imask';
 import * as moment_ from 'moment';
-import * as i2$1 from '@tinymce/tinymce-angular';
+import * as i3$1 from '@tinymce/tinymce-angular';
 import { EditorModule } from '@tinymce/tinymce-angular';
 
 /**
@@ -48,7 +48,7 @@ class SacDialogComponent extends SacDialogCommon {
     }
 }
 SacDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacDialogComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-SacDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacDialogComponent, selector: "sac-dialog", usesInheritance: true, ngImport: i0, template: "<div\r\n  #dialog\r\n  class=\"modal show\"\r\n  style=\"display: block\"\r\n  tabindex=\"-1\"\r\n  role=\"dialog\"\r\n  *ngIf=\"_show\"\r\n>\r\n  <div\r\n    class=\"modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable\"\r\n    role=\"document\"\r\n    [class.modal-xl]=\"_size === 'extralarge'\"\r\n    [class.modal-lg]=\"_size === 'large'\"\r\n    [class.modal-sm]=\"_size === 'small'\"\r\n  >\r\n    <div class=\"modal-content\">\r\n      <div class=\"modal-header\">\r\n        <h5 class=\"modal-title\">{{title}}</h5>\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn-close\"\r\n          data-dismiss=\"modal\"\r\n          aria-label=\"Close\"\r\n          (click)=\"hide()\"\r\n          *ngIf=\"closebutton\"\r\n        ></button>\r\n      </div>\r\n      <div class=\"modal-body\" [style.height]=\"height\">\r\n        <ng-content select=\"[dialogbody]\"></ng-content>\r\n      </div>\r\n      <div class=\"modal-footer\">\r\n        <ng-content select=\"[dialogfooter]\"></ng-content>\r\n      </div>\r\n    </div>\r\n    <!-- /.modal-content -->\r\n  </div>\r\n  <!-- /.modal-dialog -->\r\n</div>\r\n<!-- /.modal -->\r\n<div class=\"modal-backdrop show\" *ngIf=\"_show && backdrop\" #backdrop></div>\r\n", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+SacDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacDialogComponent, selector: "sac-dialog", usesInheritance: true, ngImport: i0, template: "<div\r\n  #dialog\r\n  class=\"modal show\"\r\n  style=\"display: block\"\r\n  tabindex=\"-1\"\r\n  role=\"dialog\"\r\n  *ngIf=\"_show\"\r\n>\r\n  <div\r\n    class=\"modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable\"\r\n    role=\"document\"\r\n    [class.modal-xl]=\"_size === 'extralarge'\"\r\n    [class.modal-lg]=\"_size === 'large'\"\r\n    [class.modal-sm]=\"_size === 'small'\"\r\n  >\r\n    <div class=\"modal-content\">\r\n      <div class=\"modal-header\">\r\n        <h5 class=\"modal-title\">{{title}}</h5>\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn-close\"\r\n          data-dismiss=\"modal\"\r\n          aria-label=\"Close\"\r\n          (click)=\"hide()\"\r\n          *ngIf=\"closebutton\"\r\n        ></button>\r\n      </div>\r\n      <div class=\"modal-body\" [style.height]=\"height\">\r\n        <ng-content select=\"[dialogbody]\"></ng-content>\r\n      </div>\r\n      <div class=\"modal-footer\">\r\n        <ng-content select=\"[dialogfooter]\"></ng-content>\r\n      </div>\r\n    </div>\r\n    <!-- /.modal-content -->\r\n  </div>\r\n  <!-- /.modal-dialog -->\r\n</div>\r\n<!-- /.modal -->\r\n<div class=\"modal-backdrop show\" *ngIf=\"_show && backdrop\" #backdrop></div>\r\n", directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sac-dialog', template: "<div\r\n  #dialog\r\n  class=\"modal show\"\r\n  style=\"display: block\"\r\n  tabindex=\"-1\"\r\n  role=\"dialog\"\r\n  *ngIf=\"_show\"\r\n>\r\n  <div\r\n    class=\"modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable\"\r\n    role=\"document\"\r\n    [class.modal-xl]=\"_size === 'extralarge'\"\r\n    [class.modal-lg]=\"_size === 'large'\"\r\n    [class.modal-sm]=\"_size === 'small'\"\r\n  >\r\n    <div class=\"modal-content\">\r\n      <div class=\"modal-header\">\r\n        <h5 class=\"modal-title\">{{title}}</h5>\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn-close\"\r\n          data-dismiss=\"modal\"\r\n          aria-label=\"Close\"\r\n          (click)=\"hide()\"\r\n          *ngIf=\"closebutton\"\r\n        ></button>\r\n      </div>\r\n      <div class=\"modal-body\" [style.height]=\"height\">\r\n        <ng-content select=\"[dialogbody]\"></ng-content>\r\n      </div>\r\n      <div class=\"modal-footer\">\r\n        <ng-content select=\"[dialogfooter]\"></ng-content>\r\n      </div>\r\n    </div>\r\n    <!-- /.modal-content -->\r\n  </div>\r\n  <!-- /.modal-dialog -->\r\n</div>\r\n<!-- /.modal -->\r\n<div class=\"modal-backdrop show\" *ngIf=\"_show && backdrop\" #backdrop></div>\r\n" }]
@@ -62,7 +62,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
 class SacButtonComponent extends SacButtonCommon {
 }
 SacButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-SacButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacButtonComponent, selector: "sac-button", usesInheritance: true, ngImport: i0, template: "<button\r\n  [id]=\"name\"\r\n  type=\"button\"\r\n  class=\"btn d-flex justify-content-center align-items-center\"\r\n  [attr.disabled]=\"_isdisabled || isloading ? 'disabled' : null\"\r\n  (click)=\"buttonClick()\"\r\n  [class.btn-primary]=\"role === 'primary'\"\r\n  [class.btn-secondary]=\"role === 'secondary' || role === 'default'\"\r\n  [class.btn-success]=\"role === 'success'\"\r\n  [class.btn-danger]=\"role === 'danger'\"\r\n  [class.btn-warning]=\"role === 'warning'\"\r\n  [class.btn-info]=\"role === 'info'\"\r\n  [class.btn-link]=\"role === 'link'\"\r\n>\r\n  <span\r\n    *ngIf=\"isloading\"\r\n    class=\"spinner-border spinner-border-sm me-2\"\r\n    role=\"status\"\r\n    aria-hidden=\"true\"\r\n  ></span>\r\n  <i *ngIf=\"!isloading && icon !== ''\" [ngClass]=\"icon\" [class.me-2]=\"text\"></i\r\n  >{{text}}\r\n</button>\r\n", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+SacButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacButtonComponent, selector: "sac-button", usesInheritance: true, ngImport: i0, template: "<button\r\n  [id]=\"name\"\r\n  type=\"button\"\r\n  class=\"btn d-flex justify-content-center align-items-center\"\r\n  [attr.disabled]=\"_isdisabled || isloading ? 'disabled' : null\"\r\n  (click)=\"buttonClick()\"\r\n  [class.btn-primary]=\"role === 'primary'\"\r\n  [class.btn-secondary]=\"role === 'secondary' || role === 'default'\"\r\n  [class.btn-success]=\"role === 'success'\"\r\n  [class.btn-danger]=\"role === 'danger'\"\r\n  [class.btn-warning]=\"role === 'warning'\"\r\n  [class.btn-info]=\"role === 'info'\"\r\n  [class.btn-link]=\"role === 'link'\"\r\n>\r\n  <span\r\n    *ngIf=\"isloading\"\r\n    class=\"spinner-border spinner-border-sm me-2\"\r\n    role=\"status\"\r\n    aria-hidden=\"true\"\r\n  ></span>\r\n  <i *ngIf=\"!isloading && icon !== ''\" [ngClass]=\"icon\" [class.me-2]=\"text\"></i\r\n  >{{text}}\r\n</button>\r\n", directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sac-button', template: "<button\r\n  [id]=\"name\"\r\n  type=\"button\"\r\n  class=\"btn d-flex justify-content-center align-items-center\"\r\n  [attr.disabled]=\"_isdisabled || isloading ? 'disabled' : null\"\r\n  (click)=\"buttonClick()\"\r\n  [class.btn-primary]=\"role === 'primary'\"\r\n  [class.btn-secondary]=\"role === 'secondary' || role === 'default'\"\r\n  [class.btn-success]=\"role === 'success'\"\r\n  [class.btn-danger]=\"role === 'danger'\"\r\n  [class.btn-warning]=\"role === 'warning'\"\r\n  [class.btn-info]=\"role === 'info'\"\r\n  [class.btn-link]=\"role === 'link'\"\r\n>\r\n  <span\r\n    *ngIf=\"isloading\"\r\n    class=\"spinner-border spinner-border-sm me-2\"\r\n    role=\"status\"\r\n    aria-hidden=\"true\"\r\n  ></span>\r\n  <i *ngIf=\"!isloading && icon !== ''\" [ngClass]=\"icon\" [class.me-2]=\"text\"></i\r\n  >{{text}}\r\n</button>\r\n" }]
@@ -74,7 +74,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
 class SacConfirmComponent extends SacConfirmCommon {
 }
 SacConfirmComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacConfirmComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-SacConfirmComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacConfirmComponent, selector: "sac-confirm", usesInheritance: true, ngImport: i0, template: "<sac-dialog\r\n  name=\"confirmDialog\"\r\n  [(isvisible)]=\"isvisible\"\r\n  [title]=\"title\"\r\n  [allowesc]=\"false\"\r\n  [closebutton]=\"false\"\r\n  dialogsize=\"small\"\r\n>\r\n  <div dialogbody>\r\n    <div class=\"d-flex align-items-center\">\r\n      <div class=\"me-2\">\r\n        <img\r\n          [attr.src]=\"image\"\r\n          class=\"align-self-center mr-3\"\r\n          *ngIf=\"hasImage()\"\r\n        />\r\n      </div>\r\n      <div class=\"flex-grow-1\">{{message}}</div>\r\n    </div>\r\n  </div>\r\n  <ng-container dialogfooter>\r\n    <ng-container *ngFor=\"let button of buttons\">\r\n      <sac-button\r\n        [name]=\"button.key\"\r\n        [text]=\"button.text\"\r\n        [role]=\"button.role || 'default'\"\r\n        (clicked)=\"confirm(button.key)\"\r\n      ></sac-button>\r\n    </ng-container>\r\n  </ng-container>\r\n</sac-dialog>\r\n", components: [{ type: SacDialogComponent, selector: "sac-dialog" }, { type: SacButtonComponent, selector: "sac-button" }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+SacConfirmComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacConfirmComponent, selector: "sac-confirm", usesInheritance: true, ngImport: i0, template: "<sac-dialog\r\n  name=\"confirmDialog\"\r\n  [(isvisible)]=\"isvisible\"\r\n  [title]=\"title\"\r\n  [allowesc]=\"false\"\r\n  [closebutton]=\"false\"\r\n  dialogsize=\"small\"\r\n>\r\n  <div dialogbody>\r\n    <div class=\"d-flex align-items-center\">\r\n      <div class=\"me-2\">\r\n        <img\r\n          [attr.src]=\"image\"\r\n          class=\"align-self-center mr-3\"\r\n          *ngIf=\"hasImage()\"\r\n        />\r\n      </div>\r\n      <div class=\"flex-grow-1\">{{message}}</div>\r\n    </div>\r\n  </div>\r\n  <ng-container dialogfooter>\r\n    <ng-container *ngFor=\"let button of buttons\">\r\n      <sac-button\r\n        [name]=\"button.key\"\r\n        [text]=\"button.text\"\r\n        [role]=\"button.role || 'default'\"\r\n        (clicked)=\"confirm(button.key)\"\r\n      ></sac-button>\r\n    </ng-container>\r\n  </ng-container>\r\n</sac-dialog>\r\n", components: [{ type: SacDialogComponent, selector: "sac-dialog" }, { type: SacButtonComponent, selector: "sac-button" }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacConfirmComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sac-confirm', template: "<sac-dialog\r\n  name=\"confirmDialog\"\r\n  [(isvisible)]=\"isvisible\"\r\n  [title]=\"title\"\r\n  [allowesc]=\"false\"\r\n  [closebutton]=\"false\"\r\n  dialogsize=\"small\"\r\n>\r\n  <div dialogbody>\r\n    <div class=\"d-flex align-items-center\">\r\n      <div class=\"me-2\">\r\n        <img\r\n          [attr.src]=\"image\"\r\n          class=\"align-self-center mr-3\"\r\n          *ngIf=\"hasImage()\"\r\n        />\r\n      </div>\r\n      <div class=\"flex-grow-1\">{{message}}</div>\r\n    </div>\r\n  </div>\r\n  <ng-container dialogfooter>\r\n    <ng-container *ngFor=\"let button of buttons\">\r\n      <sac-button\r\n        [name]=\"button.key\"\r\n        [text]=\"button.text\"\r\n        [role]=\"button.role || 'default'\"\r\n        (clicked)=\"confirm(button.key)\"\r\n      ></sac-button>\r\n    </ng-container>\r\n  </ng-container>\r\n</sac-dialog>\r\n" }]
@@ -330,7 +330,7 @@ SacContextmenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             provide: SacContextmenuCommon,
             useExisting: forwardRef(() => SacContextmenuComponent),
         },
-    ], usesInheritance: true, ngImport: i0, template: "<div class=\"dropdown\" [ngClass]=\"cssclass\">\r\n  <ng-container\r\n    [ngTemplateOutlet]=\"buttontemplate || defaultButtonTemplate\"\r\n  ></ng-container>\r\n\r\n  <ul\r\n    class=\"dropdown-menu dropdown-menu-end\"\r\n    sacContextMenuContainer\r\n    [class.show]=\"isopen\"\r\n  >\r\n    <ng-content></ng-content>\r\n  </ul>\r\n</div>\r\n\r\n<ng-template #defaultButtonTemplate>\r\n  <button\r\n    sacContextMenuAnchor\r\n    class=\"btn btn-sm btn-link text-secondary text-decoration-none\"\r\n    type=\"button\"\r\n    (click)=\"toggle()\"\r\n  >\r\n    <i [class]=\"IconContextMenu\"></i>\r\n  </button>\r\n</ng-template>\r\n", directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: SacContextmenuContainerDirective, selector: "[sacContextMenuContainer]" }, { type: SacContextmenuAnchorDirective, selector: "[sacContextMenuAnchor]" }] });
+    ], usesInheritance: true, ngImport: i0, template: "<div class=\"dropdown\" [ngClass]=\"cssclass\">\r\n  <ng-container\r\n    [ngTemplateOutlet]=\"buttontemplate || defaultButtonTemplate\"\r\n  ></ng-container>\r\n\r\n  <ul\r\n    class=\"dropdown-menu dropdown-menu-end\"\r\n    sacContextMenuContainer\r\n    [class.show]=\"isopen\"\r\n  >\r\n    <ng-content></ng-content>\r\n  </ul>\r\n</div>\r\n\r\n<ng-template #defaultButtonTemplate>\r\n  <button\r\n    sacContextMenuAnchor\r\n    class=\"btn btn-sm btn-link text-secondary text-decoration-none\"\r\n    type=\"button\"\r\n    (click)=\"toggle()\"\r\n  >\r\n    <i [class]=\"IconContextMenu\"></i>\r\n  </button>\r\n</ng-template>\r\n", directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: SacContextmenuContainerDirective, selector: "[sacContextMenuContainer]" }, { type: SacContextmenuAnchorDirective, selector: "[sacContextMenuAnchor]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacContextmenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sac-contextmenu', providers: [
@@ -359,7 +359,7 @@ class SacContextmenuItemButtonComponent extends SacContextmenuItemButtonCommon {
     }
 }
 SacContextmenuItemButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacContextmenuItemButtonComponent, deps: [{ token: i1.SacContextmenuCommon }], target: i0.ɵɵFactoryTarget.Component });
-SacContextmenuItemButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacContextmenuItemButtonComponent, selector: "sac-contextmenubutton", usesInheritance: true, ngImport: i0, template: "<li>\r\n  <button\r\n    type=\"button\"\r\n    class=\"dropdown-item\"\r\n    (click)=\"callaction($event)\"\r\n    [class.disabled]=\"isdisabled\"\r\n    [class]=\"cssclass\"\r\n    [attr.disabled]=\"isdisabled ? 'disabled' : null\"\r\n  >\r\n    <div class=\"d-flex\">\r\n      <div *ngIf=\"!isicondisabled\" style=\"min-width: 1.5rem\">\r\n        <img *ngIf=\"image\" [src]=\"image\" class=\"align-baseline\" />\r\n        <i *ngIf=\"icon\" [class]=\"iconstyle + ' ' + icon\"></i>\r\n      </div>\r\n      <div class=\"flex-grow-1\">{{ text }}</div>\r\n    </div>\r\n  </button>\r\n</li>\r\n", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+SacContextmenuItemButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacContextmenuItemButtonComponent, selector: "sac-contextmenubutton", usesInheritance: true, ngImport: i0, template: "<li>\r\n  <button\r\n    type=\"button\"\r\n    class=\"dropdown-item\"\r\n    (click)=\"callaction($event)\"\r\n    [class.disabled]=\"isdisabled\"\r\n    [class]=\"cssclass\"\r\n    [attr.disabled]=\"isdisabled ? 'disabled' : null\"\r\n  >\r\n    <div class=\"d-flex\">\r\n      <div *ngIf=\"!isicondisabled\" style=\"min-width: 1.5rem\">\r\n        <img *ngIf=\"image\" [src]=\"image\" class=\"align-baseline\" />\r\n        <i *ngIf=\"icon\" [class]=\"iconstyle + ' ' + icon\"></i>\r\n      </div>\r\n      <div class=\"flex-grow-1\">{{ text }}</div>\r\n    </div>\r\n  </button>\r\n</li>\r\n", directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacContextmenuItemButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sac-contextmenubutton', template: "<li>\r\n  <button\r\n    type=\"button\"\r\n    class=\"dropdown-item\"\r\n    (click)=\"callaction($event)\"\r\n    [class.disabled]=\"isdisabled\"\r\n    [class]=\"cssclass\"\r\n    [attr.disabled]=\"isdisabled ? 'disabled' : null\"\r\n  >\r\n    <div class=\"d-flex\">\r\n      <div *ngIf=\"!isicondisabled\" style=\"min-width: 1.5rem\">\r\n        <img *ngIf=\"image\" [src]=\"image\" class=\"align-baseline\" />\r\n        <i *ngIf=\"icon\" [class]=\"iconstyle + ' ' + icon\"></i>\r\n      </div>\r\n      <div class=\"flex-grow-1\">{{ text }}</div>\r\n    </div>\r\n  </button>\r\n</li>\r\n" }]
@@ -723,6 +723,66 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                 }]
         }] });
 
+/**
+ * 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacTooltipComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+SacTooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacTooltipComponent, selector: "sac-tooltip", usesInheritance: true, ngImport: i0, 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", directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: 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" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; } });
+
+class SACBootstrap5TooltipModule {
+}
+SACBootstrap5TooltipModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5TooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SACBootstrap5TooltipModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5TooltipModule, declarations: [SacTooltipComponent], imports: [CommonModule], exports: [SacTooltipComponent] });
+SACBootstrap5TooltipModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5TooltipModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5TooltipModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SacTooltipComponent],
+                    imports: [CommonModule],
+                    exports: [SacTooltipComponent],
+                }]
+        }] });
+
 /**
  * Dropzone Komponente für mehrere Uploads
  * @see https://github.com/kukhariev/ngx-uploadx/
@@ -760,7 +820,7 @@ SacDropzoneMultipleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
             multi: true,
             useExisting: forwardRef(() => SacDropzoneMultipleComponent),
         },
-    ], usesInheritance: true, ngImport: i0, 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", styles: [".dropzone{min-height:9.75rem;border:.125rem dashed lightgray;border-radius:.5rem;background:transparent}.dropzone.is-invalid{border-color:var(--bs-form-invalid-border-color)}.dropzone .content{position:relative;inset:0}.dropzone .content .is-invalid{color:var(--bs-form-invalid-border-color)}.dropzone .content .progress-container{min-width:50%;z-index:100}.dropzone .content .dropzone-uploadstates .upload-progress{padding:0}.dropzone .content .dropzone-uploadstates .upload-progress .progress{height:100%;border-top-right-radius:0;border-bottom-right-radius:0}.dropzone .content .dropzone-uploadstates .upload-progress .progress .progress-text{left:0;right:0;position:absolute}.dropzone .custom-file-input{min-height:100%;height:unset;width:100%;opacity:0;position:absolute}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "toLabelWidthCss": SacToLabelWidthCssPipe, "toLabelHeight": SacToLabelHeightPipe, "toControlWidthCss": SacToControlWidthCssPipe, "async": i2.AsyncPipe } });
+    ], usesInheritance: true, ngImport: i0, 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", styles: [".dropzone{min-height:9.75rem;border:.125rem dashed lightgray;border-radius:.5rem;background:transparent}.dropzone.is-invalid{border-color:var(--bs-form-invalid-border-color)}.dropzone .content{position:relative;inset:0}.dropzone .content .is-invalid{color:var(--bs-form-invalid-border-color)}.dropzone .content .progress-container{min-width:50%;z-index:100}.dropzone .content .dropzone-uploadstates .upload-progress{padding:0}.dropzone .content .dropzone-uploadstates .upload-progress .progress{height:100%;border-top-right-radius:0;border-bottom-right-radius:0}.dropzone .content .dropzone-uploadstates .upload-progress .progress .progress-text{left:0;right:0;position:absolute}.dropzone .custom-file-input{min-height:100%;height:unset;width:100%;opacity:0;position:absolute}\n"], components: [{ type: SacTooltipComponent, selector: "sac-tooltip" }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "toLabelWidthCss": SacToLabelWidthCssPipe, "toLabelHeight": SacToLabelHeightPipe, "toControlWidthCss": SacToControlWidthCssPipe, "async": i3.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacDropzoneMultipleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sac-dropzonemultiple', providers: [
@@ -774,7 +834,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => SacDropzoneMultipleComponent),
                         },
-                    ], 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", styles: [".dropzone{min-height:9.75rem;border:.125rem dashed lightgray;border-radius:.5rem;background:transparent}.dropzone.is-invalid{border-color:var(--bs-form-invalid-border-color)}.dropzone .content{position:relative;inset:0}.dropzone .content .is-invalid{color:var(--bs-form-invalid-border-color)}.dropzone .content .progress-container{min-width:50%;z-index:100}.dropzone .content .dropzone-uploadstates .upload-progress{padding:0}.dropzone .content .dropzone-uploadstates .upload-progress .progress{height:100%;border-top-right-radius:0;border-bottom-right-radius:0}.dropzone .content .dropzone-uploadstates .upload-progress .progress .progress-text{left:0;right:0;position:absolute}.dropzone .custom-file-input{min-height:100%;height:unset;width:100%;opacity:0;position:absolute}\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", styles: [".dropzone{min-height:9.75rem;border:.125rem dashed lightgray;border-radius:.5rem;background:transparent}.dropzone.is-invalid{border-color:var(--bs-form-invalid-border-color)}.dropzone .content{position:relative;inset:0}.dropzone .content .is-invalid{color:var(--bs-form-invalid-border-color)}.dropzone .content .progress-container{min-width:50%;z-index:100}.dropzone .content .dropzone-uploadstates .upload-progress{padding:0}.dropzone .content .dropzone-uploadstates .upload-progress .progress{height:100%;border-top-right-radius:0;border-bottom-right-radius:0}.dropzone .content .dropzone-uploadstates .upload-progress .progress .progress-text{left:0;right:0;position:absolute}.dropzone .custom-file-input{min-height:100%;height:unset;width:100%;opacity:0;position:absolute}\n"] }]
         }], ctorParameters: function () {
         return [{ type: SacFormLayoutDirective, decorators: [{
                         type: Host
@@ -820,7 +880,7 @@ SacDropzoneSingleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
             multi: true,
             useExisting: forwardRef(() => SacDropzoneSingleComponent),
         },
-    ], usesInheritance: true, ngImport: i0, 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", styles: [".dropzone{min-height:9.75rem;border:.125rem dashed lightgray;border-radius:.5rem;background:transparent}.dropzone.is-invalid{border-color:var(--bs-form-invalid-border-color)}.dropzone .content{position:relative;inset:0}.dropzone .content .is-invalid{color:var(--bs-form-invalid-border-color)}.dropzone .content .progress-container{min-width:50%;z-index:100}.dropzone .content .dropzone-uploadstates .upload-progress{padding:0}.dropzone .content .dropzone-uploadstates .upload-progress .progress{height:100%;border-top-right-radius:0;border-bottom-right-radius:0}.dropzone .content .dropzone-uploadstates .upload-progress .progress .progress-text{left:0;right:0;position:absolute}.dropzone .custom-file-input{min-height:100%;height:unset;width:100%;opacity:0;position:absolute}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "toLabelWidthCss": SacToLabelWidthCssPipe, "toLabelHeight": SacToLabelHeightPipe, "toControlWidthCss": SacToControlWidthCssPipe, "async": i2.AsyncPipe } });
+    ], usesInheritance: true, ngImport: i0, 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", styles: [".dropzone{min-height:9.75rem;border:.125rem dashed lightgray;border-radius:.5rem;background:transparent}.dropzone.is-invalid{border-color:var(--bs-form-invalid-border-color)}.dropzone .content{position:relative;inset:0}.dropzone .content .is-invalid{color:var(--bs-form-invalid-border-color)}.dropzone .content .progress-container{min-width:50%;z-index:100}.dropzone .content .dropzone-uploadstates .upload-progress{padding:0}.dropzone .content .dropzone-uploadstates .upload-progress .progress{height:100%;border-top-right-radius:0;border-bottom-right-radius:0}.dropzone .content .dropzone-uploadstates .upload-progress .progress .progress-text{left:0;right:0;position:absolute}.dropzone .custom-file-input{min-height:100%;height:unset;width:100%;opacity:0;position:absolute}\n"], components: [{ type: SacTooltipComponent, selector: "sac-tooltip" }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "toLabelWidthCss": SacToLabelWidthCssPipe, "toLabelHeight": SacToLabelHeightPipe, "toControlWidthCss": SacToControlWidthCssPipe, "async": i3.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacDropzoneSingleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sac-dropzonesingle', providers: [
@@ -834,7 +894,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => SacDropzoneSingleComponent),
                         },
-                    ], 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", styles: [".dropzone{min-height:9.75rem;border:.125rem dashed lightgray;border-radius:.5rem;background:transparent}.dropzone.is-invalid{border-color:var(--bs-form-invalid-border-color)}.dropzone .content{position:relative;inset:0}.dropzone .content .is-invalid{color:var(--bs-form-invalid-border-color)}.dropzone .content .progress-container{min-width:50%;z-index:100}.dropzone .content .dropzone-uploadstates .upload-progress{padding:0}.dropzone .content .dropzone-uploadstates .upload-progress .progress{height:100%;border-top-right-radius:0;border-bottom-right-radius:0}.dropzone .content .dropzone-uploadstates .upload-progress .progress .progress-text{left:0;right:0;position:absolute}.dropzone .custom-file-input{min-height:100%;height:unset;width:100%;opacity:0;position:absolute}\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", styles: [".dropzone{min-height:9.75rem;border:.125rem dashed lightgray;border-radius:.5rem;background:transparent}.dropzone.is-invalid{border-color:var(--bs-form-invalid-border-color)}.dropzone .content{position:relative;inset:0}.dropzone .content .is-invalid{color:var(--bs-form-invalid-border-color)}.dropzone .content .progress-container{min-width:50%;z-index:100}.dropzone .content .dropzone-uploadstates .upload-progress{padding:0}.dropzone .content .dropzone-uploadstates .upload-progress .progress{height:100%;border-top-right-radius:0;border-bottom-right-radius:0}.dropzone .content .dropzone-uploadstates .upload-progress .progress .progress-text{left:0;right:0;position:absolute}.dropzone .custom-file-input{min-height:100%;height:unset;width:100%;opacity:0;position:absolute}\n"] }]
         }], ctorParameters: function () {
         return [{ type: SacFormLayoutDirective, decorators: [{
                         type: Host
@@ -872,7 +932,7 @@ SacUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
             multi: true,
             useExisting: forwardRef(() => SacUploadComponent),
         },
-    ], usesInheritance: true, ngImport: i0, 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", styles: [".upload-component .custom-file{height:100%}.upload-component .custom-file .custom-file-input{inset:0;position:absolute;opacity:0}.upload-component.upload-multiple .upload-progress .progress{border-top-right-radius:0;border-bottom-right-radius:0}.upload-component.upload-single .upload-progress .progress{border-radius:0}.upload-component .upload-progress{padding:0;border:0}.upload-component .upload-progress .progress{height:100%}.upload-component .upload-progress .progress .progress-text{position:absolute;left:0;right:0}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "toLabelWidthCss": SacToLabelWidthCssPipe, "toLabelHeight": SacToLabelHeightPipe, "toControlWidthCss": SacToControlWidthCssPipe, "async": i2.AsyncPipe, "toControlHeight": SacToControlHeightPipe } });
+    ], usesInheritance: true, ngImport: i0, 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", styles: [".upload-component .custom-file{height:100%}.upload-component .custom-file .custom-file-input{inset:0;position:absolute;opacity:0}.upload-component.upload-multiple .upload-progress .progress{border-top-right-radius:0;border-bottom-right-radius:0}.upload-component.upload-single .upload-progress .progress{border-radius:0}.upload-component .upload-progress{padding:0;border:0}.upload-component .upload-progress .progress{height:100%}.upload-component .upload-progress .progress .progress-text{position:absolute;left:0;right:0}\n"], components: [{ type: SacTooltipComponent, selector: "sac-tooltip" }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "toLabelWidthCss": SacToLabelWidthCssPipe, "toLabelHeight": SacToLabelHeightPipe, "toControlWidthCss": SacToControlWidthCssPipe, "async": i3.AsyncPipe, "toControlHeight": SacToControlHeightPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacUploadComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sac-upload', providers: [
@@ -886,7 +946,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => SacUploadComponent),
                         },
-                    ], 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", styles: [".upload-component .custom-file{height:100%}.upload-component .custom-file .custom-file-input{inset:0;position:absolute;opacity:0}.upload-component.upload-multiple .upload-progress .progress{border-top-right-radius:0;border-bottom-right-radius:0}.upload-component.upload-single .upload-progress .progress{border-radius:0}.upload-component .upload-progress{padding:0;border:0}.upload-component .upload-progress .progress{height:100%}.upload-component .upload-progress .progress .progress-text{position:absolute;left:0;right:0}\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", styles: [".upload-component .custom-file{height:100%}.upload-component .custom-file .custom-file-input{inset:0;position:absolute;opacity:0}.upload-component.upload-multiple .upload-progress .progress{border-top-right-radius:0;border-bottom-right-radius:0}.upload-component.upload-single .upload-progress .progress{border-radius:0}.upload-component .upload-progress{padding:0;border:0}.upload-component .upload-progress .progress{height:100%}.upload-component .upload-progress .progress .progress-text{position:absolute;left:0;right:0}\n"] }]
         }], ctorParameters: function () {
         return [{ type: SacFormLayoutDirective, decorators: [{
                         type: Host
@@ -924,7 +984,7 @@ SacUploadMultipleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
             multi: true,
             useExisting: forwardRef(() => SacUploadMultipleComponent),
         },
-    ], usesInheritance: true, ngImport: i0, 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", styles: [".upload-component .custom-file{height:100%}.upload-component .custom-file .custom-file-input{inset:0;position:absolute;opacity:0}.upload-component.upload-multiple .upload-progress .progress{border-top-right-radius:0;border-bottom-right-radius:0}.upload-component.upload-single .upload-progress .progress{border-radius:0}.upload-component .upload-progress{padding:0;border:0}.upload-component .upload-progress .progress{height:100%}.upload-component .upload-progress .progress .progress-text{position:absolute;left:0;right:0}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "toLabelWidthCss": SacToLabelWidthCssPipe, "toLabelHeight": SacToLabelHeightPipe, "toControlWidthCss": SacToControlWidthCssPipe, "async": i2.AsyncPipe } });
+    ], usesInheritance: true, ngImport: i0, 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", styles: [".upload-component .custom-file{height:100%}.upload-component .custom-file .custom-file-input{inset:0;position:absolute;opacity:0}.upload-component.upload-multiple .upload-progress .progress{border-top-right-radius:0;border-bottom-right-radius:0}.upload-component.upload-single .upload-progress .progress{border-radius:0}.upload-component .upload-progress{padding:0;border:0}.upload-component .upload-progress .progress{height:100%}.upload-component .upload-progress .progress .progress-text{position:absolute;left:0;right:0}\n"], components: [{ type: SacTooltipComponent, selector: "sac-tooltip" }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "toLabelWidthCss": SacToLabelWidthCssPipe, "toLabelHeight": SacToLabelHeightPipe, "toControlWidthCss": SacToControlWidthCssPipe, "async": i3.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacUploadMultipleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sac-uploadmultiple', providers: [
@@ -938,7 +998,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => SacUploadMultipleComponent),
                         },
-                    ], 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", styles: [".upload-component .custom-file{height:100%}.upload-component .custom-file .custom-file-input{inset:0;position:absolute;opacity:0}.upload-component.upload-multiple .upload-progress .progress{border-top-right-radius:0;border-bottom-right-radius:0}.upload-component.upload-single .upload-progress .progress{border-radius:0}.upload-component .upload-progress{padding:0;border:0}.upload-component .upload-progress .progress{height:100%}.upload-component .upload-progress .progress .progress-text{position:absolute;left:0;right:0}\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", styles: [".upload-component .custom-file{height:100%}.upload-component .custom-file .custom-file-input{inset:0;position:absolute;opacity:0}.upload-component.upload-multiple .upload-progress .progress{border-top-right-radius:0;border-bottom-right-radius:0}.upload-component.upload-single .upload-progress .progress{border-radius:0}.upload-component .upload-progress{padding:0;border:0}.upload-component .upload-progress .progress{height:100%}.upload-component .upload-progress .progress .progress-text{position:absolute;left:0;right:0}\n"] }]
         }], ctorParameters: function () {
         return [{ type: SacFormLayoutDirective, decorators: [{
                         type: Host
@@ -953,11 +1013,19 @@ SACBootstrap5UploadModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0"
 SACBootstrap5UploadModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5UploadModule, declarations: [SacUploadComponent,
         SacUploadMultipleComponent,
         SacDropzoneSingleComponent,
-        SacDropzoneMultipleComponent], imports: [CommonModule, FormsModule, SACBootstrap5LayoutModule], exports: [SacUploadComponent,
+        SacDropzoneMultipleComponent], imports: [CommonModule,
+        FormsModule,
+        SACBootstrap5LayoutModule,
+        SACBootstrap5TooltipModule], exports: [SacUploadComponent,
         SacUploadMultipleComponent,
         SacDropzoneSingleComponent,
         SacDropzoneMultipleComponent] });
-SACBootstrap5UploadModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5UploadModule, imports: [[CommonModule, FormsModule, SACBootstrap5LayoutModule]] });
+SACBootstrap5UploadModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5UploadModule, imports: [[
+            CommonModule,
+            FormsModule,
+            SACBootstrap5LayoutModule,
+            SACBootstrap5TooltipModule,
+        ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5UploadModule, decorators: [{
             type: NgModule,
             args: [{
@@ -967,7 +1035,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                         SacDropzoneSingleComponent,
                         SacDropzoneMultipleComponent,
                     ],
-                    imports: [CommonModule, FormsModule, SACBootstrap5LayoutModule],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        SACBootstrap5LayoutModule,
+                        SACBootstrap5TooltipModule,
+                    ],
                     exports: [
                         SacUploadComponent,
                         SacUploadMultipleComponent,
@@ -1065,7 +1138,7 @@ class SacBrowserComponent extends SacFileBrowserCommon {
     }
 }
 SacBrowserComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacBrowserComponent, deps: [{ token: i1$1.HttpClient }, { token: i0.Injector }, { token: ServiceConfirm }], target: i0.ɵɵFactoryTarget.Component });
-SacBrowserComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacBrowserComponent, selector: "sac-filebrowser", providers: [ServiceConfirm], viewQueries: [{ propertyName: "uploadComponent", first: true, predicate: SacDropzoneMultipleComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\r\n  <div class=\"col-12 col-md-5 col-lg-4\">\r\n    <ul class=\"list-group list-group-flush\">\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"treeItem\"\r\n        [ngTemplateOutletContext]=\"{node: rootNode, deep: 0}\"\r\n      ></ng-template>\r\n    </ul>\r\n\r\n    <ng-template #treeItem let-node=\"node\" let-deep=\"deep\">\r\n      <li\r\n        class=\"list-group-item py-1 px-2 d-flex align-items-center\"\r\n        [class.list-group-item-secondary]=\"node === selectedNode\"\r\n        (click)=\"selectNode(node)\"\r\n        style=\"cursor: pointer\"\r\n      >\r\n        <div class=\"mx-3\" *ngFor=\"let i of count(deep)\"></div>\r\n        <div\r\n          (click)=\"switchExpandNode(node);$event.stopPropagation();\"\r\n          class=\"me-2\"\r\n          [ngClass]=\"node.ChildNodes.length === 0 ? iconFolderEmpty: (!node.IsExpanded && node.ChildNodes.length > 0 ? iconFolderCollabsed : (node.IsExpanded && node.ChildNodes.length > 0 ? iconFolderOpen : ''))\"\r\n        ></div>\r\n        <ng-container *ngIf=\"!node.IsEditMode\">\r\n          <div class=\"flex-grow-1\">{{ node.Name }}</div>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"node.IsEditMode\">\r\n          <div class=\"flex-grow-1\" ngForm>\r\n            <input\r\n              name=\"editFolder\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"node.Name\"\r\n              [ngModelOptions]=\"{updateOn: 'blur'}\"\r\n              (ngModelChange)=\"renameNode(node, $event)\"\r\n              (keydown.enter)=\"$event.target.blur();false;\"\r\n              (blur)=\"renameNode(node, null)\"\r\n              (click)=\"$event.stopPropagation()\"\r\n            />\r\n          </div>\r\n        </ng-container>\r\n        <div class=\"flex-shrink-0\">\r\n          <a\r\n            *ngIf=\"node.Path !== '/' && allowfolderrename\"\r\n            class=\"btn btn-sm btn-link text-secondary\"\r\n            (click)=\"editNode(node);$event.stopPropagation();\"\r\n          >\r\n            <i [class]=\"iconEdit\"></i>\r\n          </a>\r\n          <sac-contextmenu cssclass=\"d-inline-block\">\r\n            <sac-contextmenubutton\r\n              *ngIf=\"allowfoldercreate\"\r\n              text=\"{{ lngResourceService.GetString(validationKeyService.FilebrowserButtonNewFolder) | async }}\"\r\n              [icon]=\"iconFolderNew\"\r\n              (clicked)=\"newNode(node)\"\r\n            ></sac-contextmenubutton>\r\n            <sac-contextmenubutton\r\n              *ngIf=\"node.Path !== '/' && allowfolderdelete\"\r\n              text=\"{{ lngResourceService.GetString(validationKeyService.FilebrowserButtonDelete) | async }}\"\r\n              [icon]=\"iconDelete\"\r\n              (clicked)=\"deleteNode(node)\"\r\n            ></sac-contextmenubutton>\r\n            <sac-contextmenusplitter\r\n              *ngIf=\"allowfoldercreate || (node.Path !== '/' && allowfolderdelete)\"\r\n            ></sac-contextmenusplitter>\r\n            <sac-contextmenubutton\r\n              text=\"{{ lngResourceService.GetString(validationKeyService.FilebrowserButtonRefresh) | async }}\"\r\n              [icon]=\"iconRefresh\"\r\n              (clicked)=\"refreshNode(node)\"\r\n            ></sac-contextmenubutton>\r\n          </sac-contextmenu>\r\n        </div>\r\n      </li>\r\n\r\n      <ng-container *ngIf=\"node.IsExpanded\">\r\n        <ng-template\r\n          *ngFor=\"let child of node.ChildNodes\"\r\n          [ngTemplateOutlet]=\"treeItem\"\r\n          [ngTemplateOutletContext]=\"{node: child, deep: deep + 1}\"\r\n        ></ng-template>\r\n      </ng-container>\r\n    </ng-template>\r\n  </div>\r\n  <div class=\"col-12 col-md-7 col-lg-8\">\r\n    <ng-container *ngIf=\"selectedNode && selectedNode.Files\">\r\n      <div *ngIf=\"allowfileupload\" ngForm>\r\n        <sac-dropzonemultiple\r\n          [disablelabel]=\"true\"\r\n          [endpoint]=\"apiurl + '/uploadregister'\"\r\n          name=\"upload\"\r\n          uploadheight=\"5rem\"\r\n          [ngModel]=\"uploads\"\r\n          (ngModelChange)=\"uploadComplete(selectedNode,$event)\"\r\n          [allowedtypes]=\"allowedtypes\"\r\n          >{{\r\n          lngResourceService.GetString(validationKeyService.FilebrowserButtonUpload)\r\n          | async }}</sac-dropzonemultiple\r\n        >\r\n      </div>\r\n      <div class=\"table-responsive\">\r\n        <table class=\"table table-striped table-hover align-middle\">\r\n          <thead>\r\n            <th>\r\n              {{\r\n              lngResourceService.GetString(validationKeyService.FilebrowserGridFilename)\r\n              | async }}\r\n            </th>\r\n            <th>\r\n              {{\r\n              lngResourceService.GetString(validationKeyService.FilebrowserGridSize)\r\n              | async }}\r\n            </th>\r\n            <th style=\"width: 80px\"></th>\r\n          </thead>\r\n          <tbody>\r\n            <ng-container *ngIf=\"selectedNode.Files.length === 0\">\r\n              <tr>\r\n                <td colspan=\"3\">\r\n                  {{\r\n                  lngResourceService.GetString(validationKeyService.FilebrowserGridNoFiles)\r\n                  | async }}\r\n                </td>\r\n              </tr>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"selectedNode.Files.length > 0\">\r\n              <tr\r\n                *ngFor=\"let item of selectedNode.Files\"\r\n                (click)=\"selectFile(item)\"\r\n                [class.table-primary]=\"selectedFileItem === item\"\r\n              >\r\n                <td [class.p-2]=\"item.IsEditMode\">\r\n                  <ng-container *ngIf=\"!item.IsEditMode\">\r\n                    {{ item.Filename }}\r\n                  </ng-container>\r\n                  <ng-container *ngIf=\"item.IsEditMode\">\r\n                    <div>\r\n                      <input\r\n                        name=\"editFolder\"\r\n                        class=\"form-control form-control-sm\"\r\n                        [ngModel]=\"item.Filename\"\r\n                        [ngModelOptions]=\"{updateOn: 'blur'}\"\r\n                        (ngModelChange)=\"renameFile(item, $event)\"\r\n                        (keydown.enter)=\"$event.target.blur();false\"\r\n                        (blur)=\"renameFile(item, null)\"\r\n                        (click)=\"$event.stopPropagation();\"\r\n                      />\r\n                    </div>\r\n                  </ng-container>\r\n                </td>\r\n                <td>{{ item.Size}}</td>\r\n                <td class=\"p-2\">\r\n                  <div class=\"btn-toolbar\" role=\"toolbar\">\r\n                    <div class=\"btn-group ml-auto\" role=\"group\">\r\n                      <a\r\n                        *ngIf=\"allowfilerename\"\r\n                        class=\"btn btn-sm btn-link text-secondary\"\r\n                        (click)=\"editFile(item);$event.stopPropagation();\"\r\n                        ><i [class]=\"iconEdit\"></i\r\n                      ></a>\r\n                    </div>\r\n                    <div class=\"btn-group\" role=\"group\">\r\n                      <a\r\n                        *ngIf=\"allowfiledelete\"\r\n                        class=\"btn btn-sm btn-link text-secondary\"\r\n                        (click)=\"deleteFile(item);$event.stopPropagation();\"\r\n                        ><i [class]=\"iconDelete\"></i\r\n                      ></a>\r\n                    </div>\r\n                  </div>\r\n                </td>\r\n              </tr>\r\n            </ng-container>\r\n          </tbody>\r\n        </table>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</div>\r\n", components: [{ type: SacContextmenuComponent, selector: "sac-contextmenu" }, { type: SacContextmenuItemButtonComponent, selector: "sac-contextmenubutton" }, { type: SacContextmenuItemSplitterComponent, selector: "sac-contextmenusplitter" }, { type: SacDropzoneMultipleComponent, selector: "sac-dropzonemultiple" }], directives: [{ type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: SacFormDirective, selector: "form:not([ngNoForm]):not([formGroup]),[ngForm]", exportAs: ["sacform"] }, { type: i9.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i9.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i9.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i9.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "async": i2.AsyncPipe } });
+SacBrowserComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacBrowserComponent, selector: "sac-filebrowser", providers: [ServiceConfirm], viewQueries: [{ propertyName: "uploadComponent", first: true, predicate: SacDropzoneMultipleComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\r\n  <div class=\"col-12 col-md-5 col-lg-4\">\r\n    <ul class=\"list-group list-group-flush\">\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"treeItem\"\r\n        [ngTemplateOutletContext]=\"{node: rootNode, deep: 0}\"\r\n      ></ng-template>\r\n    </ul>\r\n\r\n    <ng-template #treeItem let-node=\"node\" let-deep=\"deep\">\r\n      <li\r\n        class=\"list-group-item py-1 px-2 d-flex align-items-center\"\r\n        [class.list-group-item-secondary]=\"node === selectedNode\"\r\n        (click)=\"selectNode(node)\"\r\n        style=\"cursor: pointer\"\r\n      >\r\n        <div class=\"mx-3\" *ngFor=\"let i of count(deep)\"></div>\r\n        <div\r\n          (click)=\"switchExpandNode(node);$event.stopPropagation();\"\r\n          class=\"me-2\"\r\n          [ngClass]=\"node.ChildNodes.length === 0 ? iconFolderEmpty: (!node.IsExpanded && node.ChildNodes.length > 0 ? iconFolderCollabsed : (node.IsExpanded && node.ChildNodes.length > 0 ? iconFolderOpen : ''))\"\r\n        ></div>\r\n        <ng-container *ngIf=\"!node.IsEditMode\">\r\n          <div class=\"flex-grow-1\">{{ node.Name }}</div>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"node.IsEditMode\">\r\n          <div class=\"flex-grow-1\" ngForm>\r\n            <input\r\n              name=\"editFolder\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"node.Name\"\r\n              [ngModelOptions]=\"{updateOn: 'blur'}\"\r\n              (ngModelChange)=\"renameNode(node, $event)\"\r\n              (keydown.enter)=\"$event.target.blur();false;\"\r\n              (blur)=\"renameNode(node, null)\"\r\n              (click)=\"$event.stopPropagation()\"\r\n            />\r\n          </div>\r\n        </ng-container>\r\n        <div class=\"flex-shrink-0\">\r\n          <a\r\n            *ngIf=\"node.Path !== '/' && allowfolderrename\"\r\n            class=\"btn btn-sm btn-link text-secondary\"\r\n            (click)=\"editNode(node);$event.stopPropagation();\"\r\n          >\r\n            <i [class]=\"iconEdit\"></i>\r\n          </a>\r\n          <sac-contextmenu cssclass=\"d-inline-block\">\r\n            <sac-contextmenubutton\r\n              *ngIf=\"allowfoldercreate\"\r\n              text=\"{{ lngResourceService.GetString(validationKeyService.FilebrowserButtonNewFolder) | async }}\"\r\n              [icon]=\"iconFolderNew\"\r\n              (clicked)=\"newNode(node)\"\r\n            ></sac-contextmenubutton>\r\n            <sac-contextmenubutton\r\n              *ngIf=\"node.Path !== '/' && allowfolderdelete\"\r\n              text=\"{{ lngResourceService.GetString(validationKeyService.FilebrowserButtonDelete) | async }}\"\r\n              [icon]=\"iconDelete\"\r\n              (clicked)=\"deleteNode(node)\"\r\n            ></sac-contextmenubutton>\r\n            <sac-contextmenusplitter\r\n              *ngIf=\"allowfoldercreate || (node.Path !== '/' && allowfolderdelete)\"\r\n            ></sac-contextmenusplitter>\r\n            <sac-contextmenubutton\r\n              text=\"{{ lngResourceService.GetString(validationKeyService.FilebrowserButtonRefresh) | async }}\"\r\n              [icon]=\"iconRefresh\"\r\n              (clicked)=\"refreshNode(node)\"\r\n            ></sac-contextmenubutton>\r\n          </sac-contextmenu>\r\n        </div>\r\n      </li>\r\n\r\n      <ng-container *ngIf=\"node.IsExpanded\">\r\n        <ng-template\r\n          *ngFor=\"let child of node.ChildNodes\"\r\n          [ngTemplateOutlet]=\"treeItem\"\r\n          [ngTemplateOutletContext]=\"{node: child, deep: deep + 1}\"\r\n        ></ng-template>\r\n      </ng-container>\r\n    </ng-template>\r\n  </div>\r\n  <div class=\"col-12 col-md-7 col-lg-8\">\r\n    <ng-container *ngIf=\"selectedNode && selectedNode.Files\">\r\n      <div *ngIf=\"allowfileupload\" ngForm>\r\n        <sac-dropzonemultiple\r\n          [disablelabel]=\"true\"\r\n          [endpoint]=\"apiurl + '/uploadregister'\"\r\n          name=\"upload\"\r\n          uploadheight=\"5rem\"\r\n          [ngModel]=\"uploads\"\r\n          (ngModelChange)=\"uploadComplete(selectedNode,$event)\"\r\n          [allowedtypes]=\"allowedtypes\"\r\n          >{{\r\n          lngResourceService.GetString(validationKeyService.FilebrowserButtonUpload)\r\n          | async }}</sac-dropzonemultiple\r\n        >\r\n      </div>\r\n      <div class=\"table-responsive\">\r\n        <table class=\"table table-striped table-hover align-middle\">\r\n          <thead>\r\n            <th>\r\n              {{\r\n              lngResourceService.GetString(validationKeyService.FilebrowserGridFilename)\r\n              | async }}\r\n            </th>\r\n            <th>\r\n              {{\r\n              lngResourceService.GetString(validationKeyService.FilebrowserGridSize)\r\n              | async }}\r\n            </th>\r\n            <th style=\"width: 80px\"></th>\r\n          </thead>\r\n          <tbody>\r\n            <ng-container *ngIf=\"selectedNode.Files.length === 0\">\r\n              <tr>\r\n                <td colspan=\"3\">\r\n                  {{\r\n                  lngResourceService.GetString(validationKeyService.FilebrowserGridNoFiles)\r\n                  | async }}\r\n                </td>\r\n              </tr>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"selectedNode.Files.length > 0\">\r\n              <tr\r\n                *ngFor=\"let item of selectedNode.Files\"\r\n                (click)=\"selectFile(item)\"\r\n                [class.table-primary]=\"selectedFileItem === item\"\r\n              >\r\n                <td [class.p-2]=\"item.IsEditMode\">\r\n                  <ng-container *ngIf=\"!item.IsEditMode\">\r\n                    {{ item.Filename }}\r\n                  </ng-container>\r\n                  <ng-container *ngIf=\"item.IsEditMode\">\r\n                    <div>\r\n                      <input\r\n                        name=\"editFolder\"\r\n                        class=\"form-control form-control-sm\"\r\n                        [ngModel]=\"item.Filename\"\r\n                        [ngModelOptions]=\"{updateOn: 'blur'}\"\r\n                        (ngModelChange)=\"renameFile(item, $event)\"\r\n                        (keydown.enter)=\"$event.target.blur();false\"\r\n                        (blur)=\"renameFile(item, null)\"\r\n                        (click)=\"$event.stopPropagation();\"\r\n                      />\r\n                    </div>\r\n                  </ng-container>\r\n                </td>\r\n                <td>{{ item.Size}}</td>\r\n                <td class=\"p-2\">\r\n                  <div class=\"btn-toolbar\" role=\"toolbar\">\r\n                    <div class=\"btn-group ml-auto\" role=\"group\">\r\n                      <a\r\n                        *ngIf=\"allowfilerename\"\r\n                        class=\"btn btn-sm btn-link text-secondary\"\r\n                        (click)=\"editFile(item);$event.stopPropagation();\"\r\n                        ><i [class]=\"iconEdit\"></i\r\n                      ></a>\r\n                    </div>\r\n                    <div class=\"btn-group\" role=\"group\">\r\n                      <a\r\n                        *ngIf=\"allowfiledelete\"\r\n                        class=\"btn btn-sm btn-link text-secondary\"\r\n                        (click)=\"deleteFile(item);$event.stopPropagation();\"\r\n                        ><i [class]=\"iconDelete\"></i\r\n                      ></a>\r\n                    </div>\r\n                  </div>\r\n                </td>\r\n              </tr>\r\n            </ng-container>\r\n          </tbody>\r\n        </table>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</div>\r\n", components: [{ type: SacContextmenuComponent, selector: "sac-contextmenu" }, { type: SacContextmenuItemButtonComponent, selector: "sac-contextmenubutton" }, { type: SacContextmenuItemSplitterComponent, selector: "sac-contextmenusplitter" }, { type: SacDropzoneMultipleComponent, selector: "sac-dropzonemultiple" }], directives: [{ type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: SacFormDirective, selector: "form:not([ngNoForm]):not([formGroup]),[ngForm]", exportAs: ["sacform"] }, { type: i9.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i9.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i9.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i9.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "async": i3.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacBrowserComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sac-filebrowser', providers: [ServiceConfirm], template: "<div class=\"row\">\r\n  <div class=\"col-12 col-md-5 col-lg-4\">\r\n    <ul class=\"list-group list-group-flush\">\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"treeItem\"\r\n        [ngTemplateOutletContext]=\"{node: rootNode, deep: 0}\"\r\n      ></ng-template>\r\n    </ul>\r\n\r\n    <ng-template #treeItem let-node=\"node\" let-deep=\"deep\">\r\n      <li\r\n        class=\"list-group-item py-1 px-2 d-flex align-items-center\"\r\n        [class.list-group-item-secondary]=\"node === selectedNode\"\r\n        (click)=\"selectNode(node)\"\r\n        style=\"cursor: pointer\"\r\n      >\r\n        <div class=\"mx-3\" *ngFor=\"let i of count(deep)\"></div>\r\n        <div\r\n          (click)=\"switchExpandNode(node);$event.stopPropagation();\"\r\n          class=\"me-2\"\r\n          [ngClass]=\"node.ChildNodes.length === 0 ? iconFolderEmpty: (!node.IsExpanded && node.ChildNodes.length > 0 ? iconFolderCollabsed : (node.IsExpanded && node.ChildNodes.length > 0 ? iconFolderOpen : ''))\"\r\n        ></div>\r\n        <ng-container *ngIf=\"!node.IsEditMode\">\r\n          <div class=\"flex-grow-1\">{{ node.Name }}</div>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"node.IsEditMode\">\r\n          <div class=\"flex-grow-1\" ngForm>\r\n            <input\r\n              name=\"editFolder\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"node.Name\"\r\n              [ngModelOptions]=\"{updateOn: 'blur'}\"\r\n              (ngModelChange)=\"renameNode(node, $event)\"\r\n              (keydown.enter)=\"$event.target.blur();false;\"\r\n              (blur)=\"renameNode(node, null)\"\r\n              (click)=\"$event.stopPropagation()\"\r\n            />\r\n          </div>\r\n        </ng-container>\r\n        <div class=\"flex-shrink-0\">\r\n          <a\r\n            *ngIf=\"node.Path !== '/' && allowfolderrename\"\r\n            class=\"btn btn-sm btn-link text-secondary\"\r\n            (click)=\"editNode(node);$event.stopPropagation();\"\r\n          >\r\n            <i [class]=\"iconEdit\"></i>\r\n          </a>\r\n          <sac-contextmenu cssclass=\"d-inline-block\">\r\n            <sac-contextmenubutton\r\n              *ngIf=\"allowfoldercreate\"\r\n              text=\"{{ lngResourceService.GetString(validationKeyService.FilebrowserButtonNewFolder) | async }}\"\r\n              [icon]=\"iconFolderNew\"\r\n              (clicked)=\"newNode(node)\"\r\n            ></sac-contextmenubutton>\r\n            <sac-contextmenubutton\r\n              *ngIf=\"node.Path !== '/' && allowfolderdelete\"\r\n              text=\"{{ lngResourceService.GetString(validationKeyService.FilebrowserButtonDelete) | async }}\"\r\n              [icon]=\"iconDelete\"\r\n              (clicked)=\"deleteNode(node)\"\r\n            ></sac-contextmenubutton>\r\n            <sac-contextmenusplitter\r\n              *ngIf=\"allowfoldercreate || (node.Path !== '/' && allowfolderdelete)\"\r\n            ></sac-contextmenusplitter>\r\n            <sac-contextmenubutton\r\n              text=\"{{ lngResourceService.GetString(validationKeyService.FilebrowserButtonRefresh) | async }}\"\r\n              [icon]=\"iconRefresh\"\r\n              (clicked)=\"refreshNode(node)\"\r\n            ></sac-contextmenubutton>\r\n          </sac-contextmenu>\r\n        </div>\r\n      </li>\r\n\r\n      <ng-container *ngIf=\"node.IsExpanded\">\r\n        <ng-template\r\n          *ngFor=\"let child of node.ChildNodes\"\r\n          [ngTemplateOutlet]=\"treeItem\"\r\n          [ngTemplateOutletContext]=\"{node: child, deep: deep + 1}\"\r\n        ></ng-template>\r\n      </ng-container>\r\n    </ng-template>\r\n  </div>\r\n  <div class=\"col-12 col-md-7 col-lg-8\">\r\n    <ng-container *ngIf=\"selectedNode && selectedNode.Files\">\r\n      <div *ngIf=\"allowfileupload\" ngForm>\r\n        <sac-dropzonemultiple\r\n          [disablelabel]=\"true\"\r\n          [endpoint]=\"apiurl + '/uploadregister'\"\r\n          name=\"upload\"\r\n          uploadheight=\"5rem\"\r\n          [ngModel]=\"uploads\"\r\n          (ngModelChange)=\"uploadComplete(selectedNode,$event)\"\r\n          [allowedtypes]=\"allowedtypes\"\r\n          >{{\r\n          lngResourceService.GetString(validationKeyService.FilebrowserButtonUpload)\r\n          | async }}</sac-dropzonemultiple\r\n        >\r\n      </div>\r\n      <div class=\"table-responsive\">\r\n        <table class=\"table table-striped table-hover align-middle\">\r\n          <thead>\r\n            <th>\r\n              {{\r\n              lngResourceService.GetString(validationKeyService.FilebrowserGridFilename)\r\n              | async }}\r\n            </th>\r\n            <th>\r\n              {{\r\n              lngResourceService.GetString(validationKeyService.FilebrowserGridSize)\r\n              | async }}\r\n            </th>\r\n            <th style=\"width: 80px\"></th>\r\n          </thead>\r\n          <tbody>\r\n            <ng-container *ngIf=\"selectedNode.Files.length === 0\">\r\n              <tr>\r\n                <td colspan=\"3\">\r\n                  {{\r\n                  lngResourceService.GetString(validationKeyService.FilebrowserGridNoFiles)\r\n                  | async }}\r\n                </td>\r\n              </tr>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"selectedNode.Files.length > 0\">\r\n              <tr\r\n                *ngFor=\"let item of selectedNode.Files\"\r\n                (click)=\"selectFile(item)\"\r\n                [class.table-primary]=\"selectedFileItem === item\"\r\n              >\r\n                <td [class.p-2]=\"item.IsEditMode\">\r\n                  <ng-container *ngIf=\"!item.IsEditMode\">\r\n                    {{ item.Filename }}\r\n                  </ng-container>\r\n                  <ng-container *ngIf=\"item.IsEditMode\">\r\n                    <div>\r\n                      <input\r\n                        name=\"editFolder\"\r\n                        class=\"form-control form-control-sm\"\r\n                        [ngModel]=\"item.Filename\"\r\n                        [ngModelOptions]=\"{updateOn: 'blur'}\"\r\n                        (ngModelChange)=\"renameFile(item, $event)\"\r\n                        (keydown.enter)=\"$event.target.blur();false\"\r\n                        (blur)=\"renameFile(item, null)\"\r\n                        (click)=\"$event.stopPropagation();\"\r\n                      />\r\n                    </div>\r\n                  </ng-container>\r\n                </td>\r\n                <td>{{ item.Size}}</td>\r\n                <td class=\"p-2\">\r\n                  <div class=\"btn-toolbar\" role=\"toolbar\">\r\n                    <div class=\"btn-group ml-auto\" role=\"group\">\r\n                      <a\r\n                        *ngIf=\"allowfilerename\"\r\n                        class=\"btn btn-sm btn-link text-secondary\"\r\n                        (click)=\"editFile(item);$event.stopPropagation();\"\r\n                        ><i [class]=\"iconEdit\"></i\r\n                      ></a>\r\n                    </div>\r\n                    <div class=\"btn-group\" role=\"group\">\r\n                      <a\r\n                        *ngIf=\"allowfiledelete\"\r\n                        class=\"btn btn-sm btn-link text-secondary\"\r\n                        (click)=\"deleteFile(item);$event.stopPropagation();\"\r\n                        ><i [class]=\"iconDelete\"></i\r\n                      ></a>\r\n                    </div>\r\n                  </div>\r\n                </td>\r\n              </tr>\r\n            </ng-container>\r\n          </tbody>\r\n        </table>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</div>\r\n" }]
@@ -1137,7 +1210,7 @@ SacCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             useExisting: forwardRef(() => SacCheckboxComponent),
             multi: true,
         },
-    ], usesInheritance: true, ngImport: i0, 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", styles: [".form-check-lg{padding-left:1.75rem}.form-check-input{width:1rem;height:1rem}.form-check-input-sm{width:.875rem;height:.875rem;margin-top:.4rem}.form-check-input-lg{width:1.25rem;height:1.25rem;margin-left:-1.75rem}.form-check-label-sm{font-size:.875rem}.form-check-label-lg{font-size:1.25rem}\n"], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "toLabelWidthCss": SacToLabelWidthCssPipe, "toLabelHeight": SacToLabelHeightPipe, "toControlWidthCss": SacToControlWidthCssPipe } });
+    ], usesInheritance: true, ngImport: i0, 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-switch]=\"checkboxstyle === 'switch'\"\r\n      [attr.role]=\"checkboxstyle === 'switch' ? 'switch' : null\"\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", styles: [".form-check-sm{font-size:.875em}.form-check-lg{font-size:1.25em}\n"], components: [{ type: SacTooltipComponent, selector: "sac-tooltip" }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "toLabelWidthCss": SacToLabelWidthCssPipe, "toLabelHeight": SacToLabelHeightPipe, "toControlWidthCss": SacToControlWidthCssPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacCheckboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sac-checkbox', providers: [
@@ -1151,7 +1224,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                             useExisting: forwardRef(() => SacCheckboxComponent),
                             multi: true,
                         },
-                    ], 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", styles: [".form-check-lg{padding-left:1.75rem}.form-check-input{width:1rem;height:1rem}.form-check-input-sm{width:.875rem;height:.875rem;margin-top:.4rem}.form-check-input-lg{width:1.25rem;height:1.25rem;margin-left:-1.75rem}.form-check-label-sm{font-size:.875rem}.form-check-label-lg{font-size:1.25rem}\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-switch]=\"checkboxstyle === 'switch'\"\r\n      [attr.role]=\"checkboxstyle === 'switch' ? 'switch' : null\"\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", styles: [".form-check-sm{font-size:.875em}.form-check-lg{font-size:1.25em}\n"] }]
         }], ctorParameters: function () {
         return [{ type: SacFormLayoutDirective, decorators: [{
                         type: Host
@@ -1186,7 +1259,7 @@ SacRadiobuttonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
             useExisting: forwardRef(() => SacRadiobuttonsComponent),
             multi: true,
         },
-    ], usesInheritance: true, ngImport: i0, 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", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "toLabelWidthCss": SacToLabelWidthCssPipe, "toLabelHeight": SacToLabelHeightPipe, "toControlWidthCss": SacToControlWidthCssPipe } });
+    ], usesInheritance: true, ngImport: i0, 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", components: [{ type: SacTooltipComponent, selector: "sac-tooltip" }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "toLabelWidthCss": SacToLabelWidthCssPipe, "toLabelHeight": SacToLabelHeightPipe, "toControlWidthCss": SacToControlWidthCssPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacRadiobuttonsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sac-radiobuttons', providers: [
@@ -1200,7 +1273,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                             useExisting: forwardRef(() => SacRadiobuttonsComponent),
                             multi: true,
                         },
-                    ], 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" }]
         }], ctorParameters: function () {
         return [{ type: SacFormLayoutDirective, decorators: [{
                         type: Host
@@ -1222,7 +1295,7 @@ class SacRadiobuttonComponent extends SacRadiobuttonCommon {
     }
 }
 SacRadiobuttonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacRadiobuttonComponent, deps: [{ token: SacRadiobuttonsComponent, host: true }], target: i0.ɵɵFactoryTarget.Component });
-SacRadiobuttonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacRadiobuttonComponent, selector: "sac-radiobutton", usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"form-check\"\r\n  [class.form-check-sm]=\"componentHeight === ControlHeight.Small\"\r\n  [class.form-check-lg]=\"componentHeight === ControlHeight.Large\"\r\n  *ngIf=\"hidden===false\"\r\n>\r\n  <input\r\n    id=\"{{getName}}_{{getIndex}}\"\r\n    name=\"{{getName}}\"\r\n    type=\"radio\"\r\n    class=\"form-check-input\"\r\n    [class.form-check-input-sm]=\"componentHeight === ControlHeight.Small\"\r\n    [class.form-check-input-lg]=\"componentHeight === ControlHeight.Large\"\r\n    [value]=\"value\"\r\n    [checked]=\"checked\"\r\n    (change)=\"ChangeEvent()\"\r\n    [disabled]=\"isDisabled\"\r\n  />\r\n  <label\r\n    for=\"{{getName}}_{{getIndex}}\"\r\n    class=\"form-check-label\"\r\n    [class.form-check-label-sm]=\"componentHeight === ControlHeight.Small\"\r\n    [class.form-check-label-lg]=\"componentHeight === ControlHeight.Large\"\r\n  >\r\n    <ng-template\r\n      *ngTemplateOutlet=\"labeltemplate || defaultItemLabelTemplate;context:{ label: label }\"\r\n    >\r\n    </ng-template>\r\n  </label>\r\n</div>\r\n\r\n<ng-template #defaultItemLabelTemplate let-label=\"label\">{{label}}</ng-template>\r\n", styles: [".form-check-lg{padding-left:1.75rem}.form-check-input{width:1rem;height:1rem}.form-check-input-sm{width:.875rem;height:.875rem;margin-top:.4rem}.form-check-input-lg{width:1.25rem;height:1.25rem;margin-left:-1.75rem;margin-top:.4rem}.form-check-label-sm{font-size:.875rem}.form-check-label-lg{font-size:1.25rem}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+SacRadiobuttonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacRadiobuttonComponent, selector: "sac-radiobutton", usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"form-check\"\r\n  [class.form-check-sm]=\"componentHeight === ControlHeight.Small\"\r\n  [class.form-check-lg]=\"componentHeight === ControlHeight.Large\"\r\n  *ngIf=\"hidden===false\"\r\n>\r\n  <input\r\n    id=\"{{getName}}_{{getIndex}}\"\r\n    name=\"{{getName}}\"\r\n    type=\"radio\"\r\n    class=\"form-check-input\"\r\n    [class.form-check-input-sm]=\"componentHeight === ControlHeight.Small\"\r\n    [class.form-check-input-lg]=\"componentHeight === ControlHeight.Large\"\r\n    [value]=\"value\"\r\n    [checked]=\"checked\"\r\n    (change)=\"ChangeEvent()\"\r\n    [disabled]=\"isDisabled\"\r\n  />\r\n  <label\r\n    for=\"{{getName}}_{{getIndex}}\"\r\n    class=\"form-check-label\"\r\n    [class.form-check-label-sm]=\"componentHeight === ControlHeight.Small\"\r\n    [class.form-check-label-lg]=\"componentHeight === ControlHeight.Large\"\r\n  >\r\n    <ng-template\r\n      *ngTemplateOutlet=\"labeltemplate || defaultItemLabelTemplate;context:{ label: label }\"\r\n    >\r\n    </ng-template>\r\n  </label>\r\n</div>\r\n\r\n<ng-template #defaultItemLabelTemplate let-label=\"label\">{{label}}</ng-template>\r\n", styles: [".form-check-lg{padding-left:1.75rem}.form-check-input{width:1rem;height:1rem}.form-check-input-sm{width:.875rem;height:.875rem;margin-top:.4rem}.form-check-input-lg{width:1.25rem;height:1.25rem;margin-left:-1.75rem;margin-top:.4rem}.form-check-label-sm{font-size:.875rem}.form-check-label-lg{font-size:1.25rem}\n"], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacRadiobuttonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sac-radiobutton', template: "<div\r\n  class=\"form-check\"\r\n  [class.form-check-sm]=\"componentHeight === ControlHeight.Small\"\r\n  [class.form-check-lg]=\"componentHeight === ControlHeight.Large\"\r\n  *ngIf=\"hidden===false\"\r\n>\r\n  <input\r\n    id=\"{{getName}}_{{getIndex}}\"\r\n    name=\"{{getName}}\"\r\n    type=\"radio\"\r\n    class=\"form-check-input\"\r\n    [class.form-check-input-sm]=\"componentHeight === ControlHeight.Small\"\r\n    [class.form-check-input-lg]=\"componentHeight === ControlHeight.Large\"\r\n    [value]=\"value\"\r\n    [checked]=\"checked\"\r\n    (change)=\"ChangeEvent()\"\r\n    [disabled]=\"isDisabled\"\r\n  />\r\n  <label\r\n    for=\"{{getName}}_{{getIndex}}\"\r\n    class=\"form-check-label\"\r\n    [class.form-check-label-sm]=\"componentHeight === ControlHeight.Small\"\r\n    [class.form-check-label-lg]=\"componentHeight === ControlHeight.Large\"\r\n  >\r\n    <ng-template\r\n      *ngTemplateOutlet=\"labeltemplate || defaultItemLabelTemplate;context:{ label: label }\"\r\n    >\r\n    </ng-template>\r\n  </label>\r\n</div>\r\n\r\n<ng-template #defaultItemLabelTemplate let-label=\"label\">{{label}}</ng-template>\r\n", styles: [".form-check-lg{padding-left:1.75rem}.form-check-input{width:1rem;height:1rem}.form-check-input-sm{width:.875rem;height:.875rem;margin-top:.4rem}.form-check-input-lg{width:1.25rem;height:1.25rem;margin-left:-1.75rem;margin-top:.4rem}.form-check-label-sm{font-size:.875rem}.form-check-label-lg{font-size:1.25rem}\n"] }]
@@ -1237,10 +1310,16 @@ class SACBootstrap5CheckboxModule {
 SACBootstrap5CheckboxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5CheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 SACBootstrap5CheckboxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5CheckboxModule, declarations: [SacCheckboxComponent,
         SacRadiobuttonComponent,
-        SacRadiobuttonsComponent], imports: [CommonModule, SACBootstrap5LayoutModule], exports: [SacCheckboxComponent,
+        SacRadiobuttonsComponent], imports: [CommonModule,
+        SACBootstrap5LayoutModule,
+        SACBootstrap5TooltipModule], exports: [SacCheckboxComponent,
         SacRadiobuttonComponent,
         SacRadiobuttonsComponent] });
-SACBootstrap5CheckboxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5CheckboxModule, imports: [[CommonModule, SACBootstrap5LayoutModule]] });
+SACBootstrap5CheckboxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5CheckboxModule, imports: [[
+            CommonModule,
+            SACBootstrap5LayoutModule,
+            SACBootstrap5TooltipModule,
+        ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5CheckboxModule, decorators: [{
             type: NgModule,
             args: [{
@@ -1249,7 +1328,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                         SacRadiobuttonComponent,
                         SacRadiobuttonsComponent,
                     ],
-                    imports: [CommonModule, SACBootstrap5LayoutModule],
+                    imports: [
+                        CommonModule,
+                        SACBootstrap5LayoutModule,
+                        SACBootstrap5TooltipModule,
+                    ],
                     exports: [
                         SacCheckboxComponent,
                         SacRadiobuttonComponent,
@@ -1264,7 +1347,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
 class SacDateSelectorComponent extends SacDateSelectorCommon {
 }
 SacDateSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacDateSelectorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-SacDateSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacDateSelectorComponent, selector: "sac-dateselector", usesInheritance: true, ngImport: i0, template: "<div class=\"calendar-selector\">\r\n  <div *ngIf=\"dateselection\">\r\n    <div class=\"container\">\r\n      <div class=\"row\">\r\n        <div class=\"col text-start\">\r\n          <a (click)=\"monthBack()\"><span [class]=\"iconMonthPrev\"></span></a>\r\n        </div>\r\n        <div class=\"col text-center\">{{month+1}}/{{year}}</div>\r\n        <div class=\"col text-end\">\r\n          <a (click)=\"monthNext()\"><span [class]=\"iconMonthNext\"></span></a>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div></div>\r\n    <div class=\"container\">\r\n      <div class=\"row\">\r\n        <ng-container *ngFor=\"let week of dates; let i=index\">\r\n          <ng-container *ngFor=\"let item of week\">\r\n            <div\r\n              class=\"p-2 col text-center\"\r\n              [ngStyle]=\"{'cursor': item.isenabled ? 'pointer' : null}\"\r\n              [ngClass]=\"{'day-current': item.iscurrent, 'day-selected': item.isselected, 'day-new': item.isnew, 'day-disabled': !item.isenabled}\"\r\n              (click)=\"selectDate(item)\"\r\n            >\r\n              {{ item.displaytext }}\r\n            </div>\r\n          </ng-container>\r\n          <div class=\"w-100\"></div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"d-flex justify-content-start\" *ngIf=\"timeselection\">\r\n    <div class=\"p-2\">\r\n      <div class=\"form-group\">\r\n        <label>Stunde</label>\r\n        <input\r\n          type=\"number\"\r\n          class=\"form-control form-control-sm\"\r\n          [value]=\"getHours()\"\r\n          (input)=\"setHours($event.target.value)\"\r\n          min=\"0\"\r\n          max=\"23\"\r\n        />\r\n      </div>\r\n    </div>\r\n    <div class=\"p-2\">\r\n      <div class=\"form-group\">\r\n        <label>Minute</label>\r\n        <input\r\n          type=\"number\"\r\n          class=\"form-control form-control-sm\"\r\n          [value]=\"getMinutes()\"\r\n          (input)=\"setMinutes($event.target.value)\"\r\n          min=\"0\"\r\n          max=\"59\"\r\n        />\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"d-flex flex-row\">\r\n    <div class=\"flex-grow-1 p-2\">\r\n      <button type=\"button\" class=\"btn btn-secondary\" (click)=\"setToday()\">\r\n        Heute\r\n      </button>\r\n    </div>\r\n    <div class=\"p-2\">\r\n      <button\r\n        type=\"button\"\r\n        class=\"btn btn-secondary\"\r\n        (click)=\"resetSelection()\"\r\n      >\r\n        Reset\r\n      </button>\r\n    </div>\r\n    <div class=\"p-2\">\r\n      <button type=\"button\" class=\"btn btn-primary\" (click)=\"applySelection()\">\r\n        Apply\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+SacDateSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacDateSelectorComponent, selector: "sac-dateselector", usesInheritance: true, ngImport: i0, template: "<div class=\"calendar-selector\">\r\n  <div *ngIf=\"dateselection\">\r\n    <div class=\"container\">\r\n      <div class=\"row\">\r\n        <div class=\"col text-start\">\r\n          <a (click)=\"monthBack()\"><span [class]=\"iconMonthPrev\"></span></a>\r\n        </div>\r\n        <div class=\"col text-center\">{{month+1}}/{{year}}</div>\r\n        <div class=\"col text-end\">\r\n          <a (click)=\"monthNext()\"><span [class]=\"iconMonthNext\"></span></a>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div></div>\r\n    <div class=\"container\">\r\n      <div class=\"row\">\r\n        <ng-container *ngFor=\"let week of dates; let i=index\">\r\n          <ng-container *ngFor=\"let item of week\">\r\n            <div\r\n              class=\"p-2 col text-center\"\r\n              [ngStyle]=\"{'cursor': item.isenabled ? 'pointer' : null}\"\r\n              [ngClass]=\"{'day-current': item.iscurrent, 'day-selected': item.isselected, 'day-new': item.isnew, 'day-disabled': !item.isenabled}\"\r\n              (click)=\"selectDate(item)\"\r\n            >\r\n              {{ item.displaytext }}\r\n            </div>\r\n          </ng-container>\r\n          <div class=\"w-100\"></div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"d-flex justify-content-start\" *ngIf=\"timeselection\">\r\n    <div class=\"p-2\">\r\n      <div class=\"form-group\">\r\n        <label>Stunde</label>\r\n        <input\r\n          type=\"number\"\r\n          class=\"form-control form-control-sm\"\r\n          [value]=\"getHours()\"\r\n          (input)=\"setHours($event.target.value)\"\r\n          min=\"0\"\r\n          max=\"23\"\r\n        />\r\n      </div>\r\n    </div>\r\n    <div class=\"p-2\">\r\n      <div class=\"form-group\">\r\n        <label>Minute</label>\r\n        <input\r\n          type=\"number\"\r\n          class=\"form-control form-control-sm\"\r\n          [value]=\"getMinutes()\"\r\n          (input)=\"setMinutes($event.target.value)\"\r\n          min=\"0\"\r\n          max=\"59\"\r\n        />\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"d-flex flex-row\">\r\n    <div class=\"flex-grow-1 p-2\">\r\n      <button type=\"button\" class=\"btn btn-secondary\" (click)=\"setToday()\">\r\n        Heute\r\n      </button>\r\n    </div>\r\n    <div class=\"p-2\">\r\n      <button\r\n        type=\"button\"\r\n        class=\"btn btn-secondary\"\r\n        (click)=\"resetSelection()\"\r\n      >\r\n        Reset\r\n      </button>\r\n    </div>\r\n    <div class=\"p-2\">\r\n      <button type=\"button\" class=\"btn btn-primary\" (click)=\"applySelection()\">\r\n        Apply\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacDateSelectorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sac-dateselector', template: "<div class=\"calendar-selector\">\r\n  <div *ngIf=\"dateselection\">\r\n    <div class=\"container\">\r\n      <div class=\"row\">\r\n        <div class=\"col text-start\">\r\n          <a (click)=\"monthBack()\"><span [class]=\"iconMonthPrev\"></span></a>\r\n        </div>\r\n        <div class=\"col text-center\">{{month+1}}/{{year}}</div>\r\n        <div class=\"col text-end\">\r\n          <a (click)=\"monthNext()\"><span [class]=\"iconMonthNext\"></span></a>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div></div>\r\n    <div class=\"container\">\r\n      <div class=\"row\">\r\n        <ng-container *ngFor=\"let week of dates; let i=index\">\r\n          <ng-container *ngFor=\"let item of week\">\r\n            <div\r\n              class=\"p-2 col text-center\"\r\n              [ngStyle]=\"{'cursor': item.isenabled ? 'pointer' : null}\"\r\n              [ngClass]=\"{'day-current': item.iscurrent, 'day-selected': item.isselected, 'day-new': item.isnew, 'day-disabled': !item.isenabled}\"\r\n              (click)=\"selectDate(item)\"\r\n            >\r\n              {{ item.displaytext }}\r\n            </div>\r\n          </ng-container>\r\n          <div class=\"w-100\"></div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"d-flex justify-content-start\" *ngIf=\"timeselection\">\r\n    <div class=\"p-2\">\r\n      <div class=\"form-group\">\r\n        <label>Stunde</label>\r\n        <input\r\n          type=\"number\"\r\n          class=\"form-control form-control-sm\"\r\n          [value]=\"getHours()\"\r\n          (input)=\"setHours($event.target.value)\"\r\n          min=\"0\"\r\n          max=\"23\"\r\n        />\r\n      </div>\r\n    </div>\r\n    <div class=\"p-2\">\r\n      <div class=\"form-group\">\r\n        <label>Minute</label>\r\n        <input\r\n          type=\"number\"\r\n          class=\"form-control form-control-sm\"\r\n          [value]=\"getMinutes()\"\r\n          (input)=\"setMinutes($event.target.value)\"\r\n          min=\"0\"\r\n          max=\"59\"\r\n        />\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"d-flex flex-row\">\r\n    <div class=\"flex-grow-1 p-2\">\r\n      <button type=\"button\" class=\"btn btn-secondary\" (click)=\"setToday()\">\r\n        Heute\r\n      </button>\r\n    </div>\r\n    <div class=\"p-2\">\r\n      <button\r\n        type=\"button\"\r\n        class=\"btn btn-secondary\"\r\n        (click)=\"resetSelection()\"\r\n      >\r\n        Reset\r\n      </button>\r\n    </div>\r\n    <div class=\"p-2\">\r\n      <button type=\"button\" class=\"btn btn-primary\" (click)=\"applySelection()\">\r\n        Apply\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
@@ -1301,7 +1384,7 @@ SacDateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
             multi: true,
             useExisting: forwardRef(() => SacDateComponent),
         },
-    ], usesInheritance: true, ngImport: i0, 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", components: [{ type: SacDateSelectorComponent, selector: "sac-dateselector" }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.IMaskDirective, selector: "[imask]", inputs: ["imaskElement", "imask", "unmask"], outputs: ["accept", "complete"], exportAs: ["imask"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "toLabelWidthCss": SacToLabelWidthCssPipe, "toLabelHeight": SacToLabelHeightPipe, "toControlWidthCss": SacToControlWidthCssPipe, "toControlHeight": SacToControlHeightPipe, "async": i2.AsyncPipe } });
+    ], usesInheritance: true, ngImport: i0, 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", components: [{ type: SacTooltipComponent, selector: "sac-tooltip" }, { type: SacDateSelectorComponent, selector: "sac-dateselector" }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.IMaskDirective, selector: "[imask]", inputs: ["imaskElement", "imask", "unmask"], outputs: ["accept", "complete"], exportAs: ["imask"] }], pipes: { "toLabelWidthCss": SacToLabelWidthCssPipe, "toLabelHeight": SacToLabelHeightPipe, "toControlWidthCss": SacToControlWidthCssPipe, "toControlHeight": SacToControlHeightPipe, "async": i3.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacDateComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sac-date', providers: [
@@ -1315,7 +1398,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => SacDateComponent),
                         },
-                    ], 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" }]
         }], ctorParameters: function () {
         return [{ type: SacFormLayoutDirective, decorators: [{
                         type: Host
@@ -1351,7 +1434,7 @@ SacDateTimeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             multi: true,
             useExisting: forwardRef(() => SacDateTimeComponent),
         },
-    ], usesInheritance: true, ngImport: i0, 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", components: [{ type: SacDateSelectorComponent, selector: "sac-dateselector" }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.IMaskDirective, selector: "[imask]", inputs: ["imaskElement", "imask", "unmask"], outputs: ["accept", "complete"], exportAs: ["imask"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "toLabelWidthCss": SacToLabelWidthCssPipe, "toLabelHeight": SacToLabelHeightPipe, "toControlWidthCss": SacToControlWidthCssPipe, "toControlHeight": SacToControlHeightPipe, "async": i2.AsyncPipe } });
+    ], usesInheritance: true, ngImport: i0, 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", components: [{ type: SacTooltipComponent, selector: "sac-tooltip" }, { type: SacDateSelectorComponent, selector: "sac-dateselector" }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.IMaskDirective, selector: "[imask]", inputs: ["imaskElement", "imask", "unmask"], outputs: ["accept", "complete"], exportAs: ["imask"] }], pipes: { "toLabelWidthCss": SacToLabelWidthCssPipe, "toLabelHeight": SacToLabelHeightPipe, "toControlWidthCss": SacToControlWidthCssPipe, "toControlHeight": SacToControlHeightPipe, "async": i3.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacDateTimeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sac-datetime', providers: [
@@ -1365,7 +1448,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => SacDateTimeComponent),
                         },
-                    ], 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" }]
         }], ctorParameters: function () {
         return [{ type: SacFormLayoutDirective, decorators: [{
                         type: Host
@@ -1401,7 +1484,7 @@ SacTimeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
             multi: true,
             useExisting: forwardRef(() => SacTimeComponent),
         },
-    ], usesInheritance: true, ngImport: i0, 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", components: [{ type: SacDateSelectorComponent, selector: "sac-dateselector" }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.IMaskDirective, selector: "[imask]", inputs: ["imaskElement", "imask", "unmask"], outputs: ["accept", "complete"], exportAs: ["imask"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "toLabelWidthCss": SacToLabelWidthCssPipe, "toLabelHeight": SacToLabelHeightPipe, "toControlWidthCss": SacToControlWidthCssPipe, "toControlHeight": SacToControlHeightPipe, "async": i2.AsyncPipe } });
+    ], usesInheritance: true, ngImport: i0, 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", components: [{ type: SacTooltipComponent, selector: "sac-tooltip" }, { type: SacDateSelectorComponent, selector: "sac-dateselector" }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.IMaskDirective, selector: "[imask]", inputs: ["imaskElement", "imask", "unmask"], outputs: ["accept", "complete"], exportAs: ["imask"] }], pipes: { "toLabelWidthCss": SacToLabelWidthCssPipe, "toLabelHeight": SacToLabelHeightPipe, "toControlWidthCss": SacToControlWidthCssPipe, "toControlHeight": SacToControlHeightPipe, "async": i3.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacTimeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sac-time', providers: [
@@ -1415,7 +1498,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => SacTimeComponent),
                         },
-                    ], 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" }]
         }], ctorParameters: function () {
         return [{ type: SacFormLayoutDirective, decorators: [{
                         type: Host
@@ -1430,11 +1513,19 @@ SACBootstrap5DateTimeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.
 SACBootstrap5DateTimeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5DateTimeModule, declarations: [SacDateComponent,
         SacDateTimeComponent,
         SacTimeComponent,
-        SacDateSelectorComponent], imports: [CommonModule, IMaskModule, SACBootstrap5LayoutModule], exports: [SacDateComponent,
+        SacDateSelectorComponent], imports: [CommonModule,
+        IMaskModule,
+        SACBootstrap5LayoutModule,
+        SACBootstrap5TooltipModule], exports: [SacDateComponent,
         SacDateTimeComponent,
         SacTimeComponent,
         SacDateSelectorComponent] });
-SACBootstrap5DateTimeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5DateTimeModule, imports: [[CommonModule, IMaskModule, SACBootstrap5LayoutModule]] });
+SACBootstrap5DateTimeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5DateTimeModule, imports: [[
+            CommonModule,
+            IMaskModule,
+            SACBootstrap5LayoutModule,
+            SACBootstrap5TooltipModule,
+        ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5DateTimeModule, decorators: [{
             type: NgModule,
             args: [{
@@ -1444,7 +1535,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                         SacTimeComponent,
                         SacDateSelectorComponent,
                     ],
-                    imports: [CommonModule, IMaskModule, SACBootstrap5LayoutModule],
+                    imports: [
+                        CommonModule,
+                        IMaskModule,
+                        SACBootstrap5LayoutModule,
+                        SACBootstrap5TooltipModule,
+                    ],
                     exports: [
                         SacDateComponent,
                         SacDateTimeComponent,
@@ -1474,7 +1570,7 @@ SacPagingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
             multi: true,
             useExisting: forwardRef(() => SacPagingComponent),
         },
-    ], usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"d-flex justify-content-between align-items-center flex-wrap\"\r\n  id=\"{{name}}\"\r\n>\r\n  <div class=\"col-pagination order-2 order-md-1\" id=\"{{name}}_pages\">\r\n    <ul class=\"pagination mb-4 mb-md-0\">\r\n      <li\r\n        class=\"page-item\"\r\n        [ngClass]=\"{'aspNetDisabled disabled': activePageIndex === firstPageIndex}\"\r\n      >\r\n        <a class=\"page-link\" (click)=\"firstPage()\">\u00AB</a>\r\n      </li>\r\n      <li\r\n        class=\"page-item\"\r\n        *ngFor=\"let page of paginators; let i = index\"\r\n        [ngClass]=\"{'active': page === activePageIndex}\"\r\n      >\r\n        <a class=\"page-link\" (click)=\"changePage(page)\">{{page + 1 }}</a>\r\n      </li>\r\n      <li\r\n        class=\"page-item\"\r\n        [ngClass]=\"{'aspNetDisabled disabled': activePageIndex === lastPageIndex}\"\r\n      >\r\n        <a class=\"page-link\" (click)=\"lastPage()\">\u00BB</a>\r\n      </li>\r\n    </ul>\r\n  </div>\r\n  <div class=\"col-summary order-1 order-md-2\">\r\n    <div class=\"mb-4 mb-md-0 mr-4 mb-md-0\">{{ PagingText | async }}</div>\r\n  </div>\r\n  <div class=\"col-pagesize order-3\" *ngIf=\"!pagesizedisabled\">\r\n    <div class=\"d-flex align-items-center\" id=\"{{name}}_size\">\r\n      <select\r\n        class=\"form-select form-select-sm\"\r\n        style=\"width: 85px\"\r\n        [ngModel]=\"pageSize\"\r\n        (ngModelChange)=\"changePageSize($event)\"\r\n      >\r\n        <option [ngValue]=\"size\" *ngFor=\"let size of getPageSizes\">\r\n          {{size}}\r\n        </option>\r\n      </select>\r\n      <div class=\"ms-2\">{{ PageSizeText | async }}</div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i9.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i9.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i9.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }], pipes: { "async": i2.AsyncPipe } });
+    ], usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"d-flex justify-content-between align-items-center flex-wrap\"\r\n  id=\"{{name}}\"\r\n>\r\n  <div class=\"col-pagination order-2 order-md-1\" id=\"{{name}}_pages\">\r\n    <ul class=\"pagination mb-4 mb-md-0\">\r\n      <li\r\n        class=\"page-item\"\r\n        [ngClass]=\"{'aspNetDisabled disabled': activePageIndex === firstPageIndex}\"\r\n      >\r\n        <a class=\"page-link\" (click)=\"firstPage()\">\u00AB</a>\r\n      </li>\r\n      <li\r\n        class=\"page-item\"\r\n        *ngFor=\"let page of paginators; let i = index\"\r\n        [ngClass]=\"{'active': page === activePageIndex}\"\r\n      >\r\n        <a class=\"page-link\" (click)=\"changePage(page)\">{{page + 1 }}</a>\r\n      </li>\r\n      <li\r\n        class=\"page-item\"\r\n        [ngClass]=\"{'aspNetDisabled disabled': activePageIndex === lastPageIndex}\"\r\n      >\r\n        <a class=\"page-link\" (click)=\"lastPage()\">\u00BB</a>\r\n      </li>\r\n    </ul>\r\n  </div>\r\n  <div class=\"col-summary order-1 order-md-2\">\r\n    <div class=\"mb-4 mb-md-0 mr-4 mb-md-0\">{{ PagingText | async }}</div>\r\n  </div>\r\n  <div class=\"col-pagesize order-3\" *ngIf=\"!pagesizedisabled\">\r\n    <div class=\"d-flex align-items-center\" id=\"{{name}}_size\">\r\n      <select\r\n        class=\"form-select form-select-sm\"\r\n        style=\"width: 85px\"\r\n        [ngModel]=\"pageSize\"\r\n        (ngModelChange)=\"changePageSize($event)\"\r\n      >\r\n        <option [ngValue]=\"size\" *ngFor=\"let size of getPageSizes\">\r\n          {{size}}\r\n        </option>\r\n      </select>\r\n      <div class=\"ms-2\">{{ PageSizeText | async }}</div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i9.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i9.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i9.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }], pipes: { "async": i3.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacPagingComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sac-paging', providers: [
@@ -1513,7 +1609,7 @@ SacGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
             multi: true,
             useExisting: forwardRef(() => SacGridComponent),
         },
-    ], queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, 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", components: [{ type: SacPagingComponent, selector: "sac-paging" }], directives: [{ type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    ], queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, 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", components: [{ type: SacPagingComponent, selector: "sac-paging" }], directives: [{ type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacGridComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sac-grid', providers: [
@@ -1523,7 +1619,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => SacGridComponent),
                         },
-                    ], 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" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.Injector }]; }, propDecorators: { template: [{
                 type: ContentChild,
                 args: [TemplateRef, { static: false }]
@@ -1531,19 +1627,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
 
 /**
  * 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;
@@ -1593,7 +1681,7 @@ SacGridColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             provide: SacGridColumnBaseCommon,
             useExisting: forwardRef(() => SacGridColumnComponent),
         },
-    ], usesInheritance: true, ngImport: i0, template: "<th\r\n  scope=\"col\"\r\n  *ngIf=\"IsHeader()\"\r\n  [style.width]=\"width\"\r\n  (click)=\"SortByColumn()\"\r\n>\r\n  <span>{{header}}</span>\r\n  <span\r\n    class=\"ps-2\"\r\n    [class]=\"IconSortUp\"\r\n    *ngIf=\"IsSortedColumn() && GetSortDirection() ==='asc'\"\r\n  ></span>\r\n  <span\r\n    class=\"ps-2\"\r\n    [class]=\"IconSortDown\"\r\n    *ngIf=\"IsSortedColumn() && GetSortDirection() ==='desc'\"\r\n  ></span>\r\n</th>\r\n<td\r\n  scope=\"col\"\r\n  *ngIf=\"IsBody()\"\r\n  [style.width]=\"width\"\r\n  [class.ellipsis]=\"IsEllipsis()\"\r\n>\r\n  <span [attr.title]=\"IsEllipsis() ? value : null\"> {{value}} </span>\r\n</td>\r\n", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    ], usesInheritance: true, ngImport: i0, template: "<th\r\n  scope=\"col\"\r\n  *ngIf=\"IsHeader()\"\r\n  [style.width]=\"width\"\r\n  (click)=\"SortByColumn()\"\r\n>\r\n  <span>{{header}}</span>\r\n  <span\r\n    class=\"ps-2\"\r\n    [class]=\"IconSortUp\"\r\n    *ngIf=\"IsSortedColumn() && GetSortDirection() ==='asc'\"\r\n  ></span>\r\n  <span\r\n    class=\"ps-2\"\r\n    [class]=\"IconSortDown\"\r\n    *ngIf=\"IsSortedColumn() && GetSortDirection() ==='desc'\"\r\n  ></span>\r\n</th>\r\n<td\r\n  scope=\"col\"\r\n  *ngIf=\"IsBody()\"\r\n  [style.width]=\"width\"\r\n  [class.ellipsis]=\"IsEllipsis()\"\r\n>\r\n  <span [attr.title]=\"IsEllipsis() ? value : null\"> {{value}} </span>\r\n</td>\r\n", directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacGridColumnComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sac-gridcolumn', providers: [
@@ -1624,7 +1712,7 @@ SacGridColumnActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
             provide: SacGridColumnBaseCommon,
             useExisting: forwardRef(() => SacGridColumnActionComponent),
         },
-    ], usesInheritance: true, ngImport: i0, template: "<th scope=\"col\" *ngIf=\"IsHeader()\" [style.width]=\"width\"><span></span></th>\r\n<td scope=\"col\" class=\"px-2\" *ngIf=\"IsBody()\">\r\n   <ng-content></ng-content>\r\n</td>\r\n", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    ], usesInheritance: true, ngImport: i0, template: "<th scope=\"col\" *ngIf=\"IsHeader()\" [style.width]=\"width\"><span></span></th>\r\n<td scope=\"col\" class=\"px-2\" *ngIf=\"IsBody()\">\r\n   <ng-content></ng-content>\r\n</td>\r\n", directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacGridColumnActionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sac-gridcolumnaction', providers: [
@@ -1701,7 +1789,7 @@ SacInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             multi: true,
             useExisting: forwardRef(() => SacInputComponent),
         },
-    ], usesInheritance: true, ngImport: i0, 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", directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "toLabelWidthCss": SacToLabelWidthCssPipe, "toLabelHeight": SacToLabelHeightPipe, "toControlWidthCss": SacToControlWidthCssPipe, "toControlHeight": SacToControlHeightPipe, "async": i2.AsyncPipe } });
+    ], usesInheritance: true, ngImport: i0, 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", components: [{ type: SacTooltipComponent, selector: "sac-tooltip" }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "toLabelWidthCss": SacToLabelWidthCssPipe, "toLabelHeight": SacToLabelHeightPipe, "toControlWidthCss": SacToControlWidthCssPipe, "toControlHeight": SacToControlHeightPipe, "async": i3.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sac-input', providers: [
@@ -1711,7 +1799,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => SacInputComponent),
                         },
-                    ], 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" }]
         }], ctorParameters: function () {
         return [{ type: SacFormLayoutDirective, decorators: [{
                         type: Host
@@ -1746,7 +1834,7 @@ SacInputAreaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             multi: true,
             useExisting: forwardRef(() => SacInputAreaComponent),
         },
-    ], usesInheritance: true, ngImport: i0, 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", directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "toLabelWidthCss": SacToLabelWidthCssPipe, "toLabelHeight": SacToLabelHeightPipe, "toControlWidthCss": SacToControlWidthCssPipe, "toControlHeight": SacToControlHeightPipe, "async": i2.AsyncPipe } });
+    ], usesInheritance: true, ngImport: i0, 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", components: [{ type: SacTooltipComponent, selector: "sac-tooltip" }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "toLabelWidthCss": SacToLabelWidthCssPipe, "toLabelHeight": SacToLabelHeightPipe, "toControlWidthCss": SacToControlWidthCssPipe, "toControlHeight": SacToControlHeightPipe, "async": i3.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacInputAreaComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sac-inputarea', providers: [
@@ -1760,7 +1848,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => SacInputAreaComponent),
                         },
-                    ], 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" }]
         }], ctorParameters: function () {
         return [{ type: SacFormLayoutDirective, decorators: [{
                         type: Host
@@ -1795,7 +1883,7 @@ SacInputCurrencyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             multi: true,
             useExisting: forwardRef(() => SacInputCurrencyComponent),
         },
-    ], usesInheritance: true, ngImport: i0, 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", directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "toLabelWidthCss": SacToLabelWidthCssPipe, "toLabelHeight": SacToLabelHeightPipe, "toControlWidthCss": SacToControlWidthCssPipe, "toControlHeight": SacToControlHeightPipe, "async": i2.AsyncPipe } });
+    ], usesInheritance: true, ngImport: i0, 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", components: [{ type: SacTooltipComponent, selector: "sac-tooltip" }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "toLabelWidthCss": SacToLabelWidthCssPipe, "toLabelHeight": SacToLabelHeightPipe, "toControlWidthCss": SacToControlWidthCssPipe, "toControlHeight": SacToControlHeightPipe, "async": i3.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacInputCurrencyComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sac-inputcurrency', providers: [
@@ -1809,7 +1897,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => SacInputCurrencyComponent),
                         },
-                    ], 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" }]
         }], ctorParameters: function () {
         return [{ type: SacFormLayoutDirective, decorators: [{
                         type: Host
@@ -1844,7 +1932,7 @@ SacInputDecimalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
             multi: true,
             useExisting: forwardRef(() => SacInputDecimalComponent),
         },
-    ], usesInheritance: true, ngImport: i0, 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", directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "toLabelWidthCss": SacToLabelWidthCssPipe, "toLabelHeight": SacToLabelHeightPipe, "toControlWidthCss": SacToControlWidthCssPipe, "toControlHeight": SacToControlHeightPipe, "async": i2.AsyncPipe } });
+    ], usesInheritance: true, ngImport: i0, 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", components: [{ type: SacTooltipComponent, selector: "sac-tooltip" }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "toLabelWidthCss": SacToLabelWidthCssPipe, "toLabelHeight": SacToLabelHeightPipe, "toControlWidthCss": SacToControlWidthCssPipe, "toControlHeight": SacToControlHeightPipe, "async": i3.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacInputDecimalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sac-inputdecimal', providers: [
@@ -1858,7 +1946,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => SacInputDecimalComponent),
                         },
-                    ], 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" }]
         }], ctorParameters: function () {
         return [{ type: SacFormLayoutDirective, decorators: [{
                         type: Host
@@ -1893,7 +1981,7 @@ SacInputEmailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             multi: true,
             useExisting: forwardRef(() => SacInputEmailComponent),
         },
-    ], usesInheritance: true, ngImport: i0, 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", directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "toLabelWidthCss": SacToLabelWidthCssPipe, "toLabelHeight": SacToLabelHeightPipe, "toControlWidthCss": SacToControlWidthCssPipe, "toControlHeight": SacToControlHeightPipe, "async": i2.AsyncPipe } });
+    ], usesInheritance: true, ngImport: i0, 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", components: [{ type: SacTooltipComponent, selector: "sac-tooltip" }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "toLabelWidthCss": SacToLabelWidthCssPipe, "toLabelHeight": SacToLabelHeightPipe, "toControlWidthCss": SacToControlWidthCssPipe, "toControlHeight": SacToControlHeightPipe, "async": i3.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacInputEmailComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sac-inputemail', providers: [
@@ -1907,7 +1995,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => SacInputEmailComponent),
                         },
-                    ], 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" }]
         }], ctorParameters: function () {
         return [{ type: SacFormLayoutDirective, decorators: [{
                         type: Host
@@ -1942,7 +2030,7 @@ SacInputIntegerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
             multi: true,
             useExisting: forwardRef(() => SacInputIntegerComponent),
         },
-    ], usesInheritance: true, ngImport: i0, 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", directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "toLabelWidthCss": SacToLabelWidthCssPipe, "toLabelHeight": SacToLabelHeightPipe, "toControlWidthCss": SacToControlWidthCssPipe, "toControlHeight": SacToControlHeightPipe, "async": i2.AsyncPipe } });
+    ], usesInheritance: true, ngImport: i0, 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", components: [{ type: SacTooltipComponent, selector: "sac-tooltip" }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "toLabelWidthCss": SacToLabelWidthCssPipe, "toLabelHeight": SacToLabelHeightPipe, "toControlWidthCss": SacToControlWidthCssPipe, "toControlHeight": SacToControlHeightPipe, "async": i3.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacInputIntegerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sac-inputinteger', providers: [
@@ -1956,7 +2044,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => SacInputIntegerComponent),
                         },
-                    ], 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" }]
         }], ctorParameters: function () {
         return [{ type: SacFormLayoutDirective, decorators: [{
                         type: Host
@@ -1991,7 +2079,7 @@ SacInputPasswordComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             multi: true,
             useExisting: forwardRef(() => SacInputPasswordComponent),
         },
-    ], usesInheritance: true, ngImport: i0, 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", directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "toLabelWidthCss": SacToLabelWidthCssPipe, "toLabelHeight": SacToLabelHeightPipe, "toControlWidthCss": SacToControlWidthCssPipe, "toControlHeight": SacToControlHeightPipe, "async": i2.AsyncPipe } });
+    ], usesInheritance: true, ngImport: i0, 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", components: [{ type: SacTooltipComponent, selector: "sac-tooltip" }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "toLabelWidthCss": SacToLabelWidthCssPipe, "toLabelHeight": SacToLabelHeightPipe, "toControlWidthCss": SacToControlWidthCssPipe, "toControlHeight": SacToControlHeightPipe, "async": i3.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacInputPasswordComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sac-inputpassword', providers: [
@@ -2005,7 +2093,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => SacInputPasswordComponent),
                         },
-                    ], 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" }]
         }], ctorParameters: function () {
         return [{ type: SacFormLayoutDirective, decorators: [{
                         type: Host
@@ -2040,7 +2128,7 @@ SacInputSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             multi: true,
             useExisting: forwardRef(() => SacInputSearchComponent),
         },
-    ], usesInheritance: true, ngImport: i0, 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", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "toLabelWidthCss": SacToLabelWidthCssPipe, "toLabelHeight": SacToLabelHeightPipe, "toControlWidthCss": SacToControlWidthCssPipe, "toControlHeight": SacToControlHeightPipe } });
+    ], usesInheritance: true, ngImport: i0, 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      <button\r\n        type=\"submit\"\r\n        class=\"btn btn-secondary\"\r\n        id=\"{{name}}_search\"\r\n        (click)=\"searchClick()\"\r\n      >\r\n        <i\r\n          *ngIf=\"buttonmode === 'icon' || buttonmode === 'mixed'\"\r\n          [class]=\"iconname\"\r\n          [class.me-2]=\"buttonmode === 'mixed'\"\r\n        ></i>\r\n        <ng-container *ngIf=\"buttonmode === 'text' || buttonmode === 'mixed'\"\r\n          >{{buttontext}}</ng-container\r\n        >\r\n      </button>\r\n    </div>\r\n    <div *ngIf=\"helptextmode === 'text' && helptext\" class=\"form-text\">\r\n      {{helptext}}\r\n    </div>\r\n  </div>\r\n</div>\r\n", components: [{ type: SacTooltipComponent, selector: "sac-tooltip" }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "toLabelWidthCss": SacToLabelWidthCssPipe, "toLabelHeight": SacToLabelHeightPipe, "toControlWidthCss": SacToControlWidthCssPipe, "toControlHeight": SacToControlHeightPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacInputSearchComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sac-inputsearch', providers: [
@@ -2054,7 +2142,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => SacInputSearchComponent),
                         },
-                    ], 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      <button\r\n        type=\"submit\"\r\n        class=\"btn btn-secondary\"\r\n        id=\"{{name}}_search\"\r\n        (click)=\"searchClick()\"\r\n      >\r\n        <i\r\n          *ngIf=\"buttonmode === 'icon' || buttonmode === 'mixed'\"\r\n          [class]=\"iconname\"\r\n          [class.me-2]=\"buttonmode === 'mixed'\"\r\n        ></i>\r\n        <ng-container *ngIf=\"buttonmode === 'text' || buttonmode === 'mixed'\"\r\n          >{{buttontext}}</ng-container\r\n        >\r\n      </button>\r\n    </div>\r\n    <div *ngIf=\"helptextmode === 'text' && helptext\" class=\"form-text\">\r\n      {{helptext}}\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
         }], ctorParameters: function () {
         return [{ type: SacFormLayoutDirective, decorators: [{
                         type: Host
@@ -2073,7 +2161,9 @@ SACBootstrap5InputModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0"
         SacInputEmailComponent,
         SacInputIntegerComponent,
         SacInputPasswordComponent,
-        SacInputSearchComponent], imports: [CommonModule, SACBootstrap5LayoutModule], exports: [SacInputComponent,
+        SacInputSearchComponent], imports: [CommonModule,
+        SACBootstrap5LayoutModule,
+        SACBootstrap5TooltipModule], exports: [SacInputComponent,
         SacInputAreaComponent,
         SacInputCurrencyComponent,
         SacInputDecimalComponent,
@@ -2081,7 +2171,11 @@ SACBootstrap5InputModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0"
         SacInputIntegerComponent,
         SacInputPasswordComponent,
         SacInputSearchComponent] });
-SACBootstrap5InputModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5InputModule, imports: [[CommonModule, SACBootstrap5LayoutModule]] });
+SACBootstrap5InputModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5InputModule, imports: [[
+            CommonModule,
+            SACBootstrap5LayoutModule,
+            SACBootstrap5TooltipModule,
+        ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5InputModule, decorators: [{
             type: NgModule,
             args: [{
@@ -2095,7 +2189,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                         SacInputPasswordComponent,
                         SacInputSearchComponent,
                     ],
-                    imports: [CommonModule, SACBootstrap5LayoutModule],
+                    imports: [
+                        CommonModule,
+                        SACBootstrap5LayoutModule,
+                        SACBootstrap5TooltipModule,
+                    ],
                     exports: [
                         SacInputComponent,
                         SacInputAreaComponent,
@@ -2138,7 +2236,7 @@ SacDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             multi: true,
             useExisting: forwardRef(() => SacDropdownComponent),
         },
-    ], usesInheritance: true, ngImport: i0, 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", directives: [{ type: i0.forwardRef(function () { return i2.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i0.forwardRef(function () { return i2.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i0.forwardRef(function () { return SacDropdownOptionDirective; }), selector: "[sacOption],option" }, { type: i0.forwardRef(function () { return i2.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i0.forwardRef(function () { return i2.NgTemplateOutlet; }), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "toLabelWidthCss": i0.forwardRef(function () { return SacToLabelWidthCssPipe; }), "toLabelHeight": i0.forwardRef(function () { return SacToLabelHeightPipe; }), "toControlWidthCss": i0.forwardRef(function () { return SacToControlWidthCssPipe; }), "async": i0.forwardRef(function () { return i2.AsyncPipe; }) } });
+    ], usesInheritance: true, ngImport: i0, 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", components: [{ type: i0.forwardRef(function () { return SacTooltipComponent; }), selector: "sac-tooltip" }], directives: [{ type: i0.forwardRef(function () { return i3.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i0.forwardRef(function () { return SacDropdownOptionDirective; }), selector: "[sacOption],option" }, { type: i0.forwardRef(function () { return i3.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i0.forwardRef(function () { return i3.NgTemplateOutlet; }), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "toLabelWidthCss": i0.forwardRef(function () { return SacToLabelWidthCssPipe; }), "toLabelHeight": i0.forwardRef(function () { return SacToLabelHeightPipe; }), "toControlWidthCss": i0.forwardRef(function () { return SacToControlWidthCssPipe; }), "async": i0.forwardRef(function () { return i3.AsyncPipe; }) } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacDropdownComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sac-dropdown', providers: [
@@ -2152,7 +2250,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => SacDropdownComponent),
                         },
-                    ], 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" }]
         }], ctorParameters: function () {
         return [{ type: SacFormLayoutDirective, decorators: [{
                         type: Host
@@ -2191,13 +2289,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
 class SACBootstrap5DropdownModule {
 }
 SACBootstrap5DropdownModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5DropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SACBootstrap5DropdownModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5DropdownModule, declarations: [SacDropdownComponent, SacDropdownOptionDirective], imports: [CommonModule, SACBootstrap5LayoutModule], exports: [SacDropdownComponent, SacDropdownOptionDirective] });
-SACBootstrap5DropdownModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5DropdownModule, imports: [[CommonModule, SACBootstrap5LayoutModule]] });
+SACBootstrap5DropdownModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5DropdownModule, declarations: [SacDropdownComponent, SacDropdownOptionDirective], imports: [CommonModule,
+        SACBootstrap5LayoutModule,
+        SACBootstrap5TooltipModule], exports: [SacDropdownComponent, SacDropdownOptionDirective] });
+SACBootstrap5DropdownModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5DropdownModule, imports: [[
+            CommonModule,
+            SACBootstrap5LayoutModule,
+            SACBootstrap5TooltipModule,
+        ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5DropdownModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [SacDropdownComponent, SacDropdownOptionDirective],
-                    imports: [CommonModule, SACBootstrap5LayoutModule],
+                    imports: [
+                        CommonModule,
+                        SACBootstrap5LayoutModule,
+                        SACBootstrap5TooltipModule,
+                    ],
                     exports: [SacDropdownComponent, SacDropdownOptionDirective],
                 }]
         }] });
@@ -2229,7 +2337,7 @@ SacListboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             multi: true,
             useExisting: forwardRef(() => SacListboxComponent),
         },
-    ], usesInheritance: true, ngImport: i0, 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", directives: [{ type: i0.forwardRef(function () { return i2.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i0.forwardRef(function () { return i2.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i0.forwardRef(function () { return i2.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i0.forwardRef(function () { return SacListboxOptionDirective; }), selector: "[sacOption],option" }], pipes: { "toLabelWidthCss": i0.forwardRef(function () { return SacToLabelWidthCssPipe; }), "toLabelHeight": i0.forwardRef(function () { return SacToLabelHeightPipe; }), "toControlWidthCss": i0.forwardRef(function () { return SacToControlWidthCssPipe; }), "async": i0.forwardRef(function () { return i2.AsyncPipe; }) } });
+    ], usesInheritance: true, ngImport: i0, 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", components: [{ type: i0.forwardRef(function () { return SacTooltipComponent; }), selector: "sac-tooltip" }], directives: [{ type: i0.forwardRef(function () { return i3.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i0.forwardRef(function () { return i3.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i0.forwardRef(function () { return SacListboxOptionDirective; }), selector: "[sacOption],option" }], pipes: { "toLabelWidthCss": i0.forwardRef(function () { return SacToLabelWidthCssPipe; }), "toLabelHeight": i0.forwardRef(function () { return SacToLabelHeightPipe; }), "toControlWidthCss": i0.forwardRef(function () { return SacToControlWidthCssPipe; }), "async": i0.forwardRef(function () { return i3.AsyncPipe; }) } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacListboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sac-listbox', providers: [
@@ -2243,7 +2351,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => SacListboxComponent),
                         },
-                    ], 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" }]
         }], ctorParameters: function () {
         return [{ type: SacFormLayoutDirective, decorators: [{
                         type: Host
@@ -2282,13 +2390,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
 class SACBootstrap5ListModule {
 }
 SACBootstrap5ListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5ListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SACBootstrap5ListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5ListModule, declarations: [SacListboxComponent, SacListboxOptionDirective], imports: [CommonModule, SACBootstrap5LayoutModule], exports: [SacListboxComponent, SacListboxOptionDirective] });
-SACBootstrap5ListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5ListModule, imports: [[CommonModule, SACBootstrap5LayoutModule]] });
+SACBootstrap5ListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5ListModule, declarations: [SacListboxComponent, SacListboxOptionDirective], imports: [CommonModule,
+        SACBootstrap5LayoutModule,
+        SACBootstrap5TooltipModule], exports: [SacListboxComponent, SacListboxOptionDirective] });
+SACBootstrap5ListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5ListModule, imports: [[
+            CommonModule,
+            SACBootstrap5LayoutModule,
+            SACBootstrap5TooltipModule,
+        ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5ListModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [SacListboxComponent, SacListboxOptionDirective],
-                    imports: [CommonModule, SACBootstrap5LayoutModule],
+                    imports: [
+                        CommonModule,
+                        SACBootstrap5LayoutModule,
+                        SACBootstrap5TooltipModule,
+                    ],
                     exports: [SacListboxComponent, SacListboxOptionDirective],
                 }]
         }] });
@@ -2383,7 +2501,7 @@ SacMultilanguagemenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "1
             provide: SacContextmenuCommon,
             useExisting: forwardRef(() => SacMultilanguagemenuComponent),
         },
-    ], usesInheritance: true, ngImport: i0, template: "<ng-container\r\n  [ngTemplateOutlet]=\"inputtemplate || defaultInputTemplate\"\r\n></ng-container>\r\n<ng-container\r\n  [ngTemplateOutlet]=\"buttontemplate || defaultButtonTemplate\"\r\n></ng-container>\r\n<ng-container\r\n  [ngTemplateOutlet]=\"validationtemplate || defaultValidationTemplate\"\r\n></ng-container>\r\n\r\n<ul\r\n  class=\"dropdown-menu dropdown-menu-right\"\r\n  sacMultilanguageMenuContainer\r\n  [class.show]=\"isopen\"\r\n>\r\n  <ng-content></ng-content>\r\n</ul>\r\n\r\n<ng-template #defaultButtonTemplate>\r\n  <button\r\n    sacMultilanguageMenuAnchor\r\n    class=\"btn btn-secondary dropdown-toggle\"\r\n    type=\"button\"\r\n    (click)=\"toggle()\"\r\n  ></button>\r\n</ng-template>\r\n\r\n<ng-template #defaultInputTemplate>\r\n  <input type=\"text\" class=\"form-control\" />\r\n</ng-template>\r\n\r\n<ng-template #defaultValidationTemplate></ng-template>\r\n", directives: [{ type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: SacMultilanguagemenuContainerDirective, selector: "[sacMultilanguageMenuContainer]" }, { type: SacMultilanguagemenuAnchorDirective, selector: "[sacMultilanguageMenuAnchor]" }] });
+    ], usesInheritance: true, ngImport: i0, template: "<ng-container\r\n  [ngTemplateOutlet]=\"inputtemplate || defaultInputTemplate\"\r\n></ng-container>\r\n<ng-container\r\n  [ngTemplateOutlet]=\"buttontemplate || defaultButtonTemplate\"\r\n></ng-container>\r\n<ng-container\r\n  [ngTemplateOutlet]=\"validationtemplate || defaultValidationTemplate\"\r\n></ng-container>\r\n\r\n<ul\r\n  class=\"dropdown-menu dropdown-menu-right\"\r\n  sacMultilanguageMenuContainer\r\n  [class.show]=\"isopen\"\r\n>\r\n  <ng-content></ng-content>\r\n</ul>\r\n\r\n<ng-template #defaultButtonTemplate>\r\n  <button\r\n    sacMultilanguageMenuAnchor\r\n    class=\"btn btn-secondary dropdown-toggle\"\r\n    type=\"button\"\r\n    (click)=\"toggle()\"\r\n  ></button>\r\n</ng-template>\r\n\r\n<ng-template #defaultInputTemplate>\r\n  <input type=\"text\" class=\"form-control\" />\r\n</ng-template>\r\n\r\n<ng-template #defaultValidationTemplate></ng-template>\r\n", directives: [{ type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: SacMultilanguagemenuContainerDirective, selector: "[sacMultilanguageMenuContainer]" }, { type: SacMultilanguagemenuAnchorDirective, selector: "[sacMultilanguageMenuAnchor]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacMultilanguagemenuComponent, decorators: [{
             type: Component,
             args: [{ selector: '[sac-multilanguagemenu]', providers: [
@@ -2416,7 +2534,7 @@ class SacMultilanguagemenuItemButtonComponent extends SacContextmenuItemButtonCo
     }
 }
 SacMultilanguagemenuItemButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacMultilanguagemenuItemButtonComponent, deps: [{ token: i1.SacContextmenuCommon }], target: i0.ɵɵFactoryTarget.Component });
-SacMultilanguagemenuItemButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacMultilanguagemenuItemButtonComponent, selector: "sac-multilanguagemenubutton", usesInheritance: true, ngImport: i0, template: "<li>\r\n  <button\r\n    type=\"button\"\r\n    class=\"dropdown-item\"\r\n    (click)=\"callaction($event)\"\r\n    [class.disabled]=\"isdisabled\"\r\n    [class]=\"cssclass\"\r\n    [attr.disabled]=\"isdisabled ? 'disabled' : null\"\r\n  >\r\n    <div class=\"d-flex\">\r\n      <div *ngIf=\"!isicondisabled\" style=\"min-width: 1.5rem\">\r\n        <img *ngIf=\"image\" [src]=\"image\" class=\"align-baseline\" />\r\n        <i *ngIf=\"icon\" [class]=\"iconstyle + ' ' + icon\"></i>\r\n      </div>\r\n      <div class=\"flex-grow-1\">{{ text }}</div>\r\n    </div>\r\n  </button>\r\n</li>\r\n", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+SacMultilanguagemenuItemButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacMultilanguagemenuItemButtonComponent, selector: "sac-multilanguagemenubutton", usesInheritance: true, ngImport: i0, template: "<li>\r\n  <button\r\n    type=\"button\"\r\n    class=\"dropdown-item\"\r\n    (click)=\"callaction($event)\"\r\n    [class.disabled]=\"isdisabled\"\r\n    [class]=\"cssclass\"\r\n    [attr.disabled]=\"isdisabled ? 'disabled' : null\"\r\n  >\r\n    <div class=\"d-flex\">\r\n      <div *ngIf=\"!isicondisabled\" style=\"min-width: 1.5rem\">\r\n        <img *ngIf=\"image\" [src]=\"image\" class=\"align-baseline\" />\r\n        <i *ngIf=\"icon\" [class]=\"iconstyle + ' ' + icon\"></i>\r\n      </div>\r\n      <div class=\"flex-grow-1\">{{ text }}</div>\r\n    </div>\r\n  </button>\r\n</li>\r\n", directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacMultilanguagemenuItemButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sac-multilanguagemenubutton', template: "<li>\r\n  <button\r\n    type=\"button\"\r\n    class=\"dropdown-item\"\r\n    (click)=\"callaction($event)\"\r\n    [class.disabled]=\"isdisabled\"\r\n    [class]=\"cssclass\"\r\n    [attr.disabled]=\"isdisabled ? 'disabled' : null\"\r\n  >\r\n    <div class=\"d-flex\">\r\n      <div *ngIf=\"!isicondisabled\" style=\"min-width: 1.5rem\">\r\n        <img *ngIf=\"image\" [src]=\"image\" class=\"align-baseline\" />\r\n        <i *ngIf=\"icon\" [class]=\"iconstyle + ' ' + icon\"></i>\r\n      </div>\r\n      <div class=\"flex-grow-1\">{{ text }}</div>\r\n    </div>\r\n  </button>\r\n</li>\r\n" }]
@@ -2454,7 +2572,7 @@ SacMultilanguageInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
             multi: true,
             useExisting: forwardRef(() => SacMultilanguageInputComponent),
         },
-    ], usesInheritance: true, ngImport: i0, 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", components: [{ type: SacMultilanguagemenuComponent, selector: "[sac-multilanguagemenu]", inputs: ["inputtemplate", "validationtemplate"] }, { type: SacMultilanguagemenuItemButtonComponent, selector: "sac-multilanguagemenubutton" }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: SacMultilanguagemenuAnchorDirective, selector: "[sacMultilanguageMenuAnchor]" }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "toLabelWidthCss": SacToLabelWidthCssPipe, "toLabelHeight": SacToLabelHeightPipe, "toControlWidthCss": SacToControlWidthCssPipe, "toControlHeight": SacToControlHeightPipe, "async": i2.AsyncPipe } });
+    ], usesInheritance: true, ngImport: i0, 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", components: [{ type: SacTooltipComponent, selector: "sac-tooltip" }, { type: SacMultilanguagemenuComponent, selector: "[sac-multilanguagemenu]", inputs: ["inputtemplate", "validationtemplate"] }, { type: SacMultilanguagemenuItemButtonComponent, selector: "sac-multilanguagemenubutton" }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: SacMultilanguagemenuAnchorDirective, selector: "[sacMultilanguageMenuAnchor]" }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "toLabelWidthCss": SacToLabelWidthCssPipe, "toLabelHeight": SacToLabelHeightPipe, "toControlWidthCss": SacToControlWidthCssPipe, "toControlHeight": SacToControlHeightPipe, "async": i3.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacMultilanguageInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sac-multilanguageinput', providers: [
@@ -2468,7 +2586,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => SacMultilanguageInputComponent),
                         },
-                    ], 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" }]
         }], ctorParameters: function () {
         return [{ type: SacFormLayoutDirective, decorators: [{
                         type: Host
@@ -2509,7 +2627,7 @@ SacMultilanguageInputAreaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersio
             multi: true,
             useExisting: forwardRef(() => SacMultilanguageInputAreaComponent),
         },
-    ], usesInheritance: true, ngImport: i0, 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", components: [{ type: SacMultilanguagemenuComponent, selector: "[sac-multilanguagemenu]", inputs: ["inputtemplate", "validationtemplate"] }, { type: SacMultilanguagemenuItemButtonComponent, selector: "sac-multilanguagemenubutton" }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: SacMultilanguagemenuAnchorDirective, selector: "[sacMultilanguageMenuAnchor]" }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "toLabelWidthCss": SacToLabelWidthCssPipe, "toLabelHeight": SacToLabelHeightPipe, "toControlWidthCss": SacToControlWidthCssPipe, "toControlHeight": SacToControlHeightPipe, "async": i2.AsyncPipe } });
+    ], usesInheritance: true, ngImport: i0, 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", components: [{ type: SacTooltipComponent, selector: "sac-tooltip" }, { type: SacMultilanguagemenuComponent, selector: "[sac-multilanguagemenu]", inputs: ["inputtemplate", "validationtemplate"] }, { type: SacMultilanguagemenuItemButtonComponent, selector: "sac-multilanguagemenubutton" }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: SacMultilanguagemenuAnchorDirective, selector: "[sacMultilanguageMenuAnchor]" }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "toLabelWidthCss": SacToLabelWidthCssPipe, "toLabelHeight": SacToLabelHeightPipe, "toControlWidthCss": SacToControlWidthCssPipe, "toControlHeight": SacToControlHeightPipe, "async": i3.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacMultilanguageInputAreaComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sac-multilanguageinputarea', providers: [
@@ -2523,7 +2641,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => SacMultilanguageInputAreaComponent),
                         },
-                    ], 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" }]
         }], ctorParameters: function () {
         return [{ type: SacFormLayoutDirective, decorators: [{
                         type: Host
@@ -2540,8 +2658,14 @@ SACBootstrap5MultilanguageModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion:
         SacMultilanguagemenuComponent,
         SacMultilanguagemenuAnchorDirective,
         SacMultilanguagemenuContainerDirective,
-        SacMultilanguagemenuItemButtonComponent], imports: [CommonModule, SACBootstrap5LayoutModule], exports: [SacMultilanguageInputComponent, SacMultilanguageInputAreaComponent] });
-SACBootstrap5MultilanguageModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5MultilanguageModule, imports: [[CommonModule, SACBootstrap5LayoutModule]] });
+        SacMultilanguagemenuItemButtonComponent], imports: [CommonModule,
+        SACBootstrap5LayoutModule,
+        SACBootstrap5TooltipModule], exports: [SacMultilanguageInputComponent, SacMultilanguageInputAreaComponent] });
+SACBootstrap5MultilanguageModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5MultilanguageModule, imports: [[
+            CommonModule,
+            SACBootstrap5LayoutModule,
+            SACBootstrap5TooltipModule,
+        ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5MultilanguageModule, decorators: [{
             type: NgModule,
             args: [{
@@ -2553,7 +2677,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                         SacMultilanguagemenuContainerDirective,
                         SacMultilanguagemenuItemButtonComponent,
                     ],
-                    imports: [CommonModule, SACBootstrap5LayoutModule],
+                    imports: [
+                        CommonModule,
+                        SACBootstrap5LayoutModule,
+                        SACBootstrap5TooltipModule,
+                    ],
                     exports: [SacMultilanguageInputComponent, SacMultilanguageInputAreaComponent],
                 }]
         }] });
@@ -2595,7 +2723,7 @@ SacStaticFormContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion:
             multi: true,
             useExisting: forwardRef(() => SacStaticFormContainerComponent),
         },
-    ], usesInheritance: true, ngImport: i0, 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", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "toLabelWidthCss": SacToLabelWidthCssPipe, "toLabelHeight": SacToLabelHeightPipe, "toControlWidthCss": SacToControlWidthCssPipe, "async": i2.AsyncPipe } });
+    ], usesInheritance: true, ngImport: i0, 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", components: [{ type: SacTooltipComponent, selector: "sac-tooltip" }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "toLabelWidthCss": SacToLabelWidthCssPipe, "toLabelHeight": SacToLabelHeightPipe, "toControlWidthCss": SacToControlWidthCssPipe, "async": i3.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacStaticFormContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sac-staticformcontainer', providers: [
@@ -2609,7 +2737,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => SacStaticFormContainerComponent),
                         },
-                    ], 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" }]
         }], ctorParameters: function () {
         return [{ type: SacFormLayoutDirective, decorators: [{
                         type: Host
@@ -2644,7 +2772,7 @@ SacStaticLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             multi: true,
             useExisting: forwardRef(() => SacStaticLabelComponent),
         },
-    ], usesInheritance: true, ngImport: i0, 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", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "toLabelWidthCss": SacToLabelWidthCssPipe, "toLabelHeight": SacToLabelHeightPipe, "toControlWidthCss": SacToControlWidthCssPipe, "toControlHeight": SacToControlHeightPipe } });
+    ], usesInheritance: true, ngImport: i0, 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", components: [{ type: SacTooltipComponent, selector: "sac-tooltip" }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "toLabelWidthCss": SacToLabelWidthCssPipe, "toLabelHeight": SacToLabelHeightPipe, "toControlWidthCss": SacToControlWidthCssPipe, "toControlHeight": SacToControlHeightPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacStaticLabelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sac-staticlabel', providers: [
@@ -2658,7 +2786,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => SacStaticLabelComponent),
                         },
-                    ], 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" }]
         }], ctorParameters: function () {
         return [{ type: SacFormLayoutDirective, decorators: [{
                         type: Host
@@ -2670,13 +2798,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
 class SACBootstrap5StaticLabelModule {
 }
 SACBootstrap5StaticLabelModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5StaticLabelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SACBootstrap5StaticLabelModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5StaticLabelModule, declarations: [SacStaticLabelComponent, SacStaticFormContainerComponent], imports: [CommonModule, SACBootstrap5LayoutModule], exports: [SacStaticLabelComponent, SacStaticFormContainerComponent] });
-SACBootstrap5StaticLabelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5StaticLabelModule, imports: [[CommonModule, SACBootstrap5LayoutModule]] });
+SACBootstrap5StaticLabelModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5StaticLabelModule, declarations: [SacStaticLabelComponent, SacStaticFormContainerComponent], imports: [CommonModule,
+        SACBootstrap5LayoutModule,
+        SACBootstrap5TooltipModule], exports: [SacStaticLabelComponent, SacStaticFormContainerComponent] });
+SACBootstrap5StaticLabelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5StaticLabelModule, imports: [[
+            CommonModule,
+            SACBootstrap5LayoutModule,
+            SACBootstrap5TooltipModule,
+        ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5StaticLabelModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [SacStaticLabelComponent, SacStaticFormContainerComponent],
-                    imports: [CommonModule, SACBootstrap5LayoutModule],
+                    imports: [
+                        CommonModule,
+                        SACBootstrap5LayoutModule,
+                        SACBootstrap5TooltipModule,
+                    ],
                     exports: [SacStaticLabelComponent, SacStaticFormContainerComponent],
                 }]
         }] });
@@ -2687,7 +2825,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
 class SacTabItemComponent extends SacTabItemCommon {
 }
 SacTabItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacTabItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-SacTabItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacTabItemComponent, selector: "sac-tabitem", usesInheritance: true, ngImport: i0, template: "<div [id]=\"id\" [hidden]=\"unloadwhenhidden === false && active === false\" *ngIf=\"(unloadwhenhidden === true && active === true) || unloadwhenhidden === false\" class=\"tab-pane\">\r\n  <ng-template [ngTemplateOutlet]=\"templateRef\"></ng-template>\r\n</div>\r\n", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+SacTabItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacTabItemComponent, selector: "sac-tabitem", usesInheritance: true, ngImport: i0, template: "<div [id]=\"id\" [hidden]=\"unloadwhenhidden === false && active === false\" *ngIf=\"(unloadwhenhidden === true && active === true) || unloadwhenhidden === false\" class=\"tab-pane\">\r\n  <ng-template [ngTemplateOutlet]=\"templateRef\"></ng-template>\r\n</div>\r\n", directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacTabItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sac-tabitem', template: "<div [id]=\"id\" [hidden]=\"unloadwhenhidden === false && active === false\" *ngIf=\"(unloadwhenhidden === true && active === true) || unloadwhenhidden === false\" class=\"tab-pane\">\r\n  <ng-template [ngTemplateOutlet]=\"templateRef\"></ng-template>\r\n</div>\r\n" }]
@@ -2706,7 +2844,7 @@ class SacTabComponent extends SacTabCommon {
     }
 }
 SacTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacTabComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-SacTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacTabComponent, selector: "sac-tab", queries: [{ propertyName: "_tabItems", predicate: SacTabItemComponent }], usesInheritance: true, ngImport: i0, template: "<!-- Nav tabs -->\r\n<ul class=\"nav nav-tabs\" role=\"tablist\">\r\n  <li class=\"nav-item\" *ngFor=\"let item of _tabItems\">\r\n    <a\r\n      [id]=\"GetTabItemButtonId(item.id)\"\r\n      role=\"tab\"\r\n      class=\"nav-link\"\r\n      data-toggle=\"tab\"\r\n      [ngClass]=\"{ 'active': item.active, 'disabled': item.disabled }\"\r\n      (click)=\"selectTab(item)\"\r\n      [ngStyle]=\"{'cursor': item.disabled ? 'not-allowed' : 'pointer'}\"\r\n      >{{item.label}}</a\r\n    >\r\n  </li>\r\n</ul>\r\n\r\n<!-- Tab panes -->\r\n<div class=\"tab-content pl-3 pt-2\">\r\n  <ng-content></ng-content>\r\n</div>\r\n", directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+SacTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacTabComponent, selector: "sac-tab", queries: [{ propertyName: "_tabItems", predicate: SacTabItemComponent }], usesInheritance: true, ngImport: i0, template: "<!-- Nav tabs -->\r\n<ul class=\"nav nav-tabs\" role=\"tablist\">\r\n  <li class=\"nav-item\" *ngFor=\"let item of _tabItems\">\r\n    <a\r\n      [id]=\"GetTabItemButtonId(item.id)\"\r\n      role=\"tab\"\r\n      class=\"nav-link\"\r\n      data-toggle=\"tab\"\r\n      [ngClass]=\"{ 'active': item.active, 'disabled': item.disabled }\"\r\n      (click)=\"selectTab(item)\"\r\n      [ngStyle]=\"{'cursor': item.disabled ? 'not-allowed' : 'pointer'}\"\r\n      >{{item.label}}</a\r\n    >\r\n  </li>\r\n</ul>\r\n\r\n<!-- Tab panes -->\r\n<div class=\"tab-content pl-3 pt-2\">\r\n  <ng-content></ng-content>\r\n</div>\r\n", directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacTabComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sac-tab', template: "<!-- Nav tabs -->\r\n<ul class=\"nav nav-tabs\" role=\"tablist\">\r\n  <li class=\"nav-item\" *ngFor=\"let item of _tabItems\">\r\n    <a\r\n      [id]=\"GetTabItemButtonId(item.id)\"\r\n      role=\"tab\"\r\n      class=\"nav-link\"\r\n      data-toggle=\"tab\"\r\n      [ngClass]=\"{ 'active': item.active, 'disabled': item.disabled }\"\r\n      (click)=\"selectTab(item)\"\r\n      [ngStyle]=\"{'cursor': item.disabled ? 'not-allowed' : 'pointer'}\"\r\n      >{{item.label}}</a\r\n    >\r\n  </li>\r\n</ul>\r\n\r\n<!-- Tab panes -->\r\n<div class=\"tab-content pl-3 pt-2\">\r\n  <ng-content></ng-content>\r\n</div>\r\n" }]
@@ -2765,7 +2903,7 @@ SacTinyMceComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             useExisting: forwardRef(() => SacTinyMceComponent),
             multi: true,
         },
-    ], usesInheritance: true, ngImport: i0, 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", styles: [".is-invalid{border:1px solid var(--bs-form-invalid-border-color)}\n"], components: [{ type: i2$1.EditorComponent, selector: "editor", inputs: ["cloudChannel", "apiKey", "init", "id", "initialValue", "outputFormat", "inline", "tagName", "plugins", "toolbar", "modelEvents", "allowedEvents", "ignoreEvents", "disabled"] }, { type: SacDialogComponent, selector: "sac-dialog" }, { type: SacBrowserComponent, selector: "sac-filebrowser" }, { type: SacButtonComponent, selector: "sac-button" }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i9.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "toLabelWidthCss": SacToLabelWidthCssPipe, "toLabelHeight": SacToLabelHeightPipe, "toControlWidthCss": SacToControlWidthCssPipe, "async": i2.AsyncPipe } });
+    ], usesInheritance: true, ngImport: i0, 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", styles: [".is-invalid{border:1px solid var(--bs-form-invalid-border-color)}\n"], components: [{ type: SacTooltipComponent, selector: "sac-tooltip" }, { type: i3$1.EditorComponent, selector: "editor", inputs: ["cloudChannel", "apiKey", "init", "id", "initialValue", "outputFormat", "inline", "tagName", "plugins", "toolbar", "modelEvents", "allowedEvents", "ignoreEvents", "disabled"] }, { type: SacDialogComponent, selector: "sac-dialog" }, { type: SacBrowserComponent, selector: "sac-filebrowser" }, { type: SacButtonComponent, selector: "sac-button" }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i9.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "toLabelWidthCss": SacToLabelWidthCssPipe, "toLabelHeight": SacToLabelHeightPipe, "toControlWidthCss": SacToControlWidthCssPipe, "async": i3.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacTinyMceComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sac-tinymce', providers: [
@@ -2779,7 +2917,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                             useExisting: forwardRef(() => SacTinyMceComponent),
                             multi: true,
                         },
-                    ], 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", styles: [".is-invalid{border:1px solid var(--bs-form-invalid-border-color)}\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", styles: [".is-invalid{border:1px solid var(--bs-form-invalid-border-color)}\n"] }]
         }], ctorParameters: function () {
         return [{ type: SacFormLayoutDirective, decorators: [{
                         type: Host
@@ -2797,7 +2935,8 @@ SACBootstrap5TinyMceModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.
         SACBootstrap5ButtonModule,
         SACBootstrap5DialogModule,
         SACBootstrap5BrowserModule,
-        SACBootstrap5LayoutModule], exports: [SacTinyMceComponent] });
+        SACBootstrap5LayoutModule,
+        SACBootstrap5TooltipModule], exports: [SacTinyMceComponent] });
 SACBootstrap5TinyMceModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5TinyMceModule, imports: [[
             CommonModule,
             FormsModule,
@@ -2806,6 +2945,7 @@ SACBootstrap5TinyMceModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.
             SACBootstrap5DialogModule,
             SACBootstrap5BrowserModule,
             SACBootstrap5LayoutModule,
+            SACBootstrap5TooltipModule,
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap5TinyMceModule, decorators: [{
             type: NgModule,
@@ -2819,6 +2959,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                         SACBootstrap5DialogModule,
                         SACBootstrap5BrowserModule,
                         SACBootstrap5LayoutModule,
+                        SACBootstrap5TooltipModule,
                     ],
                     exports: [SacTinyMceComponent],
                 }]
@@ -2845,7 +2986,7 @@ SacValidationSummaryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "1
             multi: true,
             useExisting: SacValidationSummaryComponent,
         },
-    ], usesInheritance: true, ngImport: i0, template: "<div class=\"alert alert-danger\" role=\"alert\" *ngIf=\"hasErrors\">\r\n  <ul class=\"mb-0\">\r\n    <li *ngFor=\"let error of formErrors\">{{error | async}}</li>\r\n  </ul>\r\n</div>\r\n", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i2.AsyncPipe }, viewProviders: [{ provide: ControlContainer, useExisting: SacFormDirective }] });
+    ], usesInheritance: true, ngImport: i0, template: "<div class=\"alert alert-danger\" role=\"alert\" *ngIf=\"hasErrors\">\r\n  <ul class=\"mb-0\">\r\n    <li *ngFor=\"let error of formErrors\">{{error | async}}</li>\r\n  </ul>\r\n</div>\r\n", directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i3.AsyncPipe }, viewProviders: [{ provide: ControlContainer, useExisting: SacFormDirective }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacValidationSummaryComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sac-validationsummary', providers: [
@@ -2908,7 +3049,7 @@ class SacWizardComponent extends SacWizardCommon {
 SacWizardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacWizardComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
 SacWizardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacWizardComponent, selector: "sac-wizard", providers: [
         { provide: NG_VALUE_ACCESSOR, multi: true, useExisting: SacWizardComponent },
-    ], queries: [{ propertyName: "_wizardItems", predicate: SacWizardItemComponent }], usesInheritance: true, ngImport: i0, template: "<ul class=\"nav nav-wizard\" role=\"tablist\">\r\n  <li *ngFor=\"let item of _wizardItems\" class=\"nav-item\" [ngClass]=\"{ 'active': item._active, 'disabled': item._disabled, 'success': item._iscomplete }\"\r\n      [ngStyle]=\"{'cursor': item._disabled ? 'not-allowed' : 'pointer'}\">\r\n    <a role=\"tab\" (click)=\"selectStep(item)\">\r\n      <div class=\"circle\">\r\n        <span class=\"step\"></span>\r\n      </div>\r\n    </a>\r\n    <div class=\"info\">\r\n      <a (click)=\"selectStep(item)\">{{item._label}}</a>\r\n    </div>\r\n  </li>\r\n</ul>\r\n", directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    ], queries: [{ propertyName: "_wizardItems", predicate: SacWizardItemComponent }], usesInheritance: true, ngImport: i0, template: "<ul class=\"nav nav-wizard\" role=\"tablist\">\r\n  <li *ngFor=\"let item of _wizardItems\" class=\"nav-item\" [ngClass]=\"{ 'active': item._active, 'disabled': item._disabled, 'success': item._iscomplete }\"\r\n      [ngStyle]=\"{'cursor': item._disabled ? 'not-allowed' : 'pointer'}\">\r\n    <a role=\"tab\" (click)=\"selectStep(item)\">\r\n      <div class=\"circle\">\r\n        <span class=\"step\"></span>\r\n      </div>\r\n    </a>\r\n    <div class=\"info\">\r\n      <a (click)=\"selectStep(item)\">{{item._label}}</a>\r\n    </div>\r\n  </li>\r\n</ul>\r\n", directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacWizardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sac-wizard', providers: [
@@ -2941,5 +3082,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
  * 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, SacBrowserComponent, SacButtonComponent, SacCheckboxComponent, SacConfirmComponent, SacContextmenuAnchorDirective, SacContextmenuComponent, SacContextmenuItemButtonComponent, SacContextmenuItemSplitterComponent, SacDateComponent, SacDateSelectorComponent, SacDateTimeComponent, SacDialogComponent, SacDropdownComponent, SacDropdownOptionDirective, SacDropzoneMultipleComponent, SacDropzoneSingleComponent, SacFormDirective, SacFormLayoutDirective, SacGridButtonComponent, SacGridColumnActionComponent, SacGridColumnComponent, SacGridComponent, SacGridImageComponent, SacInheritFormDirective, SacInputAreaComponent, SacInputComponent, SacInputCurrencyComponent, SacInputDecimalComponent, SacInputEmailComponent, SacInputIntegerComponent, SacInputPasswordComponent, SacInputSearchComponent, SacListboxComponent, SacListboxOptionDirective, SacMultilanguageInputAreaComponent, SacMultilanguageInputComponent, SacPagingComponent, SacRadiobuttonComponent, SacRadiobuttonsComponent, SacStaticFormContainerComponent, SacStaticLabelComponent, SacTabComponent, SacTabItemComponent, SacTimeComponent, SacTinyMceComponent, SacToControlHeightPipe, SacToControlWidthCssPipe, SacToLabelHeightPipe, SacToLabelWidthCssPipe, SacUploadComponent, SacUploadMultipleComponent, SacValidationSummaryComponent, SacWizardComponent, SacWizardItemComponent, ServiceConfirm };
+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, SacBrowserComponent, SacButtonComponent, SacCheckboxComponent, SacConfirmComponent, SacContextmenuAnchorDirective, SacContextmenuComponent, SacContextmenuItemButtonComponent, SacContextmenuItemSplitterComponent, SacDateComponent, SacDateSelectorComponent, SacDateTimeComponent, SacDialogComponent, SacDropdownComponent, SacDropdownOptionDirective, SacDropzoneMultipleComponent, SacDropzoneSingleComponent, SacFormDirective, SacFormLayoutDirective, SacGridButtonComponent, SacGridColumnActionComponent, SacGridColumnComponent, SacGridComponent, SacGridImageComponent, SacInheritFormDirective, SacInputAreaComponent, SacInputComponent, SacInputCurrencyComponent, SacInputDecimalComponent, SacInputEmailComponent, SacInputIntegerComponent, SacInputPasswordComponent, SacInputSearchComponent, SacListboxComponent, SacListboxOptionDirective, SacMultilanguageInputAreaComponent, SacMultilanguageInputComponent, SacPagingComponent, SacRadiobuttonComponent, SacRadiobuttonsComponent, SacStaticFormContainerComponent, SacStaticLabelComponent, SacTabComponent, SacTabItemComponent, SacTimeComponent, SacTinyMceComponent, SacToControlHeightPipe, SacToControlWidthCssPipe, SacToLabelHeightPipe, SacToLabelWidthCssPipe, SacTooltipComponent, SacUploadComponent, SacUploadMultipleComponent, SacValidationSummaryComponent, SacWizardComponent, SacWizardItemComponent, ServiceConfirm };
 //# sourceMappingURL=simpleangularcontrols-sac-bootstrap5.mjs.map