@simpleangularcontrols/sac-bootstrap3 13.0.0-rc.10 → 13.0.0-rc.12

package/fesm2015/simpleangularcontrols-sac-bootstrap3.mjs

@@ -1,8 +1,8 @@
 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, 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, SacTreeViewChildCommon, SacTreeViewCommon, SacTreeItemActionCommon, SacUploadSingleCommon, SacUploadMultipleCommon, SacFormCommon, SacValidationSummaryCommon, SacWizardItemCommon, SacWizardCommon } from '@simpleangularcontrols/sac-common';
+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 * as i3 from '@angular/common';
-import { CommonModule } 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 { forkJoin } from 'rxjs';
@@ -267,10 +267,10 @@ 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\">\r\n  <div\r\n    #container\r\n    (mouseenter)=\"ShowTooltip()\"\r\n    (mouseleave)=\"HideTooltip()\"\r\n    [style.display]=\"inlinemode ? 'inline' : null\"\r\n  >\r\n    <ng-content></ng-content>\r\n  </div>\r\n  <div *ngIf=\"IsTooltipVisible()\" #tooltip>\r\n    <div\r\n      [style.visibility]=\"IsTooltipContentVisible ? 'visible' : 'hidden'\"\r\n      class=\"tooltip in\"\r\n      style=\"display: block\"\r\n      [style.left.px]=\"LeftPos\"\r\n      [style.top.px]=\"TopPos\"\r\n      [class.top]=\"GetTooltipPosition() === TooltipPosition.top\"\r\n      [class.left]=\"GetTooltipPosition() === TooltipPosition.left\"\r\n      [class.right]=\"GetTooltipPosition() === TooltipPosition.right\"\r\n      [class.bottom]=\"GetTooltipPosition() === TooltipPosition.bottom\"\r\n    >\r\n      <div class=\"tooltip-arrow\"></div>\r\n      <div class=\"tooltip-inner\">{{tooltiptext}}</div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+SacTooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacTooltipComponent, selector: "sac-tooltip", usesInheritance: true, ngImport: i0, template: "<div [style.display]=\"inlinemode ? 'inline' : null\">\r\n    <div\r\n        #container\r\n        (mouseenter)=\"ShowTooltip()\"\r\n        (mouseleave)=\"HideTooltip()\"\r\n        [style.display]=\"inlinemode ? 'inline' : null\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n    <div\r\n        *ngIf=\"IsTooltipVisible()\"\r\n        #tooltip>\r\n        <div\r\n            [style.visibility]=\"IsTooltipContentVisible ? 'visible' : 'hidden'\"\r\n            class=\"tooltip in\"\r\n            style=\"display: block\"\r\n            [style.left.px]=\"LeftPos\"\r\n            [style.top.px]=\"TopPos\"\r\n            [class.top]=\"GetTooltipPosition() === TooltipPosition.top\"\r\n            [class.left]=\"GetTooltipPosition() === TooltipPosition.left\"\r\n            [class.right]=\"GetTooltipPosition() === TooltipPosition.right\"\r\n            [class.bottom]=\"GetTooltipPosition() === TooltipPosition.bottom\">\r\n            <div class=\"tooltip-arrow\"></div>\r\n            <div class=\"tooltip-inner\">{{ tooltiptext }}</div>\r\n        </div>\r\n    </div>\r\n</div>\r\n", directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacTooltipComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sac-tooltip', template: "<div [style.display]=\"inlinemode ? 'inline' : null\">\r\n  <div\r\n    #container\r\n    (mouseenter)=\"ShowTooltip()\"\r\n    (mouseleave)=\"HideTooltip()\"\r\n    [style.display]=\"inlinemode ? 'inline' : null\"\r\n  >\r\n    <ng-content></ng-content>\r\n  </div>\r\n  <div *ngIf=\"IsTooltipVisible()\" #tooltip>\r\n    <div\r\n      [style.visibility]=\"IsTooltipContentVisible ? 'visible' : 'hidden'\"\r\n      class=\"tooltip in\"\r\n      style=\"display: block\"\r\n      [style.left.px]=\"LeftPos\"\r\n      [style.top.px]=\"TopPos\"\r\n      [class.top]=\"GetTooltipPosition() === TooltipPosition.top\"\r\n      [class.left]=\"GetTooltipPosition() === TooltipPosition.left\"\r\n      [class.right]=\"GetTooltipPosition() === TooltipPosition.right\"\r\n      [class.bottom]=\"GetTooltipPosition() === TooltipPosition.bottom\"\r\n    >\r\n      <div class=\"tooltip-arrow\"></div>\r\n      <div class=\"tooltip-inner\">{{tooltiptext}}</div>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+            args: [{ selector: 'sac-tooltip', template: "<div [style.display]=\"inlinemode ? 'inline' : null\">\r\n    <div\r\n        #container\r\n        (mouseenter)=\"ShowTooltip()\"\r\n        (mouseleave)=\"HideTooltip()\"\r\n        [style.display]=\"inlinemode ? 'inline' : null\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n    <div\r\n        *ngIf=\"IsTooltipVisible()\"\r\n        #tooltip>\r\n        <div\r\n            [style.visibility]=\"IsTooltipContentVisible ? 'visible' : 'hidden'\"\r\n            class=\"tooltip in\"\r\n            style=\"display: block\"\r\n            [style.left.px]=\"LeftPos\"\r\n            [style.top.px]=\"TopPos\"\r\n            [class.top]=\"GetTooltipPosition() === TooltipPosition.top\"\r\n            [class.left]=\"GetTooltipPosition() === TooltipPosition.left\"\r\n            [class.right]=\"GetTooltipPosition() === TooltipPosition.right\"\r\n            [class.bottom]=\"GetTooltipPosition() === TooltipPosition.bottom\">\r\n            <div class=\"tooltip-arrow\"></div>\r\n            <div class=\"tooltip-inner\">{{ tooltiptext }}</div>\r\n        </div>\r\n    </div>\r\n</div>\r\n" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; } });
 
 class SACBootstrap3TooltipModule {
@@ -310,7 +310,7 @@ SacCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             useExisting: forwardRef(() => SacCheckboxComponent),
             multi: true,
         },
-    ], usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"row\"\r\n  [class.form-group]=\"!stacked\"\r\n  [class.has-error]=\"invalid && (dirty || touched)\"\r\n  [ngClass]=\"componentHeight | toLabelHeight\"\r\n>\r\n  <label\r\n    *ngIf=\"!disablelabel && !stacked\"\r\n    for=\"{{name}}\"\r\n    class=\"col-xs-12 control-label\"\r\n    [ngClass]=\"[!disablelabel && !stacked ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    >{{label}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n    >\r\n      <span\r\n        [class]=\"HelptextTooltipIcon\"\r\n        style=\"margin-left: 5px\"\r\n      ></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-xs-12\"\r\n    [ngClass]=\"[!disablelabel && !stacked ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"checkbox\"\r\n      [class.checkbox-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.checkbox-lg]=\"componentHeight === ControlHeight.Large\"\r\n    >\r\n      <label for=\"{{name}}\">\r\n        <input\r\n          id=\"{{name}}\"\r\n          name=\"{{name}}\"\r\n          type=\"checkbox\"\r\n          class=\"visible-checkbox\"\r\n          [checked]=\"value\"\r\n          [disabled]=\"isdisabled\"\r\n          (blur)=\"onTouch()\"\r\n          (change)=\"setValue($event.target.checked)\"\r\n        />\r\n        <ng-container *ngIf=\"checkboxtext\"\r\n          >&nbsp;<span>{{checkboxtext}}</span></ng-container\r\n        >\r\n      </label>\r\n    </div>\r\n    <p *ngIf=\"helptextmode === 'text' && helptext\" class=\"help-block\">\r\n      {{helptext}}\r\n    </p>\r\n  </div>\r\n</div>\r\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\r\n    class=\"row\"\r\n    [class.form-group]=\"!stacked\"\r\n    [class.has-error]=\"invalid && (dirty || touched)\"\r\n    [ngClass]=\"componentHeight | toLabelHeight\">\r\n    <label\r\n        *ngIf=\"!disablelabel && !stacked\"\r\n        for=\"{{ name }}\"\r\n        class=\"col-xs-12 control-label\"\r\n        [ngClass]=\"[!disablelabel && !stacked ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\">\r\n        <span class=\"text\">{{ label }}</span>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [class]=\"HelptextTooltipIcon\"\r\n                style=\"margin-left: 5px\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-xs-12\"\r\n        [ngClass]=\"[!disablelabel && !stacked ? (this.labelSizes | toControlWidthCss) : '']\">\r\n        <div\r\n            class=\"checkbox\"\r\n            [class.checkbox-sm]=\"componentHeight === ControlHeight.Small\"\r\n            [class.checkbox-lg]=\"componentHeight === ControlHeight.Large\">\r\n            <label for=\"{{ name }}\">\r\n                <input\r\n                    id=\"{{ name }}\"\r\n                    name=\"{{ name }}\"\r\n                    type=\"checkbox\"\r\n                    class=\"visible-checkbox\"\r\n                    [checked]=\"value\"\r\n                    [disabled]=\"isdisabled\"\r\n                    (blur)=\"onTouch()\"\r\n                    (change)=\"setValue($event.target.checked)\" />\r\n                <ng-container *ngIf=\"checkboxtext\">\r\n                    <span>{{ checkboxtext }}</span>\r\n                </ng-container>\r\n            </label>\r\n\r\n            <div\r\n                *ngIf=\"helptextmode === 'tooltip' && helptext && (disablelabel || stacked)\"\r\n                class=\"form-control-static\"\r\n                style=\"display: inline\">\r\n                <sac-tooltip\r\n                    [tooltiptext]=\"helptext\"\r\n                    [inlinemode]=\"true\">\r\n                    <span\r\n                        [class]=\"HelptextTooltipIcon\"\r\n                        style=\"margin-left: 5px; margin-right: 5px\">\r\n                    </span>\r\n                </sac-tooltip>\r\n            </div>\r\n        </div>\r\n        <p\r\n            *ngIf=\"helptextmode === 'text' && helptext\"\r\n            class=\"help-block\">\r\n            {{ helptext }}\r\n        </p>\r\n    </div>\r\n</div>\r\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 } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacCheckboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sac-checkbox', providers: [
@@ -324,7 +324,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                             useExisting: forwardRef(() => SacCheckboxComponent),
                             multi: true,
                         },
-                    ], template: "<div\r\n  class=\"row\"\r\n  [class.form-group]=\"!stacked\"\r\n  [class.has-error]=\"invalid && (dirty || touched)\"\r\n  [ngClass]=\"componentHeight | toLabelHeight\"\r\n>\r\n  <label\r\n    *ngIf=\"!disablelabel && !stacked\"\r\n    for=\"{{name}}\"\r\n    class=\"col-xs-12 control-label\"\r\n    [ngClass]=\"[!disablelabel && !stacked ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    >{{label}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n    >\r\n      <span\r\n        [class]=\"HelptextTooltipIcon\"\r\n        style=\"margin-left: 5px\"\r\n      ></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-xs-12\"\r\n    [ngClass]=\"[!disablelabel && !stacked ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"checkbox\"\r\n      [class.checkbox-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.checkbox-lg]=\"componentHeight === ControlHeight.Large\"\r\n    >\r\n      <label for=\"{{name}}\">\r\n        <input\r\n          id=\"{{name}}\"\r\n          name=\"{{name}}\"\r\n          type=\"checkbox\"\r\n          class=\"visible-checkbox\"\r\n          [checked]=\"value\"\r\n          [disabled]=\"isdisabled\"\r\n          (blur)=\"onTouch()\"\r\n          (change)=\"setValue($event.target.checked)\"\r\n        />\r\n        <ng-container *ngIf=\"checkboxtext\"\r\n          >&nbsp;<span>{{checkboxtext}}</span></ng-container\r\n        >\r\n      </label>\r\n    </div>\r\n    <p *ngIf=\"helptextmode === 'text' && helptext\" class=\"help-block\">\r\n      {{helptext}}\r\n    </p>\r\n  </div>\r\n</div>\r\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\r\n    class=\"row\"\r\n    [class.form-group]=\"!stacked\"\r\n    [class.has-error]=\"invalid && (dirty || touched)\"\r\n    [ngClass]=\"componentHeight | toLabelHeight\">\r\n    <label\r\n        *ngIf=\"!disablelabel && !stacked\"\r\n        for=\"{{ name }}\"\r\n        class=\"col-xs-12 control-label\"\r\n        [ngClass]=\"[!disablelabel && !stacked ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\">\r\n        <span class=\"text\">{{ label }}</span>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [class]=\"HelptextTooltipIcon\"\r\n                style=\"margin-left: 5px\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-xs-12\"\r\n        [ngClass]=\"[!disablelabel && !stacked ? (this.labelSizes | toControlWidthCss) : '']\">\r\n        <div\r\n            class=\"checkbox\"\r\n            [class.checkbox-sm]=\"componentHeight === ControlHeight.Small\"\r\n            [class.checkbox-lg]=\"componentHeight === ControlHeight.Large\">\r\n            <label for=\"{{ name }}\">\r\n                <input\r\n                    id=\"{{ name }}\"\r\n                    name=\"{{ name }}\"\r\n                    type=\"checkbox\"\r\n                    class=\"visible-checkbox\"\r\n                    [checked]=\"value\"\r\n                    [disabled]=\"isdisabled\"\r\n                    (blur)=\"onTouch()\"\r\n                    (change)=\"setValue($event.target.checked)\" />\r\n                <ng-container *ngIf=\"checkboxtext\">\r\n                    <span>{{ checkboxtext }}</span>\r\n                </ng-container>\r\n            </label>\r\n\r\n            <div\r\n                *ngIf=\"helptextmode === 'tooltip' && helptext && (disablelabel || stacked)\"\r\n                class=\"form-control-static\"\r\n                style=\"display: inline\">\r\n                <sac-tooltip\r\n                    [tooltiptext]=\"helptext\"\r\n                    [inlinemode]=\"true\">\r\n                    <span\r\n                        [class]=\"HelptextTooltipIcon\"\r\n                        style=\"margin-left: 5px; margin-right: 5px\">\r\n                    </span>\r\n                </sac-tooltip>\r\n            </div>\r\n        </div>\r\n        <p\r\n            *ngIf=\"helptextmode === 'text' && helptext\"\r\n            class=\"help-block\">\r\n            {{ helptext }}\r\n        </p>\r\n    </div>\r\n</div>\r\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
@@ -356,7 +356,7 @@ SacRadiobuttonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
             useExisting: forwardRef(() => SacRadiobuttonsComponent),
             multi: true,
         },
-    ], usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"row form-group\"\r\n  [class.has-error]=\"invalid && (dirty || touched)\"\r\n  [ngClass]=\"componentHeight | toLabelHeight\"\r\n>\r\n  <label\r\n    *ngIf=\"disablelabel === false\"\r\n    for=\"{{name}}\"\r\n    class=\"col-xs-12 control-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    >{{label}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n    >\r\n      <span\r\n        [class]=\"HelptextTooltipIcon\"\r\n        style=\"margin-left: 5px\"\r\n      ></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-xs-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div>\r\n      <ng-content></ng-content>\r\n    </div>\r\n    <p *ngIf=\"helptextmode === 'text' && helptext\" class=\"help-block\">\r\n      {{helptext}}\r\n    </p>\r\n  </div>\r\n</div>\r\n", components: [{ type: SacTooltipComponent, selector: "sac-tooltip" }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "toLabelHeight": SacToLabelHeightPipe, "toLabelWidthCss": SacToLabelWidthCssPipe, "toControlWidthCss": SacToControlWidthCssPipe } });
+    ], usesInheritance: true, ngImport: i0, template: "<div\r\n    class=\"row form-group\"\r\n    [class.has-error]=\"invalid && (dirty || touched)\"\r\n    [ngClass]=\"componentHeight | toLabelHeight\">\r\n    <label\r\n        *ngIf=\"disablelabel === false\"\r\n        for=\"{{ name }}\"\r\n        class=\"col-xs-12 control-label\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\">\r\n        <span class=\"text\">{{ label }}</span>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [class]=\"HelptextTooltipIcon\"\r\n                style=\"margin-left: 5px\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-xs-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\r\n        <div>\r\n            <ng-content></ng-content>\r\n        </div>\r\n        <p\r\n            *ngIf=\"helptextmode === 'text' && helptext\"\r\n            class=\"help-block\">\r\n            {{ helptext }}\r\n        </p>\r\n    </div>\r\n</div>\r\n", components: [{ type: SacTooltipComponent, selector: "sac-tooltip" }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "toLabelHeight": SacToLabelHeightPipe, "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: [
@@ -370,7 +370,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                             useExisting: forwardRef(() => SacRadiobuttonsComponent),
                             multi: true,
                         },
-                    ], template: "<div\r\n  class=\"row form-group\"\r\n  [class.has-error]=\"invalid && (dirty || touched)\"\r\n  [ngClass]=\"componentHeight | toLabelHeight\"\r\n>\r\n  <label\r\n    *ngIf=\"disablelabel === false\"\r\n    for=\"{{name}}\"\r\n    class=\"col-xs-12 control-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    >{{label}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n    >\r\n      <span\r\n        [class]=\"HelptextTooltipIcon\"\r\n        style=\"margin-left: 5px\"\r\n      ></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-xs-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div>\r\n      <ng-content></ng-content>\r\n    </div>\r\n    <p *ngIf=\"helptextmode === 'text' && helptext\" class=\"help-block\">\r\n      {{helptext}}\r\n    </p>\r\n  </div>\r\n</div>\r\n" }]
+                    ], template: "<div\r\n    class=\"row form-group\"\r\n    [class.has-error]=\"invalid && (dirty || touched)\"\r\n    [ngClass]=\"componentHeight | toLabelHeight\">\r\n    <label\r\n        *ngIf=\"disablelabel === false\"\r\n        for=\"{{ name }}\"\r\n        class=\"col-xs-12 control-label\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\">\r\n        <span class=\"text\">{{ label }}</span>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [class]=\"HelptextTooltipIcon\"\r\n                style=\"margin-left: 5px\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-xs-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\r\n        <div>\r\n            <ng-content></ng-content>\r\n        </div>\r\n        <p\r\n            *ngIf=\"helptextmode === 'text' && helptext\"\r\n            class=\"help-block\">\r\n            {{ helptext }}\r\n        </p>\r\n    </div>\r\n</div>\r\n" }]
         }], ctorParameters: function () {
         return [{ type: SacFormLayoutDirective, decorators: [{
                         type: Host
@@ -380,19 +380,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
     } });
 
 class SacRadiobuttonComponent extends SacRadiobuttonCommon {
-    constructor(sacRadioButtons) {
-        super(sacRadioButtons);
+    // #region Constructors
+    constructor(sacRadioButtons, formLayout, injector) {
+        super(sacRadioButtons, formLayout, injector);
     }
 }
-SacRadiobuttonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacRadiobuttonComponent, deps: [{ token: SacRadiobuttonsComponent, host: true }], target: i0.ɵɵFactoryTarget.Component });
-SacRadiobuttonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacRadiobuttonComponent, selector: "sac-radiobutton", usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"radio\"\r\n  *ngIf=\"hidden===false\"\r\n  [class.radio-sm]=\"componentHeight === ControlHeight.Small\"\r\n  [class.radio-lg]=\"componentHeight === ControlHeight.Large\"\r\n>\r\n  <label for=\"{{getName}}_{{getIndex}}\">\r\n    <input\r\n      id=\"{{getName}}_{{getIndex}}\"\r\n      name=\"{{getName}}\"\r\n      type=\"radio\"\r\n      [value]=\"value\"\r\n      [checked]=\"checked\"\r\n      (change)=\"ChangeEvent()\"\r\n      [disabled]=\"isDisabled\"\r\n    />\r\n    <ng-template\r\n      *ngTemplateOutlet=\"labeltemplate || defaultItemLabelTemplate;context:{ label: label }\"\r\n    >\r\n    </ng-template>\r\n  </label>\r\n</div>\r\n\r\n<ng-template #defaultItemLabelTemplate let-label=\"label\"\r\n  >&nbsp;<span>{{label}}</span></ng-template\r\n>\r\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"], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+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\r\n    class=\"radio\"\r\n    *ngIf=\"hidden === false\"\r\n    [class.radio-sm]=\"componentHeight === ControlHeight.Small\"\r\n    [class.radio-lg]=\"componentHeight === ControlHeight.Large\">\r\n    <label for=\"{{ getName }}_{{ getIndex }}\">\r\n        <input\r\n            id=\"{{ getName }}_{{ getIndex }}\"\r\n            name=\"{{ getName }}\"\r\n            type=\"radio\"\r\n            [value]=\"value\"\r\n            [checked]=\"checked\"\r\n            (change)=\"ChangeEvent()\"\r\n            [disabled]=\"isDisabled\" />\r\n        <ng-template *ngTemplateOutlet=\"labeltemplate || defaultItemLabelTemplate; context: { label: label }\"></ng-template>\r\n        <p\r\n            *ngIf=\"helptextmode === 'text' && helptext\"\r\n            class=\"help-block\">\r\n            {{ helptext }}\r\n        </p>\r\n    </label>\r\n\r\n    <div\r\n        *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n        class=\"form-control-static\"\r\n        style=\"display: inline\">\r\n        <sac-tooltip\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [class]=\"HelptextTooltipIcon\"\r\n                style=\"margin-left: 5px; margin-right: 5px\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </div>\r\n</div>\r\n\r\n<ng-template\r\n    #defaultItemLabelTemplate\r\n    let-label=\"label\">\r\n    <span>{{ label }}</span>\r\n</ng-template>\r\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\r\n  class=\"radio\"\r\n  *ngIf=\"hidden===false\"\r\n  [class.radio-sm]=\"componentHeight === ControlHeight.Small\"\r\n  [class.radio-lg]=\"componentHeight === ControlHeight.Large\"\r\n>\r\n  <label for=\"{{getName}}_{{getIndex}}\">\r\n    <input\r\n      id=\"{{getName}}_{{getIndex}}\"\r\n      name=\"{{getName}}\"\r\n      type=\"radio\"\r\n      [value]=\"value\"\r\n      [checked]=\"checked\"\r\n      (change)=\"ChangeEvent()\"\r\n      [disabled]=\"isDisabled\"\r\n    />\r\n    <ng-template\r\n      *ngTemplateOutlet=\"labeltemplate || defaultItemLabelTemplate;context:{ label: label }\"\r\n    >\r\n    </ng-template>\r\n  </label>\r\n</div>\r\n\r\n<ng-template #defaultItemLabelTemplate let-label=\"label\"\r\n  >&nbsp;<span>{{label}}</span></ng-template\r\n>\r\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\r\n    class=\"radio\"\r\n    *ngIf=\"hidden === false\"\r\n    [class.radio-sm]=\"componentHeight === ControlHeight.Small\"\r\n    [class.radio-lg]=\"componentHeight === ControlHeight.Large\">\r\n    <label for=\"{{ getName }}_{{ getIndex }}\">\r\n        <input\r\n            id=\"{{ getName }}_{{ getIndex }}\"\r\n            name=\"{{ getName }}\"\r\n            type=\"radio\"\r\n            [value]=\"value\"\r\n            [checked]=\"checked\"\r\n            (change)=\"ChangeEvent()\"\r\n            [disabled]=\"isDisabled\" />\r\n        <ng-template *ngTemplateOutlet=\"labeltemplate || defaultItemLabelTemplate; context: { label: label }\"></ng-template>\r\n        <p\r\n            *ngIf=\"helptextmode === 'text' && helptext\"\r\n            class=\"help-block\">\r\n            {{ helptext }}\r\n        </p>\r\n    </label>\r\n\r\n    <div\r\n        *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n        class=\"form-control-static\"\r\n        style=\"display: inline\">\r\n        <sac-tooltip\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [class]=\"HelptextTooltipIcon\"\r\n                style=\"margin-left: 5px; margin-right: 5px\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </div>\r\n</div>\r\n\r\n<ng-template\r\n    #defaultItemLabelTemplate\r\n    let-label=\"label\">\r\n    <span>{{ label }}</span>\r\n</ng-template>\r\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: [{
+                        type: Host
+                    }, {
+                        type: Optional
+                    }] }, { type: i0.Injector }];
     } });
 
 class SACBootstrap3CheckboxModule {
@@ -467,10 +472,10 @@ class SacDialogComponent extends SacDialogCommon {
     }
 }
 SacDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacDialogComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-SacDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacDialogComponent, selector: "sac-dialog", inputs: { zindex: "zindex" }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"name\" *ngIf=\"_show\" [ngStyle]=\"{'z-index': zindex}\">\r\n  <div class=\"modal in\" style=\"display: block;\" tabindex=\"-1\" role=\"dialog\" #dialog>\r\n    <div class=\"modal-dialog\" role=\"document\" [style.width]=\"width\">\r\n      <div class=\"modal-content\">\r\n        <div class=\"modal-header\">\r\n          <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\" (click)=\"hide()\" *ngIf=\"closebutton\"><span aria-hidden=\"true\">&times;</span></button>\r\n          <span class=\"modal-title\">{{title}}</span>\r\n        </div>\r\n        <div class=\"modal-body\">\r\n          <ng-content select=\"[dialogbody]\"></ng-content>\r\n        </div>\r\n        <div class=\"modal-footer\">\r\n          <ng-content select=\"[dialogfooter]\"></ng-content>\r\n        </div>\r\n      </div><!-- /.modal-content -->\r\n    </div><!-- /.modal-dialog -->\r\n  </div><!-- /.modal -->\r\n</div>\r\n<div class=\"modal-backdrop in\" *ngIf=\"_show && backdrop\" #backdrop></div>\r\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 [id]=\"name\" *ngIf=\"_show\" [ngStyle]=\"{'z-index': zindex}\">\r\n  <div\r\n    class=\"modal in\"\r\n    style=\"display: block\"\r\n    tabindex=\"-1\"\r\n    role=\"dialog\"\r\n    #dialog\r\n  >\r\n    <div\r\n      class=\"modal-dialog\"\r\n      [class.modal-sm]=\"_size==='small'\"\r\n      [class.modal-lg]=\"_size === 'large' || _size === 'extralarge'\"\r\n      role=\"document\"\r\n    >\r\n      <div class=\"modal-content\">\r\n        <div class=\"modal-header\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"close\"\r\n            data-dismiss=\"modal\"\r\n            aria-label=\"Close\"\r\n            (click)=\"hide()\"\r\n            *ngIf=\"closebutton\"\r\n          >\r\n            <span aria-hidden=\"true\">&times;</span>\r\n          </button>\r\n          <span class=\"modal-title\">{{title}}</span>\r\n        </div>\r\n        <div class=\"modal-body\">\r\n          <ng-content select=\"[dialogbody]\"></ng-content>\r\n        </div>\r\n        <div class=\"modal-footer\">\r\n          <ng-content select=\"[dialogfooter]\"></ng-content>\r\n        </div>\r\n      </div>\r\n      <!-- /.modal-content -->\r\n    </div>\r\n    <!-- /.modal-dialog -->\r\n  </div>\r\n  <!-- /.modal -->\r\n</div>\r\n<div class=\"modal-backdrop in\" *ngIf=\"_show && backdrop\" #backdrop></div>\r\n", directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 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}\">\r\n  <div class=\"modal in\" style=\"display: block;\" tabindex=\"-1\" role=\"dialog\" #dialog>\r\n    <div class=\"modal-dialog\" role=\"document\" [style.width]=\"width\">\r\n      <div class=\"modal-content\">\r\n        <div class=\"modal-header\">\r\n          <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\" (click)=\"hide()\" *ngIf=\"closebutton\"><span aria-hidden=\"true\">&times;</span></button>\r\n          <span class=\"modal-title\">{{title}}</span>\r\n        </div>\r\n        <div class=\"modal-body\">\r\n          <ng-content select=\"[dialogbody]\"></ng-content>\r\n        </div>\r\n        <div class=\"modal-footer\">\r\n          <ng-content select=\"[dialogfooter]\"></ng-content>\r\n        </div>\r\n      </div><!-- /.modal-content -->\r\n    </div><!-- /.modal-dialog -->\r\n  </div><!-- /.modal -->\r\n</div>\r\n<div class=\"modal-backdrop in\" *ngIf=\"_show && backdrop\" #backdrop></div>\r\n" }]
+            args: [{ selector: 'sac-dialog', template: "<div [id]=\"name\" *ngIf=\"_show\" [ngStyle]=\"{'z-index': zindex}\">\r\n  <div\r\n    class=\"modal in\"\r\n    style=\"display: block\"\r\n    tabindex=\"-1\"\r\n    role=\"dialog\"\r\n    #dialog\r\n  >\r\n    <div\r\n      class=\"modal-dialog\"\r\n      [class.modal-sm]=\"_size==='small'\"\r\n      [class.modal-lg]=\"_size === 'large' || _size === 'extralarge'\"\r\n      role=\"document\"\r\n    >\r\n      <div class=\"modal-content\">\r\n        <div class=\"modal-header\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"close\"\r\n            data-dismiss=\"modal\"\r\n            aria-label=\"Close\"\r\n            (click)=\"hide()\"\r\n            *ngIf=\"closebutton\"\r\n          >\r\n            <span aria-hidden=\"true\">&times;</span>\r\n          </button>\r\n          <span class=\"modal-title\">{{title}}</span>\r\n        </div>\r\n        <div class=\"modal-body\">\r\n          <ng-content select=\"[dialogbody]\"></ng-content>\r\n        </div>\r\n        <div class=\"modal-footer\">\r\n          <ng-content select=\"[dialogfooter]\"></ng-content>\r\n        </div>\r\n      </div>\r\n      <!-- /.modal-content -->\r\n    </div>\r\n    <!-- /.modal-dialog -->\r\n  </div>\r\n  <!-- /.modal -->\r\n</div>\r\n<div class=\"modal-backdrop in\" *ngIf=\"_show && backdrop\" #backdrop></div>\r\n" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { zindex: [{
                 type: Input
             }] } });
@@ -627,6 +632,196 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                 }]
         }] });
 
+/**
+ * Marker Komponente für Context Menü
+ */
+class SacContextmenuContainerDirective extends SacContextMenuContrainerCommon {
+    // #region Constructors
+    /**
+     * Konstruktor
+     * @param elementRef Referenz auf DOM Element
+     */
+    constructor(elementRef) {
+        super(elementRef);
+    }
+}
+SacContextmenuContainerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacContextmenuContainerDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+SacContextmenuContainerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: SacContextmenuContainerDirective, selector: "[sacContextMenuContainer]", providers: [
+        {
+            provide: SacContextMenuContrainerCommon,
+            useExisting: forwardRef(() => SacContextmenuContainerDirective),
+        },
+    ], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacContextmenuContainerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[sacContextMenuContainer]',
+                    providers: [
+                        {
+                            provide: SacContextMenuContrainerCommon,
+                            useExisting: forwardRef(() => SacContextmenuContainerDirective),
+                        },
+                    ],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
+
+/**
+ * Anker Komponente für Context Menü. Wird zum positionieren des Context Menü in der Page benötigt.
+ */
+class SacContextmenuAnchorDirective extends SacContextmenuAnchorCommon {
+    // #region Constructors
+    /**
+     * Konstruktor
+     * @param elementRef HTML DOM Referenz
+     */
+    constructor(elementRef) {
+        super(elementRef);
+    }
+}
+SacContextmenuAnchorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacContextmenuAnchorDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+SacContextmenuAnchorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: SacContextmenuAnchorDirective, selector: "[sacContextMenuAnchor]", providers: [
+        {
+            provide: SacContextmenuAnchorCommon,
+            useExisting: forwardRef(() => SacContextmenuAnchorDirective),
+        },
+    ], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacContextmenuAnchorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[sacContextMenuAnchor]',
+                    providers: [
+                        {
+                            provide: SacContextmenuAnchorCommon,
+                            useExisting: forwardRef(() => SacContextmenuAnchorDirective),
+                        },
+                    ],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
+
+/**
+ * Component for context menu
+ */
+class SacContextmenuComponent extends SacContextmenuCommon {
+    // #region Constructors
+    /**
+     * Constructor
+     * @param document Reference to HTML document
+     * @param ngZone Angular Zone Service
+     * @param elementRef Reference to HTML element of the current component
+     * @param renderer Render Service from Angular
+     * @param injector injector to resolve services
+     */
+    constructor(document, ngZone, elementRef, renderer, injector) {
+        super(document, ngZone, elementRef, renderer, injector);
+    }
+}
+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\r\n    class=\"dropdown\"\r\n    [ngClass]=\"cssclass\">\r\n    <ng-container [ngTemplateOutlet]=\"buttontemplate || defaultButtonTemplate\"></ng-container>\r\n\r\n    <ul\r\n        class=\"dropdown-menu dropdown-menu-right\"\r\n        sacContextMenuContainer\r\n        [class.show]=\"isopen\">\r\n        <ng-content></ng-content>\r\n    </ul>\r\n</div>\r\n\r\n<ng-template #defaultButtonTemplate>\r\n    <button\r\n        sacContextMenuAnchor\r\n        class=\"btn btn-link\"\r\n        type=\"button\"\r\n        (click)=\"toggle()\">\r\n        <i [class]=\"IconContextMenu\"></i>\r\n    </button>\r\n</ng-template>\r\n", directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: SacContextmenuContainerDirective, selector: "[sacContextMenuContainer]" }, { type: SacContextmenuAnchorDirective, selector: "[sacContextMenuAnchor]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacContextmenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sac-contextmenu', template: "<div\r\n    class=\"dropdown\"\r\n    [ngClass]=\"cssclass\">\r\n    <ng-container [ngTemplateOutlet]=\"buttontemplate || defaultButtonTemplate\"></ng-container>\r\n\r\n    <ul\r\n        class=\"dropdown-menu dropdown-menu-right\"\r\n        sacContextMenuContainer\r\n        [class.show]=\"isopen\">\r\n        <ng-content></ng-content>\r\n    </ul>\r\n</div>\r\n\r\n<ng-template #defaultButtonTemplate>\r\n    <button\r\n        sacContextMenuAnchor\r\n        class=\"btn btn-link\"\r\n        type=\"button\"\r\n        (click)=\"toggle()\">\r\n        <i [class]=\"IconContextMenu\"></i>\r\n    </button>\r\n</ng-template>\r\n" }]
+        }], ctorParameters: function () {
+        return [{ type: undefined, decorators: [{
+                        type: Inject,
+                        args: [DOCUMENT]
+                    }] }, { type: i0.NgZone }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.Injector }];
+    } });
+
+/**
+ * Component for menu entry in context menu
+ */
+class SacContextmenuItemButtonComponent extends SacContextmenuItemButtonCommon {
+    // #region Constructors
+    /**
+     * Constructor
+     * @param contextmenu Instance von Context Menü
+     */
+    constructor(el) {
+        super();
+        this.el = el;
+    }
+    // #endregion Constructors
+    // #region Public Methods
+    ngOnInit() {
+        const rootElement = this.el.nativeElement;
+        const parentElement = rootElement.parentElement;
+        while (rootElement.firstChild) {
+            parentElement.insertBefore(rootElement.firstChild, rootElement);
+        }
+        parentElement.removeChild(rootElement);
+    }
+}
+SacContextmenuItemButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacContextmenuItemButtonComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+SacContextmenuItemButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacContextmenuItemButtonComponent, selector: "sac-contextmenubutton", providers: [
+        {
+            provide: SacContextmenuItemCommon,
+            useExisting: forwardRef(() => SacContextmenuItemButtonComponent),
+        },
+    ], usesInheritance: true, ngImport: i0, template: "<li\r\n    [class.disabled]=\"isdisabled\"\r\n    [ngClass]=\"cssclass\">\r\n    <a\r\n        [id]=\"name\"\r\n        (click)=\"callaction($event)\"\r\n        [attr.disabled]=\"isdisabled ? 'disabled' : null\"\r\n        [ngStyle]=\"{ cursor: !isdisabled ? 'pointer' : null }\"\r\n        style=\"display: flex\">\r\n        <div\r\n            style=\"min-width: 25px\"\r\n            *ngIf=\"!isicondisabled\">\r\n            <img\r\n                *ngIf=\"image\"\r\n                [src]=\"image\"\r\n                style=\"vertical-align: baseline\"\r\n                [ngStyle]=\"{ 'margin-right': text ? '5px' : null }\" />\r\n            <i\r\n                *ngIf=\"icon\"\r\n                [class]=\"iconstyle + ' ' + icon\"\r\n                [ngStyle]=\"{ 'margin-right': text ? '5px' : null }\">\r\n            </i>\r\n        </div>\r\n        <div>{{ text }}</div>\r\n    </a>\r\n</li>\r\n", directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacContextmenuItemButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sac-contextmenubutton', providers: [
+                        {
+                            provide: SacContextmenuItemCommon,
+                            useExisting: forwardRef(() => SacContextmenuItemButtonComponent),
+                        },
+                    ], template: "<li\r\n    [class.disabled]=\"isdisabled\"\r\n    [ngClass]=\"cssclass\">\r\n    <a\r\n        [id]=\"name\"\r\n        (click)=\"callaction($event)\"\r\n        [attr.disabled]=\"isdisabled ? 'disabled' : null\"\r\n        [ngStyle]=\"{ cursor: !isdisabled ? 'pointer' : null }\"\r\n        style=\"display: flex\">\r\n        <div\r\n            style=\"min-width: 25px\"\r\n            *ngIf=\"!isicondisabled\">\r\n            <img\r\n                *ngIf=\"image\"\r\n                [src]=\"image\"\r\n                style=\"vertical-align: baseline\"\r\n                [ngStyle]=\"{ 'margin-right': text ? '5px' : null }\" />\r\n            <i\r\n                *ngIf=\"icon\"\r\n                [class]=\"iconstyle + ' ' + icon\"\r\n                [ngStyle]=\"{ 'margin-right': text ? '5px' : null }\">\r\n            </i>\r\n        </div>\r\n        <div>{{ text }}</div>\r\n    </a>\r\n</li>\r\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
+
+/**
+ * Splitter Komponente in Context Menü
+ */
+class SacContextmenuItemSplitterComponent extends SacContextmenuItemCommon {
+}
+SacContextmenuItemSplitterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacContextmenuItemSplitterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+SacContextmenuItemSplitterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacContextmenuItemSplitterComponent, selector: "sac-contextmenusplitter", providers: [
+        {
+            provide: SacContextmenuItemCommon,
+            useExisting: forwardRef(() => SacContextmenuItemSplitterComponent),
+        },
+    ], usesInheritance: true, ngImport: i0, template: "<li\r\n    role=\"separator\"\r\n    class=\"divider\"></li>\r\n" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacContextmenuItemSplitterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sac-contextmenusplitter', providers: [
+                        {
+                            provide: SacContextmenuItemCommon,
+                            useExisting: forwardRef(() => SacContextmenuItemSplitterComponent),
+                        },
+                    ], template: "<li\r\n    role=\"separator\"\r\n    class=\"divider\"></li>\r\n" }]
+        }] });
+
+class SACBootstrap3ContextmenuModule {
+}
+SACBootstrap3ContextmenuModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3ContextmenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SACBootstrap3ContextmenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3ContextmenuModule, declarations: [SacContextmenuComponent,
+        SacContextmenuItemButtonComponent,
+        SacContextmenuItemSplitterComponent,
+        SacContextmenuAnchorDirective,
+        SacContextmenuContainerDirective], imports: [CommonModule], exports: [SacContextmenuComponent,
+        SacContextmenuItemButtonComponent,
+        SacContextmenuItemSplitterComponent,
+        SacContextmenuAnchorDirective] });
+SACBootstrap3ContextmenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3ContextmenuModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3ContextmenuModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SacContextmenuComponent,
+                        SacContextmenuItemButtonComponent,
+                        SacContextmenuItemSplitterComponent,
+                        SacContextmenuAnchorDirective,
+                        SacContextmenuContainerDirective,
+                    ],
+                    imports: [CommonModule],
+                    exports: [
+                        SacContextmenuComponent,
+                        SacContextmenuItemButtonComponent,
+                        SacContextmenuItemSplitterComponent,
+                        SacContextmenuAnchorDirective,
+                    ],
+                }]
+        }] });
+
 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 });
@@ -636,7 +831,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
             args: [{ selector: 'sac-dateselector', template: "<div class=\"calendar-selector\" style=\"min-width: 265px\">\r\n  <table class=\"table-condensed\" style=\"width: 100%\" *ngIf=\"dateselection\">\r\n    <thead>\r\n      <tr>\r\n        <th class=\"prev text-left\" (click)=\"monthBack()\">\r\n          <i [class]=\"iconMonthPrev\"></i>\r\n        </th>\r\n        <th colspan=\"5\" class=\"switch text-center\">{{month+1}}/{{year}}</th>\r\n        <th class=\"next text-right\" (click)=\"monthNext()\">\r\n          <i [class]=\"iconMonthNext\"></i>\r\n        </th>\r\n      </tr>\r\n      <tr>\r\n        <th class=\"dow text-center\">Mo</th>\r\n        <th class=\"dow text-center\">Di</th>\r\n        <th class=\"dow text-center\">Mi</th>\r\n        <th class=\"dow text-center\">Do</th>\r\n        <th class=\"dow text-center\">Fr</th>\r\n        <th class=\"dow text-center\">Sa</th>\r\n        <th class=\"dow text-center\">So</th>\r\n      </tr>\r\n    </thead>\r\n    <tbody>\r\n      <ng-container *ngFor=\"let week of dates; let i=index\">\r\n        <tr>\r\n          <td\r\n            class=\"text-center\"\r\n            *ngFor=\"let item of week\"\r\n            [ngStyle]=\"{'cursor': item.isenabled ? 'pointer' : null}\"\r\n            [ngClass]=\"{'day-current': item.iscurrent, 'day-selected': item.isselected, 'day-new': item.isnew, 'day-disabled': !item.isenabled}\"\r\n            (click)=\"selectDate(item)\"\r\n          >\r\n            {{ item.displaytext }}\r\n          </td>\r\n        </tr>\r\n      </ng-container>\r\n    </tbody>\r\n  </table>\r\n  <div class=\"container-fluid\" *ngIf=\"timeselection\" style=\"margin-top: 10px\">\r\n    <div class=\"row\">\r\n      <div class=\"col-md-6\" style=\"padding-right: 20px\">\r\n        <div class=\"form-group\">\r\n          <label>Stunde</label>\r\n          <input\r\n            type=\"number\"\r\n            class=\"form-control\"\r\n            [value]=\"getHours()\"\r\n            (input)=\"setHours($event.target.value)\"\r\n            min=\"0\"\r\n            max=\"23\"\r\n          />\r\n        </div>\r\n      </div>\r\n      <div class=\"col-md-6\" style=\"padding-left: 20px\">\r\n        <div class=\"form-group\">\r\n          <label>Minute</label>\r\n          <input\r\n            type=\"number\"\r\n            class=\"form-control\"\r\n            [value]=\"getMinutes()\"\r\n            (input)=\"setMinutes($event.target.value)\"\r\n            min=\"0\"\r\n            max=\"59\"\r\n          />\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"row\" style=\"margin-top: 10px\">\r\n    <div class=\"col-md-4 text-left\">\r\n      <button type=\"button\" class=\"btn btn-default\" (click)=\"setToday()\">\r\n        Heute\r\n      </button>\r\n    </div>\r\n    <div class=\"col-md-8 text-right\">\r\n      <button type=\"button\" class=\"btn btn-default\" (click)=\"resetSelection()\">\r\n        Reset\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        class=\"btn btn-primary\"\r\n        style=\"margin-left: 10px\"\r\n        (click)=\"applySelection()\"\r\n      >\r\n        Apply\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
         }] });
 
-const moment = moment_['default'];
+// #region Classes
 class SacDateComponent extends SacDateCommon {
     // #region Constructors
     /**
@@ -644,12 +839,13 @@ class SacDateComponent extends SacDateCommon {
      * @param formLayout SacFormLayout to define scoped layout settings
      * @param injector Injector for injecting services
      * @param elementRef Reference to html dom element
+     * @param cdRef  Change Dectection Servie
      */
-    constructor(formLayout, injector, elementRef) {
-        super(formLayout, injector, elementRef);
+    constructor(formLayout, injector, elementRef, cdRef) {
+        super(formLayout, injector, elementRef, cdRef);
     }
 }
-SacDateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacDateComponent, deps: [{ token: SacFormLayoutDirective, host: true, optional: true }, { token: i0.Injector }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+SacDateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacDateComponent, deps: [{ token: SacFormLayoutDirective, host: true, optional: true }, { token: i0.Injector }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 SacDateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacDateComponent, selector: "sac-date", providers: [
         {
             provide: NG_VALUE_ACCESSOR,
@@ -661,7 +857,7 @@ SacDateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
             multi: true,
             useExisting: forwardRef(() => SacDateComponent),
         },
-    ], usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"row form-group\"\r\n  [class.has-error]=\"invalid && (dirty || touched)\"\r\n  [ngClass]=\"componentHeight | toLabelHeight\"\r\n>\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-xs-12 control-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}\r\n    <sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n    >\r\n      <span\r\n        [class]=\"HelptextTooltipIcon\"\r\n        style=\"margin-left: 5px\"\r\n      ></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-xs-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      style=\"position: relative\"\r\n      [style.width.px]=\"componentHeight === ControlHeight.Small ? 120 : componentHeight === ControlHeight.Large ? 180 : 140\"\r\n    >\r\n      <div\r\n        id=\"{{name}}\"\r\n        class=\"datetime-textbox input-group\"\r\n        [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n        [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n      >\r\n        <!-- this class comes in the div above when disabled [ngClass]=\"[disablelabel === false ? 'col-md-' + _inputsize : 'col-md-12']\" -->\r\n        <input\r\n          name=\"{{name}}\"\r\n          type=\"text\"\r\n          class=\"form-control date-control\"\r\n          [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n          [ngClass]=\"[componentHeight | toControlHeight]\"\r\n          [imask]=\"imaskDate\"\r\n          placeholder=\"dd.mm.yyyy\"\r\n          [attr.placeholder]=\"placeholder\"\r\n          [value]=\"valuestring\"\r\n          maxlength=\"10\"\r\n          size=\"10\"\r\n          (blur)=\"onTouch()\"\r\n          (accept)=\"setValueString($event)\"\r\n          [disabled]=\"isdisabled\"\r\n          (click)=\"showDateSelector()\"\r\n        />\r\n        <span class=\"input-group-btn\">\r\n          <button\r\n            class=\"btn btn-default\"\r\n            type=\"button\"\r\n            (click)=\"showDateSelector()\"\r\n            [disabled]=\"isdisabled\"\r\n          >\r\n            <i [class]=\"IconSelector\"></i>\r\n          </button>\r\n        </span>\r\n      </div>\r\n      <p *ngIf=\"helptextmode === 'text' && helptext\" class=\"help-block\">\r\n        {{helptext}}\r\n      </p>\r\n      <div\r\n        class=\"help-block help-block-error\"\r\n        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      >\r\n        {{ GetErrorMessage() | async }}\r\n      </div>\r\n\r\n      <div\r\n        class=\"popover bottom in\"\r\n        role=\"tooltip\"\r\n        *ngIf=\"_showselector\"\r\n        style=\"display: block; left: 0px; right: unset; max-width: 325px\"\r\n        [style.top.px]=\"componentHeight === ControlHeight.Large ? 46 : 34\"\r\n      >\r\n        <div\r\n          class=\"arrow\"\r\n          [style.left.px]=\"componentHeight === ControlHeight.Small ? 102 : componentHeight === ControlHeight.Large ? 155 : 120\"\r\n          style=\"right: unset\"\r\n        ></div>\r\n        <h3 class=\"popover-title\" style=\"display: none\"></h3>\r\n        <div class=\"popover-content\">\r\n          <sac-dateselector\r\n            *ngIf=\"_showselector\"\r\n            [initialvalue]=\"value\"\r\n            (selectdate)=\"dateselect($event)\"\r\n            dateselection=\"true\"\r\n          ></sac-dateselector>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", components: [{ type: SacTooltipComponent, selector: "sac-tooltip" }, { type: SacDateSelectorComponent, selector: "sac-dateselector" }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.IMaskDirective, selector: "[imask]", inputs: ["imaskElement", "imask", "unmask"], outputs: ["accept", "complete"], exportAs: ["imask"] }], pipes: { "toLabelHeight": SacToLabelHeightPipe, "toLabelWidthCss": SacToLabelWidthCssPipe, "toControlWidthCss": SacToControlWidthCssPipe, "toControlHeight": SacToControlHeightPipe, "async": i3.AsyncPipe } });
+    ], usesInheritance: true, ngImport: i0, template: "<div\r\n    class=\"row form-group\"\r\n    [class.has-error]=\"invalid && (dirty || touched)\"\r\n    [ngClass]=\"componentHeight | toLabelHeight\">\r\n    <label\r\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n        id=\"{{ name }}label\"\r\n        for=\"{{ name }}\"\r\n        class=\"col-xs-12 control-label\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\r\n        [class.required]=\"isrequired\">\r\n        <span class=\"text\">{{ label }}</span>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [class]=\"HelptextTooltipIcon\"\r\n                style=\"margin-left: 5px\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-xs-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\r\n        <div\r\n            style=\"position: relative\"\r\n            [style.width.px]=\"componentHeight === ControlHeight.Small ? 120 : componentHeight === ControlHeight.Large ? 180 : 140\">\r\n            <div\r\n                class=\"datetime-textbox input-group\"\r\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\r\n                <!-- this class comes in the div above when disabled [ngClass]=\"[disablelabel === false ? 'col-md-' + _inputsize : 'col-md-12']\" -->\r\n                <input\r\n                    id=\"{{ name }}\"\r\n                    name=\"{{ name }}\"\r\n                    type=\"text\"\r\n                    class=\"form-control date-control\"\r\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n                    [ngClass]=\"[componentHeight | toControlHeight]\"\r\n                    [imask]=\"imaskDate\"\r\n                    [attr.placeholder]=\"placeholder\"\r\n                    [value]=\"valuestring\"\r\n                    (blur)=\"onTouch()\"\r\n                    (accept)=\"setValueString($event)\"\r\n                    [disabled]=\"isdisabled\"\r\n                    (click)=\"showDateSelector()\" />\r\n                <span class=\"input-group-btn\">\r\n                    <button\r\n                        #pickerbutton\r\n                        class=\"btn btn-default\"\r\n                        type=\"button\"\r\n                        (click)=\"showDateSelector()\"\r\n                        [disabled]=\"isdisabled\">\r\n                        <i [class]=\"IconSelector\"></i>\r\n                    </button>\r\n                </span>\r\n            </div>\r\n            <p\r\n                *ngIf=\"helptextmode === 'text' && helptext\"\r\n                class=\"help-block\">\r\n                {{ helptext }}\r\n            </p>\r\n            <div\r\n                class=\"help-block help-block-error\"\r\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\r\n                {{ GetErrorMessage() | async }}\r\n            </div>\r\n\r\n            <div\r\n                #picker\r\n                *ngIf=\"_showselector\">\r\n                <div\r\n                    class=\"popover in\"\r\n                    role=\"tooltip\"\r\n                    style=\"display: block; max-width: unset; margin: 0\"\r\n                    [class.bottom]=\"GetPickerPosition() == TooltipPosition.bottom || GetPickerPosition() == TooltipPosition.bottomend\"\r\n                    [class.top]=\"GetPickerPosition() == TooltipPosition.top || GetPickerPosition() == TooltipPosition.topend\"\r\n                    [style.left.px]=\"posPopupLeft\"\r\n                    [style.top.px]=\"posPopupTop\">\r\n                    <div\r\n                        #pickerarrow\r\n                        style=\"margin: 0\"\r\n                        class=\"arrow\"\r\n                        [style.top.px]=\"posArrowTop\"\r\n                        [style.left.px]=\"posArrowLeft\">\r\n                    </div>\r\n\r\n                    <div class=\"popover-content\">\r\n                        <sac-dateselector\r\n                            *ngIf=\"_showselector\"\r\n                            [initialvalue]=\"value\"\r\n                            (selectdate)=\"dateselect($event)\"\r\n                            dateselection=\"true\">\r\n                        </sac-dateselector>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n            class=\"form-control-static\"\r\n            style=\"margin-left: 5px\">\r\n            <sac-tooltip\r\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n                [tooltiptext]=\"helptext\"\r\n                [inlinemode]=\"true\">\r\n                <span\r\n                    [class]=\"HelptextTooltipIcon\"\r\n                    style=\"margin-left: 5px; margin-right: 5px\">\r\n                </span>\r\n            </sac-tooltip>\r\n        </div>\r\n    </div>\r\n</div>\r\n", components: [{ type: SacTooltipComponent, selector: "sac-tooltip" }, { type: SacDateSelectorComponent, selector: "sac-dateselector" }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.IMaskDirective, selector: "[imask]", inputs: ["imaskElement", "imask", "unmask"], outputs: ["accept", "complete"], exportAs: ["imask"] }], pipes: { "toLabelHeight": SacToLabelHeightPipe, "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: [
@@ -675,14 +871,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => SacDateComponent),
                         },
-                    ], template: "<div\r\n  class=\"row form-group\"\r\n  [class.has-error]=\"invalid && (dirty || touched)\"\r\n  [ngClass]=\"componentHeight | toLabelHeight\"\r\n>\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-xs-12 control-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}\r\n    <sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n    >\r\n      <span\r\n        [class]=\"HelptextTooltipIcon\"\r\n        style=\"margin-left: 5px\"\r\n      ></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-xs-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      style=\"position: relative\"\r\n      [style.width.px]=\"componentHeight === ControlHeight.Small ? 120 : componentHeight === ControlHeight.Large ? 180 : 140\"\r\n    >\r\n      <div\r\n        id=\"{{name}}\"\r\n        class=\"datetime-textbox input-group\"\r\n        [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n        [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n      >\r\n        <!-- this class comes in the div above when disabled [ngClass]=\"[disablelabel === false ? 'col-md-' + _inputsize : 'col-md-12']\" -->\r\n        <input\r\n          name=\"{{name}}\"\r\n          type=\"text\"\r\n          class=\"form-control date-control\"\r\n          [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n          [ngClass]=\"[componentHeight | toControlHeight]\"\r\n          [imask]=\"imaskDate\"\r\n          placeholder=\"dd.mm.yyyy\"\r\n          [attr.placeholder]=\"placeholder\"\r\n          [value]=\"valuestring\"\r\n          maxlength=\"10\"\r\n          size=\"10\"\r\n          (blur)=\"onTouch()\"\r\n          (accept)=\"setValueString($event)\"\r\n          [disabled]=\"isdisabled\"\r\n          (click)=\"showDateSelector()\"\r\n        />\r\n        <span class=\"input-group-btn\">\r\n          <button\r\n            class=\"btn btn-default\"\r\n            type=\"button\"\r\n            (click)=\"showDateSelector()\"\r\n            [disabled]=\"isdisabled\"\r\n          >\r\n            <i [class]=\"IconSelector\"></i>\r\n          </button>\r\n        </span>\r\n      </div>\r\n      <p *ngIf=\"helptextmode === 'text' && helptext\" class=\"help-block\">\r\n        {{helptext}}\r\n      </p>\r\n      <div\r\n        class=\"help-block help-block-error\"\r\n        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      >\r\n        {{ GetErrorMessage() | async }}\r\n      </div>\r\n\r\n      <div\r\n        class=\"popover bottom in\"\r\n        role=\"tooltip\"\r\n        *ngIf=\"_showselector\"\r\n        style=\"display: block; left: 0px; right: unset; max-width: 325px\"\r\n        [style.top.px]=\"componentHeight === ControlHeight.Large ? 46 : 34\"\r\n      >\r\n        <div\r\n          class=\"arrow\"\r\n          [style.left.px]=\"componentHeight === ControlHeight.Small ? 102 : componentHeight === ControlHeight.Large ? 155 : 120\"\r\n          style=\"right: unset\"\r\n        ></div>\r\n        <h3 class=\"popover-title\" style=\"display: none\"></h3>\r\n        <div class=\"popover-content\">\r\n          <sac-dateselector\r\n            *ngIf=\"_showselector\"\r\n            [initialvalue]=\"value\"\r\n            (selectdate)=\"dateselect($event)\"\r\n            dateselection=\"true\"\r\n          ></sac-dateselector>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+                    ], template: "<div\r\n    class=\"row form-group\"\r\n    [class.has-error]=\"invalid && (dirty || touched)\"\r\n    [ngClass]=\"componentHeight | toLabelHeight\">\r\n    <label\r\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n        id=\"{{ name }}label\"\r\n        for=\"{{ name }}\"\r\n        class=\"col-xs-12 control-label\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\r\n        [class.required]=\"isrequired\">\r\n        <span class=\"text\">{{ label }}</span>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [class]=\"HelptextTooltipIcon\"\r\n                style=\"margin-left: 5px\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-xs-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\r\n        <div\r\n            style=\"position: relative\"\r\n            [style.width.px]=\"componentHeight === ControlHeight.Small ? 120 : componentHeight === ControlHeight.Large ? 180 : 140\">\r\n            <div\r\n                class=\"datetime-textbox input-group\"\r\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\r\n                <!-- this class comes in the div above when disabled [ngClass]=\"[disablelabel === false ? 'col-md-' + _inputsize : 'col-md-12']\" -->\r\n                <input\r\n                    id=\"{{ name }}\"\r\n                    name=\"{{ name }}\"\r\n                    type=\"text\"\r\n                    class=\"form-control date-control\"\r\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n                    [ngClass]=\"[componentHeight | toControlHeight]\"\r\n                    [imask]=\"imaskDate\"\r\n                    [attr.placeholder]=\"placeholder\"\r\n                    [value]=\"valuestring\"\r\n                    (blur)=\"onTouch()\"\r\n                    (accept)=\"setValueString($event)\"\r\n                    [disabled]=\"isdisabled\"\r\n                    (click)=\"showDateSelector()\" />\r\n                <span class=\"input-group-btn\">\r\n                    <button\r\n                        #pickerbutton\r\n                        class=\"btn btn-default\"\r\n                        type=\"button\"\r\n                        (click)=\"showDateSelector()\"\r\n                        [disabled]=\"isdisabled\">\r\n                        <i [class]=\"IconSelector\"></i>\r\n                    </button>\r\n                </span>\r\n            </div>\r\n            <p\r\n                *ngIf=\"helptextmode === 'text' && helptext\"\r\n                class=\"help-block\">\r\n                {{ helptext }}\r\n            </p>\r\n            <div\r\n                class=\"help-block help-block-error\"\r\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\r\n                {{ GetErrorMessage() | async }}\r\n            </div>\r\n\r\n            <div\r\n                #picker\r\n                *ngIf=\"_showselector\">\r\n                <div\r\n                    class=\"popover in\"\r\n                    role=\"tooltip\"\r\n                    style=\"display: block; max-width: unset; margin: 0\"\r\n                    [class.bottom]=\"GetPickerPosition() == TooltipPosition.bottom || GetPickerPosition() == TooltipPosition.bottomend\"\r\n                    [class.top]=\"GetPickerPosition() == TooltipPosition.top || GetPickerPosition() == TooltipPosition.topend\"\r\n                    [style.left.px]=\"posPopupLeft\"\r\n                    [style.top.px]=\"posPopupTop\">\r\n                    <div\r\n                        #pickerarrow\r\n                        style=\"margin: 0\"\r\n                        class=\"arrow\"\r\n                        [style.top.px]=\"posArrowTop\"\r\n                        [style.left.px]=\"posArrowLeft\">\r\n                    </div>\r\n\r\n                    <div class=\"popover-content\">\r\n                        <sac-dateselector\r\n                            *ngIf=\"_showselector\"\r\n                            [initialvalue]=\"value\"\r\n                            (selectdate)=\"dateselect($event)\"\r\n                            dateselection=\"true\">\r\n                        </sac-dateselector>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n            class=\"form-control-static\"\r\n            style=\"margin-left: 5px\">\r\n            <sac-tooltip\r\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n                [tooltiptext]=\"helptext\"\r\n                [inlinemode]=\"true\">\r\n                <span\r\n                    [class]=\"HelptextTooltipIcon\"\r\n                    style=\"margin-left: 5px; margin-right: 5px\">\r\n                </span>\r\n            </sac-tooltip>\r\n        </div>\r\n    </div>\r\n</div>\r\n" }]
         }], ctorParameters: function () {
         return [{ type: SacFormLayoutDirective, decorators: [{
                         type: Host
                     }, {
                         type: Optional
-                    }] }, { type: i0.Injector }, { type: i0.ElementRef }];
-    } });
+                    }] }, { type: i0.Injector }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }];
+    } });
+// #endregion Classes
+// #region Variables
+const moment = moment_['default'];
 
 class SacDateTimeComponent extends SacDateTimeCommon {
     // #region Constructors
@@ -691,12 +890,13 @@ class SacDateTimeComponent extends SacDateTimeCommon {
      * @param formLayout SacFormLayout to define scoped layout settings
      * @param injector Injector for injecting services
      * @param elementRef Reference to html dom element
+     * @param cdRef  Change Dectection Servie
      */
-    constructor(formLayout, injector, elementRef) {
-        super(formLayout, injector, elementRef);
+    constructor(formLayout, injector, elementRef, cdRef) {
+        super(formLayout, injector, elementRef, cdRef);
     }
 }
-SacDateTimeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacDateTimeComponent, deps: [{ token: SacFormLayoutDirective, host: true, optional: true }, { token: i0.Injector }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+SacDateTimeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacDateTimeComponent, deps: [{ token: SacFormLayoutDirective, host: true, optional: true }, { token: i0.Injector }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 SacDateTimeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacDateTimeComponent, selector: "sac-datetime", providers: [
         {
             provide: NG_VALUE_ACCESSOR,
@@ -708,7 +908,7 @@ SacDateTimeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             multi: true,
             useExisting: forwardRef(() => SacDateTimeComponent),
         },
-    ], usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"row form-group\"\r\n  [class.has-error]=\"invalid && (dirty || touched)\"\r\n  [ngClass]=\"componentHeight | toLabelHeight\"\r\n>\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-xs-12 control-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}\r\n    <sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n    >\r\n      <span\r\n        [class]=\"HelptextTooltipIcon\"\r\n        style=\"margin-left: 5px\"\r\n      ></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-xs-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      style=\"position: relative\"\r\n      [style.width.px]=\"componentHeight === ControlHeight.Small ? 160 : componentHeight === ControlHeight.Large ? 230 : 180\"\r\n    >\r\n      <div\r\n        id=\"{{name}}\"\r\n        class=\"datetime-textbox input-group\"\r\n        [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n        [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n      >\r\n        <input\r\n          id=\"{{name}}\"\r\n          name=\"{{name}}\"\r\n          type=\"text\"\r\n          class=\"form-control\"\r\n          [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n          [ngClass]=\"[componentHeight | toControlHeight]\"\r\n          [imask]=\"imaskDate\"\r\n          [attr.placeholder]=\"placeholder\"\r\n          [value]=\"valuestring\"\r\n          (blur)=\"onTouch()\"\r\n          (accept)=\"setValueString($event)\"\r\n          [disabled]=\"isdisabled\"\r\n          (click)=\"showDateSelector()\"\r\n        />\r\n        <span class=\"input-group-btn\">\r\n          <button\r\n            class=\"btn btn-default\"\r\n            type=\"button\"\r\n            (click)=\"showDateSelector()\"\r\n            [disabled]=\"isdisabled\"\r\n          >\r\n            <i [class]=\"IconSelector\"></i>\r\n          </button>\r\n        </span>\r\n      </div>\r\n      <p *ngIf=\"helptextmode === 'text' && helptext\" class=\"help-block\">\r\n        {{helptext}}\r\n      </p>\r\n      <div\r\n        class=\"help-block help-block-error\"\r\n        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      >\r\n        {{ GetErrorMessage() | async }}\r\n      </div>\r\n\r\n      <div\r\n        class=\"popover bottom in\"\r\n        role=\"tooltip\"\r\n        *ngIf=\"_showselector\"\r\n        style=\"display: block; left: 0px; right: unset; max-width: 325px\"\r\n        [style.top.px]=\"componentHeight === ControlHeight.Large ? 46 : 34\"\r\n      >\r\n        <div\r\n          class=\"arrow\"\r\n          [style.left.px]=\"componentHeight === ControlHeight.Small ? 140 : componentHeight === ControlHeight.Large ? 205 : 160\"\r\n          style=\"right: unset\"\r\n        ></div>\r\n        <h3 class=\"popover-title\" style=\"display: none\"></h3>\r\n        <div class=\"popover-content\">\r\n          <sac-dateselector\r\n            *ngIf=\"_showselector\"\r\n            [initialvalue]=\"value\"\r\n            (selectdate)=\"dateselect($event)\"\r\n            dateselection=\"true\"\r\n            timeselection=\"true\"\r\n          ></sac-dateselector>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", components: [{ type: SacTooltipComponent, selector: "sac-tooltip" }, { type: SacDateSelectorComponent, selector: "sac-dateselector" }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.IMaskDirective, selector: "[imask]", inputs: ["imaskElement", "imask", "unmask"], outputs: ["accept", "complete"], exportAs: ["imask"] }], pipes: { "toLabelHeight": SacToLabelHeightPipe, "toLabelWidthCss": SacToLabelWidthCssPipe, "toControlWidthCss": SacToControlWidthCssPipe, "toControlHeight": SacToControlHeightPipe, "async": i3.AsyncPipe } });
+    ], usesInheritance: true, ngImport: i0, template: "<div\r\n    class=\"row form-group\"\r\n    [class.has-error]=\"invalid && (dirty || touched)\"\r\n    [ngClass]=\"componentHeight | toLabelHeight\">\r\n    <label\r\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n        id=\"{{ name }}label\"\r\n        for=\"{{ name }}\"\r\n        class=\"col-xs-12 control-label\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\r\n        [class.required]=\"isrequired\">\r\n        <span class=\"text\">{{ label }}</span>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [class]=\"HelptextTooltipIcon\"\r\n                style=\"margin-left: 5px\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-xs-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\r\n        <div\r\n            style=\"position: relative\"\r\n            [style.width.px]=\"componentHeight === ControlHeight.Small ? 160 : componentHeight === ControlHeight.Large ? 230 : 180\">\r\n            <div\r\n                class=\"datetime-textbox input-group\"\r\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\r\n                <input\r\n                    id=\"{{ name }}\"\r\n                    name=\"{{ name }}\"\r\n                    type=\"text\"\r\n                    class=\"form-control date-control\"\r\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n                    [ngClass]=\"[componentHeight | toControlHeight]\"\r\n                    [imask]=\"imaskDate\"\r\n                    [attr.placeholder]=\"placeholder\"\r\n                    [value]=\"valuestring\"\r\n                    (blur)=\"onTouch()\"\r\n                    (accept)=\"setValueString($event)\"\r\n                    [disabled]=\"isdisabled\"\r\n                    (click)=\"showDateSelector()\" />\r\n                <span class=\"input-group-btn\">\r\n                    <button\r\n                        #pickerbutton\r\n                        class=\"btn btn-default\"\r\n                        type=\"button\"\r\n                        (click)=\"showDateSelector()\"\r\n                        [disabled]=\"isdisabled\">\r\n                        <i [class]=\"IconSelector\"></i>\r\n                    </button>\r\n                </span>\r\n            </div>\r\n            <p\r\n                *ngIf=\"helptextmode === 'text' && helptext\"\r\n                class=\"help-block\">\r\n                {{ helptext }}\r\n            </p>\r\n            <div\r\n                class=\"help-block help-block-error\"\r\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\r\n                {{ GetErrorMessage() | async }}\r\n            </div>\r\n\r\n            <div\r\n                #picker\r\n                *ngIf=\"_showselector\">\r\n                <div\r\n                    class=\"popover in\"\r\n                    role=\"tooltip\"\r\n                    style=\"display: block; max-width: unset; margin: 0\"\r\n                    [class.bottom]=\"GetPickerPosition() == TooltipPosition.bottom || GetPickerPosition() == TooltipPosition.bottomend\"\r\n                    [class.top]=\"GetPickerPosition() == TooltipPosition.top || GetPickerPosition() == TooltipPosition.topend\"\r\n                    [style.left.px]=\"posPopupLeft\"\r\n                    [style.top.px]=\"posPopupTop\">\r\n                    <div\r\n                        #pickerarrow\r\n                        style=\"margin: 0\"\r\n                        class=\"arrow\"\r\n                        [style.top.px]=\"posArrowTop\"\r\n                        [style.left.px]=\"posArrowLeft\">\r\n                    </div>\r\n\r\n                    <div class=\"popover-content\">\r\n                        <sac-dateselector\r\n                            *ngIf=\"_showselector\"\r\n                            [initialvalue]=\"value\"\r\n                            (selectdate)=\"dateselect($event)\"\r\n                            dateselection=\"true\"\r\n                            timeselection=\"true\"></sac-dateselector>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n            class=\"form-control-static\"\r\n            style=\"margin-left: 5px\">\r\n            <sac-tooltip\r\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n                [tooltiptext]=\"helptext\"\r\n                [inlinemode]=\"true\">\r\n                <span\r\n                    [class]=\"HelptextTooltipIcon\"\r\n                    style=\"margin-left: 5px; margin-right: 5px\">\r\n                </span>\r\n            </sac-tooltip>\r\n        </div>\r\n    </div>\r\n</div>\r\n", components: [{ type: SacTooltipComponent, selector: "sac-tooltip" }, { type: SacDateSelectorComponent, selector: "sac-dateselector" }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.IMaskDirective, selector: "[imask]", inputs: ["imaskElement", "imask", "unmask"], outputs: ["accept", "complete"], exportAs: ["imask"] }], pipes: { "toLabelHeight": SacToLabelHeightPipe, "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: [
@@ -722,13 +922,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => SacDateTimeComponent),
                         },
-                    ], template: "<div\r\n  class=\"row form-group\"\r\n  [class.has-error]=\"invalid && (dirty || touched)\"\r\n  [ngClass]=\"componentHeight | toLabelHeight\"\r\n>\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-xs-12 control-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}\r\n    <sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n    >\r\n      <span\r\n        [class]=\"HelptextTooltipIcon\"\r\n        style=\"margin-left: 5px\"\r\n      ></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-xs-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      style=\"position: relative\"\r\n      [style.width.px]=\"componentHeight === ControlHeight.Small ? 160 : componentHeight === ControlHeight.Large ? 230 : 180\"\r\n    >\r\n      <div\r\n        id=\"{{name}}\"\r\n        class=\"datetime-textbox input-group\"\r\n        [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n        [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n      >\r\n        <input\r\n          id=\"{{name}}\"\r\n          name=\"{{name}}\"\r\n          type=\"text\"\r\n          class=\"form-control\"\r\n          [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n          [ngClass]=\"[componentHeight | toControlHeight]\"\r\n          [imask]=\"imaskDate\"\r\n          [attr.placeholder]=\"placeholder\"\r\n          [value]=\"valuestring\"\r\n          (blur)=\"onTouch()\"\r\n          (accept)=\"setValueString($event)\"\r\n          [disabled]=\"isdisabled\"\r\n          (click)=\"showDateSelector()\"\r\n        />\r\n        <span class=\"input-group-btn\">\r\n          <button\r\n            class=\"btn btn-default\"\r\n            type=\"button\"\r\n            (click)=\"showDateSelector()\"\r\n            [disabled]=\"isdisabled\"\r\n          >\r\n            <i [class]=\"IconSelector\"></i>\r\n          </button>\r\n        </span>\r\n      </div>\r\n      <p *ngIf=\"helptextmode === 'text' && helptext\" class=\"help-block\">\r\n        {{helptext}}\r\n      </p>\r\n      <div\r\n        class=\"help-block help-block-error\"\r\n        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      >\r\n        {{ GetErrorMessage() | async }}\r\n      </div>\r\n\r\n      <div\r\n        class=\"popover bottom in\"\r\n        role=\"tooltip\"\r\n        *ngIf=\"_showselector\"\r\n        style=\"display: block; left: 0px; right: unset; max-width: 325px\"\r\n        [style.top.px]=\"componentHeight === ControlHeight.Large ? 46 : 34\"\r\n      >\r\n        <div\r\n          class=\"arrow\"\r\n          [style.left.px]=\"componentHeight === ControlHeight.Small ? 140 : componentHeight === ControlHeight.Large ? 205 : 160\"\r\n          style=\"right: unset\"\r\n        ></div>\r\n        <h3 class=\"popover-title\" style=\"display: none\"></h3>\r\n        <div class=\"popover-content\">\r\n          <sac-dateselector\r\n            *ngIf=\"_showselector\"\r\n            [initialvalue]=\"value\"\r\n            (selectdate)=\"dateselect($event)\"\r\n            dateselection=\"true\"\r\n            timeselection=\"true\"\r\n          ></sac-dateselector>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+                    ], template: "<div\r\n    class=\"row form-group\"\r\n    [class.has-error]=\"invalid && (dirty || touched)\"\r\n    [ngClass]=\"componentHeight | toLabelHeight\">\r\n    <label\r\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n        id=\"{{ name }}label\"\r\n        for=\"{{ name }}\"\r\n        class=\"col-xs-12 control-label\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\r\n        [class.required]=\"isrequired\">\r\n        <span class=\"text\">{{ label }}</span>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [class]=\"HelptextTooltipIcon\"\r\n                style=\"margin-left: 5px\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-xs-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\r\n        <div\r\n            style=\"position: relative\"\r\n            [style.width.px]=\"componentHeight === ControlHeight.Small ? 160 : componentHeight === ControlHeight.Large ? 230 : 180\">\r\n            <div\r\n                class=\"datetime-textbox input-group\"\r\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\r\n                <input\r\n                    id=\"{{ name }}\"\r\n                    name=\"{{ name }}\"\r\n                    type=\"text\"\r\n                    class=\"form-control date-control\"\r\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n                    [ngClass]=\"[componentHeight | toControlHeight]\"\r\n                    [imask]=\"imaskDate\"\r\n                    [attr.placeholder]=\"placeholder\"\r\n                    [value]=\"valuestring\"\r\n                    (blur)=\"onTouch()\"\r\n                    (accept)=\"setValueString($event)\"\r\n                    [disabled]=\"isdisabled\"\r\n                    (click)=\"showDateSelector()\" />\r\n                <span class=\"input-group-btn\">\r\n                    <button\r\n                        #pickerbutton\r\n                        class=\"btn btn-default\"\r\n                        type=\"button\"\r\n                        (click)=\"showDateSelector()\"\r\n                        [disabled]=\"isdisabled\">\r\n                        <i [class]=\"IconSelector\"></i>\r\n                    </button>\r\n                </span>\r\n            </div>\r\n            <p\r\n                *ngIf=\"helptextmode === 'text' && helptext\"\r\n                class=\"help-block\">\r\n                {{ helptext }}\r\n            </p>\r\n            <div\r\n                class=\"help-block help-block-error\"\r\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\r\n                {{ GetErrorMessage() | async }}\r\n            </div>\r\n\r\n            <div\r\n                #picker\r\n                *ngIf=\"_showselector\">\r\n                <div\r\n                    class=\"popover in\"\r\n                    role=\"tooltip\"\r\n                    style=\"display: block; max-width: unset; margin: 0\"\r\n                    [class.bottom]=\"GetPickerPosition() == TooltipPosition.bottom || GetPickerPosition() == TooltipPosition.bottomend\"\r\n                    [class.top]=\"GetPickerPosition() == TooltipPosition.top || GetPickerPosition() == TooltipPosition.topend\"\r\n                    [style.left.px]=\"posPopupLeft\"\r\n                    [style.top.px]=\"posPopupTop\">\r\n                    <div\r\n                        #pickerarrow\r\n                        style=\"margin: 0\"\r\n                        class=\"arrow\"\r\n                        [style.top.px]=\"posArrowTop\"\r\n                        [style.left.px]=\"posArrowLeft\">\r\n                    </div>\r\n\r\n                    <div class=\"popover-content\">\r\n                        <sac-dateselector\r\n                            *ngIf=\"_showselector\"\r\n                            [initialvalue]=\"value\"\r\n                            (selectdate)=\"dateselect($event)\"\r\n                            dateselection=\"true\"\r\n                            timeselection=\"true\"></sac-dateselector>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n            class=\"form-control-static\"\r\n            style=\"margin-left: 5px\">\r\n            <sac-tooltip\r\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n                [tooltiptext]=\"helptext\"\r\n                [inlinemode]=\"true\">\r\n                <span\r\n                    [class]=\"HelptextTooltipIcon\"\r\n                    style=\"margin-left: 5px; margin-right: 5px\">\r\n                </span>\r\n            </sac-tooltip>\r\n        </div>\r\n    </div>\r\n</div>\r\n" }]
         }], ctorParameters: function () {
         return [{ type: SacFormLayoutDirective, decorators: [{
                         type: Host
                     }, {
                         type: Optional
-                    }] }, { type: i0.Injector }, { type: i0.ElementRef }];
+                    }] }, { type: i0.Injector }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }];
     } });
 
 class SacTimeComponent extends SacTimeCommon {
@@ -738,12 +938,13 @@ class SacTimeComponent extends SacTimeCommon {
      * @param formLayout SacFormLayout to define scoped layout settings
      * @param injector Injector for injecting services
      * @param elementRef Reference to html dom element
+     * @param cdRef  Change Dectection Servie
      */
-    constructor(formLayout, injector, elementRef) {
-        super(formLayout, injector, elementRef);
+    constructor(formLayout, injector, elementRef, cdRef) {
+        super(formLayout, injector, elementRef, cdRef);
     }
 }
-SacTimeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacTimeComponent, deps: [{ token: SacFormLayoutDirective, host: true, optional: true }, { token: i0.Injector }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+SacTimeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacTimeComponent, deps: [{ token: SacFormLayoutDirective, host: true, optional: true }, { token: i0.Injector }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 SacTimeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacTimeComponent, selector: "sac-time", providers: [
         {
             provide: NG_VALUE_ACCESSOR,
@@ -755,7 +956,7 @@ SacTimeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
             multi: true,
             useExisting: forwardRef(() => SacTimeComponent),
         },
-    ], usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"row form-group\"\r\n  [class.has-error]=\"invalid && (dirty || touched)\"\r\n  [ngClass]=\"componentHeight | toLabelHeight\"\r\n>\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-xs-12 control-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}\r\n    <sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n    >\r\n      <span\r\n        [class]=\"HelptextTooltipIcon\"\r\n        style=\"margin-left: 5px\"\r\n      ></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-xs-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      style=\"position: relative\"\r\n      [style.width.px]=\"componentHeight === ControlHeight.Small ? 120 : componentHeight === ControlHeight.Large ? 160 : 140\"\r\n    >\r\n      <div\r\n        class=\"input-group\"\r\n        [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n        [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n      >\r\n        <input\r\n          id=\"{{name}}\"\r\n          name=\"{{name}}\"\r\n          type=\"text\"\r\n          [value]=\"valuestring\"\r\n          maxlength=\"6\"\r\n          [imask]=\"imaskDate\"\r\n          size=\"6\"\r\n          class=\"form-control\"\r\n          [attr.placeholder]=\"placeholder\"\r\n          data-error-msg=\"ctl00_cphContent_ctl00_ucPublicationDetail_dtpValidFrom_timeTextBoxTypeValidator\"\r\n          [ngClass]=\"{'is-invalid': invalid && (dirty || touched) }\"\r\n          (blur)=\"onTouch()\"\r\n          (accept)=\"setValueString($event)\"\r\n          [disabled]=\"isdisabled\"\r\n        />\r\n        <span class=\"input-group-btn\">\r\n          <button\r\n            class=\"btn btn-default\"\r\n            type=\"button\"\r\n            (click)=\"showTimeSelector()\"\r\n            [disabled]=\"isdisabled\"\r\n          >\r\n            <i [class]=\"IconSelector\"></i>\r\n          </button>\r\n        </span>\r\n      </div>\r\n      <p *ngIf=\"helptextmode === 'text' && helptext\" class=\"help-block\">\r\n        {{helptext}}\r\n      </p>\r\n      <div\r\n        class=\"help-block help-block-error\"\r\n        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      >\r\n        {{ GetErrorMessage() | async }}\r\n      </div>\r\n      <div\r\n        class=\"popover bottom in\"\r\n        role=\"tooltip\"\r\n        *ngIf=\"_showselector\"\r\n        style=\"display: block; left: 0px; right: unset; max-width: 325px\"\r\n        [style.top.px]=\"componentHeight === ControlHeight.Large ? 46 : 34\"\r\n      >\r\n        <div\r\n          class=\"arrow\"\r\n          [style.left.px]=\"componentHeight === ControlHeight.Small ? 102 : componentHeight === ControlHeight.Large ? 135 : 120\"\r\n          style=\"right: unset\"\r\n        ></div>\r\n        <h3 class=\"popover-title\" style=\"display: none\"></h3>\r\n        <div class=\"popover-content\">\r\n          <sac-dateselector\r\n            *ngIf=\"_showselector\"\r\n            [initialvalue]=\"value\"\r\n            (selectdate)=\"timeselect($event)\"\r\n            timeselection=\"true\"\r\n          ></sac-dateselector>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", components: [{ type: SacTooltipComponent, selector: "sac-tooltip" }, { type: SacDateSelectorComponent, selector: "sac-dateselector" }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.IMaskDirective, selector: "[imask]", inputs: ["imaskElement", "imask", "unmask"], outputs: ["accept", "complete"], exportAs: ["imask"] }], pipes: { "toLabelHeight": SacToLabelHeightPipe, "toLabelWidthCss": SacToLabelWidthCssPipe, "toControlWidthCss": SacToControlWidthCssPipe, "async": i3.AsyncPipe } });
+    ], usesInheritance: true, ngImport: i0, template: "<div\r\n    class=\"row form-group\"\r\n    [class.has-error]=\"invalid && (dirty || touched)\"\r\n    [ngClass]=\"componentHeight | toLabelHeight\">\r\n    <label\r\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n        id=\"{{ name }}label\"\r\n        for=\"{{ name }}\"\r\n        class=\"col-xs-12 control-label\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\r\n        [class.required]=\"isrequired\">\r\n        <span class=\"text\">{{ label }}</span>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [class]=\"HelptextTooltipIcon\"\r\n                style=\"margin-left: 5px\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-xs-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\r\n        <div\r\n            style=\"position: relative\"\r\n            [style.width.px]=\"componentHeight === ControlHeight.Small ? 120 : componentHeight === ControlHeight.Large ? 160 : 140\">\r\n            <div\r\n                class=\"datetime-textbox input-group\"\r\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\r\n                <input\r\n                    id=\"{{ name }}\"\r\n                    name=\"{{ name }}\"\r\n                    type=\"text\"\r\n                    class=\"form-control time-control\"\r\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n                    [ngClass]=\"[componentHeight | toControlHeight]\"\r\n                    [imask]=\"imaskDate\"\r\n                    [attr.placeholder]=\"placeholder\"\r\n                    [value]=\"valuestring\"\r\n                    (blur)=\"onTouch()\"\r\n                    (accept)=\"setValueString($event)\"\r\n                    [disabled]=\"isdisabled\"\r\n                    (click)=\"showTimeSelector()\"\r\n                    maxlength=\"6\"\r\n                    size=\"6\" />\r\n                <span class=\"input-group-btn\">\r\n                    <button\r\n                        #pickerbutton\r\n                        class=\"btn btn-default\"\r\n                        type=\"button\"\r\n                        (click)=\"showTimeSelector()\"\r\n                        [disabled]=\"isdisabled\">\r\n                        <i [class]=\"IconSelector\"></i>\r\n                    </button>\r\n                </span>\r\n            </div>\r\n            <p\r\n                *ngIf=\"helptextmode === 'text' && helptext\"\r\n                class=\"help-block\">\r\n                {{ helptext }}\r\n            </p>\r\n            <div\r\n                class=\"help-block help-block-error\"\r\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\r\n                {{ GetErrorMessage() | async }}\r\n            </div>\r\n\r\n            <div\r\n                #picker\r\n                *ngIf=\"_showselector\">\r\n                <div\r\n                    class=\"popover in\"\r\n                    role=\"tooltip\"\r\n                    style=\"display: block; max-width: unset; margin: 0\"\r\n                    [class.bottom]=\"GetPickerPosition() == TooltipPosition.bottom || GetPickerPosition() == TooltipPosition.bottomend\"\r\n                    [class.top]=\"GetPickerPosition() == TooltipPosition.top || GetPickerPosition() == TooltipPosition.topend\"\r\n                    [style.left.px]=\"posPopupLeft\"\r\n                    [style.top.px]=\"posPopupTop\">\r\n                    <div\r\n                        #pickerarrow\r\n                        style=\"margin: 0\"\r\n                        class=\"arrow\"\r\n                        [style.top.px]=\"posArrowTop\"\r\n                        [style.left.px]=\"posArrowLeft\">\r\n                    </div>\r\n\r\n                    <div class=\"popover-content\">\r\n                        <sac-dateselector\r\n                            *ngIf=\"_showselector\"\r\n                            [initialvalue]=\"value\"\r\n                            (selectdate)=\"timeselect($event)\"\r\n                            timeselection=\"true\"></sac-dateselector>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n            class=\"form-control-static\"\r\n            style=\"margin-left: 5px\">\r\n            <sac-tooltip\r\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n                [tooltiptext]=\"helptext\"\r\n                [inlinemode]=\"true\">\r\n                <span\r\n                    [class]=\"HelptextTooltipIcon\"\r\n                    style=\"margin-left: 5px; margin-right: 5px\">\r\n                </span>\r\n            </sac-tooltip>\r\n        </div>\r\n    </div>\r\n</div>\r\n", components: [{ type: SacTooltipComponent, selector: "sac-tooltip" }, { type: SacDateSelectorComponent, selector: "sac-dateselector" }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.IMaskDirective, selector: "[imask]", inputs: ["imaskElement", "imask", "unmask"], outputs: ["accept", "complete"], exportAs: ["imask"] }], pipes: { "toLabelHeight": SacToLabelHeightPipe, "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: [
@@ -769,13 +970,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => SacTimeComponent),
                         },
-                    ], template: "<div\r\n  class=\"row form-group\"\r\n  [class.has-error]=\"invalid && (dirty || touched)\"\r\n  [ngClass]=\"componentHeight | toLabelHeight\"\r\n>\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-xs-12 control-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}\r\n    <sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n    >\r\n      <span\r\n        [class]=\"HelptextTooltipIcon\"\r\n        style=\"margin-left: 5px\"\r\n      ></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-xs-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      style=\"position: relative\"\r\n      [style.width.px]=\"componentHeight === ControlHeight.Small ? 120 : componentHeight === ControlHeight.Large ? 160 : 140\"\r\n    >\r\n      <div\r\n        class=\"input-group\"\r\n        [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n        [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n      >\r\n        <input\r\n          id=\"{{name}}\"\r\n          name=\"{{name}}\"\r\n          type=\"text\"\r\n          [value]=\"valuestring\"\r\n          maxlength=\"6\"\r\n          [imask]=\"imaskDate\"\r\n          size=\"6\"\r\n          class=\"form-control\"\r\n          [attr.placeholder]=\"placeholder\"\r\n          data-error-msg=\"ctl00_cphContent_ctl00_ucPublicationDetail_dtpValidFrom_timeTextBoxTypeValidator\"\r\n          [ngClass]=\"{'is-invalid': invalid && (dirty || touched) }\"\r\n          (blur)=\"onTouch()\"\r\n          (accept)=\"setValueString($event)\"\r\n          [disabled]=\"isdisabled\"\r\n        />\r\n        <span class=\"input-group-btn\">\r\n          <button\r\n            class=\"btn btn-default\"\r\n            type=\"button\"\r\n            (click)=\"showTimeSelector()\"\r\n            [disabled]=\"isdisabled\"\r\n          >\r\n            <i [class]=\"IconSelector\"></i>\r\n          </button>\r\n        </span>\r\n      </div>\r\n      <p *ngIf=\"helptextmode === 'text' && helptext\" class=\"help-block\">\r\n        {{helptext}}\r\n      </p>\r\n      <div\r\n        class=\"help-block help-block-error\"\r\n        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      >\r\n        {{ GetErrorMessage() | async }}\r\n      </div>\r\n      <div\r\n        class=\"popover bottom in\"\r\n        role=\"tooltip\"\r\n        *ngIf=\"_showselector\"\r\n        style=\"display: block; left: 0px; right: unset; max-width: 325px\"\r\n        [style.top.px]=\"componentHeight === ControlHeight.Large ? 46 : 34\"\r\n      >\r\n        <div\r\n          class=\"arrow\"\r\n          [style.left.px]=\"componentHeight === ControlHeight.Small ? 102 : componentHeight === ControlHeight.Large ? 135 : 120\"\r\n          style=\"right: unset\"\r\n        ></div>\r\n        <h3 class=\"popover-title\" style=\"display: none\"></h3>\r\n        <div class=\"popover-content\">\r\n          <sac-dateselector\r\n            *ngIf=\"_showselector\"\r\n            [initialvalue]=\"value\"\r\n            (selectdate)=\"timeselect($event)\"\r\n            timeselection=\"true\"\r\n          ></sac-dateselector>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+                    ], template: "<div\r\n    class=\"row form-group\"\r\n    [class.has-error]=\"invalid && (dirty || touched)\"\r\n    [ngClass]=\"componentHeight | toLabelHeight\">\r\n    <label\r\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n        id=\"{{ name }}label\"\r\n        for=\"{{ name }}\"\r\n        class=\"col-xs-12 control-label\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\r\n        [class.required]=\"isrequired\">\r\n        <span class=\"text\">{{ label }}</span>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [class]=\"HelptextTooltipIcon\"\r\n                style=\"margin-left: 5px\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-xs-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\r\n        <div\r\n            style=\"position: relative\"\r\n            [style.width.px]=\"componentHeight === ControlHeight.Small ? 120 : componentHeight === ControlHeight.Large ? 160 : 140\">\r\n            <div\r\n                class=\"datetime-textbox input-group\"\r\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\r\n                <input\r\n                    id=\"{{ name }}\"\r\n                    name=\"{{ name }}\"\r\n                    type=\"text\"\r\n                    class=\"form-control time-control\"\r\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n                    [ngClass]=\"[componentHeight | toControlHeight]\"\r\n                    [imask]=\"imaskDate\"\r\n                    [attr.placeholder]=\"placeholder\"\r\n                    [value]=\"valuestring\"\r\n                    (blur)=\"onTouch()\"\r\n                    (accept)=\"setValueString($event)\"\r\n                    [disabled]=\"isdisabled\"\r\n                    (click)=\"showTimeSelector()\"\r\n                    maxlength=\"6\"\r\n                    size=\"6\" />\r\n                <span class=\"input-group-btn\">\r\n                    <button\r\n                        #pickerbutton\r\n                        class=\"btn btn-default\"\r\n                        type=\"button\"\r\n                        (click)=\"showTimeSelector()\"\r\n                        [disabled]=\"isdisabled\">\r\n                        <i [class]=\"IconSelector\"></i>\r\n                    </button>\r\n                </span>\r\n            </div>\r\n            <p\r\n                *ngIf=\"helptextmode === 'text' && helptext\"\r\n                class=\"help-block\">\r\n                {{ helptext }}\r\n            </p>\r\n            <div\r\n                class=\"help-block help-block-error\"\r\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\r\n                {{ GetErrorMessage() | async }}\r\n            </div>\r\n\r\n            <div\r\n                #picker\r\n                *ngIf=\"_showselector\">\r\n                <div\r\n                    class=\"popover in\"\r\n                    role=\"tooltip\"\r\n                    style=\"display: block; max-width: unset; margin: 0\"\r\n                    [class.bottom]=\"GetPickerPosition() == TooltipPosition.bottom || GetPickerPosition() == TooltipPosition.bottomend\"\r\n                    [class.top]=\"GetPickerPosition() == TooltipPosition.top || GetPickerPosition() == TooltipPosition.topend\"\r\n                    [style.left.px]=\"posPopupLeft\"\r\n                    [style.top.px]=\"posPopupTop\">\r\n                    <div\r\n                        #pickerarrow\r\n                        style=\"margin: 0\"\r\n                        class=\"arrow\"\r\n                        [style.top.px]=\"posArrowTop\"\r\n                        [style.left.px]=\"posArrowLeft\">\r\n                    </div>\r\n\r\n                    <div class=\"popover-content\">\r\n                        <sac-dateselector\r\n                            *ngIf=\"_showselector\"\r\n                            [initialvalue]=\"value\"\r\n                            (selectdate)=\"timeselect($event)\"\r\n                            timeselection=\"true\"></sac-dateselector>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n            class=\"form-control-static\"\r\n            style=\"margin-left: 5px\">\r\n            <sac-tooltip\r\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n                [tooltiptext]=\"helptext\"\r\n                [inlinemode]=\"true\">\r\n                <span\r\n                    [class]=\"HelptextTooltipIcon\"\r\n                    style=\"margin-left: 5px; margin-right: 5px\">\r\n                </span>\r\n            </sac-tooltip>\r\n        </div>\r\n    </div>\r\n</div>\r\n" }]
         }], ctorParameters: function () {
         return [{ type: SacFormLayoutDirective, decorators: [{
                         type: Host
                     }, {
                         type: Optional
-                    }] }, { type: i0.Injector }, { type: i0.ElementRef }];
+                    }] }, { type: i0.Injector }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }];
     } });
 
 class SACBootstrap3DateTimeModule {
@@ -910,7 +1111,7 @@ SacGridColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             provide: SacGridColumnBaseCommon,
             useExisting: forwardRef(() => SacGridColumnComponent),
         },
-    ], usesInheritance: true, ngImport: i0, template: "<th\r\n  scope=\"col\"\r\n  *ngIf=\"IsHeader()\"\r\n  [style.width]=\"width\"\r\n  (click)=\"SortByColumn()\"\r\n>\r\n  <span>{{header}}</span>\r\n  <span\r\n    [class]=\"IconSortUp\"\r\n    style=\"padding-left: 0.5rem\"\r\n    *ngIf=\"IsSortedColumn() && GetSortDirection() ==='asc'\"\r\n  ></span>\r\n  <span\r\n    [class]=\"IconSortDown\"\r\n    style=\"padding-left: 0.5rem\"\r\n    *ngIf=\"IsSortedColumn() && GetSortDirection() ==='desc'\"\r\n  ></span>\r\n</th>\r\n<td\r\n  scope=\"col\"\r\n  *ngIf=\"IsBody()\"\r\n  [style.width]=\"width\"\r\n  [class.ellipsis]=\"IsEllipsis()\"\r\n  (click)=\"ColumnClick()\"\r\n>\r\n  <span [attr.title]=\"IsEllipsis() ? value : null\"> {{value}} </span>\r\n</td>\r\n", directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    ], usesInheritance: true, ngImport: i0, template: "<th\r\n    scope=\"col\"\r\n    *ngIf=\"IsHeader()\"\r\n    [style.width]=\"width\"\r\n    (click)=\"SortByColumn()\">\r\n    <span>{{ header }}</span>\r\n    <span\r\n        [class]=\"IconSortUp\"\r\n        style=\"padding-left: 0.5rem\"\r\n        *ngIf=\"IsSortedColumn() && GetSortDirection() === 'asc'\"></span>\r\n    <span\r\n        [class]=\"IconSortDown\"\r\n        style=\"padding-left: 0.5rem\"\r\n        *ngIf=\"IsSortedColumn() && GetSortDirection() === 'desc'\"></span>\r\n</th>\r\n<td\r\n    scope=\"col\"\r\n    *ngIf=\"IsBody()\"\r\n    [style.width]=\"width\"\r\n    [class.ellipsis]=\"IsEllipsis()\"\r\n    (click)=\"ColumnClick()\"\r\n    [style.max-width]=\"IsEllipsis() ? width : null\"\r\n    [style.overflow]=\"IsEllipsis() ? 'hidden' : null\"\r\n    [style.text-overflow]=\"IsEllipsis() ? 'ellipsis' : null\"\r\n    [style.white-space]=\"IsEllipsis() ? 'nowrap' : null\">\r\n    <span\r\n        [attr.title]=\"IsEllipsis() ? value : null\"\r\n        [innerHtml]=\"value\"></span>\r\n</td>\r\n", 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: [
@@ -918,7 +1119,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                             provide: SacGridColumnBaseCommon,
                             useExisting: forwardRef(() => SacGridColumnComponent),
                         },
-                    ], template: "<th\r\n  scope=\"col\"\r\n  *ngIf=\"IsHeader()\"\r\n  [style.width]=\"width\"\r\n  (click)=\"SortByColumn()\"\r\n>\r\n  <span>{{header}}</span>\r\n  <span\r\n    [class]=\"IconSortUp\"\r\n    style=\"padding-left: 0.5rem\"\r\n    *ngIf=\"IsSortedColumn() && GetSortDirection() ==='asc'\"\r\n  ></span>\r\n  <span\r\n    [class]=\"IconSortDown\"\r\n    style=\"padding-left: 0.5rem\"\r\n    *ngIf=\"IsSortedColumn() && GetSortDirection() ==='desc'\"\r\n  ></span>\r\n</th>\r\n<td\r\n  scope=\"col\"\r\n  *ngIf=\"IsBody()\"\r\n  [style.width]=\"width\"\r\n  [class.ellipsis]=\"IsEllipsis()\"\r\n  (click)=\"ColumnClick()\"\r\n>\r\n  <span [attr.title]=\"IsEllipsis() ? value : null\"> {{value}} </span>\r\n</td>\r\n" }]
+                    ], template: "<th\r\n    scope=\"col\"\r\n    *ngIf=\"IsHeader()\"\r\n    [style.width]=\"width\"\r\n    (click)=\"SortByColumn()\">\r\n    <span>{{ header }}</span>\r\n    <span\r\n        [class]=\"IconSortUp\"\r\n        style=\"padding-left: 0.5rem\"\r\n        *ngIf=\"IsSortedColumn() && GetSortDirection() === 'asc'\"></span>\r\n    <span\r\n        [class]=\"IconSortDown\"\r\n        style=\"padding-left: 0.5rem\"\r\n        *ngIf=\"IsSortedColumn() && GetSortDirection() === 'desc'\"></span>\r\n</th>\r\n<td\r\n    scope=\"col\"\r\n    *ngIf=\"IsBody()\"\r\n    [style.width]=\"width\"\r\n    [class.ellipsis]=\"IsEllipsis()\"\r\n    (click)=\"ColumnClick()\"\r\n    [style.max-width]=\"IsEllipsis() ? width : null\"\r\n    [style.overflow]=\"IsEllipsis() ? 'hidden' : null\"\r\n    [style.text-overflow]=\"IsEllipsis() ? 'ellipsis' : null\"\r\n    [style.white-space]=\"IsEllipsis() ? 'nowrap' : null\">\r\n    <span\r\n        [attr.title]=\"IsEllipsis() ? value : null\"\r\n        [innerHtml]=\"value\"></span>\r\n</td>\r\n" }]
         }], ctorParameters: function () { return [{ type: SacGridComponent }, { type: i0.Injector }, { type: i0.ElementRef }]; } });
 
 class SacGridColumnActionComponent extends SacGridColumnActionCommon {
@@ -1020,7 +1221,7 @@ SacInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             multi: true,
             useExisting: forwardRef(() => SacInputComponent),
         },
-    ], usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"row form-group\"\r\n  [class.has-error]=\"invalid && (dirty || touched)\"\r\n  [ngClass]=\"componentHeight | toLabelHeight\"\r\n>\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-xs-12 control-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}\r\n    <sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n    >\r\n      <span\r\n        [class]=\"HelptextTooltipIcon\"\r\n        style=\"margin-left: 5px\"\r\n      ></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-xs-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <input\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      type=\"text\"\r\n      class=\"form-control\"\r\n      [ngClass]=\"[componentHeight | toControlHeight]\"\r\n      [value]=\"value\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      (blur)=\"onTouch()\"\r\n      (input)=\"setValue($event.target.value)\"\r\n      [attr.maxlength]=\"maxlength\"\r\n      [disabled]=\"isdisabled\"\r\n      [readonly]=\"readonly\"\r\n    />\r\n    <p *ngIf=\"helptextmode === 'text' && helptext\" class=\"help-block\">\r\n      {{helptext}}\r\n    </p>\r\n    <label\r\n      for=\"{{name}}\"\r\n      class=\"form-label-adaptive form-label-fixed\"\r\n      [ngClass]=\"{ 'required': isrequired }\"\r\n      *ngIf=\"isAdaptiveLabel && !disablelabel\"\r\n      >{{label}}</label\r\n    >\r\n    <div\r\n      class=\"help-block help-block-error\"\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n", components: [{ type: SacTooltipComponent, selector: "sac-tooltip" }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "toLabelHeight": SacToLabelHeightPipe, "toLabelWidthCss": SacToLabelWidthCssPipe, "toControlWidthCss": SacToControlWidthCssPipe, "toControlHeight": SacToControlHeightPipe, "async": i3.AsyncPipe } });
+    ], usesInheritance: true, ngImport: i0, template: "<div\r\n    class=\"row form-group\"\r\n    [class.has-error]=\"invalid && (dirty || touched)\"\r\n    [ngClass]=\"componentHeight | toLabelHeight\">\r\n    <label\r\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n        id=\"{{ name }}label\"\r\n        for=\"{{ name }}\"\r\n        class=\"col-xs-12 control-label\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\r\n        [class.required]=\"isrequired\">\r\n        <span class=\"text\">{{ label }}</span>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [class]=\"HelptextTooltipIcon\"\r\n                style=\"margin-left: 5px\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-xs-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\r\n        <div [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\r\n            <input\r\n                id=\"{{ name }}\"\r\n                name=\"{{ name }}\"\r\n                type=\"text\"\r\n                class=\"form-control\"\r\n                [ngClass]=\"[componentHeight | toControlHeight]\"\r\n                [value]=\"value\"\r\n                [attr.placeholder]=\"placeholder\"\r\n                (blur)=\"onTouch()\"\r\n                (input)=\"setValue($event.target.value)\"\r\n                [attr.maxlength]=\"maxlength\"\r\n                [disabled]=\"isdisabled\"\r\n                [readonly]=\"readonly\" />\r\n\r\n            <div\r\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n                class=\"form-control-static\"\r\n                style=\"margin-left: 5px\">\r\n                <sac-tooltip\r\n                    *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n                    [tooltiptext]=\"helptext\"\r\n                    [inlinemode]=\"true\">\r\n                    <span\r\n                        [class]=\"HelptextTooltipIcon\"\r\n                        style=\"margin-left: 5px; margin-right: 5px\">\r\n                    </span>\r\n                </sac-tooltip>\r\n            </div>\r\n        </div>\r\n\r\n        <p\r\n            *ngIf=\"helptextmode === 'text' && helptext\"\r\n            class=\"help-block\">\r\n            {{ helptext }}\r\n        </p>\r\n\r\n        <div\r\n            class=\"help-block help-block-error\"\r\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\r\n            {{ GetErrorMessage() | async }}\r\n        </div>\r\n    </div>\r\n</div>\r\n", components: [{ type: SacTooltipComponent, selector: "sac-tooltip" }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "toLabelHeight": SacToLabelHeightPipe, "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: [
@@ -1030,7 +1231,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => SacInputComponent),
                         },
-                    ], template: "<div\r\n  class=\"row form-group\"\r\n  [class.has-error]=\"invalid && (dirty || touched)\"\r\n  [ngClass]=\"componentHeight | toLabelHeight\"\r\n>\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-xs-12 control-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}\r\n    <sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n    >\r\n      <span\r\n        [class]=\"HelptextTooltipIcon\"\r\n        style=\"margin-left: 5px\"\r\n      ></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-xs-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <input\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      type=\"text\"\r\n      class=\"form-control\"\r\n      [ngClass]=\"[componentHeight | toControlHeight]\"\r\n      [value]=\"value\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      (blur)=\"onTouch()\"\r\n      (input)=\"setValue($event.target.value)\"\r\n      [attr.maxlength]=\"maxlength\"\r\n      [disabled]=\"isdisabled\"\r\n      [readonly]=\"readonly\"\r\n    />\r\n    <p *ngIf=\"helptextmode === 'text' && helptext\" class=\"help-block\">\r\n      {{helptext}}\r\n    </p>\r\n    <label\r\n      for=\"{{name}}\"\r\n      class=\"form-label-adaptive form-label-fixed\"\r\n      [ngClass]=\"{ 'required': isrequired }\"\r\n      *ngIf=\"isAdaptiveLabel && !disablelabel\"\r\n      >{{label}}</label\r\n    >\r\n    <div\r\n      class=\"help-block help-block-error\"\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+                    ], template: "<div\r\n    class=\"row form-group\"\r\n    [class.has-error]=\"invalid && (dirty || touched)\"\r\n    [ngClass]=\"componentHeight | toLabelHeight\">\r\n    <label\r\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n        id=\"{{ name }}label\"\r\n        for=\"{{ name }}\"\r\n        class=\"col-xs-12 control-label\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\r\n        [class.required]=\"isrequired\">\r\n        <span class=\"text\">{{ label }}</span>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [class]=\"HelptextTooltipIcon\"\r\n                style=\"margin-left: 5px\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-xs-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\r\n        <div [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\r\n            <input\r\n                id=\"{{ name }}\"\r\n                name=\"{{ name }}\"\r\n                type=\"text\"\r\n                class=\"form-control\"\r\n                [ngClass]=\"[componentHeight | toControlHeight]\"\r\n                [value]=\"value\"\r\n                [attr.placeholder]=\"placeholder\"\r\n                (blur)=\"onTouch()\"\r\n                (input)=\"setValue($event.target.value)\"\r\n                [attr.maxlength]=\"maxlength\"\r\n                [disabled]=\"isdisabled\"\r\n                [readonly]=\"readonly\" />\r\n\r\n            <div\r\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n                class=\"form-control-static\"\r\n                style=\"margin-left: 5px\">\r\n                <sac-tooltip\r\n                    *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n                    [tooltiptext]=\"helptext\"\r\n                    [inlinemode]=\"true\">\r\n                    <span\r\n                        [class]=\"HelptextTooltipIcon\"\r\n                        style=\"margin-left: 5px; margin-right: 5px\">\r\n                    </span>\r\n                </sac-tooltip>\r\n            </div>\r\n        </div>\r\n\r\n        <p\r\n            *ngIf=\"helptextmode === 'text' && helptext\"\r\n            class=\"help-block\">\r\n            {{ helptext }}\r\n        </p>\r\n\r\n        <div\r\n            class=\"help-block help-block-error\"\r\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\r\n            {{ GetErrorMessage() | async }}\r\n        </div>\r\n    </div>\r\n</div>\r\n" }]
         }], ctorParameters: function () {
         return [{ type: SacFormLayoutDirective, decorators: [{
                         type: Host
@@ -1074,7 +1275,7 @@ SacInputAreaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             multi: true,
             useExisting: forwardRef(() => SacInputAreaComponent),
         },
-    ], usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"row form-group\"\r\n  [class.has-error]=\"invalid && (dirty || touched)\"\r\n  [ngClass]=\"componentHeight | toLabelHeight\"\r\n>\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-xs-12 control-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}\r\n    <sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n    >\r\n      <span\r\n        [class]=\"HelptextTooltipIcon\"\r\n        style=\"margin-left: 5px\"\r\n      ></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-xs-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <textarea\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      type=\"\"\r\n      class=\"form-control\"\r\n      [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n      [class.validation-error]=\"invalid && (dirty || touched)\"\r\n      [class.required]=\"isrequired\"\r\n      [ngClass]=\"[componentHeight | toControlHeight]\"\r\n      [value]=\"value\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      (blur)=\"onTouch()\"\r\n      (input)=\"setValue($event.target.value)\"\r\n      (keypress)=\"onKeyPress($event)\"\r\n      [attr.rows]=\"rows\"\r\n      [disabled]=\"isdisabled\"\r\n      [readonly]=\"readonly\"\r\n    ></textarea>\r\n    <p *ngIf=\"helptextmode === 'text' && helptext\" class=\"help-block\">\r\n      {{helptext}}\r\n    </p>\r\n    <label\r\n      for=\"{{name}}\"\r\n      class=\"form-label-adaptive form-label-fixed\"\r\n      [ngClass]=\"{ 'required': isrequired }\"\r\n      *ngIf=\"isAdaptiveLabel && !disablelabel\"\r\n      >{{label}}</label\r\n    >\r\n    <div\r\n      class=\"help-block help-block-error\"\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n", components: [{ type: SacTooltipComponent, selector: "sac-tooltip" }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "toLabelHeight": SacToLabelHeightPipe, "toLabelWidthCss": SacToLabelWidthCssPipe, "toControlWidthCss": SacToControlWidthCssPipe, "toControlHeight": SacToControlHeightPipe, "async": i3.AsyncPipe } });
+    ], usesInheritance: true, ngImport: i0, template: "<div\r\n    class=\"row form-group\"\r\n    [class.has-error]=\"invalid && (dirty || touched)\"\r\n    [ngClass]=\"componentHeight | toLabelHeight\">\r\n    <label\r\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n        id=\"{{ name }}label\"\r\n        for=\"{{ name }}\"\r\n        class=\"col-xs-12 control-label\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\r\n        [class.required]=\"isrequired\">\r\n        <span class=\"text\">{{ label }}</span>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [class]=\"HelptextTooltipIcon\"\r\n                style=\"margin-left: 5px\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-xs-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\r\n        <div [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\r\n            <textarea\r\n                id=\"{{ name }}\"\r\n                name=\"{{ name }}\"\r\n                type=\"\"\r\n                class=\"form-control\"\r\n                [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n                [class.validation-error]=\"invalid && (dirty || touched)\"\r\n                [class.required]=\"isrequired\"\r\n                [ngClass]=\"[componentHeight | toControlHeight]\"\r\n                [value]=\"value\"\r\n                [attr.placeholder]=\"placeholder\"\r\n                (blur)=\"onTouch()\"\r\n                (input)=\"setValue($event.target.value)\"\r\n                (keypress)=\"onKeyPress($event)\"\r\n                [attr.rows]=\"rows\"\r\n                [disabled]=\"isdisabled\"\r\n                [readonly]=\"readonly\">\r\n            </textarea>\r\n\r\n            <div\r\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n                class=\"form-control-static\"\r\n                style=\"margin-left: 5px\">\r\n                <sac-tooltip\r\n                    *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n                    [tooltiptext]=\"helptext\"\r\n                    [inlinemode]=\"true\">\r\n                    <span\r\n                        [class]=\"HelptextTooltipIcon\"\r\n                        style=\"margin-left: 5px; margin-right: 5px\">\r\n                    </span>\r\n                </sac-tooltip>\r\n            </div>\r\n        </div>\r\n\r\n        <p\r\n            *ngIf=\"helptextmode === 'text' && helptext\"\r\n            class=\"help-block\">\r\n            {{ helptext }}\r\n        </p>\r\n\r\n        <div\r\n            class=\"help-block help-block-error\"\r\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\r\n            {{ GetErrorMessage() | async }}\r\n        </div>\r\n    </div>\r\n</div>\r\n", components: [{ type: SacTooltipComponent, selector: "sac-tooltip" }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "toLabelHeight": SacToLabelHeightPipe, "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: [
@@ -1088,7 +1289,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => SacInputAreaComponent),
                         },
-                    ], template: "<div\r\n  class=\"row form-group\"\r\n  [class.has-error]=\"invalid && (dirty || touched)\"\r\n  [ngClass]=\"componentHeight | toLabelHeight\"\r\n>\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-xs-12 control-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}\r\n    <sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n    >\r\n      <span\r\n        [class]=\"HelptextTooltipIcon\"\r\n        style=\"margin-left: 5px\"\r\n      ></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-xs-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <textarea\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      type=\"\"\r\n      class=\"form-control\"\r\n      [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n      [class.validation-error]=\"invalid && (dirty || touched)\"\r\n      [class.required]=\"isrequired\"\r\n      [ngClass]=\"[componentHeight | toControlHeight]\"\r\n      [value]=\"value\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      (blur)=\"onTouch()\"\r\n      (input)=\"setValue($event.target.value)\"\r\n      (keypress)=\"onKeyPress($event)\"\r\n      [attr.rows]=\"rows\"\r\n      [disabled]=\"isdisabled\"\r\n      [readonly]=\"readonly\"\r\n    ></textarea>\r\n    <p *ngIf=\"helptextmode === 'text' && helptext\" class=\"help-block\">\r\n      {{helptext}}\r\n    </p>\r\n    <label\r\n      for=\"{{name}}\"\r\n      class=\"form-label-adaptive form-label-fixed\"\r\n      [ngClass]=\"{ 'required': isrequired }\"\r\n      *ngIf=\"isAdaptiveLabel && !disablelabel\"\r\n      >{{label}}</label\r\n    >\r\n    <div\r\n      class=\"help-block help-block-error\"\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+                    ], template: "<div\r\n    class=\"row form-group\"\r\n    [class.has-error]=\"invalid && (dirty || touched)\"\r\n    [ngClass]=\"componentHeight | toLabelHeight\">\r\n    <label\r\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n        id=\"{{ name }}label\"\r\n        for=\"{{ name }}\"\r\n        class=\"col-xs-12 control-label\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\r\n        [class.required]=\"isrequired\">\r\n        <span class=\"text\">{{ label }}</span>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [class]=\"HelptextTooltipIcon\"\r\n                style=\"margin-left: 5px\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-xs-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\r\n        <div [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\r\n            <textarea\r\n                id=\"{{ name }}\"\r\n                name=\"{{ name }}\"\r\n                type=\"\"\r\n                class=\"form-control\"\r\n                [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n                [class.validation-error]=\"invalid && (dirty || touched)\"\r\n                [class.required]=\"isrequired\"\r\n                [ngClass]=\"[componentHeight | toControlHeight]\"\r\n                [value]=\"value\"\r\n                [attr.placeholder]=\"placeholder\"\r\n                (blur)=\"onTouch()\"\r\n                (input)=\"setValue($event.target.value)\"\r\n                (keypress)=\"onKeyPress($event)\"\r\n                [attr.rows]=\"rows\"\r\n                [disabled]=\"isdisabled\"\r\n                [readonly]=\"readonly\">\r\n            </textarea>\r\n\r\n            <div\r\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n                class=\"form-control-static\"\r\n                style=\"margin-left: 5px\">\r\n                <sac-tooltip\r\n                    *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n                    [tooltiptext]=\"helptext\"\r\n                    [inlinemode]=\"true\">\r\n                    <span\r\n                        [class]=\"HelptextTooltipIcon\"\r\n                        style=\"margin-left: 5px; margin-right: 5px\">\r\n                    </span>\r\n                </sac-tooltip>\r\n            </div>\r\n        </div>\r\n\r\n        <p\r\n            *ngIf=\"helptextmode === 'text' && helptext\"\r\n            class=\"help-block\">\r\n            {{ helptext }}\r\n        </p>\r\n\r\n        <div\r\n            class=\"help-block help-block-error\"\r\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\r\n            {{ GetErrorMessage() | async }}\r\n        </div>\r\n    </div>\r\n</div>\r\n" }]
         }], ctorParameters: function () {
         return [{ type: SacFormLayoutDirective, decorators: [{
                         type: Host
@@ -1120,7 +1321,7 @@ SacInputCurrencyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             multi: true,
             useExisting: forwardRef(() => SacInputCurrencyComponent),
         },
-    ], usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"row form-group\"\r\n  [class.has-error]=\"invalid && (dirty || touched)\"\r\n  [ngClass]=\"componentHeight | toLabelHeight\"\r\n>\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-xs-12 control-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}\r\n    <sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n    >\r\n      <span\r\n        [class]=\"HelptextTooltipIcon\"\r\n        style=\"margin-left: 5px\"\r\n      ></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-xs-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group\"\r\n      [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n    >\r\n      <input\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        [ngClass]=\"[componentHeight | toControlHeight]\"\r\n        [value]=\"value\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        (blur)=\"onTouch()\"\r\n        (input)=\"setValue($event.target.value)\"\r\n        (keypress)=\"onKeyPress($event)\"\r\n        [disabled]=\"isdisabled\"\r\n        [readonly]=\"readonly\"\r\n      />\r\n      <label\r\n        for=\"{{name}}\"\r\n        class=\"form-label-adaptive form-label-fixed\"\r\n        [ngClass]=\"{ 'required': isrequired }\"\r\n        *ngIf=\"isAdaptiveLabel && !disablelabel\"\r\n        >{{label}}</label\r\n      >\r\n      <div class=\"input-group-addon\">{{currency}}</div>\r\n    </div>\r\n    <p *ngIf=\"helptextmode === 'text' && helptext\" class=\"help-block\">\r\n      {{helptext}}\r\n    </p>\r\n    <div\r\n      class=\"help-block help-block-error\"\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n", components: [{ type: SacTooltipComponent, selector: "sac-tooltip" }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "toLabelHeight": SacToLabelHeightPipe, "toLabelWidthCss": SacToLabelWidthCssPipe, "toControlWidthCss": SacToControlWidthCssPipe, "toControlHeight": SacToControlHeightPipe, "async": i3.AsyncPipe } });
+    ], usesInheritance: true, ngImport: i0, template: "<div\r\n    class=\"row form-group\"\r\n    [class.has-error]=\"invalid && (dirty || touched)\"\r\n    [ngClass]=\"componentHeight | toLabelHeight\">\r\n    <label\r\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n        id=\"{{ name }}label\"\r\n        for=\"{{ name }}\"\r\n        class=\"col-xs-12 control-label\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\r\n        [class.required]=\"isrequired\">\r\n        <span class=\"text\">{{ label }}</span>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [class]=\"HelptextTooltipIcon\"\r\n                style=\"margin-left: 5px\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-xs-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [class.clearfix]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n        <div\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n            class=\"form-control-static pull-right\"\r\n            style=\"margin-left: 5px\">\r\n            <sac-tooltip\r\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n                [tooltiptext]=\"helptext\"\r\n                [inlinemode]=\"true\">\r\n                <span\r\n                    [class]=\"HelptextTooltipIcon\"\r\n                    style=\"margin-left: 5px; margin-right: 5px\">\r\n                </span>\r\n            </sac-tooltip>\r\n        </div>\r\n\r\n        <div\r\n            class=\"input-group\"\r\n            [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n            [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\r\n            <input\r\n                id=\"{{ name }}\"\r\n                name=\"{{ name }}\"\r\n                type=\"text\"\r\n                class=\"form-control\"\r\n                [ngClass]=\"[componentHeight | toControlHeight]\"\r\n                [value]=\"value\"\r\n                [attr.placeholder]=\"placeholder\"\r\n                (blur)=\"onTouch()\"\r\n                (input)=\"setValue($event.target.value)\"\r\n                (keypress)=\"onKeyPress($event)\"\r\n                [disabled]=\"isdisabled\"\r\n                [readonly]=\"readonly\" />\r\n            <div class=\"input-group-addon\">{{ currency }}</div>\r\n        </div>\r\n\r\n        <p\r\n            *ngIf=\"helptextmode === 'text' && helptext\"\r\n            class=\"help-block\">\r\n            {{ helptext }}\r\n        </p>\r\n\r\n        <div\r\n            class=\"help-block help-block-error\"\r\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\r\n            {{ GetErrorMessage() | async }}\r\n        </div>\r\n    </div>\r\n</div>\r\n", components: [{ type: SacTooltipComponent, selector: "sac-tooltip" }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "toLabelHeight": SacToLabelHeightPipe, "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: [
@@ -1134,7 +1335,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => SacInputCurrencyComponent),
                         },
-                    ], template: "<div\r\n  class=\"row form-group\"\r\n  [class.has-error]=\"invalid && (dirty || touched)\"\r\n  [ngClass]=\"componentHeight | toLabelHeight\"\r\n>\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-xs-12 control-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}\r\n    <sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n    >\r\n      <span\r\n        [class]=\"HelptextTooltipIcon\"\r\n        style=\"margin-left: 5px\"\r\n      ></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-xs-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group\"\r\n      [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n    >\r\n      <input\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        [ngClass]=\"[componentHeight | toControlHeight]\"\r\n        [value]=\"value\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        (blur)=\"onTouch()\"\r\n        (input)=\"setValue($event.target.value)\"\r\n        (keypress)=\"onKeyPress($event)\"\r\n        [disabled]=\"isdisabled\"\r\n        [readonly]=\"readonly\"\r\n      />\r\n      <label\r\n        for=\"{{name}}\"\r\n        class=\"form-label-adaptive form-label-fixed\"\r\n        [ngClass]=\"{ 'required': isrequired }\"\r\n        *ngIf=\"isAdaptiveLabel && !disablelabel\"\r\n        >{{label}}</label\r\n      >\r\n      <div class=\"input-group-addon\">{{currency}}</div>\r\n    </div>\r\n    <p *ngIf=\"helptextmode === 'text' && helptext\" class=\"help-block\">\r\n      {{helptext}}\r\n    </p>\r\n    <div\r\n      class=\"help-block help-block-error\"\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+                    ], template: "<div\r\n    class=\"row form-group\"\r\n    [class.has-error]=\"invalid && (dirty || touched)\"\r\n    [ngClass]=\"componentHeight | toLabelHeight\">\r\n    <label\r\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n        id=\"{{ name }}label\"\r\n        for=\"{{ name }}\"\r\n        class=\"col-xs-12 control-label\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\r\n        [class.required]=\"isrequired\">\r\n        <span class=\"text\">{{ label }}</span>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [class]=\"HelptextTooltipIcon\"\r\n                style=\"margin-left: 5px\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-xs-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [class.clearfix]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n        <div\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n            class=\"form-control-static pull-right\"\r\n            style=\"margin-left: 5px\">\r\n            <sac-tooltip\r\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n                [tooltiptext]=\"helptext\"\r\n                [inlinemode]=\"true\">\r\n                <span\r\n                    [class]=\"HelptextTooltipIcon\"\r\n                    style=\"margin-left: 5px; margin-right: 5px\">\r\n                </span>\r\n            </sac-tooltip>\r\n        </div>\r\n\r\n        <div\r\n            class=\"input-group\"\r\n            [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n            [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\r\n            <input\r\n                id=\"{{ name }}\"\r\n                name=\"{{ name }}\"\r\n                type=\"text\"\r\n                class=\"form-control\"\r\n                [ngClass]=\"[componentHeight | toControlHeight]\"\r\n                [value]=\"value\"\r\n                [attr.placeholder]=\"placeholder\"\r\n                (blur)=\"onTouch()\"\r\n                (input)=\"setValue($event.target.value)\"\r\n                (keypress)=\"onKeyPress($event)\"\r\n                [disabled]=\"isdisabled\"\r\n                [readonly]=\"readonly\" />\r\n            <div class=\"input-group-addon\">{{ currency }}</div>\r\n        </div>\r\n\r\n        <p\r\n            *ngIf=\"helptextmode === 'text' && helptext\"\r\n            class=\"help-block\">\r\n            {{ helptext }}\r\n        </p>\r\n\r\n        <div\r\n            class=\"help-block help-block-error\"\r\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\r\n            {{ GetErrorMessage() | async }}\r\n        </div>\r\n    </div>\r\n</div>\r\n" }]
         }], ctorParameters: function () {
         return [{ type: SacFormLayoutDirective, decorators: [{
                         type: Host
@@ -1166,7 +1367,7 @@ SacInputDecimalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
             multi: true,
             useExisting: forwardRef(() => SacInputDecimalComponent),
         },
-    ], usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"row form-group\"\r\n  [class.has-error]=\"invalid && (dirty || touched)\"\r\n  [ngClass]=\"componentHeight | toLabelHeight\"\r\n>\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-xs-12 control-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}\r\n    <sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n    >\r\n      <span\r\n        [class]=\"HelptextTooltipIcon\"\r\n        style=\"margin-left: 5px\"\r\n      ></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-xs-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <input\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      type=\"text\"\r\n      class=\"form-control\"\r\n      [ngClass]=\"[componentHeight | toControlHeight]\"\r\n      [value]=\"value\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      (blur)=\"onTouch()\"\r\n      (input)=\"setValue($event.target.value)\"\r\n      (keypress)=\"onKeyPress($event)\"\r\n      [disabled]=\"isdisabled\"\r\n      [readonly]=\"readonly\"\r\n    />\r\n    <p *ngIf=\"helptextmode === 'text' && helptext\" class=\"help-block\">\r\n      {{helptext}}\r\n    </p>\r\n    <label\r\n      for=\"{{name}}\"\r\n      class=\"form-label-adaptive form-label-fixed\"\r\n      [ngClass]=\"{ 'required': isrequired }\"\r\n      *ngIf=\"isAdaptiveLabel && !disablelabel\"\r\n      >{{label}}</label\r\n    >\r\n    <div\r\n      class=\"help-block help-block-error\"\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n", components: [{ type: SacTooltipComponent, selector: "sac-tooltip" }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "toLabelHeight": SacToLabelHeightPipe, "toLabelWidthCss": SacToLabelWidthCssPipe, "toControlWidthCss": SacToControlWidthCssPipe, "toControlHeight": SacToControlHeightPipe, "async": i3.AsyncPipe } });
+    ], usesInheritance: true, ngImport: i0, template: "<div\r\n    class=\"row form-group\"\r\n    [class.has-error]=\"invalid && (dirty || touched)\"\r\n    [ngClass]=\"componentHeight | toLabelHeight\">\r\n    <label\r\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n        id=\"{{ name }}label\"\r\n        for=\"{{ name }}\"\r\n        class=\"col-xs-12 control-label\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\r\n        [class.required]=\"isrequired\">\r\n        <span class=\"text\">{{ label }}</span>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [class]=\"HelptextTooltipIcon\"\r\n                style=\"margin-left: 5px\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-xs-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\r\n        <div [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\r\n            <input\r\n                id=\"{{ name }}\"\r\n                name=\"{{ name }}\"\r\n                type=\"text\"\r\n                class=\"form-control\"\r\n                [ngClass]=\"[componentHeight | toControlHeight]\"\r\n                [value]=\"value\"\r\n                [attr.placeholder]=\"placeholder\"\r\n                (blur)=\"onTouch()\"\r\n                (input)=\"setValue($event.target.value)\"\r\n                (keypress)=\"onKeyPress($event)\"\r\n                [disabled]=\"isdisabled\"\r\n                [readonly]=\"readonly\" />\r\n\r\n            <div\r\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n                class=\"form-control-static\"\r\n                style=\"margin-left: 5px\">\r\n                <sac-tooltip\r\n                    *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n                    [tooltiptext]=\"helptext\"\r\n                    [inlinemode]=\"true\">\r\n                    <span\r\n                        [class]=\"HelptextTooltipIcon\"\r\n                        style=\"margin-left: 5px; margin-right: 5px\">\r\n                    </span>\r\n                </sac-tooltip>\r\n            </div>\r\n        </div>\r\n\r\n        <p\r\n            *ngIf=\"helptextmode === 'text' && helptext\"\r\n            class=\"help-block\">\r\n            {{ helptext }}\r\n        </p>\r\n\r\n        <div\r\n            class=\"help-block help-block-error\"\r\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\r\n            {{ GetErrorMessage() | async }}\r\n        </div>\r\n    </div>\r\n</div>\r\n", components: [{ type: SacTooltipComponent, selector: "sac-tooltip" }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "toLabelHeight": SacToLabelHeightPipe, "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: [
@@ -1180,7 +1381,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => SacInputDecimalComponent),
                         },
-                    ], template: "<div\r\n  class=\"row form-group\"\r\n  [class.has-error]=\"invalid && (dirty || touched)\"\r\n  [ngClass]=\"componentHeight | toLabelHeight\"\r\n>\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-xs-12 control-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}\r\n    <sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n    >\r\n      <span\r\n        [class]=\"HelptextTooltipIcon\"\r\n        style=\"margin-left: 5px\"\r\n      ></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-xs-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <input\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      type=\"text\"\r\n      class=\"form-control\"\r\n      [ngClass]=\"[componentHeight | toControlHeight]\"\r\n      [value]=\"value\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      (blur)=\"onTouch()\"\r\n      (input)=\"setValue($event.target.value)\"\r\n      (keypress)=\"onKeyPress($event)\"\r\n      [disabled]=\"isdisabled\"\r\n      [readonly]=\"readonly\"\r\n    />\r\n    <p *ngIf=\"helptextmode === 'text' && helptext\" class=\"help-block\">\r\n      {{helptext}}\r\n    </p>\r\n    <label\r\n      for=\"{{name}}\"\r\n      class=\"form-label-adaptive form-label-fixed\"\r\n      [ngClass]=\"{ 'required': isrequired }\"\r\n      *ngIf=\"isAdaptiveLabel && !disablelabel\"\r\n      >{{label}}</label\r\n    >\r\n    <div\r\n      class=\"help-block help-block-error\"\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+                    ], template: "<div\r\n    class=\"row form-group\"\r\n    [class.has-error]=\"invalid && (dirty || touched)\"\r\n    [ngClass]=\"componentHeight | toLabelHeight\">\r\n    <label\r\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n        id=\"{{ name }}label\"\r\n        for=\"{{ name }}\"\r\n        class=\"col-xs-12 control-label\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\r\n        [class.required]=\"isrequired\">\r\n        <span class=\"text\">{{ label }}</span>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [class]=\"HelptextTooltipIcon\"\r\n                style=\"margin-left: 5px\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-xs-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\r\n        <div [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\r\n            <input\r\n                id=\"{{ name }}\"\r\n                name=\"{{ name }}\"\r\n                type=\"text\"\r\n                class=\"form-control\"\r\n                [ngClass]=\"[componentHeight | toControlHeight]\"\r\n                [value]=\"value\"\r\n                [attr.placeholder]=\"placeholder\"\r\n                (blur)=\"onTouch()\"\r\n                (input)=\"setValue($event.target.value)\"\r\n                (keypress)=\"onKeyPress($event)\"\r\n                [disabled]=\"isdisabled\"\r\n                [readonly]=\"readonly\" />\r\n\r\n            <div\r\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n                class=\"form-control-static\"\r\n                style=\"margin-left: 5px\">\r\n                <sac-tooltip\r\n                    *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n                    [tooltiptext]=\"helptext\"\r\n                    [inlinemode]=\"true\">\r\n                    <span\r\n                        [class]=\"HelptextTooltipIcon\"\r\n                        style=\"margin-left: 5px; margin-right: 5px\">\r\n                    </span>\r\n                </sac-tooltip>\r\n            </div>\r\n        </div>\r\n\r\n        <p\r\n            *ngIf=\"helptextmode === 'text' && helptext\"\r\n            class=\"help-block\">\r\n            {{ helptext }}\r\n        </p>\r\n\r\n        <div\r\n            class=\"help-block help-block-error\"\r\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\r\n            {{ GetErrorMessage() | async }}\r\n        </div>\r\n    </div>\r\n</div>\r\n" }]
         }], ctorParameters: function () {
         return [{ type: SacFormLayoutDirective, decorators: [{
                         type: Host
@@ -1212,7 +1413,7 @@ SacInputEmailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             multi: true,
             useExisting: forwardRef(() => SacInputEmailComponent),
         },
-    ], usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"row form-group\"\r\n  [class.has-error]=\"invalid && (dirty || touched)\"\r\n  [ngClass]=\"componentHeight | toLabelHeight\"\r\n>\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-xs-12 control-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}\r\n    <sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n    >\r\n      <span\r\n        [class]=\"HelptextTooltipIcon\"\r\n        style=\"margin-left: 5px\"\r\n      ></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-xs-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group\"\r\n      [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n    >\r\n      <div class=\"input-group-addon\">@</div>\r\n      <input\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        [ngClass]=\"[componentHeight | toControlHeight]\"\r\n        [value]=\"value\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        (blur)=\"onTouch()\"\r\n        (input)=\"setValue($event.target.value)\"\r\n        autocomplete=\"email\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        [disabled]=\"isdisabled\"\r\n        [readonly]=\"readonly\"\r\n      />\r\n      <label\r\n        for=\"{{name}}\"\r\n        class=\"form-label-adaptive form-label-fixed\"\r\n        [ngClass]=\"{ 'required': isrequired }\"\r\n        *ngIf=\"isAdaptiveLabel && !disablelabel\"\r\n        >{{label}}</label\r\n      >\r\n    </div>\r\n    <p *ngIf=\"helptextmode === 'text' && helptext\" class=\"help-block\">\r\n      {{helptext}}\r\n    </p>\r\n    <div\r\n      class=\"help-block help-block-error\"\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n", components: [{ type: SacTooltipComponent, selector: "sac-tooltip" }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "toLabelHeight": SacToLabelHeightPipe, "toLabelWidthCss": SacToLabelWidthCssPipe, "toControlWidthCss": SacToControlWidthCssPipe, "toControlHeight": SacToControlHeightPipe, "async": i3.AsyncPipe } });
+    ], usesInheritance: true, ngImport: i0, template: "<div\r\n    class=\"row form-group\"\r\n    [class.has-error]=\"invalid && (dirty || touched)\"\r\n    [ngClass]=\"componentHeight | toLabelHeight\">\r\n    <label\r\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n        id=\"{{ name }}label\"\r\n        for=\"{{ name }}\"\r\n        class=\"col-xs-12 control-label\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\r\n        [class.required]=\"isrequired\">\r\n        <span class=\"text\">{{ label }}</span>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [class]=\"HelptextTooltipIcon\"\r\n                style=\"margin-left: 5px\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-xs-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [class.clearfix]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n        <div\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n            class=\"form-control-static pull-right\"\r\n            style=\"margin-left: 5px\">\r\n            <sac-tooltip\r\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n                [tooltiptext]=\"helptext\"\r\n                [inlinemode]=\"true\">\r\n                <span\r\n                    [class]=\"HelptextTooltipIcon\"\r\n                    style=\"margin-left: 5px; margin-right: 5px\">\r\n                </span>\r\n            </sac-tooltip>\r\n        </div>\r\n\r\n        <div\r\n            class=\"input-group\"\r\n            [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n            [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\r\n            <div class=\"input-group-addon\">@</div>\r\n            <input\r\n                id=\"{{ name }}\"\r\n                name=\"{{ name }}\"\r\n                type=\"text\"\r\n                class=\"form-control\"\r\n                [ngClass]=\"[componentHeight | toControlHeight]\"\r\n                [value]=\"value\"\r\n                [attr.placeholder]=\"placeholder\"\r\n                (blur)=\"onTouch()\"\r\n                (input)=\"setValue($event.target.value)\"\r\n                autocomplete=\"email\"\r\n                [attr.maxlength]=\"maxlength\"\r\n                [disabled]=\"isdisabled\"\r\n                [readonly]=\"readonly\" />\r\n        </div>\r\n\r\n        <p\r\n            *ngIf=\"helptextmode === 'text' && helptext\"\r\n            class=\"help-block\">\r\n            {{ helptext }}\r\n        </p>\r\n\r\n        <div\r\n            class=\"help-block help-block-error\"\r\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\r\n            {{ GetErrorMessage() | async }}\r\n        </div>\r\n    </div>\r\n</div>\r\n", components: [{ type: SacTooltipComponent, selector: "sac-tooltip" }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "toLabelHeight": SacToLabelHeightPipe, "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: [
@@ -1226,7 +1427,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => SacInputEmailComponent),
                         },
-                    ], template: "<div\r\n  class=\"row form-group\"\r\n  [class.has-error]=\"invalid && (dirty || touched)\"\r\n  [ngClass]=\"componentHeight | toLabelHeight\"\r\n>\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-xs-12 control-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}\r\n    <sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n    >\r\n      <span\r\n        [class]=\"HelptextTooltipIcon\"\r\n        style=\"margin-left: 5px\"\r\n      ></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-xs-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group\"\r\n      [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n    >\r\n      <div class=\"input-group-addon\">@</div>\r\n      <input\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        [ngClass]=\"[componentHeight | toControlHeight]\"\r\n        [value]=\"value\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        (blur)=\"onTouch()\"\r\n        (input)=\"setValue($event.target.value)\"\r\n        autocomplete=\"email\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        [disabled]=\"isdisabled\"\r\n        [readonly]=\"readonly\"\r\n      />\r\n      <label\r\n        for=\"{{name}}\"\r\n        class=\"form-label-adaptive form-label-fixed\"\r\n        [ngClass]=\"{ 'required': isrequired }\"\r\n        *ngIf=\"isAdaptiveLabel && !disablelabel\"\r\n        >{{label}}</label\r\n      >\r\n    </div>\r\n    <p *ngIf=\"helptextmode === 'text' && helptext\" class=\"help-block\">\r\n      {{helptext}}\r\n    </p>\r\n    <div\r\n      class=\"help-block help-block-error\"\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+                    ], template: "<div\r\n    class=\"row form-group\"\r\n    [class.has-error]=\"invalid && (dirty || touched)\"\r\n    [ngClass]=\"componentHeight | toLabelHeight\">\r\n    <label\r\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n        id=\"{{ name }}label\"\r\n        for=\"{{ name }}\"\r\n        class=\"col-xs-12 control-label\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\r\n        [class.required]=\"isrequired\">\r\n        <span class=\"text\">{{ label }}</span>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [class]=\"HelptextTooltipIcon\"\r\n                style=\"margin-left: 5px\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-xs-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [class.clearfix]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n        <div\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n            class=\"form-control-static pull-right\"\r\n            style=\"margin-left: 5px\">\r\n            <sac-tooltip\r\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n                [tooltiptext]=\"helptext\"\r\n                [inlinemode]=\"true\">\r\n                <span\r\n                    [class]=\"HelptextTooltipIcon\"\r\n                    style=\"margin-left: 5px; margin-right: 5px\">\r\n                </span>\r\n            </sac-tooltip>\r\n        </div>\r\n\r\n        <div\r\n            class=\"input-group\"\r\n            [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n            [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\r\n            <div class=\"input-group-addon\">@</div>\r\n            <input\r\n                id=\"{{ name }}\"\r\n                name=\"{{ name }}\"\r\n                type=\"text\"\r\n                class=\"form-control\"\r\n                [ngClass]=\"[componentHeight | toControlHeight]\"\r\n                [value]=\"value\"\r\n                [attr.placeholder]=\"placeholder\"\r\n                (blur)=\"onTouch()\"\r\n                (input)=\"setValue($event.target.value)\"\r\n                autocomplete=\"email\"\r\n                [attr.maxlength]=\"maxlength\"\r\n                [disabled]=\"isdisabled\"\r\n                [readonly]=\"readonly\" />\r\n        </div>\r\n\r\n        <p\r\n            *ngIf=\"helptextmode === 'text' && helptext\"\r\n            class=\"help-block\">\r\n            {{ helptext }}\r\n        </p>\r\n\r\n        <div\r\n            class=\"help-block help-block-error\"\r\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\r\n            {{ GetErrorMessage() | async }}\r\n        </div>\r\n    </div>\r\n</div>\r\n" }]
         }], ctorParameters: function () {
         return [{ type: SacFormLayoutDirective, decorators: [{
                         type: Host
@@ -1258,7 +1459,7 @@ SacInputIntegerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
             multi: true,
             useExisting: forwardRef(() => SacInputIntegerComponent),
         },
-    ], usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"row form-group\"\r\n  [class.has-error]=\"invalid && (dirty || touched)\"\r\n  [ngClass]=\"componentHeight | toLabelHeight\"\r\n>\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-xs-12 control-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}\r\n    <sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n    >\r\n      <span\r\n        [class]=\"HelptextTooltipIcon\"\r\n        style=\"margin-left: 5px\"\r\n      ></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-xs-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <input\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      type=\"text\"\r\n      class=\"form-control\"\r\n      [ngClass]=\"[componentHeight | toControlHeight]\"\r\n      [value]=\"value\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      (blur)=\"onTouch()\"\r\n      (input)=\"setValue($event.target.value)\"\r\n      (keypress)=\"onKeyPress($event)\"\r\n      [disabled]=\"isdisabled\"\r\n      [readonly]=\"readonly\"\r\n    />\r\n    <p *ngIf=\"helptextmode === 'text' && helptext\" class=\"help-block\">\r\n      {{helptext}}\r\n    </p>\r\n    <label\r\n      for=\"{{name}}\"\r\n      class=\"form-label-adaptive form-label-fixed\"\r\n      [ngClass]=\"{ 'required': isrequired }\"\r\n      *ngIf=\"isAdaptiveLabel && !disablelabel\"\r\n      >{{label}}</label\r\n    >\r\n    <div\r\n      class=\"help-block help-block-error\"\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n", components: [{ type: SacTooltipComponent, selector: "sac-tooltip" }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "toLabelHeight": SacToLabelHeightPipe, "toLabelWidthCss": SacToLabelWidthCssPipe, "toControlWidthCss": SacToControlWidthCssPipe, "toControlHeight": SacToControlHeightPipe, "async": i3.AsyncPipe } });
+    ], usesInheritance: true, ngImport: i0, template: "<div\r\n    class=\"row form-group\"\r\n    [class.has-error]=\"invalid && (dirty || touched)\"\r\n    [ngClass]=\"componentHeight | toLabelHeight\">\r\n    <label\r\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n        id=\"{{ name }}label\"\r\n        for=\"{{ name }}\"\r\n        class=\"col-xs-12 control-label\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\r\n        [class.required]=\"isrequired\">\r\n        <span class=\"text\">{{ label }}</span>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [class]=\"HelptextTooltipIcon\"\r\n                style=\"margin-left: 5px\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-xs-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\r\n        <div [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\r\n            <input\r\n                id=\"{{ name }}\"\r\n                name=\"{{ name }}\"\r\n                type=\"text\"\r\n                class=\"form-control\"\r\n                [ngClass]=\"[componentHeight | toControlHeight]\"\r\n                [value]=\"value\"\r\n                [attr.placeholder]=\"placeholder\"\r\n                (blur)=\"onTouch()\"\r\n                (input)=\"setValue($event.target.value)\"\r\n                (keypress)=\"onKeyPress($event)\"\r\n                [disabled]=\"isdisabled\"\r\n                [readonly]=\"readonly\" />\r\n\r\n            <div\r\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n                class=\"form-control-static\"\r\n                style=\"margin-left: 5px\">\r\n                <sac-tooltip\r\n                    *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n                    [tooltiptext]=\"helptext\"\r\n                    [inlinemode]=\"true\">\r\n                    <span\r\n                        [class]=\"HelptextTooltipIcon\"\r\n                        style=\"margin-left: 5px; margin-right: 5px\">\r\n                    </span>\r\n                </sac-tooltip>\r\n            </div>\r\n        </div>\r\n\r\n        <p\r\n            *ngIf=\"helptextmode === 'text' && helptext\"\r\n            class=\"help-block\">\r\n            {{ helptext }}\r\n        </p>\r\n\r\n        <div\r\n            class=\"help-block help-block-error\"\r\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\r\n            {{ GetErrorMessage() | async }}\r\n        </div>\r\n    </div>\r\n</div>\r\n", components: [{ type: SacTooltipComponent, selector: "sac-tooltip" }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "toLabelHeight": SacToLabelHeightPipe, "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: [
@@ -1272,7 +1473,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => SacInputIntegerComponent),
                         },
-                    ], template: "<div\r\n  class=\"row form-group\"\r\n  [class.has-error]=\"invalid && (dirty || touched)\"\r\n  [ngClass]=\"componentHeight | toLabelHeight\"\r\n>\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-xs-12 control-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}\r\n    <sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n    >\r\n      <span\r\n        [class]=\"HelptextTooltipIcon\"\r\n        style=\"margin-left: 5px\"\r\n      ></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-xs-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <input\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      type=\"text\"\r\n      class=\"form-control\"\r\n      [ngClass]=\"[componentHeight | toControlHeight]\"\r\n      [value]=\"value\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      (blur)=\"onTouch()\"\r\n      (input)=\"setValue($event.target.value)\"\r\n      (keypress)=\"onKeyPress($event)\"\r\n      [disabled]=\"isdisabled\"\r\n      [readonly]=\"readonly\"\r\n    />\r\n    <p *ngIf=\"helptextmode === 'text' && helptext\" class=\"help-block\">\r\n      {{helptext}}\r\n    </p>\r\n    <label\r\n      for=\"{{name}}\"\r\n      class=\"form-label-adaptive form-label-fixed\"\r\n      [ngClass]=\"{ 'required': isrequired }\"\r\n      *ngIf=\"isAdaptiveLabel && !disablelabel\"\r\n      >{{label}}</label\r\n    >\r\n    <div\r\n      class=\"help-block help-block-error\"\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+                    ], template: "<div\r\n    class=\"row form-group\"\r\n    [class.has-error]=\"invalid && (dirty || touched)\"\r\n    [ngClass]=\"componentHeight | toLabelHeight\">\r\n    <label\r\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n        id=\"{{ name }}label\"\r\n        for=\"{{ name }}\"\r\n        class=\"col-xs-12 control-label\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\r\n        [class.required]=\"isrequired\">\r\n        <span class=\"text\">{{ label }}</span>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [class]=\"HelptextTooltipIcon\"\r\n                style=\"margin-left: 5px\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-xs-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\r\n        <div [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\r\n            <input\r\n                id=\"{{ name }}\"\r\n                name=\"{{ name }}\"\r\n                type=\"text\"\r\n                class=\"form-control\"\r\n                [ngClass]=\"[componentHeight | toControlHeight]\"\r\n                [value]=\"value\"\r\n                [attr.placeholder]=\"placeholder\"\r\n                (blur)=\"onTouch()\"\r\n                (input)=\"setValue($event.target.value)\"\r\n                (keypress)=\"onKeyPress($event)\"\r\n                [disabled]=\"isdisabled\"\r\n                [readonly]=\"readonly\" />\r\n\r\n            <div\r\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n                class=\"form-control-static\"\r\n                style=\"margin-left: 5px\">\r\n                <sac-tooltip\r\n                    *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n                    [tooltiptext]=\"helptext\"\r\n                    [inlinemode]=\"true\">\r\n                    <span\r\n                        [class]=\"HelptextTooltipIcon\"\r\n                        style=\"margin-left: 5px; margin-right: 5px\">\r\n                    </span>\r\n                </sac-tooltip>\r\n            </div>\r\n        </div>\r\n\r\n        <p\r\n            *ngIf=\"helptextmode === 'text' && helptext\"\r\n            class=\"help-block\">\r\n            {{ helptext }}\r\n        </p>\r\n\r\n        <div\r\n            class=\"help-block help-block-error\"\r\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\r\n            {{ GetErrorMessage() | async }}\r\n        </div>\r\n    </div>\r\n</div>\r\n" }]
         }], ctorParameters: function () {
         return [{ type: SacFormLayoutDirective, decorators: [{
                         type: Host
@@ -1304,7 +1505,7 @@ SacInputPasswordComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             multi: true,
             useExisting: forwardRef(() => SacInputPasswordComponent),
         },
-    ], usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"row form-group\"\r\n  [class.has-error]=\"invalid && (dirty || touched)\"\r\n  [ngClass]=\"componentHeight | toLabelHeight\"\r\n>\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-xs-12 control-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}\r\n    <sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n    >\r\n      <span\r\n        [class]=\"HelptextTooltipIcon\"\r\n        style=\"margin-left: 5px\"\r\n      ></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-xs-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <input\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      class=\"form-control\"\r\n      [ngClass]=\"[componentHeight | toControlHeight]\"\r\n      type=\"password\"\r\n      [value]=\"value\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      (blur)=\"onTouch()\"\r\n      (input)=\"setValue($event.target.value)\"\r\n      [attr.maxlength]=\"maxlength\"\r\n      autocomplete=\"new-password\"\r\n      [disabled]=\"isdisabled\"\r\n      [readonly]=\"readonly\"\r\n    />\r\n    <p *ngIf=\"helptextmode === 'text' && helptext\" class=\"help-block\">\r\n      {{helptext}}\r\n    </p>\r\n    <label\r\n      for=\"{{name}}\"\r\n      class=\"form-label-adaptive form-label-fixed\"\r\n      [ngClass]=\"{ 'required': isrequired }\"\r\n      *ngIf=\"isAdaptiveLabel && !disablelabel\"\r\n      >{{label}}</label\r\n    >\r\n    <div\r\n      class=\"help-block help-block-error\"\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n", components: [{ type: SacTooltipComponent, selector: "sac-tooltip" }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "toLabelHeight": SacToLabelHeightPipe, "toLabelWidthCss": SacToLabelWidthCssPipe, "toControlWidthCss": SacToControlWidthCssPipe, "toControlHeight": SacToControlHeightPipe, "async": i3.AsyncPipe } });
+    ], usesInheritance: true, ngImport: i0, template: "<div\r\n    class=\"row form-group\"\r\n    [class.has-error]=\"invalid && (dirty || touched)\"\r\n    [ngClass]=\"componentHeight | toLabelHeight\">\r\n    <label\r\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n        id=\"{{ name }}label\"\r\n        for=\"{{ name }}\"\r\n        class=\"col-xs-12 control-label\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\r\n        [class.required]=\"isrequired\">\r\n        <span class=\"text\">{{ label }}</span>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [class]=\"HelptextTooltipIcon\"\r\n                style=\"margin-left: 5px\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-xs-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\r\n        <div [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\r\n            <input\r\n                id=\"{{ name }}\"\r\n                name=\"{{ name }}\"\r\n                class=\"form-control\"\r\n                [ngClass]=\"[componentHeight | toControlHeight]\"\r\n                type=\"password\"\r\n                [value]=\"value\"\r\n                [attr.placeholder]=\"placeholder\"\r\n                (blur)=\"onTouch()\"\r\n                (input)=\"setValue($event.target.value)\"\r\n                [attr.maxlength]=\"maxlength\"\r\n                autocomplete=\"new-password\"\r\n                [disabled]=\"isdisabled\"\r\n                [readonly]=\"readonly\" />\r\n\r\n            <div\r\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n                class=\"form-control-static\"\r\n                style=\"margin-left: 5px\">\r\n                <sac-tooltip\r\n                    *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n                    [tooltiptext]=\"helptext\"\r\n                    [inlinemode]=\"true\">\r\n                    <span\r\n                        [class]=\"HelptextTooltipIcon\"\r\n                        style=\"margin-left: 5px; margin-right: 5px\">\r\n                    </span>\r\n                </sac-tooltip>\r\n            </div>\r\n        </div>\r\n\r\n        <p\r\n            *ngIf=\"helptextmode === 'text' && helptext\"\r\n            class=\"help-block\">\r\n            {{ helptext }}\r\n        </p>\r\n\r\n        <div\r\n            class=\"help-block help-block-error\"\r\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\r\n            {{ GetErrorMessage() | async }}\r\n        </div>\r\n    </div>\r\n</div>\r\n", components: [{ type: SacTooltipComponent, selector: "sac-tooltip" }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "toLabelHeight": SacToLabelHeightPipe, "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: [
@@ -1318,7 +1519,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => SacInputPasswordComponent),
                         },
-                    ], template: "<div\r\n  class=\"row form-group\"\r\n  [class.has-error]=\"invalid && (dirty || touched)\"\r\n  [ngClass]=\"componentHeight | toLabelHeight\"\r\n>\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-xs-12 control-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}\r\n    <sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n    >\r\n      <span\r\n        [class]=\"HelptextTooltipIcon\"\r\n        style=\"margin-left: 5px\"\r\n      ></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-xs-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <input\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      class=\"form-control\"\r\n      [ngClass]=\"[componentHeight | toControlHeight]\"\r\n      type=\"password\"\r\n      [value]=\"value\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      (blur)=\"onTouch()\"\r\n      (input)=\"setValue($event.target.value)\"\r\n      [attr.maxlength]=\"maxlength\"\r\n      autocomplete=\"new-password\"\r\n      [disabled]=\"isdisabled\"\r\n      [readonly]=\"readonly\"\r\n    />\r\n    <p *ngIf=\"helptextmode === 'text' && helptext\" class=\"help-block\">\r\n      {{helptext}}\r\n    </p>\r\n    <label\r\n      for=\"{{name}}\"\r\n      class=\"form-label-adaptive form-label-fixed\"\r\n      [ngClass]=\"{ 'required': isrequired }\"\r\n      *ngIf=\"isAdaptiveLabel && !disablelabel\"\r\n      >{{label}}</label\r\n    >\r\n    <div\r\n      class=\"help-block help-block-error\"\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+                    ], template: "<div\r\n    class=\"row form-group\"\r\n    [class.has-error]=\"invalid && (dirty || touched)\"\r\n    [ngClass]=\"componentHeight | toLabelHeight\">\r\n    <label\r\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n        id=\"{{ name }}label\"\r\n        for=\"{{ name }}\"\r\n        class=\"col-xs-12 control-label\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\r\n        [class.required]=\"isrequired\">\r\n        <span class=\"text\">{{ label }}</span>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [class]=\"HelptextTooltipIcon\"\r\n                style=\"margin-left: 5px\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-xs-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\r\n        <div [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\r\n            <input\r\n                id=\"{{ name }}\"\r\n                name=\"{{ name }}\"\r\n                class=\"form-control\"\r\n                [ngClass]=\"[componentHeight | toControlHeight]\"\r\n                type=\"password\"\r\n                [value]=\"value\"\r\n                [attr.placeholder]=\"placeholder\"\r\n                (blur)=\"onTouch()\"\r\n                (input)=\"setValue($event.target.value)\"\r\n                [attr.maxlength]=\"maxlength\"\r\n                autocomplete=\"new-password\"\r\n                [disabled]=\"isdisabled\"\r\n                [readonly]=\"readonly\" />\r\n\r\n            <div\r\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n                class=\"form-control-static\"\r\n                style=\"margin-left: 5px\">\r\n                <sac-tooltip\r\n                    *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n                    [tooltiptext]=\"helptext\"\r\n                    [inlinemode]=\"true\">\r\n                    <span\r\n                        [class]=\"HelptextTooltipIcon\"\r\n                        style=\"margin-left: 5px; margin-right: 5px\">\r\n                    </span>\r\n                </sac-tooltip>\r\n            </div>\r\n        </div>\r\n\r\n        <p\r\n            *ngIf=\"helptextmode === 'text' && helptext\"\r\n            class=\"help-block\">\r\n            {{ helptext }}\r\n        </p>\r\n\r\n        <div\r\n            class=\"help-block help-block-error\"\r\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\r\n            {{ GetErrorMessage() | async }}\r\n        </div>\r\n    </div>\r\n</div>\r\n" }]
         }], ctorParameters: function () {
         return [{ type: SacFormLayoutDirective, decorators: [{
                         type: Host
@@ -1350,7 +1551,7 @@ SacInputSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             multi: true,
             useExisting: forwardRef(() => SacInputSearchComponent),
         },
-    ], usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"row form-group\"\r\n  [class.has-error]=\"invalid && (dirty || touched)\"\r\n  [ngClass]=\"componentHeight | toLabelHeight\"\r\n>\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-xs-12 control-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}\r\n    <sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n    >\r\n      <span\r\n        [class]=\"HelptextTooltipIcon\"\r\n        style=\"margin-left: 5px\"\r\n      ></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-xs-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group\"\r\n      [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n    >\r\n      <input\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        [ngClass]=\"[componentHeight | toControlHeight]\"\r\n        [value]=\"value\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        (blur)=\"onTouch()\"\r\n        (input)=\"setValue($event.target.value)\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        [disabled]=\"isdisabled\"\r\n        [readonly]=\"readonly\"\r\n      />\r\n      <span class=\"input-group-btn\">\r\n        <button\r\n          type=\"submit\"\r\n          class=\"btn btn-default\"\r\n          id=\"{{name}}_search\"\r\n          (click)=\"searchClick()\"\r\n        >\r\n          <i\r\n            *ngIf=\"buttonmode === 'icon' || buttonmode === 'mixed'\"\r\n            [class]=\"iconname\"\r\n            [style.margin-right.px]=\"buttonmode === 'mixed' ? 7 : null\"\r\n          ></i>\r\n          <ng-container *ngIf=\"buttonmode === 'text' || buttonmode === 'mixed'\"\r\n            >{{buttontext}}</ng-container\r\n          >\r\n        </button>\r\n      </span>\r\n    </div>\r\n    <p *ngIf=\"helptextmode === 'text' && helptext\" class=\"help-block\">\r\n      {{helptext}}\r\n    </p>\r\n  </div>\r\n</div>\r\n", components: [{ type: SacTooltipComponent, selector: "sac-tooltip" }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "toLabelHeight": SacToLabelHeightPipe, "toLabelWidthCss": SacToLabelWidthCssPipe, "toControlWidthCss": SacToControlWidthCssPipe, "toControlHeight": SacToControlHeightPipe } });
+    ], usesInheritance: true, ngImport: i0, template: "<div\r\n    class=\"row form-group\"\r\n    [class.has-error]=\"invalid && (dirty || touched)\"\r\n    [ngClass]=\"componentHeight | toLabelHeight\">\r\n    <label\r\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n        id=\"{{ name }}label\"\r\n        for=\"{{ name }}\"\r\n        class=\"col-xs-12 control-label\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\r\n        [class.required]=\"isrequired\">\r\n        <span class=\"text\">{{ label }}</span>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [class]=\"HelptextTooltipIcon\"\r\n                style=\"margin-left: 5px\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-xs-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [class.clearfix]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n        <div\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n            class=\"form-control-static pull-right\"\r\n            style=\"margin-left: 5px\">\r\n            <sac-tooltip\r\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n                [tooltiptext]=\"helptext\"\r\n                [inlinemode]=\"true\">\r\n                <span\r\n                    [class]=\"HelptextTooltipIcon\"\r\n                    style=\"margin-left: 5px; margin-right: 5px\">\r\n                </span>\r\n            </sac-tooltip>\r\n        </div>\r\n\r\n        <div\r\n            class=\"input-group\"\r\n            [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n            [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\r\n            <input\r\n                id=\"{{ name }}\"\r\n                name=\"{{ name }}\"\r\n                type=\"text\"\r\n                class=\"form-control\"\r\n                [ngClass]=\"[componentHeight | toControlHeight]\"\r\n                [value]=\"value\"\r\n                [attr.placeholder]=\"placeholder\"\r\n                (blur)=\"onTouch()\"\r\n                (input)=\"setValue($event.target.value)\"\r\n                [attr.maxlength]=\"maxlength\"\r\n                [disabled]=\"isdisabled\"\r\n                [readonly]=\"readonly\" />\r\n            <span class=\"input-group-btn\">\r\n                <button\r\n                    type=\"button\"\r\n                    class=\"btn btn-default\"\r\n                    id=\"{{ name }}_search\"\r\n                    (click)=\"searchClick()\">\r\n                    <i\r\n                        *ngIf=\"buttonmode === 'icon' || buttonmode === 'mixed'\"\r\n                        [class]=\"iconname\"\r\n                        [style.margin-right.px]=\"buttonmode === 'mixed' ? 7 : null\">\r\n                    </i>\r\n                    <ng-container *ngIf=\"buttonmode === 'text' || buttonmode === 'mixed'\">{{ buttontext }}</ng-container>\r\n                </button>\r\n            </span>\r\n        </div>\r\n\r\n        <p\r\n            *ngIf=\"helptextmode === 'text' && helptext\"\r\n            class=\"help-block\">\r\n            {{ helptext }}\r\n        </p>\r\n    </div>\r\n</div>\r\n", components: [{ type: SacTooltipComponent, selector: "sac-tooltip" }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "toLabelHeight": SacToLabelHeightPipe, "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: [
@@ -1364,7 +1565,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => SacInputSearchComponent),
                         },
-                    ], template: "<div\r\n  class=\"row form-group\"\r\n  [class.has-error]=\"invalid && (dirty || touched)\"\r\n  [ngClass]=\"componentHeight | toLabelHeight\"\r\n>\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-xs-12 control-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}\r\n    <sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n    >\r\n      <span\r\n        [class]=\"HelptextTooltipIcon\"\r\n        style=\"margin-left: 5px\"\r\n      ></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-xs-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group\"\r\n      [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n    >\r\n      <input\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        [ngClass]=\"[componentHeight | toControlHeight]\"\r\n        [value]=\"value\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        (blur)=\"onTouch()\"\r\n        (input)=\"setValue($event.target.value)\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        [disabled]=\"isdisabled\"\r\n        [readonly]=\"readonly\"\r\n      />\r\n      <span class=\"input-group-btn\">\r\n        <button\r\n          type=\"submit\"\r\n          class=\"btn btn-default\"\r\n          id=\"{{name}}_search\"\r\n          (click)=\"searchClick()\"\r\n        >\r\n          <i\r\n            *ngIf=\"buttonmode === 'icon' || buttonmode === 'mixed'\"\r\n            [class]=\"iconname\"\r\n            [style.margin-right.px]=\"buttonmode === 'mixed' ? 7 : null\"\r\n          ></i>\r\n          <ng-container *ngIf=\"buttonmode === 'text' || buttonmode === 'mixed'\"\r\n            >{{buttontext}}</ng-container\r\n          >\r\n        </button>\r\n      </span>\r\n    </div>\r\n    <p *ngIf=\"helptextmode === 'text' && helptext\" class=\"help-block\">\r\n      {{helptext}}\r\n    </p>\r\n  </div>\r\n</div>\r\n" }]
+                    ], template: "<div\r\n    class=\"row form-group\"\r\n    [class.has-error]=\"invalid && (dirty || touched)\"\r\n    [ngClass]=\"componentHeight | toLabelHeight\">\r\n    <label\r\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n        id=\"{{ name }}label\"\r\n        for=\"{{ name }}\"\r\n        class=\"col-xs-12 control-label\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\r\n        [class.required]=\"isrequired\">\r\n        <span class=\"text\">{{ label }}</span>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [class]=\"HelptextTooltipIcon\"\r\n                style=\"margin-left: 5px\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-xs-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [class.clearfix]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n        <div\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n            class=\"form-control-static pull-right\"\r\n            style=\"margin-left: 5px\">\r\n            <sac-tooltip\r\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n                [tooltiptext]=\"helptext\"\r\n                [inlinemode]=\"true\">\r\n                <span\r\n                    [class]=\"HelptextTooltipIcon\"\r\n                    style=\"margin-left: 5px; margin-right: 5px\">\r\n                </span>\r\n            </sac-tooltip>\r\n        </div>\r\n\r\n        <div\r\n            class=\"input-group\"\r\n            [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n            [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\r\n            <input\r\n                id=\"{{ name }}\"\r\n                name=\"{{ name }}\"\r\n                type=\"text\"\r\n                class=\"form-control\"\r\n                [ngClass]=\"[componentHeight | toControlHeight]\"\r\n                [value]=\"value\"\r\n                [attr.placeholder]=\"placeholder\"\r\n                (blur)=\"onTouch()\"\r\n                (input)=\"setValue($event.target.value)\"\r\n                [attr.maxlength]=\"maxlength\"\r\n                [disabled]=\"isdisabled\"\r\n                [readonly]=\"readonly\" />\r\n            <span class=\"input-group-btn\">\r\n                <button\r\n                    type=\"button\"\r\n                    class=\"btn btn-default\"\r\n                    id=\"{{ name }}_search\"\r\n                    (click)=\"searchClick()\">\r\n                    <i\r\n                        *ngIf=\"buttonmode === 'icon' || buttonmode === 'mixed'\"\r\n                        [class]=\"iconname\"\r\n                        [style.margin-right.px]=\"buttonmode === 'mixed' ? 7 : null\">\r\n                    </i>\r\n                    <ng-container *ngIf=\"buttonmode === 'text' || buttonmode === 'mixed'\">{{ buttontext }}</ng-container>\r\n                </button>\r\n            </span>\r\n        </div>\r\n\r\n        <p\r\n            *ngIf=\"helptextmode === 'text' && helptext\"\r\n            class=\"help-block\">\r\n            {{ helptext }}\r\n        </p>\r\n    </div>\r\n</div>\r\n" }]
         }], ctorParameters: function () {
         return [{ type: SacFormLayoutDirective, decorators: [{
                         type: Host
@@ -1461,7 +1662,7 @@ SacDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             multi: true,
             useExisting: forwardRef(() => SacDropdownComponent),
         },
-    ], usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"row form-group\"\r\n  [class.has-error]=\"invalid && (dirty || touched)\"\r\n  [ngClass]=\"componentHeight | toLabelHeight\"\r\n>\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-xs-12 control-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}\r\n    <sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n    >\r\n      <span\r\n        [class]=\"HelptextTooltipIcon\"\r\n        style=\"margin-left: 5px\"\r\n      ></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-xs-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <select\r\n      #dropdownitem\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      class=\"form-control\"\r\n      [ngClass]=\"[componentHeight | toControlHeight]\"\r\n      (blur)=\"onTouch()\"\r\n      (change)=\"setValue(dropdownitem.value)\"\r\n      [disabled]=\"isdisabled\"\r\n    >\r\n      <option *ngIf=\"emptylabel !== ''\" [ngValue]=\"emptyvalue\">\r\n        {{emptylabel}}\r\n      </option>\r\n\r\n      <ng-content></ng-content>\r\n\r\n      <ng-container *ngIf=\"groupitems === ''\">\r\n        <option\r\n          *ngFor=\"let item of options\"\r\n          [ngValue]=\"optionvalue ? item[optionvalue] : item\"\r\n          [disabled]=\"optionenabled !== '' && item[optionenabled] === false\"\r\n        >\r\n          <ng-template\r\n            *ngTemplateOutlet=\"optionlabeltemplate || defaultItemLabelTemplate;context:{ label: item[optionlabel], item: item }\"\r\n          >\r\n          </ng-template>\r\n        </option>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"groupitems !== ''\">\r\n        <optgroup\r\n          *ngFor=\"let group of options\"\r\n          [attr.label]=\"group[grouplabel]\"\r\n        >\r\n          <option\r\n            *ngFor=\"let item of group[groupitems]\"\r\n            [ngValue]=\"optionvalue ? item[optionvalue] : item\"\r\n            [disabled]=\"optionenabled !== '' && item[optionenabled] === false\"\r\n          >\r\n            <ng-template\r\n              *ngTemplateOutlet=\"optionlabeltemplate || defaultItemLabelTemplate;context:{ label: item[optionlabel], item: item }\"\r\n            >\r\n            </ng-template>\r\n          </option>\r\n        </optgroup>\r\n      </ng-container>\r\n    </select>\r\n    <p *ngIf=\"helptextmode === 'text' && helptext\" class=\"help-block\">\r\n      {{helptext}}\r\n    </p>\r\n    <div\r\n      class=\"help-block help-block-error\"\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #defaultItemLabelTemplate let-label=\"label\">\r\n  {{label}}\r\n</ng-template>\r\n", 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\r\n    class=\"row form-group\"\r\n    [class.has-error]=\"invalid && (dirty || touched)\"\r\n    [ngClass]=\"componentHeight | toLabelHeight\">\r\n    <label\r\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n        id=\"{{ name }}label\"\r\n        for=\"{{ name }}\"\r\n        class=\"col-xs-12 control-label\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\r\n        [class.required]=\"isrequired\">\r\n        <span class=\"text\">{{ label }}</span>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [class]=\"HelptextTooltipIcon\"\r\n                style=\"margin-left: 5px\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-xs-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\r\n        <div [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\r\n            <select\r\n                #dropdownitem\r\n                id=\"{{ name }}\"\r\n                name=\"{{ name }}\"\r\n                class=\"form-control\"\r\n                [ngClass]=\"[componentHeight | toControlHeight]\"\r\n                (blur)=\"onTouch()\"\r\n                (change)=\"setValue(dropdownitem.value)\"\r\n                [disabled]=\"isdisabled\">\r\n                <option\r\n                    *ngIf=\"emptylabel !== ''\"\r\n                    [ngValue]=\"emptyvalue\">\r\n                    {{ emptylabel }}\r\n                </option>\r\n\r\n                <ng-content></ng-content>\r\n\r\n                <ng-container *ngIf=\"groupitems === ''\">\r\n                    <option\r\n                        *ngFor=\"let item of options\"\r\n                        [ngValue]=\"optionvalue ? item[optionvalue] : item\"\r\n                        [disabled]=\"optionenabled !== '' && item[optionenabled] === false\">\r\n                        <ng-template *ngTemplateOutlet=\"optionlabeltemplate || defaultItemLabelTemplate; context: { label: item[optionlabel], item: item }\"> </ng-template>\r\n                    </option>\r\n                </ng-container>\r\n\r\n                <ng-container *ngIf=\"groupitems !== ''\">\r\n                    <optgroup\r\n                        *ngFor=\"let group of options\"\r\n                        [attr.label]=\"group[grouplabel]\">\r\n                        <option\r\n                            *ngFor=\"let item of group[groupitems]\"\r\n                            [ngValue]=\"optionvalue ? item[optionvalue] : item\"\r\n                            [disabled]=\"optionenabled !== '' && item[optionenabled] === false\">\r\n                            <ng-template *ngTemplateOutlet=\"optionlabeltemplate || defaultItemLabelTemplate; context: { label: item[optionlabel], item: item }\"> </ng-template>\r\n                        </option>\r\n                    </optgroup>\r\n                </ng-container>\r\n            </select>\r\n\r\n            <div\r\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n                class=\"form-control-static\"\r\n                style=\"margin-left: 5px\">\r\n                <sac-tooltip\r\n                    *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n                    [tooltiptext]=\"helptext\"\r\n                    [inlinemode]=\"true\">\r\n                    <span\r\n                        [class]=\"HelptextTooltipIcon\"\r\n                        style=\"margin-left: 5px; margin-right: 5px\">\r\n                    </span>\r\n                </sac-tooltip>\r\n            </div>\r\n        </div>\r\n\r\n        <p\r\n            *ngIf=\"helptextmode === 'text' && helptext\"\r\n            class=\"help-block\">\r\n            {{ helptext }}\r\n        </p>\r\n\r\n        <div\r\n            class=\"help-block help-block-error\"\r\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\r\n            {{ GetErrorMessage() | async }}\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<ng-template\r\n    #defaultItemLabelTemplate\r\n    let-label=\"label\">\r\n    {{ label }}\r\n</ng-template>\r\n", 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; }) } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacDropdownComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sac-dropdown', providers: [
@@ -1475,7 +1676,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => SacDropdownComponent),
                         },
-                    ], template: "<div\r\n  class=\"row form-group\"\r\n  [class.has-error]=\"invalid && (dirty || touched)\"\r\n  [ngClass]=\"componentHeight | toLabelHeight\"\r\n>\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-xs-12 control-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}\r\n    <sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n    >\r\n      <span\r\n        [class]=\"HelptextTooltipIcon\"\r\n        style=\"margin-left: 5px\"\r\n      ></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-xs-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <select\r\n      #dropdownitem\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      class=\"form-control\"\r\n      [ngClass]=\"[componentHeight | toControlHeight]\"\r\n      (blur)=\"onTouch()\"\r\n      (change)=\"setValue(dropdownitem.value)\"\r\n      [disabled]=\"isdisabled\"\r\n    >\r\n      <option *ngIf=\"emptylabel !== ''\" [ngValue]=\"emptyvalue\">\r\n        {{emptylabel}}\r\n      </option>\r\n\r\n      <ng-content></ng-content>\r\n\r\n      <ng-container *ngIf=\"groupitems === ''\">\r\n        <option\r\n          *ngFor=\"let item of options\"\r\n          [ngValue]=\"optionvalue ? item[optionvalue] : item\"\r\n          [disabled]=\"optionenabled !== '' && item[optionenabled] === false\"\r\n        >\r\n          <ng-template\r\n            *ngTemplateOutlet=\"optionlabeltemplate || defaultItemLabelTemplate;context:{ label: item[optionlabel], item: item }\"\r\n          >\r\n          </ng-template>\r\n        </option>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"groupitems !== ''\">\r\n        <optgroup\r\n          *ngFor=\"let group of options\"\r\n          [attr.label]=\"group[grouplabel]\"\r\n        >\r\n          <option\r\n            *ngFor=\"let item of group[groupitems]\"\r\n            [ngValue]=\"optionvalue ? item[optionvalue] : item\"\r\n            [disabled]=\"optionenabled !== '' && item[optionenabled] === false\"\r\n          >\r\n            <ng-template\r\n              *ngTemplateOutlet=\"optionlabeltemplate || defaultItemLabelTemplate;context:{ label: item[optionlabel], item: item }\"\r\n            >\r\n            </ng-template>\r\n          </option>\r\n        </optgroup>\r\n      </ng-container>\r\n    </select>\r\n    <p *ngIf=\"helptextmode === 'text' && helptext\" class=\"help-block\">\r\n      {{helptext}}\r\n    </p>\r\n    <div\r\n      class=\"help-block help-block-error\"\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #defaultItemLabelTemplate let-label=\"label\">\r\n  {{label}}\r\n</ng-template>\r\n" }]
+                    ], template: "<div\r\n    class=\"row form-group\"\r\n    [class.has-error]=\"invalid && (dirty || touched)\"\r\n    [ngClass]=\"componentHeight | toLabelHeight\">\r\n    <label\r\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n        id=\"{{ name }}label\"\r\n        for=\"{{ name }}\"\r\n        class=\"col-xs-12 control-label\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\r\n        [class.required]=\"isrequired\">\r\n        <span class=\"text\">{{ label }}</span>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [class]=\"HelptextTooltipIcon\"\r\n                style=\"margin-left: 5px\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-xs-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\r\n        <div [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\r\n            <select\r\n                #dropdownitem\r\n                id=\"{{ name }}\"\r\n                name=\"{{ name }}\"\r\n                class=\"form-control\"\r\n                [ngClass]=\"[componentHeight | toControlHeight]\"\r\n                (blur)=\"onTouch()\"\r\n                (change)=\"setValue(dropdownitem.value)\"\r\n                [disabled]=\"isdisabled\">\r\n                <option\r\n                    *ngIf=\"emptylabel !== ''\"\r\n                    [ngValue]=\"emptyvalue\">\r\n                    {{ emptylabel }}\r\n                </option>\r\n\r\n                <ng-content></ng-content>\r\n\r\n                <ng-container *ngIf=\"groupitems === ''\">\r\n                    <option\r\n                        *ngFor=\"let item of options\"\r\n                        [ngValue]=\"optionvalue ? item[optionvalue] : item\"\r\n                        [disabled]=\"optionenabled !== '' && item[optionenabled] === false\">\r\n                        <ng-template *ngTemplateOutlet=\"optionlabeltemplate || defaultItemLabelTemplate; context: { label: item[optionlabel], item: item }\"> </ng-template>\r\n                    </option>\r\n                </ng-container>\r\n\r\n                <ng-container *ngIf=\"groupitems !== ''\">\r\n                    <optgroup\r\n                        *ngFor=\"let group of options\"\r\n                        [attr.label]=\"group[grouplabel]\">\r\n                        <option\r\n                            *ngFor=\"let item of group[groupitems]\"\r\n                            [ngValue]=\"optionvalue ? item[optionvalue] : item\"\r\n                            [disabled]=\"optionenabled !== '' && item[optionenabled] === false\">\r\n                            <ng-template *ngTemplateOutlet=\"optionlabeltemplate || defaultItemLabelTemplate; context: { label: item[optionlabel], item: item }\"> </ng-template>\r\n                        </option>\r\n                    </optgroup>\r\n                </ng-container>\r\n            </select>\r\n\r\n            <div\r\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n                class=\"form-control-static\"\r\n                style=\"margin-left: 5px\">\r\n                <sac-tooltip\r\n                    *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n                    [tooltiptext]=\"helptext\"\r\n                    [inlinemode]=\"true\">\r\n                    <span\r\n                        [class]=\"HelptextTooltipIcon\"\r\n                        style=\"margin-left: 5px; margin-right: 5px\">\r\n                    </span>\r\n                </sac-tooltip>\r\n            </div>\r\n        </div>\r\n\r\n        <p\r\n            *ngIf=\"helptextmode === 'text' && helptext\"\r\n            class=\"help-block\">\r\n            {{ helptext }}\r\n        </p>\r\n\r\n        <div\r\n            class=\"help-block help-block-error\"\r\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\r\n            {{ GetErrorMessage() | async }}\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<ng-template\r\n    #defaultItemLabelTemplate\r\n    let-label=\"label\">\r\n    {{ label }}\r\n</ng-template>\r\n" }]
         }], ctorParameters: function () {
         return [{ type: SacFormLayoutDirective, decorators: [{
                         type: Host
@@ -1531,7 +1732,7 @@ SacListboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             multi: true,
             useExisting: forwardRef(() => SacListboxComponent),
         },
-    ], usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"row form-group\"\r\n  [class.has-error]=\"invalid && (dirty || touched)\"\r\n  [ngClass]=\"componentHeight | toLabelHeight\"\r\n>\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-xs-12 control-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}\r\n    <sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n    >\r\n      <span\r\n        [class]=\"HelptextTooltipIcon\"\r\n        style=\"margin-left: 5px\"\r\n      ></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-xs-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <select\r\n      multiple\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      class=\"form-control\"\r\n      [ngClass]=\"[componentHeight | toControlHeight]\"\r\n      [size]=\"rowsize\"\r\n      (blur)=\"onTouch()\"\r\n      (change)=\"getSelectedItems($event.target)\"\r\n      [disabled]=\"isdisabled\"\r\n    >\r\n      <ng-content></ng-content>\r\n      <ng-container *ngIf=\"groupitems === ''\">\r\n        <option\r\n          *ngFor=\"let option of options\"\r\n          [value]=\"option[optionvalue]\"\r\n          [disabled]=\"optionenabled !== '' && option[optionenabled] === false\"\r\n        >\r\n          <ng-template\r\n            *ngTemplateOutlet=\"optionlabeltemplate || defaultItemLabelTemplate;context:{ label: option[optionlabel] }\"\r\n          >\r\n          </ng-template>\r\n        </option>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"groupitems !== ''\">\r\n        <optgroup\r\n          *ngFor=\"let option of options\"\r\n          [attr.label]=\"option[grouplabel]\"\r\n        >\r\n          <option\r\n            *ngFor=\"let item of option[groupitems]\"\r\n            [value]=\"item[optionvalue]\"\r\n            [disabled]=\"optionenabled !== '' && item[optionenabled] === false\"\r\n          >\r\n            <ng-template\r\n              *ngTemplateOutlet=\"optionlabeltemplate || defaultItemLabelTemplate;context:{ label: item[optionlabel] }\"\r\n            >\r\n            </ng-template>\r\n          </option>\r\n        </optgroup>\r\n      </ng-container>\r\n    </select>\r\n    <p *ngIf=\"helptextmode === 'text' && helptext\" class=\"help-block\">\r\n      {{helptext}}\r\n    </p>\r\n    <div\r\n      class=\"help-block help-block-error\"\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #defaultItemLabelTemplate let-label=\"label\">\r\n  {{label}}\r\n</ng-template>\r\n", 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\r\n    class=\"row form-group\"\r\n    [class.has-error]=\"invalid && (dirty || touched)\"\r\n    [ngClass]=\"componentHeight | toLabelHeight\">\r\n    <label\r\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n        id=\"{{ name }}label\"\r\n        for=\"{{ name }}\"\r\n        class=\"col-xs-12 control-label\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\r\n        [class.required]=\"isrequired\">\r\n        <span class=\"text\">{{ label }}</span>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [class]=\"HelptextTooltipIcon\"\r\n                style=\"margin-left: 5px\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-xs-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\r\n        <div [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\r\n            <select\r\n                multiple\r\n                id=\"{{ name }}\"\r\n                name=\"{{ name }}\"\r\n                class=\"form-control\"\r\n                [ngClass]=\"[componentHeight | toControlHeight]\"\r\n                [size]=\"rowsize\"\r\n                (blur)=\"onTouch()\"\r\n                (change)=\"getSelectedItems($event.target)\"\r\n                [disabled]=\"isdisabled\">\r\n                <ng-content></ng-content>\r\n                <ng-container *ngIf=\"groupitems === ''\">\r\n                    <option\r\n                        *ngFor=\"let option of options\"\r\n                        [value]=\"option[optionvalue]\"\r\n                        [disabled]=\"optionenabled !== '' && option[optionenabled] === false\">\r\n                        <ng-template *ngTemplateOutlet=\"optionlabeltemplate || defaultItemLabelTemplate; context: { label: option[optionlabel] }\"> </ng-template>\r\n                    </option>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"groupitems !== ''\">\r\n                    <optgroup\r\n                        *ngFor=\"let option of options\"\r\n                        [attr.label]=\"option[grouplabel]\">\r\n                        <option\r\n                            *ngFor=\"let item of option[groupitems]\"\r\n                            [value]=\"item[optionvalue]\"\r\n                            [disabled]=\"optionenabled !== '' && item[optionenabled] === false\">\r\n                            <ng-template *ngTemplateOutlet=\"optionlabeltemplate || defaultItemLabelTemplate; context: { label: item[optionlabel] }\"> </ng-template>\r\n                        </option>\r\n                    </optgroup>\r\n                </ng-container>\r\n            </select>\r\n\r\n            <div\r\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n                class=\"form-control-static\"\r\n                style=\"margin-left: 5px\">\r\n                <sac-tooltip\r\n                    *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n                    [tooltiptext]=\"helptext\"\r\n                    [inlinemode]=\"true\">\r\n                    <span\r\n                        [class]=\"HelptextTooltipIcon\"\r\n                        style=\"margin-left: 5px; margin-right: 5px\">\r\n                    </span>\r\n                </sac-tooltip>\r\n            </div>\r\n        </div>\r\n\r\n        <p\r\n            *ngIf=\"helptextmode === 'text' && helptext\"\r\n            class=\"help-block\">\r\n            {{ helptext }}\r\n        </p>\r\n\r\n        <div\r\n            class=\"help-block help-block-error\"\r\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\r\n            {{ GetErrorMessage() | async }}\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<ng-template\r\n    #defaultItemLabelTemplate\r\n    let-label=\"label\">\r\n    {{ label }}\r\n</ng-template>\r\n", 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 } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacListboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sac-listbox', providers: [
@@ -1545,7 +1746,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => SacListboxComponent),
                         },
-                    ], template: "<div\r\n  class=\"row form-group\"\r\n  [class.has-error]=\"invalid && (dirty || touched)\"\r\n  [ngClass]=\"componentHeight | toLabelHeight\"\r\n>\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-xs-12 control-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}\r\n    <sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n    >\r\n      <span\r\n        [class]=\"HelptextTooltipIcon\"\r\n        style=\"margin-left: 5px\"\r\n      ></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-xs-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <select\r\n      multiple\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      class=\"form-control\"\r\n      [ngClass]=\"[componentHeight | toControlHeight]\"\r\n      [size]=\"rowsize\"\r\n      (blur)=\"onTouch()\"\r\n      (change)=\"getSelectedItems($event.target)\"\r\n      [disabled]=\"isdisabled\"\r\n    >\r\n      <ng-content></ng-content>\r\n      <ng-container *ngIf=\"groupitems === ''\">\r\n        <option\r\n          *ngFor=\"let option of options\"\r\n          [value]=\"option[optionvalue]\"\r\n          [disabled]=\"optionenabled !== '' && option[optionenabled] === false\"\r\n        >\r\n          <ng-template\r\n            *ngTemplateOutlet=\"optionlabeltemplate || defaultItemLabelTemplate;context:{ label: option[optionlabel] }\"\r\n          >\r\n          </ng-template>\r\n        </option>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"groupitems !== ''\">\r\n        <optgroup\r\n          *ngFor=\"let option of options\"\r\n          [attr.label]=\"option[grouplabel]\"\r\n        >\r\n          <option\r\n            *ngFor=\"let item of option[groupitems]\"\r\n            [value]=\"item[optionvalue]\"\r\n            [disabled]=\"optionenabled !== '' && item[optionenabled] === false\"\r\n          >\r\n            <ng-template\r\n              *ngTemplateOutlet=\"optionlabeltemplate || defaultItemLabelTemplate;context:{ label: item[optionlabel] }\"\r\n            >\r\n            </ng-template>\r\n          </option>\r\n        </optgroup>\r\n      </ng-container>\r\n    </select>\r\n    <p *ngIf=\"helptextmode === 'text' && helptext\" class=\"help-block\">\r\n      {{helptext}}\r\n    </p>\r\n    <div\r\n      class=\"help-block help-block-error\"\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #defaultItemLabelTemplate let-label=\"label\">\r\n  {{label}}\r\n</ng-template>\r\n" }]
+                    ], template: "<div\r\n    class=\"row form-group\"\r\n    [class.has-error]=\"invalid && (dirty || touched)\"\r\n    [ngClass]=\"componentHeight | toLabelHeight\">\r\n    <label\r\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n        id=\"{{ name }}label\"\r\n        for=\"{{ name }}\"\r\n        class=\"col-xs-12 control-label\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\r\n        [class.required]=\"isrequired\">\r\n        <span class=\"text\">{{ label }}</span>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [class]=\"HelptextTooltipIcon\"\r\n                style=\"margin-left: 5px\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-xs-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\r\n        <div [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\r\n            <select\r\n                multiple\r\n                id=\"{{ name }}\"\r\n                name=\"{{ name }}\"\r\n                class=\"form-control\"\r\n                [ngClass]=\"[componentHeight | toControlHeight]\"\r\n                [size]=\"rowsize\"\r\n                (blur)=\"onTouch()\"\r\n                (change)=\"getSelectedItems($event.target)\"\r\n                [disabled]=\"isdisabled\">\r\n                <ng-content></ng-content>\r\n                <ng-container *ngIf=\"groupitems === ''\">\r\n                    <option\r\n                        *ngFor=\"let option of options\"\r\n                        [value]=\"option[optionvalue]\"\r\n                        [disabled]=\"optionenabled !== '' && option[optionenabled] === false\">\r\n                        <ng-template *ngTemplateOutlet=\"optionlabeltemplate || defaultItemLabelTemplate; context: { label: option[optionlabel] }\"> </ng-template>\r\n                    </option>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"groupitems !== ''\">\r\n                    <optgroup\r\n                        *ngFor=\"let option of options\"\r\n                        [attr.label]=\"option[grouplabel]\">\r\n                        <option\r\n                            *ngFor=\"let item of option[groupitems]\"\r\n                            [value]=\"item[optionvalue]\"\r\n                            [disabled]=\"optionenabled !== '' && item[optionenabled] === false\">\r\n                            <ng-template *ngTemplateOutlet=\"optionlabeltemplate || defaultItemLabelTemplate; context: { label: item[optionlabel] }\"> </ng-template>\r\n                        </option>\r\n                    </optgroup>\r\n                </ng-container>\r\n            </select>\r\n\r\n            <div\r\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n                class=\"form-control-static\"\r\n                style=\"margin-left: 5px\">\r\n                <sac-tooltip\r\n                    *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n                    [tooltiptext]=\"helptext\"\r\n                    [inlinemode]=\"true\">\r\n                    <span\r\n                        [class]=\"HelptextTooltipIcon\"\r\n                        style=\"margin-left: 5px; margin-right: 5px\">\r\n                    </span>\r\n                </sac-tooltip>\r\n            </div>\r\n        </div>\r\n\r\n        <p\r\n            *ngIf=\"helptextmode === 'text' && helptext\"\r\n            class=\"help-block\">\r\n            {{ helptext }}\r\n        </p>\r\n\r\n        <div\r\n            class=\"help-block help-block-error\"\r\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\r\n            {{ GetErrorMessage() | async }}\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<ng-template\r\n    #defaultItemLabelTemplate\r\n    let-label=\"label\">\r\n    {{ label }}\r\n</ng-template>\r\n" }]
         }], ctorParameters: function () {
         return [{ type: SacFormLayoutDirective, decorators: [{
                         type: Host
@@ -1633,7 +1834,7 @@ SacStaticFormContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion:
             multi: true,
             useExisting: forwardRef(() => SacStaticFormContainerComponent),
         },
-    ], usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"row form-group\"\r\n  [class.has-error]=\"invalid && (dirty || touched)\"\r\n  [ngClass]=\"componentHeight | toLabelHeight\"\r\n>\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-xs-12 control-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}\r\n    <sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n    >\r\n      <span [class]=\"HelptextTooltipIcon\" style=\"margin-left: 5px\"></span>\r\n    </sac-tooltip>\r\n  </label>\r\n  <div\r\n    class=\"col-xs-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <ng-content></ng-content>\r\n    <p *ngIf=\"helptextmode === 'text' && helptext\" class=\"help-block\">\r\n      {{helptext}}\r\n    </p>\r\n\r\n    <label\r\n      for=\"{{name}}\"\r\n      class=\"form-label-adaptive form-label-fixed\"\r\n      [ngClass]=\"{ 'required': isrequired }\"\r\n      *ngIf=\"isAdaptiveLabel && !disablelabel\"\r\n      >{{label}}</label\r\n    >\r\n    <div\r\n      class=\"help-block help-block-error\"\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n", components: [{ type: SacTooltipComponent, selector: "sac-tooltip" }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "toLabelHeight": SacToLabelHeightPipe, "toLabelWidthCss": SacToLabelWidthCssPipe, "toControlWidthCss": SacToControlWidthCssPipe, "async": i3.AsyncPipe } });
+    ], usesInheritance: true, ngImport: i0, template: "<div\r\n    class=\"row form-group\"\r\n    [class.has-error]=\"isinvalid && errormessage\"\r\n    [ngClass]=\"componentHeight | toLabelHeight\">\r\n    <label\r\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n        id=\"{{ name }}label\"\r\n        for=\"{{ name }}\"\r\n        class=\"col-xs-12 control-label\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\r\n        [class.required]=\"isrequired\">\r\n        <span class=\"text\">{{ label }}</span>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [class]=\"HelptextTooltipIcon\"\r\n                style=\"margin-left: 5px\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-xs-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\r\n        <div [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\r\n            <ng-content></ng-content>\r\n\r\n            <div\r\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n                class=\"form-control-static\"\r\n                style=\"margin-left: 5px\">\r\n                <sac-tooltip\r\n                    *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n                    [tooltiptext]=\"helptext\"\r\n                    [inlinemode]=\"true\">\r\n                    <span\r\n                        [class]=\"HelptextTooltipIcon\"\r\n                        style=\"margin-left: 5px; margin-right: 5px\">\r\n                    </span>\r\n                </sac-tooltip>\r\n            </div>\r\n        </div>\r\n\r\n        <p\r\n            *ngIf=\"helptextmode === 'text' && helptext\"\r\n            class=\"help-block\">\r\n            {{ helptext }}\r\n        </p>\r\n\r\n        <div\r\n            class=\"help-block help-block-error\"\r\n            *ngIf=\"isinlineerrorenabled && isinvalid && errormessage\">\r\n            {{ errormessage }}\r\n        </div>\r\n    </div>\r\n</div>\r\n", components: [{ type: SacTooltipComponent, selector: "sac-tooltip" }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "toLabelHeight": SacToLabelHeightPipe, "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: [
@@ -1647,7 +1848,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => SacStaticFormContainerComponent),
                         },
-                    ], template: "<div\r\n  class=\"row form-group\"\r\n  [class.has-error]=\"invalid && (dirty || touched)\"\r\n  [ngClass]=\"componentHeight | toLabelHeight\"\r\n>\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-xs-12 control-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}\r\n    <sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n    >\r\n      <span [class]=\"HelptextTooltipIcon\" style=\"margin-left: 5px\"></span>\r\n    </sac-tooltip>\r\n  </label>\r\n  <div\r\n    class=\"col-xs-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <ng-content></ng-content>\r\n    <p *ngIf=\"helptextmode === 'text' && helptext\" class=\"help-block\">\r\n      {{helptext}}\r\n    </p>\r\n\r\n    <label\r\n      for=\"{{name}}\"\r\n      class=\"form-label-adaptive form-label-fixed\"\r\n      [ngClass]=\"{ 'required': isrequired }\"\r\n      *ngIf=\"isAdaptiveLabel && !disablelabel\"\r\n      >{{label}}</label\r\n    >\r\n    <div\r\n      class=\"help-block help-block-error\"\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+                    ], template: "<div\r\n    class=\"row form-group\"\r\n    [class.has-error]=\"isinvalid && errormessage\"\r\n    [ngClass]=\"componentHeight | toLabelHeight\">\r\n    <label\r\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n        id=\"{{ name }}label\"\r\n        for=\"{{ name }}\"\r\n        class=\"col-xs-12 control-label\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\r\n        [class.required]=\"isrequired\">\r\n        <span class=\"text\">{{ label }}</span>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [class]=\"HelptextTooltipIcon\"\r\n                style=\"margin-left: 5px\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-xs-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\r\n        <div [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\r\n            <ng-content></ng-content>\r\n\r\n            <div\r\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n                class=\"form-control-static\"\r\n                style=\"margin-left: 5px\">\r\n                <sac-tooltip\r\n                    *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n                    [tooltiptext]=\"helptext\"\r\n                    [inlinemode]=\"true\">\r\n                    <span\r\n                        [class]=\"HelptextTooltipIcon\"\r\n                        style=\"margin-left: 5px; margin-right: 5px\">\r\n                    </span>\r\n                </sac-tooltip>\r\n            </div>\r\n        </div>\r\n\r\n        <p\r\n            *ngIf=\"helptextmode === 'text' && helptext\"\r\n            class=\"help-block\">\r\n            {{ helptext }}\r\n        </p>\r\n\r\n        <div\r\n            class=\"help-block help-block-error\"\r\n            *ngIf=\"isinlineerrorenabled && isinvalid && errormessage\">\r\n            {{ errormessage }}\r\n        </div>\r\n    </div>\r\n</div>\r\n" }]
         }], ctorParameters: function () {
         return [{ type: SacFormLayoutDirective, decorators: [{
                         type: Host
@@ -1679,7 +1880,7 @@ SacStaticLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             multi: true,
             useExisting: forwardRef(() => SacStaticLabelComponent),
         },
-    ], usesInheritance: true, ngImport: i0, template: "<div class=\"row form-group\" [ngClass]=\"componentHeight | toLabelHeight\">\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-xs-12 control-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    >{{label}}\r\n    <sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n    >\r\n      <span [class]=\"HelptextTooltipIcon\" style=\"margin-left: 5px\"></span>\r\n    </sac-tooltip>\r\n  </label>\r\n  <div\r\n    class=\"col-xs-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      [id]=\"name\"\r\n      class=\"form-control-static\"\r\n      [style.padding-left.px]=\"0\"\r\n      [innerHTML]=\"value\"\r\n    ></div>\r\n    <p *ngIf=\"helptextmode === 'text' && helptext\" class=\"help-block\">\r\n      {{helptext}}\r\n    </p>\r\n    <label\r\n      for=\"{{name}}\"\r\n      class=\"col-left control-label\"\r\n      *ngIf=\"isAdaptiveLabel && !disablelabel\"\r\n      >{{label}}</label\r\n    >\r\n  </div>\r\n</div>\r\n", components: [{ type: SacTooltipComponent, selector: "sac-tooltip" }], directives: [{ type: i3.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\r\n    class=\"row form-group\"\r\n    [ngClass]=\"componentHeight | toLabelHeight\">\r\n    <label\r\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n        id=\"{{ name }}label\"\r\n        for=\"{{ name }}\"\r\n        class=\"col-xs-12 control-label\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\">\r\n        <span class=\"text\">{{ label }}</span>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [class]=\"HelptextTooltipIcon\"\r\n                style=\"margin-left: 5px\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-xs-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\r\n        <div\r\n            [id]=\"name\"\r\n            class=\"form-control-static\"\r\n            [style.padding-left.px]=\"0\"\r\n            [innerHTML]=\"value\">\r\n        </div>\r\n\r\n        <div\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n            class=\"form-control-static\"\r\n            style=\"margin-left: 5px\">\r\n            <sac-tooltip\r\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n                [tooltiptext]=\"helptext\"\r\n                [inlinemode]=\"true\">\r\n                <span\r\n                    [class]=\"HelptextTooltipIcon\"\r\n                    style=\"margin-left: 5px; margin-right: 5px\">\r\n                </span>\r\n            </sac-tooltip>\r\n        </div>\r\n\r\n        <p\r\n            *ngIf=\"helptextmode === 'text' && helptext\"\r\n            class=\"help-block\">\r\n            {{ helptext }}\r\n        </p>\r\n    </div>\r\n</div>\r\n", components: [{ type: SacTooltipComponent, selector: "sac-tooltip" }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "toLabelHeight": SacToLabelHeightPipe, "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: [
@@ -1693,7 +1894,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => SacStaticLabelComponent),
                         },
-                    ], template: "<div class=\"row form-group\" [ngClass]=\"componentHeight | toLabelHeight\">\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-xs-12 control-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    >{{label}}\r\n    <sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n    >\r\n      <span [class]=\"HelptextTooltipIcon\" style=\"margin-left: 5px\"></span>\r\n    </sac-tooltip>\r\n  </label>\r\n  <div\r\n    class=\"col-xs-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      [id]=\"name\"\r\n      class=\"form-control-static\"\r\n      [style.padding-left.px]=\"0\"\r\n      [innerHTML]=\"value\"\r\n    ></div>\r\n    <p *ngIf=\"helptextmode === 'text' && helptext\" class=\"help-block\">\r\n      {{helptext}}\r\n    </p>\r\n    <label\r\n      for=\"{{name}}\"\r\n      class=\"col-left control-label\"\r\n      *ngIf=\"isAdaptiveLabel && !disablelabel\"\r\n      >{{label}}</label\r\n    >\r\n  </div>\r\n</div>\r\n" }]
+                    ], template: "<div\r\n    class=\"row form-group\"\r\n    [ngClass]=\"componentHeight | toLabelHeight\">\r\n    <label\r\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n        id=\"{{ name }}label\"\r\n        for=\"{{ name }}\"\r\n        class=\"col-xs-12 control-label\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\">\r\n        <span class=\"text\">{{ label }}</span>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [class]=\"HelptextTooltipIcon\"\r\n                style=\"margin-left: 5px\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-xs-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\r\n        <div\r\n            [id]=\"name\"\r\n            class=\"form-control-static\"\r\n            [style.padding-left.px]=\"0\"\r\n            [innerHTML]=\"value\">\r\n        </div>\r\n\r\n        <div\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n            class=\"form-control-static\"\r\n            style=\"margin-left: 5px\">\r\n            <sac-tooltip\r\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n                [tooltiptext]=\"helptext\"\r\n                [inlinemode]=\"true\">\r\n                <span\r\n                    [class]=\"HelptextTooltipIcon\"\r\n                    style=\"margin-left: 5px; margin-right: 5px\">\r\n                </span>\r\n            </sac-tooltip>\r\n        </div>\r\n\r\n        <p\r\n            *ngIf=\"helptextmode === 'text' && helptext\"\r\n            class=\"help-block\">\r\n            {{ helptext }}\r\n        </p>\r\n    </div>\r\n</div>\r\n" }]
         }], ctorParameters: function () {
         return [{ type: SacFormLayoutDirective, decorators: [{
                         type: Host
@@ -1801,7 +2002,7 @@ SacTinyMceComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             useExisting: forwardRef(() => SacTinyMceComponent),
             multi: true,
         },
-    ], usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"row form-group\"\r\n  [class.has-error]=\"invalid && (dirty || touched)\"\r\n  [ngClass]=\"componentHeight | toLabelHeight\"\r\n>\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-xs-12 control-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n  >\r\n    {{label}}\r\n    <sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n    >\r\n      <span [class]=\"HelptextTooltipIcon\" style=\"margin-left: 5px\"></span>\r\n    </sac-tooltip>\r\n  </label>\r\n  <div\r\n    class=\"col-xs-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n    [class.has-error]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n  >\r\n    <editor\r\n      [id]=\"name + '_tinymce'\"\r\n      [init]=\"_config\"\r\n      [initialValue]=\"value\"\r\n      ngModel\r\n      [ngModelOptions]=\"{standalone: true}\"\r\n      (ngModelChange)=\"setValue($event)\"\r\n      (onSaveContent)=\"save($event.event.content)\"\r\n      [disabled]=\"disabled\"\r\n      [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    ></editor>\r\n    <p *ngIf=\"helptextmode === 'text' && helptext\" class=\"help-block\">\r\n      {{helptext}}\r\n    </p>\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"help-block\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<sac-dialog\r\n  *ngIf=\"selectdialogvisible\"\r\n  [allowesc]=\"false\"\r\n  [backdrop]=\"true\"\r\n  [(isvisible)]=\"selectdialogvisible\"\r\n  title=\"{{ lngResourceService.GetString(validationKeyService.TinyMceFileselectDialogtitle) | async }}\"\r\n  size=\"large\"\r\n  height=\"500px\"\r\n>\r\n  <ng-container dialogbody> </ng-container>\r\n  <ng-container dialogfooter>\r\n    <sac-button\r\n      role=\"primary\"\r\n      [name]=\"name + '_modalOk'\"\r\n      text=\"{{ lngResourceService.GetString(validationKeyService.TinyMceFileselectOk) | async }}\"\r\n      (clicked)=\"setSelectDialogResult()\"\r\n    ></sac-button>\r\n    <sac-button\r\n      [name]=\"name + '_modalClose'\"\r\n      text=\"{{ lngResourceService.GetString(validationKeyService.TinyMceFileselectCancel) | async }}\"\r\n      (clicked)=\"closeSelectDialog()\"\r\n    ></sac-button>\r\n  </ng-container>\r\n</sac-dialog>\r\n", 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\r\n    class=\"row form-group\"\r\n    [class.has-error]=\"invalid && (dirty || touched)\"\r\n    [ngClass]=\"componentHeight | toLabelHeight\">\r\n    <label\r\n        for=\"{{ name }}\"\r\n        class=\"col-xs-12 control-label\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\r\n        [class.required]=\"isrequired\">\r\n        <span class=\"text\">{{ label }}</span>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [class]=\"HelptextTooltipIcon\"\r\n                style=\"margin-left: 5px\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-xs-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [class.has-error]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n        [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\r\n        <div [style.flex-grow]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 1 : null\">\r\n            <editor\r\n                [id]=\"name + '_tinymce'\"\r\n                [init]=\"_config\"\r\n                [initialValue]=\"value\"\r\n                ngModel\r\n                [ngModelOptions]=\"{ standalone: true }\"\r\n                (ngModelChange)=\"setValue($event)\"\r\n                (onSaveContent)=\"save($event.event.content)\"\r\n                [disabled]=\"disabled\"\r\n                [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\"></editor>\r\n            <p\r\n                *ngIf=\"helptextmode === 'text' && helptext\"\r\n                class=\"help-block\">\r\n                {{ helptext }}\r\n            </p>\r\n            <div\r\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n                class=\"help-block\">\r\n                {{ GetErrorMessage() | async }}\r\n            </div>\r\n        </div>\r\n\r\n        <div\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n            class=\"form-control-static\"\r\n            style=\"margin-left: 5px\">\r\n            <sac-tooltip\r\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n                [tooltiptext]=\"helptext\"\r\n                [inlinemode]=\"true\">\r\n                <span\r\n                    [class]=\"HelptextTooltipIcon\"\r\n                    style=\"margin-left: 5px; margin-right: 5px\">\r\n                </span>\r\n            </sac-tooltip>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<sac-dialog\r\n    *ngIf=\"selectdialogvisible\"\r\n    [allowesc]=\"false\"\r\n    [backdrop]=\"true\"\r\n    [(isvisible)]=\"selectdialogvisible\"\r\n    title=\"{{ lngResourceService.GetString(validationKeyService.TinyMceFileselectDialogtitle) | async }}\"\r\n    size=\"large\"\r\n    height=\"500px\">\r\n    <ng-container dialogbody> </ng-container>\r\n    <ng-container dialogfooter>\r\n        <sac-button\r\n            role=\"primary\"\r\n            [name]=\"name + '_modalOk'\"\r\n            text=\"{{ lngResourceService.GetString(validationKeyService.TinyMceFileselectOk) | async }}\"\r\n            (clicked)=\"setSelectDialogResult()\"></sac-button>\r\n        <sac-button\r\n            [name]=\"name + '_modalClose'\"\r\n            text=\"{{ lngResourceService.GetString(validationKeyService.TinyMceFileselectCancel) | async }}\"\r\n            (clicked)=\"closeSelectDialog()\"></sac-button>\r\n    </ng-container>\r\n</sac-dialog>\r\n", 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 } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacTinyMceComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sac-tinymce', providers: [
@@ -1815,7 +2016,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                             useExisting: forwardRef(() => SacTinyMceComponent),
                             multi: true,
                         },
-                    ], template: "<div\r\n  class=\"row form-group\"\r\n  [class.has-error]=\"invalid && (dirty || touched)\"\r\n  [ngClass]=\"componentHeight | toLabelHeight\"\r\n>\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-xs-12 control-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n  >\r\n    {{label}}\r\n    <sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n    >\r\n      <span [class]=\"HelptextTooltipIcon\" style=\"margin-left: 5px\"></span>\r\n    </sac-tooltip>\r\n  </label>\r\n  <div\r\n    class=\"col-xs-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n    [class.has-error]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n  >\r\n    <editor\r\n      [id]=\"name + '_tinymce'\"\r\n      [init]=\"_config\"\r\n      [initialValue]=\"value\"\r\n      ngModel\r\n      [ngModelOptions]=\"{standalone: true}\"\r\n      (ngModelChange)=\"setValue($event)\"\r\n      (onSaveContent)=\"save($event.event.content)\"\r\n      [disabled]=\"disabled\"\r\n      [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    ></editor>\r\n    <p *ngIf=\"helptextmode === 'text' && helptext\" class=\"help-block\">\r\n      {{helptext}}\r\n    </p>\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"help-block\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<sac-dialog\r\n  *ngIf=\"selectdialogvisible\"\r\n  [allowesc]=\"false\"\r\n  [backdrop]=\"true\"\r\n  [(isvisible)]=\"selectdialogvisible\"\r\n  title=\"{{ lngResourceService.GetString(validationKeyService.TinyMceFileselectDialogtitle) | async }}\"\r\n  size=\"large\"\r\n  height=\"500px\"\r\n>\r\n  <ng-container dialogbody> </ng-container>\r\n  <ng-container dialogfooter>\r\n    <sac-button\r\n      role=\"primary\"\r\n      [name]=\"name + '_modalOk'\"\r\n      text=\"{{ lngResourceService.GetString(validationKeyService.TinyMceFileselectOk) | async }}\"\r\n      (clicked)=\"setSelectDialogResult()\"\r\n    ></sac-button>\r\n    <sac-button\r\n      [name]=\"name + '_modalClose'\"\r\n      text=\"{{ lngResourceService.GetString(validationKeyService.TinyMceFileselectCancel) | async }}\"\r\n      (clicked)=\"closeSelectDialog()\"\r\n    ></sac-button>\r\n  </ng-container>\r\n</sac-dialog>\r\n" }]
+                    ], template: "<div\r\n    class=\"row form-group\"\r\n    [class.has-error]=\"invalid && (dirty || touched)\"\r\n    [ngClass]=\"componentHeight | toLabelHeight\">\r\n    <label\r\n        for=\"{{ name }}\"\r\n        class=\"col-xs-12 control-label\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\r\n        [class.required]=\"isrequired\">\r\n        <span class=\"text\">{{ label }}</span>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [class]=\"HelptextTooltipIcon\"\r\n                style=\"margin-left: 5px\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-xs-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [class.has-error]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n        [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\r\n        <div [style.flex-grow]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 1 : null\">\r\n            <editor\r\n                [id]=\"name + '_tinymce'\"\r\n                [init]=\"_config\"\r\n                [initialValue]=\"value\"\r\n                ngModel\r\n                [ngModelOptions]=\"{ standalone: true }\"\r\n                (ngModelChange)=\"setValue($event)\"\r\n                (onSaveContent)=\"save($event.event.content)\"\r\n                [disabled]=\"disabled\"\r\n                [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\"></editor>\r\n            <p\r\n                *ngIf=\"helptextmode === 'text' && helptext\"\r\n                class=\"help-block\">\r\n                {{ helptext }}\r\n            </p>\r\n            <div\r\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n                class=\"help-block\">\r\n                {{ GetErrorMessage() | async }}\r\n            </div>\r\n        </div>\r\n\r\n        <div\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n            class=\"form-control-static\"\r\n            style=\"margin-left: 5px\">\r\n            <sac-tooltip\r\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n                [tooltiptext]=\"helptext\"\r\n                [inlinemode]=\"true\">\r\n                <span\r\n                    [class]=\"HelptextTooltipIcon\"\r\n                    style=\"margin-left: 5px; margin-right: 5px\">\r\n                </span>\r\n            </sac-tooltip>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<sac-dialog\r\n    *ngIf=\"selectdialogvisible\"\r\n    [allowesc]=\"false\"\r\n    [backdrop]=\"true\"\r\n    [(isvisible)]=\"selectdialogvisible\"\r\n    title=\"{{ lngResourceService.GetString(validationKeyService.TinyMceFileselectDialogtitle) | async }}\"\r\n    size=\"large\"\r\n    height=\"500px\">\r\n    <ng-container dialogbody> </ng-container>\r\n    <ng-container dialogfooter>\r\n        <sac-button\r\n            role=\"primary\"\r\n            [name]=\"name + '_modalOk'\"\r\n            text=\"{{ lngResourceService.GetString(validationKeyService.TinyMceFileselectOk) | async }}\"\r\n            (clicked)=\"setSelectDialogResult()\"></sac-button>\r\n        <sac-button\r\n            [name]=\"name + '_modalClose'\"\r\n            text=\"{{ lngResourceService.GetString(validationKeyService.TinyMceFileselectCancel) | async }}\"\r\n            (clicked)=\"closeSelectDialog()\"></sac-button>\r\n    </ng-container>\r\n</sac-dialog>\r\n" }]
         }], ctorParameters: function () {
         return [{ type: SacFormLayoutDirective, decorators: [{
                         type: Host
@@ -1860,53 +2061,188 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                 }]
         }] });
 
-class SacTreeViewChildComponent extends SacTreeViewChildCommon {
+/**
+ * Treeview Compomnent
+ */
+class SacTreeviewComponent extends SacTreeviewCommon {
+    // #region Constructors
+    /**
+     * Constructor
+     * @param formLayout SacFormLayout to define scoped layout settings
+     * @param injector Component Injector
+     */
+    constructor(formLayout, injector) {
+        super(formLayout, injector);
+    }
 }
-SacTreeViewChildComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacTreeViewChildComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-SacTreeViewChildComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacTreeViewChildComponent, selector: "sac-treeviewchild", usesInheritance: true, ngImport: i0, template: "<ul class=\"jstree-children\" *ngIf=\"nodes && nodes.length\">\r\n  <li\r\n    *ngFor=\"let node of nodes; let last = last\"\r\n    class=\"jstree-node\"\r\n    [ngClass]=\"{\r\n    'jstree-open': !node[collapseAttr] && node[childrenAttr] && node[childrenAttr].length,\r\n    'jstree-closed': node[collapseAttr]  && node[childrenAttr] && node[childrenAttr].length,\r\n    'jstree-leaf': !node[childrenAttr].length,\r\n    'jstree-last': last\r\n      }\"\r\n    [id]=\"node[idAttr]\"\r\n  >\r\n    <div\r\n      unselectable=\"on\"\r\n      role=\"presentation\"\r\n      class=\"jstree-wholerow\"\r\n      (mouseover)=\"node.hover=true\"\r\n      (mouseout)=\"node.hover=false\"\r\n      [ngClass]=\"{'jstree-wholerow-clicked': node === selectedNode, 'jstree-wholerow-hovered': node.hover}\"\r\n    >\r\n      &nbsp;\r\n    </div>\r\n\r\n    <i\r\n      class=\"jstree-icon jstree-ocl\"\r\n      role=\"presentation\"\r\n      (click)=\"onCollapseClick(node)\"\r\n      (mouseover)=\"node.hover=true\"\r\n      (mouseout)=\"node.hover=false\"\r\n    ></i>\r\n\r\n    <a\r\n      class=\"jstree-anchor\"\r\n      (click)=\"onClick(node)\"\r\n      [ngClass]=\"{'jstree-clicked': node === selectedNode, 'jstreehovered': node.hover}\"\r\n      (mouseover)=\"node.hover=true\"\r\n      (mouseout)=\"node.hover=false\"\r\n    >\r\n      <ng-container\r\n        *ngTemplateOutlet=\"treefileicon; context { item: node }\"\r\n        ;\r\n        content\r\n      ></ng-container>\r\n\r\n      {{node[textAttr]}}\r\n    </a>\r\n\r\n    <ng-container\r\n      *ngTemplateOutlet=\"template; context { item: node }\"\r\n    ></ng-container>\r\n\r\n    <sac-treeviewchild\r\n      *ngIf=\"node[childrenAttr] && node[childrenAttr].length\"\r\n      [fileicontemplate]=\"fileicontemplate\"\r\n      [template]=\"template\"\r\n      [collapseall]=\"collapseall\"\r\n      [ngClass]=\"(node[collapseAttr]===true)?'collapse':'show'\"\r\n      [data]=\"node[childrenAttr]\"\r\n      [idAttr]=\"idAttr\"\r\n      [parentAttr]=\"parentAttr\"\r\n      [textAttr]=\"textAttr\"\r\n      [prepareData]=\"false\"\r\n      (onselecteditem)=\"sendMsgToParent($event)\"\r\n      [(selectedid)]=\"selectedid\"\r\n    >\r\n    </sac-treeviewchild>\r\n  </li>\r\n</ul>\r\n", components: [{ type: SacTreeViewChildComponent, selector: "sac-treeviewchild" }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacTreeViewChildComponent, decorators: [{
+SacTreeviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacTreeviewComponent, deps: [{ token: SacFormLayoutDirective, host: true, optional: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+SacTreeviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacTreeviewComponent, selector: "sac-treeview", providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            multi: true,
+            useExisting: SacTreeviewComponent,
+        },
+        {
+            provide: NG_VALIDATORS,
+            useExisting: forwardRef(() => SacTreeviewComponent),
+            multi: true,
+        },
+    ], usesInheritance: true, ngImport: i0, template: "<div\r\n    class=\"row mb-3\"\r\n    [class.g-0]=\"disablelabel\"\r\n    [class.has-error]=\"invalid && (dirty || touched)\">\r\n    <label\r\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n        id=\"{{ name }}label\"\r\n        for=\"{{ name }}\"\r\n        class=\"col-xs-12 control-label\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\r\n        [class.required]=\"isrequired\">\r\n        <span class=\"text\">{{ label }}</span>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [class]=\"HelptextTooltipIcon\"\r\n                style=\"margin-left: 5px\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-xs-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [class.has-error]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\r\n        <div [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\r\n            <div [style.width.%]=\"helptextmode === 'tooltip' && helptext && disablelabel ? '100' : null\">\r\n                <table\r\n                    class=\"table table-hover table-condensed\"\r\n                    id=\"{{ name }}\"\r\n                    style=\"table-layout: fixed\"\r\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n                    [class.border]=\"invalid && (dirty || touched)\"\r\n                    [class.border-danger]=\"invalid && (dirty || touched)\">\r\n                    <tbody>\r\n                        <ng-container *ngFor=\"let node of data\">\r\n                            <ng-template\r\n                                [ngTemplateOutlet]=\"treeItem\"\r\n                                [ngTemplateOutletContext]=\"{ node: node, deep: 0, path: '', textpath: '' }\">\r\n                            </ng-template>\r\n                        </ng-container>\r\n                    </tbody>\r\n                </table>\r\n\r\n                <div\r\n                    *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n                    class=\"help-block\">\r\n                    {{ GetErrorMessage() | async }}\r\n                </div>\r\n\r\n                <p\r\n                    *ngIf=\"helptextmode === 'text' && helptext\"\r\n                    class=\"help-block\">\r\n                    {{ helptext }}\r\n                </p>\r\n            </div>\r\n\r\n            <div\r\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n                class=\"form-control-static\"\r\n                style=\"margin-left: 5px\">\r\n                <sac-tooltip\r\n                    *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n                    [tooltiptext]=\"helptext\"\r\n                    [inlinemode]=\"true\">\r\n                    <span\r\n                        [class]=\"HelptextTooltipIcon\"\r\n                        style=\"margin-left: 5px; margin-right: 5px\">\r\n                    </span>\r\n                </sac-tooltip>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n<ng-template\r\n    #treeItem\r\n    let-node=\"node\"\r\n    let-deep=\"deep\"\r\n    let-path=\"path\"\r\n    let-textpath=\"textpath\">\r\n    <tr\r\n        [class.active]=\"isSelectedState(node)\"\r\n        attr.data-path=\"{{ path }}/{{ getStringField(node, attrid) }}\"\r\n        attr.data-textpath=\"{{ textpath }}/{{ getStringField(node, attrlabel) }}\">\r\n        <td>\r\n            <div\r\n                class=\"py-1 px-2 d-flex align-items-center\"\r\n                style=\"display: flex; flex-direction: row; cursor: pointer; align-items: center\"\r\n                (mouseenter)=\"setHoverState(node, true)\"\r\n                (mouseleave)=\"setHoverState(node, false)\">\r\n                <div\r\n                    style=\"margin-right: 15px\"\r\n                    *ngFor=\"let i of count(deep)\">\r\n                </div>\r\n\r\n                <div\r\n                    (click)=\"onNodeClicked(node)\"\r\n                    *ngIf=\"expandedstate === 'true' || expandedstate === true\"\r\n                    style=\"margin-right: 15px\"\r\n                    [ngClass]=\"!hasChildren(node) ? iconFolderEmpty : !isExpandedState(node) ? iconFolderCollabsed : isExpandedState(node) ? iconFolderOpen : ''\">\r\n                </div>\r\n\r\n                <div\r\n                    (click)=\"onNodeClicked(node)\"\r\n                    *ngIf=\"attricon && getStringField(node, attricon)\">\r\n                    <ng-template\r\n                        [ngTemplateOutlet]=\"templateicon || defaultTemplateIcon\"\r\n                        [ngTemplateOutletContext]=\"{ node: node }\">\r\n                    </ng-template>\r\n                </div>\r\n\r\n                <div\r\n                    (click)=\"onNodeClicked(node)\"\r\n                    style=\"padding-top: 7px; padding-bottom: 7px; flex-grow: 1\"\r\n                    [style.max-width.%]=\"enableellipsis ? '100' : null\"\r\n                    [style.overflow]=\"enableellipsis ? 'hidden' : null\"\r\n                    [style.text-overflow]=\"enableellipsis ? 'ellipsis' : null\"\r\n                    [style.white-space]=\"enableellipsis ? 'nowrap' : null\">\r\n                    <ng-template\r\n                        [ngTemplateOutlet]=\"templatelabel || defaultTemplateLabel\"\r\n                        [ngTemplateOutletContext]=\"{ node: node, label: getStringField(node, attrlabel) }\">\r\n                    </ng-template>\r\n                </div>\r\n\r\n                <div\r\n                    (click)=\"setSelectedState(node)\"\r\n                    style=\"flex-shrink: 0\"\r\n                    *ngIf=\"!isDisabledState(node) && (showactionalways || isSelectedState(node) || isHoverState(node))\">\r\n                    <ng-template\r\n                        [ngTemplateOutlet]=\"templateaction || defaultTemplateAction\"\r\n                        [ngTemplateOutletContext]=\"{ node: node, actionhandler: onActionClicked.bind(this) }\">\r\n                    </ng-template>\r\n                </div>\r\n            </div>\r\n        </td>\r\n    </tr>\r\n    <ng-container *ngIf=\"isExpandedState(node)\">\r\n        <ng-template\r\n            *ngFor=\"let child of getChildren(node)\"\r\n            [ngTemplateOutlet]=\"treeItem\"\r\n            [ngTemplateOutletContext]=\"{\r\n                node: child,\r\n                deep: deep + 1,\r\n                path: path + '/' + getStringField(node, attrid),\r\n                textpath: textpath + '/' + getStringField(node, attrlabel)\r\n            }\">\r\n        </ng-template>\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<ng-template\r\n    #defaultTemplateLabel\r\n    let-label=\"label\"\r\n    let-node=\"node\">\r\n    <span [title]=\"label\">\r\n        {{ label }}\r\n    </span>\r\n</ng-template>\r\n\r\n<ng-template\r\n    #defaultTemplateIcon\r\n    let-node=\"node\">\r\n    <div\r\n        style=\"margin-right: 15px\"\r\n        [ngClass]=\"getStringField(node, attricon)\">\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template\r\n    #defaultTemplateAction\r\n    let-node=\"node\"\r\n    let-actionhandler=\"actionhandler\">\r\n    <a\r\n        class=\"btn btn-link text-secondary\"\r\n        (click)=\"actionhandler({ action: 'default', node: node })\">\r\n        <i [class]=\"iconAction\"></i>\r\n    </a>\r\n</ng-template>\r\n", 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 } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacTreeviewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sac-treeviewchild', template: "<ul class=\"jstree-children\" *ngIf=\"nodes && nodes.length\">\r\n  <li\r\n    *ngFor=\"let node of nodes; let last = last\"\r\n    class=\"jstree-node\"\r\n    [ngClass]=\"{\r\n    'jstree-open': !node[collapseAttr] && node[childrenAttr] && node[childrenAttr].length,\r\n    'jstree-closed': node[collapseAttr]  && node[childrenAttr] && node[childrenAttr].length,\r\n    'jstree-leaf': !node[childrenAttr].length,\r\n    'jstree-last': last\r\n      }\"\r\n    [id]=\"node[idAttr]\"\r\n  >\r\n    <div\r\n      unselectable=\"on\"\r\n      role=\"presentation\"\r\n      class=\"jstree-wholerow\"\r\n      (mouseover)=\"node.hover=true\"\r\n      (mouseout)=\"node.hover=false\"\r\n      [ngClass]=\"{'jstree-wholerow-clicked': node === selectedNode, 'jstree-wholerow-hovered': node.hover}\"\r\n    >\r\n      &nbsp;\r\n    </div>\r\n\r\n    <i\r\n      class=\"jstree-icon jstree-ocl\"\r\n      role=\"presentation\"\r\n      (click)=\"onCollapseClick(node)\"\r\n      (mouseover)=\"node.hover=true\"\r\n      (mouseout)=\"node.hover=false\"\r\n    ></i>\r\n\r\n    <a\r\n      class=\"jstree-anchor\"\r\n      (click)=\"onClick(node)\"\r\n      [ngClass]=\"{'jstree-clicked': node === selectedNode, 'jstreehovered': node.hover}\"\r\n      (mouseover)=\"node.hover=true\"\r\n      (mouseout)=\"node.hover=false\"\r\n    >\r\n      <ng-container\r\n        *ngTemplateOutlet=\"treefileicon; context { item: node }\"\r\n        ;\r\n        content\r\n      ></ng-container>\r\n\r\n      {{node[textAttr]}}\r\n    </a>\r\n\r\n    <ng-container\r\n      *ngTemplateOutlet=\"template; context { item: node }\"\r\n    ></ng-container>\r\n\r\n    <sac-treeviewchild\r\n      *ngIf=\"node[childrenAttr] && node[childrenAttr].length\"\r\n      [fileicontemplate]=\"fileicontemplate\"\r\n      [template]=\"template\"\r\n      [collapseall]=\"collapseall\"\r\n      [ngClass]=\"(node[collapseAttr]===true)?'collapse':'show'\"\r\n      [data]=\"node[childrenAttr]\"\r\n      [idAttr]=\"idAttr\"\r\n      [parentAttr]=\"parentAttr\"\r\n      [textAttr]=\"textAttr\"\r\n      [prepareData]=\"false\"\r\n      (onselecteditem)=\"sendMsgToParent($event)\"\r\n      [(selectedid)]=\"selectedid\"\r\n    >\r\n    </sac-treeviewchild>\r\n  </li>\r\n</ul>\r\n" }]
-        }] });
+            args: [{ selector: 'sac-treeview', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            multi: true,
+                            useExisting: SacTreeviewComponent,
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: forwardRef(() => SacTreeviewComponent),
+                            multi: true,
+                        },
+                    ], template: "<div\r\n    class=\"row mb-3\"\r\n    [class.g-0]=\"disablelabel\"\r\n    [class.has-error]=\"invalid && (dirty || touched)\">\r\n    <label\r\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n        id=\"{{ name }}label\"\r\n        for=\"{{ name }}\"\r\n        class=\"col-xs-12 control-label\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\r\n        [class.required]=\"isrequired\">\r\n        <span class=\"text\">{{ label }}</span>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [class]=\"HelptextTooltipIcon\"\r\n                style=\"margin-left: 5px\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-xs-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [class.has-error]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\r\n        <div [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\r\n            <div [style.width.%]=\"helptextmode === 'tooltip' && helptext && disablelabel ? '100' : null\">\r\n                <table\r\n                    class=\"table table-hover table-condensed\"\r\n                    id=\"{{ name }}\"\r\n                    style=\"table-layout: fixed\"\r\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n                    [class.border]=\"invalid && (dirty || touched)\"\r\n                    [class.border-danger]=\"invalid && (dirty || touched)\">\r\n                    <tbody>\r\n                        <ng-container *ngFor=\"let node of data\">\r\n                            <ng-template\r\n                                [ngTemplateOutlet]=\"treeItem\"\r\n                                [ngTemplateOutletContext]=\"{ node: node, deep: 0, path: '', textpath: '' }\">\r\n                            </ng-template>\r\n                        </ng-container>\r\n                    </tbody>\r\n                </table>\r\n\r\n                <div\r\n                    *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n                    class=\"help-block\">\r\n                    {{ GetErrorMessage() | async }}\r\n                </div>\r\n\r\n                <p\r\n                    *ngIf=\"helptextmode === 'text' && helptext\"\r\n                    class=\"help-block\">\r\n                    {{ helptext }}\r\n                </p>\r\n            </div>\r\n\r\n            <div\r\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n                class=\"form-control-static\"\r\n                style=\"margin-left: 5px\">\r\n                <sac-tooltip\r\n                    *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n                    [tooltiptext]=\"helptext\"\r\n                    [inlinemode]=\"true\">\r\n                    <span\r\n                        [class]=\"HelptextTooltipIcon\"\r\n                        style=\"margin-left: 5px; margin-right: 5px\">\r\n                    </span>\r\n                </sac-tooltip>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n<ng-template\r\n    #treeItem\r\n    let-node=\"node\"\r\n    let-deep=\"deep\"\r\n    let-path=\"path\"\r\n    let-textpath=\"textpath\">\r\n    <tr\r\n        [class.active]=\"isSelectedState(node)\"\r\n        attr.data-path=\"{{ path }}/{{ getStringField(node, attrid) }}\"\r\n        attr.data-textpath=\"{{ textpath }}/{{ getStringField(node, attrlabel) }}\">\r\n        <td>\r\n            <div\r\n                class=\"py-1 px-2 d-flex align-items-center\"\r\n                style=\"display: flex; flex-direction: row; cursor: pointer; align-items: center\"\r\n                (mouseenter)=\"setHoverState(node, true)\"\r\n                (mouseleave)=\"setHoverState(node, false)\">\r\n                <div\r\n                    style=\"margin-right: 15px\"\r\n                    *ngFor=\"let i of count(deep)\">\r\n                </div>\r\n\r\n                <div\r\n                    (click)=\"onNodeClicked(node)\"\r\n                    *ngIf=\"expandedstate === 'true' || expandedstate === true\"\r\n                    style=\"margin-right: 15px\"\r\n                    [ngClass]=\"!hasChildren(node) ? iconFolderEmpty : !isExpandedState(node) ? iconFolderCollabsed : isExpandedState(node) ? iconFolderOpen : ''\">\r\n                </div>\r\n\r\n                <div\r\n                    (click)=\"onNodeClicked(node)\"\r\n                    *ngIf=\"attricon && getStringField(node, attricon)\">\r\n                    <ng-template\r\n                        [ngTemplateOutlet]=\"templateicon || defaultTemplateIcon\"\r\n                        [ngTemplateOutletContext]=\"{ node: node }\">\r\n                    </ng-template>\r\n                </div>\r\n\r\n                <div\r\n                    (click)=\"onNodeClicked(node)\"\r\n                    style=\"padding-top: 7px; padding-bottom: 7px; flex-grow: 1\"\r\n                    [style.max-width.%]=\"enableellipsis ? '100' : null\"\r\n                    [style.overflow]=\"enableellipsis ? 'hidden' : null\"\r\n                    [style.text-overflow]=\"enableellipsis ? 'ellipsis' : null\"\r\n                    [style.white-space]=\"enableellipsis ? 'nowrap' : null\">\r\n                    <ng-template\r\n                        [ngTemplateOutlet]=\"templatelabel || defaultTemplateLabel\"\r\n                        [ngTemplateOutletContext]=\"{ node: node, label: getStringField(node, attrlabel) }\">\r\n                    </ng-template>\r\n                </div>\r\n\r\n                <div\r\n                    (click)=\"setSelectedState(node)\"\r\n                    style=\"flex-shrink: 0\"\r\n                    *ngIf=\"!isDisabledState(node) && (showactionalways || isSelectedState(node) || isHoverState(node))\">\r\n                    <ng-template\r\n                        [ngTemplateOutlet]=\"templateaction || defaultTemplateAction\"\r\n                        [ngTemplateOutletContext]=\"{ node: node, actionhandler: onActionClicked.bind(this) }\">\r\n                    </ng-template>\r\n                </div>\r\n            </div>\r\n        </td>\r\n    </tr>\r\n    <ng-container *ngIf=\"isExpandedState(node)\">\r\n        <ng-template\r\n            *ngFor=\"let child of getChildren(node)\"\r\n            [ngTemplateOutlet]=\"treeItem\"\r\n            [ngTemplateOutletContext]=\"{\r\n                node: child,\r\n                deep: deep + 1,\r\n                path: path + '/' + getStringField(node, attrid),\r\n                textpath: textpath + '/' + getStringField(node, attrlabel)\r\n            }\">\r\n        </ng-template>\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<ng-template\r\n    #defaultTemplateLabel\r\n    let-label=\"label\"\r\n    let-node=\"node\">\r\n    <span [title]=\"label\">\r\n        {{ label }}\r\n    </span>\r\n</ng-template>\r\n\r\n<ng-template\r\n    #defaultTemplateIcon\r\n    let-node=\"node\">\r\n    <div\r\n        style=\"margin-right: 15px\"\r\n        [ngClass]=\"getStringField(node, attricon)\">\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template\r\n    #defaultTemplateAction\r\n    let-node=\"node\"\r\n    let-actionhandler=\"actionhandler\">\r\n    <a\r\n        class=\"btn btn-link text-secondary\"\r\n        (click)=\"actionhandler({ action: 'default', node: node })\">\r\n        <i [class]=\"iconAction\"></i>\r\n    </a>\r\n</ng-template>\r\n" }]
+        }], ctorParameters: function () {
+        return [{ type: SacFormLayoutDirective, decorators: [{
+                        type: Host
+                    }, {
+                        type: Optional
+                    }] }, { type: i0.Injector }];
+    } });
 
-class SacTreeViewComponent extends SacTreeViewCommon {
+class SACBootstrap3TreeviewModule {
 }
-SacTreeViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacTreeViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-SacTreeViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacTreeViewComponent, selector: "sac-treeview", usesInheritance: true, ngImport: i0, template: "<div class=\"structure panel panel-default\" icon=\"Structure\">\r\n  <div class=\"panel-heading\">\r\n    <p class=\"panel-title\"><span>{{ name }}</span></p>\r\n  </div>\r\n  <div class=\"panel-body\">\r\n    <div class=\"right\">\r\n      <div\r\n        class=\"form-submit form-inline\"\r\n        style=\"text-align: right; height: 24px\"\r\n      >\r\n        <a class=\"btn-inline\"\r\n          ><i class=\"icon icon-base-expand\" (click)=\"collapseAllNode(false)\"></i\r\n        ></a>\r\n        <a class=\"btn-inline\"\r\n          ><i\r\n            class=\"icon icon-base-collapse\"\r\n            (click)=\"collapseAllNode(true)\"\r\n          ></i\r\n        ></a>\r\n      </div>\r\n    </div>\r\n    <div\r\n      [id]=\"name\"\r\n      class=\"structure-tree single-root jstree jstree-1 jstree-default\"\r\n    >\r\n      <ul\r\n        class=\"jstree-container-ul jstree-children jstree-no-dots jstree-striped jstree-wholerow-ul\"\r\n        *ngIf=\"nodes && nodes.length\"\r\n      >\r\n        <li\r\n          *ngFor=\"let node of nodes; let last = last\"\r\n          class=\"jstree-node\"\r\n          [ngClass]=\"{\r\n      'jstree-open': !node[collapseAttr] && node[childrenAttr] && node[childrenAttr].length,\r\n      'jstree-closed': node[collapseAttr]  && node[childrenAttr] && node[childrenAttr].length,\r\n      'jstree-leaf': !node[childrenAttr].length,\r\n      'jstree-last': last\r\n    }\"\r\n          [id]=\"node[idAttr]\"\r\n        >\r\n          <div\r\n            unselectable=\"on\"\r\n            role=\"presentation\"\r\n            class=\"jstree-wholerow\"\r\n            (mouseover)=\"node.hover=true\"\r\n            (mouseout)=\"node.hover=false\"\r\n            [ngClass]=\"{'jstree-wholerow-clicked': node === selectedNode, 'jstree-wholerow-hovered': node.hover}\"\r\n          >\r\n            &nbsp;\r\n          </div>\r\n\r\n          <i\r\n            class=\"jstree-icon jstree-ocl\"\r\n            role=\"presentation\"\r\n            (click)=\"onCollapseClick(node)\"\r\n            (mouseover)=\"node.hover=true\"\r\n            (mouseout)=\"node.hover=false\"\r\n          ></i>\r\n\r\n          <a\r\n            class=\"jstree-anchor\"\r\n            (click)=\"onClick(node)\"\r\n            [ngClass]=\"{'jstree-clicked': node === selectedNode, 'jstreehovered': node.hover}\"\r\n            (mouseover)=\"node.hover=true\"\r\n            (mouseout)=\"node.hover=false\"\r\n          >\r\n            <ng-container\r\n              *ngTemplateOutlet=\"treefileicon; context { item: node }\"\r\n              ;\r\n              content\r\n            ></ng-container>\r\n\r\n            <span>{{node[textAttr]}}</span>\r\n          </a>\r\n\r\n          <ng-container\r\n            *ngTemplateOutlet=\"template; context { item: node }\"\r\n            ;\r\n            content\r\n          ></ng-container>\r\n\r\n          <sac-treeviewchild\r\n            *ngIf=\"node[childrenAttr] && node[childrenAttr].length\"\r\n            [fileicontemplate]=\"fileicontemplate\"\r\n            [template]=\"template\"\r\n            [collapseall]=\"collapseall\"\r\n            [ngClass]=\"(node[collapseAttr]===true)?'collapse':'show'\"\r\n            [data]=\"node[childrenAttr]\"\r\n            [idAttr]=\"idAttr\"\r\n            [parentAttr]=\"parentAttr\"\r\n            [textAttr]=\"textAttr\"\r\n            [prepareData]=\"false\"\r\n            (onselecteditem)=\"sendMsgToParent($event)\"\r\n            [(selectedid)]=\"selectedid\"\r\n          >\r\n          </sac-treeviewchild>\r\n        </li>\r\n      </ul>\r\n    </div>\r\n  </div>\r\n</div>\r\n", components: [{ type: SacTreeViewChildComponent, selector: "sac-treeviewchild" }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacTreeViewComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sac-treeview', template: "<div class=\"structure panel panel-default\" icon=\"Structure\">\r\n  <div class=\"panel-heading\">\r\n    <p class=\"panel-title\"><span>{{ name }}</span></p>\r\n  </div>\r\n  <div class=\"panel-body\">\r\n    <div class=\"right\">\r\n      <div\r\n        class=\"form-submit form-inline\"\r\n        style=\"text-align: right; height: 24px\"\r\n      >\r\n        <a class=\"btn-inline\"\r\n          ><i class=\"icon icon-base-expand\" (click)=\"collapseAllNode(false)\"></i\r\n        ></a>\r\n        <a class=\"btn-inline\"\r\n          ><i\r\n            class=\"icon icon-base-collapse\"\r\n            (click)=\"collapseAllNode(true)\"\r\n          ></i\r\n        ></a>\r\n      </div>\r\n    </div>\r\n    <div\r\n      [id]=\"name\"\r\n      class=\"structure-tree single-root jstree jstree-1 jstree-default\"\r\n    >\r\n      <ul\r\n        class=\"jstree-container-ul jstree-children jstree-no-dots jstree-striped jstree-wholerow-ul\"\r\n        *ngIf=\"nodes && nodes.length\"\r\n      >\r\n        <li\r\n          *ngFor=\"let node of nodes; let last = last\"\r\n          class=\"jstree-node\"\r\n          [ngClass]=\"{\r\n      'jstree-open': !node[collapseAttr] && node[childrenAttr] && node[childrenAttr].length,\r\n      'jstree-closed': node[collapseAttr]  && node[childrenAttr] && node[childrenAttr].length,\r\n      'jstree-leaf': !node[childrenAttr].length,\r\n      'jstree-last': last\r\n    }\"\r\n          [id]=\"node[idAttr]\"\r\n        >\r\n          <div\r\n            unselectable=\"on\"\r\n            role=\"presentation\"\r\n            class=\"jstree-wholerow\"\r\n            (mouseover)=\"node.hover=true\"\r\n            (mouseout)=\"node.hover=false\"\r\n            [ngClass]=\"{'jstree-wholerow-clicked': node === selectedNode, 'jstree-wholerow-hovered': node.hover}\"\r\n          >\r\n            &nbsp;\r\n          </div>\r\n\r\n          <i\r\n            class=\"jstree-icon jstree-ocl\"\r\n            role=\"presentation\"\r\n            (click)=\"onCollapseClick(node)\"\r\n            (mouseover)=\"node.hover=true\"\r\n            (mouseout)=\"node.hover=false\"\r\n          ></i>\r\n\r\n          <a\r\n            class=\"jstree-anchor\"\r\n            (click)=\"onClick(node)\"\r\n            [ngClass]=\"{'jstree-clicked': node === selectedNode, 'jstreehovered': node.hover}\"\r\n            (mouseover)=\"node.hover=true\"\r\n            (mouseout)=\"node.hover=false\"\r\n          >\r\n            <ng-container\r\n              *ngTemplateOutlet=\"treefileicon; context { item: node }\"\r\n              ;\r\n              content\r\n            ></ng-container>\r\n\r\n            <span>{{node[textAttr]}}</span>\r\n          </a>\r\n\r\n          <ng-container\r\n            *ngTemplateOutlet=\"template; context { item: node }\"\r\n            ;\r\n            content\r\n          ></ng-container>\r\n\r\n          <sac-treeviewchild\r\n            *ngIf=\"node[childrenAttr] && node[childrenAttr].length\"\r\n            [fileicontemplate]=\"fileicontemplate\"\r\n            [template]=\"template\"\r\n            [collapseall]=\"collapseall\"\r\n            [ngClass]=\"(node[collapseAttr]===true)?'collapse':'show'\"\r\n            [data]=\"node[childrenAttr]\"\r\n            [idAttr]=\"idAttr\"\r\n            [parentAttr]=\"parentAttr\"\r\n            [textAttr]=\"textAttr\"\r\n            [prepareData]=\"false\"\r\n            (onselecteditem)=\"sendMsgToParent($event)\"\r\n            [(selectedid)]=\"selectedid\"\r\n          >\r\n          </sac-treeviewchild>\r\n        </li>\r\n      </ul>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+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]] });
+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],
+                    exports: [SacTreeviewComponent],
+                }]
         }] });
 
-class SacTreeItemActionComponent extends SacTreeItemActionCommon {
-    constructor(el) {
-        super(el);
+/**
+ * Dropzone Komponente für mehrere Uploads
+ * @see https://github.com/kukhariev/ngx-uploadx/
+ */
+class SacDropzoneMultipleComponent extends SacDropzoneMultipleCommon {
+    // #region Constructors
+    /**
+     * Constructor
+     * @param formLayout SacFormLayout to define scoped layout settings
+     * @param injector Injector for injecting services
+     * @param renderer Angular rendering engine
+     * @param ngZone ngZone to manage external javascripts
+     */
+    constructor(formLayout, injector, renderer, ngZone) {
+        super(formLayout, injector, renderer, ngZone);
+    }
+    // #endregion Constructors
+    // #region Public Methods
+    /**
+     * Initialisiert das Control
+     */
+    ngOnInit() {
+        super.ngOnInit();
     }
 }
-SacTreeItemActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacTreeItemActionComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-SacTreeItemActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacTreeItemActionComponent, selector: "sac-treeitemaction", usesInheritance: true, ngImport: i0, template: "<i class=\"{{transformClass(iconstyle)}}\" (mouseover)=\"item.hover=true\" (mouseout)=\"item.hover=false\" (click)=\"iconaction()\" ></i>" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacTreeItemActionComponent, decorators: [{
+SacDropzoneMultipleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacDropzoneMultipleComponent, deps: [{ token: SacFormLayoutDirective, host: true, optional: true }, { token: i0.Injector }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+SacDropzoneMultipleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacDropzoneMultipleComponent, selector: "sac-dropzonemultiple", providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            multi: true,
+            useExisting: SacDropzoneMultipleComponent,
+        },
+        {
+            provide: NG_VALIDATORS,
+            multi: true,
+            useExisting: forwardRef(() => SacDropzoneMultipleComponent),
+        },
+    ], usesInheritance: true, ngImport: i0, template: "<div\r\n    id=\"{{ name }}\"\r\n    class=\"row form-group\"\r\n    [class.has-error]=\"invalid && (dirty || touched)\"\r\n    [ngClass]=\"componentHeight | toLabelHeight\">\r\n    <label\r\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n        id=\"{{ name }}label\"\r\n        for=\"{{ name }}_uploadinput\"\r\n        class=\"col-xs-12 control-label\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\r\n        [class.required]=\"isrequired\">\r\n        <span class=\"text\">{{ label }}</span>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [class]=\"HelptextTooltipIcon\"\r\n                style=\"margin-left: 5px\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-xs-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\r\n        <div [style.flex-grow]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 1 : null\">\r\n            <div\r\n                class=\"img-rounded dropzone control-label\"\r\n                (drop)=\"dropHandler($event)\"\r\n                (dragover)=\"onDragOver($event)\"\r\n                (dragleave)=\"onDragLeave($event)\"\r\n                [class.active]=\"active\"\r\n                [style.min-height]=\"uploadheight\"\r\n                [class.is-invalid]=\"invalid && (dirty || touched)\">\r\n                <div\r\n                    class=\"content\"\r\n                    *ngIf=\"uploads.length === 0\">\r\n                    <div>\r\n                        <div [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\r\n                            <ng-content></ng-content>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div *ngIf=\"uploads.length > 0\">\r\n                    <div>\r\n                        <div\r\n                            class=\"dropzone-uploadstates\"\r\n                            [class.mt-1]=\"i > 0\"\r\n                            *ngFor=\"let file of uploads; let i = index\">\r\n                            <div\r\n                                class=\"input-group upload-component upload-component-multiple\"\r\n                                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n                                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\r\n                                <div class=\"form-control upload-progress border-secondary\">\r\n                                    <div class=\"progress\">\r\n                                        <div\r\n                                            class=\"progress-bar\"\r\n                                            [class.progress-bar-success]=\"file.progress === 100\"\r\n                                            role=\"progressbar\"\r\n                                            [attr.aria-valuenow]=\"file.progress\"\r\n                                            aria-valuemin=\"0\"\r\n                                            aria-valuemax=\"100\"\r\n                                            [style.width.%]=\"file.progress\">\r\n                                            <span class=\"progress-text\">{{ file.name }}</span>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"input-group-btn\">\r\n                                    <!-- image-preview-clear button -->\r\n                                    <a\r\n                                        class=\"btn\"\r\n                                        (click)=\"cancel(file.uploadId)\"\r\n                                        [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n                                        [class.btn-danger]=\"invalid && (dirty || touched)\">\r\n                                        <span [class]=\"IconDelete\"></span>\r\n                                    </a>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <input\r\n                    #files\r\n                    multiple\r\n                    id=\"{{ name }}_uploadinput\"\r\n                    type=\"file\"\r\n                    class=\"custom-file-input\"\r\n                    (click)=\"files.value = ''\"\r\n                    (uploadxState)=\"onUpload($event)\"\r\n                    [disabled]=\"HasQueueItem()\" />\r\n            </div>\r\n            <small\r\n                *ngIf=\"helptextmode === 'text' && helptext\"\r\n                class=\"help-block\">\r\n                {{ helptext }}\r\n            </small>\r\n            <div\r\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n                class=\"help-block help-block-error\">\r\n                {{ GetErrorMessage() | async }}\r\n            </div>\r\n        </div>\r\n\r\n        <div\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n            class=\"form-control-static\"\r\n            style=\"margin-left: 5px\">\r\n            <sac-tooltip\r\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n                [tooltiptext]=\"helptext\"\r\n                [inlinemode]=\"true\">\r\n                <span\r\n                    [class]=\"HelptextTooltipIcon\"\r\n                    style=\"margin-left: 5px; margin-right: 5px\">\r\n                </span>\r\n            </sac-tooltip>\r\n        </div>\r\n    </div>\r\n</div>\r\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 } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacDropzoneMultipleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sac-treeitemaction', template: "<i class=\"{{transformClass(iconstyle)}}\" (mouseover)=\"item.hover=true\" (mouseout)=\"item.hover=false\" (click)=\"iconaction()\" ></i>" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
+            args: [{ selector: 'sac-dropzonemultiple', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            multi: true,
+                            useExisting: SacDropzoneMultipleComponent,
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            multi: true,
+                            useExisting: forwardRef(() => SacDropzoneMultipleComponent),
+                        },
+                    ], template: "<div\r\n    id=\"{{ name }}\"\r\n    class=\"row form-group\"\r\n    [class.has-error]=\"invalid && (dirty || touched)\"\r\n    [ngClass]=\"componentHeight | toLabelHeight\">\r\n    <label\r\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n        id=\"{{ name }}label\"\r\n        for=\"{{ name }}_uploadinput\"\r\n        class=\"col-xs-12 control-label\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\r\n        [class.required]=\"isrequired\">\r\n        <span class=\"text\">{{ label }}</span>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [class]=\"HelptextTooltipIcon\"\r\n                style=\"margin-left: 5px\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-xs-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\r\n        <div [style.flex-grow]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 1 : null\">\r\n            <div\r\n                class=\"img-rounded dropzone control-label\"\r\n                (drop)=\"dropHandler($event)\"\r\n                (dragover)=\"onDragOver($event)\"\r\n                (dragleave)=\"onDragLeave($event)\"\r\n                [class.active]=\"active\"\r\n                [style.min-height]=\"uploadheight\"\r\n                [class.is-invalid]=\"invalid && (dirty || touched)\">\r\n                <div\r\n                    class=\"content\"\r\n                    *ngIf=\"uploads.length === 0\">\r\n                    <div>\r\n                        <div [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\r\n                            <ng-content></ng-content>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div *ngIf=\"uploads.length > 0\">\r\n                    <div>\r\n                        <div\r\n                            class=\"dropzone-uploadstates\"\r\n                            [class.mt-1]=\"i > 0\"\r\n                            *ngFor=\"let file of uploads; let i = index\">\r\n                            <div\r\n                                class=\"input-group upload-component upload-component-multiple\"\r\n                                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n                                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\r\n                                <div class=\"form-control upload-progress border-secondary\">\r\n                                    <div class=\"progress\">\r\n                                        <div\r\n                                            class=\"progress-bar\"\r\n                                            [class.progress-bar-success]=\"file.progress === 100\"\r\n                                            role=\"progressbar\"\r\n                                            [attr.aria-valuenow]=\"file.progress\"\r\n                                            aria-valuemin=\"0\"\r\n                                            aria-valuemax=\"100\"\r\n                                            [style.width.%]=\"file.progress\">\r\n                                            <span class=\"progress-text\">{{ file.name }}</span>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"input-group-btn\">\r\n                                    <!-- image-preview-clear button -->\r\n                                    <a\r\n                                        class=\"btn\"\r\n                                        (click)=\"cancel(file.uploadId)\"\r\n                                        [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n                                        [class.btn-danger]=\"invalid && (dirty || touched)\">\r\n                                        <span [class]=\"IconDelete\"></span>\r\n                                    </a>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <input\r\n                    #files\r\n                    multiple\r\n                    id=\"{{ name }}_uploadinput\"\r\n                    type=\"file\"\r\n                    class=\"custom-file-input\"\r\n                    (click)=\"files.value = ''\"\r\n                    (uploadxState)=\"onUpload($event)\"\r\n                    [disabled]=\"HasQueueItem()\" />\r\n            </div>\r\n            <small\r\n                *ngIf=\"helptextmode === 'text' && helptext\"\r\n                class=\"help-block\">\r\n                {{ helptext }}\r\n            </small>\r\n            <div\r\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n                class=\"help-block help-block-error\">\r\n                {{ GetErrorMessage() | async }}\r\n            </div>\r\n        </div>\r\n\r\n        <div\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n            class=\"form-control-static\"\r\n            style=\"margin-left: 5px\">\r\n            <sac-tooltip\r\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n                [tooltiptext]=\"helptext\"\r\n                [inlinemode]=\"true\">\r\n                <span\r\n                    [class]=\"HelptextTooltipIcon\"\r\n                    style=\"margin-left: 5px; margin-right: 5px\">\r\n                </span>\r\n            </sac-tooltip>\r\n        </div>\r\n    </div>\r\n</div>\r\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
+                    }, {
+                        type: Optional
+                    }] }, { type: i0.Injector }, { type: i0.Renderer2 }, { type: i0.NgZone }];
+    } });
 
-class SACBootstrap3TtreeviewModule {
+/**
+ * Dropzone Komponente für den Upload eines Files
+ * @see https://github.com/kukhariev/ngx-uploadx/
+ */
+class SacDropzoneSingleComponent extends SacDropzoneSingleCommon {
+    // #region Constructors
+    /**
+     * Constructor
+     * @param formLayout SacFormLayout to define scoped layout settings
+     * @param injector Injector for injecting services
+     * @param renderer Angular rendering engine
+     * @param ngZone ngZone to manage external javascripts
+     */
+    constructor(formLayout, injector, renderer, ngZone) {
+        super(formLayout, injector, renderer, ngZone);
+    }
+    // #endregion Constructors
+    // #region Public Methods
+    /**
+     * Initialisiert das Control
+     */
+    ngOnInit() {
+        super.ngOnInit();
+    }
 }
-SACBootstrap3TtreeviewModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3TtreeviewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SACBootstrap3TtreeviewModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3TtreeviewModule, declarations: [SacTreeViewComponent, SacTreeViewChildComponent, SacTreeItemActionComponent], imports: [CommonModule], exports: [SacTreeViewComponent, SacTreeViewChildComponent, SacTreeItemActionComponent] });
-SACBootstrap3TtreeviewModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3TtreeviewModule, imports: [[
-            CommonModule
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3TtreeviewModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [SacTreeViewComponent, SacTreeViewChildComponent, SacTreeItemActionComponent],
-                    imports: [
-                        CommonModule
-                    ],
-                    exports: [SacTreeViewComponent, SacTreeViewChildComponent, SacTreeItemActionComponent]
-                }]
-        }] });
+SacDropzoneSingleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacDropzoneSingleComponent, deps: [{ token: SacFormLayoutDirective, host: true, optional: true }, { token: i0.Injector }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+SacDropzoneSingleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SacDropzoneSingleComponent, selector: "sac-dropzonesingle", providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            multi: true,
+            useExisting: SacDropzoneSingleComponent,
+        },
+        {
+            provide: NG_VALIDATORS,
+            multi: true,
+            useExisting: forwardRef(() => SacDropzoneSingleComponent),
+        },
+    ], usesInheritance: true, ngImport: i0, template: "<div\r\n    id=\"{{ name }}\"\r\n    class=\"row form-group\"\r\n    [class.has-error]=\"invalid && (dirty || touched)\"\r\n    [ngClass]=\"componentHeight | toLabelHeight\">\r\n    <label\r\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n        id=\"{{ name }}label\"\r\n        for=\"{{ name }}_uploadinput\"\r\n        class=\"col-xs-12 control-label\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\r\n        [class.required]=\"isrequired\">\r\n        <span class=\"text\">{{ label }}</span>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [class]=\"HelptextTooltipIcon\"\r\n                style=\"margin-left: 5px\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-xs-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\r\n        <div [style.flex-grow]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 1 : null\">\r\n            <div\r\n                class=\"img-rounded dropzone control-label\"\r\n                (drop)=\"dropHandler($event)\"\r\n                (dragover)=\"onDragOver($event)\"\r\n                (dragleave)=\"onDragLeave($event)\"\r\n                [style.min-height]=\"uploadheight\"\r\n                [class.active]=\"active\"\r\n                [class.is-invalid]=\"invalid && (dirty || touched)\">\r\n                <div\r\n                    class=\"content\"\r\n                    *ngIf=\"uploads.length === 0\">\r\n                    <div>\r\n                        <div [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\r\n                            <ng-content></ng-content>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div *ngIf=\"uploads.length > 0\">\r\n                    <div>\r\n                        <div\r\n                            class=\"dropzone-uploadstates\"\r\n                            *ngFor=\"let file of uploads\">\r\n                            <div\r\n                                class=\"input-group upload-component upload-component-multiple\"\r\n                                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n                                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\r\n                                <div class=\"form-control upload-progress\">\r\n                                    <div class=\"progress\">\r\n                                        <div\r\n                                            class=\"progress-bar\"\r\n                                            [class.progress-bar-success]=\"file.progress === 100\"\r\n                                            role=\"progressbar\"\r\n                                            [attr.aria-valuenow]=\"file.progress\"\r\n                                            aria-valuemin=\"0\"\r\n                                            aria-valuemax=\"100\"\r\n                                            [style.width.%]=\"file.progress\">\r\n                                            <span class=\"progress-text\">{{ file.name }}</span>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"input-group-btn\">\r\n                                    <!-- image-preview-clear button -->\r\n                                    <a\r\n                                        class=\"btn\"\r\n                                        (click)=\"cancel(file.uploadId)\"\r\n                                        [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n                                        [class.btn-danger]=\"invalid && (dirty || touched)\">\r\n                                        <span [class]=\"IconDelete\"></span>\r\n                                    </a>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <input\r\n                    #files\r\n                    id=\"{{ name }}_uploadinput\"\r\n                    type=\"file\"\r\n                    class=\"custom-file-input\"\r\n                    (click)=\"files.value = ''\"\r\n                    (uploadxState)=\"onUpload($event)\"\r\n                    [disabled]=\"HasQueueItem()\" />\r\n            </div>\r\n            <small\r\n                *ngIf=\"helptextmode === 'text' && helptext\"\r\n                class=\"help-block\">\r\n                {{ helptext }}\r\n            </small>\r\n            <div\r\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n                class=\"help-block help-block-error\">\r\n                {{ GetErrorMessage() | async }}\r\n            </div>\r\n        </div>\r\n\r\n        <div\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n            class=\"form-control-static\"\r\n            style=\"margin-left: 5px\">\r\n            <sac-tooltip\r\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n                [tooltiptext]=\"helptext\"\r\n                [inlinemode]=\"true\">\r\n                <span\r\n                    [class]=\"HelptextTooltipIcon\"\r\n                    style=\"margin-left: 5px; margin-right: 5px\">\r\n                </span>\r\n            </sac-tooltip>\r\n        </div>\r\n    </div>\r\n</div>\r\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 } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacDropzoneSingleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sac-dropzonesingle', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            multi: true,
+                            useExisting: SacDropzoneSingleComponent,
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            multi: true,
+                            useExisting: forwardRef(() => SacDropzoneSingleComponent),
+                        },
+                    ], template: "<div\r\n    id=\"{{ name }}\"\r\n    class=\"row form-group\"\r\n    [class.has-error]=\"invalid && (dirty || touched)\"\r\n    [ngClass]=\"componentHeight | toLabelHeight\">\r\n    <label\r\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n        id=\"{{ name }}label\"\r\n        for=\"{{ name }}_uploadinput\"\r\n        class=\"col-xs-12 control-label\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\r\n        [class.required]=\"isrequired\">\r\n        <span class=\"text\">{{ label }}</span>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [class]=\"HelptextTooltipIcon\"\r\n                style=\"margin-left: 5px\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-xs-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\r\n        <div [style.flex-grow]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 1 : null\">\r\n            <div\r\n                class=\"img-rounded dropzone control-label\"\r\n                (drop)=\"dropHandler($event)\"\r\n                (dragover)=\"onDragOver($event)\"\r\n                (dragleave)=\"onDragLeave($event)\"\r\n                [style.min-height]=\"uploadheight\"\r\n                [class.active]=\"active\"\r\n                [class.is-invalid]=\"invalid && (dirty || touched)\">\r\n                <div\r\n                    class=\"content\"\r\n                    *ngIf=\"uploads.length === 0\">\r\n                    <div>\r\n                        <div [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\r\n                            <ng-content></ng-content>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div *ngIf=\"uploads.length > 0\">\r\n                    <div>\r\n                        <div\r\n                            class=\"dropzone-uploadstates\"\r\n                            *ngFor=\"let file of uploads\">\r\n                            <div\r\n                                class=\"input-group upload-component upload-component-multiple\"\r\n                                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n                                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\r\n                                <div class=\"form-control upload-progress\">\r\n                                    <div class=\"progress\">\r\n                                        <div\r\n                                            class=\"progress-bar\"\r\n                                            [class.progress-bar-success]=\"file.progress === 100\"\r\n                                            role=\"progressbar\"\r\n                                            [attr.aria-valuenow]=\"file.progress\"\r\n                                            aria-valuemin=\"0\"\r\n                                            aria-valuemax=\"100\"\r\n                                            [style.width.%]=\"file.progress\">\r\n                                            <span class=\"progress-text\">{{ file.name }}</span>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"input-group-btn\">\r\n                                    <!-- image-preview-clear button -->\r\n                                    <a\r\n                                        class=\"btn\"\r\n                                        (click)=\"cancel(file.uploadId)\"\r\n                                        [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n                                        [class.btn-danger]=\"invalid && (dirty || touched)\">\r\n                                        <span [class]=\"IconDelete\"></span>\r\n                                    </a>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <input\r\n                    #files\r\n                    id=\"{{ name }}_uploadinput\"\r\n                    type=\"file\"\r\n                    class=\"custom-file-input\"\r\n                    (click)=\"files.value = ''\"\r\n                    (uploadxState)=\"onUpload($event)\"\r\n                    [disabled]=\"HasQueueItem()\" />\r\n            </div>\r\n            <small\r\n                *ngIf=\"helptextmode === 'text' && helptext\"\r\n                class=\"help-block\">\r\n                {{ helptext }}\r\n            </small>\r\n            <div\r\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n                class=\"help-block help-block-error\">\r\n                {{ GetErrorMessage() | async }}\r\n            </div>\r\n        </div>\r\n\r\n        <div\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n            class=\"form-control-static\"\r\n            style=\"margin-left: 5px\">\r\n            <sac-tooltip\r\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n                [tooltiptext]=\"helptext\"\r\n                [inlinemode]=\"true\">\r\n                <span\r\n                    [class]=\"HelptextTooltipIcon\"\r\n                    style=\"margin-left: 5px; margin-right: 5px\">\r\n                </span>\r\n            </sac-tooltip>\r\n        </div>\r\n    </div>\r\n</div>\r\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
+                    }, {
+                        type: Optional
+                    }] }, { type: i0.Injector }, { type: i0.Renderer2 }, { type: i0.NgZone }];
+    } });
 
 // https://github.com/kukhariev/ngx-uploadx/
 class SacUploadComponent extends SacUploadSingleCommon {
@@ -1934,7 +2270,7 @@ SacUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
             multi: true,
             useExisting: forwardRef(() => SacUploadComponent),
         },
-    ], usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"row form-group\"\r\n  [class.has-error]=\"invalid && (dirty || touched)\"\r\n  [ngClass]=\"componentHeight | toLabelHeight\"\r\n>\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-xs-12 control-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}\r\n    <sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n    >\r\n      <span\r\n        [class]=\"HelptextTooltipIcon\"\r\n        style=\"margin-left: 5px\"\r\n      ></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-xs-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group upload-component upload-single\"\r\n      [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n    >\r\n      <div class=\"input-group-btn\">\r\n        <!-- image-preview-input -->\r\n        <div\r\n          class=\"btn upload-input custom-file\"\r\n          [class.disabled]=\"HasQueueItem()\"\r\n          [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n          [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n        >\r\n          <i [class]=\"IconBrowse\"></i>\r\n          <span class=\"upload-browse\"\r\n            >{{\r\n            lngResourceService.GetString(validationKeyService.UploadButtonBrowse)\r\n            | async }}</span\r\n          >\r\n          <input\r\n            type=\"file\"\r\n            class=\"custom-file-input\"\r\n            #files\r\n            (click)=\"files.value = ''\"\r\n            (uploadxState)=\"onUpload($event)\"\r\n            multiple\r\n            [disabled]=\"HasQueueItem()\"\r\n          />\r\n        </div>\r\n      </div>\r\n      <div class=\"form-control upload-progress\">\r\n        <div class=\"progress\">\r\n          <div\r\n            class=\"progress-bar\"\r\n            [class.progress-bar-success]=\"Progress()===100\"\r\n            role=\"progressbar\"\r\n            [attr.aria-valuenow]=\"Progress()\"\r\n            aria-valuemin=\"0\"\r\n            aria-valuemax=\"100\"\r\n            [style.width.%]=\"Progress()\"\r\n          >\r\n            <span class=\"progress-text text-dark\"\r\n              >{{ Filename() | async }}</span\r\n            >\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <!-- <input type=\"textimage-preview-filename\" class=\"form-control image-preview-filename\" disabled=\"disabled\"> --><!-- don't give a name === doesn't send on POST/GET -->\r\n      <div class=\"input-group-btn\">\r\n        <!-- image-preview-clear button -->\r\n        <a\r\n          class=\"btn\"\r\n          (click)=\"cancelAll()\"\r\n          [attr.disabled]=\"HasQueueItem() === false ? 'disabled' : null\"\r\n          [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n          [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n        >\r\n          <span [class]=\"IconDelete\"></span>\r\n        </a>\r\n        <a\r\n          *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && IsPaused() === false)\"\r\n          class=\"btn\"\r\n          (click)=\"pauseAll()\"\r\n          [attr.disabled]=\"IsUploading() === false ? 'disabled' : null\"\r\n          [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n          [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n        >\r\n          <span [class]=\"IconPause\"></span>\r\n        </a>\r\n        <a\r\n          *ngIf=\"autoupload && enablepause && IsPaused()\"\r\n          class=\"btn\"\r\n          (click)=\"uploadAll()\"\r\n          [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n          [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n        >\r\n          <span [class]=\"IconContinue\"></span>\r\n        </a>\r\n        <a\r\n          *ngIf=\"autoupload === false\"\r\n          class=\"btn\"\r\n          (click)=\"uploadAll()\"\r\n          [attr.disabled]=\"IsStateToUpload() === false ?  'disabled' : null\"\r\n          [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n          [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n        >\r\n          <span [class]=\"IconUpload\"></span> {{\r\n          lngResourceService.GetString(validationKeyService.UploadButtonUpload)\r\n          | async }}\r\n        </a>\r\n      </div>\r\n    </div>\r\n    <p *ngIf=\"helptextmode === 'text' && helptext\" class=\"help-block\">\r\n      {{helptext}}\r\n    </p>\r\n    <div\r\n      class=\"help-block help-block-error\"\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\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}\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\r\n    id=\"{{ name }}\"\r\n    class=\"row form-group\"\r\n    [class.has-error]=\"invalid && (dirty || touched)\"\r\n    [ngClass]=\"componentHeight | toLabelHeight\">\r\n    <label\r\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n        id=\"{{ name }}label\"\r\n        for=\"{{ name }}_uploadinput\"\r\n        class=\"col-xs-12 control-label\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\r\n        [class.required]=\"isrequired\">\r\n        <span class=\"text\">{{ label }}</span>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [class]=\"HelptextTooltipIcon\"\r\n                style=\"margin-left: 5px\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-xs-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\r\n        <div [style.flex-grow]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 1 : null\">\r\n            <div\r\n                class=\"input-group upload-component upload-single\"\r\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\r\n                <div class=\"input-group-btn\">\r\n                    <!-- image-preview-input -->\r\n                    <div\r\n                        class=\"btn upload-input custom-file\"\r\n                        [class.disabled]=\"HasQueueItem()\"\r\n                        [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n                        [class.btn-danger]=\"invalid && (dirty || touched)\">\r\n                        <i [class]=\"IconBrowse\"></i>\r\n                        <span class=\"upload-browse\">{{ lngResourceService.GetString(validationKeyService.UploadButtonBrowse) | async }}</span>\r\n                        <input\r\n                            id=\"{{ name }}_uploadinput\"\r\n                            type=\"file\"\r\n                            class=\"custom-file-input\"\r\n                            #files\r\n                            (click)=\"files.value = ''\"\r\n                            (uploadxState)=\"onUpload($event)\"\r\n                            multiple\r\n                            [disabled]=\"HasQueueItem()\" />\r\n                    </div>\r\n                </div>\r\n                <div class=\"form-control upload-progress\">\r\n                    <div class=\"progress\">\r\n                        <div\r\n                            class=\"progress-bar\"\r\n                            [class.progress-bar-success]=\"Progress() === 100\"\r\n                            role=\"progressbar\"\r\n                            [attr.aria-valuenow]=\"Progress()\"\r\n                            aria-valuemin=\"0\"\r\n                            aria-valuemax=\"100\"\r\n                            [style.width.%]=\"Progress()\">\r\n                            <span class=\"progress-text text-dark\">{{ Filename() | async }}</span>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"input-group-btn\">\r\n                    <!-- image-preview-clear button -->\r\n                    <a\r\n                        class=\"btn\"\r\n                        (click)=\"cancelAll()\"\r\n                        [attr.disabled]=\"HasQueueItem() === false ? 'disabled' : null\"\r\n                        [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n                        [class.btn-danger]=\"invalid && (dirty || touched)\">\r\n                        <span [class]=\"IconDelete\"></span>\r\n                    </a>\r\n                    <a\r\n                        *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && IsPaused() === false)\"\r\n                        class=\"btn\"\r\n                        (click)=\"pauseAll()\"\r\n                        [attr.disabled]=\"IsUploading() === false ? 'disabled' : null\"\r\n                        [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n                        [class.btn-danger]=\"invalid && (dirty || touched)\">\r\n                        <span [class]=\"IconPause\"></span>\r\n                    </a>\r\n                    <a\r\n                        *ngIf=\"autoupload && enablepause && IsPaused()\"\r\n                        class=\"btn\"\r\n                        (click)=\"uploadAll()\"\r\n                        [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n                        [class.btn-danger]=\"invalid && (dirty || touched)\">\r\n                        <span [class]=\"IconContinue\"></span>\r\n                    </a>\r\n                    <a\r\n                        *ngIf=\"autoupload === false\"\r\n                        class=\"btn\"\r\n                        (click)=\"uploadAll()\"\r\n                        [attr.disabled]=\"IsStateToUpload() === false ? 'disabled' : null\"\r\n                        [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n                        [class.btn-danger]=\"invalid && (dirty || touched)\">\r\n                        <span [class]=\"IconUpload\"></span> {{ lngResourceService.GetString(validationKeyService.UploadButtonUpload) | async }}\r\n                    </a>\r\n                </div>\r\n            </div>\r\n\r\n            <p\r\n                *ngIf=\"helptextmode === 'text' && helptext\"\r\n                class=\"help-block\">\r\n                {{ helptext }}\r\n            </p>\r\n\r\n            <div\r\n                class=\"help-block help-block-error\"\r\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\r\n                {{ GetErrorMessage() | async }}\r\n            </div>\r\n        </div>\r\n\r\n        <div\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n            class=\"form-control-static\"\r\n            style=\"margin-left: 5px\">\r\n            <sac-tooltip\r\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n                [tooltiptext]=\"helptext\"\r\n                [inlinemode]=\"true\">\r\n                <span\r\n                    [class]=\"HelptextTooltipIcon\"\r\n                    style=\"margin-left: 5px; margin-right: 5px\">\r\n                </span>\r\n            </sac-tooltip>\r\n        </div>\r\n    </div>\r\n</div>\r\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 } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacUploadComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sac-upload', providers: [
@@ -1948,7 +2284,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => SacUploadComponent),
                         },
-                    ], template: "<div\r\n  class=\"row form-group\"\r\n  [class.has-error]=\"invalid && (dirty || touched)\"\r\n  [ngClass]=\"componentHeight | toLabelHeight\"\r\n>\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-xs-12 control-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}\r\n    <sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n    >\r\n      <span\r\n        [class]=\"HelptextTooltipIcon\"\r\n        style=\"margin-left: 5px\"\r\n      ></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-xs-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group upload-component upload-single\"\r\n      [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n    >\r\n      <div class=\"input-group-btn\">\r\n        <!-- image-preview-input -->\r\n        <div\r\n          class=\"btn upload-input custom-file\"\r\n          [class.disabled]=\"HasQueueItem()\"\r\n          [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n          [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n        >\r\n          <i [class]=\"IconBrowse\"></i>\r\n          <span class=\"upload-browse\"\r\n            >{{\r\n            lngResourceService.GetString(validationKeyService.UploadButtonBrowse)\r\n            | async }}</span\r\n          >\r\n          <input\r\n            type=\"file\"\r\n            class=\"custom-file-input\"\r\n            #files\r\n            (click)=\"files.value = ''\"\r\n            (uploadxState)=\"onUpload($event)\"\r\n            multiple\r\n            [disabled]=\"HasQueueItem()\"\r\n          />\r\n        </div>\r\n      </div>\r\n      <div class=\"form-control upload-progress\">\r\n        <div class=\"progress\">\r\n          <div\r\n            class=\"progress-bar\"\r\n            [class.progress-bar-success]=\"Progress()===100\"\r\n            role=\"progressbar\"\r\n            [attr.aria-valuenow]=\"Progress()\"\r\n            aria-valuemin=\"0\"\r\n            aria-valuemax=\"100\"\r\n            [style.width.%]=\"Progress()\"\r\n          >\r\n            <span class=\"progress-text text-dark\"\r\n              >{{ Filename() | async }}</span\r\n            >\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <!-- <input type=\"textimage-preview-filename\" class=\"form-control image-preview-filename\" disabled=\"disabled\"> --><!-- don't give a name === doesn't send on POST/GET -->\r\n      <div class=\"input-group-btn\">\r\n        <!-- image-preview-clear button -->\r\n        <a\r\n          class=\"btn\"\r\n          (click)=\"cancelAll()\"\r\n          [attr.disabled]=\"HasQueueItem() === false ? 'disabled' : null\"\r\n          [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n          [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n        >\r\n          <span [class]=\"IconDelete\"></span>\r\n        </a>\r\n        <a\r\n          *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && IsPaused() === false)\"\r\n          class=\"btn\"\r\n          (click)=\"pauseAll()\"\r\n          [attr.disabled]=\"IsUploading() === false ? 'disabled' : null\"\r\n          [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n          [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n        >\r\n          <span [class]=\"IconPause\"></span>\r\n        </a>\r\n        <a\r\n          *ngIf=\"autoupload && enablepause && IsPaused()\"\r\n          class=\"btn\"\r\n          (click)=\"uploadAll()\"\r\n          [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n          [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n        >\r\n          <span [class]=\"IconContinue\"></span>\r\n        </a>\r\n        <a\r\n          *ngIf=\"autoupload === false\"\r\n          class=\"btn\"\r\n          (click)=\"uploadAll()\"\r\n          [attr.disabled]=\"IsStateToUpload() === false ?  'disabled' : null\"\r\n          [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n          [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n        >\r\n          <span [class]=\"IconUpload\"></span> {{\r\n          lngResourceService.GetString(validationKeyService.UploadButtonUpload)\r\n          | async }}\r\n        </a>\r\n      </div>\r\n    </div>\r\n    <p *ngIf=\"helptextmode === 'text' && helptext\" class=\"help-block\">\r\n      {{helptext}}\r\n    </p>\r\n    <div\r\n      class=\"help-block help-block-error\"\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\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}\n"] }]
+                    ], template: "<div\r\n    id=\"{{ name }}\"\r\n    class=\"row form-group\"\r\n    [class.has-error]=\"invalid && (dirty || touched)\"\r\n    [ngClass]=\"componentHeight | toLabelHeight\">\r\n    <label\r\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n        id=\"{{ name }}label\"\r\n        for=\"{{ name }}_uploadinput\"\r\n        class=\"col-xs-12 control-label\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\r\n        [class.required]=\"isrequired\">\r\n        <span class=\"text\">{{ label }}</span>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [class]=\"HelptextTooltipIcon\"\r\n                style=\"margin-left: 5px\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-xs-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\r\n        <div [style.flex-grow]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 1 : null\">\r\n            <div\r\n                class=\"input-group upload-component upload-single\"\r\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\r\n                <div class=\"input-group-btn\">\r\n                    <!-- image-preview-input -->\r\n                    <div\r\n                        class=\"btn upload-input custom-file\"\r\n                        [class.disabled]=\"HasQueueItem()\"\r\n                        [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n                        [class.btn-danger]=\"invalid && (dirty || touched)\">\r\n                        <i [class]=\"IconBrowse\"></i>\r\n                        <span class=\"upload-browse\">{{ lngResourceService.GetString(validationKeyService.UploadButtonBrowse) | async }}</span>\r\n                        <input\r\n                            id=\"{{ name }}_uploadinput\"\r\n                            type=\"file\"\r\n                            class=\"custom-file-input\"\r\n                            #files\r\n                            (click)=\"files.value = ''\"\r\n                            (uploadxState)=\"onUpload($event)\"\r\n                            multiple\r\n                            [disabled]=\"HasQueueItem()\" />\r\n                    </div>\r\n                </div>\r\n                <div class=\"form-control upload-progress\">\r\n                    <div class=\"progress\">\r\n                        <div\r\n                            class=\"progress-bar\"\r\n                            [class.progress-bar-success]=\"Progress() === 100\"\r\n                            role=\"progressbar\"\r\n                            [attr.aria-valuenow]=\"Progress()\"\r\n                            aria-valuemin=\"0\"\r\n                            aria-valuemax=\"100\"\r\n                            [style.width.%]=\"Progress()\">\r\n                            <span class=\"progress-text text-dark\">{{ Filename() | async }}</span>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"input-group-btn\">\r\n                    <!-- image-preview-clear button -->\r\n                    <a\r\n                        class=\"btn\"\r\n                        (click)=\"cancelAll()\"\r\n                        [attr.disabled]=\"HasQueueItem() === false ? 'disabled' : null\"\r\n                        [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n                        [class.btn-danger]=\"invalid && (dirty || touched)\">\r\n                        <span [class]=\"IconDelete\"></span>\r\n                    </a>\r\n                    <a\r\n                        *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && IsPaused() === false)\"\r\n                        class=\"btn\"\r\n                        (click)=\"pauseAll()\"\r\n                        [attr.disabled]=\"IsUploading() === false ? 'disabled' : null\"\r\n                        [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n                        [class.btn-danger]=\"invalid && (dirty || touched)\">\r\n                        <span [class]=\"IconPause\"></span>\r\n                    </a>\r\n                    <a\r\n                        *ngIf=\"autoupload && enablepause && IsPaused()\"\r\n                        class=\"btn\"\r\n                        (click)=\"uploadAll()\"\r\n                        [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n                        [class.btn-danger]=\"invalid && (dirty || touched)\">\r\n                        <span [class]=\"IconContinue\"></span>\r\n                    </a>\r\n                    <a\r\n                        *ngIf=\"autoupload === false\"\r\n                        class=\"btn\"\r\n                        (click)=\"uploadAll()\"\r\n                        [attr.disabled]=\"IsStateToUpload() === false ? 'disabled' : null\"\r\n                        [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n                        [class.btn-danger]=\"invalid && (dirty || touched)\">\r\n                        <span [class]=\"IconUpload\"></span> {{ lngResourceService.GetString(validationKeyService.UploadButtonUpload) | async }}\r\n                    </a>\r\n                </div>\r\n            </div>\r\n\r\n            <p\r\n                *ngIf=\"helptextmode === 'text' && helptext\"\r\n                class=\"help-block\">\r\n                {{ helptext }}\r\n            </p>\r\n\r\n            <div\r\n                class=\"help-block help-block-error\"\r\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\r\n                {{ GetErrorMessage() | async }}\r\n            </div>\r\n        </div>\r\n\r\n        <div\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n            class=\"form-control-static\"\r\n            style=\"margin-left: 5px\">\r\n            <sac-tooltip\r\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n                [tooltiptext]=\"helptext\"\r\n                [inlinemode]=\"true\">\r\n                <span\r\n                    [class]=\"HelptextTooltipIcon\"\r\n                    style=\"margin-left: 5px; margin-right: 5px\">\r\n                </span>\r\n            </sac-tooltip>\r\n        </div>\r\n    </div>\r\n</div>\r\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
@@ -1983,7 +2319,7 @@ SacUploadMultipleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
             multi: true,
             useExisting: forwardRef(() => SacUploadMultipleComponent),
         },
-    ], usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"row form-group\"\r\n  [class.has-error]=\"invalid && (dirty || touched)\"\r\n  [ngClass]=\"componentHeight | toLabelHeight\"\r\n>\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-xs-12 control-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}\r\n    <sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n    >\r\n      <span\r\n        [class]=\"HelptextTooltipIcon\"\r\n        style=\"margin-left: 5px\"\r\n      ></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-xs-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div class=\"upload-component\">\r\n      <div class=\"row\">\r\n        <div class=\"col-xs-12\">\r\n          <div\r\n            class=\"btn-group\"\r\n            [class.btn-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n            [class.btn-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n          >\r\n            <div\r\n              class=\"btn upload-input custom-file\"\r\n              [class.disabled]=\"maxfiles > 0 &&  uploads.length >= maxfiles\"\r\n              [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n              [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n            >\r\n              <i [class]=\"IconBrowse\"></i>\r\n              <span class=\"upload-browse\">Browse</span>\r\n              <input\r\n                type=\"file\"\r\n                class=\"custom-file-input\"\r\n                #files\r\n                (click)=\"files.value = ''\"\r\n                (uploadxState)=\"onUpload($event)\"\r\n                multiple\r\n                [disabled]=\"maxfiles > 0 &&  uploads.length >= maxfiles\"\r\n              />\r\n            </div>\r\n\r\n            <div\r\n              class=\"btn-group\"\r\n              [class.btn-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n              [class.btn-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n            >\r\n              <!-- image-preview-clear button -->\r\n              <a\r\n                class=\"btn\"\r\n                (click)=\"cancelAll()\"\r\n                [attr.disabled]=\"HasQueueItem() === false ? 'disabled' : null\"\r\n                [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n                [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n              >\r\n                <span [class]=\"IconDelete\"></span>\r\n              </a>\r\n              <a\r\n                *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && IsPaused() === false)\"\r\n                class=\"btn\"\r\n                (click)=\"pauseAll()\"\r\n                [attr.disabled]=\"IsUploading() === false ? 'disabled' : null\"\r\n                [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n                [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n              >\r\n                <span [class]=\"IconPause\"></span>\r\n              </a>\r\n              <a\r\n                *ngIf=\"autoupload && enablepause && IsPaused() === true\"\r\n                class=\"btn\"\r\n                (click)=\"uploadAll()\"\r\n                [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n                [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n              >\r\n                <span [class]=\"IconContinue\"></span>\r\n              </a>\r\n              <a\r\n                *ngIf=\"autoupload === false\"\r\n                class=\"btn\"\r\n                (click)=\"uploadAll()\"\r\n                [attr.disabled]=\"IsStateToUpload() === false ?  'disabled' : null\"\r\n                [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n                [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n              >\r\n                <span [class]=\"IconUpload\"></span> {{\r\n                lngResourceService.GetString(validationKeyService.UploadButtonUpload)\r\n                | async }}\r\n              </a>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngFor=\"let file of uploads\" style=\"margin-top: 5px\">\r\n        <div\r\n          class=\"input-group upload-component upload-multiple\"\r\n          [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n          [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n        >\r\n          <div class=\"form-control upload-progress\">\r\n            <div class=\"progress\">\r\n              <div\r\n                class=\"progress-bar\"\r\n                [class.progress-bar-success]=\"file.progress===100\"\r\n                role=\"progressbar\"\r\n                [attr.aria-valuenow]=\"file.progress\"\r\n                aria-valuemin=\"0\"\r\n                aria-valuemax=\"100\"\r\n                [style.width.%]=\"file.progress\"\r\n              >\r\n                <span class=\"progress-text text-dark\">{{ file.name }}</span>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div\r\n            class=\"input-group-btn\"\r\n            [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n            [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n          >\r\n            <!-- image-preview-clear button -->\r\n            <a\r\n              class=\"btn\"\r\n              (click)=\"cancel(file.uploadId)\"\r\n              [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n              [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n            >\r\n              <span [class]=\"IconDelete\"></span>\r\n            </a>\r\n            <a\r\n              *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && file.status !== 'paused')\"\r\n              class=\"btn\"\r\n              (click)=\"pause(file.uploadId)\"\r\n              [attr.disabled]=\"file.status !== 'uploading' ? 'disabled' : null\"\r\n              [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n              [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n            >\r\n              <span [class]=\"IconPause\"></span>\r\n            </a>\r\n            <a\r\n              *ngIf=\"autoupload && enablepause && file.status === 'paused'\"\r\n              class=\"btn\"\r\n              (click)=\"upload(file.uploadId)\"\r\n              [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n              [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n            >\r\n              <span [class]=\"IconContinue\"></span>\r\n            </a>\r\n            <a\r\n              *ngIf=\"autoupload === false\"\r\n              class=\"btn\"\r\n              (click)=\"upload(file.uploadId)\"\r\n              [attr.disabled]=\"file.status !== 'added' && file.status !== 'paused' ?  'disabled' : null\"\r\n              [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n              [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n            >\r\n              <span [class]=\"IconUpload\"></span> {{\r\n              lngResourceService.GetString(validationKeyService.UploadButtonUpload)\r\n              | async }}\r\n            </a>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <p *ngIf=\"helptextmode === 'text' && helptext\" class=\"help-block\">\r\n      {{helptext}}\r\n    </p>\r\n    <div\r\n      class=\"help-block help-block-error\"\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\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}\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\r\n    id=\"{{ name }}\"\r\n    class=\"row form-group\"\r\n    [class.has-error]=\"invalid && (dirty || touched)\"\r\n    [ngClass]=\"componentHeight | toLabelHeight\">\r\n    <label\r\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n        id=\"{{ name }}label\"\r\n        for=\"{{ name }}_uploadinput\"\r\n        class=\"col-xs-12 control-label\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\r\n        [class.required]=\"isrequired\">\r\n        <span class=\"text\">{{ label }}</span>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [class]=\"HelptextTooltipIcon\"\r\n                style=\"margin-left: 5px\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-xs-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\r\n        <div class=\"upload-component\">\r\n            <div class=\"row\">\r\n                <div\r\n                    class=\"col-xs-12\"\r\n                    [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\r\n                    <div\r\n                        class=\"btn-group\"\r\n                        [class.btn-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n                        [class.btn-group-lg]=\"componentHeight === ControlHeight.Large\">\r\n                        <div\r\n                            class=\"btn upload-input custom-file\"\r\n                            [class.disabled]=\"maxfiles > 0 && uploads.length >= maxfiles\"\r\n                            [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n                            [class.btn-danger]=\"invalid && (dirty || touched)\">\r\n                            <i [class]=\"IconBrowse\"></i>\r\n                            <span class=\"upload-browse\">Browse</span>\r\n                            <input\r\n                                id=\"{{ name }}_uploadinput\"\r\n                                type=\"file\"\r\n                                class=\"custom-file-input\"\r\n                                #files\r\n                                (click)=\"files.value = ''\"\r\n                                (uploadxState)=\"onUpload($event)\"\r\n                                multiple\r\n                                [disabled]=\"maxfiles > 0 && uploads.length >= maxfiles\" />\r\n                        </div>\r\n\r\n                        <div\r\n                            class=\"btn-group\"\r\n                            [class.btn-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n                            [class.btn-group-lg]=\"componentHeight === ControlHeight.Large\">\r\n                            <!-- image-preview-clear button -->\r\n                            <a\r\n                                class=\"btn\"\r\n                                (click)=\"cancelAll()\"\r\n                                [attr.disabled]=\"HasQueueItem() === false ? 'disabled' : null\"\r\n                                [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n                                [class.btn-danger]=\"invalid && (dirty || touched)\">\r\n                                <span [class]=\"IconDelete\"></span>\r\n                            </a>\r\n                            <a\r\n                                *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && IsPaused() === false)\"\r\n                                class=\"btn\"\r\n                                (click)=\"pauseAll()\"\r\n                                [attr.disabled]=\"IsUploading() === false ? 'disabled' : null\"\r\n                                [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n                                [class.btn-danger]=\"invalid && (dirty || touched)\">\r\n                                <span [class]=\"IconPause\"></span>\r\n                            </a>\r\n                            <a\r\n                                *ngIf=\"autoupload && enablepause && IsPaused() === true\"\r\n                                class=\"btn\"\r\n                                (click)=\"uploadAll()\"\r\n                                [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n                                [class.btn-danger]=\"invalid && (dirty || touched)\">\r\n                                <span [class]=\"IconContinue\"></span>\r\n                            </a>\r\n                            <a\r\n                                *ngIf=\"autoupload === false\"\r\n                                class=\"btn\"\r\n                                (click)=\"uploadAll()\"\r\n                                [attr.disabled]=\"IsStateToUpload() === false ? 'disabled' : null\"\r\n                                [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n                                [class.btn-danger]=\"invalid && (dirty || touched)\">\r\n                                <span [class]=\"IconUpload\"></span> {{ lngResourceService.GetString(validationKeyService.UploadButtonUpload) | async }}\r\n                            </a>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div\r\n                        *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n                        class=\"form-control-static\"\r\n                        style=\"margin-left: 5px\">\r\n                        <sac-tooltip\r\n                            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n                            [tooltiptext]=\"helptext\"\r\n                            [inlinemode]=\"true\">\r\n                            <span\r\n                                [class]=\"HelptextTooltipIcon\"\r\n                                style=\"margin-left: 5px; margin-right: 5px\">\r\n                            </span>\r\n                        </sac-tooltip>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <div\r\n                *ngFor=\"let file of uploads\"\r\n                style=\"margin-top: 5px\">\r\n                <div\r\n                    class=\"input-group upload-component upload-multiple\"\r\n                    [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n                    [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\r\n                    <div class=\"form-control upload-progress\">\r\n                        <div class=\"progress\">\r\n                            <div\r\n                                class=\"progress-bar\"\r\n                                [class.progress-bar-success]=\"file.progress === 100\"\r\n                                role=\"progressbar\"\r\n                                [attr.aria-valuenow]=\"file.progress\"\r\n                                aria-valuemin=\"0\"\r\n                                aria-valuemax=\"100\"\r\n                                [style.width.%]=\"file.progress\">\r\n                                <span class=\"progress-text text-dark\">{{ file.name }}</span>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div\r\n                        class=\"input-group-btn\"\r\n                        [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n                        [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\r\n                        <!-- image-preview-clear button -->\r\n                        <a\r\n                            class=\"btn\"\r\n                            (click)=\"cancel(file.uploadId)\"\r\n                            [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n                            [class.btn-danger]=\"invalid && (dirty || touched)\">\r\n                            <span [class]=\"IconDelete\"></span>\r\n                        </a>\r\n                        <a\r\n                            *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && file.status !== 'paused')\"\r\n                            class=\"btn\"\r\n                            (click)=\"pause(file.uploadId)\"\r\n                            [attr.disabled]=\"file.status !== 'uploading' ? 'disabled' : null\"\r\n                            [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n                            [class.btn-danger]=\"invalid && (dirty || touched)\">\r\n                            <span [class]=\"IconPause\"></span>\r\n                        </a>\r\n                        <a\r\n                            *ngIf=\"autoupload && enablepause && file.status === 'paused'\"\r\n                            class=\"btn\"\r\n                            (click)=\"upload(file.uploadId)\"\r\n                            [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n                            [class.btn-danger]=\"invalid && (dirty || touched)\">\r\n                            <span [class]=\"IconContinue\"></span>\r\n                        </a>\r\n                        <a\r\n                            *ngIf=\"autoupload === false\"\r\n                            class=\"btn\"\r\n                            (click)=\"upload(file.uploadId)\"\r\n                            [attr.disabled]=\"file.status !== 'added' && file.status !== 'paused' ? 'disabled' : null\"\r\n                            [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n                            [class.btn-danger]=\"invalid && (dirty || touched)\">\r\n                            <span [class]=\"IconUpload\"></span> {{ lngResourceService.GetString(validationKeyService.UploadButtonUpload) | async }}\r\n                        </a>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <p\r\n            *ngIf=\"helptextmode === 'text' && helptext\"\r\n            class=\"help-block\">\r\n            {{ helptext }}\r\n        </p>\r\n        <div\r\n            class=\"help-block help-block-error\"\r\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\r\n            {{ GetErrorMessage() | async }}\r\n        </div>\r\n    </div>\r\n</div>\r\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 } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacUploadMultipleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sac-uploadmultiple', providers: [
@@ -1997,7 +2333,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => SacUploadMultipleComponent),
                         },
-                    ], template: "<div\r\n  class=\"row form-group\"\r\n  [class.has-error]=\"invalid && (dirty || touched)\"\r\n  [ngClass]=\"componentHeight | toLabelHeight\"\r\n>\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-xs-12 control-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}\r\n    <sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n    >\r\n      <span\r\n        [class]=\"HelptextTooltipIcon\"\r\n        style=\"margin-left: 5px\"\r\n      ></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-xs-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div class=\"upload-component\">\r\n      <div class=\"row\">\r\n        <div class=\"col-xs-12\">\r\n          <div\r\n            class=\"btn-group\"\r\n            [class.btn-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n            [class.btn-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n          >\r\n            <div\r\n              class=\"btn upload-input custom-file\"\r\n              [class.disabled]=\"maxfiles > 0 &&  uploads.length >= maxfiles\"\r\n              [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n              [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n            >\r\n              <i [class]=\"IconBrowse\"></i>\r\n              <span class=\"upload-browse\">Browse</span>\r\n              <input\r\n                type=\"file\"\r\n                class=\"custom-file-input\"\r\n                #files\r\n                (click)=\"files.value = ''\"\r\n                (uploadxState)=\"onUpload($event)\"\r\n                multiple\r\n                [disabled]=\"maxfiles > 0 &&  uploads.length >= maxfiles\"\r\n              />\r\n            </div>\r\n\r\n            <div\r\n              class=\"btn-group\"\r\n              [class.btn-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n              [class.btn-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n            >\r\n              <!-- image-preview-clear button -->\r\n              <a\r\n                class=\"btn\"\r\n                (click)=\"cancelAll()\"\r\n                [attr.disabled]=\"HasQueueItem() === false ? 'disabled' : null\"\r\n                [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n                [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n              >\r\n                <span [class]=\"IconDelete\"></span>\r\n              </a>\r\n              <a\r\n                *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && IsPaused() === false)\"\r\n                class=\"btn\"\r\n                (click)=\"pauseAll()\"\r\n                [attr.disabled]=\"IsUploading() === false ? 'disabled' : null\"\r\n                [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n                [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n              >\r\n                <span [class]=\"IconPause\"></span>\r\n              </a>\r\n              <a\r\n                *ngIf=\"autoupload && enablepause && IsPaused() === true\"\r\n                class=\"btn\"\r\n                (click)=\"uploadAll()\"\r\n                [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n                [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n              >\r\n                <span [class]=\"IconContinue\"></span>\r\n              </a>\r\n              <a\r\n                *ngIf=\"autoupload === false\"\r\n                class=\"btn\"\r\n                (click)=\"uploadAll()\"\r\n                [attr.disabled]=\"IsStateToUpload() === false ?  'disabled' : null\"\r\n                [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n                [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n              >\r\n                <span [class]=\"IconUpload\"></span> {{\r\n                lngResourceService.GetString(validationKeyService.UploadButtonUpload)\r\n                | async }}\r\n              </a>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngFor=\"let file of uploads\" style=\"margin-top: 5px\">\r\n        <div\r\n          class=\"input-group upload-component upload-multiple\"\r\n          [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n          [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n        >\r\n          <div class=\"form-control upload-progress\">\r\n            <div class=\"progress\">\r\n              <div\r\n                class=\"progress-bar\"\r\n                [class.progress-bar-success]=\"file.progress===100\"\r\n                role=\"progressbar\"\r\n                [attr.aria-valuenow]=\"file.progress\"\r\n                aria-valuemin=\"0\"\r\n                aria-valuemax=\"100\"\r\n                [style.width.%]=\"file.progress\"\r\n              >\r\n                <span class=\"progress-text text-dark\">{{ file.name }}</span>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div\r\n            class=\"input-group-btn\"\r\n            [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n            [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n          >\r\n            <!-- image-preview-clear button -->\r\n            <a\r\n              class=\"btn\"\r\n              (click)=\"cancel(file.uploadId)\"\r\n              [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n              [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n            >\r\n              <span [class]=\"IconDelete\"></span>\r\n            </a>\r\n            <a\r\n              *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && file.status !== 'paused')\"\r\n              class=\"btn\"\r\n              (click)=\"pause(file.uploadId)\"\r\n              [attr.disabled]=\"file.status !== 'uploading' ? 'disabled' : null\"\r\n              [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n              [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n            >\r\n              <span [class]=\"IconPause\"></span>\r\n            </a>\r\n            <a\r\n              *ngIf=\"autoupload && enablepause && file.status === 'paused'\"\r\n              class=\"btn\"\r\n              (click)=\"upload(file.uploadId)\"\r\n              [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n              [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n            >\r\n              <span [class]=\"IconContinue\"></span>\r\n            </a>\r\n            <a\r\n              *ngIf=\"autoupload === false\"\r\n              class=\"btn\"\r\n              (click)=\"upload(file.uploadId)\"\r\n              [attr.disabled]=\"file.status !== 'added' && file.status !== 'paused' ?  'disabled' : null\"\r\n              [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n              [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n            >\r\n              <span [class]=\"IconUpload\"></span> {{\r\n              lngResourceService.GetString(validationKeyService.UploadButtonUpload)\r\n              | async }}\r\n            </a>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <p *ngIf=\"helptextmode === 'text' && helptext\" class=\"help-block\">\r\n      {{helptext}}\r\n    </p>\r\n    <div\r\n      class=\"help-block help-block-error\"\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\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}\n"] }]
+                    ], template: "<div\r\n    id=\"{{ name }}\"\r\n    class=\"row form-group\"\r\n    [class.has-error]=\"invalid && (dirty || touched)\"\r\n    [ngClass]=\"componentHeight | toLabelHeight\">\r\n    <label\r\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n        id=\"{{ name }}label\"\r\n        for=\"{{ name }}_uploadinput\"\r\n        class=\"col-xs-12 control-label\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\r\n        [class.required]=\"isrequired\">\r\n        <span class=\"text\">{{ label }}</span>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [class]=\"HelptextTooltipIcon\"\r\n                style=\"margin-left: 5px\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-xs-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\r\n        <div class=\"upload-component\">\r\n            <div class=\"row\">\r\n                <div\r\n                    class=\"col-xs-12\"\r\n                    [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\r\n                    <div\r\n                        class=\"btn-group\"\r\n                        [class.btn-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n                        [class.btn-group-lg]=\"componentHeight === ControlHeight.Large\">\r\n                        <div\r\n                            class=\"btn upload-input custom-file\"\r\n                            [class.disabled]=\"maxfiles > 0 && uploads.length >= maxfiles\"\r\n                            [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n                            [class.btn-danger]=\"invalid && (dirty || touched)\">\r\n                            <i [class]=\"IconBrowse\"></i>\r\n                            <span class=\"upload-browse\">Browse</span>\r\n                            <input\r\n                                id=\"{{ name }}_uploadinput\"\r\n                                type=\"file\"\r\n                                class=\"custom-file-input\"\r\n                                #files\r\n                                (click)=\"files.value = ''\"\r\n                                (uploadxState)=\"onUpload($event)\"\r\n                                multiple\r\n                                [disabled]=\"maxfiles > 0 && uploads.length >= maxfiles\" />\r\n                        </div>\r\n\r\n                        <div\r\n                            class=\"btn-group\"\r\n                            [class.btn-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n                            [class.btn-group-lg]=\"componentHeight === ControlHeight.Large\">\r\n                            <!-- image-preview-clear button -->\r\n                            <a\r\n                                class=\"btn\"\r\n                                (click)=\"cancelAll()\"\r\n                                [attr.disabled]=\"HasQueueItem() === false ? 'disabled' : null\"\r\n                                [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n                                [class.btn-danger]=\"invalid && (dirty || touched)\">\r\n                                <span [class]=\"IconDelete\"></span>\r\n                            </a>\r\n                            <a\r\n                                *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && IsPaused() === false)\"\r\n                                class=\"btn\"\r\n                                (click)=\"pauseAll()\"\r\n                                [attr.disabled]=\"IsUploading() === false ? 'disabled' : null\"\r\n                                [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n                                [class.btn-danger]=\"invalid && (dirty || touched)\">\r\n                                <span [class]=\"IconPause\"></span>\r\n                            </a>\r\n                            <a\r\n                                *ngIf=\"autoupload && enablepause && IsPaused() === true\"\r\n                                class=\"btn\"\r\n                                (click)=\"uploadAll()\"\r\n                                [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n                                [class.btn-danger]=\"invalid && (dirty || touched)\">\r\n                                <span [class]=\"IconContinue\"></span>\r\n                            </a>\r\n                            <a\r\n                                *ngIf=\"autoupload === false\"\r\n                                class=\"btn\"\r\n                                (click)=\"uploadAll()\"\r\n                                [attr.disabled]=\"IsStateToUpload() === false ? 'disabled' : null\"\r\n                                [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n                                [class.btn-danger]=\"invalid && (dirty || touched)\">\r\n                                <span [class]=\"IconUpload\"></span> {{ lngResourceService.GetString(validationKeyService.UploadButtonUpload) | async }}\r\n                            </a>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div\r\n                        *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n                        class=\"form-control-static\"\r\n                        style=\"margin-left: 5px\">\r\n                        <sac-tooltip\r\n                            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n                            [tooltiptext]=\"helptext\"\r\n                            [inlinemode]=\"true\">\r\n                            <span\r\n                                [class]=\"HelptextTooltipIcon\"\r\n                                style=\"margin-left: 5px; margin-right: 5px\">\r\n                            </span>\r\n                        </sac-tooltip>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <div\r\n                *ngFor=\"let file of uploads\"\r\n                style=\"margin-top: 5px\">\r\n                <div\r\n                    class=\"input-group upload-component upload-multiple\"\r\n                    [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n                    [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\r\n                    <div class=\"form-control upload-progress\">\r\n                        <div class=\"progress\">\r\n                            <div\r\n                                class=\"progress-bar\"\r\n                                [class.progress-bar-success]=\"file.progress === 100\"\r\n                                role=\"progressbar\"\r\n                                [attr.aria-valuenow]=\"file.progress\"\r\n                                aria-valuemin=\"0\"\r\n                                aria-valuemax=\"100\"\r\n                                [style.width.%]=\"file.progress\">\r\n                                <span class=\"progress-text text-dark\">{{ file.name }}</span>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div\r\n                        class=\"input-group-btn\"\r\n                        [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n                        [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\r\n                        <!-- image-preview-clear button -->\r\n                        <a\r\n                            class=\"btn\"\r\n                            (click)=\"cancel(file.uploadId)\"\r\n                            [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n                            [class.btn-danger]=\"invalid && (dirty || touched)\">\r\n                            <span [class]=\"IconDelete\"></span>\r\n                        </a>\r\n                        <a\r\n                            *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && file.status !== 'paused')\"\r\n                            class=\"btn\"\r\n                            (click)=\"pause(file.uploadId)\"\r\n                            [attr.disabled]=\"file.status !== 'uploading' ? 'disabled' : null\"\r\n                            [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n                            [class.btn-danger]=\"invalid && (dirty || touched)\">\r\n                            <span [class]=\"IconPause\"></span>\r\n                        </a>\r\n                        <a\r\n                            *ngIf=\"autoupload && enablepause && file.status === 'paused'\"\r\n                            class=\"btn\"\r\n                            (click)=\"upload(file.uploadId)\"\r\n                            [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n                            [class.btn-danger]=\"invalid && (dirty || touched)\">\r\n                            <span [class]=\"IconContinue\"></span>\r\n                        </a>\r\n                        <a\r\n                            *ngIf=\"autoupload === false\"\r\n                            class=\"btn\"\r\n                            (click)=\"upload(file.uploadId)\"\r\n                            [attr.disabled]=\"file.status !== 'added' && file.status !== 'paused' ? 'disabled' : null\"\r\n                            [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n                            [class.btn-danger]=\"invalid && (dirty || touched)\">\r\n                            <span [class]=\"IconUpload\"></span> {{ lngResourceService.GetString(validationKeyService.UploadButtonUpload) | async }}\r\n                        </a>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <p\r\n            *ngIf=\"helptextmode === 'text' && helptext\"\r\n            class=\"help-block\">\r\n            {{ helptext }}\r\n        </p>\r\n        <div\r\n            class=\"help-block help-block-error\"\r\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\r\n            {{ GetErrorMessage() | async }}\r\n        </div>\r\n    </div>\r\n</div>\r\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
@@ -2009,27 +2345,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
 class SACBootstrap3UploadModule {
 }
 SACBootstrap3UploadModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3UploadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SACBootstrap3UploadModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3UploadModule, declarations: [SacUploadComponent, SacUploadMultipleComponent], imports: [CommonModule,
-        FormsModule,
-        SACBootstrap3LayoutModule,
-        SACBootstrap3TooltipModule], exports: [SacUploadComponent, SacUploadMultipleComponent] });
-SACBootstrap3UploadModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3UploadModule, imports: [[
-            CommonModule,
-            FormsModule,
-            SACBootstrap3LayoutModule,
-            SACBootstrap3TooltipModule,
-        ]] });
+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]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SACBootstrap3UploadModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [SacUploadComponent, SacUploadMultipleComponent],
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        SACBootstrap3LayoutModule,
-                        SACBootstrap3TooltipModule,
+                    declarations: [
+                        SacUploadComponent,
+                        SacUploadMultipleComponent,
+                        SacDropzoneSingleComponent,
+                        SacDropzoneMultipleComponent,
                     ],
-                    exports: [SacUploadComponent, SacUploadMultipleComponent],
+                    imports: [CommonModule, FormsModule, SACBootstrap3LayoutModule, SACBootstrap3TooltipModule],
+                    exports: [SacUploadComponent, SacUploadMultipleComponent, SacDropzoneSingleComponent, SacDropzoneMultipleComponent],
                 }]
         }] });
 
@@ -2266,5 +2597,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { NGFORM_FACTORY, SACBootstrap3ButtonModule, SACBootstrap3CheckboxModule, SACBootstrap3ConfirmModule, SACBootstrap3DateTimeModule, SACBootstrap3DialogModule, SACBootstrap3FormModule, SACBootstrap3GridModule, SACBootstrap3InputModule, SACBootstrap3LayoutModule, SACBootstrap3ListModule, SACBootstrap3StaticLabelModule, SACBootstrap3TabsModule, SACBootstrap3TinyMceModule, SACBootstrap3TooltipModule, SACBootstrap3TtreeviewModule, SACBootstrap3UploadModule, SACBootstrap3ValidationSummaryModule, SACBootstrap3WizardModule, SACFORM_FACTORY, SacButtonComponent, SacCheckboxComponent, SacConfirmComponent, SacDateComponent, SacDateSelectorComponent, SacDateTimeComponent, SacDialogComponent, SacDropdownComponent, SacDropdownOptionDirective, 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, SacTreeItemActionComponent, SacTreeViewChildComponent, 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, 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