npm - @simpleangularcontrols/sac-bootstrap4 - Versions diffs - 10.0.0-rc.11 → 10.0.0-rc.13 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (80) hide show

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

@@ -556,7 +556,7 @@
     SacDialogComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-dialog',
-                    template: "<div #dialog class=\"modal show\" style=\"display: block\" tabindex=\"-1\" role=\"dialog\" *ngIf=\"_show\">\r\n  <div class=\"modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable\" role=\"document\"\r\n       [class.modal-xl]=\"_size === 'extralarge'\"\r\n       [class.modal-lg]=\"_size === 'large'\"\r\n       [class.modal-sm]=\"_size === 'small'\">\r\n    <div class=\"modal-content\">\r\n      <div class=\"modal-header\">\r\n        <h5 class=\"modal-title\">{{title}}</h5>\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      </div>\r\n      <div class=\"modal-body\" [style.height]=\"height\">\r\n        <ng-content select=\"[dialogbody]\"></ng-content>\r\n      </div>\r\n      <div class=\"modal-footer\">\r\n        <ng-content select=\"[dialogfooter]\"></ng-content>\r\n      </div>\r\n    </div><!-- /.modal-content -->\r\n  </div><!-- /.modal-dialog -->\r\n</div><!-- /.modal -->\r\n<div class=\"modal-backdrop show\" *ngIf=\"_show && backdrop\" #backdrop></div>\r\n"
+                    template: "<div\r\n  #dialog\r\n  class=\"modal show\"\r\n  style=\"display: block\"\r\n  tabindex=\"-1\"\r\n  role=\"dialog\"\r\n  *ngIf=\"_show\"\r\n>\r\n  <div\r\n    class=\"modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable\"\r\n    role=\"document\"\r\n    [class.modal-xl]=\"_size === 'extralarge'\"\r\n    [class.modal-lg]=\"_size === 'large'\"\r\n    [class.modal-sm]=\"_size === 'small'\"\r\n  >\r\n    <div class=\"modal-content\">\r\n      <div class=\"modal-header\">\r\n        <h5 class=\"modal-title\">{{title}}</h5>\r\n        <button\r\n          type=\"button\"\r\n          class=\"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      </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 class=\"modal-backdrop show\" *ngIf=\"_show && backdrop\" #backdrop></div>\r\n"
                 },] }
     ];
     SacDialogComponent.ctorParameters = function () { return [
@@ -747,13 +747,7 @@
     SacContextmenuComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-contextmenu',
-                    template: "<div class=\"dropdown\" [ngClass]=\"cssclass\">\r\n  <ng-container\r\n    [ngTemplateOutlet]=\"buttontemplate || defaultButtonTemplate\"\r\n  ></ng-container>\r\n\r\n  <div\r\n    class=\"dropdown-menu dropdown-menu-right\"\r\n    sacContextMenuContainer\r\n    [class.show]=\"isopen\"\r\n  >\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #defaultButtonTemplate>\r\n  <button\r\n    sacContextMenuAnchor\r\n    class=\"btn btn-sm btn-link text-secondary text-decoration-none\"\r\n    type=\"button\"\r\n    (click)=\"toggle()\"\r\n  >\r\n    <i [class]=\"IconContextMenu\"></i>\r\n  </button>\r\n</ng-template>\r\n",
-                    providers: [
-                        {
-                            provide: sacCommon.SacContextmenuCommon,
-                            useExisting: core.forwardRef(function () { return SacContextmenuComponent; }),
-                        },
-                    ]
+                    template: "<div class=\"dropdown\" [ngClass]=\"cssclass\">\r\n  <ng-container\r\n    [ngTemplateOutlet]=\"buttontemplate || defaultButtonTemplate\"\r\n  ></ng-container>\r\n\r\n  <div\r\n    class=\"dropdown-menu dropdown-menu-right\"\r\n    sacContextMenuContainer\r\n    [class.show]=\"isopen\"\r\n  >\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #defaultButtonTemplate>\r\n  <button\r\n    sacContextMenuAnchor\r\n    class=\"btn btn-sm btn-link text-secondary text-decoration-none\"\r\n    type=\"button\"\r\n    (click)=\"toggle()\"\r\n  >\r\n    <i [class]=\"IconContextMenu\"></i>\r\n  </button>\r\n</ng-template>\r\n"
                 },] }
     ];
     SacContextmenuComponent.ctorParameters = function () { return [
@@ -765,28 +759,32 @@
     ]; };
     /**
-     * Component für Menü Eintrag in Context Menü
+     * Component for menu entry in context menu
      */
     var SacContextmenuItemButtonComponent = /** @class */ (function (_super) {
         __extends(SacContextmenuItemButtonComponent, _super);
+        // #region Constructors
         /**
          * Constructor
-         * @param contextmenu Instance von Context Menü
          */
-        function SacContextmenuItemButtonComponent(contextmenu) {
-            return _super.call(this, contextmenu) || this;
+        function SacContextmenuItemButtonComponent() {
+            return _super.call(this) || this;
         }
         return SacContextmenuItemButtonComponent;
     }(sacCommon.SacContextmenuItemButtonCommon));
     SacContextmenuItemButtonComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-contextmenubutton',
-                    template: "<button\r\n  type=\"button\"\r\n  class=\"dropdown-item\"\r\n  (click)=\"callaction($event)\"\r\n  [class.disabled]=\"isdisabled\"\r\n  [ngClass]=\"cssclass\"\r\n  [attr.disabled]=\"isdisabled ? 'disabled' : null\"\r\n>\r\n  <div class=\"d-flex\">\r\n    <div *ngIf=\"!isicondisabled\" style=\"min-width: 1.5rem\">\r\n      <img *ngIf=\"image\" [src]=\"image\" class=\"align-baseline\" />\r\n      <i *ngIf=\"icon\" [class]=\"iconstyle + ' ' + icon\"></i>\r\n    </div>\r\n    <div class=\"flex-grow-1\">{{ text }}</div>\r\n  </div>\r\n</button>\r\n"
+                    template: "<button\r\n    [id]=\"name\"\r\n    type=\"button\"\r\n    class=\"dropdown-item\"\r\n    (click)=\"callaction($event)\"\r\n    [class.disabled]=\"isdisabled\"\r\n    [ngClass]=\"cssclass\"\r\n    [attr.disabled]=\"isdisabled ? 'disabled' : null\">\r\n    <div class=\"d-flex\">\r\n        <div\r\n            *ngIf=\"!isicondisabled\"\r\n            style=\"min-width: 1.5rem\">\r\n            <img\r\n                *ngIf=\"image\"\r\n                [src]=\"image\"\r\n                class=\"align-baseline\" />\r\n            <i\r\n                *ngIf=\"icon\"\r\n                [class]=\"iconstyle + ' ' + icon\"></i>\r\n        </div>\r\n        <div class=\"flex-grow-1\">{{ text }}</div>\r\n    </div>\r\n</button>\r\n",
+                    providers: [
+                        {
+                            provide: sacCommon.SacContextmenuItemCommon,
+                            useExisting: core.forwardRef(function () { return SacContextmenuItemButtonComponent; }),
+                        },
+                    ]
                 },] }
     ];
-    SacContextmenuItemButtonComponent.ctorParameters = function () { return [
-        { type: sacCommon.SacContextmenuCommon }
-    ]; };
+    SacContextmenuItemButtonComponent.ctorParameters = function () { return []; };
     /**
      * Splitter Komponente in Context Menü
@@ -801,7 +799,13 @@
     SacContextmenuItemSplitterComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-contextmenusplitter',
-                    template: "<div class=\"dropdown-divider\"></div>"
+                    template: "<div class=\"dropdown-divider\"></div>",
+                    providers: [
+                        {
+                            provide: sacCommon.SacContextmenuItemCommon,
+                            useExisting: core.forwardRef(function () { return SacContextmenuItemSplitterComponent; }),
+                        },
+                    ]
                 },] }
     ];
@@ -1279,7 +1283,7 @@
     SacDropzoneMultipleComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-dropzonemultiple',
-                    template: "<div class=\"row form-group\" [class.no-gutters]=\"disablelabel\">\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}_label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    >{{label}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" class=\"ml-1\"></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"dropzone d-flex justify-content-center position-relative\"\r\n      (drop)=\"dropHandler($event)\"\r\n      (dragover)=\"onDragOver($event)\"\r\n      (dragleave)=\"onDragLeave($event)\"\r\n      [class.active]=\"active\"\r\n      [style.min-height]=\"uploadheight\"\r\n      [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n    >\r\n      <div\r\n        class=\"content d-flex justify-content-center\"\r\n        *ngIf=\"uploads.length === 0\"\r\n      >\r\n        <div class=\"align-self-center text-center\">\r\n          <div\r\n            [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n          >\r\n            <ng-content></ng-content>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div\r\n        class=\"content d-flex justify-content-center\"\r\n        *ngIf=\"uploads.length > 0\"\r\n      >\r\n        <div class=\"align-self-center progress-container\">\r\n          <div\r\n            class=\"dropzone-uploadstates\"\r\n            [class.mt-1]=\"i > 0\"\r\n            *ngFor=\"let file of uploads; let i = index\"\r\n          >\r\n            <div\r\n              class=\"input-group upload-component upload-component-multiple\"\r\n              [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n              [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n            >\r\n              <div class=\"form-control upload-progress border-secondary\">\r\n                <div class=\"progress\">\r\n                  <div\r\n                    class=\"progress-bar\"\r\n                    [class.progress-bar-success]=\"file.progress===100\"\r\n                    role=\"progressbar\"\r\n                    [attr.aria-valuenow]=\"file.progress\"\r\n                    aria-valuemin=\"0\"\r\n                    aria-valuemax=\"100\"\r\n                    [style.width.%]=\"file.progress\"\r\n                  >\r\n                    <span class=\"progress-text text-dark\">{{ file.name }}</span>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"input-group-append\">\r\n                <!-- image-preview-clear button -->\r\n                <a\r\n                  class=\"btn\"\r\n                  (click)=\"cancel(file.uploadId)\"\r\n                  [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                  [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n                >\r\n                  <span [class]=\"IconDelete\"></span>\r\n                </a>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <input\r\n        #files\r\n        multiple\r\n        id=\"{{ name }}_uploadinput\"\r\n        type=\"file\"\r\n        class=\"custom-file-input\"\r\n        (click)=\"files.value = ''\"\r\n        (uploadxState)=\"onUpload($event)\"\r\n        [disabled]=\"HasQueueItem()\"\r\n      />\r\n    </div>\r\n    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                    template: "<div\r\n    class=\"row form-group\"\r\n    [class.no-gutters]=\"disablelabel\">\r\n    <label\r\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n        id=\"{{ name }}_label\"\r\n        for=\"{{ name }}\"\r\n        class=\"col-12 col-form-label d-flex\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n        [class.required]=\"isrequired\">\r\n        <div\r\n            class=\"text flex-grow-0\"\r\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\r\n            {{ label }}\r\n        </div>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\"\r\n            ><span\r\n                [ngClass]=\"HelptextTooltipIcon\"\r\n                class=\"ml-1\"></span> </sac-tooltip\r\n    ></label>\r\n    <div\r\n        class=\"col-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n            <div\r\n                class=\"dropzone d-flex justify-content-center position-relative\"\r\n                (drop)=\"dropHandler($event)\"\r\n                (dragover)=\"onDragOver($event)\"\r\n                (dragleave)=\"onDragLeave($event)\"\r\n                [class.active]=\"active\"\r\n                [style.min-height]=\"uploadheight\"\r\n                [class.is-invalid]=\"invalid && (dirty || touched)\">\r\n                <div\r\n                    class=\"content d-flex justify-content-center\"\r\n                    *ngIf=\"uploads.length === 0\">\r\n                    <div class=\"align-self-center text-center\">\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\r\n                    class=\"content d-flex justify-content-center\"\r\n                    *ngIf=\"uploads.length > 0\">\r\n                    <div class=\"align-self-center progress-container\">\r\n                        <div\r\n                            class=\"dropzone-uploadstates\"\r\n                            [class.mt-1]=\"i > 0\"\r\n                            *ngFor=\"let file of uploads; let i = index\">\r\n                            <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 text-dark\">{{ file.name }}</span>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"input-group-append\">\r\n                                    <!-- image-preview-clear button -->\r\n                                    <a\r\n                                        class=\"btn\"\r\n                                        (click)=\"cancel(file.uploadId)\"\r\n                                        [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                                        [class.btn-danger]=\"invalid && (dirty || touched)\">\r\n                                        <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=\"form-text text-muted\">\r\n                {{ helptext }}\r\n            </small>\r\n            <div\r\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n                class=\"invalid-feedback\">\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-plaintext align-self-top ml-2 mr-1 w-auto\"\r\n            [ngClass]=\"[componentHeight | toControlHeight]\">\r\n            <sac-tooltip\r\n                [tooltiptext]=\"helptext\"\r\n                [inlinemode]=\"true\">\r\n                <span\r\n                    [ngClass]=\"HelptextTooltipIcon\"\r\n                    class=\"ml-1\">\r\n                </span>\r\n            </sac-tooltip>\r\n        </div>\r\n    </div>\r\n</div>\r\n",
                     providers: [
                         {
                             provide: forms.NG_VALUE_ACCESSOR,
@@ -1332,7 +1336,7 @@
     SacDropzoneSingleComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-dropzonesingle',
-                    template: "<div class=\"row form-group\" [class.no-gutters]=\"disablelabel\">\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}_label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    >{{label}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" class=\"ml-1\"></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"dropzone d-flex justify-content-center position-relative\"\r\n      (drop)=\"dropHandler($event)\"\r\n      (dragover)=\"onDragOver($event)\"\r\n      (dragleave)=\"onDragLeave($event)\"\r\n      [style.min-height]=\"uploadheight\"\r\n      [class.active]=\"active\"\r\n      [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n    >\r\n      <div\r\n        class=\"content d-flex justify-content-center\"\r\n        *ngIf=\"uploads.length === 0\"\r\n      >\r\n        <div class=\"align-self-center text-center\">\r\n          <div\r\n            [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n          >\r\n            <ng-content></ng-content>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div\r\n        class=\"content d-flex justify-content-center\"\r\n        *ngIf=\"uploads.length > 0\"\r\n      >\r\n        <div class=\"align-self-center progress-container\">\r\n          <div class=\"dropzone-uploadstates\" *ngFor=\"let file of uploads\">\r\n            <div\r\n              class=\"input-group upload-component upload-component-multiple\"\r\n              [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n              [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n            >\r\n              <div class=\"form-control upload-progress border-secondary\">\r\n                <div class=\"progress\">\r\n                  <div\r\n                    class=\"progress-bar\"\r\n                    [class.progress-bar-success]=\"file.progress===100\"\r\n                    role=\"progressbar\"\r\n                    [attr.aria-valuenow]=\"file.progress\"\r\n                    aria-valuemin=\"0\"\r\n                    aria-valuemax=\"100\"\r\n                    [style.width.%]=\"file.progress\"\r\n                  >\r\n                    <span class=\"progress-text text-dark\">{{ file.name }}</span>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"input-group-append\">\r\n                <!-- image-preview-clear button -->\r\n                <a\r\n                  class=\"btn\"\r\n                  (click)=\"cancel(file.uploadId)\"\r\n                  [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                  [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n                >\r\n                  <span [class]=\"IconDelete\"></span>\r\n                </a>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <input\r\n        #files\r\n        id=\"{{ name }}_uploadinput\"\r\n        type=\"file\"\r\n        class=\"custom-file-input\"\r\n        (click)=\"files.value = ''\"\r\n        (uploadxState)=\"onUpload($event)\"\r\n        [disabled]=\"HasQueueItem()\"\r\n      />\r\n    </div>\r\n    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                    template: "<div\r\n    class=\"row form-group\"\r\n    [class.no-gutters]=\"disablelabel\">\r\n    <label\r\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n        id=\"{{ name }}_label\"\r\n        for=\"{{ name }}\"\r\n        class=\"col-12 col-form-label d-flex\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n        [class.required]=\"isrequired\">\r\n        <div\r\n            class=\"text flex-grow-0\"\r\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\r\n            {{ label }}\r\n        </div>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\"\r\n            ><span\r\n                [ngClass]=\"HelptextTooltipIcon\"\r\n                class=\"ml-1\"></span> </sac-tooltip\r\n    ></label>\r\n    <div\r\n        class=\"col-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n            <div\r\n                class=\"dropzone d-flex justify-content-center position-relative\"\r\n                (drop)=\"dropHandler($event)\"\r\n                (dragover)=\"onDragOver($event)\"\r\n                (dragleave)=\"onDragLeave($event)\"\r\n                [style.min-height]=\"uploadheight\"\r\n                [class.active]=\"active\"\r\n                [class.is-invalid]=\"invalid && (dirty || touched)\">\r\n                <div\r\n                    class=\"content d-flex justify-content-center\"\r\n                    *ngIf=\"uploads.length === 0\">\r\n                    <div class=\"align-self-center text-center\">\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\r\n                    class=\"content d-flex justify-content-center\"\r\n                    *ngIf=\"uploads.length > 0\">\r\n                    <div class=\"align-self-center progress-container\">\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 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 text-dark\">{{ file.name }}</span>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"input-group-append\">\r\n                                    <!-- image-preview-clear button -->\r\n                                    <a\r\n                                        class=\"btn\"\r\n                                        (click)=\"cancel(file.uploadId)\"\r\n                                        [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                                        [class.btn-danger]=\"invalid && (dirty || touched)\">\r\n                                        <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=\"form-text text-muted\">\r\n                {{ helptext }}\r\n            </small>\r\n            <div\r\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n                class=\"invalid-feedback\">\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-plaintext align-self-top ml-2 mr-1 w-auto\"\r\n            [ngClass]=\"[componentHeight | toControlHeight]\">\r\n            <sac-tooltip\r\n                [tooltiptext]=\"helptext\"\r\n                [inlinemode]=\"true\">\r\n                <span\r\n                    [ngClass]=\"HelptextTooltipIcon\"\r\n                    class=\"ml-1\">\r\n                </span>\r\n            </sac-tooltip>\r\n        </div>\r\n    </div>\r\n</div>\r\n",
                     providers: [
                         {
                             provide: forms.NG_VALUE_ACCESSOR,
@@ -1377,7 +1381,7 @@
     SacUploadComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-upload',
-                    template: "<div class=\"row form-group\" [class.no-gutters]=\"disablelabel\">\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}_label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    >{{label}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" class=\"ml-1\"></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group upload-component upload-single\"\r\n      [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n      [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      <div class=\"input-group-prepend\">\r\n        <!-- image-preview-input -->\r\n        <div\r\n          class=\"btn upload-input custom-file\"\r\n          [class.disabled]=\"HasQueueItem()\"\r\n          [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n          [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n        >\r\n          <i class=\"pr-2\" [class]=\"IconBrowse\"></i>\r\n          <span class=\"upload-browse\"\r\n            >{{\r\n            lngResourceService.GetString(validationKeyService.UploadButtonBrowse)\r\n            | async }}</span\r\n          >\r\n          <input\r\n            type=\"file\"\r\n            class=\"custom-file-input\"\r\n            #files\r\n            (click)=\"files.value = ''\"\r\n            (uploadxState)=\"onUpload($event)\"\r\n            multiple\r\n            [disabled]=\"HasQueueItem()\"\r\n          />\r\n        </div>\r\n      </div>\r\n      <div\r\n        class=\"form-control upload-progress\"\r\n        [ngClass]=\"[componentHeight | toControlHeight]\"\r\n        [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n      >\r\n        <div class=\"progress\">\r\n          <div\r\n            class=\"progress-bar\"\r\n            [class.progress-bar-success]=\"Progress()===100\"\r\n            role=\"progressbar\"\r\n            [attr.aria-valuenow]=\"Progress()\"\r\n            aria-valuemin=\"0\"\r\n            aria-valuemax=\"100\"\r\n            [style.width.%]=\"Progress()\"\r\n          >\r\n            <span class=\"progress-text text-dark\"\r\n              >{{ Filename() | async }}</span\r\n            >\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <!-- <input type=\"textimage-preview-filename\" class=\"form-control image-preview-filename\" disabled=\"disabled\"> --><!-- don't give a name === doesn't send on POST/GET -->\r\n      <div class=\"input-group-append\">\r\n        <!-- image-preview-clear button -->\r\n        <button\r\n          class=\"btn\"\r\n          (click)=\"cancelAll()\"\r\n          [attr.disabled]=\"HasQueueItem() === false ? 'disabled' : null\"\r\n          [class.disabled]=\"HasQueueItem() === false ? 'disabled' : null\"\r\n          [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n          [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n        >\r\n          <span [class]=\"IconDelete\"></span>\r\n        </button>\r\n        <button\r\n          *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && IsPaused() === false)\"\r\n          class=\"btn\"\r\n          (click)=\"pauseAll()\"\r\n          [attr.disabled]=\"IsUploading() === false ? 'disabled' : null\"\r\n          [class.disabled]=\"IsUploading() === false ? 'disabled' : null\"\r\n          [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n          [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n        >\r\n          <span [class]=\"IconPause\"></span>\r\n        </button>\r\n        <button\r\n          *ngIf=\"autoupload && enablepause && IsPaused()\"\r\n          class=\"btn\"\r\n          (click)=\"uploadAll()\"\r\n          [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n          [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n        >\r\n          <span [class]=\"IconContinue\"></span>\r\n        </button>\r\n        <button\r\n          *ngIf=\"autoupload === false\"\r\n          class=\"btn text-nowrap\"\r\n          (click)=\"uploadAll()\"\r\n          [attr.disabled]=\"IsStateToUpload() === false ?  'disabled' : null\"\r\n          [class.disabled]=\"IsStateToUpload() === false ?  'disabled' : null\"\r\n          [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n          [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n        >\r\n          <span [class]=\"IconUpload\" class=\"pr-2\"></span>{{\r\n          lngResourceService.GetString(validationKeyService.UploadButtonUpload)\r\n          | async }}\r\n        </button>\r\n      </div>\r\n    </div>\r\n    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                    template: "<div\r\n    class=\"row form-group\"\r\n    [class.no-gutters]=\"disablelabel\">\r\n    <label\r\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n        id=\"{{ name }}_label\"\r\n        for=\"{{ name }}\"\r\n        class=\"col-12 col-form-label d-flex\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n        [class.required]=\"isrequired\">\r\n        <div\r\n            class=\"text flex-grow-0\"\r\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\r\n            {{ label }}\r\n        </div>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [ngClass]=\"HelptextTooltipIcon\"\r\n                class=\"ml-1\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n            <div\r\n                class=\"input-group upload-component upload-single\"\r\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n                [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\r\n                <div class=\"input-group-prepend\">\r\n                    <!-- image-preview-input -->\r\n                    <div\r\n                        class=\"btn upload-input custom-file\"\r\n                        [class.disabled]=\"HasQueueItem()\"\r\n                        [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                        [class.btn-danger]=\"invalid && (dirty || touched)\">\r\n                        <i\r\n                            class=\"pr-2\"\r\n                            [ngClass]=\"IconBrowse\"></i>\r\n                        <span class=\"upload-browse\">{{ lngResourceService.GetString(validationKeyService.UploadButtonBrowse) | async }}</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]=\"HasQueueItem()\" />\r\n                    </div>\r\n                </div>\r\n                <div\r\n                    class=\"form-control upload-progress\"\r\n                    [ngClass]=\"[componentHeight | toControlHeight]\"\r\n                    [class.is-invalid]=\"invalid && (dirty || touched)\">\r\n                    <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                <!-- <input type=\"textimage-preview-filename\" class=\"form-control image-preview-filename\" disabled=\"disabled\"> --><!-- don't give a name === doesn't send on POST/GET -->\r\n                <div class=\"input-group-append\">\r\n                    <!-- image-preview-clear button -->\r\n                    <button\r\n                        class=\"btn\"\r\n                        (click)=\"cancelAll()\"\r\n                        [attr.disabled]=\"HasQueueItem() === false ? 'disabled' : null\"\r\n                        [class.disabled]=\"HasQueueItem() === false ? 'disabled' : null\"\r\n                        [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                        [class.btn-danger]=\"invalid && (dirty || touched)\">\r\n                        <span [ngClass]=\"IconDelete\"></span>\r\n                    </button>\r\n                    <button\r\n                        *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && IsPaused() === false)\"\r\n                        class=\"btn\"\r\n                        (click)=\"pauseAll()\"\r\n                        [attr.disabled]=\"IsUploading() === false ? 'disabled' : null\"\r\n                        [class.disabled]=\"IsUploading() === false ? 'disabled' : null\"\r\n                        [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                        [class.btn-danger]=\"invalid && (dirty || touched)\">\r\n                        <span [ngClass]=\"IconPause\"></span>\r\n                    </button>\r\n                    <button\r\n                        *ngIf=\"autoupload && enablepause && IsPaused()\"\r\n                        class=\"btn\"\r\n                        (click)=\"uploadAll()\"\r\n                        [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                        [class.btn-danger]=\"invalid && (dirty || touched)\">\r\n                        <span [ngClass]=\"IconContinue\"></span>\r\n                    </button>\r\n                    <button\r\n                        *ngIf=\"autoupload === false\"\r\n                        class=\"btn text-nowrap\"\r\n                        (click)=\"uploadAll()\"\r\n                        [attr.disabled]=\"IsStateToUpload() === false ? 'disabled' : null\"\r\n                        [class.disabled]=\"IsStateToUpload() === false ? 'disabled' : null\"\r\n                        [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                        [class.btn-danger]=\"invalid && (dirty || touched)\">\r\n                        <span\r\n                            [ngClass]=\"IconUpload\"\r\n                            class=\"pr-2\"></span\r\n                        >{{ lngResourceService.GetString(validationKeyService.UploadButtonUpload) | async }}\r\n                    </button>\r\n                </div>\r\n            </div>\r\n            <small\r\n                *ngIf=\"helptextmode === 'text' && helptext\"\r\n                class=\"form-text text-muted\">\r\n                {{ helptext }}\r\n            </small>\r\n            <div\r\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n                class=\"invalid-feedback\">\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-plaintext align-self-top ml-2 mr-1 w-auto\"\r\n            [ngClass]=\"[componentHeight | toControlHeight]\">\r\n            <sac-tooltip\r\n                [tooltiptext]=\"helptext\"\r\n                [inlinemode]=\"true\">\r\n                <span\r\n                    [ngClass]=\"HelptextTooltipIcon\"\r\n                    class=\"ml-1\">\r\n                </span>\r\n            </sac-tooltip>\r\n        </div>\r\n    </div>\r\n</div>\r\n",
                     providers: [
                         {
                             provide: forms.NG_VALUE_ACCESSOR,
@@ -1422,7 +1426,7 @@
     SacUploadMultipleComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-uploadmultiple',
-                    template: "<div class=\"row form-group\" [class.no-gutters]=\"disablelabel\">\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}_label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    >{{label}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" class=\"ml-1\"></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div class=\"upload-component\">\r\n      <div class=\"row\">\r\n        <div class=\"col-12\">\r\n          <div\r\n            class=\"btn-group\"\r\n            [class.btn-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n            [class.btn-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n            [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n          >\r\n            <div\r\n              class=\"btn upload-input custom-file\"\r\n              [class.disabled]=\"maxfiles > 0 &&  uploads.length >= maxfiles\"\r\n              [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n              [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n            >\r\n              <i [class]=\"IconBrowse\" class=\"pr-2\"></i>\r\n              <span class=\"upload-browse\">Browse</span>\r\n              <input\r\n                type=\"file\"\r\n                class=\"custom-file-input\"\r\n                #files\r\n                (click)=\"files.value = ''\"\r\n                (uploadxState)=\"onUpload($event)\"\r\n                multiple\r\n                [disabled]=\"maxfiles > 0 &&  uploads.length >= maxfiles\"\r\n              />\r\n            </div>\r\n\r\n            <div\r\n              class=\"btn-group\"\r\n              [class.btn-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n              [class.btn-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n            >\r\n              <!-- image-preview-clear button -->\r\n              <button\r\n                class=\"btn\"\r\n                (click)=\"cancelAll()\"\r\n                [attr.disabled]=\"HasQueueItem() === false ? 'disabled' : null\"\r\n                [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n              >\r\n                <span [class]=\"IconDelete\"></span>\r\n              </button>\r\n              <button\r\n                *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && IsPaused() === false)\"\r\n                class=\"btn\"\r\n                (click)=\"pauseAll()\"\r\n                [attr.disabled]=\"IsUploading() === false ? 'disabled' : null\"\r\n                [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n              >\r\n                <span [class]=\"IconPause\"></span>\r\n              </button>\r\n              <button\r\n                *ngIf=\"autoupload && enablepause && IsPaused() === true\"\r\n                class=\"btn\"\r\n                (click)=\"uploadAll()\"\r\n                [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n              >\r\n                <span [class]=\"IconContinue\"></span>\r\n              </button>\r\n              <button\r\n                *ngIf=\"autoupload === false\"\r\n                class=\"btn text-nowrap\"\r\n                (click)=\"uploadAll()\"\r\n                [attr.disabled]=\"IsStateToUpload() === false ?  'disabled' : null\"\r\n                [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n              >\r\n                <span [class]=\"IconUpload\" class=\"pr-2\"></span> {{\r\n                lngResourceService.GetString(validationKeyService.UploadButtonUpload)\r\n                | async }}\r\n              </button>\r\n            </div>\r\n          </div>\r\n          <div\r\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n            class=\"invalid-feedback\"\r\n          >\r\n            {{ GetErrorMessage() | async }}\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngFor=\"let file of uploads\" style=\"margin-top: 5px\">\r\n        <div\r\n          class=\"input-group upload-component upload-multiple\"\r\n          [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n          [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n        >\r\n          <div\r\n            class=\"form-control upload-progress\"\r\n            [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n          >\r\n            <div class=\"progress\">\r\n              <div\r\n                class=\"progress-bar\"\r\n                [class.progress-bar-success]=\"file.progress===100\"\r\n                role=\"progressbar\"\r\n                [attr.aria-valuenow]=\"file.progress\"\r\n                aria-valuemin=\"0\"\r\n                aria-valuemax=\"100\"\r\n                [style.width.%]=\"file.progress\"\r\n              >\r\n                <span class=\"progress-text text-dark\">{{ file.name }}</span>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"input-group-append\">\r\n            <!-- image-preview-clear button -->\r\n            <button\r\n              class=\"btn\"\r\n              (click)=\"cancel(file.uploadId)\"\r\n              [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n              [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n            >\r\n              <span [class]=\"IconDelete\"></span>\r\n            </button>\r\n            <button\r\n              *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && file.status !== 'paused')\"\r\n              class=\"btn\"\r\n              (click)=\"pause(file.uploadId)\"\r\n              [attr.disabled]=\"file.status !== 'uploading' ? 'disabled' : null\"\r\n              [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n              [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n            >\r\n              <span [class]=\"IconPause\"></span>\r\n            </button>\r\n            <button\r\n              *ngIf=\"autoupload && enablepause && file.status === 'paused'\"\r\n              class=\"btn\"\r\n              (click)=\"upload(file.uploadId)\"\r\n              [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n              [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n            >\r\n              <span [class]=\"IconContinue\"></span>\r\n            </button>\r\n            <button\r\n              *ngIf=\"autoupload === false\"\r\n              class=\"btn text-nowrap\"\r\n              (click)=\"upload(file.uploadId)\"\r\n              [attr.disabled]=\"file.status !== 'added' && file.status !== 'paused' ?  'disabled' : null\"\r\n              [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n              [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n            >\r\n              <span [class]=\"IconUpload\" class=\"pr-2\"></span>{{\r\n              lngResourceService.GetString(validationKeyService.UploadButtonUpload)\r\n              | async }}\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\r\n  </div>\r\n</div>\r\n",
+                    template: "<div\r\n    class=\"row form-group\"\r\n    [class.no-gutters]=\"disablelabel\">\r\n    <label\r\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n        id=\"{{ name }}_label\"\r\n        for=\"{{ name }}\"\r\n        class=\"col-12 col-form-label d-flex\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n        [class.required]=\"isrequired\">\r\n        <div\r\n            class=\"text flex-grow-0\"\r\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\r\n            {{ label }}\r\n        </div>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [ngClass]=\"HelptextTooltipIcon\"\r\n                class=\"ml-1\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\r\n        <div class=\"upload-component\">\r\n            <div class=\"row\">\r\n                <div class=\"col-12\">\r\n                    <div\r\n                        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n                        [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\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-secondary]=\"!(invalid && (dirty || touched))\"\r\n                                [class.btn-danger]=\"invalid && (dirty || touched)\">\r\n                                <i\r\n                                    [ngClass]=\"IconBrowse\"\r\n                                    class=\"pr-2\"></i>\r\n                                <span class=\"upload-browse\">Browse</span>\r\n                                <input\r\n                                    type=\"file\"\r\n                                    class=\"custom-file-input\"\r\n                                    #files\r\n                                    (click)=\"files.value = ''\"\r\n                                    (uploadxState)=\"onUpload($event)\"\r\n                                    multiple\r\n                                    [disabled]=\"maxfiles > 0 && uploads.length >= maxfiles\" />\r\n                            </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                                <button\r\n                                    class=\"btn\"\r\n                                    (click)=\"cancelAll()\"\r\n                                    [attr.disabled]=\"HasQueueItem() === false ? 'disabled' : null\"\r\n                                    [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                                    [class.btn-danger]=\"invalid && (dirty || touched)\">\r\n                                    <span [ngClass]=\"IconDelete\"></span>\r\n                                </button>\r\n                                <button\r\n                                    *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && IsPaused() === false)\"\r\n                                    class=\"btn\"\r\n                                    (click)=\"pauseAll()\"\r\n                                    [attr.disabled]=\"IsUploading() === false ? 'disabled' : null\"\r\n                                    [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                                    [class.btn-danger]=\"invalid && (dirty || touched)\">\r\n                                    <span [ngClass]=\"IconPause\"></span>\r\n                                </button>\r\n                                <button\r\n                                    *ngIf=\"autoupload && enablepause && IsPaused() === true\"\r\n                                    class=\"btn\"\r\n                                    (click)=\"uploadAll()\"\r\n                                    [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                                    [class.btn-danger]=\"invalid && (dirty || touched)\">\r\n                                    <span [ngClass]=\"IconContinue\"></span>\r\n                                </button>\r\n                                <button\r\n                                    *ngIf=\"autoupload === false\"\r\n                                    class=\"btn text-nowrap\"\r\n                                    (click)=\"uploadAll()\"\r\n                                    [attr.disabled]=\"IsStateToUpload() === false ? 'disabled' : null\"\r\n                                    [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                                    [class.btn-danger]=\"invalid && (dirty || touched)\">\r\n                                    <span\r\n                                        [ngClass]=\"IconUpload\"\r\n                                        class=\"pr-2\"></span>\r\n                                    {{ lngResourceService.GetString(validationKeyService.UploadButtonUpload) | async }}\r\n                                </button>\r\n                            </div>\r\n                        </div>\r\n                        <div\r\n                            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n                            class=\"form-control-plaintext align-self-top ml-2 mr-1 w-auto\"\r\n                            [ngClass]=\"[componentHeight | toControlHeight]\">\r\n                            <sac-tooltip\r\n                                [tooltiptext]=\"helptext\"\r\n                                [inlinemode]=\"true\">\r\n                                <span\r\n                                    [ngClass]=\"HelptextTooltipIcon\"\r\n                                    class=\"ml-1\">\r\n                                </span>\r\n                            </sac-tooltip>\r\n                        </div>\r\n                    </div>\r\n                    <div\r\n                        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n                        class=\"invalid-feedback\">\r\n                        {{ GetErrorMessage() | async }}\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\r\n                        class=\"form-control upload-progress\"\r\n                        [class.is-invalid]=\"invalid && (dirty || touched)\">\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 class=\"input-group-append\">\r\n                        <!-- image-preview-clear button -->\r\n                        <button\r\n                            class=\"btn\"\r\n                            (click)=\"cancel(file.uploadId)\"\r\n                            [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                            [class.btn-danger]=\"invalid && (dirty || touched)\">\r\n                            <span [class]=\"IconDelete\"></span>\r\n                        </button>\r\n                        <button\r\n                            *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && file.status !== 'paused')\"\r\n                            class=\"btn\"\r\n                            (click)=\"pause(file.uploadId)\"\r\n                            [attr.disabled]=\"file.status !== 'uploading' ? 'disabled' : null\"\r\n                            [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                            [class.btn-danger]=\"invalid && (dirty || touched)\">\r\n                            <span [class]=\"IconPause\"></span>\r\n                        </button>\r\n                        <button\r\n                            *ngIf=\"autoupload && enablepause && file.status === 'paused'\"\r\n                            class=\"btn\"\r\n                            (click)=\"upload(file.uploadId)\"\r\n                            [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                            [class.btn-danger]=\"invalid && (dirty || touched)\">\r\n                            <span [class]=\"IconContinue\"></span>\r\n                        </button>\r\n                        <button\r\n                            *ngIf=\"autoupload === false\"\r\n                            class=\"btn text-nowrap\"\r\n                            (click)=\"upload(file.uploadId)\"\r\n                            [attr.disabled]=\"file.status !== 'added' && file.status !== 'paused' ? 'disabled' : null\"\r\n                            [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                            [class.btn-danger]=\"invalid && (dirty || touched)\">\r\n                            <span\r\n                                [class]=\"IconUpload\"\r\n                                class=\"pr-2\"></span\r\n                            >{{ lngResourceService.GetString(validationKeyService.UploadButtonUpload) | async }}\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <small\r\n            *ngIf=\"helptextmode === 'text' && helptext\"\r\n            class=\"form-text text-muted\">\r\n            {{ helptext }}\r\n        </small>\r\n    </div>\r\n</div>\r\n",
                     providers: [
                         {
                             provide: forms.NG_VALUE_ACCESSOR,
@@ -1622,7 +1626,7 @@
     SacCheckboxComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-checkbox',
-                    template: "<div\r\n  class=\"row\"\r\n  [class.no-gutters]=\"disablelabel\"\r\n  [class.form-group]=\"!stacked\"\r\n>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\r\n  >\r\n    <label\r\n      *ngIf=\"!disablelabel && !stacked\"\r\n      for=\"{{name}}\"\r\n      class=\"col-form-label\"\r\n      [ngClass]=\"componentHeight | toLabelHeight\"\r\n      >{{label}}<sac-tooltip\r\n        *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n        [tooltiptext]=\"helptext\"\r\n        [inlinemode]=\"true\"\r\n        ><span\r\n          [ngClass]=\"HelptextTooltipIcon\"\r\n          class=\"ml-1\"\r\n        ></span> </sac-tooltip\r\n    ></label>\r\n  </div>\r\n  <div\r\n    class=\"align-self-center col-12\"\r\n    [ngClass]=\"[!disablelabel && !stacked ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      [class.form-check]=\"checkboxstyle === 'checkbox'\"\r\n      [class.custom-control]=\"checkboxstyle === 'switch'\"\r\n      [class.custom-switch]=\"checkboxstyle === 'switch'\"\r\n      [class.form-check-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.form-check-lg]=\"componentHeight === ControlHeight.Large\"\r\n    >\r\n      <input\r\n        [class.form-check-input]=\"checkboxstyle === 'checkbox'\"\r\n        [class.custom-control-input]=\"checkboxstyle === 'switch'\"\r\n        [class.form-check-input-sm]=\"componentHeight === ControlHeight.Small\"\r\n        [class.form-check-input-lg]=\"componentHeight === ControlHeight.Large\"\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"checkbox\"\r\n        [checked]=\"value\"\r\n        (blur)=\"onTouch()\"\r\n        (change)=\"setValue($event.target.checked)\"\r\n        [disabled]=\"isdisabled\"\r\n      />\r\n      <label\r\n        for=\"{{name}}\"\r\n        [class.form-check-label]=\"checkboxstyle === 'checkbox'\"\r\n        [class.custom-control-label]=\"checkboxstyle === 'switch'\"\r\n        [class.form-check-label-sm]=\"componentHeight === ControlHeight.Small\"\r\n        [class.form-check-label-lg]=\"componentHeight === ControlHeight.Large\"\r\n      >\r\n        <ng-container *ngIf=\"checkboxtext\">{{checkboxtext}}</ng-container>\r\n      </label>\r\n    </div>\r\n    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\r\n  </div>\r\n</div>\r\n",
+                    template: "<div\r\n    class=\"row\"\r\n    [class.no-gutters]=\"disablelabel\"\r\n    [class.form-group]=\"!stacked\">\r\n    <div\r\n        class=\"col-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\">\r\n        <label\r\n            *ngIf=\"!disablelabel && !stacked\"\r\n            for=\"{{ name }}\"\r\n            class=\"col-form-label d-flex\"\r\n            [ngClass]=\"componentHeight | toLabelHeight\">\r\n            <div\r\n                class=\"text flex-grow-0\"\r\n                [class.flex-sm-grow-1]=\"splitlabelandhelptext\"\r\n                >{{ label }}</div\r\n            >\r\n            <sac-tooltip\r\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n                [tooltiptext]=\"helptext\"\r\n                [inlinemode]=\"true\"\r\n                ><span\r\n                    [ngClass]=\"HelptextTooltipIcon\"\r\n                    class=\"ml-1\">\r\n                </span>\r\n            </sac-tooltip>\r\n        </label>\r\n    </div>\r\n    <div\r\n        class=\"align-self-center col-12\"\r\n        [ngClass]=\"[!disablelabel && !stacked ? (this.labelSizes | toControlWidthCss) : '']\">\r\n        <div\r\n            [class.form-check]=\"checkboxstyle === 'checkbox'\"\r\n            [class.custom-control]=\"checkboxstyle === 'switch'\"\r\n            [class.custom-switch]=\"checkboxstyle === 'switch'\"\r\n            [class.form-check-sm]=\"componentHeight === ControlHeight.Small\"\r\n            [class.form-check-lg]=\"componentHeight === ControlHeight.Large\">\r\n            <input\r\n                [class.form-check-input]=\"checkboxstyle === 'checkbox'\"\r\n                [class.custom-control-input]=\"checkboxstyle === 'switch'\"\r\n                [class.form-check-input-sm]=\"componentHeight === ControlHeight.Small\"\r\n                [class.form-check-input-lg]=\"componentHeight === ControlHeight.Large\"\r\n                id=\"{{ name }}\"\r\n                name=\"{{ name }}\"\r\n                type=\"checkbox\"\r\n                [checked]=\"value\"\r\n                (blur)=\"onTouch()\"\r\n                (change)=\"setValue($event.target.checked)\"\r\n                [disabled]=\"isdisabled\" />\r\n            <label\r\n                for=\"{{ name }}\"\r\n                [class.form-check-label]=\"checkboxstyle === 'checkbox'\"\r\n                [class.custom-control-label]=\"checkboxstyle === 'switch'\"\r\n                [class.form-check-label-sm]=\"componentHeight === ControlHeight.Small\"\r\n                [class.form-check-label-lg]=\"componentHeight === ControlHeight.Large\">\r\n                <ng-container *ngIf=\"checkboxtext\">{{ checkboxtext }}</ng-container>\r\n            </label>\r\n\r\n            <div\r\n                *ngIf=\"helptextmode === 'tooltip' && helptext && (disablelabel || stacked)\"\r\n                class=\"ml-2 mr-1 d-inline-block\"\r\n                [class.form-check-label-sm]=\"componentHeight === ControlHeight.Small\"\r\n                [class.form-check-label-lg]=\"componentHeight === ControlHeight.Large\">\r\n                <sac-tooltip\r\n                    [tooltiptext]=\"helptext\"\r\n                    [inlinemode]=\"true\">\r\n                    <span\r\n                        [ngClass]=\"HelptextTooltipIcon\"\r\n                        class=\"ml-1\">\r\n                    </span>\r\n                </sac-tooltip>\r\n            </div>\r\n        </div>\r\n        <small\r\n            *ngIf=\"helptextmode === 'text' && helptext\"\r\n            class=\"form-text text-muted\">\r\n            {{ helptext }}\r\n        </small>\r\n    </div>\r\n</div>\r\n",
                     // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                     providers: [
                         {
@@ -1663,7 +1667,7 @@
     SacRadiobuttonsComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-radiobuttons',
-                    template: "<div class=\"row form-group\">\r\n  <div\r\n    *ngIf=\"disablelabel === false\"\r\n    class=\"col-12 pt-0\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\r\n  >\r\n    <label\r\n      class=\"col-form-label\"\r\n      [ngClass]=\"componentHeight | toLabelHeight\"\r\n      *ngIf=\"!disablelabel\"\r\n      >{{label}}<sac-tooltip\r\n        *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n        [tooltiptext]=\"helptext\"\r\n        [inlinemode]=\"true\"\r\n        ><span\r\n          [ngClass]=\"HelptextTooltipIcon\"\r\n          class=\"ml-1\"\r\n        ></span> </sac-tooltip\r\n    ></label>\r\n  </div>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n    [class.pt-1]=\"componentHeight === ControlHeight.Small\"\r\n    [class.pt-2]=\"componentHeight !== ControlHeight.Small\"\r\n  >\r\n    <ng-content></ng-content>\r\n    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\r\n  </div>\r\n</div>\r\n",
+                    template: "<div class=\"row form-group\">\r\n    <div\r\n        *ngIf=\"disablelabel === false\"\r\n        class=\"col-12 pt-0\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\">\r\n        <label\r\n            class=\"col-form-label d-flex\"\r\n            [ngClass]=\"componentHeight | toLabelHeight\"\r\n            *ngIf=\"!disablelabel\">\r\n            <div\r\n                class=\"text flex-grow-0\"\r\n                [class.flex-sm-grow-1]=\"splitlabelandhelptext\"\r\n                >{{ label }}</div\r\n            >\r\n            <sac-tooltip\r\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n                [tooltiptext]=\"helptext\"\r\n                [inlinemode]=\"true\">\r\n                <span\r\n                    [ngClass]=\"HelptextTooltipIcon\"\r\n                    class=\"ml-1\">\r\n                </span>\r\n            </sac-tooltip>\r\n        </label>\r\n    </div>\r\n    <div\r\n        class=\"col-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [class.pt-1]=\"componentHeight === ControlHeight.Small\"\r\n        [class.pt-2]=\"componentHeight !== ControlHeight.Small\">\r\n        <ng-content></ng-content>\r\n        <small\r\n            *ngIf=\"helptextmode === 'text' && helptext\"\r\n            class=\"form-text text-muted\">\r\n            {{ helptext }}\r\n        </small>\r\n    </div>\r\n</div>\r\n",
                     // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                     providers: [
                         {
@@ -1689,24 +1693,29 @@
      */
     var SacRadiobuttonComponent = /** @class */ (function (_super) {
         __extends(SacRadiobuttonComponent, _super);
+        // #region Constructors
         /**
          * Konstruktor
          * @param SacRadioButtons Radio Buttons Group Komponente
+         * @param formlayout SacFormLayoutCommon to define scoped layout settings
+         * @param injector Injector for injecting services
          */
-        function SacRadiobuttonComponent(sacRadioButtons) {
-            return _super.call(this, sacRadioButtons) || this;
+        function SacRadiobuttonComponent(sacRadioButtons, formLayout, injector) {
+            return _super.call(this, sacRadioButtons, formLayout, injector) || this;
         }
         return SacRadiobuttonComponent;
     }(sacCommon.SacRadiobuttonCommon));
     SacRadiobuttonComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-radiobutton',
-                    template: "<div\r\n  class=\"form-check\"\r\n  [class.form-check-sm]=\"componentHeight === ControlHeight.Small\"\r\n  [class.form-check-lg]=\"componentHeight === ControlHeight.Large\"\r\n  *ngIf=\"hidden===false\"\r\n>\r\n  <input\r\n    id=\"{{getName}}_{{getIndex}}\"\r\n    name=\"{{getName}}\"\r\n    type=\"radio\"\r\n    class=\"form-check-input\"\r\n    [class.form-check-input-sm]=\"componentHeight === ControlHeight.Small\"\r\n    [class.form-check-input-lg]=\"componentHeight === ControlHeight.Large\"\r\n    [value]=\"value\"\r\n    [checked]=\"checked\"\r\n    (change)=\"ChangeEvent()\"\r\n    [disabled]=\"isDisabled\"\r\n  />\r\n  <label\r\n    for=\"{{getName}}_{{getIndex}}\"\r\n    class=\"form-check-label\"\r\n    [class.form-check-label-sm]=\"componentHeight === ControlHeight.Small\"\r\n    [class.form-check-label-lg]=\"componentHeight === ControlHeight.Large\"\r\n  >\r\n    <ng-template\r\n      *ngTemplateOutlet=\"labeltemplate || defaultItemLabelTemplate;context:{ label: label }\"\r\n    >\r\n    </ng-template>\r\n  </label>\r\n</div>\r\n\r\n<ng-template #defaultItemLabelTemplate let-label=\"label\">{{label}}</ng-template>\r\n",
+                    template: "<div\r\n    class=\"form-check\"\r\n    [class.form-check-sm]=\"componentHeight === ControlHeight.Small\"\r\n    [class.form-check-lg]=\"componentHeight === ControlHeight.Large\"\r\n    *ngIf=\"hidden === false\">\r\n    <input\r\n        id=\"{{ getName }}_{{ getIndex }}\"\r\n        name=\"{{ getName }}\"\r\n        type=\"radio\"\r\n        class=\"form-check-input\"\r\n        [class.form-check-input-sm]=\"componentHeight === ControlHeight.Small\"\r\n        [class.form-check-input-lg]=\"componentHeight === ControlHeight.Large\"\r\n        [value]=\"value\"\r\n        [checked]=\"checked\"\r\n        (change)=\"ChangeEvent()\"\r\n        [disabled]=\"isDisabled\" />\r\n    <label\r\n        for=\"{{ getName }}_{{ getIndex }}\"\r\n        class=\"form-check-label\"\r\n        [class.form-check-label-sm]=\"componentHeight === ControlHeight.Small\"\r\n        [class.form-check-label-lg]=\"componentHeight === ControlHeight.Large\">\r\n        <ng-template *ngTemplateOutlet=\"labeltemplate || defaultItemLabelTemplate; context: { label: label }\"> </ng-template>\r\n    </label>\r\n    <small\r\n        *ngIf=\"helptextmode === 'text' && helptext\"\r\n        class=\"form-text text-muted\">\r\n        {{ helptext }}\r\n    </small>\r\n    <div\r\n        *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n        class=\"ml-2 mr-1 d-inline-block\"\r\n        [class.form-check-label-sm]=\"componentHeight === ControlHeight.Small\"\r\n        [class.form-check-label-lg]=\"componentHeight === ControlHeight.Large\">\r\n        <sac-tooltip\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [ngClass]=\"HelptextTooltipIcon\"\r\n                class=\"ml-1\">\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    <ng-container>{{ label }}</ng-container>\r\n</ng-template>\r\n",
                     styles: [".form-check-lg{padding-left:1.75rem}.form-check-input{height:1rem;width:1rem}.form-check-input-sm{height:.875rem;margin-top:.4rem;width:.875rem}.form-check-input-lg{height:1.25rem;margin-left:-1.75rem;margin-top:.4rem;width:1.25rem}.form-check-label-sm{font-size:.875rem}.form-check-label-lg{font-size:1.25rem}"]
                 },] }
     ];
     SacRadiobuttonComponent.ctorParameters = function () { return [
-        { type: SacRadiobuttonsComponent, decorators: [{ type: core.Host }] }
+        { type: SacRadiobuttonsComponent, decorators: [{ type: core.Host }] },
+        { type: SacFormLayoutDirective, decorators: [{ type: core.Host }, { type: core.Optional }] },
+        { type: core.Injector }
     ]; };
     var SACBootstrap4CheckboxModule = /** @class */ (function () {
@@ -1734,10 +1743,7 @@
                 },] }
     ];
-    /**
-     * Referenz auf Moment.JS
-     */
-    var moment = moment___default['default'];
+    // #region Classes
     /**
      * Komponente für Datumauswahl
      */
@@ -1749,16 +1755,17 @@
          * @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
          */
-        function SacDateComponent(formLayout, injector, elementRef) {
-            return _super.call(this, formLayout, injector, elementRef) || this;
+        function SacDateComponent(formLayout, injector, elementRef, cdRef) {
+            return _super.call(this, formLayout, injector, elementRef, cdRef) || this;
         }
         return SacDateComponent;
     }(sacCommon.SacDateCommon));
     SacDateComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-date',
-                    template: "<div class=\"row form-group\" [class.no-gutters]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    >{{label}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" class=\"ml-1\"></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group\"\r\n      [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n      [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      <input\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        [imask]=\"imaskDate\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        [value]=\"valuestring\"\r\n        [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n        [ngClass]=\"[componentHeight | toControlHeight]\"\r\n        (blur)=\"onTouch()\"\r\n        (accept)=\"setValueString($event)\"\r\n        [disabled]=\"isdisabled\"\r\n      />\r\n      <div class=\"input-group-append\">\r\n        <button\r\n          class=\"btn btn-secondary\"\r\n          type=\"button\"\r\n          (click)=\"showDateSelector()\"\r\n          [disabled]=\"isdisabled\"\r\n        >\r\n          <i [class]=\"IconSelector\"></i>\r\n        </button>\r\n      </div>\r\n      <div\r\n        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n        class=\"invalid-feedback\"\r\n      >\r\n        {{ GetErrorMessage() | async }}\r\n      </div>\r\n    </div>\r\n    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\r\n    <div\r\n      class=\"popover fade bs-popover-bottom show\"\r\n      role=\"tooltip\"\r\n      *ngIf=\"_showselector\"\r\n      style=\"\r\n        display: block;\r\n        left: unset;\r\n        right: 0px;\r\n        top: unset;\r\n        max-width: 325px;\r\n      \"\r\n    >\r\n      <div\r\n        class=\"arrow\"\r\n        style=\"left: unset\"\r\n        [style.right.rem]=\"componentHeight === ControlHeight.Small ? 1.1 : componentHeight === ControlHeight.Large ? 1.8 : 1.4\"\r\n      ></div>\r\n      <h3 class=\"popover-header\" style=\"display: none\"></h3>\r\n      <div class=\"popover-body\">\r\n        <sac-dateselector\r\n          [initialvalue]=\"value\"\r\n          (selectdate)=\"dateselect($event)\"\r\n          dateselection=\"true\"\r\n        ></sac-dateselector>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                    template: "<div\r\n    class=\"row form-group\"\r\n    [class.no-gutters]=\"disablelabel\">\r\n    <label\r\n        for=\"{{ name }}\"\r\n        class=\"col-12 col-form-label d-flex\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n        [class.required]=\"isrequired\">\r\n        <div\r\n            class=\"text flex-grow-0\"\r\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\r\n            {{ label }}\r\n        </div>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [ngClass]=\"HelptextTooltipIcon\"\r\n                class=\"ml-1\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n            <div\r\n                class=\"input-group\"\r\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n                [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\r\n                <input\r\n                    id=\"{{ name }}\"\r\n                    name=\"{{ name }}\"\r\n                    type=\"text\"\r\n                    class=\"form-control\"\r\n                    [imask]=\"imaskDate\"\r\n                    [attr.placeholder]=\"placeholder\"\r\n                    [value]=\"valuestring\"\r\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n                    [ngClass]=\"[componentHeight | toControlHeight]\"\r\n                    (blur)=\"onTouch()\"\r\n                    (accept)=\"setValueString($event)\"\r\n                    [disabled]=\"isdisabled\" />\r\n                <div class=\"input-group-append\">\r\n                    <button\r\n                        #pickerbutton\r\n                        class=\"btn btn-secondary\"\r\n                        type=\"button\"\r\n                        (click)=\"showDateSelector()\"\r\n                        [disabled]=\"isdisabled\">\r\n                        <i [class]=\"IconSelector\"></i>\r\n                    </button>\r\n                </div>\r\n                <div\r\n                    *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n                    class=\"invalid-feedback\">\r\n                    {{ GetErrorMessage() | async }}\r\n                </div>\r\n            </div>\r\n            <small\r\n                *ngIf=\"helptextmode === 'text' && helptext\"\r\n                class=\"form-text text-muted\">\r\n                {{ helptext }}\r\n            </small>\r\n            <div\r\n                #picker\r\n                *ngIf=\"_showselector\">\r\n                <div\r\n                    class=\"popover fade show position-absolute m-0\"\r\n                    role=\"tooltip\"\r\n                    *ngIf=\"_showselector\"\r\n                    [class.bs-popover-bottom]=\"GetPickerPosition() == TooltipPosition.bottom || GetPickerPosition() == TooltipPosition.bottomend\"\r\n                    [class.bs-popover-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                        class=\"arrow position-absolute m-0\"\r\n                        style=\"left: unset\"\r\n                        [style.top.px]=\"posArrowTop\"\r\n                        [style.left.px]=\"posArrowLeft\">\r\n                    </div>\r\n\r\n                    <div class=\"popover-body\">\r\n                        <sac-dateselector\r\n                            [initialvalue]=\"value\"\r\n                            (selectdate)=\"dateselect($event)\"\r\n                            dateselection=\"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-plaintext align-self-top ml-2 mr-1 w-auto\"\r\n            [ngClass]=\"[componentHeight | toControlHeight]\">\r\n            <sac-tooltip\r\n                [tooltiptext]=\"helptext\"\r\n                [inlinemode]=\"true\">\r\n                <span\r\n                    [ngClass]=\"HelptextTooltipIcon\"\r\n                    class=\"ml-1\">\r\n                </span>\r\n            </sac-tooltip>\r\n        </div>\r\n    </div>\r\n</div>\r\n",
                     // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                     providers: [
                         {
@@ -1777,8 +1784,16 @@
     SacDateComponent.ctorParameters = function () { return [
         { type: SacFormLayoutDirective, decorators: [{ type: core.Host }, { type: core.Optional }] },
         { type: core.Injector },
-        { type: core.ElementRef }
-    ]; };
+        { type: core.ElementRef },
+        { type: core.ChangeDetectorRef }
+    ]; };
+    // #endregion Classes
+    // #region Variables
+    /**
+     * Referenz auf Moment.JS
+     */
+    var moment = moment___default['default'];
+    // #endregion Variables
     /**
      * DateTime Selektor Komponente
@@ -1808,16 +1823,17 @@
          * @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
          */
-        function SacDateTimeComponent(formLayout, injector, elementRef) {
-            return _super.call(this, formLayout, injector, elementRef) || this;
+        function SacDateTimeComponent(formLayout, injector, elementRef, cdRef) {
+            return _super.call(this, formLayout, injector, elementRef, cdRef) || this;
         }
         return SacDateTimeComponent;
     }(sacCommon.SacDateTimeCommon));
     SacDateTimeComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-datetime',
-                    template: "<div class=\"row form-group\" [class.no-gutters]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    >{{label}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" class=\"ml-1\"></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group\"\r\n      [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n      [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      <input\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        [imask]=\"imaskDate\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        [value]=\"valuestring\"\r\n        [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n        [ngClass]=\"[componentHeight | toControlHeight]\"\r\n        (blur)=\"onTouch()\"\r\n        (accept)=\"setValueString($event)\"\r\n        [disabled]=\"isdisabled\"\r\n      />\r\n      <div class=\"input-group-append\">\r\n        <button\r\n          class=\"btn btn-secondary\"\r\n          type=\"button\"\r\n          (click)=\"showDateSelector()\"\r\n          [disabled]=\"isdisabled\"\r\n        >\r\n          <i [class]=\"IconSelector\"></i>\r\n        </button>\r\n      </div>\r\n      <div\r\n        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n        class=\"invalid-feedback\"\r\n      >\r\n        {{ GetErrorMessage() | async }}\r\n      </div>\r\n    </div>\r\n    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\r\n    <div\r\n      class=\"popover fade bs-popover-bottom show\"\r\n      role=\"tooltip\"\r\n      *ngIf=\"_showselector\"\r\n      style=\"\r\n        display: block;\r\n        left: unset;\r\n        right: 0px;\r\n        top: unset;\r\n        max-width: 325px;\r\n      \"\r\n    >\r\n      <div\r\n        class=\"arrow\"\r\n        style=\"left: unset\"\r\n        [style.right.rem]=\"componentHeight === ControlHeight.Small ? 1.1 : componentHeight === ControlHeight.Large ? 1.8 : 1.4\"\r\n      ></div>\r\n      <h3 class=\"popover-header\" style=\"display: none\"></h3>\r\n      <div class=\"popover-body\">\r\n        <sac-dateselector\r\n          [initialvalue]=\"value\"\r\n          (selectdate)=\"dateselect($event)\"\r\n          dateselection=\"true\"\r\n          timeselection=\"true\"\r\n        ></sac-dateselector>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                    template: "<div\r\n    class=\"row form-group\"\r\n    [class.no-gutters]=\"disablelabel\">\r\n    <label\r\n        for=\"{{ name }}\"\r\n        class=\"col-12 col-form-label d-flex\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n        [class.required]=\"isrequired\">\r\n        <div\r\n            class=\"text flex-grow-0\"\r\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\r\n            {{ label }}\r\n        </div>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\"\r\n            ><span\r\n                [ngClass]=\"HelptextTooltipIcon\"\r\n                class=\"ml-1\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n            <div\r\n                class=\"input-group\"\r\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n                [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\r\n                <input\r\n                    id=\"{{ name }}\"\r\n                    name=\"{{ name }}\"\r\n                    type=\"text\"\r\n                    class=\"form-control\"\r\n                    [imask]=\"imaskDate\"\r\n                    [attr.placeholder]=\"placeholder\"\r\n                    [value]=\"valuestring\"\r\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n                    [ngClass]=\"[componentHeight | toControlHeight]\"\r\n                    (blur)=\"onTouch()\"\r\n                    (accept)=\"setValueString($event)\"\r\n                    [disabled]=\"isdisabled\" />\r\n                <div class=\"input-group-append\">\r\n                    <button\r\n                        #pickerbutton\r\n                        class=\"btn btn-secondary\"\r\n                        type=\"button\"\r\n                        (click)=\"showDateSelector()\"\r\n                        [disabled]=\"isdisabled\">\r\n                        <i [class]=\"IconSelector\"></i>\r\n                    </button>\r\n                </div>\r\n                <div\r\n                    *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n                    class=\"invalid-feedback\">\r\n                    {{ GetErrorMessage() | async }}\r\n                </div>\r\n            </div>\r\n            <small\r\n                *ngIf=\"helptextmode === 'text' && helptext\"\r\n                class=\"form-text text-muted\">\r\n                {{ helptext }}\r\n            </small>\r\n\r\n            <div\r\n                #picker\r\n                *ngIf=\"_showselector\"\r\n                ><div\r\n                    class=\"popover fade show position-absolute m-0\"\r\n                    role=\"tooltip\"\r\n                    [class.bs-popover-bottom]=\"GetPickerPosition() == TooltipPosition.bottom || GetPickerPosition() == TooltipPosition.bottomend\"\r\n                    [class.bs-popover-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                        class=\"arrow position-absolute m-0\"\r\n                        style=\"left: unset\"\r\n                        [style.top.px]=\"posArrowTop\"\r\n                        [style.left.px]=\"posArrowLeft\">\r\n                    </div>\r\n                    <div class=\"popover-body\">\r\n                        <sac-dateselector\r\n                            [initialvalue]=\"value\"\r\n                            (selectdate)=\"dateselect($event)\"\r\n                            dateselection=\"true\"\r\n                            timeselection=\"true\"></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-plaintext align-self-top ml-2 mr-1 w-auto\"\r\n            [ngClass]=\"[componentHeight | toControlHeight]\">\r\n            <sac-tooltip\r\n                [tooltiptext]=\"helptext\"\r\n                [inlinemode]=\"true\">\r\n                <span\r\n                    [ngClass]=\"HelptextTooltipIcon\"\r\n                    class=\"ml-1\">\r\n                </span>\r\n            </sac-tooltip>\r\n        </div>\r\n    </div>\r\n</div>\r\n",
                     // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                     providers: [
                         {
@@ -1836,7 +1852,8 @@
     SacDateTimeComponent.ctorParameters = function () { return [
         { type: SacFormLayoutDirective, decorators: [{ type: core.Host }, { type: core.Optional }] },
         { type: core.Injector },
-        { type: core.ElementRef }
+        { type: core.ElementRef },
+        { type: core.ChangeDetectorRef }
     ]; };
     /**
@@ -1850,16 +1867,17 @@
          * @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
          */
-        function SacTimeComponent(formLayout, injector, elementRef) {
-            return _super.call(this, formLayout, injector, elementRef) || this;
+        function SacTimeComponent(formLayout, injector, elementRef, cdRef) {
+            return _super.call(this, formLayout, injector, elementRef, cdRef) || this;
         }
         return SacTimeComponent;
     }(sacCommon.SacTimeCommon));
     SacTimeComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-time',
-                    template: "<div class=\"row form-group\" [class.no-gutters]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    >{{label}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" class=\"ml-1\"></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group\"\r\n      [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n      [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      <input\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        [imask]=\"imaskDate\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        [value]=\"valuestring\"\r\n        [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n        [ngClass]=\"[componentHeight | toControlHeight]\"\r\n        (blur)=\"onTouch()\"\r\n        (accept)=\"setValueString($event)\"\r\n        [disabled]=\"isdisabled\"\r\n      />\r\n      <div class=\"input-group-append\">\r\n        <button\r\n          class=\"btn btn-secondary\"\r\n          type=\"button\"\r\n          (click)=\"showTimeSelector()\"\r\n          [disabled]=\"isdisabled\"\r\n        >\r\n          <i [class]=\"IconSelector\"></i>\r\n        </button>\r\n      </div>\r\n      <div\r\n        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n        class=\"invalid-feedback\"\r\n      >\r\n        {{ GetErrorMessage() | async }}\r\n      </div>\r\n    </div>\r\n    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\r\n    <div\r\n      class=\"popover fade bs-popover-bottom show\"\r\n      role=\"tooltip\"\r\n      *ngIf=\"_showselector\"\r\n      style=\"\r\n        display: block;\r\n        left: unset;\r\n        right: 0px;\r\n        top: unset;\r\n        max-width: 325px;\r\n      \"\r\n    >\r\n      <div\r\n        class=\"arrow\"\r\n        style=\"left: unset\"\r\n        [style.right.rem]=\"componentHeight === ControlHeight.Small ? 1.1 : componentHeight === ControlHeight.Large ? 1.8 : 1.4\"\r\n      ></div>\r\n      <h3 class=\"popover-header\" style=\"display: none\"></h3>\r\n      <div class=\"popover-body\">\r\n        <sac-dateselector\r\n          [initialvalue]=\"value\"\r\n          (selectdate)=\"timeselect($event)\"\r\n          timeselection=\"true\"\r\n        ></sac-dateselector>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                    template: "<div\r\n    class=\"row form-group\"\r\n    [class.no-gutters]=\"disablelabel\">\r\n    <label\r\n        for=\"{{ name }}\"\r\n        class=\"col-12 col-form-label d-flex\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n        [class.required]=\"isrequired\">\r\n        <div\r\n            class=\"text flex-grow-0\"\r\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\r\n            {{ label }}\r\n        </div>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\"\r\n            ><span\r\n                [ngClass]=\"HelptextTooltipIcon\"\r\n                class=\"ml-1\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n            <div\r\n                class=\"input-group\"\r\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n                [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\r\n                <input\r\n                    id=\"{{ name }}\"\r\n                    name=\"{{ name }}\"\r\n                    type=\"text\"\r\n                    class=\"form-control\"\r\n                    [imask]=\"imaskDate\"\r\n                    [attr.placeholder]=\"placeholder\"\r\n                    [value]=\"valuestring\"\r\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n                    [ngClass]=\"[componentHeight | toControlHeight]\"\r\n                    (blur)=\"onTouch()\"\r\n                    (accept)=\"setValueString($event)\"\r\n                    [disabled]=\"isdisabled\" />\r\n                <div class=\"input-group-append\">\r\n                    <button\r\n                        #pickerbutton\r\n                        class=\"btn btn-secondary\"\r\n                        type=\"button\"\r\n                        (click)=\"showTimeSelector()\"\r\n                        [disabled]=\"isdisabled\">\r\n                        <i [class]=\"IconSelector\"></i>\r\n                    </button>\r\n                </div>\r\n                <div\r\n                    *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n                    class=\"invalid-feedback\">\r\n                    {{ GetErrorMessage() | async }}\r\n                </div>\r\n            </div>\r\n            <small\r\n                *ngIf=\"helptextmode === 'text' && helptext\"\r\n                class=\"form-text text-muted\">\r\n                {{ helptext }}\r\n            </small>\r\n            <div\r\n                #picker\r\n                *ngIf=\"_showselector\">\r\n                <div\r\n                    class=\"popover fade show position-absolute m-0\"\r\n                    role=\"tooltip\"\r\n                    [class.bs-popover-bottom]=\"GetPickerPosition() == TooltipPosition.bottom || GetPickerPosition() == TooltipPosition.bottomend\"\r\n                    [class.bs-popover-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                        class=\"arrow position-absolute m-0\"\r\n                        style=\"left: unset\"\r\n                        [style.top.px]=\"posArrowTop\"\r\n                        [style.left.px]=\"posArrowLeft\">\r\n                    </div>\r\n\r\n                    <div class=\"popover-body\">\r\n                        <sac-dateselector\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-plaintext align-self-top ml-2 mr-1 w-auto\"\r\n            [ngClass]=\"[componentHeight | toControlHeight]\">\r\n            <sac-tooltip\r\n                [tooltiptext]=\"helptext\"\r\n                [inlinemode]=\"true\">\r\n                <span\r\n                    [ngClass]=\"HelptextTooltipIcon\"\r\n                    class=\"ml-1\">\r\n                </span>\r\n            </sac-tooltip>\r\n        </div>\r\n    </div>\r\n</div>\r\n",
                     // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                     providers: [
                         {
@@ -1878,7 +1896,8 @@
     SacTimeComponent.ctorParameters = function () { return [
         { type: SacFormLayoutDirective, decorators: [{ type: core.Host }, { type: core.Optional }] },
         { type: core.Injector },
-        { type: core.ElementRef }
+        { type: core.ElementRef },
+        { type: core.ChangeDetectorRef }
     ]; };
     var SACBootstrap4DateTimeModule = /** @class */ (function () {
@@ -2013,7 +2032,7 @@
     SacGridColumnComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-gridcolumn',
-                    template: "<th\r\n  scope=\"col\"\r\n  *ngIf=\"IsHeader()\"\r\n  [style.width]=\"width\"\r\n  (click)=\"SortByColumn()\"\r\n>\r\n  <span>{{header}}</span>\r\n  <span\r\n    class=\"pl-2\"\r\n    [class]=\"IconSortUp\"\r\n    *ngIf=\"IsSortedColumn() && GetSortDirection() ==='asc'\"\r\n  ></span>\r\n  <span\r\n    class=\"pl-2\"\r\n    [class]=\"IconSortDown\"\r\n    *ngIf=\"IsSortedColumn() && GetSortDirection() ==='desc'\"\r\n  ></span>\r\n</th>\r\n<td\r\n  scope=\"col\"\r\n  *ngIf=\"IsBody()\"\r\n  [style.width]=\"width\"\r\n  [class.ellipsis]=\"IsEllipsis()\"\r\n  (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=\"pl-2\"\r\n        [class]=\"IconSortUp\"\r\n        *ngIf=\"IsSortedColumn() && GetSortDirection() === 'asc'\"></span>\r\n    <span\r\n        class=\"pl-2\"\r\n        [class]=\"IconSortDown\"\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",
                     providers: [
                         {
                             provide: sacCommon.SacGridColumnBaseCommon,
@@ -2173,7 +2192,7 @@
     SacInputComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-input',
-                    template: "<div class=\"row form-group\" [class.no-gutters]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    >{{label}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" class=\"ml-1\"></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <input\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      type=\"text\"\r\n      class=\"form-control\"\r\n      [value]=\"value\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      [readonly]=\"readonly\"\r\n      (blur)=\"onTouch()\"\r\n      (input)=\"setValue($event.target.value)\"\r\n      (keypress)=\"onKeyPress($event)\"\r\n      [attr.maxlength]=\"maxlength\"\r\n      [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n      [ngClass]=\"[componentHeight | toControlHeight]\"\r\n      [disabled]=\"isdisabled\"\r\n    />\r\n    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                    template: "<div\r\n    class=\"row form-group\"\r\n    [class.no-gutters]=\"disablelabel\">\r\n    <label\r\n        for=\"{{ name }}\"\r\n        class=\"col-12 col-form-label d-flex\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n        [class.required]=\"isrequired\">\r\n        <div\r\n            class=\"text flex-grow-0\"\r\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\r\n            {{ label }}\r\n        </div>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [ngClass]=\"HelptextTooltipIcon\"\r\n                class=\"ml-1\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n            <input\r\n                id=\"{{ name }}\"\r\n                name=\"{{ name }}\"\r\n                type=\"text\"\r\n                class=\"form-control\"\r\n                [value]=\"value\"\r\n                [attr.placeholder]=\"placeholder\"\r\n                [readonly]=\"readonly\"\r\n                (blur)=\"onTouch()\"\r\n                (input)=\"setValue($event.target.value)\"\r\n                (keypress)=\"onKeyPress($event)\"\r\n                [attr.maxlength]=\"maxlength\"\r\n                [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n                [ngClass]=\"[componentHeight | toControlHeight]\"\r\n                [disabled]=\"isdisabled\" />\r\n\r\n            <small\r\n                *ngIf=\"helptextmode === 'text' && helptext\"\r\n                class=\"form-text text-muted\">\r\n                {{ helptext }}\r\n            </small>\r\n\r\n            <div\r\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n                class=\"invalid-feedback\">\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-plaintext align-self-top ml-2 mr-1 w-auto\"\r\n            [ngClass]=\"[componentHeight | toControlHeight]\">\r\n            <sac-tooltip\r\n                [tooltiptext]=\"helptext\"\r\n                [inlinemode]=\"true\">\r\n                <span\r\n                    [ngClass]=\"HelptextTooltipIcon\"\r\n                    class=\"ml-1\">\r\n                </span>\r\n            </sac-tooltip>\r\n        </div>\r\n    </div>\r\n</div>\r\n",
                     // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                     providers: [
                         { provide: forms.NG_VALUE_ACCESSOR, multi: true, useExisting: SacInputComponent },
@@ -2209,7 +2228,7 @@
     SacInputAreaComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-inputarea',
-                    template: "<div class=\"form-group row\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    >{{label}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" class=\"ml-1\"></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <textarea\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      type=\"\"\r\n      class=\"form-control\"\r\n      [value]=\"value\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      (blur)=\"onTouch()\"\r\n      (input)=\"setValue($event.target.value)\"\r\n      (keypress)=\"onKeyPress($event)\"\r\n      [attr.rows]=\"rows\"\r\n      [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n      [ngClass]=\"[componentHeight | toControlHeight]\"\r\n      [disabled]=\"isdisabled\"\r\n      [attr.maxlength]=\"maxlength\"\r\n      [readonly]=\"readonly\"\r\n    ></textarea>\r\n    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                    template: "<div class=\"form-group row\">\r\n    <label\r\n        for=\"{{ name }}\"\r\n        class=\"col-12 col-form-label d-flex\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n        [class.required]=\"isrequired\">\r\n        <div\r\n            class=\"text flex-grow-0\"\r\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\r\n            {{ label }}\r\n        </div>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [ngClass]=\"HelptextTooltipIcon\"\r\n                class=\"ml-1\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n            <textarea\r\n                id=\"{{ name }}\"\r\n                name=\"{{ name }}\"\r\n                type=\"\"\r\n                class=\"form-control\"\r\n                [value]=\"value\"\r\n                [attr.placeholder]=\"placeholder\"\r\n                (blur)=\"onTouch()\"\r\n                (input)=\"setValue($event.target.value)\"\r\n                (keypress)=\"onKeyPress($event)\"\r\n                [attr.rows]=\"rows\"\r\n                [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n                [ngClass]=\"[componentHeight | toControlHeight]\"\r\n                [disabled]=\"isdisabled\"\r\n                [attr.maxlength]=\"maxlength\"\r\n                [readonly]=\"readonly\"></textarea>\r\n            <small\r\n                *ngIf=\"helptextmode === 'text' && helptext\"\r\n                class=\"form-text text-muted\">\r\n                {{ helptext }}\r\n            </small>\r\n            <div\r\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n                class=\"invalid-feedback\">\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-plaintext align-self-top ml-2 mr-1 w-auto\"\r\n            [ngClass]=\"[componentHeight | toControlHeight]\">\r\n            <sac-tooltip\r\n                [tooltiptext]=\"helptext\"\r\n                [inlinemode]=\"true\">\r\n                <span\r\n                    [ngClass]=\"HelptextTooltipIcon\"\r\n                    class=\"ml-1\">\r\n                </span>\r\n            </sac-tooltip>\r\n        </div>\r\n    </div>\r\n</div>\r\n",
                     // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                     providers: [
                         {
@@ -2249,7 +2268,7 @@
     SacInputCurrencyComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-inputcurrency',
-                    template: "<div class=\"row form-group\" [class.no-gutters]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    >{{label}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" class=\"ml-1\"></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group\"\r\n      [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n      [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      <input\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        [value]=\"value\"\r\n        (blur)=\"onTouch()\"\r\n        (input)=\"setValue($event.target.value)\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        (keypress)=\"onKeyPress($event)\"\r\n        [disabled]=\"isdisabled\"\r\n        [readonly]=\"readonly\"\r\n        [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n        [ngClass]=\"[componentHeight | toControlHeight]\"\r\n      />\r\n      <div class=\"input-group-append\">\r\n        <span class=\"input-group-text\">{{currency}}</span>\r\n      </div>\r\n\r\n      <div\r\n        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n        class=\"invalid-feedback\"\r\n      >\r\n        {{ GetErrorMessage() | async }}\r\n      </div>\r\n    </div>\r\n    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\r\n  </div>\r\n</div>\r\n",
+                    template: "<div\r\n    class=\"row form-group\"\r\n    [class.no-gutters]=\"disablelabel\">\r\n    <label\r\n        for=\"{{ name }}\"\r\n        class=\"col-12 col-form-label d-flex\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n        [class.required]=\"isrequired\">\r\n        <div\r\n            class=\"text flex-grow-0\"\r\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\r\n            {{ label }}\r\n        </div>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [ngClass]=\"HelptextTooltipIcon\"\r\n                class=\"ml-1\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n            <div\r\n                class=\"input-group\"\r\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n                [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\r\n                <input\r\n                    id=\"{{ name }}\"\r\n                    name=\"{{ name }}\"\r\n                    type=\"text\"\r\n                    class=\"form-control\"\r\n                    [value]=\"value\"\r\n                    (blur)=\"onTouch()\"\r\n                    (input)=\"setValue($event.target.value)\"\r\n                    [attr.placeholder]=\"placeholder\"\r\n                    (keypress)=\"onKeyPress($event)\"\r\n                    [disabled]=\"isdisabled\"\r\n                    [readonly]=\"readonly\"\r\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n                    [ngClass]=\"[componentHeight | toControlHeight]\" />\r\n                <div class=\"input-group-append\">\r\n                    <span class=\"input-group-text\">{{ currency }}</span>\r\n                </div>\r\n\r\n                <div\r\n                    *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n                    class=\"invalid-feedback\">\r\n                    {{ GetErrorMessage() | async }}\r\n                </div>\r\n            </div>\r\n            <small\r\n                *ngIf=\"helptextmode === 'text' && helptext\"\r\n                class=\"form-text text-muted\">\r\n                {{ helptext }}\r\n            </small>\r\n        </div>\r\n\r\n        <div\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n            class=\"form-control-plaintext align-self-top ml-2 mr-1 w-auto\"\r\n            [ngClass]=\"[componentHeight | toControlHeight]\">\r\n            <sac-tooltip\r\n                [tooltiptext]=\"helptext\"\r\n                [inlinemode]=\"true\">\r\n                <span\r\n                    [ngClass]=\"HelptextTooltipIcon\"\r\n                    class=\"ml-1\">\r\n                </span>\r\n            </sac-tooltip>\r\n        </div>\r\n    </div>\r\n</div>\r\n",
                     // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                     providers: [
                         {
@@ -2289,7 +2308,7 @@
     SacInputDecimalComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-inputdecimal',
-                    template: "<div class=\"row form-group\" [class.no-gutters]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    >{{label}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" class=\"ml-1\"></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <input\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      type=\"text\"\r\n      class=\"form-control\"\r\n      [value]=\"value\"\r\n      (blur)=\"onTouch()\"\r\n      (input)=\"setValue($event.target.value)\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      [readonly]=\"readonly\"\r\n      (keypress)=\"onKeyPress($event)\"\r\n      [disabled]=\"isdisabled\"\r\n      [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n      [ngClass]=\"[componentHeight | toControlHeight]\"\r\n    />\r\n    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                    template: "<div\r\n    class=\"row form-group\"\r\n    [class.no-gutters]=\"disablelabel\">\r\n    <label\r\n        for=\"{{ name }}\"\r\n        class=\"col-12 col-form-label d-flex\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n        [class.required]=\"isrequired\">\r\n        <div\r\n            class=\"text flex-grow-0\"\r\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\r\n            {{ label }}\r\n        </div>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [ngClass]=\"HelptextTooltipIcon\"\r\n                class=\"ml-1\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n            <input\r\n                id=\"{{ name }}\"\r\n                name=\"{{ name }}\"\r\n                type=\"text\"\r\n                class=\"form-control\"\r\n                [value]=\"value\"\r\n                (blur)=\"onTouch()\"\r\n                (input)=\"setValue($event.target.value)\"\r\n                [attr.placeholder]=\"placeholder\"\r\n                [readonly]=\"readonly\"\r\n                (keypress)=\"onKeyPress($event)\"\r\n                [disabled]=\"isdisabled\"\r\n                [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n                [ngClass]=\"[componentHeight | toControlHeight]\" />\r\n            <small\r\n                *ngIf=\"helptextmode === 'text' && helptext\"\r\n                class=\"form-text text-muted\">\r\n                {{ helptext }}\r\n            </small>\r\n            <div\r\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n                class=\"invalid-feedback\">\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-plaintext align-self-top ml-2 mr-1 w-auto\"\r\n            [ngClass]=\"[componentHeight | toControlHeight]\">\r\n            <sac-tooltip\r\n                [tooltiptext]=\"helptext\"\r\n                [inlinemode]=\"true\">\r\n                <span\r\n                    [ngClass]=\"HelptextTooltipIcon\"\r\n                    class=\"ml-1\">\r\n                </span>\r\n            </sac-tooltip>\r\n        </div>\r\n    </div>\r\n</div>\r\n",
                     // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                     providers: [
                         {
@@ -2329,7 +2348,7 @@
     SacInputEmailComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-inputemail',
-                    template: "<div class=\"form-group row\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    >{{label}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" class=\"ml-1\"></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group\"\r\n      [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n      [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      <div class=\"input-group-prepend\">\r\n        <span class=\"input-group-text\">@</span>\r\n      </div>\r\n      <input\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        [value]=\"value\"\r\n        (blur)=\"onTouch()\"\r\n        (input)=\"setValue($event.target.value)\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        autocomplete=\"email\"\r\n        [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n        [ngClass]=\"[componentHeight | toControlHeight]\"\r\n        [disabled]=\"isdisabled\"\r\n        [readonly]=\"readonly\"\r\n      />\r\n      <div\r\n        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n        class=\"invalid-feedback\"\r\n      >\r\n        {{ GetErrorMessage() | async }}\r\n      </div>\r\n    </div>\r\n    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\r\n  </div>\r\n</div>\r\n",
+                    template: "<div class=\"form-group row\">\r\n    <label\r\n        for=\"{{ name }}\"\r\n        class=\"col-12 col-form-label d-flex\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n        [class.required]=\"isrequired\">\r\n        <div\r\n            class=\"text flex-grow-0\"\r\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\r\n            {{ label }}\r\n        </div>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [ngClass]=\"HelptextTooltipIcon\"\r\n                class=\"ml-1\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n            <div\r\n                class=\"input-group\"\r\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n                [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\r\n                <div class=\"input-group-prepend\">\r\n                    <span class=\"input-group-text\">@</span>\r\n                </div>\r\n                <input\r\n                    id=\"{{ name }}\"\r\n                    name=\"{{ name }}\"\r\n                    type=\"text\"\r\n                    class=\"form-control\"\r\n                    [value]=\"value\"\r\n                    (blur)=\"onTouch()\"\r\n                    (input)=\"setValue($event.target.value)\"\r\n                    [attr.placeholder]=\"placeholder\"\r\n                    [attr.maxlength]=\"maxlength\"\r\n                    autocomplete=\"email\"\r\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n                    [ngClass]=\"[componentHeight | toControlHeight]\"\r\n                    [disabled]=\"isdisabled\"\r\n                    [readonly]=\"readonly\" />\r\n                <div\r\n                    *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n                    class=\"invalid-feedback\">\r\n                    {{ GetErrorMessage() | async }}\r\n                </div>\r\n            </div>\r\n            <small\r\n                *ngIf=\"helptextmode === 'text' && helptext\"\r\n                class=\"form-text text-muted\">\r\n                {{ helptext }}\r\n            </small>\r\n        </div>\r\n\r\n        <div\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n            class=\"form-control-plaintext align-self-top ml-2 mr-1 w-auto\"\r\n            [ngClass]=\"[componentHeight | toControlHeight]\">\r\n            <sac-tooltip\r\n                [tooltiptext]=\"helptext\"\r\n                [inlinemode]=\"true\">\r\n                <span\r\n                    [ngClass]=\"HelptextTooltipIcon\"\r\n                    class=\"ml-1\">\r\n                </span>\r\n            </sac-tooltip>\r\n        </div>\r\n    </div>\r\n</div>\r\n",
                     // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                     providers: [
                         {
@@ -2369,7 +2388,7 @@
     SacInputIntegerComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-inputinteger',
-                    template: "<div class=\"form-group row\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    >{{label}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" class=\"ml-1\"></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <input\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      type=\"text\"\r\n      class=\"form-control\"\r\n      [value]=\"value\"\r\n      (blur)=\"onTouch()\"\r\n      (input)=\"setValue($event.target.value)\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      (keypress)=\"onKeyPress($event)\"\r\n      [disabled]=\"isdisabled\"\r\n      [readonly]=\"readonly\"\r\n      [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n      [ngClass]=\"[componentHeight | toControlHeight]\"\r\n    />\r\n    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                    template: "<div class=\"form-group row\">\r\n    <label\r\n        for=\"{{ name }}\"\r\n        class=\"col-12 col-form-label d-flex\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n        [class.required]=\"isrequired\">\r\n        <div\r\n            class=\"text flex-grow-0\"\r\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\r\n            {{ label }}\r\n        </div>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [ngClass]=\"HelptextTooltipIcon\"\r\n                class=\"ml-1\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n            <input\r\n                id=\"{{ name }}\"\r\n                name=\"{{ name }}\"\r\n                type=\"text\"\r\n                class=\"form-control\"\r\n                [value]=\"value\"\r\n                (blur)=\"onTouch()\"\r\n                (input)=\"setValue($event.target.value)\"\r\n                [attr.placeholder]=\"placeholder\"\r\n                (keypress)=\"onKeyPress($event)\"\r\n                [disabled]=\"isdisabled\"\r\n                [readonly]=\"readonly\"\r\n                [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n                [ngClass]=\"[componentHeight | toControlHeight]\" />\r\n            <small\r\n                *ngIf=\"helptextmode === 'text' && helptext\"\r\n                class=\"form-text text-muted\">\r\n                {{ helptext }}\r\n            </small>\r\n            <div\r\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n                class=\"invalid-feedback\">\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-plaintext align-self-top ml-2 mr-1 w-auto\"\r\n            [ngClass]=\"[componentHeight | toControlHeight]\">\r\n            <sac-tooltip\r\n                [tooltiptext]=\"helptext\"\r\n                [inlinemode]=\"true\">\r\n                <span\r\n                    [ngClass]=\"HelptextTooltipIcon\"\r\n                    class=\"ml-1\">\r\n                </span>\r\n            </sac-tooltip>\r\n        </div>\r\n    </div>\r\n</div>\r\n",
                     // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                     providers: [
                         {
@@ -2409,7 +2428,7 @@
     SacInputPasswordComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-inputpassword',
-                    template: "<div class=\"form-group row\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    >{{label}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" class=\"ml-1\"></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <input\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      type=\"password\"\r\n      class=\"form-control\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      [value]=\"value\"\r\n      (blur)=\"onTouch()\"\r\n      (input)=\"setValue($event.target.value)\"\r\n      [attr.maxlength]=\"maxlength\"\r\n      autocomplete=\"new-password\"\r\n      [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n      [ngClass]=\"[componentHeight | toControlHeight]\"\r\n      [disabled]=\"isdisabled\"\r\n      [readonly]=\"readonly\"\r\n    />\r\n    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                    template: "<div class=\"form-group row\">\r\n    <label\r\n        for=\"{{ name }}\"\r\n        class=\"col-12 col-form-label d-flex\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n        [class.required]=\"isrequired\">\r\n        <div\r\n            class=\"text flex-grow-0\"\r\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\r\n            {{ label }}\r\n        </div>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [ngClass]=\"HelptextTooltipIcon\"\r\n                class=\"ml-1\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n            <input\r\n                id=\"{{ name }}\"\r\n                name=\"{{ name }}\"\r\n                type=\"password\"\r\n                class=\"form-control\"\r\n                [attr.placeholder]=\"placeholder\"\r\n                [value]=\"value\"\r\n                (blur)=\"onTouch()\"\r\n                (input)=\"setValue($event.target.value)\"\r\n                [attr.maxlength]=\"maxlength\"\r\n                autocomplete=\"new-password\"\r\n                [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n                [ngClass]=\"[componentHeight | toControlHeight]\"\r\n                [disabled]=\"isdisabled\"\r\n                [readonly]=\"readonly\" />\r\n            <small\r\n                *ngIf=\"helptextmode === 'text' && helptext\"\r\n                class=\"form-text text-muted\">\r\n                {{ helptext }}\r\n            </small>\r\n            <div\r\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n                class=\"invalid-feedback\">\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-plaintext align-self-top ml-2 mr-1 w-auto\"\r\n            [ngClass]=\"[componentHeight | toControlHeight]\">\r\n            <sac-tooltip\r\n                [tooltiptext]=\"helptext\"\r\n                [inlinemode]=\"true\">\r\n                <span\r\n                    [ngClass]=\"HelptextTooltipIcon\"\r\n                    class=\"ml-1\">\r\n                </span>\r\n            </sac-tooltip>\r\n        </div>\r\n    </div>\r\n</div>\r\n",
                     // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                     providers: [
                         {
@@ -2449,7 +2468,7 @@
     SacInputSearchComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-inputsearch',
-                    template: "<div class=\"row form-group\" [class.no-gutters]=\"disablelabel\">\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}_label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" class=\"ml-1\"></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group\"\r\n      [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n    >\r\n      <input\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        [value]=\"value\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        (blur)=\"onTouch()\"\r\n        (input)=\"setValue($event.target.value)\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n        [ngClass]=\"[componentHeight | toControlHeight]\"\r\n        [disabled]=\"isdisabled\"\r\n        [readonly]=\"readonly\"\r\n      />\r\n      <div class=\"input-group-append\">\r\n        <button\r\n          type=\"submit\"\r\n          class=\"btn btn-secondary\"\r\n          id=\"{{name}}_search\"\r\n          (click)=\"searchClick()\"\r\n        >\r\n          <i\r\n            *ngIf=\"buttonmode === 'icon' || buttonmode === 'mixed'\"\r\n            [class]=\"iconname\"\r\n            [class.mr-2]=\"buttonmode === 'mixed'\"\r\n          ></i>\r\n          <ng-container *ngIf=\"buttonmode === 'text' || buttonmode === 'mixed'\"\r\n            >{{buttontext}}</ng-container\r\n          >\r\n        </button>\r\n      </div>\r\n    </div>\r\n    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\r\n  </div>\r\n</div>\r\n",
+                    template: "<div\r\n    class=\"row form-group\"\r\n    [class.no-gutters]=\"disablelabel\">\r\n    <label\r\n        id=\"{{ name }}_label\"\r\n        for=\"{{ name }}\"\r\n        class=\"col-12 col-form-label d-flex\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n        [class.required]=\"isrequired\">\r\n        <div\r\n            class=\"flex-grow-0\"\r\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\r\n            {{ label }}\r\n        </div>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [ngClass]=\"HelptextTooltipIcon\"\r\n                class=\"ml-1\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\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                    [value]=\"value\"\r\n                    [attr.placeholder]=\"placeholder\"\r\n                    (blur)=\"onTouch()\"\r\n                    (input)=\"setValue($event.target.value)\"\r\n                    [attr.maxlength]=\"maxlength\"\r\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n                    [ngClass]=\"[componentHeight | toControlHeight]\"\r\n                    [disabled]=\"isdisabled\"\r\n                    [readonly]=\"readonly\" />\r\n                <div class=\"input-group-append\">\r\n                    <button\r\n                        type=\"button\"\r\n                        class=\"btn btn-secondary\"\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                            [class.mr-2]=\"buttonmode === 'mixed'\"></i>\r\n                        <ng-container *ngIf=\"buttonmode === 'text' || buttonmode === 'mixed'\">{{ buttontext }}</ng-container>\r\n                    </button>\r\n                </div>\r\n            </div>\r\n            <small\r\n                *ngIf=\"helptextmode === 'text' && helptext\"\r\n                class=\"form-text text-muted\">\r\n                {{ helptext }}\r\n            </small>\r\n        </div>\r\n\r\n        <div\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n            class=\"form-control-plaintext align-self-top ml-2 mr-1 w-auto\"\r\n            [ngClass]=\"[componentHeight | toControlHeight]\">\r\n            <sac-tooltip\r\n                [tooltiptext]=\"helptext\"\r\n                [inlinemode]=\"true\">\r\n                <span\r\n                    [ngClass]=\"HelptextTooltipIcon\"\r\n                    class=\"ml-1\">\r\n                </span>\r\n            </sac-tooltip>\r\n        </div>\r\n    </div>\r\n</div>\r\n",
                     // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                     providers: [
                         {
@@ -2527,7 +2546,7 @@
     SacDropdownComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-dropdown',
-                    template: "<div class=\"row form-group\" [class.no-gutters]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    >{{label}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" class=\"ml-1\"></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <select\r\n      #dropdownitem\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      class=\"form-control\"\r\n      [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n      [ngClass]=\"[componentHeight | toControlHeight]\"\r\n      (blur)=\"onTouch()\"\r\n      (change)=\"setValue(dropdownitem.value)\"\r\n      [disabled]=\"isdisabled\"\r\n    >\r\n      <option *ngIf=\"emptylabel !== ''\" [ngValue]=\"emptyvalue\">\r\n        {{emptylabel}}\r\n      </option>\r\n\r\n      <ng-content></ng-content>\r\n\r\n      <ng-container *ngIf=\"groupitems === ''\">\r\n        <option\r\n          *ngFor=\"let item of options\"\r\n          [ngValue]=\"optionvalue ? item[optionvalue] : item\"\r\n          [disabled]=\"optionenabled !== '' && item[optionenabled] === false\"\r\n        >\r\n          <ng-template\r\n            *ngTemplateOutlet=\"optionlabeltemplate || defaultItemLabelTemplate;context:{ label: item[optionlabel], item: item }\"\r\n          >\r\n          </ng-template>\r\n        </option>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"groupitems !== ''\">\r\n        <optgroup\r\n          *ngFor=\"let group of options\"\r\n          [attr.label]=\"group[grouplabel]\"\r\n        >\r\n          <option\r\n            *ngFor=\"let item of group[groupitems]\"\r\n            [ngValue]=\"optionvalue ? item[optionvalue] : item\"\r\n            [disabled]=\"optionenabled !== '' && item[optionenabled] === false\"\r\n          >\r\n            <ng-template\r\n              *ngTemplateOutlet=\"optionlabeltemplate || defaultItemLabelTemplate;context:{ label: item[optionlabel], item: item }\"\r\n            >\r\n            </ng-template>\r\n          </option>\r\n        </optgroup>\r\n      </ng-container>\r\n    </select>\r\n    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\r\n    <div\r\n      class=\"invalid-feedback\"\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #defaultItemLabelTemplate let-label=\"label\">\r\n  {{label}}\r\n</ng-template>\r\n",
+                    template: "<div\r\n    class=\"row form-group\"\r\n    [class.no-gutters]=\"disablelabel\">\r\n    <label\r\n        for=\"{{ name }}\"\r\n        class=\"col-12 col-form-label d-flex\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n        [class.required]=\"isrequired\"\r\n        ><div\r\n            class=\"text flex-grow-0\"\r\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\r\n            {{ label }}\r\n        </div>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [ngClass]=\"HelptextTooltipIcon\"\r\n                class=\"ml-1\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n            <select\r\n                #dropdownitem\r\n                id=\"{{ name }}\"\r\n                name=\"{{ name }}\"\r\n                class=\"form-control\"\r\n                [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n                [ngClass]=\"[componentHeight | toControlHeight]\"\r\n                (blur)=\"onTouch()\"\r\n                (change)=\"setValue(dropdownitem.value)\"\r\n                [disabled]=\"isdisabled\">\r\n                <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            <small\r\n                *ngIf=\"helptextmode === 'text' && helptext\"\r\n                class=\"form-text text-muted\">\r\n                {{ helptext }}\r\n            </small>\r\n            <div\r\n                class=\"invalid-feedback\"\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-plaintext align-self-top ml-2 mr-1 w-auto\"\r\n            [ngClass]=\"[componentHeight | toControlHeight]\">\r\n            <sac-tooltip\r\n                [tooltiptext]=\"helptext\"\r\n                [inlinemode]=\"true\">\r\n                <span\r\n                    [ngClass]=\"HelptextTooltipIcon\"\r\n                    class=\"ml-1\">\r\n                </span>\r\n            </sac-tooltip>\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",
                     // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                     providers: [
                         {
@@ -2613,7 +2632,7 @@
     SacListboxComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-listbox',
-                    template: "<div class=\"row form-group\" [class.no-gutters]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    >{{label}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" class=\"ml-1\"></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <select\r\n      multiple\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      class=\"form-control\"\r\n      [size]=\"rowsize\"\r\n      [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n      [ngClass]=\"[componentHeight | toControlHeight]\"\r\n      (blur)=\"onTouch()\"\r\n      (change)=\"getSelectedItems($event.target)\"\r\n      [disabled]=\"isdisabled\"\r\n    >\r\n      <ng-content></ng-content>\r\n      <ng-container *ngIf=\"groupitems === ''\">\r\n        <option\r\n          *ngFor=\"let option of options\"\r\n          [value]=\"option[optionvalue]\"\r\n          [disabled]=\"optionenabled !== '' && option[optionenabled] === false\"\r\n        >\r\n          {{option[optionlabel]}}\r\n        </option>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"groupitems !== ''\">\r\n        <optgroup\r\n          *ngFor=\"let option of options\"\r\n          [attr.label]=\"option[grouplabel]\"\r\n        >\r\n          <option\r\n            *ngFor=\"let item of option[groupitems]\"\r\n            [value]=\"item[optionvalue]\"\r\n            [disabled]=\"optionenabled !== '' && item[optionenabled] === false\"\r\n          >\r\n            {{item[optionlabel]}}\r\n          </option>\r\n        </optgroup>\r\n      </ng-container>\r\n    </select>\r\n    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\r\n    <div\r\n      class=\"invalid-feedback\"\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                    template: "<div\r\n    class=\"row form-group\"\r\n    [class.no-gutters]=\"disablelabel\">\r\n    <label\r\n        for=\"{{ name }}\"\r\n        class=\"col-12 col-form-label d-flex\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n        [class.required]=\"isrequired\"\r\n        ><div\r\n            class=\"text flex-grow-0\"\r\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\r\n            {{ label }}\r\n        </div>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [ngClass]=\"HelptextTooltipIcon\"\r\n                class=\"ml-1\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n            <select\r\n                multiple\r\n                id=\"{{ name }}\"\r\n                name=\"{{ name }}\"\r\n                class=\"form-control\"\r\n                [size]=\"rowsize\"\r\n                [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n                [ngClass]=\"[componentHeight | toControlHeight]\"\r\n                (blur)=\"onTouch()\"\r\n                (change)=\"getSelectedItems($event.target)\"\r\n                [disabled]=\"isdisabled\">\r\n                <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                        {{ option[optionlabel] }}\r\n                    </option>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"groupitems !== ''\">\r\n                    <optgroup\r\n                        *ngFor=\"let option of options\"\r\n                        [attr.label]=\"option[grouplabel]\">\r\n                        <option\r\n                            *ngFor=\"let item of option[groupitems]\"\r\n                            [value]=\"item[optionvalue]\"\r\n                            [disabled]=\"optionenabled !== '' && item[optionenabled] === false\">\r\n                            {{ item[optionlabel] }}\r\n                        </option>\r\n                    </optgroup>\r\n                </ng-container>\r\n            </select>\r\n            <small\r\n                *ngIf=\"helptextmode === 'text' && helptext\"\r\n                class=\"form-text text-muted\">\r\n                {{ helptext }}\r\n            </small>\r\n            <div\r\n                class=\"invalid-feedback\"\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-plaintext align-self-top ml-2 mr-1 w-auto\"\r\n            [ngClass]=\"[componentHeight | toControlHeight]\">\r\n            <sac-tooltip\r\n                [tooltiptext]=\"helptext\"\r\n                [inlinemode]=\"true\">\r\n                <span\r\n                    [ngClass]=\"HelptextTooltipIcon\"\r\n                    class=\"ml-1\">\r\n                </span>\r\n            </sac-tooltip>\r\n        </div>\r\n    </div>\r\n</div>\r\n",
                     // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                     providers: [
                         {
@@ -2703,7 +2722,7 @@
     SacMultilanguageInputComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-multilanguageinput',
-                    template: "<div class=\"row form-group\" [class.no-gutters]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    >{{label}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" class=\"ml-1\"></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group\"\r\n      [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n      [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      <input\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        [value]=\"LanguageValue\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        (blur)=\"onTouch()\"\r\n        (input)=\"SetLanguageValue($event.target.value)\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n        [ngClass]=\"[componentHeight | toControlHeight]\"\r\n        [disabled]=\"isdisabled\"\r\n      />\r\n      <div\r\n        placement=\"bottom-right\"\r\n        class=\"input-group-append\"\r\n        sac-multilanguagemenu\r\n        [buttontemplate]=\"menuButton\"\r\n        #contextmenu\r\n      >\r\n        <ng-template #menuButton>\r\n          <button\r\n            sacMultilanguageMenuAnchor\r\n            [id]=\"name + '_dropdownitem'\"\r\n            type=\"button\"\r\n            class=\"btn dropdown-toggle\"\r\n            (click)=\"contextmenu.toggle()\"\r\n            [ngClass]=\"[IsAnyEmpty() ? 'btn-warning' : 'btn-secondary']\"\r\n          >\r\n            <img\r\n              src=\"{{SelectedIcon}}\"\r\n              class=\"align-baseline mr-1 ml-1\"\r\n              *ngIf=\"SelectedIconType === IconType.Image\"\r\n            />\r\n            <span\r\n              [ngClass]=\"SelectedIcon\"\r\n              class=\"align-baseline mr-1 ml-1\"\r\n              *ngIf=\"SelectedIconType === IconType.CssSprite\"\r\n            ></span>\r\n          </button>\r\n        </ng-template>\r\n        <ng-container *ngFor=\"let sprache of Languages\">\r\n          <sac-multilanguagemenubutton\r\n            *ngIf=\"sprache.IconType === IconType.Image\"\r\n            text=\"{{sprache.Text}}\"\r\n            image=\"{{sprache.Icon}}\"\r\n            [cssclass]=\"IsEmpty(sprache) ? 'text-danger border-left border-danger': ''\"\r\n            (clicked)=\"SelectLanguage(sprache)\"\r\n          ></sac-multilanguagemenubutton>\r\n          <sac-multilanguagemenubutton\r\n            *ngIf=\"sprache.IconType === IconType.CssSprite\"\r\n            text=\"{{sprache.Text}}\"\r\n            icon=\"{{sprache.Icon}}\"\r\n            [cssclass]=\"IsEmpty(sprache) ? 'text-danger border-left border-danger': ''\"\r\n            (clicked)=\"SelectLanguage(sprache)\"\r\n          ></sac-multilanguagemenubutton>\r\n        </ng-container>\r\n      </div>\r\n\r\n      <div\r\n        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n        class=\"invalid-feedback\"\r\n      >\r\n        {{ GetErrorMessage() | async }}\r\n      </div>\r\n    </div>\r\n    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\r\n  </div>\r\n</div>\r\n<div class=\"row\">\r\n  <div class=\"col text-right\"></div>\r\n</div>\r\n",
+                    template: "<div\r\n    class=\"row form-group\"\r\n    [class.no-gutters]=\"disablelabel\">\r\n    <label\r\n        for=\"{{ name }}\"\r\n        class=\"col-12 col-form-label d-flex\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n        [class.required]=\"isrequired\">\r\n        <div\r\n            class=\"text flex-grow-0\"\r\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\r\n            {{ label }}\r\n        </div>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [ngClass]=\"HelptextTooltipIcon\"\r\n                class=\"ml-1\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n            <div\r\n                class=\"input-group\"\r\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n                [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\r\n                <input\r\n                    id=\"{{ name }}\"\r\n                    name=\"{{ name }}\"\r\n                    type=\"text\"\r\n                    class=\"form-control\"\r\n                    [value]=\"LanguageValue\"\r\n                    [attr.placeholder]=\"placeholder\"\r\n                    (blur)=\"onTouch()\"\r\n                    (input)=\"SetLanguageValue($event.target.value)\"\r\n                    [attr.maxlength]=\"maxlength\"\r\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n                    [ngClass]=\"[componentHeight | toControlHeight]\"\r\n                    [disabled]=\"isdisabled\" />\r\n                <div\r\n                    placement=\"bottom-right\"\r\n                    class=\"input-group-append\"\r\n                    sac-multilanguagemenu\r\n                    [buttontemplate]=\"menuButton\"\r\n                    #contextmenu>\r\n                    <ng-template #menuButton>\r\n                        <button\r\n                            sacMultilanguageMenuAnchor\r\n                            [id]=\"name + '_dropdownitem'\"\r\n                            type=\"button\"\r\n                            class=\"btn dropdown-toggle\"\r\n                            (click)=\"contextmenu.toggle()\"\r\n                            [ngClass]=\"[IsAnyEmpty() ? 'btn-warning' : 'btn-secondary']\">\r\n                            <img\r\n                                src=\"{{ SelectedIcon }}\"\r\n                                class=\"align-baseline mr-1 ml-1\"\r\n                                *ngIf=\"SelectedIconType === IconType.Image\" />\r\n                            <span\r\n                                [ngClass]=\"SelectedIcon\"\r\n                                class=\"align-baseline mr-1 ml-1\"\r\n                                *ngIf=\"SelectedIconType === IconType.CssSprite\"></span>\r\n                        </button>\r\n                    </ng-template>\r\n                    <ng-container *ngFor=\"let sprache of Languages\">\r\n                        <sac-multilanguagemenubutton\r\n                            *ngIf=\"sprache.IconType === IconType.Image\"\r\n                            text=\"{{ sprache.Text }}\"\r\n                            image=\"{{ sprache.Icon }}\"\r\n                            [cssclass]=\"IsEmpty(sprache) ? 'text-danger border-left border-danger' : ''\"\r\n                            (clicked)=\"SelectLanguage(sprache)\"></sac-multilanguagemenubutton>\r\n                        <sac-multilanguagemenubutton\r\n                            *ngIf=\"sprache.IconType === IconType.CssSprite\"\r\n                            text=\"{{ sprache.Text }}\"\r\n                            icon=\"{{ sprache.Icon }}\"\r\n                            [cssclass]=\"IsEmpty(sprache) ? 'text-danger border-left border-danger' : ''\"\r\n                            (clicked)=\"SelectLanguage(sprache)\"></sac-multilanguagemenubutton>\r\n                    </ng-container>\r\n                </div>\r\n\r\n                <div\r\n                    *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n                    class=\"invalid-feedback\">\r\n                    {{ GetErrorMessage() | async }}\r\n                </div>\r\n            </div>\r\n            <small\r\n                *ngIf=\"helptextmode === 'text' && helptext\"\r\n                class=\"form-text text-muted\">\r\n                {{ helptext }}\r\n            </small>\r\n        </div>\r\n\r\n        <div\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n            class=\"form-control-plaintext align-self-top ml-2 mr-1 w-auto\"\r\n            [ngClass]=\"[componentHeight | toControlHeight]\">\r\n            <sac-tooltip\r\n                [tooltiptext]=\"helptext\"\r\n                [inlinemode]=\"true\">\r\n                <span\r\n                    [ngClass]=\"HelptextTooltipIcon\"\r\n                    class=\"ml-1\">\r\n                </span>\r\n            </sac-tooltip>\r\n        </div>\r\n    </div>\r\n</div>\r\n<div class=\"row\">\r\n    <div class=\"col text-right\"></div>\r\n</div>\r\n",
                     // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                     providers: [
                         {
@@ -2750,7 +2769,7 @@
     SacMultilanguageInputAreaComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-multilanguageinputarea',
-                    template: "<div class=\"row form-group\" [class.no-gutters]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    >{{label}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" class=\"ml-1\"></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group\"\r\n      [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n      [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      <textarea\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        [value]=\"LanguageValue\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        (blur)=\"onTouch()\"\r\n        style=\"height: auto\"\r\n        (input)=\"SetLanguageValue($event.target.value)\"\r\n        [attr.rows]=\"rows\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n        [ngClass]=\"[componentHeight | toControlHeight]\"\r\n        [disabled]=\"isdisabled\"\r\n      ></textarea>\r\n\r\n      <div\r\n        placement=\"bottom-right\"\r\n        class=\"input-group-append\"\r\n        sac-multilanguagemenu\r\n        [buttontemplate]=\"menuButton\"\r\n        #contextmenu\r\n      >\r\n        <ng-template #menuButton>\r\n          <button\r\n            sacMultilanguageMenuAnchor\r\n            [id]=\"name + '_dropdownitem'\"\r\n            type=\"button\"\r\n            class=\"btn dropdown-toggle\"\r\n            (click)=\"contextmenu.toggle()\"\r\n            [ngClass]=\"[IsAnyEmpty() ? 'btn-warning' : 'btn-secondary']\"\r\n          >\r\n            <img\r\n              src=\"{{SelectedIcon}}\"\r\n              class=\"align-baseline mr-1 ml-1\"\r\n              *ngIf=\"SelectedIconType === IconType.Image\"\r\n            />\r\n            <i\r\n              [ngClass]=\"SelectedIcon\"\r\n              class=\"align-baseline mr-1 ml-1\"\r\n              *ngIf=\"SelectedIconType === IconType.CssSprite\"\r\n            ></i>\r\n          </button>\r\n        </ng-template>\r\n        <ng-container *ngFor=\"let sprache of Languages\">\r\n          <sac-multilanguagemenubutton\r\n            *ngIf=\"sprache.IconType === IconType.Image\"\r\n            text=\"{{sprache.Text}}\"\r\n            image=\"{{sprache.Icon}}\"\r\n            [cssclass]=\"IsEmpty(sprache) ? 'text-danger border-left border-danger': ''\"\r\n            (clicked)=\"SelectLanguage(sprache)\"\r\n          ></sac-multilanguagemenubutton>\r\n          <sac-multilanguagemenubutton\r\n            *ngIf=\"sprache.IconType === IconType.CssSprite\"\r\n            text=\"{{sprache.Text}}\"\r\n            icon=\"{{sprache.Icon}}\"\r\n            [cssclass]=\"IsEmpty(sprache) ? 'text-danger border-left border-danger': ''\"\r\n            (clicked)=\"SelectLanguage(sprache)\"\r\n          ></sac-multilanguagemenubutton>\r\n        </ng-container>\r\n      </div>\r\n\r\n      <div\r\n        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n        class=\"invalid-feedback\"\r\n      >\r\n        {{ GetErrorMessage() | async }}\r\n      </div>\r\n    </div>\r\n    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\r\n  </div>\r\n</div>\r\n<div class=\"row\">\r\n  <div class=\"col text-right\"></div>\r\n</div>\r\n",
+                    template: "<div\r\n    class=\"row form-group\"\r\n    [class.no-gutters]=\"disablelabel\">\r\n    <label\r\n        for=\"{{ name }}\"\r\n        class=\"col-12 col-form-label d-flex\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n        [class.required]=\"isrequired\">\r\n        <div\r\n            class=\"text flex-grow-0\"\r\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\r\n            {{ label }}\r\n        </div>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [ngClass]=\"HelptextTooltipIcon\"\r\n                class=\"ml-1\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n            <div\r\n                class=\"input-group\"\r\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n                [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\r\n                <textarea\r\n                    id=\"{{ name }}\"\r\n                    name=\"{{ name }}\"\r\n                    type=\"text\"\r\n                    class=\"form-control\"\r\n                    [value]=\"LanguageValue\"\r\n                    [attr.placeholder]=\"placeholder\"\r\n                    (blur)=\"onTouch()\"\r\n                    style=\"height: auto\"\r\n                    (input)=\"SetLanguageValue($event.target.value)\"\r\n                    [attr.rows]=\"rows\"\r\n                    [attr.maxlength]=\"maxlength\"\r\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n                    [ngClass]=\"[componentHeight | toControlHeight]\"\r\n                    [disabled]=\"isdisabled\"></textarea>\r\n\r\n                <div\r\n                    placement=\"bottom-right\"\r\n                    class=\"input-group-append\"\r\n                    sac-multilanguagemenu\r\n                    [buttontemplate]=\"menuButton\"\r\n                    #contextmenu>\r\n                    <ng-template #menuButton>\r\n                        <button\r\n                            sacMultilanguageMenuAnchor\r\n                            [id]=\"name + '_dropdownitem'\"\r\n                            type=\"button\"\r\n                            class=\"btn dropdown-toggle\"\r\n                            (click)=\"contextmenu.toggle()\"\r\n                            [ngClass]=\"[IsAnyEmpty() ? 'btn-warning' : 'btn-secondary']\">\r\n                            <img\r\n                                src=\"{{ SelectedIcon }}\"\r\n                                class=\"align-baseline mr-1 ml-1\"\r\n                                *ngIf=\"SelectedIconType === IconType.Image\" />\r\n                            <i\r\n                                [ngClass]=\"SelectedIcon\"\r\n                                class=\"align-baseline mr-1 ml-1\"\r\n                                *ngIf=\"SelectedIconType === IconType.CssSprite\"></i>\r\n                        </button>\r\n                    </ng-template>\r\n                    <ng-container *ngFor=\"let sprache of Languages\">\r\n                        <sac-multilanguagemenubutton\r\n                            *ngIf=\"sprache.IconType === IconType.Image\"\r\n                            text=\"{{ sprache.Text }}\"\r\n                            image=\"{{ sprache.Icon }}\"\r\n                            [cssclass]=\"IsEmpty(sprache) ? 'text-danger border-left border-danger' : ''\"\r\n                            (clicked)=\"SelectLanguage(sprache)\"></sac-multilanguagemenubutton>\r\n                        <sac-multilanguagemenubutton\r\n                            *ngIf=\"sprache.IconType === IconType.CssSprite\"\r\n                            text=\"{{ sprache.Text }}\"\r\n                            icon=\"{{ sprache.Icon }}\"\r\n                            [cssclass]=\"IsEmpty(sprache) ? 'text-danger border-left border-danger' : ''\"\r\n                            (clicked)=\"SelectLanguage(sprache)\"></sac-multilanguagemenubutton>\r\n                    </ng-container>\r\n                </div>\r\n\r\n                <div\r\n                    *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n                    class=\"invalid-feedback\">\r\n                    {{ GetErrorMessage() | async }}\r\n                </div>\r\n            </div>\r\n            <small\r\n                *ngIf=\"helptextmode === 'text' && helptext\"\r\n                class=\"form-text text-muted\">\r\n                {{ helptext }}\r\n            </small>\r\n        </div>\r\n\r\n        <div\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n            class=\"form-control-plaintext align-self-top ml-2 mr-1 w-auto\"\r\n            [ngClass]=\"[componentHeight | toControlHeight]\">\r\n            <sac-tooltip\r\n                [tooltiptext]=\"helptext\"\r\n                [inlinemode]=\"true\">\r\n                <span\r\n                    [ngClass]=\"HelptextTooltipIcon\"\r\n                    class=\"ml-1\">\r\n                </span>\r\n            </sac-tooltip>\r\n        </div>\r\n    </div>\r\n</div>\r\n<div class=\"row\">\r\n    <div class=\"col text-right\"></div>\r\n</div>\r\n",
                     // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                     providers: [
                         {
@@ -2871,28 +2890,33 @@
     ]; };
     /**
-     * Component für Menü Eintrag in Context Menü
+     * Component for menu entry in context menu
      */
     var SacMultilanguagemenuItemButtonComponent = /** @class */ (function (_super) {
         __extends(SacMultilanguagemenuItemButtonComponent, _super);
+        // #region Constructors
         /**
          * Constructor
          * @param contextmenu Instance von Context Menü
          */
-        function SacMultilanguagemenuItemButtonComponent(contextmenu) {
-            return _super.call(this, contextmenu) || this;
+        function SacMultilanguagemenuItemButtonComponent() {
+            return _super.call(this) || this;
         }
         return SacMultilanguagemenuItemButtonComponent;
     }(sacCommon.SacContextmenuItemButtonCommon));
     SacMultilanguagemenuItemButtonComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-multilanguagemenubutton',
-                    template: "<button\r\n  type=\"button\"\r\n  class=\"dropdown-item\"\r\n  (click)=\"callaction($event)\"\r\n  [class.disabled]=\"isdisabled\"\r\n  [ngClass]=\"cssclass\"\r\n  [attr.disabled]=\"isdisabled ? 'disabled' : null\"\r\n>\r\n  <div class=\"d-flex\">\r\n    <div *ngIf=\"!isicondisabled\" style=\"min-width: 1.5rem\">\r\n      <img *ngIf=\"image\" [src]=\"image\" class=\"align-baseline\" />\r\n      <i *ngIf=\"icon\" [class]=\"iconstyle + ' ' + icon\"></i>\r\n    </div>\r\n    <div class=\"flex-grow-1\">{{ text }}</div>\r\n  </div>\r\n</button>\r\n"
+                    template: "<button\r\n  type=\"button\"\r\n  class=\"dropdown-item\"\r\n  (click)=\"callaction($event)\"\r\n  [class.disabled]=\"isdisabled\"\r\n  [ngClass]=\"cssclass\"\r\n  [attr.disabled]=\"isdisabled ? 'disabled' : null\"\r\n>\r\n  <div class=\"d-flex\">\r\n    <div *ngIf=\"!isicondisabled\" style=\"min-width: 1.5rem\">\r\n      <img *ngIf=\"image\" [src]=\"image\" class=\"align-baseline\" />\r\n      <i *ngIf=\"icon\" [class]=\"iconstyle + ' ' + icon\"></i>\r\n    </div>\r\n    <div class=\"flex-grow-1\">{{ text }}</div>\r\n  </div>\r\n</button>\r\n",
+                    providers: [
+                        {
+                            provide: sacCommon.SacContextmenuItemCommon,
+                            useExisting: core.forwardRef(function () { return SacMultilanguagemenuItemButtonComponent; }),
+                        },
+                    ]
                 },] }
     ];
-    SacMultilanguagemenuItemButtonComponent.ctorParameters = function () { return [
-        { type: sacCommon.SacContextmenuCommon }
-    ]; };
+    SacMultilanguagemenuItemButtonComponent.ctorParameters = function () { return []; };
     var SACBootstrap4MultilanguageModule = /** @class */ (function () {
         function SACBootstrap4MultilanguageModule() {
@@ -2948,7 +2972,7 @@
     SacStaticFormContainerComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-staticformcontainer',
-                    template: "<div class=\"row form-group\" [class.no-gutters]=\"disablelabel\">\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}_label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" class=\"ml-1\"></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <ng-content></ng-content>\r\n    <label\r\n      for=\"{{name}}\"\r\n      class=\"form-label-adaptive form-label-fixed\"\r\n      [ngClass]=\"{ 'required': isrequired }\"\r\n      *ngIf=\"isAdaptiveLabel && !disablelabel\"\r\n      >{{label}}</label\r\n    >\r\n    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\r\n    <div\r\n      class=\"invalid-feedback\"\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                    template: "<div\r\n    class=\"row form-group\"\r\n    [class.no-gutters]=\"disablelabel\">\r\n    <label\r\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n        id=\"{{ name }}_label\"\r\n        for=\"{{ name }}\"\r\n        class=\"col-12 col-form-label d-flex\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n        [class.required]=\"isrequired\">\r\n        <div\r\n            class=\"text flex-grow-0\"\r\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\r\n            {{ label }}\r\n        </div>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\"\r\n            ><span\r\n                [ngClass]=\"HelptextTooltipIcon\"\r\n                class=\"ml-1\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n        <div\r\n            [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n            [class.was-validated]=\"isinlineerrorenabled && isinvalid && errormessage\">\r\n            <ng-content></ng-content>\r\n            <label\r\n                for=\"{{ name }}\"\r\n                class=\"form-label-adaptive form-label-fixed\"\r\n                [ngClass]=\"{ required: isrequired }\"\r\n                *ngIf=\"isAdaptiveLabel && !disablelabel\">\r\n                {{ label }}\r\n            </label>\r\n            <small\r\n                *ngIf=\"helptextmode === 'text' && helptext\"\r\n                class=\"form-text text-muted\">\r\n                {{ helptext }}\r\n            </small>\r\n            <div\r\n                class=\"invalid-feedback\"\r\n                *ngIf=\"isinlineerrorenabled && isinvalid && errormessage\">\r\n                {{ errormessage }}\r\n            </div>\r\n        </div>\r\n\r\n        <div\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n            class=\"form-control-plaintext align-self-top ml-2 mr-1 w-auto\"\r\n            [ngClass]=\"[componentHeight | toControlHeight]\">\r\n            <sac-tooltip\r\n                [tooltiptext]=\"helptext\"\r\n                [inlinemode]=\"true\">\r\n                <span\r\n                    [ngClass]=\"HelptextTooltipIcon\"\r\n                    class=\"ml-1\">\r\n                </span>\r\n            </sac-tooltip>\r\n        </div>\r\n    </div>\r\n</div>\r\n",
                     // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                     providers: [
                         {
@@ -2988,7 +3012,7 @@
     SacStaticLabelComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-staticlabel',
-                    template: "<div class=\"row form-group\" [class.no-gutters]=\"disablelabel\">\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}_label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    >{{label}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" class=\"ml-1\"></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      [id]=\"name\"\r\n      class=\"form-control-plaintext\"\r\n      [ngClass]=\"[componentHeight | toControlHeight]\"\r\n      [innerHTML]=\"value\"\r\n    ></div>\r\n    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\r\n    <label\r\n      for=\"{{name}}\"\r\n      class=\"col-left control-label\"\r\n      *ngIf=\"isAdaptiveLabel && !disablelabel\"\r\n      >{{label}}</label\r\n    >\r\n  </div>\r\n</div>\r\n",
+                    template: "<div\r\n    class=\"row form-group\"\r\n    [class.no-gutters]=\"disablelabel\">\r\n    <label\r\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n        id=\"{{ name }}_label\"\r\n        for=\"{{ name }}\"\r\n        class=\"col-12 col-form-label d-flex\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\">\r\n        <div\r\n            class=\"text flex-grow-0\"\r\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\r\n            {{ label }}\r\n        </div>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\"\r\n            ><span\r\n                [ngClass]=\"HelptextTooltipIcon\"\r\n                class=\"ml-1\"></span> </sac-tooltip\r\n    ></label>\r\n    <div\r\n        class=\"col-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n        <div>\r\n            <div\r\n                [id]=\"name\"\r\n                class=\"form-control-plaintext\"\r\n                [ngClass]=\"[componentHeight | toControlHeight]\"\r\n                [innerHTML]=\"value\"></div>\r\n            <small\r\n                *ngIf=\"helptextmode === 'text' && helptext\"\r\n                class=\"form-text text-muted\">\r\n                {{ helptext }}\r\n            </small>\r\n        </div>\r\n\r\n        <div\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n            class=\"form-control-plaintext align-self-top ml-2 mr-1 w-auto\"\r\n            [ngClass]=\"[componentHeight | toControlHeight]\">\r\n            <sac-tooltip\r\n                [tooltiptext]=\"helptext\"\r\n                [inlinemode]=\"true\">\r\n                <span\r\n                    [ngClass]=\"HelptextTooltipIcon\"\r\n                    class=\"ml-1\">\r\n                </span>\r\n            </sac-tooltip>\r\n        </div>\r\n    </div>\r\n</div>\r\n",
                     // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                     providers: [
                         {
@@ -3114,7 +3138,7 @@
     SacTinyMceComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-tinymce',
-                    template: "<div class=\"form-row form-group\">\r\n  <div\r\n    class=\"col\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n  >\r\n    <label for=\"{{name}}\" class=\"form-control-label\"\r\n      >{{label}}<sac-tooltip\r\n        *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n        [tooltiptext]=\"helptext\"\r\n        [inlinemode]=\"true\"\r\n        ><span\r\n          [ngClass]=\"HelptextTooltipIcon\"\r\n          class=\"ml-1\"\r\n        ></span> </sac-tooltip\r\n    ></label>\r\n  </div>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <editor\r\n      [id]=\"name + '_tinymce'\"\r\n      [init]=\"_config\"\r\n      [initialValue]=\"value\"\r\n      ngModel\r\n      [ngModelOptions]=\"{standalone: true}\"\r\n      (ngModelChange)=\"setValue($event)\"\r\n      (onSaveContent)=\"save($event.event.content)\"\r\n      [disabled]=\"disabled\"\r\n      [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    ></editor>\r\n    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<sac-dialog\r\n  *ngIf=\"selectdialogvisible\"\r\n  [allowesc]=\"false\"\r\n  [backdrop]=\"true\"\r\n  [(isvisible)]=\"selectdialogvisible\"\r\n  title=\"{{ lngResourceService.GetString(validationKeyService.TinyMceFileselectDialogtitle) | async }}\"\r\n  size=\"large\"\r\n  height=\"500px\"\r\n>\r\n  <ng-container dialogbody>\r\n    <sac-filebrowser\r\n      [apiurl]=\"filebrowserapiurl\"\r\n      (file)=\"selectDialogSettings.value = $event\"\r\n      [allowfoldercreate]=\"allowfoldercreate\"\r\n      [allowfolderrename]=\"allowfolderrename\"\r\n      [allowfolderdelete]=\"allowfolderdelete\"\r\n      [allowfileupload]=\"allowfileupload\"\r\n      [allowfilerename]=\"allowfilerename\"\r\n      [allowfiledelete]=\"allowfiledelete\"\r\n      [selectedfile]=\"selectDialogSettings.value\"\r\n      [allowedtypes]=\"selectDialogSettings.allowedtypes\"\r\n    ></sac-filebrowser>\r\n  </ng-container>\r\n  <ng-container dialogfooter>\r\n    <sac-button\r\n      role=\"primary\"\r\n      [name]=\"name + '_modalOk'\"\r\n      text=\"{{ lngResourceService.GetString(validationKeyService.TinyMceFileselectOk) | async }}\"\r\n      (clicked)=\"setSelectDialogResult()\"\r\n    ></sac-button>\r\n    <sac-button\r\n      [name]=\"name + '_modalClose'\"\r\n      text=\"{{ lngResourceService.GetString(validationKeyService.TinyMceFileselectCancel) | async }}\"\r\n      (clicked)=\"closeSelectDialog()\"\r\n    ></sac-button>\r\n  </ng-container>\r\n</sac-dialog>\r\n",
+                    template: "<div class=\"row form-group\">\r\n    <label\r\n        for=\"{{ name }}\"\r\n        class=\"col-12 col-form-label d-flex\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n        [class.required]=\"isrequired\"\r\n        ><div\r\n            class=\"text flex-grow-0\"\r\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\r\n            {{ label }}\r\n        </div>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [ngClass]=\"HelptextTooltipIcon\"\r\n                class=\"ml-1\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n        <div [class.flex-grow-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n            <editor\r\n                [id]=\"name + '_tinymce'\"\r\n                [init]=\"_config\"\r\n                [initialValue]=\"value\"\r\n                ngModel\r\n                [ngModelOptions]=\"{ standalone: true }\"\r\n                (ngModelChange)=\"setValue($event)\"\r\n                (onSaveContent)=\"save($event.event.content)\"\r\n                [disabled]=\"disabled\"\r\n                [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\r\n            </editor>\r\n            <small\r\n                *ngIf=\"helptextmode === 'text' && helptext\"\r\n                class=\"form-text text-muted\">\r\n                {{ helptext }}\r\n            </small>\r\n            <div\r\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n                class=\"invalid-feedback\">\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-plaintext align-self-top ml-2 mr-1 w-auto\"\r\n            [ngClass]=\"[componentHeight | toControlHeight]\">\r\n            <sac-tooltip\r\n                [tooltiptext]=\"helptext\"\r\n                [inlinemode]=\"true\">\r\n                <span\r\n                    [ngClass]=\"HelptextTooltipIcon\"\r\n                    class=\"ml-1\">\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>\r\n        <sac-filebrowser\r\n            [apiurl]=\"filebrowserapiurl\"\r\n            (file)=\"selectDialogSettings.value = $event\"\r\n            [allowfoldercreate]=\"allowfoldercreate\"\r\n            [allowfolderrename]=\"allowfolderrename\"\r\n            [allowfolderdelete]=\"allowfolderdelete\"\r\n            [allowfileupload]=\"allowfileupload\"\r\n            [allowfilerename]=\"allowfilerename\"\r\n            [allowfiledelete]=\"allowfiledelete\"\r\n            [selectedfile]=\"selectDialogSettings.value\"\r\n            [allowedtypes]=\"selectDialogSettings.allowedtypes\"></sac-filebrowser>\r\n    </ng-container>\r\n    <ng-container dialogfooter>\r\n        <sac-button\r\n            role=\"primary\"\r\n            [name]=\"name + '_modalOk'\"\r\n            text=\"{{ lngResourceService.GetString(validationKeyService.TinyMceFileselectOk) | async }}\"\r\n            (clicked)=\"setSelectDialogResult()\"></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",
                     // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                     providers: [
                         {
@@ -3159,6 +3183,58 @@
                 },] }
     ];
+    /**
+     * Treeview Compomnent
+     */
+    var SacTreeviewComponent = /** @class */ (function (_super) {
+        __extends(SacTreeviewComponent, _super);
+        // #region Constructors
+        /**
+         * Constructor
+         * @param formLayout SacFormLayout to define scoped layout settings
+         * @param injector Component Injector
+         */
+        function SacTreeviewComponent(formLayout, injector) {
+            return _super.call(this, formLayout, injector) || this;
+        }
+        return SacTreeviewComponent;
+    }(sacCommon.SacTreeviewCommon));
+    SacTreeviewComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'sac-treeview',
+                    template: "<div\r\n    class=\"row mb-3\"\r\n    [class.g-0]=\"disablelabel\">\r\n    <label\r\n        for=\"{{ name }}\"\r\n        class=\"col-12 col-form-label d-flex\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n        [class.required]=\"isrequired\">\r\n        <div\r\n            class=\"text flex-grow-0\"\r\n            [class.flex-sm-grow-1]=\"splitlabelandhelptext\">\r\n            {{ label }}\r\n        </div>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [ngClass]=\"HelptextTooltipIcon\"\r\n                class=\"ml-1\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\r\n        <div [class.d-flex]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n            <div\r\n                class=\"w-100\"\r\n                [style.min-width]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 0 : null\"\r\n                [class.mr-1]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n                <ul\r\n                    class=\"list-group list-group-flush\"\r\n                    id=\"{{ name }}\"\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                    <ng-container *ngFor=\"let node of data\">\r\n                        <ng-template\r\n                            [ngTemplateOutlet]=\"treeItem\"\r\n                            [ngTemplateOutletContext]=\"{ node: node, deep: 0 }\">\r\n                        </ng-template>\r\n                    </ng-container>\r\n                </ul>\r\n\r\n                <div\r\n                    *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n                    class=\"invalid-feedback\">\r\n                    {{ GetErrorMessage() | async }}\r\n                </div>\r\n\r\n                <small\r\n                    *ngIf=\"helptextmode === 'text' && helptext\"\r\n                    class=\"form-text text-muted\">\r\n                    {{ helptext }}\r\n                </small>\r\n            </div>\r\n\r\n            <div\r\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n                class=\"form-control-plaintext align-self-top ml-2 mr-1 w-auto\"\r\n                [ngClass]=\"[componentHeight | toControlHeight]\">\r\n                <sac-tooltip\r\n                    [tooltiptext]=\"helptext\"\r\n                    [inlinemode]=\"true\">\r\n                    <span\r\n                        [ngClass]=\"HelptextTooltipIcon\"\r\n                        class=\"ml-1\">\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    <li\r\n        class=\"list-group-item list-group-item-action py-1 px-2 d-flex align-items-center\"\r\n        [class.active]=\"isSelectedState(node)\"\r\n        (mouseenter)=\"setHoverState(node, true)\"\r\n        (mouseleave)=\"setHoverState(node, false)\"\r\n        style=\"cursor: pointer\">\r\n        <div\r\n            class=\"mx-3\"\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            class=\"mr-2\"\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            class=\"mr-2\"\r\n            [ngClass]=\"getStringField(node, attricon)\">\r\n        </div>\r\n\r\n        <div\r\n            (click)=\"onNodeClicked(node)\"\r\n            class=\"flex-grow-1 py-1\"\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            class=\"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    </li>\r\n\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]=\"{ node: child, deep: deep + 1 }\">\r\n        </ng-template>\r\n    </ng-container>\r\n</ng-template>\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    #defaultTemplateAction\r\n    let-node=\"node\"\r\n    let-actionhandler=\"actionhandler\">\r\n    <a\r\n        class=\"btn btn-sm 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",
+                    providers: [
+                        {
+                            provide: forms.NG_VALUE_ACCESSOR,
+                            multi: true,
+                            useExisting: SacTreeviewComponent,
+                        },
+                        {
+                            provide: forms.NG_VALIDATORS,
+                            useExisting: core.forwardRef(function () { return SacTreeviewComponent; }),
+                            multi: true,
+                        },
+                    ]
+                },] }
+    ];
+    SacTreeviewComponent.ctorParameters = function () { return [
+        { type: SacFormLayoutDirective, decorators: [{ type: core.Host }, { type: core.Optional }] },
+        { type: core.Injector }
+    ]; };
+    var SACBootstrap4TreeviewModule = /** @class */ (function () {
+        function SACBootstrap4TreeviewModule() {
+        }
+        return SACBootstrap4TreeviewModule;
+    }());
+    SACBootstrap4TreeviewModule.decorators = [
+        { type: core.NgModule, args: [{
+                    declarations: [SacTreeviewComponent],
+                    imports: [common.CommonModule, SACBootstrap4TooltipModule, SACBootstrap4LayoutModule, SACBootstrap4ContextmenuModule],
+                    exports: [SacTreeviewComponent],
+                },] }
+    ];
     /**
      * Validation Summary Kompontente
      */
@@ -3299,71 +3375,73 @@
     exports.SACBootstrap4TabsModule = SACBootstrap4TabsModule;
     exports.SACBootstrap4TinyMceModule = SACBootstrap4TinyMceModule;
     exports.SACBootstrap4TooltipModule = SACBootstrap4TooltipModule;
+    exports.SACBootstrap4TreeviewModule = SACBootstrap4TreeviewModule;
     exports.SACBootstrap4UploadModule = SACBootstrap4UploadModule;
     exports.SACBootstrap4ValidationSummaryModule = SACBootstrap4ValidationSummaryModule;
     exports.SACBootstrap4WizardModule = SACBootstrap4WizardModule;
     exports.SACFORM_FACTORY = SACFORM_FACTORY;
+    exports.SacBrowserComponent = SacBrowserComponent;
+    exports.SacButtonComponent = SacButtonComponent;
+    exports.SacCheckboxComponent = SacCheckboxComponent;
+    exports.SacConfirmComponent = SacConfirmComponent;
+    exports.SacContextmenuAnchorDirective = SacContextmenuAnchorDirective;
+    exports.SacContextmenuComponent = SacContextmenuComponent;
+    exports.SacContextmenuItemButtonComponent = SacContextmenuItemButtonComponent;
+    exports.SacContextmenuItemSplitterComponent = SacContextmenuItemSplitterComponent;
+    exports.SacDateComponent = SacDateComponent;
+    exports.SacDateSelectorComponent = SacDateSelectorComponent;
+    exports.SacDateTimeComponent = SacDateTimeComponent;
+    exports.SacDialogComponent = SacDialogComponent;
+    exports.SacDropdownComponent = SacDropdownComponent;
+    exports.SacDropdownOptionDirective = SacDropdownOptionDirective;
+    exports.SacDropzoneMultipleComponent = SacDropzoneMultipleComponent;
+    exports.SacDropzoneSingleComponent = SacDropzoneSingleComponent;
     exports.SacFormDirective = SacFormDirective;
+    exports.SacFormLayoutDirective = SacFormLayoutDirective;
+    exports.SacGridButtonComponent = SacGridButtonComponent;
+    exports.SacGridColumnActionComponent = SacGridColumnActionComponent;
+    exports.SacGridColumnComponent = SacGridColumnComponent;
+    exports.SacGridComponent = SacGridComponent;
+    exports.SacGridImageComponent = SacGridImageComponent;
     exports.SacInheritFormDirective = SacInheritFormDirective;
+    exports.SacInputAreaComponent = SacInputAreaComponent;
+    exports.SacInputComponent = SacInputComponent;
+    exports.SacInputCurrencyComponent = SacInputCurrencyComponent;
+    exports.SacInputDecimalComponent = SacInputDecimalComponent;
+    exports.SacInputEmailComponent = SacInputEmailComponent;
+    exports.SacInputIntegerComponent = SacInputIntegerComponent;
+    exports.SacInputPasswordComponent = SacInputPasswordComponent;
+    exports.SacInputSearchComponent = SacInputSearchComponent;
+    exports.SacListboxComponent = SacListboxComponent;
+    exports.SacListboxOptionDirective = SacListboxOptionDirective;
+    exports.SacMultilanguageInputAreaComponent = SacMultilanguageInputAreaComponent;
+    exports.SacMultilanguageInputComponent = SacMultilanguageInputComponent;
+    exports.SacPagingComponent = SacPagingComponent;
+    exports.SacRadiobuttonComponent = SacRadiobuttonComponent;
+    exports.SacRadiobuttonsComponent = SacRadiobuttonsComponent;
+    exports.SacStaticFormContainerComponent = SacStaticFormContainerComponent;
+    exports.SacStaticLabelComponent = SacStaticLabelComponent;
+    exports.SacTabComponent = SacTabComponent;
+    exports.SacTabItemComponent = SacTabItemComponent;
+    exports.SacTimeComponent = SacTimeComponent;
+    exports.SacTinyMceComponent = SacTinyMceComponent;
+    exports.SacToControlHeightPipe = SacToControlHeightPipe;
+    exports.SacToControlWidthCssPipe = SacToControlWidthCssPipe;
+    exports.SacToLabelHeightPipe = SacToLabelHeightPipe;
+    exports.SacToLabelWidthCssPipe = SacToLabelWidthCssPipe;
+    exports.SacTooltipComponent = SacTooltipComponent;
+    exports.SacTreeviewComponent = SacTreeviewComponent;
+    exports.SacUploadComponent = SacUploadComponent;
+    exports.SacUploadMultipleComponent = SacUploadMultipleComponent;
+    exports.SacValidationSummaryComponent = SacValidationSummaryComponent;
+    exports.SacWizardComponent = SacWizardComponent;
+    exports.SacWizardItemComponent = SacWizardItemComponent;
     exports.ServiceConfirm = ServiceConfirm;
-    exports.ɵa = SacBrowserComponent;
-    exports.ɵb = SacDropzoneMultipleComponent;
-    exports.ɵba = SacGridComponent;
-    exports.ɵbb = SacGridColumnComponent;
-    exports.ɵbc = SacGridColumnActionComponent;
-    exports.ɵbd = SacPagingComponent;
-    exports.ɵbe = SacGridButtonComponent;
-    exports.ɵbf = SacGridImageComponent;
-    exports.ɵbg = SacInputComponent;
-    exports.ɵbh = SacInputAreaComponent;
-    exports.ɵbi = SacInputCurrencyComponent;
-    exports.ɵbj = SacInputDecimalComponent;
-    exports.ɵbk = SacInputEmailComponent;
-    exports.ɵbl = SacInputIntegerComponent;
-    exports.ɵbm = SacInputPasswordComponent;
-    exports.ɵbn = SacInputSearchComponent;
-    exports.ɵbo = SacDropdownComponent;
-    exports.ɵbp = SacDropdownOptionDirective;
-    exports.ɵbq = SacListboxComponent;
-    exports.ɵbr = SacListboxOptionDirective;
-    exports.ɵbs = SacMultilanguageInputComponent;
-    exports.ɵbt = SacMultilanguageInputAreaComponent;
-    exports.ɵbu = SacMultilanguagemenuComponent;
-    exports.ɵbv = SacMultilanguagemenuAnchorDirective;
-    exports.ɵbw = SacMultilanguagemenuContainerDirective;
-    exports.ɵbx = SacMultilanguagemenuItemButtonComponent;
-    exports.ɵby = SacStaticLabelComponent;
-    exports.ɵbz = SacStaticFormContainerComponent;
-    exports.ɵc = SacFormLayoutDirective;
-    exports.ɵca = SacTabComponent;
-    exports.ɵcb = SacTabItemComponent;
-    exports.ɵcc = SacTinyMceComponent;
-    exports.ɵcd = SacValidationSummaryComponent;
-    exports.ɵce = SacWizardComponent;
-    exports.ɵcf = SacWizardItemComponent;
-    exports.ɵd = SacConfirmComponent;
-    exports.ɵe = SacDialogComponent;
-    exports.ɵf = SacButtonComponent;
-    exports.ɵg = SacContextmenuComponent;
-    exports.ɵh = SacContextmenuItemButtonComponent;
-    exports.ɵi = SacContextmenuItemSplitterComponent;
-    exports.ɵj = SacContextmenuAnchorDirective;
-    exports.ɵk = SacContextmenuContainerDirective;
-    exports.ɵl = SacUploadComponent;
-    exports.ɵm = SacUploadMultipleComponent;
-    exports.ɵn = SacDropzoneSingleComponent;
-    exports.ɵo = SacToControlHeightPipe;
-    exports.ɵp = SacToControlWidthCssPipe;
-    exports.ɵq = SacToLabelHeightPipe;
-    exports.ɵr = SacToLabelWidthCssPipe;
-    exports.ɵs = SacTooltipComponent;
-    exports.ɵt = SacCheckboxComponent;
-    exports.ɵu = SacRadiobuttonComponent;
-    exports.ɵv = SacRadiobuttonsComponent;
-    exports.ɵw = SacDateComponent;
-    exports.ɵx = SacDateTimeComponent;
-    exports.ɵy = SacTimeComponent;
-    exports.ɵz = SacDateSelectorComponent;
+    exports.ɵa = SacContextmenuContainerDirective;
+    exports.ɵb = SacMultilanguagemenuComponent;
+    exports.ɵc = SacMultilanguagemenuAnchorDirective;
+    exports.ɵd = SacMultilanguagemenuContainerDirective;
+    exports.ɵe = SacMultilanguagemenuItemButtonComponent;
     Object.defineProperty(exports, '__esModule', { value: true });