@simpleangularcontrols/sac-bootstrap3 13.0.0-rc.19 → 13.0.0-rc.20

package/fesm2020/simpleangularcontrols-sac-bootstrap3.mjs

@@ -1,42 +1,39 @@
 import * as i0 from '@angular/core';
-import { Component, ViewEncapsulation, NgModule, Directive, Pipe, forwardRef, Host, Optional, Input, ComponentFactoryResolver, Injectable, Inject, TemplateRef, ContentChild, ContentChildren, HostBinding, SkipSelf } from '@angular/core';
-import { SacButtonCommon, SacFormLayoutCommon, ControlHeight, SacTooltipCommon, SacCheckboxCommon, SacRadiobuttonsCommon, SacRadiobuttonCommon, SacDialogCommon, SacConfirmCommon, ServiceConfirmCommon, isDefined, SacConfirmButton, SacContextMenuContrainerCommon, SacContextmenuAnchorCommon, SacContextmenuCommon, SacContextmenuItemButtonCommon, SacContextmenuItemCommon, SacDateSelectorCommon, SacDateCommon, SacDateTimeCommon, SacTimeCommon, SacPagingCommon, SacGridCommon, SacGridButtonCommon, SacGridColumnCommon, SacGridColumnBaseCommon, SacGridColumnActionCommon, SacGridImageCommon, SacInputCommon, SacInputAreaCommon, SacInputCurrencyCommon, SacInputDecimalCommon, SacInputEmailCommon, SacInputIntegerCommon, SacInputPasswordCommon, SacInputSearchCommon, SacDropdownCommon, SacDropdownOptionCommon, SacListboxCommon, SACCommonListboxOptionModule, SacStaticFormContainerCommon, SacStaticLabelCommon, SacTabItemCommon, SacTabCommon, SacTinyMceCommon, SacTreeviewCommon, SacDropzoneMultipleCommon, SacDropzoneSingleCommon, SacUploadSingleCommon, SacUploadMultipleCommon, SacFormCommon, SacValidationSummaryCommon, SacWizardItemCommon, SacWizardCommon } from '@simpleangularcontrols/sac-common';
+import { Component, ViewEncapsulation, NgModule, Directive, Pipe, forwardRef, Host, Optional, Input, ComponentFactoryResolver, Injectable, Inject, TemplateRef, ContentChild, InjectionToken, ContentChildren, HostBinding, SkipSelf } from '@angular/core';
+import * as i5 from '@simpleangularcontrols/sac-common';
+import { SacButtonCommon, SACCommonUtliltiesModule, SacFormLayoutCommon, ControlHeight, SacTooltipCommon, SacCheckboxCommon, SacRadiobuttonsCommon, SacRadiobuttonCommon, SacDialogCommon, SacConfirmCommon, ServiceConfirmCommon, isDefined, SacConfirmButton, SacContextMenuContrainerCommon, SacContextmenuAnchorCommon, SacContextmenuCommon, SacContextmenuItemButtonCommon, SacContextmenuItemCommon, SacDateSelectorCommon, SacDateCommon, SacDateTimeCommon, SacTimeCommon, SacPagingCommon, SacGridCommon, SacGridButtonCommon, SacGridColumnCommon, SacGridColumnBaseCommon, SacGridColumnActionCommon, SacGridImageCommon, SacInputCommon, SacInputAreaCommon, SacInputCurrencyCommon, SacInputDecimalCommon, SacInputEmailCommon, SacInputIntegerCommon, SacInputPasswordCommon, SacInputSearchCommon, SacDropdownOptionCommon, SacListboxOptionCommon, SacDropdownCommon, SacListboxCommon, SACCommonListboxOptionModule, SacStaticFormContainerCommon, SacStaticLabelCommon, SacTabItemCommon, SacTabCommon, SacTinyMceCommon, SacTreeviewCommon, SacDropzoneMultipleCommon, SacDropzoneSingleCommon, SacUploadSingleCommon, SacUploadMultipleCommon, SacFormCommon, SacValidationSummaryCommon, SacWizardItemCommon, SacWizardCommon } from '@simpleangularcontrols/sac-common';
 import * as i3 from '@angular/common';
 import { CommonModule, DOCUMENT } from '@angular/common';
 import * as i2 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule, ControlContainer, NgForm } from '@angular/forms';
+import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule, NgForm, ControlContainer } from '@angular/forms';
 import { forkJoin } from 'rxjs';
 import { take } from 'rxjs/operators';
-import * as i5 from 'angular-imask';
-import { IMaskModule } from 'angular-imask';
 import * as moment_ from 'moment';
+import * as i5$1 from 'angular-imask';
+import { IMaskModule } from 'angular-imask';
 import * as i3$1 from '@tinymce/tinymce-angular';
 import { EditorModule } from '@tinymce/tinymce-angular';
 
 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: "<a\n  [id]=\"name\"\n  class=\"btn\"\n  [class.btn-primary]=\"role === 'primary'\"\n  [class.btn-secondary]=\"role === 'secondary'\"\n  [class.btn-success]=\"role === 'success'\"\n  [class.btn-danger]=\"role === 'danger'\"\n  [class.btn-warning]=\"role === 'warning'\"\n  [class.btn-info]=\"role === 'info'\"\n  [class.btn-default]=\"role === 'default'\"\n  [class.btn-link]=\"role === 'link'\"\n  [attr.disabled]=\"_isdisabled ? 'disabled' : null\"\n  (click)=\"buttonClick()\"\n>\n  <i\n    *ngIf=\"isloading\"\n    class=\"\"\n    role=\"status\"\n    aria-hidden=\"true\"\n    class=\"glyphicon glyphicon-repeat spin\"\n    [ngStyle]=\"{ 'margin-right': text ? '0.5rem': null}\"\n  ></i>\n  <i\n    *ngIf=\"!isloading && icon !== ''\"\n    [ngClass]=\"icon\"\n    [ngStyle]=\"{ 'margin-right': text ? '0.5rem': null}\"\n  ></i>\n  {{text}}\n</a>\n", styles: ["sac-button+sac-button{margin-left:5px}\n", ".spin{animation:spin 1.5s infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None });
+SacButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacButtonComponent, selector: "sac-button", usesInheritance: true, ngImport: i0, template: "<a\n    [id]=\"name\"\n    class=\"btn\"\n    [class.btn-primary]=\"role === 'primary'\"\n    [class.btn-secondary]=\"role === 'secondary'\"\n    [class.btn-success]=\"role === 'success'\"\n    [class.btn-danger]=\"role === 'danger'\"\n    [class.btn-warning]=\"role === 'warning'\"\n    [class.btn-info]=\"role === 'info'\"\n    [class.btn-default]=\"role === 'default'\"\n    [class.btn-link]=\"role === 'link'\"\n    [attr.disabled]=\"_isdisabled || isloading ? 'disabled' : null\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\"\n    (click)=\"buttonClick()\">\n    <i\n        *ngIf=\"isloading\"\n        role=\"status\"\n        aria-hidden=\"true\"\n        class=\"glyphicon glyphicon-repeat spin\"\n        [ngStyle]=\"{ 'margin-right': text ? '0.5rem' : null }\"></i>\n    <i\n        *ngIf=\"!isloading && icon !== ''\"\n        [ngClass]=\"icon\"\n        [ngStyle]=\"{ 'margin-right': text ? '0.5rem' : null }\"></i\n    >{{ text }}\n</a>\n", styles: ["sac-button+sac-button{margin-left:5px}\n", ".spin{animation:spin 1.5s infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "testingattribute": i5.SacTestingAttributePipe }, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sac-button', styles: ['sac-button+sac-button {margin-left: 5px}', '.spin { animation: spin 1.5s infinite; } @keyframes spin { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }'], encapsulation: ViewEncapsulation.None, template: "<a\n  [id]=\"name\"\n  class=\"btn\"\n  [class.btn-primary]=\"role === 'primary'\"\n  [class.btn-secondary]=\"role === 'secondary'\"\n  [class.btn-success]=\"role === 'success'\"\n  [class.btn-danger]=\"role === 'danger'\"\n  [class.btn-warning]=\"role === 'warning'\"\n  [class.btn-info]=\"role === 'info'\"\n  [class.btn-default]=\"role === 'default'\"\n  [class.btn-link]=\"role === 'link'\"\n  [attr.disabled]=\"_isdisabled ? 'disabled' : null\"\n  (click)=\"buttonClick()\"\n>\n  <i\n    *ngIf=\"isloading\"\n    class=\"\"\n    role=\"status\"\n    aria-hidden=\"true\"\n    class=\"glyphicon glyphicon-repeat spin\"\n    [ngStyle]=\"{ 'margin-right': text ? '0.5rem': null}\"\n  ></i>\n  <i\n    *ngIf=\"!isloading && icon !== ''\"\n    [ngClass]=\"icon\"\n    [ngStyle]=\"{ 'margin-right': text ? '0.5rem': null}\"\n  ></i>\n  {{text}}\n</a>\n" }]
+            args: [{ selector: 'sac-button', styles: ['sac-button+sac-button {margin-left: 5px}', '.spin { animation: spin 1.5s infinite; } @keyframes spin { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }'], encapsulation: ViewEncapsulation.None, template: "<a\n    [id]=\"name\"\n    class=\"btn\"\n    [class.btn-primary]=\"role === 'primary'\"\n    [class.btn-secondary]=\"role === 'secondary'\"\n    [class.btn-success]=\"role === 'success'\"\n    [class.btn-danger]=\"role === 'danger'\"\n    [class.btn-warning]=\"role === 'warning'\"\n    [class.btn-info]=\"role === 'info'\"\n    [class.btn-default]=\"role === 'default'\"\n    [class.btn-link]=\"role === 'link'\"\n    [attr.disabled]=\"_isdisabled || isloading ? 'disabled' : null\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\"\n    (click)=\"buttonClick()\">\n    <i\n        *ngIf=\"isloading\"\n        role=\"status\"\n        aria-hidden=\"true\"\n        class=\"glyphicon glyphicon-repeat spin\"\n        [ngStyle]=\"{ 'margin-right': text ? '0.5rem' : null }\"></i>\n    <i\n        *ngIf=\"!isloading && icon !== ''\"\n        [ngClass]=\"icon\"\n        [ngStyle]=\"{ 'margin-right': text ? '0.5rem' : null }\"></i\n    >{{ text }}\n</a>\n" }]
         }] });
 
 class SACBootstrap3ButtonModule {
 }
 SACBootstrap3ButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3ButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SACBootstrap3ButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3ButtonModule, declarations: [SacButtonComponent], imports: [CommonModule], exports: [SacButtonComponent] });
-SACBootstrap3ButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3ButtonModule, imports: [[
-            CommonModule
-        ]] });
+SACBootstrap3ButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3ButtonModule, declarations: [SacButtonComponent], imports: [CommonModule, SACCommonUtliltiesModule], exports: [SacButtonComponent] });
+SACBootstrap3ButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3ButtonModule, imports: [[CommonModule, SACCommonUtliltiesModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3ButtonModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [SacButtonComponent],
-                    imports: [
-                        CommonModule
-                    ],
-                    exports: [SacButtonComponent]
+                    imports: [CommonModule, SACCommonUtliltiesModule],
+                    exports: [SacButtonComponent],
                 }]
         }] });
 
@@ -267,22 +264,22 @@ class SacTooltipComponent extends SacTooltipCommon {
     }
 }
 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\">\n    <div\n        #container\n        (mouseenter)=\"ShowTooltip()\"\n        (mouseleave)=\"HideTooltip()\"\n        [style.display]=\"inlinemode ? 'inline' : null\">\n        <ng-content></ng-content>\n    </div>\n    <div\n        *ngIf=\"IsTooltipVisible()\"\n        #tooltip>\n        <div\n            [style.visibility]=\"IsTooltipContentVisible ? 'visible' : 'hidden'\"\n            class=\"tooltip in\"\n            style=\"display: block\"\n            [style.left.px]=\"LeftPos\"\n            [style.top.px]=\"TopPos\"\n            [class.top]=\"GetTooltipPosition() === TooltipPosition.top\"\n            [class.left]=\"GetTooltipPosition() === TooltipPosition.left\"\n            [class.right]=\"GetTooltipPosition() === TooltipPosition.right\"\n            [class.bottom]=\"GetTooltipPosition() === TooltipPosition.bottom\">\n            <div class=\"tooltip-arrow\"></div>\n            <div class=\"tooltip-inner\">{{ tooltiptext }}</div>\n        </div>\n    </div>\n</div>\n", directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+SacTooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacTooltipComponent, selector: "sac-tooltip", usesInheritance: true, ngImport: i0, template: "<div\n    [style.display]=\"inlinemode ? 'inline' : null\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <div\n        #container\n        (mouseenter)=\"ShowTooltip()\"\n        (mouseleave)=\"HideTooltip()\"\n        [style.display]=\"inlinemode ? 'inline' : null\">\n        <ng-content></ng-content>\n    </div>\n    <div\n        *ngIf=\"IsTooltipVisible()\"\n        #tooltip>\n        <div\n            [style.visibility]=\"IsTooltipContentVisible ? 'visible' : 'hidden'\"\n            class=\"tooltip in\"\n            style=\"display: block\"\n            [style.left.px]=\"LeftPos\"\n            [style.top.px]=\"TopPos\"\n            [class.top]=\"GetTooltipPosition() === TooltipPosition.top\"\n            [class.left]=\"GetTooltipPosition() === TooltipPosition.left\"\n            [class.right]=\"GetTooltipPosition() === TooltipPosition.right\"\n            [class.bottom]=\"GetTooltipPosition() === TooltipPosition.bottom\">\n            <div class=\"tooltip-arrow\"></div>\n            <div class=\"tooltip-inner\">{{ tooltiptext }}</div>\n        </div>\n    </div>\n</div>\n", directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "testingattribute": i5.SacTestingAttributePipe } });
 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\">\n    <div\n        #container\n        (mouseenter)=\"ShowTooltip()\"\n        (mouseleave)=\"HideTooltip()\"\n        [style.display]=\"inlinemode ? 'inline' : null\">\n        <ng-content></ng-content>\n    </div>\n    <div\n        *ngIf=\"IsTooltipVisible()\"\n        #tooltip>\n        <div\n            [style.visibility]=\"IsTooltipContentVisible ? 'visible' : 'hidden'\"\n            class=\"tooltip in\"\n            style=\"display: block\"\n            [style.left.px]=\"LeftPos\"\n            [style.top.px]=\"TopPos\"\n            [class.top]=\"GetTooltipPosition() === TooltipPosition.top\"\n            [class.left]=\"GetTooltipPosition() === TooltipPosition.left\"\n            [class.right]=\"GetTooltipPosition() === TooltipPosition.right\"\n            [class.bottom]=\"GetTooltipPosition() === TooltipPosition.bottom\">\n            <div class=\"tooltip-arrow\"></div>\n            <div class=\"tooltip-inner\">{{ tooltiptext }}</div>\n        </div>\n    </div>\n</div>\n" }]
+            args: [{ selector: 'sac-tooltip', template: "<div\n    [style.display]=\"inlinemode ? 'inline' : null\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <div\n        #container\n        (mouseenter)=\"ShowTooltip()\"\n        (mouseleave)=\"HideTooltip()\"\n        [style.display]=\"inlinemode ? 'inline' : null\">\n        <ng-content></ng-content>\n    </div>\n    <div\n        *ngIf=\"IsTooltipVisible()\"\n        #tooltip>\n        <div\n            [style.visibility]=\"IsTooltipContentVisible ? 'visible' : 'hidden'\"\n            class=\"tooltip in\"\n            style=\"display: block\"\n            [style.left.px]=\"LeftPos\"\n            [style.top.px]=\"TopPos\"\n            [class.top]=\"GetTooltipPosition() === TooltipPosition.top\"\n            [class.left]=\"GetTooltipPosition() === TooltipPosition.left\"\n            [class.right]=\"GetTooltipPosition() === TooltipPosition.right\"\n            [class.bottom]=\"GetTooltipPosition() === TooltipPosition.bottom\">\n            <div class=\"tooltip-arrow\"></div>\n            <div class=\"tooltip-inner\">{{ tooltiptext }}</div>\n        </div>\n    </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; } });
 
 class SACBootstrap3TooltipModule {
 }
 SACBootstrap3TooltipModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3TooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SACBootstrap3TooltipModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3TooltipModule, declarations: [SacTooltipComponent], imports: [CommonModule], exports: [SacTooltipComponent] });
-SACBootstrap3TooltipModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3TooltipModule, imports: [[CommonModule]] });
+SACBootstrap3TooltipModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3TooltipModule, declarations: [SacTooltipComponent], imports: [CommonModule, SACCommonUtliltiesModule], exports: [SacTooltipComponent] });
+SACBootstrap3TooltipModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3TooltipModule, imports: [[CommonModule, SACCommonUtliltiesModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3TooltipModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [SacTooltipComponent],
-                    imports: [CommonModule],
+                    imports: [CommonModule, SACCommonUtliltiesModule],
                     exports: [SacTooltipComponent],
                 }]
         }] });
@@ -310,7 +307,7 @@ SacCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             useExisting: forwardRef(() => SacCheckboxComponent),
             multi: true,
         },
-    ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"row\"\n    [class.form-group]=\"!stacked\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\">\n    <label\n        *ngIf=\"!disablelabel && !stacked\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[!disablelabel && !stacked ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[!disablelabel && !stacked ? (this.labelSizes | toControlWidthCss) : '']\">\n        <div\n            class=\"checkbox\"\n            [class.checkbox-sm]=\"componentHeight === ControlHeight.Small\"\n            [class.checkbox-lg]=\"componentHeight === ControlHeight.Large\">\n            <label for=\"{{ name }}\">\n                <input\n                    id=\"{{ name }}\"\n                    name=\"{{ name }}\"\n                    type=\"checkbox\"\n                    class=\"visible-checkbox\"\n                    [checked]=\"value\"\n                    [disabled]=\"isdisabled\"\n                    (blur)=\"onTouch()\"\n                    (change)=\"setValue($event.target.checked)\" />\n                <ng-container *ngIf=\"checkboxtext\">\n                    <span>{{ checkboxtext }}</span>\n                </ng-container>\n            </label>\n\n            <div\n                *ngIf=\"helptextmode === 'tooltip' && helptext && (disablelabel || stacked)\"\n                class=\"form-control-static\"\n                style=\"display: inline\">\n                <sac-tooltip\n                    [tooltiptext]=\"helptext\"\n                    [inlinemode]=\"true\">\n                    <span\n                        [class]=\"HelptextTooltipIcon\"\n                        style=\"margin-left: 5px; margin-right: 5px\">\n                    </span>\n                </sac-tooltip>\n            </div>\n        </div>\n        <p\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"help-block\">\n            {{ helptext }}\n        </p>\n    </div>\n</div>\n", styles: [".checkbox-sm{padding-top:2px}.checkbox-sm input{height:12px;width:12px;margin-top:2px}.checkbox-sm label{font-size:12px;padding-top:2px}.checkbox-lg input{height:20px;width:20px;margin-top:2px}.checkbox-lg label{font-size:18px;padding-top:4px}\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: { "toLabelHeight": SacToLabelHeightPipe, "toLabelWidthCss": SacToLabelWidthCssPipe, "toControlWidthCss": SacToControlWidthCssPipe } });
+    ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"row\"\n    [class.form-group]=\"!stacked\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\"\n    [ngClass]=\"componentHeight | toLabelHeight\">\n    <label\n        *ngIf=\"!disablelabel && !stacked\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[!disablelabel && !stacked ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[!disablelabel && !stacked ? (this.labelSizes | toControlWidthCss) : '']\">\n        <div\n            class=\"checkbox\"\n            [class.checkbox-sm]=\"componentHeight === ControlHeight.Small\"\n            [class.checkbox-lg]=\"componentHeight === ControlHeight.Large\">\n            <label for=\"{{ name }}\">\n                <input\n                    id=\"{{ name }}\"\n                    name=\"{{ name }}\"\n                    type=\"checkbox\"\n                    class=\"visible-checkbox\"\n                    [checked]=\"value\"\n                    [disabled]=\"isdisabled\"\n                    (blur)=\"onTouch()\"\n                    (change)=\"setValue($event.target.checked)\" />\n                <ng-container *ngIf=\"checkboxtext\">\n                    <span>{{ checkboxtext }}</span>\n                </ng-container>\n            </label>\n\n            <div\n                *ngIf=\"helptextmode === 'tooltip' && helptext && (disablelabel || stacked)\"\n                class=\"form-control-static\"\n                style=\"display: inline\">\n                <sac-tooltip\n                    [tooltiptext]=\"helptext\"\n                    [inlinemode]=\"true\">\n                    <span\n                        [class]=\"HelptextTooltipIcon\"\n                        style=\"margin-left: 5px; margin-right: 5px\">\n                    </span>\n                </sac-tooltip>\n            </div>\n        </div>\n        <p\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"help-block\">\n            {{ helptext }}\n        </p>\n    </div>\n</div>\n", styles: [".checkbox-sm{padding-top:2px}.checkbox-sm input{height:12px;width:12px;margin-top:2px}.checkbox-sm label{font-size:12px;padding-top:2px}.checkbox-lg input{height:20px;width:20px;margin-top:2px}.checkbox-lg label{font-size:18px;padding-top:4px}\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: { "testingattribute": i5.SacTestingAttributePipe, "toLabelHeight": SacToLabelHeightPipe, "toLabelWidthCss": SacToLabelWidthCssPipe, "toControlWidthCss": SacToControlWidthCssPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacCheckboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sac-checkbox', providers: [
@@ -324,7 +321,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                             useExisting: forwardRef(() => SacCheckboxComponent),
                             multi: true,
                         },
-                    ], template: "<div\n    class=\"row\"\n    [class.form-group]=\"!stacked\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\">\n    <label\n        *ngIf=\"!disablelabel && !stacked\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[!disablelabel && !stacked ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[!disablelabel && !stacked ? (this.labelSizes | toControlWidthCss) : '']\">\n        <div\n            class=\"checkbox\"\n            [class.checkbox-sm]=\"componentHeight === ControlHeight.Small\"\n            [class.checkbox-lg]=\"componentHeight === ControlHeight.Large\">\n            <label for=\"{{ name }}\">\n                <input\n                    id=\"{{ name }}\"\n                    name=\"{{ name }}\"\n                    type=\"checkbox\"\n                    class=\"visible-checkbox\"\n                    [checked]=\"value\"\n                    [disabled]=\"isdisabled\"\n                    (blur)=\"onTouch()\"\n                    (change)=\"setValue($event.target.checked)\" />\n                <ng-container *ngIf=\"checkboxtext\">\n                    <span>{{ checkboxtext }}</span>\n                </ng-container>\n            </label>\n\n            <div\n                *ngIf=\"helptextmode === 'tooltip' && helptext && (disablelabel || stacked)\"\n                class=\"form-control-static\"\n                style=\"display: inline\">\n                <sac-tooltip\n                    [tooltiptext]=\"helptext\"\n                    [inlinemode]=\"true\">\n                    <span\n                        [class]=\"HelptextTooltipIcon\"\n                        style=\"margin-left: 5px; margin-right: 5px\">\n                    </span>\n                </sac-tooltip>\n            </div>\n        </div>\n        <p\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"help-block\">\n            {{ helptext }}\n        </p>\n    </div>\n</div>\n", styles: [".checkbox-sm{padding-top:2px}.checkbox-sm input{height:12px;width:12px;margin-top:2px}.checkbox-sm label{font-size:12px;padding-top:2px}.checkbox-lg input{height:20px;width:20px;margin-top:2px}.checkbox-lg label{font-size:18px;padding-top:4px}\n"] }]
+                    ], template: "<div\n    class=\"row\"\n    [class.form-group]=\"!stacked\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\"\n    [ngClass]=\"componentHeight | toLabelHeight\">\n    <label\n        *ngIf=\"!disablelabel && !stacked\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[!disablelabel && !stacked ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[!disablelabel && !stacked ? (this.labelSizes | toControlWidthCss) : '']\">\n        <div\n            class=\"checkbox\"\n            [class.checkbox-sm]=\"componentHeight === ControlHeight.Small\"\n            [class.checkbox-lg]=\"componentHeight === ControlHeight.Large\">\n            <label for=\"{{ name }}\">\n                <input\n                    id=\"{{ name }}\"\n                    name=\"{{ name }}\"\n                    type=\"checkbox\"\n                    class=\"visible-checkbox\"\n                    [checked]=\"value\"\n                    [disabled]=\"isdisabled\"\n                    (blur)=\"onTouch()\"\n                    (change)=\"setValue($event.target.checked)\" />\n                <ng-container *ngIf=\"checkboxtext\">\n                    <span>{{ checkboxtext }}</span>\n                </ng-container>\n            </label>\n\n            <div\n                *ngIf=\"helptextmode === 'tooltip' && helptext && (disablelabel || stacked)\"\n                class=\"form-control-static\"\n                style=\"display: inline\">\n                <sac-tooltip\n                    [tooltiptext]=\"helptext\"\n                    [inlinemode]=\"true\">\n                    <span\n                        [class]=\"HelptextTooltipIcon\"\n                        style=\"margin-left: 5px; margin-right: 5px\">\n                    </span>\n                </sac-tooltip>\n            </div>\n        </div>\n        <p\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"help-block\">\n            {{ helptext }}\n        </p>\n    </div>\n</div>\n", styles: [".checkbox-sm{padding-top:2px}.checkbox-sm input{height:12px;width:12px;margin-top:2px}.checkbox-sm label{font-size:12px;padding-top:2px}.checkbox-lg input{height:20px;width:20px;margin-top:2px}.checkbox-lg label{font-size:18px;padding-top:4px}\n"] }]
         }], ctorParameters: function () { return [{ type: SacFormLayoutDirective, decorators: [{
                     type: Host
                 }, {
@@ -354,7 +351,7 @@ SacRadiobuttonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
             useExisting: forwardRef(() => SacRadiobuttonsComponent),
             multi: true,
         },
-    ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\">\n    <label\n        *ngIf=\"disablelabel === false\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\n        <div>\n            <ng-content></ng-content>\n        </div>\n        <p\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"help-block\">\n            {{ helptext }}\n        </p>\n    </div>\n</div>\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: { "toLabelHeight": SacToLabelHeightPipe, "toLabelWidthCss": SacToLabelWidthCssPipe, "toControlWidthCss": SacToControlWidthCssPipe } });
+    ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <label\n        *ngIf=\"disablelabel === false\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\n        <div>\n            <ng-content></ng-content>\n        </div>\n        <p\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"help-block\"\n            >{{ helptext }}</p\n        >\n    </div>\n</div>\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: { "toLabelHeight": SacToLabelHeightPipe, "testingattribute": i5.SacTestingAttributePipe, "toLabelWidthCss": SacToLabelWidthCssPipe, "toControlWidthCss": SacToControlWidthCssPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacRadiobuttonsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sac-radiobuttons', providers: [
@@ -368,7 +365,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                             useExisting: forwardRef(() => SacRadiobuttonsComponent),
                             multi: true,
                         },
-                    ], template: "<div\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\">\n    <label\n        *ngIf=\"disablelabel === false\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\n        <div>\n            <ng-content></ng-content>\n        </div>\n        <p\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"help-block\">\n            {{ helptext }}\n        </p>\n    </div>\n</div>\n" }]
+                    ], template: "<div\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <label\n        *ngIf=\"disablelabel === false\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\n        <div>\n            <ng-content></ng-content>\n        </div>\n        <p\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"help-block\"\n            >{{ helptext }}</p\n        >\n    </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: SacFormLayoutDirective, decorators: [{
                     type: Host
                 }, {
@@ -382,10 +379,10 @@ 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 }, { token: SacFormLayoutDirective, host: true, optional: true }, { token: i0.Injector }], 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\n    class=\"radio\"\n    *ngIf=\"hidden === false\"\n    [class.radio-sm]=\"componentHeight === ControlHeight.Small\"\n    [class.radio-lg]=\"componentHeight === ControlHeight.Large\">\n    <label for=\"{{ getName }}_{{ getIndex }}\">\n        <input\n            id=\"{{ getName }}_{{ getIndex }}\"\n            name=\"{{ getName }}\"\n            type=\"radio\"\n            [value]=\"value\"\n            [checked]=\"checked\"\n            (change)=\"ChangeEvent()\"\n            [disabled]=\"isDisabled\" />\n        <ng-template *ngTemplateOutlet=\"labeltemplate || defaultItemLabelTemplate; context: { label: label }\"></ng-template>\n        <p\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"help-block\">\n            {{ helptext }}\n        </p>\n    </label>\n\n    <div\n        *ngIf=\"helptextmode === 'tooltip' && helptext\"\n        class=\"form-control-static\"\n        style=\"display: inline\">\n        <sac-tooltip\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px; margin-right: 5px\">\n            </span>\n        </sac-tooltip>\n    </div>\n</div>\n\n<ng-template\n    #defaultItemLabelTemplate\n    let-label=\"label\">\n    <span>{{ label }}</span>\n</ng-template>\n", styles: [".radio-lg label{font-size:18px;padding-top:2px}.radio-lg label input{width:20px;height:20px;margin-top:2px}.radio-sm{padding-top:2px}.radio-sm label{font-size:12px;min-height:14px;padding-top:2px}.radio-sm label input{width:12px;height:12px;margin-top:2px}\n"], components: [{ type: SacTooltipComponent, selector: "sac-tooltip" }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.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\n    class=\"radio\"\n    *ngIf=\"hidden === false\"\n    [class.radio-sm]=\"componentHeight === ControlHeight.Small\"\n    [class.radio-lg]=\"componentHeight === ControlHeight.Large\">\n    <label for=\"{{ getName }}_{{ getIndex }}\">\n        <input\n            id=\"{{ getName }}_{{ getIndex }}\"\n            name=\"{{ getName }}\"\n            type=\"radio\"\n            [value]=\"value\"\n            [checked]=\"checked\"\n            (change)=\"ChangeEvent()\"\n            [disabled]=\"isDisabled\" />\n        <ng-template *ngTemplateOutlet=\"labeltemplate || defaultItemLabelTemplate; context: { label: label }\"></ng-template>\n        <p\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"help-block\"\n            >{{ helptext }}</p\n        >\n    </label>\n\n    <div\n        *ngIf=\"helptextmode === 'tooltip' && helptext\"\n        class=\"form-control-static\"\n        style=\"display: inline\">\n        <sac-tooltip\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px; margin-right: 5px\">\n            </span>\n        </sac-tooltip>\n    </div>\n</div>\n\n<ng-template\n    #defaultItemLabelTemplate\n    let-label=\"label\">\n    <span>{{ label }}</span>\n</ng-template>\n", styles: [".radio-lg label{font-size:18px;padding-top:2px}.radio-lg label input{width:20px;height:20px;margin-top:2px}.radio-sm{padding-top:2px}.radio-sm label{font-size:12px;min-height:14px;padding-top:2px}.radio-sm label input{width:12px;height:12px;margin-top:2px}\n"], components: [{ type: SacTooltipComponent, selector: "sac-tooltip" }], 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\n    class=\"radio\"\n    *ngIf=\"hidden === false\"\n    [class.radio-sm]=\"componentHeight === ControlHeight.Small\"\n    [class.radio-lg]=\"componentHeight === ControlHeight.Large\">\n    <label for=\"{{ getName }}_{{ getIndex }}\">\n        <input\n            id=\"{{ getName }}_{{ getIndex }}\"\n            name=\"{{ getName }}\"\n            type=\"radio\"\n            [value]=\"value\"\n            [checked]=\"checked\"\n            (change)=\"ChangeEvent()\"\n            [disabled]=\"isDisabled\" />\n        <ng-template *ngTemplateOutlet=\"labeltemplate || defaultItemLabelTemplate; context: { label: label }\"></ng-template>\n        <p\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"help-block\">\n            {{ helptext }}\n        </p>\n    </label>\n\n    <div\n        *ngIf=\"helptextmode === 'tooltip' && helptext\"\n        class=\"form-control-static\"\n        style=\"display: inline\">\n        <sac-tooltip\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px; margin-right: 5px\">\n            </span>\n        </sac-tooltip>\n    </div>\n</div>\n\n<ng-template\n    #defaultItemLabelTemplate\n    let-label=\"label\">\n    <span>{{ label }}</span>\n</ng-template>\n", styles: [".radio-lg label{font-size:18px;padding-top:2px}.radio-lg label input{width:20px;height:20px;margin-top:2px}.radio-sm{padding-top:2px}.radio-sm label{font-size:12px;min-height:14px;padding-top:2px}.radio-sm label input{width:12px;height:12px;margin-top:2px}\n"] }]
+            args: [{ selector: 'sac-radiobutton', template: "<div\n    class=\"radio\"\n    *ngIf=\"hidden === false\"\n    [class.radio-sm]=\"componentHeight === ControlHeight.Small\"\n    [class.radio-lg]=\"componentHeight === ControlHeight.Large\">\n    <label for=\"{{ getName }}_{{ getIndex }}\">\n        <input\n            id=\"{{ getName }}_{{ getIndex }}\"\n            name=\"{{ getName }}\"\n            type=\"radio\"\n            [value]=\"value\"\n            [checked]=\"checked\"\n            (change)=\"ChangeEvent()\"\n            [disabled]=\"isDisabled\" />\n        <ng-template *ngTemplateOutlet=\"labeltemplate || defaultItemLabelTemplate; context: { label: label }\"></ng-template>\n        <p\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"help-block\"\n            >{{ helptext }}</p\n        >\n    </label>\n\n    <div\n        *ngIf=\"helptextmode === 'tooltip' && helptext\"\n        class=\"form-control-static\"\n        style=\"display: inline\">\n        <sac-tooltip\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px; margin-right: 5px\">\n            </span>\n        </sac-tooltip>\n    </div>\n</div>\n\n<ng-template\n    #defaultItemLabelTemplate\n    let-label=\"label\">\n    <span>{{ label }}</span>\n</ng-template>\n", styles: [".radio-lg label{font-size:18px;padding-top:2px}.radio-lg label input{width:20px;height:20px;margin-top:2px}.radio-sm{padding-top:2px}.radio-sm label{font-size:12px;min-height:14px;padding-top:2px}.radio-sm label input{width:12px;height:12px;margin-top:2px}\n"] }]
         }], ctorParameters: function () { return [{ type: SacRadiobuttonsComponent, decorators: [{
                     type: Host
                 }] }, { type: SacFormLayoutDirective, decorators: [{
@@ -397,47 +394,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
 class SACBootstrap3CheckboxModule {
 }
 SACBootstrap3CheckboxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3CheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SACBootstrap3CheckboxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3CheckboxModule, declarations: [SacCheckboxComponent,
-        SacRadiobuttonComponent,
-        SacRadiobuttonsComponent], imports: [CommonModule,
-        SACBootstrap3LayoutModule,
-        SACBootstrap3TooltipModule], exports: [SacCheckboxComponent,
-        SacRadiobuttonComponent,
-        SacRadiobuttonsComponent] });
-SACBootstrap3CheckboxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3CheckboxModule, imports: [[
-            CommonModule,
-            SACBootstrap3LayoutModule,
-            SACBootstrap3TooltipModule,
-        ]] });
+SACBootstrap3CheckboxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3CheckboxModule, declarations: [SacCheckboxComponent, SacRadiobuttonComponent, SacRadiobuttonsComponent], imports: [CommonModule, SACBootstrap3LayoutModule, SACBootstrap3TooltipModule, SACCommonUtliltiesModule], exports: [SacCheckboxComponent, SacRadiobuttonComponent, SacRadiobuttonsComponent] });
+SACBootstrap3CheckboxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3CheckboxModule, imports: [[CommonModule, SACBootstrap3LayoutModule, SACBootstrap3TooltipModule, SACCommonUtliltiesModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3CheckboxModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [
-                        SacCheckboxComponent,
-                        SacRadiobuttonComponent,
-                        SacRadiobuttonsComponent,
-                    ],
-                    imports: [
-                        CommonModule,
-                        SACBootstrap3LayoutModule,
-                        SACBootstrap3TooltipModule,
-                    ],
-                    exports: [
-                        SacCheckboxComponent,
-                        SacRadiobuttonComponent,
-                        SacRadiobuttonsComponent,
-                    ],
+                    declarations: [SacCheckboxComponent, SacRadiobuttonComponent, SacRadiobuttonsComponent],
+                    imports: [CommonModule, SACBootstrap3LayoutModule, SACBootstrap3TooltipModule, SACCommonUtliltiesModule],
+                    exports: [SacCheckboxComponent, SacRadiobuttonComponent, SacRadiobuttonsComponent],
                 }]
         }] });
 
 class SacDialogComponent extends SacDialogCommon {
+    // #endregion Properties
+    // #region Constructors
     constructor(el, cdRef) {
         super(cdRef);
-        //#region Bootstrap 3 Spezifische Properites
-        this.zindex = 20002;
+        // #region Properties
         this._lastDialogMarginTop = 0;
+        this.zindex = 20002;
         this.element = el.nativeElement;
     }
+    // #endregion Constructors
+    // #region Public Getters And Setters
     // Margin Top für Center Position des Dialogs berechnen
     get dialogMarginTop() {
         let result = 0;
@@ -452,11 +431,8 @@ class SacDialogComponent extends SacDialogCommon {
         }
         return result;
     }
-    //#endregion
-    ngOnInit() {
-        // Element an Body für korrektes Styling unter Bootstrap 3 verschieben
-        document.body.appendChild(this.element);
-    }
+    // #endregion Public Getters And Setters
+    // #region Public Methods
     ngOnDestroy() {
         this.hide();
         if (document.body.contains(this.element)) {
@@ -464,16 +440,34 @@ class SacDialogComponent extends SacDialogCommon {
         }
         super.ngOnDestroy();
     }
+    ngOnInit() {
+        // Element an Body für korrektes Styling unter Bootstrap 3 verschieben
+        document.body.appendChild(this.element);
+    }
 }
 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", inputs: { zindex: "zindex" }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"name\" *ngIf=\"_show\" [ngStyle]=\"{'z-index': zindex}\">\n  <div\n    class=\"modal in\"\n    style=\"display: block\"\n    tabindex=\"-1\"\n    role=\"dialog\"\n    #dialog\n  >\n    <div\n      class=\"modal-dialog\"\n      [class.modal-sm]=\"_size==='small'\"\n      [class.modal-lg]=\"_size === 'large' || _size === 'extralarge'\"\n      role=\"document\"\n    >\n      <div class=\"modal-content\">\n        <div class=\"modal-header\">\n          <button\n            type=\"button\"\n            class=\"close\"\n            data-dismiss=\"modal\"\n            aria-label=\"Close\"\n            (click)=\"hide()\"\n            *ngIf=\"closebutton\"\n          >\n            <span aria-hidden=\"true\">&times;</span>\n          </button>\n          <span class=\"modal-title\">{{title}}</span>\n        </div>\n        <div class=\"modal-body\">\n          <ng-content select=\"[dialogbody]\"></ng-content>\n        </div>\n        <div class=\"modal-footer\">\n          <ng-content select=\"[dialogfooter]\"></ng-content>\n        </div>\n      </div>\n      <!-- /.modal-content -->\n    </div>\n    <!-- /.modal-dialog -->\n  </div>\n  <!-- /.modal -->\n</div>\n<div class=\"modal-backdrop in\" *ngIf=\"_show && backdrop\" #backdrop></div>\n", directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+SacDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacDialogComponent, selector: "sac-dialog", inputs: { zindex: "zindex" }, usesInheritance: true, ngImport: i0, template: "<div\n    [id]=\"name\"\n    *ngIf=\"_show\"\n    [ngStyle]=\"{ 'z-index': zindex }\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <div\n        class=\"modal in\"\n        style=\"display: block\"\n        tabindex=\"-1\"\n        role=\"dialog\"\n        #dialog>\n        <div\n            class=\"modal-dialog\"\n            [class.modal-sm]=\"_size === 'small'\"\n            [class.modal-lg]=\"_size === 'large' || _size === 'extralarge'\"\n            role=\"document\">\n            <div class=\"modal-content\">\n                <div class=\"modal-header\">\n                    <button\n                        type=\"button\"\n                        class=\"close\"\n                        data-dismiss=\"modal\"\n                        aria-label=\"Close\"\n                        (click)=\"hide()\"\n                        *ngIf=\"closebutton\">\n                        <span aria-hidden=\"true\">&times;</span>\n                    </button>\n                    <span class=\"modal-title\">{{ title }}</span>\n                </div>\n                <div class=\"modal-body\">\n                    <ng-content select=\"[dialogbody]\"></ng-content>\n                </div>\n                <div class=\"modal-footer\">\n                    <ng-content select=\"[dialogfooter]\"></ng-content>\n                </div>\n            </div>\n            <!-- /.modal-content -->\n        </div>\n        <!-- /.modal-dialog -->\n    </div>\n    <!-- /.modal -->\n</div>\n<div\n    class=\"modal-backdrop in\"\n    *ngIf=\"_show && backdrop\"\n    #backdrop></div>\n", directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "testingattribute": i5.SacTestingAttributePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sac-dialog', template: "<div [id]=\"name\" *ngIf=\"_show\" [ngStyle]=\"{'z-index': zindex}\">\n  <div\n    class=\"modal in\"\n    style=\"display: block\"\n    tabindex=\"-1\"\n    role=\"dialog\"\n    #dialog\n  >\n    <div\n      class=\"modal-dialog\"\n      [class.modal-sm]=\"_size==='small'\"\n      [class.modal-lg]=\"_size === 'large' || _size === 'extralarge'\"\n      role=\"document\"\n    >\n      <div class=\"modal-content\">\n        <div class=\"modal-header\">\n          <button\n            type=\"button\"\n            class=\"close\"\n            data-dismiss=\"modal\"\n            aria-label=\"Close\"\n            (click)=\"hide()\"\n            *ngIf=\"closebutton\"\n          >\n            <span aria-hidden=\"true\">&times;</span>\n          </button>\n          <span class=\"modal-title\">{{title}}</span>\n        </div>\n        <div class=\"modal-body\">\n          <ng-content select=\"[dialogbody]\"></ng-content>\n        </div>\n        <div class=\"modal-footer\">\n          <ng-content select=\"[dialogfooter]\"></ng-content>\n        </div>\n      </div>\n      <!-- /.modal-content -->\n    </div>\n    <!-- /.modal-dialog -->\n  </div>\n  <!-- /.modal -->\n</div>\n<div class=\"modal-backdrop in\" *ngIf=\"_show && backdrop\" #backdrop></div>\n" }]
+            args: [{ selector: 'sac-dialog', template: "<div\n    [id]=\"name\"\n    *ngIf=\"_show\"\n    [ngStyle]=\"{ 'z-index': zindex }\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <div\n        class=\"modal in\"\n        style=\"display: block\"\n        tabindex=\"-1\"\n        role=\"dialog\"\n        #dialog>\n        <div\n            class=\"modal-dialog\"\n            [class.modal-sm]=\"_size === 'small'\"\n            [class.modal-lg]=\"_size === 'large' || _size === 'extralarge'\"\n            role=\"document\">\n            <div class=\"modal-content\">\n                <div class=\"modal-header\">\n                    <button\n                        type=\"button\"\n                        class=\"close\"\n                        data-dismiss=\"modal\"\n                        aria-label=\"Close\"\n                        (click)=\"hide()\"\n                        *ngIf=\"closebutton\">\n                        <span aria-hidden=\"true\">&times;</span>\n                    </button>\n                    <span class=\"modal-title\">{{ title }}</span>\n                </div>\n                <div class=\"modal-body\">\n                    <ng-content select=\"[dialogbody]\"></ng-content>\n                </div>\n                <div class=\"modal-footer\">\n                    <ng-content select=\"[dialogfooter]\"></ng-content>\n                </div>\n            </div>\n            <!-- /.modal-content -->\n        </div>\n        <!-- /.modal-dialog -->\n    </div>\n    <!-- /.modal -->\n</div>\n<div\n    class=\"modal-backdrop in\"\n    *ngIf=\"_show && backdrop\"\n    #backdrop></div>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { zindex: [{
                 type: Input
             }] } });
 
+class SACBootstrap3DialogModule {
+}
+SACBootstrap3DialogModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3DialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SACBootstrap3DialogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3DialogModule, declarations: [SacDialogComponent], imports: [CommonModule, SACCommonUtliltiesModule], exports: [SacDialogComponent] });
+SACBootstrap3DialogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3DialogModule, imports: [[CommonModule, SACCommonUtliltiesModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3DialogModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SacDialogComponent],
+                    imports: [CommonModule, SACCommonUtliltiesModule],
+                    exports: [SacDialogComponent],
+                }]
+        }] });
+
 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 });
@@ -580,24 +574,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                     args: [ComponentFactoryResolver]
                 }] }, { type: i0.ApplicationRef }, { type: i0.Injector }]; } });
 
-class SACBootstrap3DialogModule {
-}
-SACBootstrap3DialogModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3DialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SACBootstrap3DialogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3DialogModule, declarations: [SacDialogComponent], imports: [CommonModule], exports: [SacDialogComponent] });
-SACBootstrap3DialogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3DialogModule, imports: [[
-            CommonModule
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3DialogModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [SacDialogComponent],
-                    imports: [
-                        CommonModule
-                    ],
-                    exports: [SacDialogComponent]
-                }]
-        }] });
-
 /**
  *  Module für Confirm Messages
  *
@@ -605,22 +581,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
  *
  */
 class SACBootstrap3ConfirmModule {
+    // #region Public Static Methods
     static forRoot() {
         return {
             ngModule: SACBootstrap3ConfirmModule,
-            providers: [ServiceConfirm]
+            providers: [ServiceConfirm],
         };
     }
 }
 SACBootstrap3ConfirmModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3ConfirmModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SACBootstrap3ConfirmModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3ConfirmModule, declarations: [SacConfirmComponent], imports: [CommonModule, SACBootstrap3DialogModule, SACBootstrap3ButtonModule], exports: [SacConfirmComponent] });
-SACBootstrap3ConfirmModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3ConfirmModule, imports: [[CommonModule, SACBootstrap3DialogModule, SACBootstrap3ButtonModule]] });
+SACBootstrap3ConfirmModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3ConfirmModule, declarations: [SacConfirmComponent], imports: [CommonModule, SACBootstrap3DialogModule, SACBootstrap3ButtonModule, SACCommonUtliltiesModule], exports: [SacConfirmComponent] });
+SACBootstrap3ConfirmModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3ConfirmModule, imports: [[CommonModule, SACBootstrap3DialogModule, SACBootstrap3ButtonModule, SACCommonUtliltiesModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3ConfirmModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [SacConfirmComponent],
-                    imports: [CommonModule, SACBootstrap3DialogModule, SACBootstrap3ButtonModule],
-                    exports: [SacConfirmComponent]
+                    imports: [CommonModule, SACBootstrap3DialogModule, SACBootstrap3ButtonModule, SACCommonUtliltiesModule],
+                    exports: [SacConfirmComponent],
                 }]
         }] });
 
@@ -708,10 +685,10 @@ class SacContextmenuComponent extends SacContextmenuCommon {
     }
 }
 SacContextmenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacContextmenuComponent, deps: [{ token: DOCUMENT }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-SacContextmenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacContextmenuComponent, selector: "sac-contextmenu", usesInheritance: true, ngImport: i0, template: "<div\n    class=\"dropdown\"\n    [ngClass]=\"cssclass\">\n    <ng-container [ngTemplateOutlet]=\"buttontemplate || defaultButtonTemplate\"></ng-container>\n\n    <ul\n        class=\"dropdown-menu dropdown-menu-right\"\n        sacContextMenuContainer\n        [class.show]=\"isopen\">\n        <ng-content></ng-content>\n    </ul>\n</div>\n\n<ng-template #defaultButtonTemplate>\n    <button\n        sacContextMenuAnchor\n        class=\"btn btn-link\"\n        type=\"button\"\n        (click)=\"toggle()\">\n        <i [class]=\"IconContextMenu\"></i>\n    </button>\n</ng-template>\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]" }] });
+SacContextmenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacContextmenuComponent, selector: "sac-contextmenu", usesInheritance: true, ngImport: i0, template: "<div\n    class=\"dropdown\"\n    [ngClass]=\"cssclass\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <ng-container [ngTemplateOutlet]=\"buttontemplate || defaultButtonTemplate\"></ng-container>\n\n    <ul\n        class=\"dropdown-menu dropdown-menu-right\"\n        sacContextMenuContainer\n        [class.show]=\"isopen\">\n        <ng-content></ng-content>\n    </ul>\n</div>\n\n<ng-template #defaultButtonTemplate>\n    <button\n        sacContextMenuAnchor\n        class=\"btn btn-link\"\n        type=\"button\"\n        (click)=\"toggle()\">\n        <i [class]=\"IconContextMenu\"></i>\n    </button>\n</ng-template>\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]" }], pipes: { "testingattribute": i5.SacTestingAttributePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacContextmenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sac-contextmenu', template: "<div\n    class=\"dropdown\"\n    [ngClass]=\"cssclass\">\n    <ng-container [ngTemplateOutlet]=\"buttontemplate || defaultButtonTemplate\"></ng-container>\n\n    <ul\n        class=\"dropdown-menu dropdown-menu-right\"\n        sacContextMenuContainer\n        [class.show]=\"isopen\">\n        <ng-content></ng-content>\n    </ul>\n</div>\n\n<ng-template #defaultButtonTemplate>\n    <button\n        sacContextMenuAnchor\n        class=\"btn btn-link\"\n        type=\"button\"\n        (click)=\"toggle()\">\n        <i [class]=\"IconContextMenu\"></i>\n    </button>\n</ng-template>\n" }]
+            args: [{ selector: 'sac-contextmenu', template: "<div\n    class=\"dropdown\"\n    [ngClass]=\"cssclass\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <ng-container [ngTemplateOutlet]=\"buttontemplate || defaultButtonTemplate\"></ng-container>\n\n    <ul\n        class=\"dropdown-menu dropdown-menu-right\"\n        sacContextMenuContainer\n        [class.show]=\"isopen\">\n        <ng-content></ng-content>\n    </ul>\n</div>\n\n<ng-template #defaultButtonTemplate>\n    <button\n        sacContextMenuAnchor\n        class=\"btn btn-link\"\n        type=\"button\"\n        (click)=\"toggle()\">\n        <i [class]=\"IconContextMenu\"></i>\n    </button>\n</ng-template>\n" }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -796,11 +773,11 @@ SACBootstrap3ContextmenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "1
         SacContextmenuItemButtonComponent,
         SacContextmenuItemSplitterComponent,
         SacContextmenuAnchorDirective,
-        SacContextmenuContainerDirective], imports: [CommonModule], exports: [SacContextmenuComponent,
+        SacContextmenuContainerDirective], imports: [CommonModule, SACCommonUtliltiesModule], exports: [SacContextmenuComponent,
         SacContextmenuItemButtonComponent,
         SacContextmenuItemSplitterComponent,
         SacContextmenuAnchorDirective] });
-SACBootstrap3ContextmenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3ContextmenuModule, imports: [[CommonModule]] });
+SACBootstrap3ContextmenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3ContextmenuModule, imports: [[CommonModule, SACCommonUtliltiesModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3ContextmenuModule, decorators: [{
             type: NgModule,
             args: [{
@@ -811,7 +788,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                         SacContextmenuAnchorDirective,
                         SacContextmenuContainerDirective,
                     ],
-                    imports: [CommonModule],
+                    imports: [CommonModule, SACCommonUtliltiesModule],
                     exports: [
                         SacContextmenuComponent,
                         SacContextmenuItemButtonComponent,
@@ -824,13 +801,16 @@ 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\n    class=\"calendar-selector\"\n    style=\"min-width: 265px\">\n    <table\n        class=\"table-condensed\"\n        style=\"width: 100%\"\n        *ngIf=\"dateselection\">\n        <thead>\n            <tr>\n                <th\n                    class=\"prev text-left\"\n                    (click)=\"monthBack()\">\n                    <i [class]=\"iconMonthPrev\"></i>\n                </th>\n                <th\n                    colspan=\"5\"\n                    class=\"switch text-center\"\n                    >{{ month + 1 }}/{{ year }}</th\n                >\n                <th\n                    class=\"next text-right\"\n                    (click)=\"monthNext()\">\n                    <i [class]=\"iconMonthNext\"></i>\n                </th>\n            </tr>\n            <tr>\n                <th class=\"dow text-center\">Mo</th>\n                <th class=\"dow text-center\">Di</th>\n                <th class=\"dow text-center\">Mi</th>\n                <th class=\"dow text-center\">Do</th>\n                <th class=\"dow text-center\">Fr</th>\n                <th class=\"dow text-center\">Sa</th>\n                <th class=\"dow text-center\">So</th>\n            </tr>\n        </thead>\n        <tbody>\n            <ng-container *ngFor=\"let week of dates; let i = index\">\n                <tr>\n                    <td\n                        class=\"text-center\"\n                        *ngFor=\"let item of week\"\n                        [ngStyle]=\"{ cursor: item.isenabled ? 'pointer' : null }\"\n                        [ngClass]=\"{ 'day-current': item.iscurrent, 'day-selected': item.isselected, 'day-new': item.isnew, 'day-disabled': !item.isenabled }\"\n                        (click)=\"selectDate(item)\">\n                        {{ item.displaytext }}\n                    </td>\n                </tr>\n            </ng-container>\n        </tbody>\n    </table>\n    <div\n        *ngIf=\"timeselection\"\n        style=\"margin-top: 10px\">\n        <div class=\"row\">\n            <div\n                class=\"col-xs-6\"\n                style=\"padding-right: 20px\">\n                <div class=\"form-group\">\n                    <label>Stunde</label>\n                    <input\n                        type=\"number\"\n                        class=\"form-control\"\n                        [value]=\"getHours()\"\n                        (input)=\"setHours($event.target.value)\"\n                        min=\"0\"\n                        max=\"23\" />\n                </div>\n            </div>\n            <div\n                class=\"col-xs-6\"\n                style=\"padding-left: 20px\">\n                <div class=\"form-group\">\n                    <label>Minute</label>\n                    <input\n                        type=\"number\"\n                        class=\"form-control\"\n                        [value]=\"getMinutes()\"\n                        (input)=\"setMinutes($event.target.value)\"\n                        min=\"0\"\n                        max=\"59\" />\n                </div>\n            </div>\n        </div>\n    </div>\n    <div\n        class=\"row\"\n        style=\"margin-top: 10px\">\n        <div class=\"col-xs-4 text-left\">\n            <button\n                type=\"button\"\n                class=\"btn btn-default\"\n                (click)=\"setToday()\">\n                Heute\n            </button>\n        </div>\n        <div class=\"col-xs-8 text-right\">\n            <button\n                type=\"button\"\n                class=\"btn btn-default\"\n                (click)=\"resetSelection()\">\n                Reset\n            </button>\n            <button\n                type=\"button\"\n                class=\"btn btn-primary\"\n                style=\"margin-left: 10px\"\n                (click)=\"applySelection()\">\n                Apply\n            </button>\n        </div>\n    </div>\n</div>\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"] }] });
+SacDateSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacDateSelectorComponent, selector: "sac-dateselector", usesInheritance: true, ngImport: i0, template: "<div\n    class=\"calendar-selector\"\n    style=\"min-width: 265px\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <table\n        class=\"table-condensed\"\n        style=\"width: 100%\"\n        *ngIf=\"dateselection\">\n        <thead>\n            <tr>\n                <th\n                    class=\"prev text-left\"\n                    (click)=\"monthBack()\">\n                    <i [class]=\"iconMonthPrev\"></i>\n                </th>\n                <th\n                    colspan=\"5\"\n                    class=\"switch text-center\"\n                    >{{ month + 1 }}/{{ year }}</th\n                >\n                <th\n                    class=\"next text-right\"\n                    (click)=\"monthNext()\">\n                    <i [class]=\"iconMonthNext\"></i>\n                </th>\n            </tr>\n            <tr>\n                <th class=\"dow text-center\">Mo</th>\n                <th class=\"dow text-center\">Di</th>\n                <th class=\"dow text-center\">Mi</th>\n                <th class=\"dow text-center\">Do</th>\n                <th class=\"dow text-center\">Fr</th>\n                <th class=\"dow text-center\">Sa</th>\n                <th class=\"dow text-center\">So</th>\n            </tr>\n        </thead>\n        <tbody>\n            <ng-container *ngFor=\"let week of dates; let i = index\">\n                <tr>\n                    <td\n                        class=\"text-center\"\n                        *ngFor=\"let item of week\"\n                        [ngStyle]=\"{ cursor: item.isenabled ? 'pointer' : null }\"\n                        [ngClass]=\"{ 'day-current': item.iscurrent, 'day-selected': item.isselected, 'day-new': item.isnew, 'day-disabled': !item.isenabled }\"\n                        (click)=\"selectDate(item)\"\n                        >{{ item.displaytext }}</td\n                    >\n                </tr>\n            </ng-container>\n        </tbody>\n    </table>\n    <div\n        *ngIf=\"timeselection\"\n        style=\"margin-top: 10px\">\n        <div class=\"row\">\n            <div\n                class=\"col-xs-6\"\n                style=\"padding-right: 20px\">\n                <div class=\"form-group\">\n                    <label>Stunde</label>\n                    <input\n                        type=\"number\"\n                        class=\"form-control\"\n                        [value]=\"getHours()\"\n                        (input)=\"setHours($event.target.value)\"\n                        min=\"0\"\n                        max=\"23\" />\n                </div>\n            </div>\n            <div\n                class=\"col-xs-6\"\n                style=\"padding-left: 20px\">\n                <div class=\"form-group\">\n                    <label>Minute</label>\n                    <input\n                        type=\"number\"\n                        class=\"form-control\"\n                        [value]=\"getMinutes()\"\n                        (input)=\"setMinutes($event.target.value)\"\n                        min=\"0\"\n                        max=\"59\" />\n                </div>\n            </div>\n        </div>\n    </div>\n    <div\n        class=\"row\"\n        style=\"margin-top: 10px\">\n        <div class=\"col-xs-4 text-left\">\n            <button\n                type=\"button\"\n                class=\"btn btn-default\"\n                (click)=\"setToday()\">\n                Heute\n            </button>\n        </div>\n        <div class=\"col-xs-8 text-right\">\n            <button\n                type=\"button\"\n                class=\"btn btn-default\"\n                (click)=\"resetSelection()\">\n                Reset\n            </button>\n            <button\n                type=\"button\"\n                class=\"btn btn-primary\"\n                style=\"margin-left: 10px\"\n                (click)=\"applySelection()\">\n                Apply\n            </button>\n        </div>\n    </div>\n</div>\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"] }], pipes: { "testingattribute": i5.SacTestingAttributePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacDateSelectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sac-dateselector', template: "<div\n    class=\"calendar-selector\"\n    style=\"min-width: 265px\">\n    <table\n        class=\"table-condensed\"\n        style=\"width: 100%\"\n        *ngIf=\"dateselection\">\n        <thead>\n            <tr>\n                <th\n                    class=\"prev text-left\"\n                    (click)=\"monthBack()\">\n                    <i [class]=\"iconMonthPrev\"></i>\n                </th>\n                <th\n                    colspan=\"5\"\n                    class=\"switch text-center\"\n                    >{{ month + 1 }}/{{ year }}</th\n                >\n                <th\n                    class=\"next text-right\"\n                    (click)=\"monthNext()\">\n                    <i [class]=\"iconMonthNext\"></i>\n                </th>\n            </tr>\n            <tr>\n                <th class=\"dow text-center\">Mo</th>\n                <th class=\"dow text-center\">Di</th>\n                <th class=\"dow text-center\">Mi</th>\n                <th class=\"dow text-center\">Do</th>\n                <th class=\"dow text-center\">Fr</th>\n                <th class=\"dow text-center\">Sa</th>\n                <th class=\"dow text-center\">So</th>\n            </tr>\n        </thead>\n        <tbody>\n            <ng-container *ngFor=\"let week of dates; let i = index\">\n                <tr>\n                    <td\n                        class=\"text-center\"\n                        *ngFor=\"let item of week\"\n                        [ngStyle]=\"{ cursor: item.isenabled ? 'pointer' : null }\"\n                        [ngClass]=\"{ 'day-current': item.iscurrent, 'day-selected': item.isselected, 'day-new': item.isnew, 'day-disabled': !item.isenabled }\"\n                        (click)=\"selectDate(item)\">\n                        {{ item.displaytext }}\n                    </td>\n                </tr>\n            </ng-container>\n        </tbody>\n    </table>\n    <div\n        *ngIf=\"timeselection\"\n        style=\"margin-top: 10px\">\n        <div class=\"row\">\n            <div\n                class=\"col-xs-6\"\n                style=\"padding-right: 20px\">\n                <div class=\"form-group\">\n                    <label>Stunde</label>\n                    <input\n                        type=\"number\"\n                        class=\"form-control\"\n                        [value]=\"getHours()\"\n                        (input)=\"setHours($event.target.value)\"\n                        min=\"0\"\n                        max=\"23\" />\n                </div>\n            </div>\n            <div\n                class=\"col-xs-6\"\n                style=\"padding-left: 20px\">\n                <div class=\"form-group\">\n                    <label>Minute</label>\n                    <input\n                        type=\"number\"\n                        class=\"form-control\"\n                        [value]=\"getMinutes()\"\n                        (input)=\"setMinutes($event.target.value)\"\n                        min=\"0\"\n                        max=\"59\" />\n                </div>\n            </div>\n        </div>\n    </div>\n    <div\n        class=\"row\"\n        style=\"margin-top: 10px\">\n        <div class=\"col-xs-4 text-left\">\n            <button\n                type=\"button\"\n                class=\"btn btn-default\"\n                (click)=\"setToday()\">\n                Heute\n            </button>\n        </div>\n        <div class=\"col-xs-8 text-right\">\n            <button\n                type=\"button\"\n                class=\"btn btn-default\"\n                (click)=\"resetSelection()\">\n                Reset\n            </button>\n            <button\n                type=\"button\"\n                class=\"btn btn-primary\"\n                style=\"margin-left: 10px\"\n                (click)=\"applySelection()\">\n                Apply\n            </button>\n        </div>\n    </div>\n</div>\n" }]
+            args: [{ selector: 'sac-dateselector', template: "<div\n    class=\"calendar-selector\"\n    style=\"min-width: 265px\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <table\n        class=\"table-condensed\"\n        style=\"width: 100%\"\n        *ngIf=\"dateselection\">\n        <thead>\n            <tr>\n                <th\n                    class=\"prev text-left\"\n                    (click)=\"monthBack()\">\n                    <i [class]=\"iconMonthPrev\"></i>\n                </th>\n                <th\n                    colspan=\"5\"\n                    class=\"switch text-center\"\n                    >{{ month + 1 }}/{{ year }}</th\n                >\n                <th\n                    class=\"next text-right\"\n                    (click)=\"monthNext()\">\n                    <i [class]=\"iconMonthNext\"></i>\n                </th>\n            </tr>\n            <tr>\n                <th class=\"dow text-center\">Mo</th>\n                <th class=\"dow text-center\">Di</th>\n                <th class=\"dow text-center\">Mi</th>\n                <th class=\"dow text-center\">Do</th>\n                <th class=\"dow text-center\">Fr</th>\n                <th class=\"dow text-center\">Sa</th>\n                <th class=\"dow text-center\">So</th>\n            </tr>\n        </thead>\n        <tbody>\n            <ng-container *ngFor=\"let week of dates; let i = index\">\n                <tr>\n                    <td\n                        class=\"text-center\"\n                        *ngFor=\"let item of week\"\n                        [ngStyle]=\"{ cursor: item.isenabled ? 'pointer' : null }\"\n                        [ngClass]=\"{ 'day-current': item.iscurrent, 'day-selected': item.isselected, 'day-new': item.isnew, 'day-disabled': !item.isenabled }\"\n                        (click)=\"selectDate(item)\"\n                        >{{ item.displaytext }}</td\n                    >\n                </tr>\n            </ng-container>\n        </tbody>\n    </table>\n    <div\n        *ngIf=\"timeselection\"\n        style=\"margin-top: 10px\">\n        <div class=\"row\">\n            <div\n                class=\"col-xs-6\"\n                style=\"padding-right: 20px\">\n                <div class=\"form-group\">\n                    <label>Stunde</label>\n                    <input\n                        type=\"number\"\n                        class=\"form-control\"\n                        [value]=\"getHours()\"\n                        (input)=\"setHours($event.target.value)\"\n                        min=\"0\"\n                        max=\"23\" />\n                </div>\n            </div>\n            <div\n                class=\"col-xs-6\"\n                style=\"padding-left: 20px\">\n                <div class=\"form-group\">\n                    <label>Minute</label>\n                    <input\n                        type=\"number\"\n                        class=\"form-control\"\n                        [value]=\"getMinutes()\"\n                        (input)=\"setMinutes($event.target.value)\"\n                        min=\"0\"\n                        max=\"59\" />\n                </div>\n            </div>\n        </div>\n    </div>\n    <div\n        class=\"row\"\n        style=\"margin-top: 10px\">\n        <div class=\"col-xs-4 text-left\">\n            <button\n                type=\"button\"\n                class=\"btn btn-default\"\n                (click)=\"setToday()\">\n                Heute\n            </button>\n        </div>\n        <div class=\"col-xs-8 text-right\">\n            <button\n                type=\"button\"\n                class=\"btn btn-default\"\n                (click)=\"resetSelection()\">\n                Reset\n            </button>\n            <button\n                type=\"button\"\n                class=\"btn btn-primary\"\n                style=\"margin-left: 10px\"\n                (click)=\"applySelection()\">\n                Apply\n            </button>\n        </div>\n    </div>\n</div>\n" }]
         }] });
 
-// #region Classes
+// #region Variables
+const moment = moment_['default'];
+// #endregion Variables
+// #region Exported Classes
 class SacDateComponent extends SacDateCommon {
     // #region Constructors
     /**
@@ -856,7 +836,7 @@ SacDateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
             multi: true,
             useExisting: forwardRef(() => SacDateComponent),
         },
-    ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n        <div\n            style=\"position: relative\"\n            [style.width.px]=\"componentHeight === ControlHeight.Small ? 120 : componentHeight === ControlHeight.Large ? 180 : 140\">\n            <div\n                class=\"datetime-textbox input-group\"\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\n                <!-- this class comes in the div above when disabled [ngClass]=\"[disablelabel === false ? 'col-md-' + _inputsize : 'col-md-12']\" -->\n                <input\n                    id=\"{{ name }}\"\n                    name=\"{{ name }}\"\n                    type=\"text\"\n                    class=\"form-control date-control\"\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\n                    [ngClass]=\"[componentHeight | toControlHeight]\"\n                    [imask]=\"imaskDate\"\n                    [attr.placeholder]=\"placeholder\"\n                    [value]=\"valuestring\"\n                    (blur)=\"onTouch()\"\n                    (accept)=\"setValueString($event)\"\n                    [disabled]=\"isdisabled\"\n                    (click)=\"showDateSelector()\" />\n                <span class=\"input-group-btn\">\n                    <button\n                        #pickerbutton\n                        class=\"btn btn-default\"\n                        type=\"button\"\n                        (click)=\"showDateSelector()\"\n                        [disabled]=\"isdisabled\">\n                        <i [class]=\"IconSelector\"></i>\n                    </button>\n                </span>\n            </div>\n            <p\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"help-block\">\n                {{ helptext }}\n            </p>\n            <div\n                class=\"help-block help-block-error\"\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                {{ GetErrorMessage() | async }}\n            </div>\n\n            <div\n                #picker\n                *ngIf=\"_showselector\">\n                <div\n                    class=\"popover in\"\n                    role=\"tooltip\"\n                    style=\"display: block; max-width: unset; margin: 0\"\n                    [class.bottom]=\"GetPickerPosition() == TooltipPosition.bottom || GetPickerPosition() == TooltipPosition.bottomend\"\n                    [class.top]=\"GetPickerPosition() == TooltipPosition.top || GetPickerPosition() == TooltipPosition.topend\"\n                    [style.left.px]=\"posPopupLeft\"\n                    [style.top.px]=\"posPopupTop\">\n                    <div\n                        #pickerarrow\n                        style=\"margin: 0\"\n                        class=\"arrow\"\n                        [style.top.px]=\"posArrowTop\"\n                        [style.left.px]=\"posArrowLeft\">\n                    </div>\n\n                    <div class=\"popover-content\">\n                        <sac-dateselector\n                            *ngIf=\"_showselector\"\n                            [initialvalue]=\"value\"\n                            (selectdate)=\"dateselect($event)\"\n                            dateselection=\"true\">\n                        </sac-dateselector>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-static\"\n            style=\"margin-left: 5px\">\n            <sac-tooltip\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [class]=\"HelptextTooltipIcon\"\n                    style=\"margin-left: 5px; margin-right: 5px\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\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: { "toLabelHeight": SacToLabelHeightPipe, "toLabelWidthCss": SacToLabelWidthCssPipe, "toControlWidthCss": SacToControlWidthCssPipe, "toControlHeight": SacToControlHeightPipe, "async": i3.AsyncPipe } });
+    ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n        <div\n            style=\"position: relative\"\n            [style.width.px]=\"componentHeight === ControlHeight.Small ? 120 : componentHeight === ControlHeight.Large ? 180 : 140\">\n            <div\n                class=\"datetime-textbox input-group\"\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\n                <!-- this class comes in the div above when disabled [ngClass]=\"[disablelabel === false ? 'col-md-' + _inputsize : 'col-md-12']\" -->\n                <input\n                    id=\"{{ name }}\"\n                    name=\"{{ name }}\"\n                    type=\"text\"\n                    class=\"form-control date-control\"\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\n                    [ngClass]=\"[componentHeight | toControlHeight]\"\n                    [imask]=\"imaskDate\"\n                    [attr.placeholder]=\"placeholder\"\n                    [value]=\"valuestring\"\n                    (blur)=\"onTouch()\"\n                    (accept)=\"setValueString($event)\"\n                    [disabled]=\"isdisabled\"\n                    (click)=\"showDateSelector()\" />\n                <span class=\"input-group-btn\">\n                    <button\n                        #pickerbutton\n                        class=\"btn btn-default\"\n                        type=\"button\"\n                        (click)=\"showDateSelector()\"\n                        [disabled]=\"isdisabled\">\n                        <i [class]=\"IconSelector\"></i>\n                    </button>\n                </span>\n            </div>\n            <p\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"help-block\">\n                {{ helptext }}\n            </p>\n            <div\n                class=\"help-block help-block-error\"\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                {{ GetErrorMessage() | async }}\n            </div>\n\n            <div\n                #picker\n                *ngIf=\"_showselector\">\n                <div\n                    class=\"popover in\"\n                    role=\"tooltip\"\n                    style=\"display: block; max-width: unset; margin: 0\"\n                    [class.bottom]=\"GetPickerPosition() === TooltipPosition.bottom || GetPickerPosition() === TooltipPosition.bottomend\"\n                    [class.top]=\"GetPickerPosition() === TooltipPosition.top || GetPickerPosition() === TooltipPosition.topend\"\n                    [style.left.px]=\"posPopupLeft\"\n                    [style.top.px]=\"posPopupTop\">\n                    <div\n                        #pickerarrow\n                        style=\"margin: 0\"\n                        class=\"arrow\"\n                        [style.top.px]=\"posArrowTop\"\n                        [style.left.px]=\"posArrowLeft\">\n                    </div>\n\n                    <div class=\"popover-content\">\n                        <sac-dateselector\n                            *ngIf=\"_showselector\"\n                            [initialvalue]=\"value\"\n                            (selectdate)=\"dateselect($event)\"\n                            dateselection=\"true\">\n                        </sac-dateselector>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-static\"\n            style=\"margin-left: 5px\">\n            <sac-tooltip\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [class]=\"HelptextTooltipIcon\"\n                    style=\"margin-left: 5px; margin-right: 5px\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\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$1.IMaskDirective, selector: "[imask]", inputs: ["imaskElement", "imask", "unmask"], outputs: ["accept", "complete"], exportAs: ["imask"] }], pipes: { "toLabelHeight": SacToLabelHeightPipe, "testingattribute": i5.SacTestingAttributePipe, "toLabelWidthCss": SacToLabelWidthCssPipe, "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: [
@@ -870,15 +850,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => SacDateComponent),
                         },
-                    ], template: "<div\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n        <div\n            style=\"position: relative\"\n            [style.width.px]=\"componentHeight === ControlHeight.Small ? 120 : componentHeight === ControlHeight.Large ? 180 : 140\">\n            <div\n                class=\"datetime-textbox input-group\"\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\n                <!-- this class comes in the div above when disabled [ngClass]=\"[disablelabel === false ? 'col-md-' + _inputsize : 'col-md-12']\" -->\n                <input\n                    id=\"{{ name }}\"\n                    name=\"{{ name }}\"\n                    type=\"text\"\n                    class=\"form-control date-control\"\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\n                    [ngClass]=\"[componentHeight | toControlHeight]\"\n                    [imask]=\"imaskDate\"\n                    [attr.placeholder]=\"placeholder\"\n                    [value]=\"valuestring\"\n                    (blur)=\"onTouch()\"\n                    (accept)=\"setValueString($event)\"\n                    [disabled]=\"isdisabled\"\n                    (click)=\"showDateSelector()\" />\n                <span class=\"input-group-btn\">\n                    <button\n                        #pickerbutton\n                        class=\"btn btn-default\"\n                        type=\"button\"\n                        (click)=\"showDateSelector()\"\n                        [disabled]=\"isdisabled\">\n                        <i [class]=\"IconSelector\"></i>\n                    </button>\n                </span>\n            </div>\n            <p\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"help-block\">\n                {{ helptext }}\n            </p>\n            <div\n                class=\"help-block help-block-error\"\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                {{ GetErrorMessage() | async }}\n            </div>\n\n            <div\n                #picker\n                *ngIf=\"_showselector\">\n                <div\n                    class=\"popover in\"\n                    role=\"tooltip\"\n                    style=\"display: block; max-width: unset; margin: 0\"\n                    [class.bottom]=\"GetPickerPosition() == TooltipPosition.bottom || GetPickerPosition() == TooltipPosition.bottomend\"\n                    [class.top]=\"GetPickerPosition() == TooltipPosition.top || GetPickerPosition() == TooltipPosition.topend\"\n                    [style.left.px]=\"posPopupLeft\"\n                    [style.top.px]=\"posPopupTop\">\n                    <div\n                        #pickerarrow\n                        style=\"margin: 0\"\n                        class=\"arrow\"\n                        [style.top.px]=\"posArrowTop\"\n                        [style.left.px]=\"posArrowLeft\">\n                    </div>\n\n                    <div class=\"popover-content\">\n                        <sac-dateselector\n                            *ngIf=\"_showselector\"\n                            [initialvalue]=\"value\"\n                            (selectdate)=\"dateselect($event)\"\n                            dateselection=\"true\">\n                        </sac-dateselector>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-static\"\n            style=\"margin-left: 5px\">\n            <sac-tooltip\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [class]=\"HelptextTooltipIcon\"\n                    style=\"margin-left: 5px; margin-right: 5px\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n" }]
+                    ], template: "<div\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n        <div\n            style=\"position: relative\"\n            [style.width.px]=\"componentHeight === ControlHeight.Small ? 120 : componentHeight === ControlHeight.Large ? 180 : 140\">\n            <div\n                class=\"datetime-textbox input-group\"\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\n                <!-- this class comes in the div above when disabled [ngClass]=\"[disablelabel === false ? 'col-md-' + _inputsize : 'col-md-12']\" -->\n                <input\n                    id=\"{{ name }}\"\n                    name=\"{{ name }}\"\n                    type=\"text\"\n                    class=\"form-control date-control\"\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\n                    [ngClass]=\"[componentHeight | toControlHeight]\"\n                    [imask]=\"imaskDate\"\n                    [attr.placeholder]=\"placeholder\"\n                    [value]=\"valuestring\"\n                    (blur)=\"onTouch()\"\n                    (accept)=\"setValueString($event)\"\n                    [disabled]=\"isdisabled\"\n                    (click)=\"showDateSelector()\" />\n                <span class=\"input-group-btn\">\n                    <button\n                        #pickerbutton\n                        class=\"btn btn-default\"\n                        type=\"button\"\n                        (click)=\"showDateSelector()\"\n                        [disabled]=\"isdisabled\">\n                        <i [class]=\"IconSelector\"></i>\n                    </button>\n                </span>\n            </div>\n            <p\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"help-block\">\n                {{ helptext }}\n            </p>\n            <div\n                class=\"help-block help-block-error\"\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                {{ GetErrorMessage() | async }}\n            </div>\n\n            <div\n                #picker\n                *ngIf=\"_showselector\">\n                <div\n                    class=\"popover in\"\n                    role=\"tooltip\"\n                    style=\"display: block; max-width: unset; margin: 0\"\n                    [class.bottom]=\"GetPickerPosition() === TooltipPosition.bottom || GetPickerPosition() === TooltipPosition.bottomend\"\n                    [class.top]=\"GetPickerPosition() === TooltipPosition.top || GetPickerPosition() === TooltipPosition.topend\"\n                    [style.left.px]=\"posPopupLeft\"\n                    [style.top.px]=\"posPopupTop\">\n                    <div\n                        #pickerarrow\n                        style=\"margin: 0\"\n                        class=\"arrow\"\n                        [style.top.px]=\"posArrowTop\"\n                        [style.left.px]=\"posArrowLeft\">\n                    </div>\n\n                    <div class=\"popover-content\">\n                        <sac-dateselector\n                            *ngIf=\"_showselector\"\n                            [initialvalue]=\"value\"\n                            (selectdate)=\"dateselect($event)\"\n                            dateselection=\"true\">\n                        </sac-dateselector>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-static\"\n            style=\"margin-left: 5px\">\n            <sac-tooltip\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [class]=\"HelptextTooltipIcon\"\n                    style=\"margin-left: 5px; margin-right: 5px\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: SacFormLayoutDirective, decorators: [{
                     type: Host
                 }, {
                     type: Optional
                 }] }, { type: i0.Injector }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
-// #endregion Classes
-// #region Variables
-const moment = moment_['default'];
 
 class SacDateTimeComponent extends SacDateTimeCommon {
     // #region Constructors
@@ -905,7 +882,7 @@ SacDateTimeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             multi: true,
             useExisting: forwardRef(() => SacDateTimeComponent),
         },
-    ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n        <div\n            style=\"position: relative\"\n            [style.width.px]=\"componentHeight === ControlHeight.Small ? 160 : componentHeight === ControlHeight.Large ? 230 : 180\">\n            <div\n                class=\"datetime-textbox input-group\"\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\n                <input\n                    id=\"{{ name }}\"\n                    name=\"{{ name }}\"\n                    type=\"text\"\n                    class=\"form-control date-control\"\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\n                    [ngClass]=\"[componentHeight | toControlHeight]\"\n                    [imask]=\"imaskDate\"\n                    [attr.placeholder]=\"placeholder\"\n                    [value]=\"valuestring\"\n                    (blur)=\"onTouch()\"\n                    (accept)=\"setValueString($event)\"\n                    [disabled]=\"isdisabled\"\n                    (click)=\"showDateSelector()\" />\n                <span class=\"input-group-btn\">\n                    <button\n                        #pickerbutton\n                        class=\"btn btn-default\"\n                        type=\"button\"\n                        (click)=\"showDateSelector()\"\n                        [disabled]=\"isdisabled\">\n                        <i [class]=\"IconSelector\"></i>\n                    </button>\n                </span>\n            </div>\n            <p\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"help-block\">\n                {{ helptext }}\n            </p>\n            <div\n                class=\"help-block help-block-error\"\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                {{ GetErrorMessage() | async }}\n            </div>\n\n            <div\n                #picker\n                *ngIf=\"_showselector\">\n                <div\n                    class=\"popover in\"\n                    role=\"tooltip\"\n                    style=\"display: block; max-width: unset; margin: 0\"\n                    [class.bottom]=\"GetPickerPosition() == TooltipPosition.bottom || GetPickerPosition() == TooltipPosition.bottomend\"\n                    [class.top]=\"GetPickerPosition() == TooltipPosition.top || GetPickerPosition() == TooltipPosition.topend\"\n                    [style.left.px]=\"posPopupLeft\"\n                    [style.top.px]=\"posPopupTop\">\n                    <div\n                        #pickerarrow\n                        style=\"margin: 0\"\n                        class=\"arrow\"\n                        [style.top.px]=\"posArrowTop\"\n                        [style.left.px]=\"posArrowLeft\">\n                    </div>\n\n                    <div class=\"popover-content\">\n                        <sac-dateselector\n                            *ngIf=\"_showselector\"\n                            [initialvalue]=\"value\"\n                            (selectdate)=\"dateselect($event)\"\n                            dateselection=\"true\"\n                            timeselection=\"true\"></sac-dateselector>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-static\"\n            style=\"margin-left: 5px\">\n            <sac-tooltip\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [class]=\"HelptextTooltipIcon\"\n                    style=\"margin-left: 5px; margin-right: 5px\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\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: { "toLabelHeight": SacToLabelHeightPipe, "toLabelWidthCss": SacToLabelWidthCssPipe, "toControlWidthCss": SacToControlWidthCssPipe, "toControlHeight": SacToControlHeightPipe, "async": i3.AsyncPipe } });
+    ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n        <div\n            style=\"position: relative\"\n            [style.width.px]=\"componentHeight === ControlHeight.Small ? 160 : componentHeight === ControlHeight.Large ? 230 : 180\">\n            <div\n                class=\"datetime-textbox input-group\"\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\n                <input\n                    id=\"{{ name }}\"\n                    name=\"{{ name }}\"\n                    type=\"text\"\n                    class=\"form-control date-control\"\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\n                    [ngClass]=\"[componentHeight | toControlHeight]\"\n                    [imask]=\"imaskDate\"\n                    [attr.placeholder]=\"placeholder\"\n                    [value]=\"valuestring\"\n                    (blur)=\"onTouch()\"\n                    (accept)=\"setValueString($event)\"\n                    [disabled]=\"isdisabled\"\n                    (click)=\"showDateSelector()\" />\n                <span class=\"input-group-btn\">\n                    <button\n                        #pickerbutton\n                        class=\"btn btn-default\"\n                        type=\"button\"\n                        (click)=\"showDateSelector()\"\n                        [disabled]=\"isdisabled\">\n                        <i [class]=\"IconSelector\"></i>\n                    </button>\n                </span>\n            </div>\n            <p\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"help-block\">\n                {{ helptext }}\n            </p>\n            <div\n                class=\"help-block help-block-error\"\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                {{ GetErrorMessage() | async }}\n            </div>\n\n            <div\n                #picker\n                *ngIf=\"_showselector\">\n                <div\n                    class=\"popover in\"\n                    role=\"tooltip\"\n                    style=\"display: block; max-width: unset; margin: 0\"\n                    [class.bottom]=\"GetPickerPosition() === TooltipPosition.bottom || GetPickerPosition() === TooltipPosition.bottomend\"\n                    [class.top]=\"GetPickerPosition() === TooltipPosition.top || GetPickerPosition() === TooltipPosition.topend\"\n                    [style.left.px]=\"posPopupLeft\"\n                    [style.top.px]=\"posPopupTop\">\n                    <div\n                        #pickerarrow\n                        style=\"margin: 0\"\n                        class=\"arrow\"\n                        [style.top.px]=\"posArrowTop\"\n                        [style.left.px]=\"posArrowLeft\">\n                    </div>\n\n                    <div class=\"popover-content\">\n                        <sac-dateselector\n                            *ngIf=\"_showselector\"\n                            [initialvalue]=\"value\"\n                            (selectdate)=\"dateselect($event)\"\n                            dateselection=\"true\"\n                            timeselection=\"true\"></sac-dateselector>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-static\"\n            style=\"margin-left: 5px\">\n            <sac-tooltip\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [class]=\"HelptextTooltipIcon\"\n                    style=\"margin-left: 5px; margin-right: 5px\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\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$1.IMaskDirective, selector: "[imask]", inputs: ["imaskElement", "imask", "unmask"], outputs: ["accept", "complete"], exportAs: ["imask"] }], pipes: { "toLabelHeight": SacToLabelHeightPipe, "testingattribute": i5.SacTestingAttributePipe, "toLabelWidthCss": SacToLabelWidthCssPipe, "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: [
@@ -919,7 +896,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => SacDateTimeComponent),
                         },
-                    ], template: "<div\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n        <div\n            style=\"position: relative\"\n            [style.width.px]=\"componentHeight === ControlHeight.Small ? 160 : componentHeight === ControlHeight.Large ? 230 : 180\">\n            <div\n                class=\"datetime-textbox input-group\"\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\n                <input\n                    id=\"{{ name }}\"\n                    name=\"{{ name }}\"\n                    type=\"text\"\n                    class=\"form-control date-control\"\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\n                    [ngClass]=\"[componentHeight | toControlHeight]\"\n                    [imask]=\"imaskDate\"\n                    [attr.placeholder]=\"placeholder\"\n                    [value]=\"valuestring\"\n                    (blur)=\"onTouch()\"\n                    (accept)=\"setValueString($event)\"\n                    [disabled]=\"isdisabled\"\n                    (click)=\"showDateSelector()\" />\n                <span class=\"input-group-btn\">\n                    <button\n                        #pickerbutton\n                        class=\"btn btn-default\"\n                        type=\"button\"\n                        (click)=\"showDateSelector()\"\n                        [disabled]=\"isdisabled\">\n                        <i [class]=\"IconSelector\"></i>\n                    </button>\n                </span>\n            </div>\n            <p\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"help-block\">\n                {{ helptext }}\n            </p>\n            <div\n                class=\"help-block help-block-error\"\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                {{ GetErrorMessage() | async }}\n            </div>\n\n            <div\n                #picker\n                *ngIf=\"_showselector\">\n                <div\n                    class=\"popover in\"\n                    role=\"tooltip\"\n                    style=\"display: block; max-width: unset; margin: 0\"\n                    [class.bottom]=\"GetPickerPosition() == TooltipPosition.bottom || GetPickerPosition() == TooltipPosition.bottomend\"\n                    [class.top]=\"GetPickerPosition() == TooltipPosition.top || GetPickerPosition() == TooltipPosition.topend\"\n                    [style.left.px]=\"posPopupLeft\"\n                    [style.top.px]=\"posPopupTop\">\n                    <div\n                        #pickerarrow\n                        style=\"margin: 0\"\n                        class=\"arrow\"\n                        [style.top.px]=\"posArrowTop\"\n                        [style.left.px]=\"posArrowLeft\">\n                    </div>\n\n                    <div class=\"popover-content\">\n                        <sac-dateselector\n                            *ngIf=\"_showselector\"\n                            [initialvalue]=\"value\"\n                            (selectdate)=\"dateselect($event)\"\n                            dateselection=\"true\"\n                            timeselection=\"true\"></sac-dateselector>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-static\"\n            style=\"margin-left: 5px\">\n            <sac-tooltip\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [class]=\"HelptextTooltipIcon\"\n                    style=\"margin-left: 5px; margin-right: 5px\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n" }]
+                    ], template: "<div\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n        <div\n            style=\"position: relative\"\n            [style.width.px]=\"componentHeight === ControlHeight.Small ? 160 : componentHeight === ControlHeight.Large ? 230 : 180\">\n            <div\n                class=\"datetime-textbox input-group\"\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\n                <input\n                    id=\"{{ name }}\"\n                    name=\"{{ name }}\"\n                    type=\"text\"\n                    class=\"form-control date-control\"\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\n                    [ngClass]=\"[componentHeight | toControlHeight]\"\n                    [imask]=\"imaskDate\"\n                    [attr.placeholder]=\"placeholder\"\n                    [value]=\"valuestring\"\n                    (blur)=\"onTouch()\"\n                    (accept)=\"setValueString($event)\"\n                    [disabled]=\"isdisabled\"\n                    (click)=\"showDateSelector()\" />\n                <span class=\"input-group-btn\">\n                    <button\n                        #pickerbutton\n                        class=\"btn btn-default\"\n                        type=\"button\"\n                        (click)=\"showDateSelector()\"\n                        [disabled]=\"isdisabled\">\n                        <i [class]=\"IconSelector\"></i>\n                    </button>\n                </span>\n            </div>\n            <p\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"help-block\">\n                {{ helptext }}\n            </p>\n            <div\n                class=\"help-block help-block-error\"\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                {{ GetErrorMessage() | async }}\n            </div>\n\n            <div\n                #picker\n                *ngIf=\"_showselector\">\n                <div\n                    class=\"popover in\"\n                    role=\"tooltip\"\n                    style=\"display: block; max-width: unset; margin: 0\"\n                    [class.bottom]=\"GetPickerPosition() === TooltipPosition.bottom || GetPickerPosition() === TooltipPosition.bottomend\"\n                    [class.top]=\"GetPickerPosition() === TooltipPosition.top || GetPickerPosition() === TooltipPosition.topend\"\n                    [style.left.px]=\"posPopupLeft\"\n                    [style.top.px]=\"posPopupTop\">\n                    <div\n                        #pickerarrow\n                        style=\"margin: 0\"\n                        class=\"arrow\"\n                        [style.top.px]=\"posArrowTop\"\n                        [style.left.px]=\"posArrowLeft\">\n                    </div>\n\n                    <div class=\"popover-content\">\n                        <sac-dateselector\n                            *ngIf=\"_showselector\"\n                            [initialvalue]=\"value\"\n                            (selectdate)=\"dateselect($event)\"\n                            dateselection=\"true\"\n                            timeselection=\"true\"></sac-dateselector>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-static\"\n            style=\"margin-left: 5px\">\n            <sac-tooltip\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [class]=\"HelptextTooltipIcon\"\n                    style=\"margin-left: 5px; margin-right: 5px\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: SacFormLayoutDirective, decorators: [{
                     type: Host
                 }, {
@@ -951,7 +928,7 @@ SacTimeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
             multi: true,
             useExisting: forwardRef(() => SacTimeComponent),
         },
-    ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n        <div\n            style=\"position: relative\"\n            [style.width.px]=\"componentHeight === ControlHeight.Small ? 120 : componentHeight === ControlHeight.Large ? 160 : 140\">\n            <div\n                class=\"datetime-textbox input-group\"\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\n                <input\n                    id=\"{{ name }}\"\n                    name=\"{{ name }}\"\n                    type=\"text\"\n                    class=\"form-control time-control\"\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\n                    [ngClass]=\"[componentHeight | toControlHeight]\"\n                    [imask]=\"imaskDate\"\n                    [attr.placeholder]=\"placeholder\"\n                    [value]=\"valuestring\"\n                    (blur)=\"onTouch()\"\n                    (accept)=\"setValueString($event)\"\n                    [disabled]=\"isdisabled\"\n                    (click)=\"showTimeSelector()\"\n                    maxlength=\"6\"\n                    size=\"6\" />\n                <span class=\"input-group-btn\">\n                    <button\n                        #pickerbutton\n                        class=\"btn btn-default\"\n                        type=\"button\"\n                        (click)=\"showTimeSelector()\"\n                        [disabled]=\"isdisabled\">\n                        <i [class]=\"IconSelector\"></i>\n                    </button>\n                </span>\n            </div>\n            <p\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"help-block\">\n                {{ helptext }}\n            </p>\n            <div\n                class=\"help-block help-block-error\"\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                {{ GetErrorMessage() | async }}\n            </div>\n\n            <div\n                #picker\n                *ngIf=\"_showselector\">\n                <div\n                    class=\"popover in\"\n                    role=\"tooltip\"\n                    style=\"display: block; max-width: unset; margin: 0\"\n                    [class.bottom]=\"GetPickerPosition() == TooltipPosition.bottom || GetPickerPosition() == TooltipPosition.bottomend\"\n                    [class.top]=\"GetPickerPosition() == TooltipPosition.top || GetPickerPosition() == TooltipPosition.topend\"\n                    [style.left.px]=\"posPopupLeft\"\n                    [style.top.px]=\"posPopupTop\">\n                    <div\n                        #pickerarrow\n                        style=\"margin: 0\"\n                        class=\"arrow\"\n                        [style.top.px]=\"posArrowTop\"\n                        [style.left.px]=\"posArrowLeft\">\n                    </div>\n\n                    <div class=\"popover-content\">\n                        <sac-dateselector\n                            *ngIf=\"_showselector\"\n                            [initialvalue]=\"value\"\n                            (selectdate)=\"timeselect($event)\"\n                            timeselection=\"true\"></sac-dateselector>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-static\"\n            style=\"margin-left: 5px\">\n            <sac-tooltip\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [class]=\"HelptextTooltipIcon\"\n                    style=\"margin-left: 5px; margin-right: 5px\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\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: { "toLabelHeight": SacToLabelHeightPipe, "toLabelWidthCss": SacToLabelWidthCssPipe, "toControlWidthCss": SacToControlWidthCssPipe, "toControlHeight": SacToControlHeightPipe, "async": i3.AsyncPipe } });
+    ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n        <div\n            style=\"position: relative\"\n            [style.width.px]=\"componentHeight === ControlHeight.Small ? 120 : componentHeight === ControlHeight.Large ? 160 : 140\">\n            <div\n                class=\"datetime-textbox input-group\"\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\n                <input\n                    id=\"{{ name }}\"\n                    name=\"{{ name }}\"\n                    type=\"text\"\n                    class=\"form-control time-control\"\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\n                    [ngClass]=\"[componentHeight | toControlHeight]\"\n                    [imask]=\"imaskDate\"\n                    [attr.placeholder]=\"placeholder\"\n                    [value]=\"valuestring\"\n                    (blur)=\"onTouch()\"\n                    (accept)=\"setValueString($event)\"\n                    [disabled]=\"isdisabled\"\n                    (click)=\"showTimeSelector()\"\n                    maxlength=\"6\"\n                    size=\"6\" />\n                <span class=\"input-group-btn\">\n                    <button\n                        #pickerbutton\n                        class=\"btn btn-default\"\n                        type=\"button\"\n                        (click)=\"showTimeSelector()\"\n                        [disabled]=\"isdisabled\">\n                        <i [class]=\"IconSelector\"></i>\n                    </button>\n                </span>\n            </div>\n            <p\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"help-block\">\n                {{ helptext }}\n            </p>\n            <div\n                class=\"help-block help-block-error\"\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                {{ GetErrorMessage() | async }}\n            </div>\n\n            <div\n                #picker\n                *ngIf=\"_showselector\">\n                <div\n                    class=\"popover in\"\n                    role=\"tooltip\"\n                    style=\"display: block; max-width: unset; margin: 0\"\n                    [class.bottom]=\"GetPickerPosition() === TooltipPosition.bottom || GetPickerPosition() === TooltipPosition.bottomend\"\n                    [class.top]=\"GetPickerPosition() === TooltipPosition.top || GetPickerPosition() === TooltipPosition.topend\"\n                    [style.left.px]=\"posPopupLeft\"\n                    [style.top.px]=\"posPopupTop\">\n                    <div\n                        #pickerarrow\n                        style=\"margin: 0\"\n                        class=\"arrow\"\n                        [style.top.px]=\"posArrowTop\"\n                        [style.left.px]=\"posArrowLeft\">\n                    </div>\n\n                    <div class=\"popover-content\">\n                        <sac-dateselector\n                            *ngIf=\"_showselector\"\n                            [initialvalue]=\"value\"\n                            (selectdate)=\"timeselect($event)\"\n                            timeselection=\"true\"></sac-dateselector>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-static\"\n            style=\"margin-left: 5px\">\n            <sac-tooltip\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [class]=\"HelptextTooltipIcon\"\n                    style=\"margin-left: 5px; margin-right: 5px\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\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$1.IMaskDirective, selector: "[imask]", inputs: ["imaskElement", "imask", "unmask"], outputs: ["accept", "complete"], exportAs: ["imask"] }], pipes: { "toLabelHeight": SacToLabelHeightPipe, "testingattribute": i5.SacTestingAttributePipe, "toLabelWidthCss": SacToLabelWidthCssPipe, "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: [
@@ -965,7 +942,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => SacTimeComponent),
                         },
-                    ], template: "<div\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n        <div\n            style=\"position: relative\"\n            [style.width.px]=\"componentHeight === ControlHeight.Small ? 120 : componentHeight === ControlHeight.Large ? 160 : 140\">\n            <div\n                class=\"datetime-textbox input-group\"\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\n                <input\n                    id=\"{{ name }}\"\n                    name=\"{{ name }}\"\n                    type=\"text\"\n                    class=\"form-control time-control\"\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\n                    [ngClass]=\"[componentHeight | toControlHeight]\"\n                    [imask]=\"imaskDate\"\n                    [attr.placeholder]=\"placeholder\"\n                    [value]=\"valuestring\"\n                    (blur)=\"onTouch()\"\n                    (accept)=\"setValueString($event)\"\n                    [disabled]=\"isdisabled\"\n                    (click)=\"showTimeSelector()\"\n                    maxlength=\"6\"\n                    size=\"6\" />\n                <span class=\"input-group-btn\">\n                    <button\n                        #pickerbutton\n                        class=\"btn btn-default\"\n                        type=\"button\"\n                        (click)=\"showTimeSelector()\"\n                        [disabled]=\"isdisabled\">\n                        <i [class]=\"IconSelector\"></i>\n                    </button>\n                </span>\n            </div>\n            <p\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"help-block\">\n                {{ helptext }}\n            </p>\n            <div\n                class=\"help-block help-block-error\"\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                {{ GetErrorMessage() | async }}\n            </div>\n\n            <div\n                #picker\n                *ngIf=\"_showselector\">\n                <div\n                    class=\"popover in\"\n                    role=\"tooltip\"\n                    style=\"display: block; max-width: unset; margin: 0\"\n                    [class.bottom]=\"GetPickerPosition() == TooltipPosition.bottom || GetPickerPosition() == TooltipPosition.bottomend\"\n                    [class.top]=\"GetPickerPosition() == TooltipPosition.top || GetPickerPosition() == TooltipPosition.topend\"\n                    [style.left.px]=\"posPopupLeft\"\n                    [style.top.px]=\"posPopupTop\">\n                    <div\n                        #pickerarrow\n                        style=\"margin: 0\"\n                        class=\"arrow\"\n                        [style.top.px]=\"posArrowTop\"\n                        [style.left.px]=\"posArrowLeft\">\n                    </div>\n\n                    <div class=\"popover-content\">\n                        <sac-dateselector\n                            *ngIf=\"_showselector\"\n                            [initialvalue]=\"value\"\n                            (selectdate)=\"timeselect($event)\"\n                            timeselection=\"true\"></sac-dateselector>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-static\"\n            style=\"margin-left: 5px\">\n            <sac-tooltip\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [class]=\"HelptextTooltipIcon\"\n                    style=\"margin-left: 5px; margin-right: 5px\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n" }]
+                    ], template: "<div\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n        <div\n            style=\"position: relative\"\n            [style.width.px]=\"componentHeight === ControlHeight.Small ? 120 : componentHeight === ControlHeight.Large ? 160 : 140\">\n            <div\n                class=\"datetime-textbox input-group\"\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\n                <input\n                    id=\"{{ name }}\"\n                    name=\"{{ name }}\"\n                    type=\"text\"\n                    class=\"form-control time-control\"\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\n                    [ngClass]=\"[componentHeight | toControlHeight]\"\n                    [imask]=\"imaskDate\"\n                    [attr.placeholder]=\"placeholder\"\n                    [value]=\"valuestring\"\n                    (blur)=\"onTouch()\"\n                    (accept)=\"setValueString($event)\"\n                    [disabled]=\"isdisabled\"\n                    (click)=\"showTimeSelector()\"\n                    maxlength=\"6\"\n                    size=\"6\" />\n                <span class=\"input-group-btn\">\n                    <button\n                        #pickerbutton\n                        class=\"btn btn-default\"\n                        type=\"button\"\n                        (click)=\"showTimeSelector()\"\n                        [disabled]=\"isdisabled\">\n                        <i [class]=\"IconSelector\"></i>\n                    </button>\n                </span>\n            </div>\n            <p\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"help-block\">\n                {{ helptext }}\n            </p>\n            <div\n                class=\"help-block help-block-error\"\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                {{ GetErrorMessage() | async }}\n            </div>\n\n            <div\n                #picker\n                *ngIf=\"_showselector\">\n                <div\n                    class=\"popover in\"\n                    role=\"tooltip\"\n                    style=\"display: block; max-width: unset; margin: 0\"\n                    [class.bottom]=\"GetPickerPosition() === TooltipPosition.bottom || GetPickerPosition() === TooltipPosition.bottomend\"\n                    [class.top]=\"GetPickerPosition() === TooltipPosition.top || GetPickerPosition() === TooltipPosition.topend\"\n                    [style.left.px]=\"posPopupLeft\"\n                    [style.top.px]=\"posPopupTop\">\n                    <div\n                        #pickerarrow\n                        style=\"margin: 0\"\n                        class=\"arrow\"\n                        [style.top.px]=\"posArrowTop\"\n                        [style.left.px]=\"posArrowLeft\">\n                    </div>\n\n                    <div class=\"popover-content\">\n                        <sac-dateselector\n                            *ngIf=\"_showselector\"\n                            [initialvalue]=\"value\"\n                            (selectdate)=\"timeselect($event)\"\n                            timeselection=\"true\"></sac-dateselector>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-static\"\n            style=\"margin-left: 5px\">\n            <sac-tooltip\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [class]=\"HelptextTooltipIcon\"\n                    style=\"margin-left: 5px; margin-right: 5px\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: SacFormLayoutDirective, decorators: [{
                     type: Host
                 }, {
@@ -975,82 +952,73 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
 class SACBootstrap3DateTimeModule {
 }
 SACBootstrap3DateTimeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3DateTimeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SACBootstrap3DateTimeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3DateTimeModule, declarations: [SacDateComponent,
-        SacDateTimeComponent,
-        SacTimeComponent,
-        SacDateSelectorComponent], imports: [CommonModule,
+SACBootstrap3DateTimeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3DateTimeModule, declarations: [SacDateComponent, SacDateTimeComponent, SacTimeComponent, SacDateSelectorComponent], imports: [CommonModule,
         IMaskModule,
         SACBootstrap3LayoutModule,
-        SACBootstrap3TooltipModule], exports: [SacDateComponent,
-        SacDateTimeComponent,
-        SacTimeComponent,
-        SacDateSelectorComponent] });
+        SACBootstrap3TooltipModule,
+        SACCommonUtliltiesModule], exports: [SacDateComponent, SacDateTimeComponent, SacTimeComponent, SacDateSelectorComponent] });
 SACBootstrap3DateTimeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3DateTimeModule, imports: [[
             CommonModule,
             IMaskModule,
             SACBootstrap3LayoutModule,
             SACBootstrap3TooltipModule,
+            SACCommonUtliltiesModule,
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3DateTimeModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [
-                        SacDateComponent,
-                        SacDateTimeComponent,
-                        SacTimeComponent,
-                        SacDateSelectorComponent,
-                    ],
+                    declarations: [SacDateComponent, SacDateTimeComponent, SacTimeComponent, SacDateSelectorComponent],
                     imports: [
                         CommonModule,
                         IMaskModule,
                         SACBootstrap3LayoutModule,
                         SACBootstrap3TooltipModule,
+                        SACCommonUtliltiesModule,
                     ],
-                    exports: [
-                        SacDateComponent,
-                        SacDateTimeComponent,
-                        SacTimeComponent,
-                        SacDateSelectorComponent,
-                    ],
+                    exports: [SacDateComponent, SacDateTimeComponent, SacTimeComponent, SacDateSelectorComponent],
                 }]
         }] });
 
 class SacPagingComponent extends SacPagingCommon {
+    // #region Constructors
     /**
      * Konstruktor
      */
-    constructor(injector) { super(injector); }
+    constructor(injector) {
+        super(injector);
+    }
 }
 SacPagingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacPagingComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
 SacPagingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacPagingComponent, selector: "sac-paging", providers: [
         { provide: NG_VALUE_ACCESSOR, multi: true, useExisting: SacPagingComponent },
-        { provide: NG_VALIDATORS, multi: true, useExisting: forwardRef(() => SacPagingComponent) }
-    ], usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n    <div\n        class=\"pager-nav col-sm-4\"\n        id=\"{{ name }}\">\n        <ul\n            class=\"pagination\"\n            style=\"margin: 10px 0\">\n            <li [ngClass]=\"{ 'aspNetDisabled disabled': activePageIndex === firstPageIndex }\">\n                <a (click)=\"firstPage()\">\u00AB</a>\n            </li>\n            <li\n                *ngFor=\"let page of paginators; let i = index\"\n                [ngClass]=\"{ active: page === activePageIndex }\">\n                <a (click)=\"changePage(page)\">{{ page + 1 }}</a>\n            </li>\n            <li [ngClass]=\"{ 'aspNetDisabled disabled': activePageIndex === lastPageIndex }\">\n                <a (click)=\"lastPage()\">\u00BB</a>\n            </li>\n        </ul>\n    </div>\n    <div\n        class=\"col-sm-4 text-center\"\n        style=\"margin: 20px 0\">\n        {{ PagingText | async }}\n    </div>\n    <div\n        class=\"col-sm-4 text-right\"\n        *ngIf=\"!pagesizedisabled\"\n        style=\"margin: 12px 0\">\n        <div class=\"form-inline\">\n            <div\n                class=\"form-group\"\n                id=\"{{ name }}_size\">\n                <select\n                    class=\"form-control form-control-sm\"\n                    style=\"width: 85px\"\n                    [ngModel]=\"pageSize\"\n                    (ngModelChange)=\"changePageSize($event)\">\n                    <option\n                        [ngValue]=\"size\"\n                        *ngFor=\"let size of getPageSizes\">\n                        {{ size }}\n                    </option>\n                </select>\n                <span style=\"margin-left: 5px\">{{ PageSizeText | async }}</span>\n            </div>\n        </div>\n    </div>\n</div>\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: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }], pipes: { "async": i3.AsyncPipe } });
+        { provide: NG_VALIDATORS, multi: true, useExisting: forwardRef(() => SacPagingComponent) },
+    ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"row\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <div\n        class=\"pager-nav col-sm-4\"\n        id=\"{{ name }}\">\n        <ul\n            class=\"pagination\"\n            style=\"margin: 10px 0\">\n            <li [ngClass]=\"{ 'aspNetDisabled disabled': activePageIndex === firstPageIndex }\">\n                <a (click)=\"firstPage()\">\u00AB</a>\n            </li>\n            <li\n                *ngFor=\"let page of paginators; let i = index\"\n                [ngClass]=\"{ active: page === activePageIndex }\">\n                <a (click)=\"changePage(page)\">{{ page + 1 }}</a>\n            </li>\n            <li [ngClass]=\"{ 'aspNetDisabled disabled': activePageIndex === lastPageIndex }\">\n                <a (click)=\"lastPage()\">\u00BB</a>\n            </li>\n        </ul>\n    </div>\n    <div\n        class=\"col-sm-4 text-center\"\n        style=\"margin: 20px 0\">\n        {{ PagingText | async }}\n    </div>\n    <div\n        class=\"col-sm-4 text-right\"\n        *ngIf=\"!pagesizedisabled\"\n        style=\"margin: 12px 0\">\n        <div class=\"form-inline\">\n            <div\n                class=\"form-group\"\n                id=\"{{ name }}_size\">\n                <select\n                    class=\"form-control form-control-sm\"\n                    style=\"width: 85px\"\n                    id=\"{{ name }}_pagesize\"\n                    [ngModel]=\"pageSize\"\n                    (ngModelChange)=\"changePageSize($event)\">\n                    <option\n                        [ngValue]=\"size\"\n                        *ngFor=\"let size of getPageSizes\">\n                        {{ size }}\n                    </option>\n                </select>\n                <span style=\"margin-left: 5px\">{{ PageSizeText | async }}</span>\n            </div>\n        </div>\n    </div>\n</div>\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: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }], pipes: { "testingattribute": i5.SacTestingAttributePipe, "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: [
                         { provide: NG_VALUE_ACCESSOR, multi: true, useExisting: SacPagingComponent },
-                        { provide: NG_VALIDATORS, multi: true, useExisting: forwardRef(() => SacPagingComponent) }
-                    ], template: "<div class=\"row\">\n    <div\n        class=\"pager-nav col-sm-4\"\n        id=\"{{ name }}\">\n        <ul\n            class=\"pagination\"\n            style=\"margin: 10px 0\">\n            <li [ngClass]=\"{ 'aspNetDisabled disabled': activePageIndex === firstPageIndex }\">\n                <a (click)=\"firstPage()\">\u00AB</a>\n            </li>\n            <li\n                *ngFor=\"let page of paginators; let i = index\"\n                [ngClass]=\"{ active: page === activePageIndex }\">\n                <a (click)=\"changePage(page)\">{{ page + 1 }}</a>\n            </li>\n            <li [ngClass]=\"{ 'aspNetDisabled disabled': activePageIndex === lastPageIndex }\">\n                <a (click)=\"lastPage()\">\u00BB</a>\n            </li>\n        </ul>\n    </div>\n    <div\n        class=\"col-sm-4 text-center\"\n        style=\"margin: 20px 0\">\n        {{ PagingText | async }}\n    </div>\n    <div\n        class=\"col-sm-4 text-right\"\n        *ngIf=\"!pagesizedisabled\"\n        style=\"margin: 12px 0\">\n        <div class=\"form-inline\">\n            <div\n                class=\"form-group\"\n                id=\"{{ name }}_size\">\n                <select\n                    class=\"form-control form-control-sm\"\n                    style=\"width: 85px\"\n                    [ngModel]=\"pageSize\"\n                    (ngModelChange)=\"changePageSize($event)\">\n                    <option\n                        [ngValue]=\"size\"\n                        *ngFor=\"let size of getPageSizes\">\n                        {{ size }}\n                    </option>\n                </select>\n                <span style=\"margin-left: 5px\">{{ PageSizeText | async }}</span>\n            </div>\n        </div>\n    </div>\n</div>\n" }]
+                        { provide: NG_VALIDATORS, multi: true, useExisting: forwardRef(() => SacPagingComponent) },
+                    ], template: "<div\n    class=\"row\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <div\n        class=\"pager-nav col-sm-4\"\n        id=\"{{ name }}\">\n        <ul\n            class=\"pagination\"\n            style=\"margin: 10px 0\">\n            <li [ngClass]=\"{ 'aspNetDisabled disabled': activePageIndex === firstPageIndex }\">\n                <a (click)=\"firstPage()\">\u00AB</a>\n            </li>\n            <li\n                *ngFor=\"let page of paginators; let i = index\"\n                [ngClass]=\"{ active: page === activePageIndex }\">\n                <a (click)=\"changePage(page)\">{{ page + 1 }}</a>\n            </li>\n            <li [ngClass]=\"{ 'aspNetDisabled disabled': activePageIndex === lastPageIndex }\">\n                <a (click)=\"lastPage()\">\u00BB</a>\n            </li>\n        </ul>\n    </div>\n    <div\n        class=\"col-sm-4 text-center\"\n        style=\"margin: 20px 0\">\n        {{ PagingText | async }}\n    </div>\n    <div\n        class=\"col-sm-4 text-right\"\n        *ngIf=\"!pagesizedisabled\"\n        style=\"margin: 12px 0\">\n        <div class=\"form-inline\">\n            <div\n                class=\"form-group\"\n                id=\"{{ name }}_size\">\n                <select\n                    class=\"form-control form-control-sm\"\n                    style=\"width: 85px\"\n                    id=\"{{ name }}_pagesize\"\n                    [ngModel]=\"pageSize\"\n                    (ngModelChange)=\"changePageSize($event)\">\n                    <option\n                        [ngValue]=\"size\"\n                        *ngFor=\"let size of getPageSizes\">\n                        {{ size }}\n                    </option>\n                </select>\n                <span style=\"margin-left: 5px\">{{ PageSizeText | async }}</span>\n            </div>\n        </div>\n    </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i0.Injector }]; } });
 
 class SacGridComponent extends SacGridCommon {
     constructor() {
         super(...arguments);
+        // #region Properties
         this.ellipsis = false;
     }
 }
 SacGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacGridComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
 SacGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacGridComponent, selector: "sac-grid", providers: [
         { provide: NG_VALUE_ACCESSOR, multi: true, useExisting: SacGridComponent },
-        { provide: NG_VALIDATORS, multi: true, useExisting: forwardRef(() => SacGridComponent) }
-    ], queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<table class=\"table table-striped table-condensed table-hover\" id=\"{{name}}\">\n  <thead>\n    <tr>\n      <ng-container\n        *ngTemplateOutlet=\"template; context { row: {}, type: 'header'}\"\n      >\n      </ng-container>\n    </tr>\n  </thead>\n  <tbody>\n    <ng-container *ngFor=\"let item of value; let i=index\">\n      <tr>\n        <ng-container\n          *ngTemplateOutlet=\"template; context { row: item, type: 'body'}\"\n        >\n        </ng-container>\n      </tr>\n    </ng-container>\n    <tr\n      *ngIf=\"value === undefined || value === null || value.length === 0\"\n      data-e2e=\"emptyrow\"\n    >\n      <td [attr.colspan]=\"ColumnCount\">{{emptytext}}</td>\n    </tr>\n  </tbody>\n  <tfoot *ngIf=\"pagerdata\">\n    <tr>\n      <td [attr.colspan]=\"ColumnCount\">\n        <div class=\"container-fluid\">\n          <sac-paging\n            name=\"{{name}}Paging\"\n            (paging)=\"pageChange($event)\"\n            [pagerdata]=\"pagerdata\"\n            [pagingtext]=\"pagingtext\"\n            [pagesizetext]=\"pagesizetext\"\n          ></sac-paging>\n        </div>\n      </td>\n    </tr>\n  </tfoot>\n</table>\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"] }] });
+        { provide: NG_VALIDATORS, multi: true, useExisting: forwardRef(() => SacGridComponent) },
+    ], queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<table\n    class=\"table table-striped table-condensed table-hover\"\n    id=\"{{ name }}\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <thead>\n        <tr>\n            <ng-container *ngTemplateOutlet=\"template; context: { row: {}, type: 'header' }\"> </ng-container>\n        </tr>\n    </thead>\n    <tbody>\n        <ng-container *ngFor=\"let item of value; let i = index\">\n            <tr>\n                <ng-container *ngTemplateOutlet=\"template; context: { row: item, type: 'body' }\"> </ng-container>\n            </tr>\n        </ng-container>\n        <tr\n            *ngIf=\"value === undefined || value === null || value.length === 0\"\n            data-e2e=\"emptyrow\">\n            <td [attr.colspan]=\"ColumnCount\">{{ emptytext }}</td>\n        </tr>\n    </tbody>\n    <tfoot *ngIf=\"pagerdata\">\n        <tr>\n            <td [attr.colspan]=\"ColumnCount\">\n                <div class=\"container-fluid\">\n                    <sac-paging\n                        name=\"{{ name }}Paging\"\n                        (paging)=\"pageChange($event)\"\n                        [pagerdata]=\"pagerdata\"\n                        [pagingtext]=\"pagingtext\"\n                        [pagesizes]=\"pagesizes\"\n                        [pagesizetext]=\"pagesizetext\"\n                        [pagesizedisabled]=\"pagesizedisabled\"></sac-paging>\n                </div>\n            </td>\n        </tr>\n    </tfoot>\n</table>\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"] }], pipes: { "testingattribute": i5.SacTestingAttributePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacGridComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sac-grid', providers: [
                         { provide: NG_VALUE_ACCESSOR, multi: true, useExisting: SacGridComponent },
-                        { provide: NG_VALIDATORS, multi: true, useExisting: forwardRef(() => SacGridComponent) }
-                    ], template: "<table class=\"table table-striped table-condensed table-hover\" id=\"{{name}}\">\n  <thead>\n    <tr>\n      <ng-container\n        *ngTemplateOutlet=\"template; context { row: {}, type: 'header'}\"\n      >\n      </ng-container>\n    </tr>\n  </thead>\n  <tbody>\n    <ng-container *ngFor=\"let item of value; let i=index\">\n      <tr>\n        <ng-container\n          *ngTemplateOutlet=\"template; context { row: item, type: 'body'}\"\n        >\n        </ng-container>\n      </tr>\n    </ng-container>\n    <tr\n      *ngIf=\"value === undefined || value === null || value.length === 0\"\n      data-e2e=\"emptyrow\"\n    >\n      <td [attr.colspan]=\"ColumnCount\">{{emptytext}}</td>\n    </tr>\n  </tbody>\n  <tfoot *ngIf=\"pagerdata\">\n    <tr>\n      <td [attr.colspan]=\"ColumnCount\">\n        <div class=\"container-fluid\">\n          <sac-paging\n            name=\"{{name}}Paging\"\n            (paging)=\"pageChange($event)\"\n            [pagerdata]=\"pagerdata\"\n            [pagingtext]=\"pagingtext\"\n            [pagesizetext]=\"pagesizetext\"\n          ></sac-paging>\n        </div>\n      </td>\n    </tr>\n  </tfoot>\n</table>\n" }]
+                        { provide: NG_VALIDATORS, multi: true, useExisting: forwardRef(() => SacGridComponent) },
+                    ], template: "<table\n    class=\"table table-striped table-condensed table-hover\"\n    id=\"{{ name }}\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <thead>\n        <tr>\n            <ng-container *ngTemplateOutlet=\"template; context: { row: {}, type: 'header' }\"> </ng-container>\n        </tr>\n    </thead>\n    <tbody>\n        <ng-container *ngFor=\"let item of value; let i = index\">\n            <tr>\n                <ng-container *ngTemplateOutlet=\"template; context: { row: item, type: 'body' }\"> </ng-container>\n            </tr>\n        </ng-container>\n        <tr\n            *ngIf=\"value === undefined || value === null || value.length === 0\"\n            data-e2e=\"emptyrow\">\n            <td [attr.colspan]=\"ColumnCount\">{{ emptytext }}</td>\n        </tr>\n    </tbody>\n    <tfoot *ngIf=\"pagerdata\">\n        <tr>\n            <td [attr.colspan]=\"ColumnCount\">\n                <div class=\"container-fluid\">\n                    <sac-paging\n                        name=\"{{ name }}Paging\"\n                        (paging)=\"pageChange($event)\"\n                        [pagerdata]=\"pagerdata\"\n                        [pagingtext]=\"pagingtext\"\n                        [pagesizes]=\"pagesizes\"\n                        [pagesizetext]=\"pagesizetext\"\n                        [pagesizedisabled]=\"pagesizedisabled\"></sac-paging>\n                </div>\n            </td>\n        </tr>\n    </tfoot>\n</table>\n" }]
         }], propDecorators: { template: [{
                 type: ContentChild,
                 args: [TemplateRef, { static: true }]
@@ -1060,40 +1028,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
  * Grid Action Button
  */
 class SacGridButtonComponent extends SacGridButtonCommon {
-    // #region Public Methods
+    // #region Constructors
     /**
-     * Returns the icon for the button
+     * Construtor
+     *
+     * @param injector Injector to resolve  icons
      */
-    getIconClass() {
-        let iconset = this.iconstyle;
-        let iconcss = this.icon;
-        if (iconset === '') {
-            switch (this.icon) {
-                case 'edit':
-                    iconset = 'sprite';
-                    iconcss = 'icon-sprite-base-main_edit';
-                    break;
-                case 'delete':
-                    iconset = 'sprite';
-                    iconcss = 'icon-sprite-base-main_delete';
-                    break;
-            }
-        }
-        if (this._isdisabledvalue) {
-            iconcss += '_disabled';
-        }
-        const result = iconset + ' ' + iconcss;
-        return result.trim();
+    constructor(injector) {
+        super(injector);
     }
 }
-SacGridButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacGridButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-SacGridButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacGridButtonComponent, selector: "sac-gridbutton", usesInheritance: true, ngImport: i0, template: "<a (click)=\"callaction()\" style=\"padding-right: 5px;\" [class.disabled]=\"isdisabled\" [attr.disabled]=\"isdisabled ? 'disabled' : null\"><span class=\"{{getIconClass()}}\"></span></a>\n" });
+SacGridButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacGridButtonComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+SacGridButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacGridButtonComponent, selector: "sac-gridbutton", usesInheritance: true, ngImport: i0, template: "<a\n    (click)=\"callaction()\"\n    [attr.data-e2e]=\"name\"\n    style=\"padding-right: 5px\"\n    [style.cursor]=\"!isdisabled ? 'pointer' : null\"\n    [class.disabled]=\"isdisabled\"\n    [attr.disabled]=\"isdisabled ? 'disabled' : null\"\n    ><span class=\"{{ getIconClass() }}\"></span\n></a>\n" });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacGridButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sac-gridbutton', template: "<a (click)=\"callaction()\" style=\"padding-right: 5px;\" [class.disabled]=\"isdisabled\" [attr.disabled]=\"isdisabled ? 'disabled' : null\"><span class=\"{{getIconClass()}}\"></span></a>\n" }]
-        }] });
+            args: [{ selector: 'sac-gridbutton', template: "<a\n    (click)=\"callaction()\"\n    [attr.data-e2e]=\"name\"\n    style=\"padding-right: 5px\"\n    [style.cursor]=\"!isdisabled ? 'pointer' : null\"\n    [class.disabled]=\"isdisabled\"\n    [attr.disabled]=\"isdisabled ? 'disabled' : null\"\n    ><span class=\"{{ getIconClass() }}\"></span\n></a>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }]; } });
 
 class SacGridColumnComponent extends SacGridColumnCommon {
+    // #region Constructors
     constructor(grid, injector, el) {
         super(grid, injector, el);
     }
@@ -1104,7 +1057,7 @@ SacGridColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             provide: SacGridColumnBaseCommon,
             useExisting: forwardRef(() => SacGridColumnComponent),
         },
-    ], usesInheritance: true, ngImport: i0, template: "<th\n    scope=\"col\"\n    *ngIf=\"IsHeader()\"\n    [style.width]=\"width\"\n    (click)=\"SortByColumn()\">\n    <span>{{ header }}</span>\n    <span\n        [class]=\"IconSortUp\"\n        style=\"padding-left: 0.5rem\"\n        *ngIf=\"IsSortedColumn() && GetSortDirection() === 'asc'\"></span>\n    <span\n        [class]=\"IconSortDown\"\n        style=\"padding-left: 0.5rem\"\n        *ngIf=\"IsSortedColumn() && GetSortDirection() === 'desc'\"></span>\n</th>\n<td\n    scope=\"col\"\n    *ngIf=\"IsBody()\"\n    [style.width]=\"width\"\n    [class.ellipsis]=\"IsEllipsis()\"\n    (click)=\"ColumnClick()\"\n    [style.max-width]=\"IsEllipsis() ? width : null\"\n    [style.overflow]=\"IsEllipsis() ? 'hidden' : null\"\n    [style.text-overflow]=\"IsEllipsis() ? 'ellipsis' : null\"\n    [style.white-space]=\"IsEllipsis() ? 'nowrap' : null\">\n    <span\n        [attr.title]=\"IsEllipsis() ? value : null\"\n        [innerHtml]=\"value\"></span>\n</td>\n", directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    ], usesInheritance: true, ngImport: i0, template: "<th\n    #headerElement\n    scope=\"col\"\n    *ngIf=\"IsHeader()\"\n    [style.width]=\"width\"\n    (click)=\"SortByColumn()\"\n    [class.text-right]=\"alignment === 'right'\"\n    [class.text-center]=\"alignment === 'center'\">\n    <span>{{ header }}</span>\n    <span\n        [class]=\"IconSortUp\"\n        style=\"padding-left: 0.5rem\"\n        *ngIf=\"IsSortedColumn() && GetSortDirection() === 'asc'\"></span>\n    <span\n        [class]=\"IconSortDown\"\n        style=\"padding-left: 0.5rem\"\n        *ngIf=\"IsSortedColumn() && GetSortDirection() === 'desc'\"></span>\n</th>\n<td\n    #bodyElement\n    scope=\"col\"\n    *ngIf=\"IsBody()\"\n    [style.width]=\"width\"\n    [class.ellipsis]=\"IsEllipsis()\"\n    (click)=\"ColumnClick()\"\n    [style.max-width]=\"IsEllipsis() ? width : null\"\n    [style.overflow]=\"IsEllipsis() ? 'hidden' : null\"\n    [style.text-overflow]=\"IsEllipsis() ? 'ellipsis' : null\"\n    [style.white-space]=\"IsEllipsis() ? 'nowrap' : null\"\n    [class.text-right]=\"alignment === 'right'\"\n    [class.text-center]=\"alignment === 'center'\">\n    <span\n        [attr.title]=\"IsEllipsis() ? value : null\"\n        [innerHtml]=\"value\"></span>\n</td>\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: [
@@ -1112,10 +1065,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                             provide: SacGridColumnBaseCommon,
                             useExisting: forwardRef(() => SacGridColumnComponent),
                         },
-                    ], template: "<th\n    scope=\"col\"\n    *ngIf=\"IsHeader()\"\n    [style.width]=\"width\"\n    (click)=\"SortByColumn()\">\n    <span>{{ header }}</span>\n    <span\n        [class]=\"IconSortUp\"\n        style=\"padding-left: 0.5rem\"\n        *ngIf=\"IsSortedColumn() && GetSortDirection() === 'asc'\"></span>\n    <span\n        [class]=\"IconSortDown\"\n        style=\"padding-left: 0.5rem\"\n        *ngIf=\"IsSortedColumn() && GetSortDirection() === 'desc'\"></span>\n</th>\n<td\n    scope=\"col\"\n    *ngIf=\"IsBody()\"\n    [style.width]=\"width\"\n    [class.ellipsis]=\"IsEllipsis()\"\n    (click)=\"ColumnClick()\"\n    [style.max-width]=\"IsEllipsis() ? width : null\"\n    [style.overflow]=\"IsEllipsis() ? 'hidden' : null\"\n    [style.text-overflow]=\"IsEllipsis() ? 'ellipsis' : null\"\n    [style.white-space]=\"IsEllipsis() ? 'nowrap' : null\">\n    <span\n        [attr.title]=\"IsEllipsis() ? value : null\"\n        [innerHtml]=\"value\"></span>\n</td>\n" }]
+                    ], template: "<th\n    #headerElement\n    scope=\"col\"\n    *ngIf=\"IsHeader()\"\n    [style.width]=\"width\"\n    (click)=\"SortByColumn()\"\n    [class.text-right]=\"alignment === 'right'\"\n    [class.text-center]=\"alignment === 'center'\">\n    <span>{{ header }}</span>\n    <span\n        [class]=\"IconSortUp\"\n        style=\"padding-left: 0.5rem\"\n        *ngIf=\"IsSortedColumn() && GetSortDirection() === 'asc'\"></span>\n    <span\n        [class]=\"IconSortDown\"\n        style=\"padding-left: 0.5rem\"\n        *ngIf=\"IsSortedColumn() && GetSortDirection() === 'desc'\"></span>\n</th>\n<td\n    #bodyElement\n    scope=\"col\"\n    *ngIf=\"IsBody()\"\n    [style.width]=\"width\"\n    [class.ellipsis]=\"IsEllipsis()\"\n    (click)=\"ColumnClick()\"\n    [style.max-width]=\"IsEllipsis() ? width : null\"\n    [style.overflow]=\"IsEllipsis() ? 'hidden' : null\"\n    [style.text-overflow]=\"IsEllipsis() ? 'ellipsis' : null\"\n    [style.white-space]=\"IsEllipsis() ? 'nowrap' : null\"\n    [class.text-right]=\"alignment === 'right'\"\n    [class.text-center]=\"alignment === 'center'\">\n    <span\n        [attr.title]=\"IsEllipsis() ? value : null\"\n        [innerHtml]=\"value\"></span>\n</td>\n" }]
         }], ctorParameters: function () { return [{ type: SacGridComponent }, { type: i0.Injector }, { type: i0.ElementRef }]; } });
 
 class SacGridColumnActionComponent extends SacGridColumnActionCommon {
+    // #region Constructors
     constructor(grid, injector, el) {
         super(grid, injector, el);
         this.width = '52px';
@@ -1127,7 +1081,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>\n<td scope=\"col\" *ngIf=\"IsBody()\">\n   <ng-content></ng-content>\n</td>\n", directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    ], usesInheritance: true, ngImport: i0, template: "<th\n    #headerElement\n    scope=\"col\"\n    *ngIf=\"IsHeader()\"\n    [style.width]=\"width\"\n    [class.text-right]=\"alignment === 'right'\"\n    [class.text-center]=\"alignment === 'center'\">\n    <span></span>\n</th>\n<td\n    #bodyElement\n    scope=\"col\"\n    *ngIf=\"IsBody()\"\n    [class.text-right]=\"alignment === 'right'\"\n    [class.text-center]=\"alignment === 'center'\">\n    <ng-content></ng-content>\n</td>\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: [
@@ -1135,26 +1089,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                             provide: SacGridColumnBaseCommon,
                             useExisting: forwardRef(() => SacGridColumnActionComponent),
                         },
-                    ], template: "<th scope=\"col\" *ngIf=\"IsHeader()\" [style.width]=\"width\"><span></span></th>\n<td scope=\"col\" *ngIf=\"IsBody()\">\n   <ng-content></ng-content>\n</td>\n" }]
+                    ], template: "<th\n    #headerElement\n    scope=\"col\"\n    *ngIf=\"IsHeader()\"\n    [style.width]=\"width\"\n    [class.text-right]=\"alignment === 'right'\"\n    [class.text-center]=\"alignment === 'center'\">\n    <span></span>\n</th>\n<td\n    #bodyElement\n    scope=\"col\"\n    *ngIf=\"IsBody()\"\n    [class.text-right]=\"alignment === 'right'\"\n    [class.text-center]=\"alignment === 'center'\">\n    <ng-content></ng-content>\n</td>\n" }]
         }], ctorParameters: function () { return [{ type: SacGridComponent }, { type: i0.Injector }, { type: i0.ElementRef }]; } });
 
 class SacGridImageComponent extends SacGridImageCommon {
-    getIconClass() {
-        switch (this.iconstyle) {
-            case 'edit':
-                return 'sprite icon-sprite-base-main_edit';
-            case 'delete':
-                return 'sprite icon-sprite-base-main_delete';
-            default:
-                return this.iconstyle;
-        }
-    }
 }
 SacGridImageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacGridImageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-SacGridImageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacGridImageComponent, selector: "sac-gridimage", usesInheritance: true, ngImport: i0, template: "<span style=\"padding-right: 5px;\"><span class=\"{{getIconClass()}}\"></span></span>\n" });
+SacGridImageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacGridImageComponent, selector: "sac-gridimage", usesInheritance: true, ngImport: i0, template: "<span style=\"padding-right: 5px\"><span [ngClass]=\"iconstyle\"></span></span>\n", directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacGridImageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sac-gridimage', template: "<span style=\"padding-right: 5px;\"><span class=\"{{getIconClass()}}\"></span></span>\n" }]
+            args: [{ selector: 'sac-gridimage', template: "<span style=\"padding-right: 5px\"><span [ngClass]=\"iconstyle\"></span></span>\n" }]
         }] });
 
 class SACBootstrap3GridModule {
@@ -1165,13 +1109,13 @@ SACBootstrap3GridModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0",
         SacGridColumnActionComponent,
         SacPagingComponent,
         SacGridButtonComponent,
-        SacGridImageComponent], imports: [CommonModule, FormsModule], exports: [SacGridComponent,
+        SacGridImageComponent], imports: [CommonModule, FormsModule, SACCommonUtliltiesModule], exports: [SacGridComponent,
         SacGridColumnComponent,
         SacGridColumnActionComponent,
         SacPagingComponent,
         SacGridButtonComponent,
         SacGridImageComponent] });
-SACBootstrap3GridModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3GridModule, imports: [[CommonModule, FormsModule]] });
+SACBootstrap3GridModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3GridModule, imports: [[CommonModule, FormsModule, SACCommonUtliltiesModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3GridModule, decorators: [{
             type: NgModule,
             args: [{
@@ -1183,7 +1127,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                         SacGridButtonComponent,
                         SacGridImageComponent,
                     ],
-                    imports: [CommonModule, FormsModule],
+                    imports: [CommonModule, FormsModule, SACCommonUtliltiesModule],
                     exports: [
                         SacGridComponent,
                         SacGridColumnComponent,
@@ -1214,7 +1158,7 @@ SacInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             multi: true,
             useExisting: forwardRef(() => SacInputComponent),
         },
-    ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\n        <div [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n            <input\n                id=\"{{ name }}\"\n                name=\"{{ name }}\"\n                type=\"text\"\n                class=\"form-control\"\n                [ngClass]=\"[componentHeight | toControlHeight]\"\n                [value]=\"value\"\n                [attr.placeholder]=\"placeholder\"\n                (blur)=\"onTouch()\"\n                (input)=\"setValue($event.target.value)\"\n                [attr.maxlength]=\"maxtextlength\"\n                [disabled]=\"isdisabled\"\n                [readonly]=\"readonly\" />\n\n            <div\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n                class=\"form-control-static\"\n                style=\"margin-left: 5px\">\n                <sac-tooltip\n                    *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                    [tooltiptext]=\"helptext\"\n                    [inlinemode]=\"true\">\n                    <span\n                        [class]=\"HelptextTooltipIcon\"\n                        style=\"margin-left: 5px; margin-right: 5px\">\n                    </span>\n                </sac-tooltip>\n            </div>\n        </div>\n\n        <p\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"help-block\">\n            {{ helptext }}\n        </p>\n\n        <div\n            class=\"help-block help-block-error\"\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n            {{ GetErrorMessage() | async }}\n        </div>\n    </div>\n</div>\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: { "toLabelHeight": SacToLabelHeightPipe, "toLabelWidthCss": SacToLabelWidthCssPipe, "toControlWidthCss": SacToControlWidthCssPipe, "toControlHeight": SacToControlHeightPipe, "async": i3.AsyncPipe } });
+    ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\n        <div [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n            <input\n                id=\"{{ name }}\"\n                name=\"{{ name }}\"\n                type=\"text\"\n                class=\"form-control\"\n                [ngClass]=\"[componentHeight | toControlHeight]\"\n                [class.is-invalid]=\"invalid && (dirty || touched)\"\n                [value]=\"value\"\n                [attr.placeholder]=\"placeholder\"\n                (blur)=\"onTouch()\"\n                (input)=\"setValue($event.target.value)\"\n                (keypress)=\"onKeyPress($event)\"\n                [attr.maxlength]=\"maxtextlength\"\n                [disabled]=\"isdisabled\"\n                [readonly]=\"readonly\" />\n\n            <div\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n                class=\"form-control-static\"\n                style=\"margin-left: 5px\">\n                <sac-tooltip\n                    *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                    [tooltiptext]=\"helptext\"\n                    [inlinemode]=\"true\">\n                    <span\n                        [class]=\"HelptextTooltipIcon\"\n                        style=\"margin-left: 5px; margin-right: 5px\">\n                    </span>\n                </sac-tooltip>\n            </div>\n        </div>\n\n        <p\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"help-block\">\n            {{ helptext }}\n        </p>\n\n        <div\n            class=\"help-block help-block-error\"\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n            {{ GetErrorMessage() | async }}\n        </div>\n    </div>\n</div>\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: { "toLabelHeight": SacToLabelHeightPipe, "testingattribute": i5.SacTestingAttributePipe, "toLabelWidthCss": SacToLabelWidthCssPipe, "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: [
@@ -1224,7 +1168,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => SacInputComponent),
                         },
-                    ], template: "<div\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\n        <div [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n            <input\n                id=\"{{ name }}\"\n                name=\"{{ name }}\"\n                type=\"text\"\n                class=\"form-control\"\n                [ngClass]=\"[componentHeight | toControlHeight]\"\n                [value]=\"value\"\n                [attr.placeholder]=\"placeholder\"\n                (blur)=\"onTouch()\"\n                (input)=\"setValue($event.target.value)\"\n                [attr.maxlength]=\"maxtextlength\"\n                [disabled]=\"isdisabled\"\n                [readonly]=\"readonly\" />\n\n            <div\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n                class=\"form-control-static\"\n                style=\"margin-left: 5px\">\n                <sac-tooltip\n                    *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                    [tooltiptext]=\"helptext\"\n                    [inlinemode]=\"true\">\n                    <span\n                        [class]=\"HelptextTooltipIcon\"\n                        style=\"margin-left: 5px; margin-right: 5px\">\n                    </span>\n                </sac-tooltip>\n            </div>\n        </div>\n\n        <p\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"help-block\">\n            {{ helptext }}\n        </p>\n\n        <div\n            class=\"help-block help-block-error\"\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n            {{ GetErrorMessage() | async }}\n        </div>\n    </div>\n</div>\n" }]
+                    ], template: "<div\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\n        <div [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n            <input\n                id=\"{{ name }}\"\n                name=\"{{ name }}\"\n                type=\"text\"\n                class=\"form-control\"\n                [ngClass]=\"[componentHeight | toControlHeight]\"\n                [class.is-invalid]=\"invalid && (dirty || touched)\"\n                [value]=\"value\"\n                [attr.placeholder]=\"placeholder\"\n                (blur)=\"onTouch()\"\n                (input)=\"setValue($event.target.value)\"\n                (keypress)=\"onKeyPress($event)\"\n                [attr.maxlength]=\"maxtextlength\"\n                [disabled]=\"isdisabled\"\n                [readonly]=\"readonly\" />\n\n            <div\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n                class=\"form-control-static\"\n                style=\"margin-left: 5px\">\n                <sac-tooltip\n                    *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                    [tooltiptext]=\"helptext\"\n                    [inlinemode]=\"true\">\n                    <span\n                        [class]=\"HelptextTooltipIcon\"\n                        style=\"margin-left: 5px; margin-right: 5px\">\n                    </span>\n                </sac-tooltip>\n            </div>\n        </div>\n\n        <p\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"help-block\">\n            {{ helptext }}\n        </p>\n\n        <div\n            class=\"help-block help-block-error\"\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n            {{ GetErrorMessage() | async }}\n        </div>\n    </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: SacFormLayoutDirective, decorators: [{
                     type: Host
                 }, {
@@ -1266,7 +1210,7 @@ SacInputAreaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             multi: true,
             useExisting: forwardRef(() => SacInputAreaComponent),
         },
-    ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\n        <div [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n            <textarea\n                id=\"{{ name }}\"\n                name=\"{{ name }}\"\n                type=\"\"\n                class=\"form-control\"\n                [class.is-invalid]=\"invalid && (dirty || touched)\"\n                [class.validation-error]=\"invalid && (dirty || touched)\"\n                [class.required]=\"isrequired\"\n                [ngClass]=\"[componentHeight | toControlHeight]\"\n                [value]=\"value\"\n                [attr.placeholder]=\"placeholder\"\n                (blur)=\"onTouch()\"\n                (input)=\"setValue($event.target.value)\"\n                (keypress)=\"onKeyPress($event)\"\n                [attr.rows]=\"rows\"\n                [disabled]=\"isdisabled\"\n                [readonly]=\"readonly\">\n            </textarea>\n\n            <div\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n                class=\"form-control-static\"\n                style=\"margin-left: 5px\">\n                <sac-tooltip\n                    *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                    [tooltiptext]=\"helptext\"\n                    [inlinemode]=\"true\">\n                    <span\n                        [class]=\"HelptextTooltipIcon\"\n                        style=\"margin-left: 5px; margin-right: 5px\">\n                    </span>\n                </sac-tooltip>\n            </div>\n        </div>\n\n        <p\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"help-block\">\n            {{ helptext }}\n        </p>\n\n        <div\n            class=\"help-block help-block-error\"\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n            {{ GetErrorMessage() | async }}\n        </div>\n    </div>\n</div>\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: { "toLabelHeight": SacToLabelHeightPipe, "toLabelWidthCss": SacToLabelWidthCssPipe, "toControlWidthCss": SacToControlWidthCssPipe, "toControlHeight": SacToControlHeightPipe, "async": i3.AsyncPipe } });
+    ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\n        <div [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n            <textarea\n                id=\"{{ name }}\"\n                name=\"{{ name }}\"\n                type=\"\"\n                class=\"form-control\"\n                [class.is-invalid]=\"invalid && (dirty || touched)\"\n                [class.validation-error]=\"invalid && (dirty || touched)\"\n                [class.required]=\"isrequired\"\n                [ngClass]=\"[componentHeight | toControlHeight]\"\n                [value]=\"value\"\n                [attr.placeholder]=\"placeholder\"\n                (blur)=\"onTouch()\"\n                (input)=\"setValue($event.target.value)\"\n                (keypress)=\"onKeyPress($event)\"\n                [attr.rows]=\"rows\"\n                [disabled]=\"isdisabled\"\n                [readonly]=\"readonly\">\n            </textarea>\n\n            <div\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n                class=\"form-control-static\"\n                style=\"margin-left: 5px\">\n                <sac-tooltip\n                    *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                    [tooltiptext]=\"helptext\"\n                    [inlinemode]=\"true\">\n                    <span\n                        [class]=\"HelptextTooltipIcon\"\n                        style=\"margin-left: 5px; margin-right: 5px\">\n                    </span>\n                </sac-tooltip>\n            </div>\n        </div>\n\n        <p\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"help-block\">\n            {{ helptext }}\n        </p>\n\n        <div\n            class=\"help-block help-block-error\"\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n            {{ GetErrorMessage() | async }}\n        </div>\n    </div>\n</div>\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: { "toLabelHeight": SacToLabelHeightPipe, "testingattribute": i5.SacTestingAttributePipe, "toLabelWidthCss": SacToLabelWidthCssPipe, "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: [
@@ -1280,7 +1224,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => SacInputAreaComponent),
                         },
-                    ], template: "<div\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\n        <div [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n            <textarea\n                id=\"{{ name }}\"\n                name=\"{{ name }}\"\n                type=\"\"\n                class=\"form-control\"\n                [class.is-invalid]=\"invalid && (dirty || touched)\"\n                [class.validation-error]=\"invalid && (dirty || touched)\"\n                [class.required]=\"isrequired\"\n                [ngClass]=\"[componentHeight | toControlHeight]\"\n                [value]=\"value\"\n                [attr.placeholder]=\"placeholder\"\n                (blur)=\"onTouch()\"\n                (input)=\"setValue($event.target.value)\"\n                (keypress)=\"onKeyPress($event)\"\n                [attr.rows]=\"rows\"\n                [disabled]=\"isdisabled\"\n                [readonly]=\"readonly\">\n            </textarea>\n\n            <div\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n                class=\"form-control-static\"\n                style=\"margin-left: 5px\">\n                <sac-tooltip\n                    *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                    [tooltiptext]=\"helptext\"\n                    [inlinemode]=\"true\">\n                    <span\n                        [class]=\"HelptextTooltipIcon\"\n                        style=\"margin-left: 5px; margin-right: 5px\">\n                    </span>\n                </sac-tooltip>\n            </div>\n        </div>\n\n        <p\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"help-block\">\n            {{ helptext }}\n        </p>\n\n        <div\n            class=\"help-block help-block-error\"\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n            {{ GetErrorMessage() | async }}\n        </div>\n    </div>\n</div>\n" }]
+                    ], template: "<div\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\n        <div [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n            <textarea\n                id=\"{{ name }}\"\n                name=\"{{ name }}\"\n                type=\"\"\n                class=\"form-control\"\n                [class.is-invalid]=\"invalid && (dirty || touched)\"\n                [class.validation-error]=\"invalid && (dirty || touched)\"\n                [class.required]=\"isrequired\"\n                [ngClass]=\"[componentHeight | toControlHeight]\"\n                [value]=\"value\"\n                [attr.placeholder]=\"placeholder\"\n                (blur)=\"onTouch()\"\n                (input)=\"setValue($event.target.value)\"\n                (keypress)=\"onKeyPress($event)\"\n                [attr.rows]=\"rows\"\n                [disabled]=\"isdisabled\"\n                [readonly]=\"readonly\">\n            </textarea>\n\n            <div\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n                class=\"form-control-static\"\n                style=\"margin-left: 5px\">\n                <sac-tooltip\n                    *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                    [tooltiptext]=\"helptext\"\n                    [inlinemode]=\"true\">\n                    <span\n                        [class]=\"HelptextTooltipIcon\"\n                        style=\"margin-left: 5px; margin-right: 5px\">\n                    </span>\n                </sac-tooltip>\n            </div>\n        </div>\n\n        <p\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"help-block\">\n            {{ helptext }}\n        </p>\n\n        <div\n            class=\"help-block help-block-error\"\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n            {{ GetErrorMessage() | async }}\n        </div>\n    </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: SacFormLayoutDirective, decorators: [{
                     type: Host
                 }, {
@@ -1310,7 +1254,7 @@ SacInputCurrencyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             multi: true,
             useExisting: forwardRef(() => SacInputCurrencyComponent),
         },
-    ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.clearfix]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-static pull-right\"\n            style=\"margin-left: 5px\">\n            <sac-tooltip\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [class]=\"HelptextTooltipIcon\"\n                    style=\"margin-left: 5px; margin-right: 5px\">\n                </span>\n            </sac-tooltip>\n        </div>\n\n        <div\n            class=\"input-group\"\n            [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n            [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\n            <input\n                id=\"{{ name }}\"\n                name=\"{{ name }}\"\n                type=\"text\"\n                inputmode=\"decimal\"\n                class=\"form-control\"\n                [ngClass]=\"[componentHeight | toControlHeight]\"\n                [value]=\"value\"\n                [attr.placeholder]=\"placeholder\"\n                (blur)=\"onTouch()\"\n                (input)=\"setValue($event.target.value)\"\n                (keypress)=\"onKeyPress($event)\"\n                [disabled]=\"isdisabled\"\n                [readonly]=\"readonly\" />\n            <div class=\"input-group-addon\">{{ currency }}</div>\n        </div>\n\n        <p\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"help-block\">\n            {{ helptext }}\n        </p>\n\n        <div\n            class=\"help-block help-block-error\"\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n            {{ GetErrorMessage() | async }}\n        </div>\n    </div>\n</div>\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: { "toLabelHeight": SacToLabelHeightPipe, "toLabelWidthCss": SacToLabelWidthCssPipe, "toControlWidthCss": SacToControlWidthCssPipe, "toControlHeight": SacToControlHeightPipe, "async": i3.AsyncPipe } });
+    ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.clearfix]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-static pull-right\"\n            style=\"margin-left: 5px\">\n            <sac-tooltip\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [class]=\"HelptextTooltipIcon\"\n                    style=\"margin-left: 5px; margin-right: 5px\">\n                </span>\n            </sac-tooltip>\n        </div>\n\n        <div\n            class=\"input-group\"\n            [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n            [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\n            <input\n                id=\"{{ name }}\"\n                name=\"{{ name }}\"\n                type=\"text\"\n                inputmode=\"decimal\"\n                class=\"form-control\"\n                [ngClass]=\"[componentHeight | toControlHeight]\"\n                [class.is-invalid]=\"invalid && (dirty || touched)\"\n                [value]=\"value\"\n                [attr.placeholder]=\"placeholder\"\n                (blur)=\"onTouch()\"\n                (input)=\"setValue($event.target.value)\"\n                (keypress)=\"onKeyPress($event)\"\n                [disabled]=\"isdisabled\"\n                [readonly]=\"readonly\" />\n            <div class=\"input-group-addon\">{{ currency }}</div>\n        </div>\n\n        <p\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"help-block\">\n            {{ helptext }}\n        </p>\n\n        <div\n            class=\"help-block help-block-error\"\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n            {{ GetErrorMessage() | async }}\n        </div>\n    </div>\n</div>\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: { "toLabelHeight": SacToLabelHeightPipe, "testingattribute": i5.SacTestingAttributePipe, "toLabelWidthCss": SacToLabelWidthCssPipe, "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: [
@@ -1324,7 +1268,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => SacInputCurrencyComponent),
                         },
-                    ], template: "<div\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.clearfix]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-static pull-right\"\n            style=\"margin-left: 5px\">\n            <sac-tooltip\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [class]=\"HelptextTooltipIcon\"\n                    style=\"margin-left: 5px; margin-right: 5px\">\n                </span>\n            </sac-tooltip>\n        </div>\n\n        <div\n            class=\"input-group\"\n            [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n            [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\n            <input\n                id=\"{{ name }}\"\n                name=\"{{ name }}\"\n                type=\"text\"\n                inputmode=\"decimal\"\n                class=\"form-control\"\n                [ngClass]=\"[componentHeight | toControlHeight]\"\n                [value]=\"value\"\n                [attr.placeholder]=\"placeholder\"\n                (blur)=\"onTouch()\"\n                (input)=\"setValue($event.target.value)\"\n                (keypress)=\"onKeyPress($event)\"\n                [disabled]=\"isdisabled\"\n                [readonly]=\"readonly\" />\n            <div class=\"input-group-addon\">{{ currency }}</div>\n        </div>\n\n        <p\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"help-block\">\n            {{ helptext }}\n        </p>\n\n        <div\n            class=\"help-block help-block-error\"\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n            {{ GetErrorMessage() | async }}\n        </div>\n    </div>\n</div>\n" }]
+                    ], template: "<div\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.clearfix]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-static pull-right\"\n            style=\"margin-left: 5px\">\n            <sac-tooltip\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [class]=\"HelptextTooltipIcon\"\n                    style=\"margin-left: 5px; margin-right: 5px\">\n                </span>\n            </sac-tooltip>\n        </div>\n\n        <div\n            class=\"input-group\"\n            [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n            [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\n            <input\n                id=\"{{ name }}\"\n                name=\"{{ name }}\"\n                type=\"text\"\n                inputmode=\"decimal\"\n                class=\"form-control\"\n                [ngClass]=\"[componentHeight | toControlHeight]\"\n                [class.is-invalid]=\"invalid && (dirty || touched)\"\n                [value]=\"value\"\n                [attr.placeholder]=\"placeholder\"\n                (blur)=\"onTouch()\"\n                (input)=\"setValue($event.target.value)\"\n                (keypress)=\"onKeyPress($event)\"\n                [disabled]=\"isdisabled\"\n                [readonly]=\"readonly\" />\n            <div class=\"input-group-addon\">{{ currency }}</div>\n        </div>\n\n        <p\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"help-block\">\n            {{ helptext }}\n        </p>\n\n        <div\n            class=\"help-block help-block-error\"\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n            {{ GetErrorMessage() | async }}\n        </div>\n    </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: SacFormLayoutDirective, decorators: [{
                     type: Host
                 }, {
@@ -1354,7 +1298,7 @@ SacInputDecimalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
             multi: true,
             useExisting: forwardRef(() => SacInputDecimalComponent),
         },
-    ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\n        <div [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n            <input\n                id=\"{{ name }}\"\n                name=\"{{ name }}\"\n                type=\"text\"\n                inputmode=\"decimal\"\n                class=\"form-control\"\n                [ngClass]=\"[componentHeight | toControlHeight]\"\n                [value]=\"value\"\n                [attr.placeholder]=\"placeholder\"\n                (blur)=\"onTouch()\"\n                (input)=\"setValue($event.target.value)\"\n                (keypress)=\"onKeyPress($event)\"\n                [disabled]=\"isdisabled\"\n                [readonly]=\"readonly\" />\n\n            <div\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n                class=\"form-control-static\"\n                style=\"margin-left: 5px\">\n                <sac-tooltip\n                    *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                    [tooltiptext]=\"helptext\"\n                    [inlinemode]=\"true\">\n                    <span\n                        [class]=\"HelptextTooltipIcon\"\n                        style=\"margin-left: 5px; margin-right: 5px\">\n                    </span>\n                </sac-tooltip>\n            </div>\n        </div>\n\n        <p\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"help-block\">\n            {{ helptext }}\n        </p>\n\n        <div\n            class=\"help-block help-block-error\"\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n            {{ GetErrorMessage() | async }}\n        </div>\n    </div>\n</div>\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: { "toLabelHeight": SacToLabelHeightPipe, "toLabelWidthCss": SacToLabelWidthCssPipe, "toControlWidthCss": SacToControlWidthCssPipe, "toControlHeight": SacToControlHeightPipe, "async": i3.AsyncPipe } });
+    ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\n        <div [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n            <input\n                id=\"{{ name }}\"\n                name=\"{{ name }}\"\n                type=\"text\"\n                inputmode=\"decimal\"\n                class=\"form-control\"\n                [ngClass]=\"[componentHeight | toControlHeight]\"\n                [class.is-invalid]=\"invalid && (dirty || touched)\"\n                [value]=\"value\"\n                [attr.placeholder]=\"placeholder\"\n                (blur)=\"onTouch()\"\n                (input)=\"setValue($event.target.value)\"\n                (keypress)=\"onKeyPress($event)\"\n                [disabled]=\"isdisabled\"\n                [readonly]=\"readonly\" />\n\n            <div\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n                class=\"form-control-static\"\n                style=\"margin-left: 5px\">\n                <sac-tooltip\n                    *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                    [tooltiptext]=\"helptext\"\n                    [inlinemode]=\"true\">\n                    <span\n                        [class]=\"HelptextTooltipIcon\"\n                        style=\"margin-left: 5px; margin-right: 5px\">\n                    </span>\n                </sac-tooltip>\n            </div>\n        </div>\n\n        <p\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"help-block\">\n            {{ helptext }}\n        </p>\n\n        <div\n            class=\"help-block help-block-error\"\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n            {{ GetErrorMessage() | async }}\n        </div>\n    </div>\n</div>\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: { "toLabelHeight": SacToLabelHeightPipe, "testingattribute": i5.SacTestingAttributePipe, "toLabelWidthCss": SacToLabelWidthCssPipe, "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: [
@@ -1368,7 +1312,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => SacInputDecimalComponent),
                         },
-                    ], template: "<div\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\n        <div [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n            <input\n                id=\"{{ name }}\"\n                name=\"{{ name }}\"\n                type=\"text\"\n                inputmode=\"decimal\"\n                class=\"form-control\"\n                [ngClass]=\"[componentHeight | toControlHeight]\"\n                [value]=\"value\"\n                [attr.placeholder]=\"placeholder\"\n                (blur)=\"onTouch()\"\n                (input)=\"setValue($event.target.value)\"\n                (keypress)=\"onKeyPress($event)\"\n                [disabled]=\"isdisabled\"\n                [readonly]=\"readonly\" />\n\n            <div\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n                class=\"form-control-static\"\n                style=\"margin-left: 5px\">\n                <sac-tooltip\n                    *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                    [tooltiptext]=\"helptext\"\n                    [inlinemode]=\"true\">\n                    <span\n                        [class]=\"HelptextTooltipIcon\"\n                        style=\"margin-left: 5px; margin-right: 5px\">\n                    </span>\n                </sac-tooltip>\n            </div>\n        </div>\n\n        <p\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"help-block\">\n            {{ helptext }}\n        </p>\n\n        <div\n            class=\"help-block help-block-error\"\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n            {{ GetErrorMessage() | async }}\n        </div>\n    </div>\n</div>\n" }]
+                    ], template: "<div\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\n        <div [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n            <input\n                id=\"{{ name }}\"\n                name=\"{{ name }}\"\n                type=\"text\"\n                inputmode=\"decimal\"\n                class=\"form-control\"\n                [ngClass]=\"[componentHeight | toControlHeight]\"\n                [class.is-invalid]=\"invalid && (dirty || touched)\"\n                [value]=\"value\"\n                [attr.placeholder]=\"placeholder\"\n                (blur)=\"onTouch()\"\n                (input)=\"setValue($event.target.value)\"\n                (keypress)=\"onKeyPress($event)\"\n                [disabled]=\"isdisabled\"\n                [readonly]=\"readonly\" />\n\n            <div\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n                class=\"form-control-static\"\n                style=\"margin-left: 5px\">\n                <sac-tooltip\n                    *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                    [tooltiptext]=\"helptext\"\n                    [inlinemode]=\"true\">\n                    <span\n                        [class]=\"HelptextTooltipIcon\"\n                        style=\"margin-left: 5px; margin-right: 5px\">\n                    </span>\n                </sac-tooltip>\n            </div>\n        </div>\n\n        <p\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"help-block\">\n            {{ helptext }}\n        </p>\n\n        <div\n            class=\"help-block help-block-error\"\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n            {{ GetErrorMessage() | async }}\n        </div>\n    </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: SacFormLayoutDirective, decorators: [{
                     type: Host
                 }, {
@@ -1398,7 +1342,7 @@ SacInputEmailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             multi: true,
             useExisting: forwardRef(() => SacInputEmailComponent),
         },
-    ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.clearfix]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-static pull-right\"\n            style=\"margin-left: 5px\">\n            <sac-tooltip\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [class]=\"HelptextTooltipIcon\"\n                    style=\"margin-left: 5px; margin-right: 5px\">\n                </span>\n            </sac-tooltip>\n        </div>\n\n        <div\n            class=\"input-group\"\n            [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n            [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\n            <div class=\"input-group-addon\">@</div>\n            <input\n                id=\"{{ name }}\"\n                name=\"{{ name }}\"\n                type=\"text\"\n                inputmode=\"email\"\n                class=\"form-control\"\n                [ngClass]=\"[componentHeight | toControlHeight]\"\n                [value]=\"value\"\n                [attr.placeholder]=\"placeholder\"\n                (blur)=\"onTouch()\"\n                (input)=\"setValue($event.target.value)\"\n                autocomplete=\"email\"\n                [attr.maxlength]=\"maxtextlength\"\n                [disabled]=\"isdisabled\"\n                [readonly]=\"readonly\" />\n        </div>\n\n        <p\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"help-block\">\n            {{ helptext }}\n        </p>\n\n        <div\n            class=\"help-block help-block-error\"\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n            {{ GetErrorMessage() | async }}\n        </div>\n    </div>\n</div>\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: { "toLabelHeight": SacToLabelHeightPipe, "toLabelWidthCss": SacToLabelWidthCssPipe, "toControlWidthCss": SacToControlWidthCssPipe, "toControlHeight": SacToControlHeightPipe, "async": i3.AsyncPipe } });
+    ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.clearfix]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-static pull-right\"\n            style=\"margin-left: 5px\">\n            <sac-tooltip\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [class]=\"HelptextTooltipIcon\"\n                    style=\"margin-left: 5px; margin-right: 5px\">\n                </span>\n            </sac-tooltip>\n        </div>\n\n        <div\n            class=\"input-group\"\n            [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n            [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\n            <div class=\"input-group-addon\">@</div>\n            <input\n                id=\"{{ name }}\"\n                name=\"{{ name }}\"\n                type=\"text\"\n                inputmode=\"email\"\n                class=\"form-control\"\n                [ngClass]=\"[componentHeight | toControlHeight]\"\n                [class.is-invalid]=\"invalid && (dirty || touched)\"\n                [value]=\"value\"\n                [attr.placeholder]=\"placeholder\"\n                (blur)=\"onTouch()\"\n                (input)=\"setValue($event.target.value)\"\n                (keypress)=\"onKeyPress($event)\"\n                autocomplete=\"email\"\n                [attr.maxlength]=\"maxtextlength\"\n                [disabled]=\"isdisabled\"\n                [readonly]=\"readonly\" />\n        </div>\n\n        <p\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"help-block\">\n            {{ helptext }}\n        </p>\n\n        <div\n            class=\"help-block help-block-error\"\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n            {{ GetErrorMessage() | async }}\n        </div>\n    </div>\n</div>\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: { "toLabelHeight": SacToLabelHeightPipe, "testingattribute": i5.SacTestingAttributePipe, "toLabelWidthCss": SacToLabelWidthCssPipe, "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: [
@@ -1412,7 +1356,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => SacInputEmailComponent),
                         },
-                    ], template: "<div\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.clearfix]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-static pull-right\"\n            style=\"margin-left: 5px\">\n            <sac-tooltip\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [class]=\"HelptextTooltipIcon\"\n                    style=\"margin-left: 5px; margin-right: 5px\">\n                </span>\n            </sac-tooltip>\n        </div>\n\n        <div\n            class=\"input-group\"\n            [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n            [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\n            <div class=\"input-group-addon\">@</div>\n            <input\n                id=\"{{ name }}\"\n                name=\"{{ name }}\"\n                type=\"text\"\n                inputmode=\"email\"\n                class=\"form-control\"\n                [ngClass]=\"[componentHeight | toControlHeight]\"\n                [value]=\"value\"\n                [attr.placeholder]=\"placeholder\"\n                (blur)=\"onTouch()\"\n                (input)=\"setValue($event.target.value)\"\n                autocomplete=\"email\"\n                [attr.maxlength]=\"maxtextlength\"\n                [disabled]=\"isdisabled\"\n                [readonly]=\"readonly\" />\n        </div>\n\n        <p\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"help-block\">\n            {{ helptext }}\n        </p>\n\n        <div\n            class=\"help-block help-block-error\"\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n            {{ GetErrorMessage() | async }}\n        </div>\n    </div>\n</div>\n" }]
+                    ], template: "<div\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.clearfix]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-static pull-right\"\n            style=\"margin-left: 5px\">\n            <sac-tooltip\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [class]=\"HelptextTooltipIcon\"\n                    style=\"margin-left: 5px; margin-right: 5px\">\n                </span>\n            </sac-tooltip>\n        </div>\n\n        <div\n            class=\"input-group\"\n            [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n            [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\n            <div class=\"input-group-addon\">@</div>\n            <input\n                id=\"{{ name }}\"\n                name=\"{{ name }}\"\n                type=\"text\"\n                inputmode=\"email\"\n                class=\"form-control\"\n                [ngClass]=\"[componentHeight | toControlHeight]\"\n                [class.is-invalid]=\"invalid && (dirty || touched)\"\n                [value]=\"value\"\n                [attr.placeholder]=\"placeholder\"\n                (blur)=\"onTouch()\"\n                (input)=\"setValue($event.target.value)\"\n                (keypress)=\"onKeyPress($event)\"\n                autocomplete=\"email\"\n                [attr.maxlength]=\"maxtextlength\"\n                [disabled]=\"isdisabled\"\n                [readonly]=\"readonly\" />\n        </div>\n\n        <p\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"help-block\">\n            {{ helptext }}\n        </p>\n\n        <div\n            class=\"help-block help-block-error\"\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n            {{ GetErrorMessage() | async }}\n        </div>\n    </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: SacFormLayoutDirective, decorators: [{
                     type: Host
                 }, {
@@ -1442,7 +1386,7 @@ SacInputIntegerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
             multi: true,
             useExisting: forwardRef(() => SacInputIntegerComponent),
         },
-    ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\n        <div [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n            <input\n                id=\"{{ name }}\"\n                name=\"{{ name }}\"\n                type=\"text\"\n                inputmode=\"decimal\"\n                class=\"form-control\"\n                [ngClass]=\"[componentHeight | toControlHeight]\"\n                [value]=\"value\"\n                [attr.placeholder]=\"placeholder\"\n                (blur)=\"onTouch()\"\n                (input)=\"setValue($event.target.value)\"\n                (keypress)=\"onKeyPress($event)\"\n                [disabled]=\"isdisabled\"\n                [readonly]=\"readonly\" />\n\n            <div\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n                class=\"form-control-static\"\n                style=\"margin-left: 5px\">\n                <sac-tooltip\n                    *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                    [tooltiptext]=\"helptext\"\n                    [inlinemode]=\"true\">\n                    <span\n                        [class]=\"HelptextTooltipIcon\"\n                        style=\"margin-left: 5px; margin-right: 5px\">\n                    </span>\n                </sac-tooltip>\n            </div>\n        </div>\n\n        <p\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"help-block\">\n            {{ helptext }}\n        </p>\n\n        <div\n            class=\"help-block help-block-error\"\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n            {{ GetErrorMessage() | async }}\n        </div>\n    </div>\n</div>\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: { "toLabelHeight": SacToLabelHeightPipe, "toLabelWidthCss": SacToLabelWidthCssPipe, "toControlWidthCss": SacToControlWidthCssPipe, "toControlHeight": SacToControlHeightPipe, "async": i3.AsyncPipe } });
+    ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\n        <div [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n            <input\n                id=\"{{ name }}\"\n                name=\"{{ name }}\"\n                type=\"text\"\n                inputmode=\"decimal\"\n                class=\"form-control\"\n                [ngClass]=\"[componentHeight | toControlHeight]\"\n                [class.is-invalid]=\"invalid && (dirty || touched)\"\n                [value]=\"value\"\n                [attr.placeholder]=\"placeholder\"\n                (blur)=\"onTouch()\"\n                (input)=\"setValue($event.target.value)\"\n                (keypress)=\"onKeyPress($event)\"\n                [disabled]=\"isdisabled\"\n                [readonly]=\"readonly\" />\n\n            <div\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n                class=\"form-control-static\"\n                style=\"margin-left: 5px\">\n                <sac-tooltip\n                    *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                    [tooltiptext]=\"helptext\"\n                    [inlinemode]=\"true\">\n                    <span\n                        [class]=\"HelptextTooltipIcon\"\n                        style=\"margin-left: 5px; margin-right: 5px\">\n                    </span>\n                </sac-tooltip>\n            </div>\n        </div>\n\n        <p\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"help-block\">\n            {{ helptext }}\n        </p>\n\n        <div\n            class=\"help-block help-block-error\"\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n            {{ GetErrorMessage() | async }}\n        </div>\n    </div>\n</div>\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: { "toLabelHeight": SacToLabelHeightPipe, "testingattribute": i5.SacTestingAttributePipe, "toLabelWidthCss": SacToLabelWidthCssPipe, "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: [
@@ -1456,7 +1400,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => SacInputIntegerComponent),
                         },
-                    ], template: "<div\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\n        <div [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n            <input\n                id=\"{{ name }}\"\n                name=\"{{ name }}\"\n                type=\"text\"\n                inputmode=\"decimal\"\n                class=\"form-control\"\n                [ngClass]=\"[componentHeight | toControlHeight]\"\n                [value]=\"value\"\n                [attr.placeholder]=\"placeholder\"\n                (blur)=\"onTouch()\"\n                (input)=\"setValue($event.target.value)\"\n                (keypress)=\"onKeyPress($event)\"\n                [disabled]=\"isdisabled\"\n                [readonly]=\"readonly\" />\n\n            <div\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n                class=\"form-control-static\"\n                style=\"margin-left: 5px\">\n                <sac-tooltip\n                    *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                    [tooltiptext]=\"helptext\"\n                    [inlinemode]=\"true\">\n                    <span\n                        [class]=\"HelptextTooltipIcon\"\n                        style=\"margin-left: 5px; margin-right: 5px\">\n                    </span>\n                </sac-tooltip>\n            </div>\n        </div>\n\n        <p\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"help-block\">\n            {{ helptext }}\n        </p>\n\n        <div\n            class=\"help-block help-block-error\"\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n            {{ GetErrorMessage() | async }}\n        </div>\n    </div>\n</div>\n" }]
+                    ], template: "<div\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\n        <div [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n            <input\n                id=\"{{ name }}\"\n                name=\"{{ name }}\"\n                type=\"text\"\n                inputmode=\"decimal\"\n                class=\"form-control\"\n                [ngClass]=\"[componentHeight | toControlHeight]\"\n                [class.is-invalid]=\"invalid && (dirty || touched)\"\n                [value]=\"value\"\n                [attr.placeholder]=\"placeholder\"\n                (blur)=\"onTouch()\"\n                (input)=\"setValue($event.target.value)\"\n                (keypress)=\"onKeyPress($event)\"\n                [disabled]=\"isdisabled\"\n                [readonly]=\"readonly\" />\n\n            <div\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n                class=\"form-control-static\"\n                style=\"margin-left: 5px\">\n                <sac-tooltip\n                    *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                    [tooltiptext]=\"helptext\"\n                    [inlinemode]=\"true\">\n                    <span\n                        [class]=\"HelptextTooltipIcon\"\n                        style=\"margin-left: 5px; margin-right: 5px\">\n                    </span>\n                </sac-tooltip>\n            </div>\n        </div>\n\n        <p\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"help-block\">\n            {{ helptext }}\n        </p>\n\n        <div\n            class=\"help-block help-block-error\"\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n            {{ GetErrorMessage() | async }}\n        </div>\n    </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: SacFormLayoutDirective, decorators: [{
                     type: Host
                 }, {
@@ -1486,7 +1430,7 @@ SacInputPasswordComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             multi: true,
             useExisting: forwardRef(() => SacInputPasswordComponent),
         },
-    ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\n        <div [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n            <div [class.input-group]=\"passwordeye\">\n                <input\n                    id=\"{{ name }}\"\n                    name=\"{{ name }}\"\n                    class=\"form-control\"\n                    [ngClass]=\"[componentHeight | toControlHeight]\"\n                    [type]=\"passwordeyevisible ? 'text' : 'password'\"\n                    [value]=\"value\"\n                    [attr.placeholder]=\"placeholder\"\n                    (blur)=\"onTouch()\"\n                    (input)=\"setValue($event.target.value)\"\n                    [attr.maxlength]=\"maxtextlength\"\n                    autocomplete=\"new-password\"\n                    [disabled]=\"isdisabled\"\n                    [readonly]=\"readonly\" />\n                <div\n                    *ngIf=\"passwordeye\"\n                    class=\"input-group-btn\">\n                    <a\n                        class=\"btn btn-default\"\n                        (click)=\"onTogglePasswordEye()\"\n                        ><span [ngClass]=\"passwordeyevisible ? PasswordEyeVisibleIcon : PasswordEyeHiddenIcon\"></span\n                    ></a>\n                </div>\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n                class=\"form-control-static\"\n                style=\"margin-left: 5px\">\n                <sac-tooltip\n                    *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                    [tooltiptext]=\"helptext\"\n                    [inlinemode]=\"true\">\n                    <span\n                        [class]=\"HelptextTooltipIcon\"\n                        style=\"margin-left: 5px; margin-right: 5px\">\n                    </span>\n                </sac-tooltip>\n            </div>\n        </div>\n\n        <p\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"help-block\">\n            {{ helptext }}\n        </p>\n\n        <div\n            class=\"help-block help-block-error\"\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n            {{ GetErrorMessage() | async }}\n        </div>\n    </div>\n</div>\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: { "toLabelHeight": SacToLabelHeightPipe, "toLabelWidthCss": SacToLabelWidthCssPipe, "toControlWidthCss": SacToControlWidthCssPipe, "toControlHeight": SacToControlHeightPipe, "async": i3.AsyncPipe } });
+    ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\n        <div [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n            <div [class.input-group]=\"passwordeye\">\n                <input\n                    id=\"{{ name }}\"\n                    name=\"{{ name }}\"\n                    class=\"form-control\"\n                    [ngClass]=\"[componentHeight | toControlHeight]\"\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\n                    [type]=\"passwordeyevisible ? 'text' : 'password'\"\n                    [value]=\"value\"\n                    [attr.placeholder]=\"placeholder\"\n                    (blur)=\"onTouch()\"\n                    (input)=\"setValue($event.target.value)\"\n                    (keypress)=\"onKeyPress($event)\"\n                    [attr.maxlength]=\"maxtextlength\"\n                    autocomplete=\"new-password\"\n                    [disabled]=\"isdisabled\"\n                    [readonly]=\"readonly\" />\n                <div\n                    *ngIf=\"passwordeye\"\n                    class=\"input-group-btn\">\n                    <a\n                        class=\"btn btn-default\"\n                        (click)=\"onTogglePasswordEye()\"\n                        ><span [ngClass]=\"passwordeyevisible ? PasswordEyeVisibleIcon : PasswordEyeHiddenIcon\"></span\n                    ></a>\n                </div>\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n                class=\"form-control-static\"\n                style=\"margin-left: 5px\">\n                <sac-tooltip\n                    *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                    [tooltiptext]=\"helptext\"\n                    [inlinemode]=\"true\">\n                    <span\n                        [class]=\"HelptextTooltipIcon\"\n                        style=\"margin-left: 5px; margin-right: 5px\">\n                    </span>\n                </sac-tooltip>\n            </div>\n        </div>\n\n        <p\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"help-block\">\n            {{ helptext }}\n        </p>\n\n        <div\n            class=\"help-block help-block-error\"\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n            {{ GetErrorMessage() | async }}\n        </div>\n    </div>\n</div>\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: { "toLabelHeight": SacToLabelHeightPipe, "testingattribute": i5.SacTestingAttributePipe, "toLabelWidthCss": SacToLabelWidthCssPipe, "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: [
@@ -1500,7 +1444,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => SacInputPasswordComponent),
                         },
-                    ], template: "<div\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\n        <div [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n            <div [class.input-group]=\"passwordeye\">\n                <input\n                    id=\"{{ name }}\"\n                    name=\"{{ name }}\"\n                    class=\"form-control\"\n                    [ngClass]=\"[componentHeight | toControlHeight]\"\n                    [type]=\"passwordeyevisible ? 'text' : 'password'\"\n                    [value]=\"value\"\n                    [attr.placeholder]=\"placeholder\"\n                    (blur)=\"onTouch()\"\n                    (input)=\"setValue($event.target.value)\"\n                    [attr.maxlength]=\"maxtextlength\"\n                    autocomplete=\"new-password\"\n                    [disabled]=\"isdisabled\"\n                    [readonly]=\"readonly\" />\n                <div\n                    *ngIf=\"passwordeye\"\n                    class=\"input-group-btn\">\n                    <a\n                        class=\"btn btn-default\"\n                        (click)=\"onTogglePasswordEye()\"\n                        ><span [ngClass]=\"passwordeyevisible ? PasswordEyeVisibleIcon : PasswordEyeHiddenIcon\"></span\n                    ></a>\n                </div>\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n                class=\"form-control-static\"\n                style=\"margin-left: 5px\">\n                <sac-tooltip\n                    *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                    [tooltiptext]=\"helptext\"\n                    [inlinemode]=\"true\">\n                    <span\n                        [class]=\"HelptextTooltipIcon\"\n                        style=\"margin-left: 5px; margin-right: 5px\">\n                    </span>\n                </sac-tooltip>\n            </div>\n        </div>\n\n        <p\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"help-block\">\n            {{ helptext }}\n        </p>\n\n        <div\n            class=\"help-block help-block-error\"\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n            {{ GetErrorMessage() | async }}\n        </div>\n    </div>\n</div>\n" }]
+                    ], template: "<div\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\n        <div [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n            <div [class.input-group]=\"passwordeye\">\n                <input\n                    id=\"{{ name }}\"\n                    name=\"{{ name }}\"\n                    class=\"form-control\"\n                    [ngClass]=\"[componentHeight | toControlHeight]\"\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\n                    [type]=\"passwordeyevisible ? 'text' : 'password'\"\n                    [value]=\"value\"\n                    [attr.placeholder]=\"placeholder\"\n                    (blur)=\"onTouch()\"\n                    (input)=\"setValue($event.target.value)\"\n                    (keypress)=\"onKeyPress($event)\"\n                    [attr.maxlength]=\"maxtextlength\"\n                    autocomplete=\"new-password\"\n                    [disabled]=\"isdisabled\"\n                    [readonly]=\"readonly\" />\n                <div\n                    *ngIf=\"passwordeye\"\n                    class=\"input-group-btn\">\n                    <a\n                        class=\"btn btn-default\"\n                        (click)=\"onTogglePasswordEye()\"\n                        ><span [ngClass]=\"passwordeyevisible ? PasswordEyeVisibleIcon : PasswordEyeHiddenIcon\"></span\n                    ></a>\n                </div>\n            </div>\n            <div\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n                class=\"form-control-static\"\n                style=\"margin-left: 5px\">\n                <sac-tooltip\n                    *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                    [tooltiptext]=\"helptext\"\n                    [inlinemode]=\"true\">\n                    <span\n                        [class]=\"HelptextTooltipIcon\"\n                        style=\"margin-left: 5px; margin-right: 5px\">\n                    </span>\n                </sac-tooltip>\n            </div>\n        </div>\n\n        <p\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"help-block\">\n            {{ helptext }}\n        </p>\n\n        <div\n            class=\"help-block help-block-error\"\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n            {{ GetErrorMessage() | async }}\n        </div>\n    </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: SacFormLayoutDirective, decorators: [{
                     type: Host
                 }, {
@@ -1530,7 +1474,7 @@ SacInputSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             multi: true,
             useExisting: forwardRef(() => SacInputSearchComponent),
         },
-    ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.clearfix]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-static pull-right\"\n            style=\"margin-left: 5px\">\n            <sac-tooltip\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [class]=\"HelptextTooltipIcon\"\n                    style=\"margin-left: 5px; margin-right: 5px\">\n                </span>\n            </sac-tooltip>\n        </div>\n\n        <div\n            class=\"input-group\"\n            [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n            [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\n            <input\n                id=\"{{ name }}\"\n                name=\"{{ name }}\"\n                type=\"text\"\n                inputmode=\"search\"\n                class=\"form-control\"\n                [ngClass]=\"[componentHeight | toControlHeight]\"\n                [value]=\"value\"\n                [attr.placeholder]=\"placeholder\"\n                (blur)=\"onTouch()\"\n                (input)=\"setValue($event.target.value)\"\n                [attr.maxlength]=\"maxtextlength\"\n                [disabled]=\"isdisabled\"\n                [readonly]=\"readonly\" />\n            <span class=\"input-group-btn\">\n                <button\n                    type=\"button\"\n                    class=\"btn btn-default\"\n                    id=\"{{ name }}_search\"\n                    (click)=\"searchClick()\">\n                    <i\n                        *ngIf=\"buttonmode === 'icon' || buttonmode === 'mixed'\"\n                        [class]=\"iconname\"\n                        [style.margin-right.px]=\"buttonmode === 'mixed' ? 7 : null\">\n                    </i>\n                    <ng-container *ngIf=\"buttonmode === 'text' || buttonmode === 'mixed'\">{{ buttontext }}</ng-container>\n                </button>\n            </span>\n        </div>\n\n        <p\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"help-block\">\n            {{ helptext }}\n        </p>\n    </div>\n</div>\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: { "toLabelHeight": SacToLabelHeightPipe, "toLabelWidthCss": SacToLabelWidthCssPipe, "toControlWidthCss": SacToControlWidthCssPipe, "toControlHeight": SacToControlHeightPipe } });
+    ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.clearfix]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-static pull-right\"\n            style=\"margin-left: 5px\">\n            <sac-tooltip\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [class]=\"HelptextTooltipIcon\"\n                    style=\"margin-left: 5px; margin-right: 5px\">\n                </span>\n            </sac-tooltip>\n        </div>\n\n        <div\n            class=\"input-group\"\n            [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n            [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\n            <input\n                id=\"{{ name }}\"\n                name=\"{{ name }}\"\n                type=\"text\"\n                inputmode=\"search\"\n                class=\"form-control\"\n                [ngClass]=\"[componentHeight | toControlHeight]\"\n                [class.is-invalid]=\"invalid && (dirty || touched)\"\n                [value]=\"value\"\n                [attr.placeholder]=\"placeholder\"\n                (blur)=\"onTouch()\"\n                (input)=\"setValue($event.target.value)\"\n                (keypress)=\"onKeyPress($event)\"\n                [attr.maxlength]=\"maxtextlength\"\n                [disabled]=\"isdisabled\"\n                [readonly]=\"readonly\" />\n            <span class=\"input-group-btn\">\n                <button\n                    type=\"button\"\n                    class=\"btn btn-default\"\n                    id=\"{{ name }}_search\"\n                    (click)=\"searchClick()\">\n                    <i\n                        *ngIf=\"buttonmode === 'icon' || buttonmode === 'mixed'\"\n                        [class]=\"iconname\"\n                        [style.margin-right.px]=\"buttonmode === 'mixed' ? 7 : null\">\n                    </i>\n                    <ng-container *ngIf=\"buttonmode === 'text' || buttonmode === 'mixed'\">{{ buttontext }}</ng-container>\n                </button>\n            </span>\n        </div>\n\n        <p\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"help-block\">\n            {{ helptext }}\n        </p>\n    </div>\n</div>\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: { "toLabelHeight": SacToLabelHeightPipe, "testingattribute": i5.SacTestingAttributePipe, "toLabelWidthCss": SacToLabelWidthCssPipe, "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: [
@@ -1544,7 +1488,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => SacInputSearchComponent),
                         },
-                    ], template: "<div\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.clearfix]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-static pull-right\"\n            style=\"margin-left: 5px\">\n            <sac-tooltip\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [class]=\"HelptextTooltipIcon\"\n                    style=\"margin-left: 5px; margin-right: 5px\">\n                </span>\n            </sac-tooltip>\n        </div>\n\n        <div\n            class=\"input-group\"\n            [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n            [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\n            <input\n                id=\"{{ name }}\"\n                name=\"{{ name }}\"\n                type=\"text\"\n                inputmode=\"search\"\n                class=\"form-control\"\n                [ngClass]=\"[componentHeight | toControlHeight]\"\n                [value]=\"value\"\n                [attr.placeholder]=\"placeholder\"\n                (blur)=\"onTouch()\"\n                (input)=\"setValue($event.target.value)\"\n                [attr.maxlength]=\"maxtextlength\"\n                [disabled]=\"isdisabled\"\n                [readonly]=\"readonly\" />\n            <span class=\"input-group-btn\">\n                <button\n                    type=\"button\"\n                    class=\"btn btn-default\"\n                    id=\"{{ name }}_search\"\n                    (click)=\"searchClick()\">\n                    <i\n                        *ngIf=\"buttonmode === 'icon' || buttonmode === 'mixed'\"\n                        [class]=\"iconname\"\n                        [style.margin-right.px]=\"buttonmode === 'mixed' ? 7 : null\">\n                    </i>\n                    <ng-container *ngIf=\"buttonmode === 'text' || buttonmode === 'mixed'\">{{ buttontext }}</ng-container>\n                </button>\n            </span>\n        </div>\n\n        <p\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"help-block\">\n            {{ helptext }}\n        </p>\n    </div>\n</div>\n" }]
+                    ], template: "<div\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.clearfix]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-static pull-right\"\n            style=\"margin-left: 5px\">\n            <sac-tooltip\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [class]=\"HelptextTooltipIcon\"\n                    style=\"margin-left: 5px; margin-right: 5px\">\n                </span>\n            </sac-tooltip>\n        </div>\n\n        <div\n            class=\"input-group\"\n            [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n            [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\n            <input\n                id=\"{{ name }}\"\n                name=\"{{ name }}\"\n                type=\"text\"\n                inputmode=\"search\"\n                class=\"form-control\"\n                [ngClass]=\"[componentHeight | toControlHeight]\"\n                [class.is-invalid]=\"invalid && (dirty || touched)\"\n                [value]=\"value\"\n                [attr.placeholder]=\"placeholder\"\n                (blur)=\"onTouch()\"\n                (input)=\"setValue($event.target.value)\"\n                (keypress)=\"onKeyPress($event)\"\n                [attr.maxlength]=\"maxtextlength\"\n                [disabled]=\"isdisabled\"\n                [readonly]=\"readonly\" />\n            <span class=\"input-group-btn\">\n                <button\n                    type=\"button\"\n                    class=\"btn btn-default\"\n                    id=\"{{ name }}_search\"\n                    (click)=\"searchClick()\">\n                    <i\n                        *ngIf=\"buttonmode === 'icon' || buttonmode === 'mixed'\"\n                        [class]=\"iconname\"\n                        [style.margin-right.px]=\"buttonmode === 'mixed' ? 7 : null\">\n                    </i>\n                    <ng-container *ngIf=\"buttonmode === 'text' || buttonmode === 'mixed'\">{{ buttontext }}</ng-container>\n                </button>\n            </span>\n        </div>\n\n        <p\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"help-block\">\n            {{ helptext }}\n        </p>\n    </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: SacFormLayoutDirective, decorators: [{
                     type: Host
                 }, {
@@ -1565,7 +1509,8 @@ SACBootstrap3InputModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0"
         CommonModule,
         FormsModule,
         SACBootstrap3TooltipModule,
-        SACBootstrap3LayoutModule], exports: [SacInputComponent,
+        SACBootstrap3LayoutModule,
+        SACCommonUtliltiesModule], exports: [SacInputComponent,
         SacInputAreaComponent,
         SacInputCurrencyComponent,
         SacInputDecimalComponent,
@@ -1579,6 +1524,7 @@ SACBootstrap3InputModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0"
             FormsModule,
             SACBootstrap3TooltipModule,
             SACBootstrap3LayoutModule,
+            SACCommonUtliltiesModule,
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3InputModule, decorators: [{
             type: NgModule,
@@ -1599,6 +1545,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                         FormsModule,
                         SACBootstrap3TooltipModule,
                         SACBootstrap3LayoutModule,
+                        SACCommonUtliltiesModule,
                     ],
                     exports: [
                         SacInputComponent,
@@ -1613,7 +1560,59 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                 }]
         }] });
 
-// #region Classes
+// #region Variables
+const DROPDOWN_TOKEN = new InjectionToken('SacDropdownToken');
+const LISTBOX_TOKEN = new InjectionToken('SacListboxToken');
+// #endregion Variables
+
+class SacDropdownOptionDirective extends SacDropdownOptionCommon {
+    // #region Constructors
+    /**
+     * Konstruktor
+     * @param elementRef Referenz auf HTML DOM Element
+     * @param renderer Angular Rendering Engine
+     * @param dropdownComponent Referenz auf DropDown Komponente
+     */
+    constructor(elementRef, renderer, dropdownComponent) {
+        super(elementRef, renderer, dropdownComponent);
+    }
+}
+SacDropdownOptionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacDropdownOptionDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DROPDOWN_TOKEN, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+SacDropdownOptionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: SacDropdownOptionDirective, selector: "option,[sacOption]", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacDropdownOptionDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'option,[sacOption]' }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [DROPDOWN_TOKEN]
+                }] }]; } });
+
+class SacListboxOptionDirective extends SacListboxOptionCommon {
+    // #region Constructors
+    /**
+     * Konstruktor
+     * @param elementRef Referenz auf HTML DOM Element
+     * @param renderer Angular Rendering Engine
+     * @param listboxComponent Referenz auf DropDown Komponente
+     */
+    constructor(elementRef, renderer, listboxComponent) {
+        super(elementRef, renderer, listboxComponent);
+    }
+}
+SacListboxOptionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacListboxOptionDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: LISTBOX_TOKEN, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+SacListboxOptionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: SacListboxOptionDirective, selector: "option,[sacOption]", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacListboxOptionDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'option,[sacOption]' }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [LISTBOX_TOKEN]
+                }] }]; } });
+
 class SacDropdownComponent extends SacDropdownCommon {
     // #region Constructors
     /**
@@ -1629,6 +1628,7 @@ class SacDropdownComponent extends SacDropdownCommon {
 }
 SacDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacDropdownComponent, deps: [{ token: SacFormLayoutDirective, host: true, optional: true }, { token: i0.Injector }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
 SacDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacDropdownComponent, selector: "sac-dropdown", providers: [
+        { provide: DROPDOWN_TOKEN, useExisting: forwardRef(() => SacDropdownComponent) },
         {
             provide: NG_VALUE_ACCESSOR,
             multi: true,
@@ -1639,10 +1639,11 @@ SacDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             multi: true,
             useExisting: forwardRef(() => SacDropdownComponent),
         },
-    ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\n        <div [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n            <select\n                #dropdownitem\n                id=\"{{ name }}\"\n                name=\"{{ name }}\"\n                class=\"form-control\"\n                [ngClass]=\"[componentHeight | toControlHeight]\"\n                (blur)=\"onTouch()\"\n                (change)=\"setValue(dropdownitem.value)\"\n                [disabled]=\"isdisabled\">\n                <option\n                    *ngIf=\"emptylabel !== ''\"\n                    [ngValue]=\"emptyvalue\">\n                    {{ emptylabel }}\n                </option>\n\n                <ng-content></ng-content>\n\n                <ng-container *ngIf=\"groupitems === ''\">\n                    <option\n                        *ngFor=\"let item of options\"\n                        [ngValue]=\"optionvalue ? item[optionvalue] : item\"\n                        [disabled]=\"optionenabled !== '' && item[optionenabled] === false\">\n                        <ng-template *ngTemplateOutlet=\"optionlabeltemplate || defaultItemLabelTemplate; context: { label: item[optionlabel], item: item }\"> </ng-template>\n                    </option>\n                </ng-container>\n\n                <ng-container *ngIf=\"groupitems !== ''\">\n                    <optgroup\n                        *ngFor=\"let group of options\"\n                        [attr.label]=\"group[grouplabel]\">\n                        <option\n                            *ngFor=\"let item of group[groupitems]\"\n                            [ngValue]=\"optionvalue ? item[optionvalue] : item\"\n                            [disabled]=\"optionenabled !== '' && item[optionenabled] === false\">\n                            <ng-template *ngTemplateOutlet=\"optionlabeltemplate || defaultItemLabelTemplate; context: { label: item[optionlabel], item: item }\"> </ng-template>\n                        </option>\n                    </optgroup>\n                </ng-container>\n            </select>\n\n            <div\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n                class=\"form-control-static\"\n                style=\"margin-left: 5px\">\n                <sac-tooltip\n                    *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                    [tooltiptext]=\"helptext\"\n                    [inlinemode]=\"true\">\n                    <span\n                        [class]=\"HelptextTooltipIcon\"\n                        style=\"margin-left: 5px; margin-right: 5px\">\n                    </span>\n                </sac-tooltip>\n            </div>\n        </div>\n\n        <p\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"help-block\">\n            {{ helptext }}\n        </p>\n\n        <div\n            class=\"help-block help-block-error\"\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n            {{ GetErrorMessage() | async }}\n        </div>\n    </div>\n</div>\n\n<ng-template\n    #defaultItemLabelTemplate\n    let-label=\"label\">\n    {{ label }}\n</ng-template>\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 i2.NgSelectOption; }), selector: "option", inputs: ["ngValue", "value"] }, { type: i0.forwardRef(function () { return i2.ɵNgSelectMultipleOption; }), selector: "option", inputs: ["ngValue", "value"] }, { type: i0.forwardRef(function () { return SacDropdownOptionDirective; }), selector: "option,[sacOption]" }, { 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: { "toLabelHeight": i0.forwardRef(function () { return SacToLabelHeightPipe; }), "toLabelWidthCss": i0.forwardRef(function () { return SacToLabelWidthCssPipe; }), "toControlWidthCss": i0.forwardRef(function () { return SacToControlWidthCssPipe; }), "toControlHeight": i0.forwardRef(function () { return SacToControlHeightPipe; }), "async": i0.forwardRef(function () { return i3.AsyncPipe; }) } });
+    ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\n        <div [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n            <select\n                #dropdownitem\n                id=\"{{ name }}\"\n                name=\"{{ name }}\"\n                class=\"form-control\"\n                [ngClass]=\"[componentHeight | toControlHeight]\"\n                [class.is-invalid]=\"invalid && (dirty || touched)\"\n                (blur)=\"onTouch()\"\n                (change)=\"setValue(dropdownitem.value)\"\n                [disabled]=\"isdisabled\">\n                <option\n                    *ngIf=\"emptylabel !== ''\"\n                    [ngValue]=\"emptyvalue\"\n                    >{{ emptylabel }}</option\n                >\n\n                <ng-content></ng-content>\n\n                <ng-container *ngIf=\"groupitems === ''\">\n                    <option\n                        *ngFor=\"let item of options\"\n                        [ngValue]=\"optionvalue ? item[optionvalue] : item\"\n                        [disabled]=\"optionenabled !== '' && item[optionenabled] === false\">\n                        <ng-template *ngTemplateOutlet=\"optionlabeltemplate || defaultItemLabelTemplate; context: { label: item[optionlabel], item: item }\"> </ng-template>\n                    </option>\n                </ng-container>\n\n                <ng-container *ngIf=\"groupitems !== ''\">\n                    <optgroup\n                        *ngFor=\"let group of options\"\n                        [attr.label]=\"group[grouplabel]\">\n                        <option\n                            *ngFor=\"let item of group[groupitems]\"\n                            [ngValue]=\"optionvalue ? item[optionvalue] : item\"\n                            [disabled]=\"optionenabled !== '' && item[optionenabled] === false\">\n                            <ng-template *ngTemplateOutlet=\"optionlabeltemplate || defaultItemLabelTemplate; context: { label: item[optionlabel], item: item }\"> </ng-template>\n                        </option>\n                    </optgroup>\n                </ng-container>\n            </select>\n\n            <div\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n                class=\"form-control-static\"\n                style=\"margin-left: 5px\">\n                <sac-tooltip\n                    *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                    [tooltiptext]=\"helptext\"\n                    [inlinemode]=\"true\">\n                    <span\n                        [class]=\"HelptextTooltipIcon\"\n                        style=\"margin-left: 5px; margin-right: 5px\">\n                    </span>\n                </sac-tooltip>\n            </div>\n        </div>\n\n        <p\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"help-block\">\n            {{ helptext }}\n        </p>\n\n        <div\n            class=\"help-block help-block-error\"\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n            {{ GetErrorMessage() | async }}\n        </div>\n    </div>\n</div>\n\n<ng-template\n    #defaultItemLabelTemplate\n    let-label=\"label\"\n    >{{ label }}</ng-template\n>\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"] }, { type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: SacDropdownOptionDirective, selector: "option,[sacOption]" }, { type: SacListboxOptionDirective, selector: "option,[sacOption]" }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "toLabelHeight": SacToLabelHeightPipe, "testingattribute": i5.SacTestingAttributePipe, "toLabelWidthCss": SacToLabelWidthCssPipe, "toControlWidthCss": SacToControlWidthCssPipe, "toControlHeight": SacToControlHeightPipe, "async": i3.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacDropdownComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sac-dropdown', providers: [
+                        { provide: DROPDOWN_TOKEN, useExisting: forwardRef(() => SacDropdownComponent) },
                         {
                             provide: NG_VALUE_ACCESSOR,
                             multi: true,
@@ -1653,35 +1654,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => SacDropdownComponent),
                         },
-                    ], template: "<div\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\n        <div [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n            <select\n                #dropdownitem\n                id=\"{{ name }}\"\n                name=\"{{ name }}\"\n                class=\"form-control\"\n                [ngClass]=\"[componentHeight | toControlHeight]\"\n                (blur)=\"onTouch()\"\n                (change)=\"setValue(dropdownitem.value)\"\n                [disabled]=\"isdisabled\">\n                <option\n                    *ngIf=\"emptylabel !== ''\"\n                    [ngValue]=\"emptyvalue\">\n                    {{ emptylabel }}\n                </option>\n\n                <ng-content></ng-content>\n\n                <ng-container *ngIf=\"groupitems === ''\">\n                    <option\n                        *ngFor=\"let item of options\"\n                        [ngValue]=\"optionvalue ? item[optionvalue] : item\"\n                        [disabled]=\"optionenabled !== '' && item[optionenabled] === false\">\n                        <ng-template *ngTemplateOutlet=\"optionlabeltemplate || defaultItemLabelTemplate; context: { label: item[optionlabel], item: item }\"> </ng-template>\n                    </option>\n                </ng-container>\n\n                <ng-container *ngIf=\"groupitems !== ''\">\n                    <optgroup\n                        *ngFor=\"let group of options\"\n                        [attr.label]=\"group[grouplabel]\">\n                        <option\n                            *ngFor=\"let item of group[groupitems]\"\n                            [ngValue]=\"optionvalue ? item[optionvalue] : item\"\n                            [disabled]=\"optionenabled !== '' && item[optionenabled] === false\">\n                            <ng-template *ngTemplateOutlet=\"optionlabeltemplate || defaultItemLabelTemplate; context: { label: item[optionlabel], item: item }\"> </ng-template>\n                        </option>\n                    </optgroup>\n                </ng-container>\n            </select>\n\n            <div\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n                class=\"form-control-static\"\n                style=\"margin-left: 5px\">\n                <sac-tooltip\n                    *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                    [tooltiptext]=\"helptext\"\n                    [inlinemode]=\"true\">\n                    <span\n                        [class]=\"HelptextTooltipIcon\"\n                        style=\"margin-left: 5px; margin-right: 5px\">\n                    </span>\n                </sac-tooltip>\n            </div>\n        </div>\n\n        <p\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"help-block\">\n            {{ helptext }}\n        </p>\n\n        <div\n            class=\"help-block help-block-error\"\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n            {{ GetErrorMessage() | async }}\n        </div>\n    </div>\n</div>\n\n<ng-template\n    #defaultItemLabelTemplate\n    let-label=\"label\">\n    {{ label }}\n</ng-template>\n" }]
+                    ], template: "<div\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\n        <div [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n            <select\n                #dropdownitem\n                id=\"{{ name }}\"\n                name=\"{{ name }}\"\n                class=\"form-control\"\n                [ngClass]=\"[componentHeight | toControlHeight]\"\n                [class.is-invalid]=\"invalid && (dirty || touched)\"\n                (blur)=\"onTouch()\"\n                (change)=\"setValue(dropdownitem.value)\"\n                [disabled]=\"isdisabled\">\n                <option\n                    *ngIf=\"emptylabel !== ''\"\n                    [ngValue]=\"emptyvalue\"\n                    >{{ emptylabel }}</option\n                >\n\n                <ng-content></ng-content>\n\n                <ng-container *ngIf=\"groupitems === ''\">\n                    <option\n                        *ngFor=\"let item of options\"\n                        [ngValue]=\"optionvalue ? item[optionvalue] : item\"\n                        [disabled]=\"optionenabled !== '' && item[optionenabled] === false\">\n                        <ng-template *ngTemplateOutlet=\"optionlabeltemplate || defaultItemLabelTemplate; context: { label: item[optionlabel], item: item }\"> </ng-template>\n                    </option>\n                </ng-container>\n\n                <ng-container *ngIf=\"groupitems !== ''\">\n                    <optgroup\n                        *ngFor=\"let group of options\"\n                        [attr.label]=\"group[grouplabel]\">\n                        <option\n                            *ngFor=\"let item of group[groupitems]\"\n                            [ngValue]=\"optionvalue ? item[optionvalue] : item\"\n                            [disabled]=\"optionenabled !== '' && item[optionenabled] === false\">\n                            <ng-template *ngTemplateOutlet=\"optionlabeltemplate || defaultItemLabelTemplate; context: { label: item[optionlabel], item: item }\"> </ng-template>\n                        </option>\n                    </optgroup>\n                </ng-container>\n            </select>\n\n            <div\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n                class=\"form-control-static\"\n                style=\"margin-left: 5px\">\n                <sac-tooltip\n                    *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                    [tooltiptext]=\"helptext\"\n                    [inlinemode]=\"true\">\n                    <span\n                        [class]=\"HelptextTooltipIcon\"\n                        style=\"margin-left: 5px; margin-right: 5px\">\n                    </span>\n                </sac-tooltip>\n            </div>\n        </div>\n\n        <p\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"help-block\">\n            {{ helptext }}\n        </p>\n\n        <div\n            class=\"help-block help-block-error\"\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n            {{ GetErrorMessage() | async }}\n        </div>\n    </div>\n</div>\n\n<ng-template\n    #defaultItemLabelTemplate\n    let-label=\"label\"\n    >{{ label }}</ng-template\n>\n" }]
         }], ctorParameters: function () { return [{ type: SacFormLayoutDirective, decorators: [{
                     type: Host
                 }, {
                     type: Optional
                 }] }, { type: i0.Injector }, { type: i0.Renderer2 }, { type: i0.ElementRef }]; } });
-class SacDropdownOptionDirective extends SacDropdownOptionCommon {
-    // #region Constructors
-    /**
-     * Konstruktor
-     * @param elementRef Referenz auf HTML DOM Element
-     * @param renderer Angular Rendering Engine
-     * @param dropdownList Referenz auf DropDown Komponente
-     */
-    constructor(elementRef, renderer, dropdownList) {
-        super(elementRef, renderer, dropdownList);
-    }
-}
-SacDropdownOptionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacDropdownOptionDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: SacDropdownComponent, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-SacDropdownOptionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: SacDropdownOptionDirective, selector: "option,[sacOption]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacDropdownOptionDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: 'option,[sacOption]' }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: SacDropdownComponent, decorators: [{
-                    type: Optional
-                }, {
-                    type: Host
-                }] }]; } });
 
+/**
+ * Listbox Komponente
+ */
 class SacListboxComponent extends SacListboxCommon {
     // #region Constructors
     /**
@@ -1695,6 +1677,7 @@ class SacListboxComponent extends SacListboxCommon {
 }
 SacListboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacListboxComponent, deps: [{ token: SacFormLayoutDirective, host: true, optional: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
 SacListboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacListboxComponent, selector: "sac-listbox", providers: [
+        { provide: LISTBOX_TOKEN, useExisting: SacListboxComponent },
         {
             provide: NG_VALUE_ACCESSOR,
             multi: true,
@@ -1705,10 +1688,11 @@ SacListboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             multi: true,
             useExisting: forwardRef(() => SacListboxComponent),
         },
-    ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\n        <div [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n            <select\n                multiple\n                id=\"{{ name }}\"\n                name=\"{{ name }}\"\n                class=\"form-control\"\n                [ngClass]=\"[componentHeight | toControlHeight]\"\n                [size]=\"rowsize\"\n                (blur)=\"onTouch()\"\n                (change)=\"getSelectedItems($event.target)\"\n                [disabled]=\"isdisabled\">\n                <ng-content></ng-content>\n                <ng-container *ngIf=\"groupitems === ''\">\n                    <option\n                        *ngFor=\"let option of options\"\n                        [value]=\"option[optionvalue]\"\n                        [disabled]=\"optionenabled !== '' && option[optionenabled] === false\">\n                        <ng-template *ngTemplateOutlet=\"optionlabeltemplate || defaultItemLabelTemplate; context: { label: option[optionlabel] }\"> </ng-template>\n                    </option>\n                </ng-container>\n                <ng-container *ngIf=\"groupitems !== ''\">\n                    <optgroup\n                        *ngFor=\"let option of options\"\n                        [attr.label]=\"option[grouplabel]\">\n                        <option\n                            *ngFor=\"let item of option[groupitems]\"\n                            [value]=\"item[optionvalue]\"\n                            [disabled]=\"optionenabled !== '' && item[optionenabled] === false\">\n                            <ng-template *ngTemplateOutlet=\"optionlabeltemplate || defaultItemLabelTemplate; context: { label: item[optionlabel] }\"> </ng-template>\n                        </option>\n                    </optgroup>\n                </ng-container>\n            </select>\n\n            <div\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n                class=\"form-control-static\"\n                style=\"margin-left: 5px\">\n                <sac-tooltip\n                    *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                    [tooltiptext]=\"helptext\"\n                    [inlinemode]=\"true\">\n                    <span\n                        [class]=\"HelptextTooltipIcon\"\n                        style=\"margin-left: 5px; margin-right: 5px\">\n                    </span>\n                </sac-tooltip>\n            </div>\n        </div>\n\n        <p\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"help-block\">\n            {{ helptext }}\n        </p>\n\n        <div\n            class=\"help-block help-block-error\"\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n            {{ GetErrorMessage() | async }}\n        </div>\n    </div>\n</div>\n\n<ng-template\n    #defaultItemLabelTemplate\n    let-label=\"label\">\n    {{ label }}\n</ng-template>\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"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: SacDropdownOptionDirective, selector: "option,[sacOption]" }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "toLabelHeight": SacToLabelHeightPipe, "toLabelWidthCss": SacToLabelWidthCssPipe, "toControlWidthCss": SacToControlWidthCssPipe, "toControlHeight": SacToControlHeightPipe, "async": i3.AsyncPipe } });
+    ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\n        <div [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n            <select\n                multiple\n                id=\"{{ name }}\"\n                name=\"{{ name }}\"\n                class=\"form-control\"\n                [ngClass]=\"[componentHeight | toControlHeight]\"\n                [class.is-invalid]=\"invalid && (dirty || touched)\"\n                [size]=\"rowsize\"\n                (blur)=\"onTouch()\"\n                (change)=\"getSelectedItems($event.target)\"\n                [disabled]=\"isdisabled\">\n                <ng-content></ng-content>\n                <ng-container *ngIf=\"groupitems === ''\">\n                    <option\n                        *ngFor=\"let option of options\"\n                        [value]=\"option[optionvalue]\"\n                        [disabled]=\"optionenabled !== '' && option[optionenabled] === false\">\n                        <ng-template *ngTemplateOutlet=\"optionlabeltemplate || defaultItemLabelTemplate; context: { label: option[optionlabel] }\"> </ng-template>\n                    </option>\n                </ng-container>\n                <ng-container *ngIf=\"groupitems !== ''\">\n                    <optgroup\n                        *ngFor=\"let option of options\"\n                        [attr.label]=\"option[grouplabel]\">\n                        <option\n                            *ngFor=\"let item of option[groupitems]\"\n                            [value]=\"item[optionvalue]\"\n                            [disabled]=\"optionenabled !== '' && item[optionenabled] === false\">\n                            <ng-template *ngTemplateOutlet=\"optionlabeltemplate || defaultItemLabelTemplate; context: { label: item[optionlabel] }\"> </ng-template>\n                        </option>\n                    </optgroup>\n                </ng-container>\n            </select>\n\n            <div\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n                class=\"form-control-static\"\n                style=\"margin-left: 5px\">\n                <sac-tooltip\n                    *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                    [tooltiptext]=\"helptext\"\n                    [inlinemode]=\"true\">\n                    <span\n                        [class]=\"HelptextTooltipIcon\"\n                        style=\"margin-left: 5px; margin-right: 5px\">\n                    </span>\n                </sac-tooltip>\n            </div>\n        </div>\n\n        <p\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"help-block\">\n            {{ helptext }}\n        </p>\n\n        <div\n            class=\"help-block help-block-error\"\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n            {{ GetErrorMessage() | async }}\n        </div>\n    </div>\n</div>\n\n<ng-template\n    #defaultItemLabelTemplate\n    let-label=\"label\"\n    >{{ label }}</ng-template\n>\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"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: SacDropdownOptionDirective, selector: "option,[sacOption]" }, { type: SacListboxOptionDirective, selector: "option,[sacOption]" }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "toLabelHeight": SacToLabelHeightPipe, "testingattribute": i5.SacTestingAttributePipe, "toLabelWidthCss": SacToLabelWidthCssPipe, "toControlWidthCss": SacToControlWidthCssPipe, "toControlHeight": SacToControlHeightPipe, "async": i3.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacListboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sac-listbox', providers: [
+                        { provide: LISTBOX_TOKEN, useExisting: SacListboxComponent },
                         {
                             provide: NG_VALUE_ACCESSOR,
                             multi: true,
@@ -1719,7 +1703,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => SacListboxComponent),
                         },
-                    ], template: "<div\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\n        <div [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n            <select\n                multiple\n                id=\"{{ name }}\"\n                name=\"{{ name }}\"\n                class=\"form-control\"\n                [ngClass]=\"[componentHeight | toControlHeight]\"\n                [size]=\"rowsize\"\n                (blur)=\"onTouch()\"\n                (change)=\"getSelectedItems($event.target)\"\n                [disabled]=\"isdisabled\">\n                <ng-content></ng-content>\n                <ng-container *ngIf=\"groupitems === ''\">\n                    <option\n                        *ngFor=\"let option of options\"\n                        [value]=\"option[optionvalue]\"\n                        [disabled]=\"optionenabled !== '' && option[optionenabled] === false\">\n                        <ng-template *ngTemplateOutlet=\"optionlabeltemplate || defaultItemLabelTemplate; context: { label: option[optionlabel] }\"> </ng-template>\n                    </option>\n                </ng-container>\n                <ng-container *ngIf=\"groupitems !== ''\">\n                    <optgroup\n                        *ngFor=\"let option of options\"\n                        [attr.label]=\"option[grouplabel]\">\n                        <option\n                            *ngFor=\"let item of option[groupitems]\"\n                            [value]=\"item[optionvalue]\"\n                            [disabled]=\"optionenabled !== '' && item[optionenabled] === false\">\n                            <ng-template *ngTemplateOutlet=\"optionlabeltemplate || defaultItemLabelTemplate; context: { label: item[optionlabel] }\"> </ng-template>\n                        </option>\n                    </optgroup>\n                </ng-container>\n            </select>\n\n            <div\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n                class=\"form-control-static\"\n                style=\"margin-left: 5px\">\n                <sac-tooltip\n                    *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                    [tooltiptext]=\"helptext\"\n                    [inlinemode]=\"true\">\n                    <span\n                        [class]=\"HelptextTooltipIcon\"\n                        style=\"margin-left: 5px; margin-right: 5px\">\n                    </span>\n                </sac-tooltip>\n            </div>\n        </div>\n\n        <p\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"help-block\">\n            {{ helptext }}\n        </p>\n\n        <div\n            class=\"help-block help-block-error\"\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n            {{ GetErrorMessage() | async }}\n        </div>\n    </div>\n</div>\n\n<ng-template\n    #defaultItemLabelTemplate\n    let-label=\"label\">\n    {{ label }}\n</ng-template>\n" }]
+                    ], template: "<div\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\n        <div [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n            <select\n                multiple\n                id=\"{{ name }}\"\n                name=\"{{ name }}\"\n                class=\"form-control\"\n                [ngClass]=\"[componentHeight | toControlHeight]\"\n                [class.is-invalid]=\"invalid && (dirty || touched)\"\n                [size]=\"rowsize\"\n                (blur)=\"onTouch()\"\n                (change)=\"getSelectedItems($event.target)\"\n                [disabled]=\"isdisabled\">\n                <ng-content></ng-content>\n                <ng-container *ngIf=\"groupitems === ''\">\n                    <option\n                        *ngFor=\"let option of options\"\n                        [value]=\"option[optionvalue]\"\n                        [disabled]=\"optionenabled !== '' && option[optionenabled] === false\">\n                        <ng-template *ngTemplateOutlet=\"optionlabeltemplate || defaultItemLabelTemplate; context: { label: option[optionlabel] }\"> </ng-template>\n                    </option>\n                </ng-container>\n                <ng-container *ngIf=\"groupitems !== ''\">\n                    <optgroup\n                        *ngFor=\"let option of options\"\n                        [attr.label]=\"option[grouplabel]\">\n                        <option\n                            *ngFor=\"let item of option[groupitems]\"\n                            [value]=\"item[optionvalue]\"\n                            [disabled]=\"optionenabled !== '' && item[optionenabled] === false\">\n                            <ng-template *ngTemplateOutlet=\"optionlabeltemplate || defaultItemLabelTemplate; context: { label: item[optionlabel] }\"> </ng-template>\n                        </option>\n                    </optgroup>\n                </ng-container>\n            </select>\n\n            <div\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n                class=\"form-control-static\"\n                style=\"margin-left: 5px\">\n                <sac-tooltip\n                    *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                    [tooltiptext]=\"helptext\"\n                    [inlinemode]=\"true\">\n                    <span\n                        [class]=\"HelptextTooltipIcon\"\n                        style=\"margin-left: 5px; margin-right: 5px\">\n                    </span>\n                </sac-tooltip>\n            </div>\n        </div>\n\n        <p\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"help-block\">\n            {{ helptext }}\n        </p>\n\n        <div\n            class=\"help-block help-block-error\"\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n            {{ GetErrorMessage() | async }}\n        </div>\n    </div>\n</div>\n\n<ng-template\n    #defaultItemLabelTemplate\n    let-label=\"label\"\n    >{{ label }}</ng-template\n>\n" }]
         }], ctorParameters: function () { return [{ type: SacFormLayoutDirective, decorators: [{
                     type: Host
                 }, {
@@ -1729,42 +1713,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
 class SACBootstrap3ListModule {
 }
 SACBootstrap3ListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3ListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SACBootstrap3ListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3ListModule, declarations: [SacDropdownComponent,
-        SacDropdownOptionDirective,
-        SacListboxComponent], imports: [CommonModule,
+SACBootstrap3ListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3ListModule, declarations: [SacDropdownComponent, SacDropdownOptionDirective, SacListboxComponent, SacListboxOptionDirective], imports: [CommonModule,
         SACCommonListboxOptionModule,
         SACBootstrap3TooltipModule,
         FormsModule,
-        SACBootstrap3LayoutModule], exports: [SacDropdownComponent,
-        SacDropdownOptionDirective,
-        SacListboxComponent] });
+        SACBootstrap3LayoutModule,
+        SACCommonUtliltiesModule], exports: [SacDropdownComponent, SacDropdownOptionDirective, SacListboxComponent, SacListboxOptionDirective] });
 SACBootstrap3ListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3ListModule, imports: [[
             CommonModule,
             SACCommonListboxOptionModule,
             SACBootstrap3TooltipModule,
             FormsModule,
             SACBootstrap3LayoutModule,
+            SACCommonUtliltiesModule,
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3ListModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [
-                        SacDropdownComponent,
-                        SacDropdownOptionDirective,
-                        SacListboxComponent,
-                    ],
+                    declarations: [SacDropdownComponent, SacDropdownOptionDirective, SacListboxComponent, SacListboxOptionDirective],
                     imports: [
                         CommonModule,
                         SACCommonListboxOptionModule,
                         SACBootstrap3TooltipModule,
                         FormsModule,
                         SACBootstrap3LayoutModule,
+                        SACCommonUtliltiesModule,
                     ],
-                    exports: [
-                        SacDropdownComponent,
-                        SacDropdownOptionDirective,
-                        SacListboxComponent,
-                    ],
+                    exports: [SacDropdownComponent, SacDropdownOptionDirective, SacListboxComponent, SacListboxOptionDirective],
                 }]
         }] });
 
@@ -1805,7 +1780,7 @@ SacStaticFormContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion:
             multi: true,
             useExisting: forwardRef(() => SacStaticFormContainerComponent),
         },
-    ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"row form-group\"\n    [class.has-error]=\"isinvalid && errormessage\"\n    [ngClass]=\"componentHeight | toLabelHeight\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\n        <div [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n            <ng-content></ng-content>\n\n            <div\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n                class=\"form-control-static\"\n                style=\"margin-left: 5px\">\n                <sac-tooltip\n                    *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                    [tooltiptext]=\"helptext\"\n                    [inlinemode]=\"true\">\n                    <span\n                        [class]=\"HelptextTooltipIcon\"\n                        style=\"margin-left: 5px; margin-right: 5px\">\n                    </span>\n                </sac-tooltip>\n            </div>\n        </div>\n\n        <p\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"help-block\">\n            {{ helptext }}\n        </p>\n\n        <div\n            class=\"help-block help-block-error\"\n            *ngIf=\"isinlineerrorenabled && isinvalid && errormessage\">\n            {{ errormessage }}\n        </div>\n    </div>\n</div>\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: { "toLabelHeight": SacToLabelHeightPipe, "toLabelWidthCss": SacToLabelWidthCssPipe, "toControlWidthCss": SacToControlWidthCssPipe } });
+    ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"row form-group\"\n    [class.has-error]=\"isinvalid && errormessage\"\n    [ngClass]=\"componentHeight | toLabelHeight\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\n        <div [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n            <ng-content></ng-content>\n\n            <div\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n                class=\"form-control-static\"\n                style=\"margin-left: 5px\">\n                <sac-tooltip\n                    *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                    [tooltiptext]=\"helptext\"\n                    [inlinemode]=\"true\">\n                    <span\n                        [class]=\"HelptextTooltipIcon\"\n                        style=\"margin-left: 5px; margin-right: 5px\">\n                    </span>\n                </sac-tooltip>\n            </div>\n        </div>\n\n        <p\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"help-block\">\n            {{ helptext }}\n        </p>\n\n        <div\n            class=\"help-block help-block-error\"\n            *ngIf=\"isinlineerrorenabled && isinvalid && errormessage\">\n            {{ errormessage }}\n        </div>\n    </div>\n</div>\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: { "toLabelHeight": SacToLabelHeightPipe, "testingattribute": i5.SacTestingAttributePipe, "toLabelWidthCss": SacToLabelWidthCssPipe, "toControlWidthCss": SacToControlWidthCssPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacStaticFormContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sac-staticformcontainer', providers: [
@@ -1819,7 +1794,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => SacStaticFormContainerComponent),
                         },
-                    ], template: "<div\n    class=\"row form-group\"\n    [class.has-error]=\"isinvalid && errormessage\"\n    [ngClass]=\"componentHeight | toLabelHeight\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\n        <div [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n            <ng-content></ng-content>\n\n            <div\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n                class=\"form-control-static\"\n                style=\"margin-left: 5px\">\n                <sac-tooltip\n                    *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                    [tooltiptext]=\"helptext\"\n                    [inlinemode]=\"true\">\n                    <span\n                        [class]=\"HelptextTooltipIcon\"\n                        style=\"margin-left: 5px; margin-right: 5px\">\n                    </span>\n                </sac-tooltip>\n            </div>\n        </div>\n\n        <p\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"help-block\">\n            {{ helptext }}\n        </p>\n\n        <div\n            class=\"help-block help-block-error\"\n            *ngIf=\"isinlineerrorenabled && isinvalid && errormessage\">\n            {{ errormessage }}\n        </div>\n    </div>\n</div>\n" }]
+                    ], template: "<div\n    class=\"row form-group\"\n    [class.has-error]=\"isinvalid && errormessage\"\n    [ngClass]=\"componentHeight | toLabelHeight\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\n        <div [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n            <ng-content></ng-content>\n\n            <div\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n                class=\"form-control-static\"\n                style=\"margin-left: 5px\">\n                <sac-tooltip\n                    *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                    [tooltiptext]=\"helptext\"\n                    [inlinemode]=\"true\">\n                    <span\n                        [class]=\"HelptextTooltipIcon\"\n                        style=\"margin-left: 5px; margin-right: 5px\">\n                    </span>\n                </sac-tooltip>\n            </div>\n        </div>\n\n        <p\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"help-block\">\n            {{ helptext }}\n        </p>\n\n        <div\n            class=\"help-block help-block-error\"\n            *ngIf=\"isinlineerrorenabled && isinvalid && errormessage\">\n            {{ errormessage }}\n        </div>\n    </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: SacFormLayoutDirective, decorators: [{
                     type: Host
                 }, {
@@ -1849,7 +1824,7 @@ SacStaticLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             multi: true,
             useExisting: forwardRef(() => SacStaticLabelComponent),
         },
-    ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"row form-group\"\n    [ngClass]=\"componentHeight | toLabelHeight\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n        <div\n            [id]=\"name\"\n            class=\"form-control-static\"\n            [style.padding-left.px]=\"0\"\n            [innerHTML]=\"value\">\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-static\"\n            style=\"margin-left: 5px\">\n            <sac-tooltip\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [class]=\"HelptextTooltipIcon\"\n                    style=\"margin-left: 5px; margin-right: 5px\">\n                </span>\n            </sac-tooltip>\n        </div>\n\n        <p\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"help-block\">\n            {{ helptext }}\n        </p>\n    </div>\n</div>\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: { "toLabelHeight": SacToLabelHeightPipe, "toLabelWidthCss": SacToLabelWidthCssPipe, "toControlWidthCss": SacToControlWidthCssPipe } });
+    ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"row form-group\"\n    [ngClass]=\"componentHeight | toLabelHeight\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n        <div\n            [id]=\"name\"\n            class=\"form-control-static\"\n            [style.padding-left.px]=\"0\"\n            [innerHTML]=\"value\">\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-static\"\n            style=\"margin-left: 5px\">\n            <sac-tooltip\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [class]=\"HelptextTooltipIcon\"\n                    style=\"margin-left: 5px; margin-right: 5px\">\n                </span>\n            </sac-tooltip>\n        </div>\n\n        <p\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"help-block\">\n            {{ helptext }}\n        </p>\n    </div>\n</div>\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: { "toLabelHeight": SacToLabelHeightPipe, "testingattribute": i5.SacTestingAttributePipe, "toLabelWidthCss": SacToLabelWidthCssPipe, "toControlWidthCss": SacToControlWidthCssPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacStaticLabelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sac-staticlabel', providers: [
@@ -1863,7 +1838,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => SacStaticLabelComponent),
                         },
-                    ], template: "<div\n    class=\"row form-group\"\n    [ngClass]=\"componentHeight | toLabelHeight\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n        <div\n            [id]=\"name\"\n            class=\"form-control-static\"\n            [style.padding-left.px]=\"0\"\n            [innerHTML]=\"value\">\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-static\"\n            style=\"margin-left: 5px\">\n            <sac-tooltip\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [class]=\"HelptextTooltipIcon\"\n                    style=\"margin-left: 5px; margin-right: 5px\">\n                </span>\n            </sac-tooltip>\n        </div>\n\n        <p\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"help-block\">\n            {{ helptext }}\n        </p>\n    </div>\n</div>\n" }]
+                    ], template: "<div\n    class=\"row form-group\"\n    [ngClass]=\"componentHeight | toLabelHeight\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n        <div\n            [id]=\"name\"\n            class=\"form-control-static\"\n            [style.padding-left.px]=\"0\"\n            [innerHTML]=\"value\">\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-static\"\n            style=\"margin-left: 5px\">\n            <sac-tooltip\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [class]=\"HelptextTooltipIcon\"\n                    style=\"margin-left: 5px; margin-right: 5px\">\n                </span>\n            </sac-tooltip>\n        </div>\n\n        <p\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"help-block\">\n            {{ helptext }}\n        </p>\n    </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: SacFormLayoutDirective, decorators: [{
                     type: Host
                 }, {
@@ -1873,23 +1848,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
 class SACBootstrap3StaticLabelModule {
 }
 SACBootstrap3StaticLabelModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3StaticLabelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SACBootstrap3StaticLabelModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3StaticLabelModule, declarations: [SacStaticLabelComponent, SacStaticFormContainerComponent], imports: [CommonModule,
-        SACBootstrap3TooltipModule,
-        SACBootstrap3LayoutModule], exports: [SacStaticLabelComponent, SacStaticFormContainerComponent] });
-SACBootstrap3StaticLabelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3StaticLabelModule, imports: [[
-            CommonModule,
-            SACBootstrap3TooltipModule,
-            SACBootstrap3LayoutModule,
-        ]] });
+SACBootstrap3StaticLabelModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3StaticLabelModule, declarations: [SacStaticLabelComponent, SacStaticFormContainerComponent], imports: [CommonModule, SACBootstrap3TooltipModule, SACBootstrap3LayoutModule, SACCommonUtliltiesModule], exports: [SacStaticLabelComponent, SacStaticFormContainerComponent] });
+SACBootstrap3StaticLabelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3StaticLabelModule, imports: [[CommonModule, SACBootstrap3TooltipModule, SACBootstrap3LayoutModule, SACCommonUtliltiesModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3StaticLabelModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [SacStaticLabelComponent, SacStaticFormContainerComponent],
-                    imports: [
-                        CommonModule,
-                        SACBootstrap3TooltipModule,
-                        SACBootstrap3LayoutModule,
-                    ],
+                    imports: [CommonModule, SACBootstrap3TooltipModule, SACBootstrap3LayoutModule, SACCommonUtliltiesModule],
                     exports: [SacStaticLabelComponent, SacStaticFormContainerComponent],
                 }]
         }] });
@@ -1904,15 +1869,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
         }] });
 
 class SacTabComponent extends SacTabCommon {
+    // #endregion Properties
+    // #region Public Methods
     tabItems() {
         return this._tabItems.toArray();
     }
 }
 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 -->\n<div [id]=\"name\" class=\"content-nav-tabs\">\n  <ul class=\"nav nav-tabs\" role=\"tablist\">\n    <li\n      *ngFor=\"let item of _tabItems\"\n      [ngClass]=\"{ 'active show': item.active, 'disabled': item.disabled }\"\n      (click)=\"selectTab(item)\"\n      [ngStyle]=\"{'cursor': item._disabled ? 'not-allowed' : 'pointer'}\"\n    >\n      <a [id]=\"GetTabItemButtonId(item.id)\" role=\"tab\">\n        <ng-template\n          *ngTemplateOutlet=\"tablabeltemplate || defaultTabLabelTemplate;context:{ label: item.label }\"\n        >\n        </ng-template>\n      </a>\n    </li>\n  </ul>\n</div>\n\n<!-- Tab panes -->\n<div class=\"tab-content\" style=\"margin-top: 15px\">\n  <ng-content></ng-content>\n</div>\n\n<ng-template #defaultTabLabelTemplate let-label=\"label\">\n  {{label}}\n</ng-template>\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"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+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 -->\n<div\n    [id]=\"name\"\n    class=\"content-nav-tabs\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <ul\n        class=\"nav nav-tabs\"\n        role=\"tablist\">\n        <li\n            *ngFor=\"let item of _tabItems\"\n            [ngClass]=\"{ 'active show': item.active, disabled: item.disabled }\"\n            (click)=\"selectTab(item)\"\n            [ngStyle]=\"{ cursor: item._disabled ? 'not-allowed' : 'pointer' }\"\n            [id]=\"GetTabItemButtonId(item.id)\">\n            <a\n                [id]=\"GetTabItemButtonId(item.id)\"\n                role=\"tab\">\n                <ng-template *ngTemplateOutlet=\"tablabeltemplate || defaultTabLabelTemplate; context: { label: item.label }\"> </ng-template>\n            </a>\n        </li>\n    </ul>\n</div>\n\n<!-- Tab panes -->\n<div\n    class=\"tab-content\"\n    style=\"margin-top: 15px\">\n    <ng-content></ng-content>\n</div>\n\n<ng-template\n    #defaultTabLabelTemplate\n    let-label=\"label\">\n    {{ label }}\n</ng-template>\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"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "testingattribute": i5.SacTestingAttributePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacTabComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sac-tab', template: "<!-- Nav tabs -->\n<div [id]=\"name\" class=\"content-nav-tabs\">\n  <ul class=\"nav nav-tabs\" role=\"tablist\">\n    <li\n      *ngFor=\"let item of _tabItems\"\n      [ngClass]=\"{ 'active show': item.active, 'disabled': item.disabled }\"\n      (click)=\"selectTab(item)\"\n      [ngStyle]=\"{'cursor': item._disabled ? 'not-allowed' : 'pointer'}\"\n    >\n      <a [id]=\"GetTabItemButtonId(item.id)\" role=\"tab\">\n        <ng-template\n          *ngTemplateOutlet=\"tablabeltemplate || defaultTabLabelTemplate;context:{ label: item.label }\"\n        >\n        </ng-template>\n      </a>\n    </li>\n  </ul>\n</div>\n\n<!-- Tab panes -->\n<div class=\"tab-content\" style=\"margin-top: 15px\">\n  <ng-content></ng-content>\n</div>\n\n<ng-template #defaultTabLabelTemplate let-label=\"label\">\n  {{label}}\n</ng-template>\n" }]
+            args: [{ selector: 'sac-tab', template: "<!-- Nav tabs -->\n<div\n    [id]=\"name\"\n    class=\"content-nav-tabs\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <ul\n        class=\"nav nav-tabs\"\n        role=\"tablist\">\n        <li\n            *ngFor=\"let item of _tabItems\"\n            [ngClass]=\"{ 'active show': item.active, disabled: item.disabled }\"\n            (click)=\"selectTab(item)\"\n            [ngStyle]=\"{ cursor: item._disabled ? 'not-allowed' : 'pointer' }\"\n            [id]=\"GetTabItemButtonId(item.id)\">\n            <a\n                [id]=\"GetTabItemButtonId(item.id)\"\n                role=\"tab\">\n                <ng-template *ngTemplateOutlet=\"tablabeltemplate || defaultTabLabelTemplate; context: { label: item.label }\"> </ng-template>\n            </a>\n        </li>\n    </ul>\n</div>\n\n<!-- Tab panes -->\n<div\n    class=\"tab-content\"\n    style=\"margin-top: 15px\">\n    <ng-content></ng-content>\n</div>\n\n<ng-template\n    #defaultTabLabelTemplate\n    let-label=\"label\">\n    {{ label }}\n</ng-template>\n" }]
         }], propDecorators: { _tabItems: [{
                 type: ContentChildren,
                 args: [SacTabItemComponent]
@@ -1921,18 +1888,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
 class SACBootstrap3TabsModule {
 }
 SACBootstrap3TabsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3TabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SACBootstrap3TabsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3TabsModule, declarations: [SacTabComponent, SacTabItemComponent], imports: [CommonModule], exports: [SacTabComponent, SacTabItemComponent] });
-SACBootstrap3TabsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3TabsModule, imports: [[
-            CommonModule
-        ]] });
+SACBootstrap3TabsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3TabsModule, declarations: [SacTabComponent, SacTabItemComponent], imports: [CommonModule, SACCommonUtliltiesModule], exports: [SacTabComponent, SacTabItemComponent] });
+SACBootstrap3TabsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3TabsModule, imports: [[CommonModule, SACCommonUtliltiesModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3TabsModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [SacTabComponent, SacTabItemComponent],
-                    imports: [
-                        CommonModule
-                    ],
-                    exports: [SacTabComponent, SacTabItemComponent]
+                    imports: [CommonModule, SACCommonUtliltiesModule],
+                    exports: [SacTabComponent, SacTabItemComponent],
                 }]
         }] });
 
@@ -1969,7 +1932,7 @@ SacTinyMceComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             useExisting: forwardRef(() => SacTinyMceComponent),
             multi: true,
         },
-    ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.has-error]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n        [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n        <div [style.flex-grow]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 1 : null\">\n            <editor\n                [id]=\"name + '_tinymce'\"\n                [init]=\"_config\"\n                [initialValue]=\"value\"\n                ngModel\n                [ngModelOptions]=\"{ standalone: true }\"\n                (ngModelChange)=\"setValue($event)\"\n                (onSaveContent)=\"save($event.event.content)\"\n                [disabled]=\"disabled\"\n                [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\"></editor>\n            <p\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"help-block\">\n                {{ helptext }}\n            </p>\n            <div\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"help-block\">\n                {{ GetErrorMessage() | async }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-static\"\n            style=\"margin-left: 5px\">\n            <sac-tooltip\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [class]=\"HelptextTooltipIcon\"\n                    style=\"margin-left: 5px; margin-right: 5px\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n\n<sac-dialog\n    *ngIf=\"selectdialogvisible\"\n    [allowesc]=\"false\"\n    [backdrop]=\"true\"\n    [(isvisible)]=\"selectdialogvisible\"\n    title=\"{{ lngResourceService.GetString(validationKeyService.TinyMceFileselectDialogtitle) | async }}\"\n    size=\"large\"\n    height=\"500px\">\n    <ng-container dialogbody> </ng-container>\n    <ng-container dialogfooter>\n        <sac-button\n            role=\"primary\"\n            [name]=\"name + '_modalOk'\"\n            text=\"{{ lngResourceService.GetString(validationKeyService.TinyMceFileselectOk) | async }}\"\n            (clicked)=\"setSelectDialogResult()\"></sac-button>\n        <sac-button\n            [name]=\"name + '_modalClose'\"\n            text=\"{{ lngResourceService.GetString(validationKeyService.TinyMceFileselectCancel) | async }}\"\n            (clicked)=\"closeSelectDialog()\"></sac-button>\n    </ng-container>\n</sac-dialog>\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", inputs: ["zindex"] }, { type: SacButtonComponent, selector: "sac-button" }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "toLabelHeight": SacToLabelHeightPipe, "toLabelWidthCss": SacToLabelWidthCssPipe, "toControlWidthCss": SacToControlWidthCssPipe, "async": i3.AsyncPipe } });
+    ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.has-error]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n        [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n        <div [style.flex-grow]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 1 : null\">\n            <editor\n                [id]=\"name + '_tinymce'\"\n                [init]=\"_config\"\n                [initialValue]=\"value\"\n                ngModel\n                [ngModelOptions]=\"{ standalone: true }\"\n                (ngModelChange)=\"setValue($event)\"\n                (onSaveContent)=\"save($event.event.content)\"\n                (onBlur)=\"blur()\"\n                [disabled]=\"disabled\"\n                [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\"></editor>\n            <p\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"help-block\">\n                {{ helptext }}\n            </p>\n            <div\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"help-block\">\n                {{ GetErrorMessage() | async }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-static\"\n            style=\"margin-left: 5px\">\n            <sac-tooltip\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [class]=\"HelptextTooltipIcon\"\n                    style=\"margin-left: 5px; margin-right: 5px\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n\n<sac-dialog\n    *ngIf=\"selectdialogvisible\"\n    [allowesc]=\"false\"\n    [backdrop]=\"true\"\n    [(isvisible)]=\"selectdialogvisible\"\n    title=\"{{ lngResourceService.GetString(validationKeyService.TinyMceFileselectDialogtitle) | async }}\"\n    size=\"large\"\n    height=\"500px\">\n    <ng-container dialogbody> </ng-container>\n    <ng-container dialogfooter>\n        <sac-button\n            role=\"primary\"\n            [name]=\"name + '_modalOk'\"\n            text=\"{{ lngResourceService.GetString(validationKeyService.TinyMceFileselectOk) | async }}\"\n            (clicked)=\"setSelectDialogResult()\"></sac-button>\n        <sac-button\n            [name]=\"name + '_modalClose'\"\n            text=\"{{ lngResourceService.GetString(validationKeyService.TinyMceFileselectCancel) | async }}\"\n            (clicked)=\"closeSelectDialog()\"></sac-button>\n    </ng-container>\n</sac-dialog>\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", inputs: ["zindex"] }, { type: SacButtonComponent, selector: "sac-button" }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "toLabelHeight": SacToLabelHeightPipe, "testingattribute": i5.SacTestingAttributePipe, "toLabelWidthCss": SacToLabelWidthCssPipe, "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: [
@@ -1983,7 +1946,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                             useExisting: forwardRef(() => SacTinyMceComponent),
                             multi: true,
                         },
-                    ], template: "<div\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.has-error]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n        [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n        <div [style.flex-grow]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 1 : null\">\n            <editor\n                [id]=\"name + '_tinymce'\"\n                [init]=\"_config\"\n                [initialValue]=\"value\"\n                ngModel\n                [ngModelOptions]=\"{ standalone: true }\"\n                (ngModelChange)=\"setValue($event)\"\n                (onSaveContent)=\"save($event.event.content)\"\n                [disabled]=\"disabled\"\n                [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\"></editor>\n            <p\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"help-block\">\n                {{ helptext }}\n            </p>\n            <div\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"help-block\">\n                {{ GetErrorMessage() | async }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-static\"\n            style=\"margin-left: 5px\">\n            <sac-tooltip\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [class]=\"HelptextTooltipIcon\"\n                    style=\"margin-left: 5px; margin-right: 5px\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n\n<sac-dialog\n    *ngIf=\"selectdialogvisible\"\n    [allowesc]=\"false\"\n    [backdrop]=\"true\"\n    [(isvisible)]=\"selectdialogvisible\"\n    title=\"{{ lngResourceService.GetString(validationKeyService.TinyMceFileselectDialogtitle) | async }}\"\n    size=\"large\"\n    height=\"500px\">\n    <ng-container dialogbody> </ng-container>\n    <ng-container dialogfooter>\n        <sac-button\n            role=\"primary\"\n            [name]=\"name + '_modalOk'\"\n            text=\"{{ lngResourceService.GetString(validationKeyService.TinyMceFileselectOk) | async }}\"\n            (clicked)=\"setSelectDialogResult()\"></sac-button>\n        <sac-button\n            [name]=\"name + '_modalClose'\"\n            text=\"{{ lngResourceService.GetString(validationKeyService.TinyMceFileselectCancel) | async }}\"\n            (clicked)=\"closeSelectDialog()\"></sac-button>\n    </ng-container>\n</sac-dialog>\n" }]
+                    ], template: "<div\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.has-error]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n        [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n        <div [style.flex-grow]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 1 : null\">\n            <editor\n                [id]=\"name + '_tinymce'\"\n                [init]=\"_config\"\n                [initialValue]=\"value\"\n                ngModel\n                [ngModelOptions]=\"{ standalone: true }\"\n                (ngModelChange)=\"setValue($event)\"\n                (onSaveContent)=\"save($event.event.content)\"\n                (onBlur)=\"blur()\"\n                [disabled]=\"disabled\"\n                [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\"></editor>\n            <p\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"help-block\">\n                {{ helptext }}\n            </p>\n            <div\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"help-block\">\n                {{ GetErrorMessage() | async }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-static\"\n            style=\"margin-left: 5px\">\n            <sac-tooltip\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [class]=\"HelptextTooltipIcon\"\n                    style=\"margin-left: 5px; margin-right: 5px\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n\n<sac-dialog\n    *ngIf=\"selectdialogvisible\"\n    [allowesc]=\"false\"\n    [backdrop]=\"true\"\n    [(isvisible)]=\"selectdialogvisible\"\n    title=\"{{ lngResourceService.GetString(validationKeyService.TinyMceFileselectDialogtitle) | async }}\"\n    size=\"large\"\n    height=\"500px\">\n    <ng-container dialogbody> </ng-container>\n    <ng-container dialogfooter>\n        <sac-button\n            role=\"primary\"\n            [name]=\"name + '_modalOk'\"\n            text=\"{{ lngResourceService.GetString(validationKeyService.TinyMceFileselectOk) | async }}\"\n            (clicked)=\"setSelectDialogResult()\"></sac-button>\n        <sac-button\n            [name]=\"name + '_modalClose'\"\n            text=\"{{ lngResourceService.GetString(validationKeyService.TinyMceFileselectCancel) | async }}\"\n            (clicked)=\"closeSelectDialog()\"></sac-button>\n    </ng-container>\n</sac-dialog>\n" }]
         }], ctorParameters: function () { return [{ type: SacFormLayoutDirective, decorators: [{
                     type: Host
                 }, {
@@ -1999,7 +1962,8 @@ SACBootstrap3TinyMceModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.
         SACBootstrap3ButtonModule,
         SACBootstrap3DialogModule,
         SACBootstrap3LayoutModule,
-        SACBootstrap3TooltipModule], exports: [SacTinyMceComponent] });
+        SACBootstrap3TooltipModule,
+        SACCommonUtliltiesModule], exports: [SacTinyMceComponent] });
 SACBootstrap3TinyMceModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3TinyMceModule, imports: [[
             CommonModule,
             FormsModule,
@@ -2008,6 +1972,7 @@ SACBootstrap3TinyMceModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.
             SACBootstrap3DialogModule,
             SACBootstrap3LayoutModule,
             SACBootstrap3TooltipModule,
+            SACCommonUtliltiesModule,
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3TinyMceModule, decorators: [{
             type: NgModule,
@@ -2021,6 +1986,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                         SACBootstrap3DialogModule,
                         SACBootstrap3LayoutModule,
                         SACBootstrap3TooltipModule,
+                        SACCommonUtliltiesModule,
                     ],
                     exports: [SacTinyMceComponent],
                 }]
@@ -2052,7 +2018,7 @@ SacTreeviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             useExisting: forwardRef(() => SacTreeviewComponent),
             multi: true,
         },
-    ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"row mb-3\"\n    [class.g-0]=\"disablelabel\"\n    [class.has-error]=\"invalid && (dirty || touched)\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.has-error]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n        <div [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n            <div [style.width.%]=\"helptextmode === 'tooltip' && helptext && disablelabel ? '100' : null\">\n                <table\n                    class=\"table table-hover table-condensed\"\n                    id=\"{{ name }}\"\n                    style=\"table-layout: fixed\"\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\n                    [class.border]=\"invalid && (dirty || touched)\"\n                    [class.border-danger]=\"invalid && (dirty || touched)\">\n                    <tbody>\n                        <ng-container *ngFor=\"let node of data\">\n                            <ng-template\n                                [ngTemplateOutlet]=\"treeItem\"\n                                [ngTemplateOutletContext]=\"{ node: node, deep: 0, path: '', textpath: '' }\">\n                            </ng-template>\n                        </ng-container>\n                    </tbody>\n                </table>\n\n                <div\n                    *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                    class=\"help-block\">\n                    {{ GetErrorMessage() | async }}\n                </div>\n\n                <p\n                    *ngIf=\"helptextmode === 'text' && helptext\"\n                    class=\"help-block\">\n                    {{ helptext }}\n                </p>\n            </div>\n\n            <div\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n                class=\"form-control-static\"\n                style=\"margin-left: 5px\">\n                <sac-tooltip\n                    *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                    [tooltiptext]=\"helptext\"\n                    [inlinemode]=\"true\">\n                    <span\n                        [class]=\"HelptextTooltipIcon\"\n                        style=\"margin-left: 5px; margin-right: 5px\">\n                    </span>\n                </sac-tooltip>\n            </div>\n        </div>\n    </div>\n</div>\n<ng-template\n    #treeItem\n    let-node=\"node\"\n    let-deep=\"deep\"\n    let-path=\"path\"\n    let-textpath=\"textpath\">\n    <tr\n        [class.active]=\"isSelectedState(node)\"\n        attr.data-path=\"{{ path }}/{{ getStringField(node, attrid) }}\"\n        attr.data-textpath=\"{{ textpath }}/{{ getStringField(node, attrlabel) }}\">\n        <td>\n            <div\n                class=\"py-1 px-2 d-flex align-items-center\"\n                style=\"display: flex; flex-direction: row; cursor: pointer; align-items: center\"\n                (mouseenter)=\"setHoverState(node, true)\"\n                (mouseleave)=\"setHoverState(node, false)\">\n                <div\n                    style=\"margin-right: 15px\"\n                    *ngFor=\"let i of count(deep)\">\n                </div>\n\n                <div\n                    (click)=\"onNodeClicked(node)\"\n                    *ngIf=\"expandedstate === 'true' || expandedstate === true\"\n                    style=\"margin-right: 15px\"\n                    [ngClass]=\"!hasChildren(node) ? iconFolderEmpty : !isExpandedState(node) ? iconFolderCollabsed : isExpandedState(node) ? iconFolderOpen : ''\">\n                </div>\n\n                <div\n                    (click)=\"onNodeClicked(node)\"\n                    *ngIf=\"attricon && getStringField(node, attricon)\">\n                    <ng-template\n                        [ngTemplateOutlet]=\"templateicon || defaultTemplateIcon\"\n                        [ngTemplateOutletContext]=\"{ node: node }\">\n                    </ng-template>\n                </div>\n\n                <div\n                    (click)=\"onNodeClicked(node)\"\n                    style=\"padding-top: 7px; padding-bottom: 7px; flex-grow: 1\"\n                    [style.max-width.%]=\"enableellipsis ? '100' : null\"\n                    [style.overflow]=\"enableellipsis ? 'hidden' : null\"\n                    [style.text-overflow]=\"enableellipsis ? 'ellipsis' : null\"\n                    [style.white-space]=\"enableellipsis ? 'nowrap' : null\">\n                    <ng-template\n                        [ngTemplateOutlet]=\"templatelabel || defaultTemplateLabel\"\n                        [ngTemplateOutletContext]=\"{ node: node, label: getStringField(node, attrlabel) }\">\n                    </ng-template>\n                </div>\n\n                <div\n                    (click)=\"setSelectedState(node)\"\n                    style=\"flex-shrink: 0\"\n                    *ngIf=\"!isDisabledState(node) && (showactionalways || isSelectedState(node) || isHoverState(node))\">\n                    <ng-template\n                        [ngTemplateOutlet]=\"templateaction || defaultTemplateAction\"\n                        [ngTemplateOutletContext]=\"{ node: node, actionhandler: onActionClicked.bind(this) }\">\n                    </ng-template>\n                </div>\n            </div>\n        </td>\n    </tr>\n    <ng-container *ngIf=\"isExpandedState(node)\">\n        <ng-template\n            *ngFor=\"let child of getChildren(node)\"\n            [ngTemplateOutlet]=\"treeItem\"\n            [ngTemplateOutletContext]=\"{\n                node: child,\n                deep: deep + 1,\n                path: path + '/' + getStringField(node, attrid),\n                textpath: textpath + '/' + getStringField(node, attrlabel)\n            }\">\n        </ng-template>\n    </ng-container>\n</ng-template>\n\n<ng-template\n    #defaultTemplateLabel\n    let-label=\"label\"\n    let-node=\"node\">\n    <span [title]=\"label\">\n        {{ label }}\n    </span>\n</ng-template>\n\n<ng-template\n    #defaultTemplateIcon\n    let-node=\"node\">\n    <div\n        style=\"margin-right: 15px\"\n        [ngClass]=\"getStringField(node, attricon)\">\n    </div>\n</ng-template>\n\n<ng-template\n    #defaultTemplateAction\n    let-node=\"node\"\n    let-actionhandler=\"actionhandler\">\n    <a\n        class=\"btn btn-link text-secondary\"\n        (click)=\"actionhandler({ action: 'default', node: node })\">\n        <i [class]=\"iconAction\"></i>\n    </a>\n</ng-template>\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"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "toLabelWidthCss": SacToLabelWidthCssPipe, "toControlWidthCss": SacToControlWidthCssPipe, "async": i3.AsyncPipe } });
+    ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"row mb-3\"\n    [class.g-0]=\"disablelabel\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.has-error]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n        <div [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n            <div [style.width.%]=\"helptextmode === 'tooltip' && helptext && disablelabel ? '100' : null\">\n                <table\n                    class=\"table table-hover table-condensed\"\n                    id=\"{{ name }}\"\n                    style=\"table-layout: fixed\"\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\n                    [class.border]=\"invalid && (dirty || touched)\"\n                    [class.border-danger]=\"invalid && (dirty || touched)\">\n                    <tbody>\n                        <ng-container *ngFor=\"let node of data\">\n                            <ng-template\n                                [ngTemplateOutlet]=\"treeItem\"\n                                [ngTemplateOutletContext]=\"{ node: node, deep: 0, path: '', textpath: '' }\">\n                            </ng-template>\n                        </ng-container>\n                    </tbody>\n                </table>\n\n                <div\n                    *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                    class=\"help-block\">\n                    {{ GetErrorMessage() | async }}\n                </div>\n\n                <p\n                    *ngIf=\"helptextmode === 'text' && helptext\"\n                    class=\"help-block\">\n                    {{ helptext }}\n                </p>\n            </div>\n\n            <div\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n                class=\"form-control-static\"\n                style=\"margin-left: 5px\">\n                <sac-tooltip\n                    *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                    [tooltiptext]=\"helptext\"\n                    [inlinemode]=\"true\">\n                    <span\n                        [class]=\"HelptextTooltipIcon\"\n                        style=\"margin-left: 5px; margin-right: 5px\">\n                    </span>\n                </sac-tooltip>\n            </div>\n        </div>\n    </div>\n</div>\n<ng-template\n    #treeItem\n    let-node=\"node\"\n    let-deep=\"deep\"\n    let-path=\"path\"\n    let-textpath=\"textpath\">\n    <tr\n        [class.active]=\"isSelectedState(node)\"\n        attr.data-path=\"{{ path }}/{{ getStringField(node, attrid) }}\"\n        attr.data-textpath=\"{{ textpath }}/{{ getStringField(node, attrlabel) }}\">\n        <td>\n            <div\n                class=\"py-1 px-2 d-flex align-items-center\"\n                style=\"display: flex; flex-direction: row; cursor: pointer; align-items: center\"\n                (mouseenter)=\"setHoverState(node, true)\"\n                (mouseleave)=\"setHoverState(node, false)\">\n                <div\n                    style=\"margin-right: 15px\"\n                    *ngFor=\"let i of count(deep)\">\n                </div>\n\n                <div\n                    (click)=\"onNodeClicked(node)\"\n                    *ngIf=\"expandedstate === 'true' || expandedstate === true\"\n                    style=\"margin-right: 15px\"\n                    [ngClass]=\"!hasChildren(node) ? iconFolderEmpty : !isExpandedState(node) ? iconFolderCollabsed : isExpandedState(node) ? iconFolderOpen : ''\">\n                </div>\n\n                <div\n                    (click)=\"onNodeClicked(node)\"\n                    *ngIf=\"attricon && getStringField(node, attricon)\">\n                    <ng-template\n                        [ngTemplateOutlet]=\"templateicon || defaultTemplateIcon\"\n                        [ngTemplateOutletContext]=\"{ node: node }\">\n                    </ng-template>\n                </div>\n\n                <div\n                    (click)=\"onNodeClicked(node)\"\n                    style=\"padding-top: 7px; padding-bottom: 7px; flex-grow: 1\"\n                    [style.max-width.%]=\"enableellipsis ? '100' : null\"\n                    [style.overflow]=\"enableellipsis ? 'hidden' : null\"\n                    [style.text-overflow]=\"enableellipsis ? 'ellipsis' : null\"\n                    [style.white-space]=\"enableellipsis ? 'nowrap' : null\">\n                    <ng-template\n                        [ngTemplateOutlet]=\"templatelabel || defaultTemplateLabel\"\n                        [ngTemplateOutletContext]=\"{ node: node, label: getStringField(node, attrlabel) }\">\n                    </ng-template>\n                </div>\n\n                <div\n                    (click)=\"setSelectedState(node)\"\n                    style=\"flex-shrink: 0\"\n                    *ngIf=\"!isDisabledState(node) && (showactionalways || isSelectedState(node) || isHoverState(node))\">\n                    <ng-template\n                        [ngTemplateOutlet]=\"templateaction || defaultTemplateAction\"\n                        [ngTemplateOutletContext]=\"{ node: node, actionhandler: onActionClicked.bind(this) }\">\n                    </ng-template>\n                </div>\n            </div>\n        </td>\n    </tr>\n    <ng-container *ngIf=\"isExpandedState(node)\">\n        <ng-template\n            *ngFor=\"let child of getChildren(node)\"\n            [ngTemplateOutlet]=\"treeItem\"\n            [ngTemplateOutletContext]=\"{\n                node: child,\n                deep: deep + 1,\n                path: path + '/' + getStringField(node, attrid),\n                textpath: textpath + '/' + getStringField(node, attrlabel)\n            }\">\n        </ng-template>\n    </ng-container>\n</ng-template>\n\n<ng-template\n    #defaultTemplateLabel\n    let-label=\"label\"\n    let-node=\"node\">\n    <span [title]=\"label\">{{ label }}</span>\n</ng-template>\n\n<ng-template\n    #defaultTemplateIcon\n    let-node=\"node\">\n    <div\n        style=\"margin-right: 15px\"\n        [ngClass]=\"getStringField(node, attricon)\">\n    </div>\n</ng-template>\n\n<ng-template\n    #defaultTemplateAction\n    let-node=\"node\"\n    let-actionhandler=\"actionhandler\">\n    <a\n        class=\"btn btn-link text-secondary\"\n        (click)=\"actionhandler({ action: 'default', node: node })\">\n        <i [class]=\"iconAction\"></i>\n    </a>\n</ng-template>\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"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "testingattribute": i5.SacTestingAttributePipe, "toLabelWidthCss": SacToLabelWidthCssPipe, "toControlWidthCss": SacToControlWidthCssPipe, "async": i3.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacTreeviewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sac-treeview', providers: [
@@ -2066,7 +2032,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                             useExisting: forwardRef(() => SacTreeviewComponent),
                             multi: true,
                         },
-                    ], template: "<div\n    class=\"row mb-3\"\n    [class.g-0]=\"disablelabel\"\n    [class.has-error]=\"invalid && (dirty || touched)\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.has-error]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n        <div [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n            <div [style.width.%]=\"helptextmode === 'tooltip' && helptext && disablelabel ? '100' : null\">\n                <table\n                    class=\"table table-hover table-condensed\"\n                    id=\"{{ name }}\"\n                    style=\"table-layout: fixed\"\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\n                    [class.border]=\"invalid && (dirty || touched)\"\n                    [class.border-danger]=\"invalid && (dirty || touched)\">\n                    <tbody>\n                        <ng-container *ngFor=\"let node of data\">\n                            <ng-template\n                                [ngTemplateOutlet]=\"treeItem\"\n                                [ngTemplateOutletContext]=\"{ node: node, deep: 0, path: '', textpath: '' }\">\n                            </ng-template>\n                        </ng-container>\n                    </tbody>\n                </table>\n\n                <div\n                    *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                    class=\"help-block\">\n                    {{ GetErrorMessage() | async }}\n                </div>\n\n                <p\n                    *ngIf=\"helptextmode === 'text' && helptext\"\n                    class=\"help-block\">\n                    {{ helptext }}\n                </p>\n            </div>\n\n            <div\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n                class=\"form-control-static\"\n                style=\"margin-left: 5px\">\n                <sac-tooltip\n                    *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                    [tooltiptext]=\"helptext\"\n                    [inlinemode]=\"true\">\n                    <span\n                        [class]=\"HelptextTooltipIcon\"\n                        style=\"margin-left: 5px; margin-right: 5px\">\n                    </span>\n                </sac-tooltip>\n            </div>\n        </div>\n    </div>\n</div>\n<ng-template\n    #treeItem\n    let-node=\"node\"\n    let-deep=\"deep\"\n    let-path=\"path\"\n    let-textpath=\"textpath\">\n    <tr\n        [class.active]=\"isSelectedState(node)\"\n        attr.data-path=\"{{ path }}/{{ getStringField(node, attrid) }}\"\n        attr.data-textpath=\"{{ textpath }}/{{ getStringField(node, attrlabel) }}\">\n        <td>\n            <div\n                class=\"py-1 px-2 d-flex align-items-center\"\n                style=\"display: flex; flex-direction: row; cursor: pointer; align-items: center\"\n                (mouseenter)=\"setHoverState(node, true)\"\n                (mouseleave)=\"setHoverState(node, false)\">\n                <div\n                    style=\"margin-right: 15px\"\n                    *ngFor=\"let i of count(deep)\">\n                </div>\n\n                <div\n                    (click)=\"onNodeClicked(node)\"\n                    *ngIf=\"expandedstate === 'true' || expandedstate === true\"\n                    style=\"margin-right: 15px\"\n                    [ngClass]=\"!hasChildren(node) ? iconFolderEmpty : !isExpandedState(node) ? iconFolderCollabsed : isExpandedState(node) ? iconFolderOpen : ''\">\n                </div>\n\n                <div\n                    (click)=\"onNodeClicked(node)\"\n                    *ngIf=\"attricon && getStringField(node, attricon)\">\n                    <ng-template\n                        [ngTemplateOutlet]=\"templateicon || defaultTemplateIcon\"\n                        [ngTemplateOutletContext]=\"{ node: node }\">\n                    </ng-template>\n                </div>\n\n                <div\n                    (click)=\"onNodeClicked(node)\"\n                    style=\"padding-top: 7px; padding-bottom: 7px; flex-grow: 1\"\n                    [style.max-width.%]=\"enableellipsis ? '100' : null\"\n                    [style.overflow]=\"enableellipsis ? 'hidden' : null\"\n                    [style.text-overflow]=\"enableellipsis ? 'ellipsis' : null\"\n                    [style.white-space]=\"enableellipsis ? 'nowrap' : null\">\n                    <ng-template\n                        [ngTemplateOutlet]=\"templatelabel || defaultTemplateLabel\"\n                        [ngTemplateOutletContext]=\"{ node: node, label: getStringField(node, attrlabel) }\">\n                    </ng-template>\n                </div>\n\n                <div\n                    (click)=\"setSelectedState(node)\"\n                    style=\"flex-shrink: 0\"\n                    *ngIf=\"!isDisabledState(node) && (showactionalways || isSelectedState(node) || isHoverState(node))\">\n                    <ng-template\n                        [ngTemplateOutlet]=\"templateaction || defaultTemplateAction\"\n                        [ngTemplateOutletContext]=\"{ node: node, actionhandler: onActionClicked.bind(this) }\">\n                    </ng-template>\n                </div>\n            </div>\n        </td>\n    </tr>\n    <ng-container *ngIf=\"isExpandedState(node)\">\n        <ng-template\n            *ngFor=\"let child of getChildren(node)\"\n            [ngTemplateOutlet]=\"treeItem\"\n            [ngTemplateOutletContext]=\"{\n                node: child,\n                deep: deep + 1,\n                path: path + '/' + getStringField(node, attrid),\n                textpath: textpath + '/' + getStringField(node, attrlabel)\n            }\">\n        </ng-template>\n    </ng-container>\n</ng-template>\n\n<ng-template\n    #defaultTemplateLabel\n    let-label=\"label\"\n    let-node=\"node\">\n    <span [title]=\"label\">\n        {{ label }}\n    </span>\n</ng-template>\n\n<ng-template\n    #defaultTemplateIcon\n    let-node=\"node\">\n    <div\n        style=\"margin-right: 15px\"\n        [ngClass]=\"getStringField(node, attricon)\">\n    </div>\n</ng-template>\n\n<ng-template\n    #defaultTemplateAction\n    let-node=\"node\"\n    let-actionhandler=\"actionhandler\">\n    <a\n        class=\"btn btn-link text-secondary\"\n        (click)=\"actionhandler({ action: 'default', node: node })\">\n        <i [class]=\"iconAction\"></i>\n    </a>\n</ng-template>\n" }]
+                    ], template: "<div\n    class=\"row mb-3\"\n    [class.g-0]=\"disablelabel\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.has-error]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n        <div [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n            <div [style.width.%]=\"helptextmode === 'tooltip' && helptext && disablelabel ? '100' : null\">\n                <table\n                    class=\"table table-hover table-condensed\"\n                    id=\"{{ name }}\"\n                    style=\"table-layout: fixed\"\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\n                    [class.border]=\"invalid && (dirty || touched)\"\n                    [class.border-danger]=\"invalid && (dirty || touched)\">\n                    <tbody>\n                        <ng-container *ngFor=\"let node of data\">\n                            <ng-template\n                                [ngTemplateOutlet]=\"treeItem\"\n                                [ngTemplateOutletContext]=\"{ node: node, deep: 0, path: '', textpath: '' }\">\n                            </ng-template>\n                        </ng-container>\n                    </tbody>\n                </table>\n\n                <div\n                    *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                    class=\"help-block\">\n                    {{ GetErrorMessage() | async }}\n                </div>\n\n                <p\n                    *ngIf=\"helptextmode === 'text' && helptext\"\n                    class=\"help-block\">\n                    {{ helptext }}\n                </p>\n            </div>\n\n            <div\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n                class=\"form-control-static\"\n                style=\"margin-left: 5px\">\n                <sac-tooltip\n                    *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                    [tooltiptext]=\"helptext\"\n                    [inlinemode]=\"true\">\n                    <span\n                        [class]=\"HelptextTooltipIcon\"\n                        style=\"margin-left: 5px; margin-right: 5px\">\n                    </span>\n                </sac-tooltip>\n            </div>\n        </div>\n    </div>\n</div>\n<ng-template\n    #treeItem\n    let-node=\"node\"\n    let-deep=\"deep\"\n    let-path=\"path\"\n    let-textpath=\"textpath\">\n    <tr\n        [class.active]=\"isSelectedState(node)\"\n        attr.data-path=\"{{ path }}/{{ getStringField(node, attrid) }}\"\n        attr.data-textpath=\"{{ textpath }}/{{ getStringField(node, attrlabel) }}\">\n        <td>\n            <div\n                class=\"py-1 px-2 d-flex align-items-center\"\n                style=\"display: flex; flex-direction: row; cursor: pointer; align-items: center\"\n                (mouseenter)=\"setHoverState(node, true)\"\n                (mouseleave)=\"setHoverState(node, false)\">\n                <div\n                    style=\"margin-right: 15px\"\n                    *ngFor=\"let i of count(deep)\">\n                </div>\n\n                <div\n                    (click)=\"onNodeClicked(node)\"\n                    *ngIf=\"expandedstate === 'true' || expandedstate === true\"\n                    style=\"margin-right: 15px\"\n                    [ngClass]=\"!hasChildren(node) ? iconFolderEmpty : !isExpandedState(node) ? iconFolderCollabsed : isExpandedState(node) ? iconFolderOpen : ''\">\n                </div>\n\n                <div\n                    (click)=\"onNodeClicked(node)\"\n                    *ngIf=\"attricon && getStringField(node, attricon)\">\n                    <ng-template\n                        [ngTemplateOutlet]=\"templateicon || defaultTemplateIcon\"\n                        [ngTemplateOutletContext]=\"{ node: node }\">\n                    </ng-template>\n                </div>\n\n                <div\n                    (click)=\"onNodeClicked(node)\"\n                    style=\"padding-top: 7px; padding-bottom: 7px; flex-grow: 1\"\n                    [style.max-width.%]=\"enableellipsis ? '100' : null\"\n                    [style.overflow]=\"enableellipsis ? 'hidden' : null\"\n                    [style.text-overflow]=\"enableellipsis ? 'ellipsis' : null\"\n                    [style.white-space]=\"enableellipsis ? 'nowrap' : null\">\n                    <ng-template\n                        [ngTemplateOutlet]=\"templatelabel || defaultTemplateLabel\"\n                        [ngTemplateOutletContext]=\"{ node: node, label: getStringField(node, attrlabel) }\">\n                    </ng-template>\n                </div>\n\n                <div\n                    (click)=\"setSelectedState(node)\"\n                    style=\"flex-shrink: 0\"\n                    *ngIf=\"!isDisabledState(node) && (showactionalways || isSelectedState(node) || isHoverState(node))\">\n                    <ng-template\n                        [ngTemplateOutlet]=\"templateaction || defaultTemplateAction\"\n                        [ngTemplateOutletContext]=\"{ node: node, actionhandler: onActionClicked.bind(this) }\">\n                    </ng-template>\n                </div>\n            </div>\n        </td>\n    </tr>\n    <ng-container *ngIf=\"isExpandedState(node)\">\n        <ng-template\n            *ngFor=\"let child of getChildren(node)\"\n            [ngTemplateOutlet]=\"treeItem\"\n            [ngTemplateOutletContext]=\"{\n                node: child,\n                deep: deep + 1,\n                path: path + '/' + getStringField(node, attrid),\n                textpath: textpath + '/' + getStringField(node, attrlabel)\n            }\">\n        </ng-template>\n    </ng-container>\n</ng-template>\n\n<ng-template\n    #defaultTemplateLabel\n    let-label=\"label\"\n    let-node=\"node\">\n    <span [title]=\"label\">{{ label }}</span>\n</ng-template>\n\n<ng-template\n    #defaultTemplateIcon\n    let-node=\"node\">\n    <div\n        style=\"margin-right: 15px\"\n        [ngClass]=\"getStringField(node, attricon)\">\n    </div>\n</ng-template>\n\n<ng-template\n    #defaultTemplateAction\n    let-node=\"node\"\n    let-actionhandler=\"actionhandler\">\n    <a\n        class=\"btn btn-link text-secondary\"\n        (click)=\"actionhandler({ action: 'default', node: node })\">\n        <i [class]=\"iconAction\"></i>\n    </a>\n</ng-template>\n" }]
         }], ctorParameters: function () { return [{ type: SacFormLayoutDirective, decorators: [{
                     type: Host
                 }, {
@@ -2076,13 +2042,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
 class SACBootstrap3TreeviewModule {
 }
 SACBootstrap3TreeviewModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3TreeviewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SACBootstrap3TreeviewModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3TreeviewModule, declarations: [SacTreeviewComponent], imports: [CommonModule, SACBootstrap3TooltipModule, SACBootstrap3LayoutModule, SACBootstrap3ContextmenuModule], exports: [SacTreeviewComponent] });
-SACBootstrap3TreeviewModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3TreeviewModule, imports: [[CommonModule, SACBootstrap3TooltipModule, SACBootstrap3LayoutModule, SACBootstrap3ContextmenuModule]] });
+SACBootstrap3TreeviewModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3TreeviewModule, declarations: [SacTreeviewComponent], imports: [CommonModule,
+        SACBootstrap3TooltipModule,
+        SACBootstrap3LayoutModule,
+        SACBootstrap3ContextmenuModule,
+        SACCommonUtliltiesModule], exports: [SacTreeviewComponent] });
+SACBootstrap3TreeviewModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3TreeviewModule, imports: [[
+            CommonModule,
+            SACBootstrap3TooltipModule,
+            SACBootstrap3LayoutModule,
+            SACBootstrap3ContextmenuModule,
+            SACCommonUtliltiesModule,
+        ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3TreeviewModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [SacTreeviewComponent],
-                    imports: [CommonModule, SACBootstrap3TooltipModule, SACBootstrap3LayoutModule, SACBootstrap3ContextmenuModule],
+                    imports: [
+                        CommonModule,
+                        SACBootstrap3TooltipModule,
+                        SACBootstrap3LayoutModule,
+                        SACBootstrap3ContextmenuModule,
+                        SACCommonUtliltiesModule,
+                    ],
                     exports: [SacTreeviewComponent],
                 }]
         }] });
@@ -2124,7 +2106,7 @@ SacDropzoneMultipleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
             multi: true,
             useExisting: forwardRef(() => SacDropzoneMultipleComponent),
         },
-    ], usesInheritance: true, ngImport: i0, template: "<div\n    id=\"{{ name }}\"\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}_uploadinput\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n        <div [style.flex-grow]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 1 : null\">\n            <div\n                class=\"img-rounded dropzone control-label\"\n                (drop)=\"dropHandler($event)\"\n                (dragover)=\"onDragOver($event)\"\n                (dragleave)=\"onDragLeave($event)\"\n                [class.active]=\"active\"\n                [style.min-height]=\"uploadheight\"\n                [class.is-invalid]=\"invalid && (dirty || touched)\">\n                <div\n                    class=\"content\"\n                    *ngIf=\"uploads.length === 0\">\n                    <div>\n                        <div [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                            <ng-content></ng-content>\n                        </div>\n                    </div>\n                </div>\n                <div *ngIf=\"uploads.length > 0\">\n                    <div>\n                        <div\n                            class=\"dropzone-uploadstates\"\n                            [class.mt-1]=\"i > 0\"\n                            *ngFor=\"let file of uploads; let i = index\">\n                            <div\n                                class=\"input-group upload-component upload-component-multiple\"\n                                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\n                                <div class=\"form-control upload-progress border-secondary\">\n                                    <div class=\"progress\">\n                                        <div\n                                            class=\"progress-bar\"\n                                            [class.progress-bar-success]=\"file.progress === 100\"\n                                            role=\"progressbar\"\n                                            [attr.aria-valuenow]=\"file.progress\"\n                                            aria-valuemin=\"0\"\n                                            aria-valuemax=\"100\"\n                                            [style.width.%]=\"file.progress\">\n                                            <span class=\"progress-text\">{{ file.name }}</span>\n                                        </div>\n                                    </div>\n                                </div>\n                                <div class=\"input-group-btn\">\n                                    <!-- image-preview-clear button -->\n                                    <a\n                                        class=\"btn\"\n                                        (click)=\"cancel(file.uploadId)\"\n                                        [class.btn-default]=\"!(invalid && (dirty || touched))\"\n                                        [class.btn-danger]=\"invalid && (dirty || touched)\">\n                                        <span [class]=\"IconDelete\"></span>\n                                    </a>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <input\n                    #files\n                    multiple\n                    id=\"{{ name }}_uploadinput\"\n                    type=\"file\"\n                    class=\"custom-file-input\"\n                    (click)=\"files.value = ''\"\n                    (uploadxState)=\"onUpload($event)\"\n                    [disabled]=\"HasQueueItem()\" />\n            </div>\n            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"help-block\">\n                {{ helptext }}\n            </small>\n            <div\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"help-block help-block-error\">\n                {{ GetErrorMessage() | async }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-static\"\n            style=\"margin-left: 5px\">\n            <sac-tooltip\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [class]=\"HelptextTooltipIcon\"\n                    style=\"margin-left: 5px; margin-right: 5px\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n", styles: [".upload-component .upload-input{position:relative}.upload-component .custom-file>i{margin-right:15px}.upload-component .custom-file .custom-file-input{inset:0;position:absolute;overflow:hidden;z-index:2;width:100%;margin:0;display:inline-block;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}.upload-component .upload-progress .progress{height:100%}.upload-component .upload-progress .progress .progress-text{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);display:table-cell;line-height:34px;height:34px;color:#000}.dropzone{min-height:120px;width:100%;text-align:center;border-style:dashed;border-width:2px;padding-top:50px;padding-bottom:50px;position:relative}.dropzone.active{background-color:#add8e6}.dropzone .progress{border-radius:0}.dropzone .progress .progress-bar{display:flex;justify-content:center;text-align:center;flex-direction:column;border-top-right-radius:0;border-bottom-right-radius:0}.dropzone .progress .progress-bar .progress-text{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);display:table-cell;line-height:34px;height:34px;color:#000}.dropzone input[type=file]{position:absolute;inset:0;opacity:0;width:100%}.dropzone .dropzone-uploadstates{max-width:450px;margin-left:auto;margin-right:auto;margin-top:6px;width:80%}\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"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "toLabelHeight": SacToLabelHeightPipe, "toLabelWidthCss": SacToLabelWidthCssPipe, "toControlWidthCss": SacToControlWidthCssPipe, "async": i3.AsyncPipe } });
+    ], usesInheritance: true, ngImport: i0, template: "<div\n    id=\"{{ name }}\"\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}_uploadinput\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n        <div [style.flex-grow]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 1 : null\">\n            <div\n                class=\"img-rounded dropzone control-label\"\n                (drop)=\"dropHandler($event)\"\n                (dragover)=\"onDragOver($event)\"\n                (dragleave)=\"onDragLeave($event)\"\n                [class.active]=\"active\"\n                [style.min-height]=\"uploadheight\"\n                [class.is-invalid]=\"invalid && (dirty || touched)\">\n                <div\n                    class=\"content\"\n                    *ngIf=\"uploads.length === 0\">\n                    <div>\n                        <div [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                            <ng-content></ng-content>\n                        </div>\n                    </div>\n                </div>\n                <div *ngIf=\"uploads.length > 0\">\n                    <div>\n                        <div\n                            class=\"dropzone-uploadstates\"\n                            [class.mt-1]=\"i > 0\"\n                            *ngFor=\"let file of uploads; let i = index\">\n                            <div\n                                class=\"input-group upload-component upload-component-multiple\"\n                                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\n                                <div class=\"form-control upload-progress border-secondary\">\n                                    <div class=\"progress\">\n                                        <div\n                                            class=\"progress-bar\"\n                                            [class.progress-bar-success]=\"file.progress === 100\"\n                                            role=\"progressbar\"\n                                            [attr.aria-valuenow]=\"file.progress\"\n                                            aria-valuemin=\"0\"\n                                            aria-valuemax=\"100\"\n                                            [style.width.%]=\"file.progress\">\n                                            <span class=\"progress-text\">{{ file.name }}</span>\n                                        </div>\n                                    </div>\n                                </div>\n                                <div class=\"input-group-btn\">\n                                    <!-- image-preview-clear button -->\n                                    <a\n                                        class=\"btn\"\n                                        (click)=\"cancel(file.uploadId)\"\n                                        [class.btn-default]=\"!(invalid && (dirty || touched))\"\n                                        [class.btn-danger]=\"invalid && (dirty || touched)\">\n                                        <span [class]=\"IconDelete\"></span>\n                                    </a>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <input\n                    #files\n                    multiple\n                    id=\"{{ name }}_uploadinput\"\n                    type=\"file\"\n                    class=\"custom-file-input\"\n                    (click)=\"files.value = ''\"\n                    (uploadxState)=\"onUpload($event)\"\n                    [disabled]=\"HasQueueItem()\" />\n            </div>\n            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"help-block\">\n                {{ helptext }}\n            </small>\n            <div\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"help-block help-block-error\">\n                {{ GetErrorMessage() | async }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-static\"\n            style=\"margin-left: 5px\">\n            <sac-tooltip\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [class]=\"HelptextTooltipIcon\"\n                    style=\"margin-left: 5px; margin-right: 5px\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n", styles: [".upload-component .upload-input{position:relative}.upload-component .custom-file>i{margin-right:15px}.upload-component .custom-file .custom-file-input{inset:0;position:absolute;overflow:hidden;z-index:2;width:100%;margin:0;display:inline-block;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}.upload-component .upload-progress .progress{height:100%}.upload-component .upload-progress .progress .progress-text{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);display:table-cell;line-height:34px;height:34px;color:#000}.dropzone{min-height:120px;width:100%;text-align:center;border-style:dashed;border-width:2px;padding-top:50px;padding-bottom:50px;position:relative}.dropzone.active{background-color:#add8e6}.dropzone .progress{border-radius:0}.dropzone .progress .progress-bar{display:flex;justify-content:center;text-align:center;flex-direction:column;border-top-right-radius:0;border-bottom-right-radius:0}.dropzone .progress .progress-bar .progress-text{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);display:table-cell;line-height:34px;height:34px;color:#000}.dropzone input[type=file]{position:absolute;inset:0;opacity:0;width:100%}.dropzone .dropzone-uploadstates{max-width:450px;margin-left:auto;margin-right:auto;margin-top:6px;width:80%}\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"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "toLabelHeight": SacToLabelHeightPipe, "testingattribute": i5.SacTestingAttributePipe, "toLabelWidthCss": SacToLabelWidthCssPipe, "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: [
@@ -2138,7 +2120,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => SacDropzoneMultipleComponent),
                         },
-                    ], template: "<div\n    id=\"{{ name }}\"\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}_uploadinput\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n        <div [style.flex-grow]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 1 : null\">\n            <div\n                class=\"img-rounded dropzone control-label\"\n                (drop)=\"dropHandler($event)\"\n                (dragover)=\"onDragOver($event)\"\n                (dragleave)=\"onDragLeave($event)\"\n                [class.active]=\"active\"\n                [style.min-height]=\"uploadheight\"\n                [class.is-invalid]=\"invalid && (dirty || touched)\">\n                <div\n                    class=\"content\"\n                    *ngIf=\"uploads.length === 0\">\n                    <div>\n                        <div [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                            <ng-content></ng-content>\n                        </div>\n                    </div>\n                </div>\n                <div *ngIf=\"uploads.length > 0\">\n                    <div>\n                        <div\n                            class=\"dropzone-uploadstates\"\n                            [class.mt-1]=\"i > 0\"\n                            *ngFor=\"let file of uploads; let i = index\">\n                            <div\n                                class=\"input-group upload-component upload-component-multiple\"\n                                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\n                                <div class=\"form-control upload-progress border-secondary\">\n                                    <div class=\"progress\">\n                                        <div\n                                            class=\"progress-bar\"\n                                            [class.progress-bar-success]=\"file.progress === 100\"\n                                            role=\"progressbar\"\n                                            [attr.aria-valuenow]=\"file.progress\"\n                                            aria-valuemin=\"0\"\n                                            aria-valuemax=\"100\"\n                                            [style.width.%]=\"file.progress\">\n                                            <span class=\"progress-text\">{{ file.name }}</span>\n                                        </div>\n                                    </div>\n                                </div>\n                                <div class=\"input-group-btn\">\n                                    <!-- image-preview-clear button -->\n                                    <a\n                                        class=\"btn\"\n                                        (click)=\"cancel(file.uploadId)\"\n                                        [class.btn-default]=\"!(invalid && (dirty || touched))\"\n                                        [class.btn-danger]=\"invalid && (dirty || touched)\">\n                                        <span [class]=\"IconDelete\"></span>\n                                    </a>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <input\n                    #files\n                    multiple\n                    id=\"{{ name }}_uploadinput\"\n                    type=\"file\"\n                    class=\"custom-file-input\"\n                    (click)=\"files.value = ''\"\n                    (uploadxState)=\"onUpload($event)\"\n                    [disabled]=\"HasQueueItem()\" />\n            </div>\n            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"help-block\">\n                {{ helptext }}\n            </small>\n            <div\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"help-block help-block-error\">\n                {{ GetErrorMessage() | async }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-static\"\n            style=\"margin-left: 5px\">\n            <sac-tooltip\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [class]=\"HelptextTooltipIcon\"\n                    style=\"margin-left: 5px; margin-right: 5px\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n", styles: [".upload-component .upload-input{position:relative}.upload-component .custom-file>i{margin-right:15px}.upload-component .custom-file .custom-file-input{inset:0;position:absolute;overflow:hidden;z-index:2;width:100%;margin:0;display:inline-block;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}.upload-component .upload-progress .progress{height:100%}.upload-component .upload-progress .progress .progress-text{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);display:table-cell;line-height:34px;height:34px;color:#000}.dropzone{min-height:120px;width:100%;text-align:center;border-style:dashed;border-width:2px;padding-top:50px;padding-bottom:50px;position:relative}.dropzone.active{background-color:#add8e6}.dropzone .progress{border-radius:0}.dropzone .progress .progress-bar{display:flex;justify-content:center;text-align:center;flex-direction:column;border-top-right-radius:0;border-bottom-right-radius:0}.dropzone .progress .progress-bar .progress-text{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);display:table-cell;line-height:34px;height:34px;color:#000}.dropzone input[type=file]{position:absolute;inset:0;opacity:0;width:100%}.dropzone .dropzone-uploadstates{max-width:450px;margin-left:auto;margin-right:auto;margin-top:6px;width:80%}\n"] }]
+                    ], template: "<div\n    id=\"{{ name }}\"\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}_uploadinput\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n        <div [style.flex-grow]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 1 : null\">\n            <div\n                class=\"img-rounded dropzone control-label\"\n                (drop)=\"dropHandler($event)\"\n                (dragover)=\"onDragOver($event)\"\n                (dragleave)=\"onDragLeave($event)\"\n                [class.active]=\"active\"\n                [style.min-height]=\"uploadheight\"\n                [class.is-invalid]=\"invalid && (dirty || touched)\">\n                <div\n                    class=\"content\"\n                    *ngIf=\"uploads.length === 0\">\n                    <div>\n                        <div [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                            <ng-content></ng-content>\n                        </div>\n                    </div>\n                </div>\n                <div *ngIf=\"uploads.length > 0\">\n                    <div>\n                        <div\n                            class=\"dropzone-uploadstates\"\n                            [class.mt-1]=\"i > 0\"\n                            *ngFor=\"let file of uploads; let i = index\">\n                            <div\n                                class=\"input-group upload-component upload-component-multiple\"\n                                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\n                                <div class=\"form-control upload-progress border-secondary\">\n                                    <div class=\"progress\">\n                                        <div\n                                            class=\"progress-bar\"\n                                            [class.progress-bar-success]=\"file.progress === 100\"\n                                            role=\"progressbar\"\n                                            [attr.aria-valuenow]=\"file.progress\"\n                                            aria-valuemin=\"0\"\n                                            aria-valuemax=\"100\"\n                                            [style.width.%]=\"file.progress\">\n                                            <span class=\"progress-text\">{{ file.name }}</span>\n                                        </div>\n                                    </div>\n                                </div>\n                                <div class=\"input-group-btn\">\n                                    <!-- image-preview-clear button -->\n                                    <a\n                                        class=\"btn\"\n                                        (click)=\"cancel(file.uploadId)\"\n                                        [class.btn-default]=\"!(invalid && (dirty || touched))\"\n                                        [class.btn-danger]=\"invalid && (dirty || touched)\">\n                                        <span [class]=\"IconDelete\"></span>\n                                    </a>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <input\n                    #files\n                    multiple\n                    id=\"{{ name }}_uploadinput\"\n                    type=\"file\"\n                    class=\"custom-file-input\"\n                    (click)=\"files.value = ''\"\n                    (uploadxState)=\"onUpload($event)\"\n                    [disabled]=\"HasQueueItem()\" />\n            </div>\n            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"help-block\">\n                {{ helptext }}\n            </small>\n            <div\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"help-block help-block-error\">\n                {{ GetErrorMessage() | async }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-static\"\n            style=\"margin-left: 5px\">\n            <sac-tooltip\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [class]=\"HelptextTooltipIcon\"\n                    style=\"margin-left: 5px; margin-right: 5px\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n", styles: [".upload-component .upload-input{position:relative}.upload-component .custom-file>i{margin-right:15px}.upload-component .custom-file .custom-file-input{inset:0;position:absolute;overflow:hidden;z-index:2;width:100%;margin:0;display:inline-block;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}.upload-component .upload-progress .progress{height:100%}.upload-component .upload-progress .progress .progress-text{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);display:table-cell;line-height:34px;height:34px;color:#000}.dropzone{min-height:120px;width:100%;text-align:center;border-style:dashed;border-width:2px;padding-top:50px;padding-bottom:50px;position:relative}.dropzone.active{background-color:#add8e6}.dropzone .progress{border-radius:0}.dropzone .progress .progress-bar{display:flex;justify-content:center;text-align:center;flex-direction:column;border-top-right-radius:0;border-bottom-right-radius:0}.dropzone .progress .progress-bar .progress-text{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);display:table-cell;line-height:34px;height:34px;color:#000}.dropzone input[type=file]{position:absolute;inset:0;opacity:0;width:100%}.dropzone .dropzone-uploadstates{max-width:450px;margin-left:auto;margin-right:auto;margin-top:6px;width:80%}\n"] }]
         }], ctorParameters: function () { return [{ type: SacFormLayoutDirective, decorators: [{
                     type: Host
                 }, {
@@ -2182,7 +2164,7 @@ SacDropzoneSingleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
             multi: true,
             useExisting: forwardRef(() => SacDropzoneSingleComponent),
         },
-    ], usesInheritance: true, ngImport: i0, template: "<div\n    id=\"{{ name }}\"\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}_uploadinput\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n        <div [style.flex-grow]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 1 : null\">\n            <div\n                class=\"img-rounded dropzone control-label\"\n                (drop)=\"dropHandler($event)\"\n                (dragover)=\"onDragOver($event)\"\n                (dragleave)=\"onDragLeave($event)\"\n                [style.min-height]=\"uploadheight\"\n                [class.active]=\"active\"\n                [class.is-invalid]=\"invalid && (dirty || touched)\">\n                <div\n                    class=\"content\"\n                    *ngIf=\"uploads.length === 0\">\n                    <div>\n                        <div [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                            <ng-content></ng-content>\n                        </div>\n                    </div>\n                </div>\n                <div *ngIf=\"uploads.length > 0\">\n                    <div>\n                        <div\n                            class=\"dropzone-uploadstates\"\n                            *ngFor=\"let file of uploads\">\n                            <div\n                                class=\"input-group upload-component upload-component-multiple\"\n                                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\n                                <div class=\"form-control upload-progress\">\n                                    <div class=\"progress\">\n                                        <div\n                                            class=\"progress-bar\"\n                                            [class.progress-bar-success]=\"file.progress === 100\"\n                                            role=\"progressbar\"\n                                            [attr.aria-valuenow]=\"file.progress\"\n                                            aria-valuemin=\"0\"\n                                            aria-valuemax=\"100\"\n                                            [style.width.%]=\"file.progress\">\n                                            <span class=\"progress-text\">{{ file.name }}</span>\n                                        </div>\n                                    </div>\n                                </div>\n                                <div class=\"input-group-btn\">\n                                    <!-- image-preview-clear button -->\n                                    <a\n                                        class=\"btn\"\n                                        (click)=\"cancel(file.uploadId)\"\n                                        [class.btn-default]=\"!(invalid && (dirty || touched))\"\n                                        [class.btn-danger]=\"invalid && (dirty || touched)\">\n                                        <span [class]=\"IconDelete\"></span>\n                                    </a>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <input\n                    #files\n                    id=\"{{ name }}_uploadinput\"\n                    type=\"file\"\n                    class=\"custom-file-input\"\n                    (click)=\"files.value = ''\"\n                    (uploadxState)=\"onUpload($event)\"\n                    [disabled]=\"HasQueueItem()\" />\n            </div>\n            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"help-block\">\n                {{ helptext }}\n            </small>\n            <div\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"help-block help-block-error\">\n                {{ GetErrorMessage() | async }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-static\"\n            style=\"margin-left: 5px\">\n            <sac-tooltip\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [class]=\"HelptextTooltipIcon\"\n                    style=\"margin-left: 5px; margin-right: 5px\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n", styles: [".upload-component .upload-input{position:relative}.upload-component .custom-file>i{margin-right:15px}.upload-component .custom-file .custom-file-input{inset:0;position:absolute;overflow:hidden;z-index:2;width:100%;margin:0;display:inline-block;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}.upload-component .upload-progress .progress{height:100%}.upload-component .upload-progress .progress .progress-text{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);display:table-cell;line-height:34px;height:34px;color:#000}.dropzone{min-height:120px;width:100%;text-align:center;border-style:dashed;border-width:2px;padding-top:50px;padding-bottom:50px;position:relative}.dropzone.active{background-color:#add8e6}.dropzone .progress{border-radius:0}.dropzone .progress .progress-bar{display:flex;justify-content:center;text-align:center;flex-direction:column;border-top-right-radius:0;border-bottom-right-radius:0}.dropzone .progress .progress-bar .progress-text{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);display:table-cell;line-height:34px;height:34px;color:#000}.dropzone input[type=file]{position:absolute;inset:0;opacity:0;width:100%}.dropzone .dropzone-uploadstates{max-width:450px;margin-left:auto;margin-right:auto;margin-top:6px;width:80%}\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"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "toLabelHeight": SacToLabelHeightPipe, "toLabelWidthCss": SacToLabelWidthCssPipe, "toControlWidthCss": SacToControlWidthCssPipe, "async": i3.AsyncPipe } });
+    ], usesInheritance: true, ngImport: i0, template: "<div\n    id=\"{{ name }}\"\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}_uploadinput\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n        <div [style.flex-grow]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 1 : null\">\n            <div\n                class=\"img-rounded dropzone control-label\"\n                (drop)=\"dropHandler($event)\"\n                (dragover)=\"onDragOver($event)\"\n                (dragleave)=\"onDragLeave($event)\"\n                [style.min-height]=\"uploadheight\"\n                [class.active]=\"active\"\n                [class.is-invalid]=\"invalid && (dirty || touched)\">\n                <div\n                    class=\"content\"\n                    *ngIf=\"uploads.length === 0\">\n                    <div>\n                        <div [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                            <ng-content></ng-content>\n                        </div>\n                    </div>\n                </div>\n                <div *ngIf=\"uploads.length > 0\">\n                    <div>\n                        <div\n                            class=\"dropzone-uploadstates\"\n                            *ngFor=\"let file of uploads\">\n                            <div\n                                class=\"input-group upload-component upload-component-multiple\"\n                                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\n                                <div class=\"form-control upload-progress\">\n                                    <div class=\"progress\">\n                                        <div\n                                            class=\"progress-bar\"\n                                            [class.progress-bar-success]=\"file.progress === 100\"\n                                            role=\"progressbar\"\n                                            [attr.aria-valuenow]=\"file.progress\"\n                                            aria-valuemin=\"0\"\n                                            aria-valuemax=\"100\"\n                                            [style.width.%]=\"file.progress\">\n                                            <span class=\"progress-text\">{{ file.name }}</span>\n                                        </div>\n                                    </div>\n                                </div>\n                                <div class=\"input-group-btn\">\n                                    <!-- image-preview-clear button -->\n                                    <a\n                                        class=\"btn\"\n                                        (click)=\"cancel(file.uploadId)\"\n                                        [class.btn-default]=\"!(invalid && (dirty || touched))\"\n                                        [class.btn-danger]=\"invalid && (dirty || touched)\">\n                                        <span [class]=\"IconDelete\"></span>\n                                    </a>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <input\n                    #files\n                    id=\"{{ name }}_uploadinput\"\n                    type=\"file\"\n                    class=\"custom-file-input\"\n                    (click)=\"files.value = ''\"\n                    (uploadxState)=\"onUpload($event)\"\n                    [disabled]=\"HasQueueItem()\" />\n            </div>\n            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"help-block\">\n                {{ helptext }}\n            </small>\n            <div\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"help-block help-block-error\">\n                {{ GetErrorMessage() | async }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-static\"\n            style=\"margin-left: 5px\">\n            <sac-tooltip\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [class]=\"HelptextTooltipIcon\"\n                    style=\"margin-left: 5px; margin-right: 5px\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n", styles: [".upload-component .upload-input{position:relative}.upload-component .custom-file>i{margin-right:15px}.upload-component .custom-file .custom-file-input{inset:0;position:absolute;overflow:hidden;z-index:2;width:100%;margin:0;display:inline-block;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}.upload-component .upload-progress .progress{height:100%}.upload-component .upload-progress .progress .progress-text{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);display:table-cell;line-height:34px;height:34px;color:#000}.dropzone{min-height:120px;width:100%;text-align:center;border-style:dashed;border-width:2px;padding-top:50px;padding-bottom:50px;position:relative}.dropzone.active{background-color:#add8e6}.dropzone .progress{border-radius:0}.dropzone .progress .progress-bar{display:flex;justify-content:center;text-align:center;flex-direction:column;border-top-right-radius:0;border-bottom-right-radius:0}.dropzone .progress .progress-bar .progress-text{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);display:table-cell;line-height:34px;height:34px;color:#000}.dropzone input[type=file]{position:absolute;inset:0;opacity:0;width:100%}.dropzone .dropzone-uploadstates{max-width:450px;margin-left:auto;margin-right:auto;margin-top:6px;width:80%}\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"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "toLabelHeight": SacToLabelHeightPipe, "testingattribute": i5.SacTestingAttributePipe, "toLabelWidthCss": SacToLabelWidthCssPipe, "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: [
@@ -2196,7 +2178,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => SacDropzoneSingleComponent),
                         },
-                    ], template: "<div\n    id=\"{{ name }}\"\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}_uploadinput\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n        <div [style.flex-grow]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 1 : null\">\n            <div\n                class=\"img-rounded dropzone control-label\"\n                (drop)=\"dropHandler($event)\"\n                (dragover)=\"onDragOver($event)\"\n                (dragleave)=\"onDragLeave($event)\"\n                [style.min-height]=\"uploadheight\"\n                [class.active]=\"active\"\n                [class.is-invalid]=\"invalid && (dirty || touched)\">\n                <div\n                    class=\"content\"\n                    *ngIf=\"uploads.length === 0\">\n                    <div>\n                        <div [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                            <ng-content></ng-content>\n                        </div>\n                    </div>\n                </div>\n                <div *ngIf=\"uploads.length > 0\">\n                    <div>\n                        <div\n                            class=\"dropzone-uploadstates\"\n                            *ngFor=\"let file of uploads\">\n                            <div\n                                class=\"input-group upload-component upload-component-multiple\"\n                                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\n                                <div class=\"form-control upload-progress\">\n                                    <div class=\"progress\">\n                                        <div\n                                            class=\"progress-bar\"\n                                            [class.progress-bar-success]=\"file.progress === 100\"\n                                            role=\"progressbar\"\n                                            [attr.aria-valuenow]=\"file.progress\"\n                                            aria-valuemin=\"0\"\n                                            aria-valuemax=\"100\"\n                                            [style.width.%]=\"file.progress\">\n                                            <span class=\"progress-text\">{{ file.name }}</span>\n                                        </div>\n                                    </div>\n                                </div>\n                                <div class=\"input-group-btn\">\n                                    <!-- image-preview-clear button -->\n                                    <a\n                                        class=\"btn\"\n                                        (click)=\"cancel(file.uploadId)\"\n                                        [class.btn-default]=\"!(invalid && (dirty || touched))\"\n                                        [class.btn-danger]=\"invalid && (dirty || touched)\">\n                                        <span [class]=\"IconDelete\"></span>\n                                    </a>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <input\n                    #files\n                    id=\"{{ name }}_uploadinput\"\n                    type=\"file\"\n                    class=\"custom-file-input\"\n                    (click)=\"files.value = ''\"\n                    (uploadxState)=\"onUpload($event)\"\n                    [disabled]=\"HasQueueItem()\" />\n            </div>\n            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"help-block\">\n                {{ helptext }}\n            </small>\n            <div\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"help-block help-block-error\">\n                {{ GetErrorMessage() | async }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-static\"\n            style=\"margin-left: 5px\">\n            <sac-tooltip\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [class]=\"HelptextTooltipIcon\"\n                    style=\"margin-left: 5px; margin-right: 5px\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n", styles: [".upload-component .upload-input{position:relative}.upload-component .custom-file>i{margin-right:15px}.upload-component .custom-file .custom-file-input{inset:0;position:absolute;overflow:hidden;z-index:2;width:100%;margin:0;display:inline-block;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}.upload-component .upload-progress .progress{height:100%}.upload-component .upload-progress .progress .progress-text{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);display:table-cell;line-height:34px;height:34px;color:#000}.dropzone{min-height:120px;width:100%;text-align:center;border-style:dashed;border-width:2px;padding-top:50px;padding-bottom:50px;position:relative}.dropzone.active{background-color:#add8e6}.dropzone .progress{border-radius:0}.dropzone .progress .progress-bar{display:flex;justify-content:center;text-align:center;flex-direction:column;border-top-right-radius:0;border-bottom-right-radius:0}.dropzone .progress .progress-bar .progress-text{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);display:table-cell;line-height:34px;height:34px;color:#000}.dropzone input[type=file]{position:absolute;inset:0;opacity:0;width:100%}.dropzone .dropzone-uploadstates{max-width:450px;margin-left:auto;margin-right:auto;margin-top:6px;width:80%}\n"] }]
+                    ], template: "<div\n    id=\"{{ name }}\"\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}_uploadinput\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n        <div [style.flex-grow]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 1 : null\">\n            <div\n                class=\"img-rounded dropzone control-label\"\n                (drop)=\"dropHandler($event)\"\n                (dragover)=\"onDragOver($event)\"\n                (dragleave)=\"onDragLeave($event)\"\n                [style.min-height]=\"uploadheight\"\n                [class.active]=\"active\"\n                [class.is-invalid]=\"invalid && (dirty || touched)\">\n                <div\n                    class=\"content\"\n                    *ngIf=\"uploads.length === 0\">\n                    <div>\n                        <div [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                            <ng-content></ng-content>\n                        </div>\n                    </div>\n                </div>\n                <div *ngIf=\"uploads.length > 0\">\n                    <div>\n                        <div\n                            class=\"dropzone-uploadstates\"\n                            *ngFor=\"let file of uploads\">\n                            <div\n                                class=\"input-group upload-component upload-component-multiple\"\n                                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\n                                <div class=\"form-control upload-progress\">\n                                    <div class=\"progress\">\n                                        <div\n                                            class=\"progress-bar\"\n                                            [class.progress-bar-success]=\"file.progress === 100\"\n                                            role=\"progressbar\"\n                                            [attr.aria-valuenow]=\"file.progress\"\n                                            aria-valuemin=\"0\"\n                                            aria-valuemax=\"100\"\n                                            [style.width.%]=\"file.progress\">\n                                            <span class=\"progress-text\">{{ file.name }}</span>\n                                        </div>\n                                    </div>\n                                </div>\n                                <div class=\"input-group-btn\">\n                                    <!-- image-preview-clear button -->\n                                    <a\n                                        class=\"btn\"\n                                        (click)=\"cancel(file.uploadId)\"\n                                        [class.btn-default]=\"!(invalid && (dirty || touched))\"\n                                        [class.btn-danger]=\"invalid && (dirty || touched)\">\n                                        <span [class]=\"IconDelete\"></span>\n                                    </a>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <input\n                    #files\n                    id=\"{{ name }}_uploadinput\"\n                    type=\"file\"\n                    class=\"custom-file-input\"\n                    (click)=\"files.value = ''\"\n                    (uploadxState)=\"onUpload($event)\"\n                    [disabled]=\"HasQueueItem()\" />\n            </div>\n            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"help-block\">\n                {{ helptext }}\n            </small>\n            <div\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"help-block help-block-error\">\n                {{ GetErrorMessage() | async }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-static\"\n            style=\"margin-left: 5px\">\n            <sac-tooltip\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [class]=\"HelptextTooltipIcon\"\n                    style=\"margin-left: 5px; margin-right: 5px\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n", styles: [".upload-component .upload-input{position:relative}.upload-component .custom-file>i{margin-right:15px}.upload-component .custom-file .custom-file-input{inset:0;position:absolute;overflow:hidden;z-index:2;width:100%;margin:0;display:inline-block;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}.upload-component .upload-progress .progress{height:100%}.upload-component .upload-progress .progress .progress-text{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);display:table-cell;line-height:34px;height:34px;color:#000}.dropzone{min-height:120px;width:100%;text-align:center;border-style:dashed;border-width:2px;padding-top:50px;padding-bottom:50px;position:relative}.dropzone.active{background-color:#add8e6}.dropzone .progress{border-radius:0}.dropzone .progress .progress-bar{display:flex;justify-content:center;text-align:center;flex-direction:column;border-top-right-radius:0;border-bottom-right-radius:0}.dropzone .progress .progress-bar .progress-text{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);display:table-cell;line-height:34px;height:34px;color:#000}.dropzone input[type=file]{position:absolute;inset:0;opacity:0;width:100%}.dropzone .dropzone-uploadstates{max-width:450px;margin-left:auto;margin-right:auto;margin-top:6px;width:80%}\n"] }]
         }], ctorParameters: function () { return [{ type: SacFormLayoutDirective, decorators: [{
                     type: Host
                 }, {
@@ -2229,7 +2211,7 @@ SacUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
             multi: true,
             useExisting: forwardRef(() => SacUploadComponent),
         },
-    ], usesInheritance: true, ngImport: i0, template: "<div\n    id=\"{{ name }}\"\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}_uploadinput\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n        <div [style.flex-grow]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 1 : null\">\n            <div\n                class=\"input-group upload-component upload-single\"\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\n                <div class=\"input-group-btn\">\n                    <!-- image-preview-input -->\n                    <div\n                        class=\"btn upload-input custom-file\"\n                        [class.disabled]=\"HasQueueItem()\"\n                        [class.btn-default]=\"!(invalid && (dirty || touched))\"\n                        [class.btn-danger]=\"invalid && (dirty || touched)\">\n                        <i [class]=\"IconBrowse\"></i>\n                        <span class=\"upload-browse\">{{ buttonbrowse ? buttonbrowse : (lngResourceService.GetString(validationKeyService.UploadButtonBrowse) | async) }}</span>\n                        <input\n                            id=\"{{ name }}_uploadinput\"\n                            type=\"file\"\n                            class=\"custom-file-input\"\n                            #files\n                            (click)=\"files.value = ''\"\n                            (uploadxState)=\"onUpload($event)\"\n                            multiple\n                            [disabled]=\"HasQueueItem()\" />\n                    </div>\n                </div>\n                <div class=\"form-control upload-progress\">\n                    <div class=\"progress\">\n                        <div\n                            class=\"progress-bar\"\n                            [class.progress-bar-success]=\"Progress() === 100\"\n                            role=\"progressbar\"\n                            [attr.aria-valuenow]=\"Progress()\"\n                            aria-valuemin=\"0\"\n                            aria-valuemax=\"100\"\n                            [style.width.%]=\"Progress()\">\n                            <span class=\"progress-text text-dark\">{{ Filename() | async }}</span>\n                        </div>\n                    </div>\n                </div>\n\n                <div class=\"input-group-btn\">\n                    <!-- image-preview-clear button -->\n                    <a\n                        class=\"btn\"\n                        (click)=\"cancelAll()\"\n                        [attr.disabled]=\"HasQueueItem() === false ? 'disabled' : null\"\n                        [class.btn-default]=\"!(invalid && (dirty || touched))\"\n                        [class.btn-danger]=\"invalid && (dirty || touched)\">\n                        <span [class]=\"IconDelete\"></span>\n                    </a>\n                    <a\n                        *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && IsPaused() === false)\"\n                        class=\"btn\"\n                        (click)=\"pauseAll()\"\n                        [attr.disabled]=\"IsUploading() === false ? 'disabled' : null\"\n                        [class.btn-default]=\"!(invalid && (dirty || touched))\"\n                        [class.btn-danger]=\"invalid && (dirty || touched)\">\n                        <span [class]=\"IconPause\"></span>\n                    </a>\n                    <a\n                        *ngIf=\"autoupload && enablepause && IsPaused()\"\n                        class=\"btn\"\n                        (click)=\"uploadAll()\"\n                        [class.btn-default]=\"!(invalid && (dirty || touched))\"\n                        [class.btn-danger]=\"invalid && (dirty || touched)\">\n                        <span [class]=\"IconContinue\"></span>\n                    </a>\n                    <a\n                        *ngIf=\"autoupload === false\"\n                        class=\"btn\"\n                        (click)=\"uploadAll()\"\n                        [attr.disabled]=\"IsStateToUpload() === false ? 'disabled' : null\"\n                        [class.btn-default]=\"!(invalid && (dirty || touched))\"\n                        [class.btn-danger]=\"invalid && (dirty || touched)\">\n                        <span [class]=\"IconUpload\"></span> {{ buttonupload ? buttonupload : (lngResourceService.GetString(validationKeyService.UploadButtonUpload) | async) }}\n                    </a>\n                </div>\n            </div>\n\n            <p\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"help-block\">\n                {{ helptext }}\n            </p>\n\n            <div\n                class=\"help-block help-block-error\"\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                {{ GetErrorMessage() | async }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-static\"\n            style=\"margin-left: 5px\">\n            <sac-tooltip\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [class]=\"HelptextTooltipIcon\"\n                    style=\"margin-left: 5px; margin-right: 5px\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n", styles: [".upload-component .upload-input{position:relative}.upload-component .custom-file>i{margin-right:15px}.upload-component .custom-file .custom-file-input{inset:0;position:absolute;overflow:hidden;z-index:2;width:100%;margin:0;display:inline-block;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}.upload-component .upload-progress .progress{height:100%}.upload-component .upload-progress .progress .progress-text{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);display:table-cell;line-height:34px;height:34px;color:#000}.dropzone{min-height:120px;width:100%;text-align:center;border-style:dashed;border-width:2px;padding-top:50px;padding-bottom:50px;position:relative}.dropzone.active{background-color:#add8e6}.dropzone .progress{border-radius:0}.dropzone .progress .progress-bar{display:flex;justify-content:center;text-align:center;flex-direction:column;border-top-right-radius:0;border-bottom-right-radius:0}.dropzone .progress .progress-bar .progress-text{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);display:table-cell;line-height:34px;height:34px;color:#000}.dropzone input[type=file]{position:absolute;inset:0;opacity:0;width:100%}.dropzone .dropzone-uploadstates{max-width:450px;margin-left:auto;margin-right:auto;margin-top:6px;width:80%}\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: { "toLabelHeight": SacToLabelHeightPipe, "toLabelWidthCss": SacToLabelWidthCssPipe, "toControlWidthCss": SacToControlWidthCssPipe, "async": i3.AsyncPipe } });
+    ], usesInheritance: true, ngImport: i0, template: "<div\n    id=\"{{ name }}\"\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}_uploadinput\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n        <div [style.flex-grow]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 1 : null\">\n            <div\n                class=\"input-group upload-component upload-single\"\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\n                <div class=\"input-group-btn\">\n                    <!-- image-preview-input -->\n                    <div\n                        class=\"btn upload-input custom-file\"\n                        [class.disabled]=\"HasQueueItem()\"\n                        [class.btn-default]=\"!(invalid && (dirty || touched))\"\n                        [class.btn-danger]=\"invalid && (dirty || touched)\">\n                        <i [class]=\"IconBrowse\"></i>\n                        <span class=\"upload-browse\">{{ buttonbrowse ? buttonbrowse : (lngResourceService.GetString(validationKeyService.UploadButtonBrowse) | async) }}</span>\n                        <input\n                            id=\"{{ name }}_uploadinput\"\n                            type=\"file\"\n                            class=\"custom-file-input\"\n                            #files\n                            (click)=\"files.value = ''\"\n                            (uploadxState)=\"onUpload($event)\"\n                            multiple\n                            [disabled]=\"HasQueueItem()\" />\n                    </div>\n                </div>\n                <div class=\"form-control upload-progress\">\n                    <div class=\"progress\">\n                        <div\n                            class=\"progress-bar\"\n                            [class.progress-bar-success]=\"Progress() === 100\"\n                            role=\"progressbar\"\n                            [attr.aria-valuenow]=\"Progress()\"\n                            aria-valuemin=\"0\"\n                            aria-valuemax=\"100\"\n                            [style.width.%]=\"Progress()\">\n                            <span class=\"progress-text text-dark\">{{ Filename() | async }}</span>\n                        </div>\n                    </div>\n                </div>\n\n                <div class=\"input-group-btn\">\n                    <!-- image-preview-clear button -->\n                    <a\n                        class=\"btn\"\n                        (click)=\"cancelAll()\"\n                        [attr.disabled]=\"HasQueueItem() === false ? 'disabled' : null\"\n                        [class.btn-default]=\"!(invalid && (dirty || touched))\"\n                        [class.btn-danger]=\"invalid && (dirty || touched)\">\n                        <span [class]=\"IconDelete\"></span>\n                    </a>\n                    <a\n                        *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && IsPaused() === false)\"\n                        class=\"btn\"\n                        (click)=\"pauseAll()\"\n                        [attr.disabled]=\"IsUploading() === false ? 'disabled' : null\"\n                        [class.btn-default]=\"!(invalid && (dirty || touched))\"\n                        [class.btn-danger]=\"invalid && (dirty || touched)\">\n                        <span [class]=\"IconPause\"></span>\n                    </a>\n                    <a\n                        *ngIf=\"autoupload && enablepause && IsPaused()\"\n                        class=\"btn\"\n                        (click)=\"uploadAll()\"\n                        [class.btn-default]=\"!(invalid && (dirty || touched))\"\n                        [class.btn-danger]=\"invalid && (dirty || touched)\">\n                        <span [class]=\"IconContinue\"></span>\n                    </a>\n                    <a\n                        *ngIf=\"autoupload === false\"\n                        class=\"btn\"\n                        (click)=\"uploadAll()\"\n                        [attr.disabled]=\"IsStateToUpload() === false ? 'disabled' : null\"\n                        [class.btn-default]=\"!(invalid && (dirty || touched))\"\n                        [class.btn-danger]=\"invalid && (dirty || touched)\">\n                        <span [class]=\"IconUpload\"></span> {{ buttonupload ? buttonupload : (lngResourceService.GetString(validationKeyService.UploadButtonUpload) | async) }}\n                    </a>\n                </div>\n            </div>\n\n            <p\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"help-block\">\n                {{ helptext }}\n            </p>\n\n            <div\n                class=\"help-block help-block-error\"\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                {{ GetErrorMessage() | async }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-static\"\n            style=\"margin-left: 5px\">\n            <sac-tooltip\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [class]=\"HelptextTooltipIcon\"\n                    style=\"margin-left: 5px; margin-right: 5px\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n", styles: [".upload-component .upload-input{position:relative}.upload-component .custom-file>i{margin-right:15px}.upload-component .custom-file .custom-file-input{inset:0;position:absolute;overflow:hidden;z-index:2;width:100%;margin:0;display:inline-block;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}.upload-component .upload-progress .progress{height:100%}.upload-component .upload-progress .progress .progress-text{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);display:table-cell;line-height:34px;height:34px;color:#000}.dropzone{min-height:120px;width:100%;text-align:center;border-style:dashed;border-width:2px;padding-top:50px;padding-bottom:50px;position:relative}.dropzone.active{background-color:#add8e6}.dropzone .progress{border-radius:0}.dropzone .progress .progress-bar{display:flex;justify-content:center;text-align:center;flex-direction:column;border-top-right-radius:0;border-bottom-right-radius:0}.dropzone .progress .progress-bar .progress-text{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);display:table-cell;line-height:34px;height:34px;color:#000}.dropzone input[type=file]{position:absolute;inset:0;opacity:0;width:100%}.dropzone .dropzone-uploadstates{max-width:450px;margin-left:auto;margin-right:auto;margin-top:6px;width:80%}\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: { "toLabelHeight": SacToLabelHeightPipe, "testingattribute": i5.SacTestingAttributePipe, "toLabelWidthCss": SacToLabelWidthCssPipe, "toControlWidthCss": SacToControlWidthCssPipe, "async": i3.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacUploadComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sac-upload', providers: [
@@ -2243,7 +2225,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => SacUploadComponent),
                         },
-                    ], template: "<div\n    id=\"{{ name }}\"\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}_uploadinput\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n        <div [style.flex-grow]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 1 : null\">\n            <div\n                class=\"input-group upload-component upload-single\"\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\n                <div class=\"input-group-btn\">\n                    <!-- image-preview-input -->\n                    <div\n                        class=\"btn upload-input custom-file\"\n                        [class.disabled]=\"HasQueueItem()\"\n                        [class.btn-default]=\"!(invalid && (dirty || touched))\"\n                        [class.btn-danger]=\"invalid && (dirty || touched)\">\n                        <i [class]=\"IconBrowse\"></i>\n                        <span class=\"upload-browse\">{{ buttonbrowse ? buttonbrowse : (lngResourceService.GetString(validationKeyService.UploadButtonBrowse) | async) }}</span>\n                        <input\n                            id=\"{{ name }}_uploadinput\"\n                            type=\"file\"\n                            class=\"custom-file-input\"\n                            #files\n                            (click)=\"files.value = ''\"\n                            (uploadxState)=\"onUpload($event)\"\n                            multiple\n                            [disabled]=\"HasQueueItem()\" />\n                    </div>\n                </div>\n                <div class=\"form-control upload-progress\">\n                    <div class=\"progress\">\n                        <div\n                            class=\"progress-bar\"\n                            [class.progress-bar-success]=\"Progress() === 100\"\n                            role=\"progressbar\"\n                            [attr.aria-valuenow]=\"Progress()\"\n                            aria-valuemin=\"0\"\n                            aria-valuemax=\"100\"\n                            [style.width.%]=\"Progress()\">\n                            <span class=\"progress-text text-dark\">{{ Filename() | async }}</span>\n                        </div>\n                    </div>\n                </div>\n\n                <div class=\"input-group-btn\">\n                    <!-- image-preview-clear button -->\n                    <a\n                        class=\"btn\"\n                        (click)=\"cancelAll()\"\n                        [attr.disabled]=\"HasQueueItem() === false ? 'disabled' : null\"\n                        [class.btn-default]=\"!(invalid && (dirty || touched))\"\n                        [class.btn-danger]=\"invalid && (dirty || touched)\">\n                        <span [class]=\"IconDelete\"></span>\n                    </a>\n                    <a\n                        *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && IsPaused() === false)\"\n                        class=\"btn\"\n                        (click)=\"pauseAll()\"\n                        [attr.disabled]=\"IsUploading() === false ? 'disabled' : null\"\n                        [class.btn-default]=\"!(invalid && (dirty || touched))\"\n                        [class.btn-danger]=\"invalid && (dirty || touched)\">\n                        <span [class]=\"IconPause\"></span>\n                    </a>\n                    <a\n                        *ngIf=\"autoupload && enablepause && IsPaused()\"\n                        class=\"btn\"\n                        (click)=\"uploadAll()\"\n                        [class.btn-default]=\"!(invalid && (dirty || touched))\"\n                        [class.btn-danger]=\"invalid && (dirty || touched)\">\n                        <span [class]=\"IconContinue\"></span>\n                    </a>\n                    <a\n                        *ngIf=\"autoupload === false\"\n                        class=\"btn\"\n                        (click)=\"uploadAll()\"\n                        [attr.disabled]=\"IsStateToUpload() === false ? 'disabled' : null\"\n                        [class.btn-default]=\"!(invalid && (dirty || touched))\"\n                        [class.btn-danger]=\"invalid && (dirty || touched)\">\n                        <span [class]=\"IconUpload\"></span> {{ buttonupload ? buttonupload : (lngResourceService.GetString(validationKeyService.UploadButtonUpload) | async) }}\n                    </a>\n                </div>\n            </div>\n\n            <p\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"help-block\">\n                {{ helptext }}\n            </p>\n\n            <div\n                class=\"help-block help-block-error\"\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                {{ GetErrorMessage() | async }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-static\"\n            style=\"margin-left: 5px\">\n            <sac-tooltip\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [class]=\"HelptextTooltipIcon\"\n                    style=\"margin-left: 5px; margin-right: 5px\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n", styles: [".upload-component .upload-input{position:relative}.upload-component .custom-file>i{margin-right:15px}.upload-component .custom-file .custom-file-input{inset:0;position:absolute;overflow:hidden;z-index:2;width:100%;margin:0;display:inline-block;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}.upload-component .upload-progress .progress{height:100%}.upload-component .upload-progress .progress .progress-text{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);display:table-cell;line-height:34px;height:34px;color:#000}.dropzone{min-height:120px;width:100%;text-align:center;border-style:dashed;border-width:2px;padding-top:50px;padding-bottom:50px;position:relative}.dropzone.active{background-color:#add8e6}.dropzone .progress{border-radius:0}.dropzone .progress .progress-bar{display:flex;justify-content:center;text-align:center;flex-direction:column;border-top-right-radius:0;border-bottom-right-radius:0}.dropzone .progress .progress-bar .progress-text{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);display:table-cell;line-height:34px;height:34px;color:#000}.dropzone input[type=file]{position:absolute;inset:0;opacity:0;width:100%}.dropzone .dropzone-uploadstates{max-width:450px;margin-left:auto;margin-right:auto;margin-top:6px;width:80%}\n"] }]
+                    ], template: "<div\n    id=\"{{ name }}\"\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}_uploadinput\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n        <div [style.flex-grow]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 1 : null\">\n            <div\n                class=\"input-group upload-component upload-single\"\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\n                <div class=\"input-group-btn\">\n                    <!-- image-preview-input -->\n                    <div\n                        class=\"btn upload-input custom-file\"\n                        [class.disabled]=\"HasQueueItem()\"\n                        [class.btn-default]=\"!(invalid && (dirty || touched))\"\n                        [class.btn-danger]=\"invalid && (dirty || touched)\">\n                        <i [class]=\"IconBrowse\"></i>\n                        <span class=\"upload-browse\">{{ buttonbrowse ? buttonbrowse : (lngResourceService.GetString(validationKeyService.UploadButtonBrowse) | async) }}</span>\n                        <input\n                            id=\"{{ name }}_uploadinput\"\n                            type=\"file\"\n                            class=\"custom-file-input\"\n                            #files\n                            (click)=\"files.value = ''\"\n                            (uploadxState)=\"onUpload($event)\"\n                            multiple\n                            [disabled]=\"HasQueueItem()\" />\n                    </div>\n                </div>\n                <div class=\"form-control upload-progress\">\n                    <div class=\"progress\">\n                        <div\n                            class=\"progress-bar\"\n                            [class.progress-bar-success]=\"Progress() === 100\"\n                            role=\"progressbar\"\n                            [attr.aria-valuenow]=\"Progress()\"\n                            aria-valuemin=\"0\"\n                            aria-valuemax=\"100\"\n                            [style.width.%]=\"Progress()\">\n                            <span class=\"progress-text text-dark\">{{ Filename() | async }}</span>\n                        </div>\n                    </div>\n                </div>\n\n                <div class=\"input-group-btn\">\n                    <!-- image-preview-clear button -->\n                    <a\n                        class=\"btn\"\n                        (click)=\"cancelAll()\"\n                        [attr.disabled]=\"HasQueueItem() === false ? 'disabled' : null\"\n                        [class.btn-default]=\"!(invalid && (dirty || touched))\"\n                        [class.btn-danger]=\"invalid && (dirty || touched)\">\n                        <span [class]=\"IconDelete\"></span>\n                    </a>\n                    <a\n                        *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && IsPaused() === false)\"\n                        class=\"btn\"\n                        (click)=\"pauseAll()\"\n                        [attr.disabled]=\"IsUploading() === false ? 'disabled' : null\"\n                        [class.btn-default]=\"!(invalid && (dirty || touched))\"\n                        [class.btn-danger]=\"invalid && (dirty || touched)\">\n                        <span [class]=\"IconPause\"></span>\n                    </a>\n                    <a\n                        *ngIf=\"autoupload && enablepause && IsPaused()\"\n                        class=\"btn\"\n                        (click)=\"uploadAll()\"\n                        [class.btn-default]=\"!(invalid && (dirty || touched))\"\n                        [class.btn-danger]=\"invalid && (dirty || touched)\">\n                        <span [class]=\"IconContinue\"></span>\n                    </a>\n                    <a\n                        *ngIf=\"autoupload === false\"\n                        class=\"btn\"\n                        (click)=\"uploadAll()\"\n                        [attr.disabled]=\"IsStateToUpload() === false ? 'disabled' : null\"\n                        [class.btn-default]=\"!(invalid && (dirty || touched))\"\n                        [class.btn-danger]=\"invalid && (dirty || touched)\">\n                        <span [class]=\"IconUpload\"></span> {{ buttonupload ? buttonupload : (lngResourceService.GetString(validationKeyService.UploadButtonUpload) | async) }}\n                    </a>\n                </div>\n            </div>\n\n            <p\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"help-block\">\n                {{ helptext }}\n            </p>\n\n            <div\n                class=\"help-block help-block-error\"\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                {{ GetErrorMessage() | async }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-static\"\n            style=\"margin-left: 5px\">\n            <sac-tooltip\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [class]=\"HelptextTooltipIcon\"\n                    style=\"margin-left: 5px; margin-right: 5px\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n", styles: [".upload-component .upload-input{position:relative}.upload-component .custom-file>i{margin-right:15px}.upload-component .custom-file .custom-file-input{inset:0;position:absolute;overflow:hidden;z-index:2;width:100%;margin:0;display:inline-block;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}.upload-component .upload-progress .progress{height:100%}.upload-component .upload-progress .progress .progress-text{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);display:table-cell;line-height:34px;height:34px;color:#000}.dropzone{min-height:120px;width:100%;text-align:center;border-style:dashed;border-width:2px;padding-top:50px;padding-bottom:50px;position:relative}.dropzone.active{background-color:#add8e6}.dropzone .progress{border-radius:0}.dropzone .progress .progress-bar{display:flex;justify-content:center;text-align:center;flex-direction:column;border-top-right-radius:0;border-bottom-right-radius:0}.dropzone .progress .progress-bar .progress-text{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);display:table-cell;line-height:34px;height:34px;color:#000}.dropzone input[type=file]{position:absolute;inset:0;opacity:0;width:100%}.dropzone .dropzone-uploadstates{max-width:450px;margin-left:auto;margin-right:auto;margin-top:6px;width:80%}\n"] }]
         }], ctorParameters: function () { return [{ type: SacFormLayoutDirective, decorators: [{
                     type: Host
                 }, {
@@ -2276,7 +2258,7 @@ SacUploadMultipleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
             multi: true,
             useExisting: forwardRef(() => SacUploadMultipleComponent),
         },
-    ], usesInheritance: true, ngImport: i0, template: "<div\n    id=\"{{ name }}\"\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}_uploadinput\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\n        <div class=\"upload-component\">\n            <div class=\"row\">\n                <div\n                    class=\"col-xs-12\"\n                    [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n                    <div\n                        class=\"btn-group\"\n                        [class.btn-group-sm]=\"componentHeight === ControlHeight.Small\"\n                        [class.btn-group-lg]=\"componentHeight === ControlHeight.Large\">\n                        <div\n                            class=\"btn upload-input custom-file\"\n                            [class.disabled]=\"maxfiles > 0 && uploads.length >= maxfiles\"\n                            [class.btn-default]=\"!(invalid && (dirty || touched))\"\n                            [class.btn-danger]=\"invalid && (dirty || touched)\">\n                            <i [class]=\"IconBrowse\"></i>\n                            <span class=\"upload-browse\">{{ buttonbrowse ? buttonbrowse : (lngResourceService.GetString(validationKeyService.UploadButtonBrowse) | async) }}</span>\n                            <input\n                                id=\"{{ name }}_uploadinput\"\n                                type=\"file\"\n                                class=\"custom-file-input\"\n                                #files\n                                (click)=\"files.value = ''\"\n                                (uploadxState)=\"onUpload($event)\"\n                                multiple\n                                [disabled]=\"maxfiles > 0 && uploads.length >= maxfiles\" />\n                        </div>\n\n                        <div\n                            class=\"btn-group\"\n                            [class.btn-group-sm]=\"componentHeight === ControlHeight.Small\"\n                            [class.btn-group-lg]=\"componentHeight === ControlHeight.Large\">\n                            <!-- image-preview-clear button -->\n                            <a\n                                class=\"btn\"\n                                (click)=\"cancelAll()\"\n                                [attr.disabled]=\"HasQueueItem() === false ? 'disabled' : null\"\n                                [class.btn-default]=\"!(invalid && (dirty || touched))\"\n                                [class.btn-danger]=\"invalid && (dirty || touched)\">\n                                <span [class]=\"IconDelete\"></span>\n                            </a>\n                            <a\n                                *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && IsPaused() === false)\"\n                                class=\"btn\"\n                                (click)=\"pauseAll()\"\n                                [attr.disabled]=\"IsUploading() === false ? 'disabled' : null\"\n                                [class.btn-default]=\"!(invalid && (dirty || touched))\"\n                                [class.btn-danger]=\"invalid && (dirty || touched)\">\n                                <span [class]=\"IconPause\"></span>\n                            </a>\n                            <a\n                                *ngIf=\"autoupload && enablepause && IsPaused() === true\"\n                                class=\"btn\"\n                                (click)=\"uploadAll()\"\n                                [class.btn-default]=\"!(invalid && (dirty || touched))\"\n                                [class.btn-danger]=\"invalid && (dirty || touched)\">\n                                <span [class]=\"IconContinue\"></span>\n                            </a>\n                            <a\n                                *ngIf=\"autoupload === false\"\n                                class=\"btn\"\n                                (click)=\"uploadAll()\"\n                                [attr.disabled]=\"IsStateToUpload() === false ? 'disabled' : null\"\n                                [class.btn-default]=\"!(invalid && (dirty || touched))\"\n                                [class.btn-danger]=\"invalid && (dirty || touched)\">\n                                <span [class]=\"IconUpload\"></span>\n                                {{ buttonupload ? buttonupload : (lngResourceService.GetString(validationKeyService.UploadButtonUpload) | async) }}\n                            </a>\n                        </div>\n                    </div>\n\n                    <div\n                        *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n                        class=\"form-control-static\"\n                        style=\"margin-left: 5px\">\n                        <sac-tooltip\n                            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                            [tooltiptext]=\"helptext\"\n                            [inlinemode]=\"true\">\n                            <span\n                                [class]=\"HelptextTooltipIcon\"\n                                style=\"margin-left: 5px; margin-right: 5px\">\n                            </span>\n                        </sac-tooltip>\n                    </div>\n                </div>\n            </div>\n\n            <div\n                *ngFor=\"let file of uploads\"\n                style=\"margin-top: 5px\">\n                <div\n                    class=\"input-group upload-component upload-multiple\"\n                    [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                    [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\n                    <div class=\"form-control upload-progress\">\n                        <div class=\"progress\">\n                            <div\n                                class=\"progress-bar\"\n                                [class.progress-bar-success]=\"file.progress === 100\"\n                                role=\"progressbar\"\n                                [attr.aria-valuenow]=\"file.progress\"\n                                aria-valuemin=\"0\"\n                                aria-valuemax=\"100\"\n                                [style.width.%]=\"file.progress\">\n                                <span class=\"progress-text text-dark\">{{ file.name }}</span>\n                            </div>\n                        </div>\n                    </div>\n                    <div\n                        class=\"input-group-btn\"\n                        [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                        [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\n                        <!-- image-preview-clear button -->\n                        <a\n                            class=\"btn\"\n                            (click)=\"cancel(file.uploadId)\"\n                            [class.btn-default]=\"!(invalid && (dirty || touched))\"\n                            [class.btn-danger]=\"invalid && (dirty || touched)\">\n                            <span [class]=\"IconDelete\"></span>\n                        </a>\n                        <a\n                            *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && file.status !== 'paused')\"\n                            class=\"btn\"\n                            (click)=\"pause(file.uploadId)\"\n                            [attr.disabled]=\"file.status !== 'uploading' ? 'disabled' : null\"\n                            [class.btn-default]=\"!(invalid && (dirty || touched))\"\n                            [class.btn-danger]=\"invalid && (dirty || touched)\">\n                            <span [class]=\"IconPause\"></span>\n                        </a>\n                        <a\n                            *ngIf=\"autoupload && enablepause && file.status === 'paused'\"\n                            class=\"btn\"\n                            (click)=\"upload(file.uploadId)\"\n                            [class.btn-default]=\"!(invalid && (dirty || touched))\"\n                            [class.btn-danger]=\"invalid && (dirty || touched)\">\n                            <span [class]=\"IconContinue\"></span>\n                        </a>\n                        <a\n                            *ngIf=\"autoupload === false\"\n                            class=\"btn\"\n                            (click)=\"upload(file.uploadId)\"\n                            [attr.disabled]=\"file.status !== 'added' && file.status !== 'paused' ? 'disabled' : null\"\n                            [class.btn-default]=\"!(invalid && (dirty || touched))\"\n                            [class.btn-danger]=\"invalid && (dirty || touched)\">\n                            <span [class]=\"IconUpload\"></span> {{ buttonupload ? buttonupload : (lngResourceService.GetString(validationKeyService.UploadButtonUpload) | async) }}\n                        </a>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <p\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"help-block\">\n            {{ helptext }}\n        </p>\n        <div\n            class=\"help-block help-block-error\"\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n            {{ GetErrorMessage() | async }}\n        </div>\n    </div>\n</div>\n", styles: [".upload-component .upload-input{position:relative}.upload-component .custom-file>i{margin-right:15px}.upload-component .custom-file .custom-file-input{inset:0;position:absolute;overflow:hidden;z-index:2;width:100%;margin:0;display:inline-block;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}.upload-component .upload-progress .progress{height:100%}.upload-component .upload-progress .progress .progress-text{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);display:table-cell;line-height:34px;height:34px;color:#000}.dropzone{min-height:120px;width:100%;text-align:center;border-style:dashed;border-width:2px;padding-top:50px;padding-bottom:50px;position:relative}.dropzone.active{background-color:#add8e6}.dropzone .progress{border-radius:0}.dropzone .progress .progress-bar{display:flex;justify-content:center;text-align:center;flex-direction:column;border-top-right-radius:0;border-bottom-right-radius:0}.dropzone .progress .progress-bar .progress-text{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);display:table-cell;line-height:34px;height:34px;color:#000}.dropzone input[type=file]{position:absolute;inset:0;opacity:0;width:100%}.dropzone .dropzone-uploadstates{max-width:450px;margin-left:auto;margin-right:auto;margin-top:6px;width:80%}\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"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "toLabelHeight": SacToLabelHeightPipe, "toLabelWidthCss": SacToLabelWidthCssPipe, "toControlWidthCss": SacToControlWidthCssPipe, "async": i3.AsyncPipe } });
+    ], usesInheritance: true, ngImport: i0, template: "<div\n    id=\"{{ name }}\"\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}_uploadinput\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\n        <div class=\"upload-component\">\n            <div class=\"row\">\n                <div\n                    class=\"col-xs-12\"\n                    [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n                    <div\n                        class=\"btn-group\"\n                        [class.btn-group-sm]=\"componentHeight === ControlHeight.Small\"\n                        [class.btn-group-lg]=\"componentHeight === ControlHeight.Large\">\n                        <div\n                            class=\"btn upload-input custom-file\"\n                            [class.disabled]=\"maxfiles > 0 && uploads.length >= maxfiles\"\n                            [class.btn-default]=\"!(invalid && (dirty || touched))\"\n                            [class.btn-danger]=\"invalid && (dirty || touched)\">\n                            <i [class]=\"IconBrowse\"></i>\n                            <span class=\"upload-browse\">{{ buttonbrowse ? buttonbrowse : (lngResourceService.GetString(validationKeyService.UploadButtonBrowse) | async) }}</span>\n                            <input\n                                id=\"{{ name }}_uploadinput\"\n                                type=\"file\"\n                                class=\"custom-file-input\"\n                                #files\n                                (click)=\"files.value = ''\"\n                                (uploadxState)=\"onUpload($event)\"\n                                multiple\n                                [disabled]=\"maxfiles > 0 && uploads.length >= maxfiles\" />\n                        </div>\n\n                        <div\n                            class=\"btn-group\"\n                            [class.btn-group-sm]=\"componentHeight === ControlHeight.Small\"\n                            [class.btn-group-lg]=\"componentHeight === ControlHeight.Large\">\n                            <!-- image-preview-clear button -->\n                            <a\n                                class=\"btn\"\n                                (click)=\"cancelAll()\"\n                                [attr.disabled]=\"HasQueueItem() === false ? 'disabled' : null\"\n                                [class.btn-default]=\"!(invalid && (dirty || touched))\"\n                                [class.btn-danger]=\"invalid && (dirty || touched)\">\n                                <span [class]=\"IconDelete\"></span>\n                            </a>\n                            <a\n                                *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && IsPaused() === false)\"\n                                class=\"btn\"\n                                (click)=\"pauseAll()\"\n                                [attr.disabled]=\"IsUploading() === false ? 'disabled' : null\"\n                                [class.btn-default]=\"!(invalid && (dirty || touched))\"\n                                [class.btn-danger]=\"invalid && (dirty || touched)\">\n                                <span [class]=\"IconPause\"></span>\n                            </a>\n                            <a\n                                *ngIf=\"autoupload && enablepause && IsPaused() === true\"\n                                class=\"btn\"\n                                (click)=\"uploadAll()\"\n                                [class.btn-default]=\"!(invalid && (dirty || touched))\"\n                                [class.btn-danger]=\"invalid && (dirty || touched)\">\n                                <span [class]=\"IconContinue\"></span>\n                            </a>\n                            <a\n                                *ngIf=\"autoupload === false\"\n                                class=\"btn\"\n                                (click)=\"uploadAll()\"\n                                [attr.disabled]=\"IsStateToUpload() === false ? 'disabled' : null\"\n                                [class.btn-default]=\"!(invalid && (dirty || touched))\"\n                                [class.btn-danger]=\"invalid && (dirty || touched)\">\n                                <span [class]=\"IconUpload\"></span>\n                                {{ buttonupload ? buttonupload : (lngResourceService.GetString(validationKeyService.UploadButtonUpload) | async) }}\n                            </a>\n                        </div>\n                    </div>\n\n                    <div\n                        *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n                        class=\"form-control-static\"\n                        style=\"margin-left: 5px\">\n                        <sac-tooltip\n                            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                            [tooltiptext]=\"helptext\"\n                            [inlinemode]=\"true\">\n                            <span\n                                [class]=\"HelptextTooltipIcon\"\n                                style=\"margin-left: 5px; margin-right: 5px\">\n                            </span>\n                        </sac-tooltip>\n                    </div>\n                </div>\n            </div>\n\n            <div\n                *ngFor=\"let file of uploads\"\n                style=\"margin-top: 5px\">\n                <div\n                    class=\"input-group upload-component upload-multiple\"\n                    [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                    [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\n                    <div class=\"form-control upload-progress\">\n                        <div class=\"progress\">\n                            <div\n                                class=\"progress-bar\"\n                                [class.progress-bar-success]=\"file.progress === 100\"\n                                role=\"progressbar\"\n                                [attr.aria-valuenow]=\"file.progress\"\n                                aria-valuemin=\"0\"\n                                aria-valuemax=\"100\"\n                                [style.width.%]=\"file.progress\">\n                                <span class=\"progress-text text-dark\">{{ file.name }}</span>\n                            </div>\n                        </div>\n                    </div>\n                    <div\n                        class=\"input-group-btn\"\n                        [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                        [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\n                        <!-- image-preview-clear button -->\n                        <a\n                            class=\"btn\"\n                            (click)=\"cancel(file.uploadId)\"\n                            [class.btn-default]=\"!(invalid && (dirty || touched))\"\n                            [class.btn-danger]=\"invalid && (dirty || touched)\">\n                            <span [class]=\"IconDelete\"></span>\n                        </a>\n                        <a\n                            *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && file.status !== 'paused')\"\n                            class=\"btn\"\n                            (click)=\"pause(file.uploadId)\"\n                            [attr.disabled]=\"file.status !== 'uploading' ? 'disabled' : null\"\n                            [class.btn-default]=\"!(invalid && (dirty || touched))\"\n                            [class.btn-danger]=\"invalid && (dirty || touched)\">\n                            <span [class]=\"IconPause\"></span>\n                        </a>\n                        <a\n                            *ngIf=\"autoupload && enablepause && file.status === 'paused'\"\n                            class=\"btn\"\n                            (click)=\"upload(file.uploadId)\"\n                            [class.btn-default]=\"!(invalid && (dirty || touched))\"\n                            [class.btn-danger]=\"invalid && (dirty || touched)\">\n                            <span [class]=\"IconContinue\"></span>\n                        </a>\n                        <a\n                            *ngIf=\"autoupload === false\"\n                            class=\"btn\"\n                            (click)=\"upload(file.uploadId)\"\n                            [attr.disabled]=\"file.status !== 'added' && file.status !== 'paused' ? 'disabled' : null\"\n                            [class.btn-default]=\"!(invalid && (dirty || touched))\"\n                            [class.btn-danger]=\"invalid && (dirty || touched)\">\n                            <span [class]=\"IconUpload\"></span> {{ buttonupload ? buttonupload : (lngResourceService.GetString(validationKeyService.UploadButtonUpload) | async) }}\n                        </a>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <p\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"help-block\">\n            {{ helptext }}\n        </p>\n        <div\n            class=\"help-block help-block-error\"\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n            {{ GetErrorMessage() | async }}\n        </div>\n    </div>\n</div>\n", styles: [".upload-component .upload-input{position:relative}.upload-component .custom-file>i{margin-right:15px}.upload-component .custom-file .custom-file-input{inset:0;position:absolute;overflow:hidden;z-index:2;width:100%;margin:0;display:inline-block;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}.upload-component .upload-progress .progress{height:100%}.upload-component .upload-progress .progress .progress-text{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);display:table-cell;line-height:34px;height:34px;color:#000}.dropzone{min-height:120px;width:100%;text-align:center;border-style:dashed;border-width:2px;padding-top:50px;padding-bottom:50px;position:relative}.dropzone.active{background-color:#add8e6}.dropzone .progress{border-radius:0}.dropzone .progress .progress-bar{display:flex;justify-content:center;text-align:center;flex-direction:column;border-top-right-radius:0;border-bottom-right-radius:0}.dropzone .progress .progress-bar .progress-text{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);display:table-cell;line-height:34px;height:34px;color:#000}.dropzone input[type=file]{position:absolute;inset:0;opacity:0;width:100%}.dropzone .dropzone-uploadstates{max-width:450px;margin-left:auto;margin-right:auto;margin-top:6px;width:80%}\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"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "toLabelHeight": SacToLabelHeightPipe, "testingattribute": i5.SacTestingAttributePipe, "toLabelWidthCss": SacToLabelWidthCssPipe, "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: [
@@ -2290,7 +2272,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => SacUploadMultipleComponent),
                         },
-                    ], template: "<div\n    id=\"{{ name }}\"\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}_uploadinput\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\n        <div class=\"upload-component\">\n            <div class=\"row\">\n                <div\n                    class=\"col-xs-12\"\n                    [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n                    <div\n                        class=\"btn-group\"\n                        [class.btn-group-sm]=\"componentHeight === ControlHeight.Small\"\n                        [class.btn-group-lg]=\"componentHeight === ControlHeight.Large\">\n                        <div\n                            class=\"btn upload-input custom-file\"\n                            [class.disabled]=\"maxfiles > 0 && uploads.length >= maxfiles\"\n                            [class.btn-default]=\"!(invalid && (dirty || touched))\"\n                            [class.btn-danger]=\"invalid && (dirty || touched)\">\n                            <i [class]=\"IconBrowse\"></i>\n                            <span class=\"upload-browse\">{{ buttonbrowse ? buttonbrowse : (lngResourceService.GetString(validationKeyService.UploadButtonBrowse) | async) }}</span>\n                            <input\n                                id=\"{{ name }}_uploadinput\"\n                                type=\"file\"\n                                class=\"custom-file-input\"\n                                #files\n                                (click)=\"files.value = ''\"\n                                (uploadxState)=\"onUpload($event)\"\n                                multiple\n                                [disabled]=\"maxfiles > 0 && uploads.length >= maxfiles\" />\n                        </div>\n\n                        <div\n                            class=\"btn-group\"\n                            [class.btn-group-sm]=\"componentHeight === ControlHeight.Small\"\n                            [class.btn-group-lg]=\"componentHeight === ControlHeight.Large\">\n                            <!-- image-preview-clear button -->\n                            <a\n                                class=\"btn\"\n                                (click)=\"cancelAll()\"\n                                [attr.disabled]=\"HasQueueItem() === false ? 'disabled' : null\"\n                                [class.btn-default]=\"!(invalid && (dirty || touched))\"\n                                [class.btn-danger]=\"invalid && (dirty || touched)\">\n                                <span [class]=\"IconDelete\"></span>\n                            </a>\n                            <a\n                                *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && IsPaused() === false)\"\n                                class=\"btn\"\n                                (click)=\"pauseAll()\"\n                                [attr.disabled]=\"IsUploading() === false ? 'disabled' : null\"\n                                [class.btn-default]=\"!(invalid && (dirty || touched))\"\n                                [class.btn-danger]=\"invalid && (dirty || touched)\">\n                                <span [class]=\"IconPause\"></span>\n                            </a>\n                            <a\n                                *ngIf=\"autoupload && enablepause && IsPaused() === true\"\n                                class=\"btn\"\n                                (click)=\"uploadAll()\"\n                                [class.btn-default]=\"!(invalid && (dirty || touched))\"\n                                [class.btn-danger]=\"invalid && (dirty || touched)\">\n                                <span [class]=\"IconContinue\"></span>\n                            </a>\n                            <a\n                                *ngIf=\"autoupload === false\"\n                                class=\"btn\"\n                                (click)=\"uploadAll()\"\n                                [attr.disabled]=\"IsStateToUpload() === false ? 'disabled' : null\"\n                                [class.btn-default]=\"!(invalid && (dirty || touched))\"\n                                [class.btn-danger]=\"invalid && (dirty || touched)\">\n                                <span [class]=\"IconUpload\"></span>\n                                {{ buttonupload ? buttonupload : (lngResourceService.GetString(validationKeyService.UploadButtonUpload) | async) }}\n                            </a>\n                        </div>\n                    </div>\n\n                    <div\n                        *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n                        class=\"form-control-static\"\n                        style=\"margin-left: 5px\">\n                        <sac-tooltip\n                            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                            [tooltiptext]=\"helptext\"\n                            [inlinemode]=\"true\">\n                            <span\n                                [class]=\"HelptextTooltipIcon\"\n                                style=\"margin-left: 5px; margin-right: 5px\">\n                            </span>\n                        </sac-tooltip>\n                    </div>\n                </div>\n            </div>\n\n            <div\n                *ngFor=\"let file of uploads\"\n                style=\"margin-top: 5px\">\n                <div\n                    class=\"input-group upload-component upload-multiple\"\n                    [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                    [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\n                    <div class=\"form-control upload-progress\">\n                        <div class=\"progress\">\n                            <div\n                                class=\"progress-bar\"\n                                [class.progress-bar-success]=\"file.progress === 100\"\n                                role=\"progressbar\"\n                                [attr.aria-valuenow]=\"file.progress\"\n                                aria-valuemin=\"0\"\n                                aria-valuemax=\"100\"\n                                [style.width.%]=\"file.progress\">\n                                <span class=\"progress-text text-dark\">{{ file.name }}</span>\n                            </div>\n                        </div>\n                    </div>\n                    <div\n                        class=\"input-group-btn\"\n                        [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                        [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\n                        <!-- image-preview-clear button -->\n                        <a\n                            class=\"btn\"\n                            (click)=\"cancel(file.uploadId)\"\n                            [class.btn-default]=\"!(invalid && (dirty || touched))\"\n                            [class.btn-danger]=\"invalid && (dirty || touched)\">\n                            <span [class]=\"IconDelete\"></span>\n                        </a>\n                        <a\n                            *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && file.status !== 'paused')\"\n                            class=\"btn\"\n                            (click)=\"pause(file.uploadId)\"\n                            [attr.disabled]=\"file.status !== 'uploading' ? 'disabled' : null\"\n                            [class.btn-default]=\"!(invalid && (dirty || touched))\"\n                            [class.btn-danger]=\"invalid && (dirty || touched)\">\n                            <span [class]=\"IconPause\"></span>\n                        </a>\n                        <a\n                            *ngIf=\"autoupload && enablepause && file.status === 'paused'\"\n                            class=\"btn\"\n                            (click)=\"upload(file.uploadId)\"\n                            [class.btn-default]=\"!(invalid && (dirty || touched))\"\n                            [class.btn-danger]=\"invalid && (dirty || touched)\">\n                            <span [class]=\"IconContinue\"></span>\n                        </a>\n                        <a\n                            *ngIf=\"autoupload === false\"\n                            class=\"btn\"\n                            (click)=\"upload(file.uploadId)\"\n                            [attr.disabled]=\"file.status !== 'added' && file.status !== 'paused' ? 'disabled' : null\"\n                            [class.btn-default]=\"!(invalid && (dirty || touched))\"\n                            [class.btn-danger]=\"invalid && (dirty || touched)\">\n                            <span [class]=\"IconUpload\"></span> {{ buttonupload ? buttonupload : (lngResourceService.GetString(validationKeyService.UploadButtonUpload) | async) }}\n                        </a>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <p\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"help-block\">\n            {{ helptext }}\n        </p>\n        <div\n            class=\"help-block help-block-error\"\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n            {{ GetErrorMessage() | async }}\n        </div>\n    </div>\n</div>\n", styles: [".upload-component .upload-input{position:relative}.upload-component .custom-file>i{margin-right:15px}.upload-component .custom-file .custom-file-input{inset:0;position:absolute;overflow:hidden;z-index:2;width:100%;margin:0;display:inline-block;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}.upload-component .upload-progress .progress{height:100%}.upload-component .upload-progress .progress .progress-text{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);display:table-cell;line-height:34px;height:34px;color:#000}.dropzone{min-height:120px;width:100%;text-align:center;border-style:dashed;border-width:2px;padding-top:50px;padding-bottom:50px;position:relative}.dropzone.active{background-color:#add8e6}.dropzone .progress{border-radius:0}.dropzone .progress .progress-bar{display:flex;justify-content:center;text-align:center;flex-direction:column;border-top-right-radius:0;border-bottom-right-radius:0}.dropzone .progress .progress-bar .progress-text{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);display:table-cell;line-height:34px;height:34px;color:#000}.dropzone input[type=file]{position:absolute;inset:0;opacity:0;width:100%}.dropzone .dropzone-uploadstates{max-width:450px;margin-left:auto;margin-right:auto;margin-top:6px;width:80%}\n"] }]
+                    ], template: "<div\n    id=\"{{ name }}\"\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}_uploadinput\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\n        <div class=\"upload-component\">\n            <div class=\"row\">\n                <div\n                    class=\"col-xs-12\"\n                    [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n                    <div\n                        class=\"btn-group\"\n                        [class.btn-group-sm]=\"componentHeight === ControlHeight.Small\"\n                        [class.btn-group-lg]=\"componentHeight === ControlHeight.Large\">\n                        <div\n                            class=\"btn upload-input custom-file\"\n                            [class.disabled]=\"maxfiles > 0 && uploads.length >= maxfiles\"\n                            [class.btn-default]=\"!(invalid && (dirty || touched))\"\n                            [class.btn-danger]=\"invalid && (dirty || touched)\">\n                            <i [class]=\"IconBrowse\"></i>\n                            <span class=\"upload-browse\">{{ buttonbrowse ? buttonbrowse : (lngResourceService.GetString(validationKeyService.UploadButtonBrowse) | async) }}</span>\n                            <input\n                                id=\"{{ name }}_uploadinput\"\n                                type=\"file\"\n                                class=\"custom-file-input\"\n                                #files\n                                (click)=\"files.value = ''\"\n                                (uploadxState)=\"onUpload($event)\"\n                                multiple\n                                [disabled]=\"maxfiles > 0 && uploads.length >= maxfiles\" />\n                        </div>\n\n                        <div\n                            class=\"btn-group\"\n                            [class.btn-group-sm]=\"componentHeight === ControlHeight.Small\"\n                            [class.btn-group-lg]=\"componentHeight === ControlHeight.Large\">\n                            <!-- image-preview-clear button -->\n                            <a\n                                class=\"btn\"\n                                (click)=\"cancelAll()\"\n                                [attr.disabled]=\"HasQueueItem() === false ? 'disabled' : null\"\n                                [class.btn-default]=\"!(invalid && (dirty || touched))\"\n                                [class.btn-danger]=\"invalid && (dirty || touched)\">\n                                <span [class]=\"IconDelete\"></span>\n                            </a>\n                            <a\n                                *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && IsPaused() === false)\"\n                                class=\"btn\"\n                                (click)=\"pauseAll()\"\n                                [attr.disabled]=\"IsUploading() === false ? 'disabled' : null\"\n                                [class.btn-default]=\"!(invalid && (dirty || touched))\"\n                                [class.btn-danger]=\"invalid && (dirty || touched)\">\n                                <span [class]=\"IconPause\"></span>\n                            </a>\n                            <a\n                                *ngIf=\"autoupload && enablepause && IsPaused() === true\"\n                                class=\"btn\"\n                                (click)=\"uploadAll()\"\n                                [class.btn-default]=\"!(invalid && (dirty || touched))\"\n                                [class.btn-danger]=\"invalid && (dirty || touched)\">\n                                <span [class]=\"IconContinue\"></span>\n                            </a>\n                            <a\n                                *ngIf=\"autoupload === false\"\n                                class=\"btn\"\n                                (click)=\"uploadAll()\"\n                                [attr.disabled]=\"IsStateToUpload() === false ? 'disabled' : null\"\n                                [class.btn-default]=\"!(invalid && (dirty || touched))\"\n                                [class.btn-danger]=\"invalid && (dirty || touched)\">\n                                <span [class]=\"IconUpload\"></span>\n                                {{ buttonupload ? buttonupload : (lngResourceService.GetString(validationKeyService.UploadButtonUpload) | async) }}\n                            </a>\n                        </div>\n                    </div>\n\n                    <div\n                        *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n                        class=\"form-control-static\"\n                        style=\"margin-left: 5px\">\n                        <sac-tooltip\n                            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                            [tooltiptext]=\"helptext\"\n                            [inlinemode]=\"true\">\n                            <span\n                                [class]=\"HelptextTooltipIcon\"\n                                style=\"margin-left: 5px; margin-right: 5px\">\n                            </span>\n                        </sac-tooltip>\n                    </div>\n                </div>\n            </div>\n\n            <div\n                *ngFor=\"let file of uploads\"\n                style=\"margin-top: 5px\">\n                <div\n                    class=\"input-group upload-component upload-multiple\"\n                    [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                    [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\n                    <div class=\"form-control upload-progress\">\n                        <div class=\"progress\">\n                            <div\n                                class=\"progress-bar\"\n                                [class.progress-bar-success]=\"file.progress === 100\"\n                                role=\"progressbar\"\n                                [attr.aria-valuenow]=\"file.progress\"\n                                aria-valuemin=\"0\"\n                                aria-valuemax=\"100\"\n                                [style.width.%]=\"file.progress\">\n                                <span class=\"progress-text text-dark\">{{ file.name }}</span>\n                            </div>\n                        </div>\n                    </div>\n                    <div\n                        class=\"input-group-btn\"\n                        [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                        [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\n                        <!-- image-preview-clear button -->\n                        <a\n                            class=\"btn\"\n                            (click)=\"cancel(file.uploadId)\"\n                            [class.btn-default]=\"!(invalid && (dirty || touched))\"\n                            [class.btn-danger]=\"invalid && (dirty || touched)\">\n                            <span [class]=\"IconDelete\"></span>\n                        </a>\n                        <a\n                            *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && file.status !== 'paused')\"\n                            class=\"btn\"\n                            (click)=\"pause(file.uploadId)\"\n                            [attr.disabled]=\"file.status !== 'uploading' ? 'disabled' : null\"\n                            [class.btn-default]=\"!(invalid && (dirty || touched))\"\n                            [class.btn-danger]=\"invalid && (dirty || touched)\">\n                            <span [class]=\"IconPause\"></span>\n                        </a>\n                        <a\n                            *ngIf=\"autoupload && enablepause && file.status === 'paused'\"\n                            class=\"btn\"\n                            (click)=\"upload(file.uploadId)\"\n                            [class.btn-default]=\"!(invalid && (dirty || touched))\"\n                            [class.btn-danger]=\"invalid && (dirty || touched)\">\n                            <span [class]=\"IconContinue\"></span>\n                        </a>\n                        <a\n                            *ngIf=\"autoupload === false\"\n                            class=\"btn\"\n                            (click)=\"upload(file.uploadId)\"\n                            [attr.disabled]=\"file.status !== 'added' && file.status !== 'paused' ? 'disabled' : null\"\n                            [class.btn-default]=\"!(invalid && (dirty || touched))\"\n                            [class.btn-danger]=\"invalid && (dirty || touched)\">\n                            <span [class]=\"IconUpload\"></span> {{ buttonupload ? buttonupload : (lngResourceService.GetString(validationKeyService.UploadButtonUpload) | async) }}\n                        </a>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <p\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"help-block\">\n            {{ helptext }}\n        </p>\n        <div\n            class=\"help-block help-block-error\"\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n            {{ GetErrorMessage() | async }}\n        </div>\n    </div>\n</div>\n", styles: [".upload-component .upload-input{position:relative}.upload-component .custom-file>i{margin-right:15px}.upload-component .custom-file .custom-file-input{inset:0;position:absolute;overflow:hidden;z-index:2;width:100%;margin:0;display:inline-block;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}.upload-component .upload-progress .progress{height:100%}.upload-component .upload-progress .progress .progress-text{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);display:table-cell;line-height:34px;height:34px;color:#000}.dropzone{min-height:120px;width:100%;text-align:center;border-style:dashed;border-width:2px;padding-top:50px;padding-bottom:50px;position:relative}.dropzone.active{background-color:#add8e6}.dropzone .progress{border-radius:0}.dropzone .progress .progress-bar{display:flex;justify-content:center;text-align:center;flex-direction:column;border-top-right-radius:0;border-bottom-right-radius:0}.dropzone .progress .progress-bar .progress-text{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);display:table-cell;line-height:34px;height:34px;color:#000}.dropzone input[type=file]{position:absolute;inset:0;opacity:0;width:100%}.dropzone .dropzone-uploadstates{max-width:450px;margin-left:auto;margin-right:auto;margin-top:6px;width:80%}\n"] }]
         }], ctorParameters: function () { return [{ type: SacFormLayoutDirective, decorators: [{
                     type: Host
                 }, {
@@ -2303,8 +2285,18 @@ SACBootstrap3UploadModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0"
 SACBootstrap3UploadModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3UploadModule, declarations: [SacUploadComponent,
         SacUploadMultipleComponent,
         SacDropzoneSingleComponent,
-        SacDropzoneMultipleComponent], imports: [CommonModule, FormsModule, SACBootstrap3LayoutModule, SACBootstrap3TooltipModule], exports: [SacUploadComponent, SacUploadMultipleComponent, SacDropzoneSingleComponent, SacDropzoneMultipleComponent] });
-SACBootstrap3UploadModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3UploadModule, imports: [[CommonModule, FormsModule, SACBootstrap3LayoutModule, SACBootstrap3TooltipModule]] });
+        SacDropzoneMultipleComponent], imports: [CommonModule,
+        FormsModule,
+        SACBootstrap3LayoutModule,
+        SACBootstrap3TooltipModule,
+        SACCommonUtliltiesModule], exports: [SacUploadComponent, SacUploadMultipleComponent, SacDropzoneSingleComponent, SacDropzoneMultipleComponent] });
+SACBootstrap3UploadModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3UploadModule, imports: [[
+            CommonModule,
+            FormsModule,
+            SACBootstrap3LayoutModule,
+            SACBootstrap3TooltipModule,
+            SACCommonUtliltiesModule,
+        ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3UploadModule, decorators: [{
             type: NgModule,
             args: [{
@@ -2314,7 +2306,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                         SacDropzoneSingleComponent,
                         SacDropzoneMultipleComponent,
                     ],
-                    imports: [CommonModule, FormsModule, SACBootstrap3LayoutModule, SACBootstrap3TooltipModule],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        SACBootstrap3LayoutModule,
+                        SACBootstrap3TooltipModule,
+                        SACCommonUtliltiesModule,
+                    ],
                     exports: [SacUploadComponent, SacUploadMultipleComponent, SacDropzoneSingleComponent, SacDropzoneMultipleComponent],
                 }]
         }] });
@@ -2367,6 +2365,69 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                 args: ['class.form-horizontal']
             }] } });
 
+// #region Classes
+/**
+ * Directive to inherit an NgForm/NgForm from a parent component
+ */
+class SacInheritFormDirective extends SacFormCommon {
+    // #region Constructors
+    /**
+     * Construtor
+     * @param injector: injector to receive the NgForm instance
+     */
+    constructor(injector) {
+        super(injector.get(NgForm));
+    }
+}
+SacInheritFormDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacInheritFormDirective, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
+SacInheritFormDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: SacInheritFormDirective, selector: "[sacInheritForm]", providers: [
+        {
+            provide: SacFormDirective,
+            useFactory: SACFORM_FACTORY,
+            deps: [[new SkipSelf(), SacFormDirective]],
+        },
+        {
+            provide: ControlContainer,
+            useFactory: NGFORM_FACTORY,
+            deps: [NgForm],
+        },
+    ], exportAs: ["sacinheritform"], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacInheritFormDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[sacInheritForm]',
+                    exportAs: 'sacinheritform',
+                    providers: [
+                        {
+                            provide: SacFormDirective,
+                            useFactory: SACFORM_FACTORY,
+                            deps: [[new SkipSelf(), SacFormDirective]],
+                        },
+                        {
+                            provide: ControlContainer,
+                            useFactory: NGFORM_FACTORY,
+                            deps: [NgForm],
+                        },
+                    ],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }]; } });
+// #endregion Classes
+// #region Functions
+/**
+ * Factory Methode für NgForm
+ * @param form NgForm
+ */
+function NGFORM_FACTORY(form) {
+    return form;
+}
+/**
+ * Factory Methode für SacForm
+ * @param form NgFormular
+ */
+function SACFORM_FACTORY(form) {
+    return form;
+}
+
 class SacValidationSummaryComponent extends SacValidationSummaryCommon {
     // #region Constructors
     /**
@@ -2385,7 +2446,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\" [id]=\"name\">\n  <ul>\n    <li *ngFor=\"let error of formErrors\">\n      {{error | async}}\n    </li>\n  </ul>\n</div>\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 }] });
+    ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"alert alert-danger\"\n    role=\"alert\"\n    *ngIf=\"hasErrors\"\n    [id]=\"name\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <ul>\n        <li *ngFor=\"let error of formErrors\">{{ error | async }}</li>\n    </ul>\n</div>\n", directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "testingattribute": i5.SacTestingAttributePipe, "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: [
@@ -2394,7 +2455,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                             multi: true,
                             useExisting: SacValidationSummaryComponent,
                         },
-                    ], viewProviders: [{ provide: ControlContainer, useExisting: SacFormDirective }], template: "<div class=\"alert alert-danger\" role=\"alert\" *ngIf=\"hasErrors\" [id]=\"name\">\n  <ul>\n    <li *ngFor=\"let error of formErrors\">\n      {{error | async}}\n    </li>\n  </ul>\n</div>\n" }]
+                    ], viewProviders: [{ provide: ControlContainer, useExisting: SacFormDirective }], template: "<div\n    class=\"alert alert-danger\"\n    role=\"alert\"\n    *ngIf=\"hasErrors\"\n    [id]=\"name\"\n    [attr.data-e2e-key]=\"name | testingattribute : e2eidentifier\">\n    <ul>\n        <li *ngFor=\"let error of formErrors\">{{ error | async }}</li>\n    </ul>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: SacFormDirective, decorators: [{
                     type: Host
                 }, {
@@ -2404,18 +2465,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
 class SACBootstrap3ValidationSummaryModule {
 }
 SACBootstrap3ValidationSummaryModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3ValidationSummaryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SACBootstrap3ValidationSummaryModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3ValidationSummaryModule, declarations: [SacValidationSummaryComponent], imports: [CommonModule], exports: [SacValidationSummaryComponent] });
-SACBootstrap3ValidationSummaryModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3ValidationSummaryModule, imports: [[
-            CommonModule
-        ]] });
+SACBootstrap3ValidationSummaryModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3ValidationSummaryModule, declarations: [SacValidationSummaryComponent], imports: [CommonModule, SACCommonUtliltiesModule], exports: [SacValidationSummaryComponent] });
+SACBootstrap3ValidationSummaryModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3ValidationSummaryModule, imports: [[CommonModule, SACCommonUtliltiesModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3ValidationSummaryModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [SacValidationSummaryComponent],
-                    imports: [
-                        CommonModule
-                    ],
-                    exports: [SacValidationSummaryComponent]
+                    imports: [CommonModule, SACCommonUtliltiesModule],
+                    exports: [SacValidationSummaryComponent],
                 }]
         }] });
 
@@ -2450,84 +2507,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
 class SACBootstrap3WizardModule {
 }
 SACBootstrap3WizardModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3WizardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SACBootstrap3WizardModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3WizardModule, declarations: [SacWizardComponent, SacWizardItemComponent], imports: [CommonModule], exports: [SacWizardComponent, SacWizardItemComponent] });
-SACBootstrap3WizardModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3WizardModule, imports: [[
-            CommonModule
-        ]] });
+SACBootstrap3WizardModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3WizardModule, declarations: [SacWizardComponent, SacWizardItemComponent], imports: [CommonModule, SACCommonUtliltiesModule], exports: [SacWizardComponent, SacWizardItemComponent] });
+SACBootstrap3WizardModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3WizardModule, imports: [[CommonModule, SACCommonUtliltiesModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3WizardModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [SacWizardComponent, SacWizardItemComponent],
-                    imports: [
-                        CommonModule
-                    ],
-                    exports: [SacWizardComponent, SacWizardItemComponent]
+                    imports: [CommonModule, SACCommonUtliltiesModule],
+                    exports: [SacWizardComponent, SacWizardItemComponent],
                 }]
         }] });
 
-// #region Classes
-/**
- * Directive to inherit an NgForm/NgForm from a parent component
- */
-class SacInheritFormDirective extends SacFormCommon {
-    // #region Constructors
-    /**
-     * Construtor
-     * @param injector: injector to receive the NgForm instance
-     */
-    constructor(injector) {
-        super(injector.get(NgForm));
-    }
-}
-SacInheritFormDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacInheritFormDirective, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
-SacInheritFormDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: SacInheritFormDirective, selector: "[sacInheritForm]", providers: [
-        {
-            provide: SacFormDirective,
-            useFactory: SACFORM_FACTORY,
-            deps: [[new SkipSelf(), SacFormDirective]],
-        },
-        {
-            provide: ControlContainer,
-            useFactory: NGFORM_FACTORY,
-            deps: [NgForm],
-        },
-    ], exportAs: ["sacinheritform"], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacInheritFormDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[sacInheritForm]',
-                    exportAs: 'sacinheritform',
-                    providers: [
-                        {
-                            provide: SacFormDirective,
-                            useFactory: SACFORM_FACTORY,
-                            deps: [[new SkipSelf(), SacFormDirective]],
-                        },
-                        {
-                            provide: ControlContainer,
-                            useFactory: NGFORM_FACTORY,
-                            deps: [NgForm],
-                        },
-                    ],
-                }]
-        }], ctorParameters: function () { return [{ type: i0.Injector }]; } });
-// #endregion Classes
-// #region Functions
-/**
- * Factory Methode für NgForm
- * @param form NgForm
- */
-function NGFORM_FACTORY(form) {
-    return form;
-}
-/**
- * Factory Methode für SacForm
- * @param form NgFormular
- */
-function SACFORM_FACTORY(form) {
-    return form;
-}
-
 class SACBootstrap3FormModule {
 }
 SACBootstrap3FormModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3FormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -2550,5 +2540,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { NGFORM_FACTORY, SACBootstrap3ButtonModule, SACBootstrap3CheckboxModule, SACBootstrap3ConfirmModule, SACBootstrap3ContextmenuModule, SACBootstrap3DateTimeModule, SACBootstrap3DialogModule, SACBootstrap3FormModule, SACBootstrap3GridModule, SACBootstrap3InputModule, SACBootstrap3LayoutModule, SACBootstrap3ListModule, SACBootstrap3StaticLabelModule, SACBootstrap3TabsModule, SACBootstrap3TinyMceModule, SACBootstrap3TooltipModule, SACBootstrap3TreeviewModule, SACBootstrap3UploadModule, SACBootstrap3ValidationSummaryModule, SACBootstrap3WizardModule, SACFORM_FACTORY, 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, SacPagingComponent, SacRadiobuttonComponent, SacRadiobuttonsComponent, SacStaticFormContainerComponent, SacStaticLabelComponent, SacTabComponent, SacTabItemComponent, SacTimeComponent, SacTinyMceComponent, SacToControlHeightPipe, SacToControlWidthCssPipe, SacToLabelHeightPipe, SacToLabelWidthCssPipe, SacTooltipComponent, SacTreeviewComponent, SacUploadComponent, SacUploadMultipleComponent, SacValidationSummaryComponent, SacWizardComponent, SacWizardItemComponent, ServiceConfirm };
+export { NGFORM_FACTORY, SACBootstrap3ButtonModule, SACBootstrap3CheckboxModule, SACBootstrap3ConfirmModule, SACBootstrap3ContextmenuModule, SACBootstrap3DateTimeModule, SACBootstrap3DialogModule, SACBootstrap3FormModule, SACBootstrap3GridModule, SACBootstrap3InputModule, SACBootstrap3LayoutModule, SACBootstrap3ListModule, SACBootstrap3StaticLabelModule, SACBootstrap3TabsModule, SACBootstrap3TinyMceModule, SACBootstrap3TooltipModule, SACBootstrap3TreeviewModule, SACBootstrap3UploadModule, SACBootstrap3ValidationSummaryModule, SACBootstrap3WizardModule, SACFORM_FACTORY, 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, SacPagingComponent, SacRadiobuttonComponent, SacRadiobuttonsComponent, SacStaticFormContainerComponent, SacStaticLabelComponent, SacTabComponent, SacTabItemComponent, SacTimeComponent, SacTinyMceComponent, SacToControlHeightPipe, SacToControlWidthCssPipe, SacToLabelHeightPipe, SacToLabelWidthCssPipe, SacTooltipComponent, SacTreeviewComponent, SacUploadComponent, SacUploadMultipleComponent, SacValidationSummaryComponent, SacWizardComponent, SacWizardItemComponent, ServiceConfirm };
 //# sourceMappingURL=simpleangularcontrols-sac-bootstrap3.mjs.map