@simpleangularcontrols/sac-bootstrap3 10.0.0-rc.1 → 10.0.0-rc.10

package/bundles/simpleangularcontrols-sac-bootstrap3.umd.js

@@ -495,7 +495,9 @@
     SacButtonComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-button',
-                    template: "<a\r\n  [id]=\"name\"\r\n  class=\"btn\"\r\n  [class.btn-primary]=\"role === 'primary'\"\r\n  [class.btn-secondary]=\"role === 'secondary'\"\r\n  [class.btn-success]=\"role === 'success'\"\r\n  [class.btn-danger]=\"role === 'danger'\"\r\n  [class.btn-warning]=\"role === 'warning'\"\r\n  [class.btn-info]=\"role === 'info'\"\r\n  [class.btn-default]=\"role === 'default'\"\r\n  [class.btn-link]=\"role === 'link'\"\r\n  [attr.disabled]=\"_isdisabled ? 'disabled' : null\"\r\n  (click)=\"buttonClick()\"\r\n>\r\n  <i\r\n    *ngIf=\"icon !== ''\"\r\n    [ngClass]=\"icon\"\r\n    [ngStyle]=\"{ 'margin-right': text ? '0.5rem': null}\"\r\n  ></i>\r\n  {{text}}\r\n</a>\r\n"
+                    template: "<a\r\n  [id]=\"name\"\r\n  class=\"btn\"\r\n  [class.btn-primary]=\"role === 'primary'\"\r\n  [class.btn-secondary]=\"role === 'secondary'\"\r\n  [class.btn-success]=\"role === 'success'\"\r\n  [class.btn-danger]=\"role === 'danger'\"\r\n  [class.btn-warning]=\"role === 'warning'\"\r\n  [class.btn-info]=\"role === 'info'\"\r\n  [class.btn-default]=\"role === 'default'\"\r\n  [class.btn-link]=\"role === 'link'\"\r\n  [attr.disabled]=\"_isdisabled ? 'disabled' : null\"\r\n  (click)=\"buttonClick()\"\r\n>\r\n  <i\r\n    *ngIf=\"isloading\"\r\n    class=\"\"\r\n    role=\"status\"\r\n    aria-hidden=\"true\"\r\n    class=\"glyphicon glyphicon-repeat spin\"\r\n    [ngStyle]=\"{ 'margin-right': text ? '0.5rem': null}\"\r\n  ></i>\r\n  <i\r\n    *ngIf=\"!isloading && icon !== ''\"\r\n    [ngClass]=\"icon\"\r\n    [ngStyle]=\"{ 'margin-right': text ? '0.5rem': null}\"\r\n  ></i>\r\n  {{text}}\r\n</a>\r\n",
+                    encapsulation: core.ViewEncapsulation.None,
+                    styles: ['sac-button+sac-button {margin-left: 5px}', '.spin { animation: spin 1.5s infinite; } @keyframes spin { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }']
                 },] }
     ];
 
@@ -694,6 +696,71 @@
                 },] }
     ];
 
+    /**
+     * Tooltip Komponente
+     *
+     * @example ToolTip Control
+     *
+     *  <ngTooltip tooltiptext="Mein Tooltip" [inlinemode]="true">
+     *    <i class="tooltip"></i>
+     *  </ngTooltip>
+     *
+     * @example ToolTip Control im Inline Mode. Style auf Icon kann auch in Klasse ausgelagert werden.
+     *
+     *  <div class="form-inline">
+     *    <ngInputSearch iconname="Suchen"></ngInputSearch>
+     *    <ngTooltip tooltiptext="Mein Tooltip" [inlinemode]="true">
+     *      <i class="tooltip" style="position: relative; left: 0; top: 3px; display: inline-block; margin-right: 10px;"></i>
+     *    </ngTooltip>
+     *  </div>
+     *
+     */
+    var SacTooltipComponent = /** @class */ (function (_super) {
+        __extends(SacTooltipComponent, _super);
+        // #region Constructors
+        /**
+         * Konstrukor
+         * @param parent SacFormular Instanz
+         * @param injector Component Injector
+         */
+        function SacTooltipComponent(cdRef, ref) {
+            return _super.call(this, cdRef, ref) || this;
+        }
+        // #endregion Constructors
+        // #region Protected Methods
+        /**
+         * Padding for Tooltip
+         * @returns Always 0. BS3 not require Padding
+         */
+        SacTooltipComponent.prototype.getTooltipOffset = function () {
+            return 0;
+        };
+        return SacTooltipComponent;
+    }(sacCommon.SacTooltipCommon));
+    SacTooltipComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'sac-tooltip',
+                    template: "<div [style.display]=\"inlinemode ? 'inline' : null\">\r\n  <div\r\n    #container\r\n    (mouseenter)=\"ShowTooltip()\"\r\n    (mouseleave)=\"HideTooltip()\"\r\n    [style.display]=\"inlinemode ? 'inline' : null\"\r\n  >\r\n    <ng-content></ng-content>\r\n  </div>\r\n  <div *ngIf=\"IsTooltipVisible()\" #tooltip>\r\n    <div\r\n      [style.visibility]=\"IsTooltipContentVisible ? 'visible' : 'hidden'\"\r\n      class=\"tooltip in\"\r\n      style=\"display: block\"\r\n      [style.left.px]=\"LeftPos\"\r\n      [style.top.px]=\"TopPos\"\r\n      [class.top]=\"GetTooltipPosition() === TooltipPosition.top\"\r\n      [class.left]=\"GetTooltipPosition() === TooltipPosition.left\"\r\n      [class.right]=\"GetTooltipPosition() === TooltipPosition.right\"\r\n      [class.bottom]=\"GetTooltipPosition() === TooltipPosition.bottom\"\r\n    >\r\n      <div class=\"tooltip-arrow\"></div>\r\n      <div class=\"tooltip-inner\">{{tooltiptext}}</div>\r\n    </div>\r\n  </div>\r\n</div>\r\n"
+                },] }
+    ];
+    SacTooltipComponent.ctorParameters = function () { return [
+        { type: core.ChangeDetectorRef },
+        { type: core.ElementRef }
+    ]; };
+
+    var SACBootstrap3TooltipModule = /** @class */ (function () {
+        function SACBootstrap3TooltipModule() {
+        }
+        return SACBootstrap3TooltipModule;
+    }());
+    SACBootstrap3TooltipModule.decorators = [
+        { type: core.NgModule, args: [{
+                    declarations: [SacTooltipComponent],
+                    imports: [common.CommonModule],
+                    exports: [SacTooltipComponent],
+                },] }
+    ];
+
     var SacCheckboxComponent = /** @class */ (function (_super) {
         __extends(SacCheckboxComponent, _super);
         // #region Constructors
@@ -710,7 +777,7 @@
     SacCheckboxComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-checkbox',
-                    template: "<div\r\n  class=\"row\"\r\n  [class.form-group]=\"!stacked\"\r\n  [class.has-error]=\"invalid && (dirty || touched)\"\r\n  [ngClass]=\"componentHeight | toLabelHeight\"\r\n>\r\n  <label\r\n    *ngIf=\"!disablelabel && !stacked\"\r\n    for=\"{{name}}\"\r\n    class=\"col-xs-12 control-label\"\r\n    [ngClass]=\"[!disablelabel && !stacked ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-xs-12\"\r\n    [ngClass]=\"[!disablelabel && !stacked ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"checkbox\"\r\n      [class.checkbox-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.checkbox-lg]=\"componentHeight === ControlHeight.Large\"\r\n    >\r\n      <label>\r\n        <input\r\n          id=\"{{name}}\"\r\n          name=\"{{name}}\"\r\n          type=\"checkbox\"\r\n          class=\"visible-checkbox\"\r\n          [checked]=\"value\"\r\n          [disabled]=\"isdisabled\"\r\n          (blur)=\"onTouch()\"\r\n          (change)=\"setValue($event.target.checked)\"\r\n        />\r\n        <ng-container *ngIf=\"checkboxtext\"\r\n          >&nbsp;<span>{{checkboxtext}}</span></ng-container\r\n        >\r\n      </label>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                    template: "<div\r\n  class=\"row\"\r\n  [class.form-group]=\"!stacked\"\r\n  [class.has-error]=\"invalid && (dirty || touched)\"\r\n  [ngClass]=\"componentHeight | toLabelHeight\"\r\n>\r\n  <label\r\n    *ngIf=\"!disablelabel && !stacked\"\r\n    for=\"{{name}}\"\r\n    class=\"col-xs-12 control-label\"\r\n    [ngClass]=\"[!disablelabel && !stacked ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    >{{label}}\r\n    <sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n    >\r\n      <span\r\n        [class]=\"HelptextTooltipIcon\"\r\n        style=\"margin-left: 5px\"\r\n      ></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-xs-12\"\r\n    [ngClass]=\"[!disablelabel && !stacked ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"checkbox\"\r\n      [class.checkbox-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.checkbox-lg]=\"componentHeight === ControlHeight.Large\"\r\n    >\r\n      <label for=\"{{name}}\">\r\n        <input\r\n          id=\"{{name}}\"\r\n          name=\"{{name}}\"\r\n          type=\"checkbox\"\r\n          class=\"visible-checkbox\"\r\n          [checked]=\"value\"\r\n          [disabled]=\"isdisabled\"\r\n          (blur)=\"onTouch()\"\r\n          (change)=\"setValue($event.target.checked)\"\r\n        />\r\n        <ng-container *ngIf=\"checkboxtext\"\r\n          >&nbsp;<span>{{checkboxtext}}</span></ng-container\r\n        >\r\n      </label>\r\n    </div>\r\n    <p *ngIf=\"helptextmode === 'text' && helptext\" class=\"help-block\">\r\n      {{helptext}}\r\n    </p>\r\n  </div>\r\n</div>\r\n",
                     // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                     providers: [
                         {
@@ -748,7 +815,7 @@
     SacRadiobuttonsComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-radiobuttons',
-                    template: "<div\r\n  class=\"row form-group\"\r\n  [class.has-error]=\"invalid && (dirty || touched)\"\r\n  [ngClass]=\"componentHeight | toLabelHeight\"\r\n>\r\n  <label\r\n    *ngIf=\"disablelabel === false\"\r\n    for=\"{{name}}\"\r\n    class=\"col-xs-12 control-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-xs-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div>\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                    template: "<div\r\n  class=\"row form-group\"\r\n  [class.has-error]=\"invalid && (dirty || touched)\"\r\n  [ngClass]=\"componentHeight | toLabelHeight\"\r\n>\r\n  <label\r\n    *ngIf=\"disablelabel === false\"\r\n    for=\"{{name}}\"\r\n    class=\"col-xs-12 control-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    >{{label}}\r\n    <sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n    >\r\n      <span\r\n        [class]=\"HelptextTooltipIcon\"\r\n        style=\"margin-left: 5px\"\r\n      ></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-xs-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div>\r\n      <ng-content></ng-content>\r\n    </div>\r\n    <p *ngIf=\"helptextmode === 'text' && helptext\" class=\"help-block\">\r\n      {{helptext}}\r\n    </p>\r\n  </div>\r\n</div>\r\n",
                     // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                     providers: [
                         {
@@ -799,7 +866,11 @@
                         SacRadiobuttonComponent,
                         SacRadiobuttonsComponent,
                     ],
-                    imports: [common.CommonModule, SACBootstrap3LayoutModule],
+                    imports: [
+                        common.CommonModule,
+                        SACBootstrap3LayoutModule,
+                        SACBootstrap3TooltipModule,
+                    ],
                     exports: [
                         SacCheckboxComponent,
                         SacRadiobuttonComponent,
@@ -889,7 +960,7 @@
     SacConfirmComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-confirm',
-                    template: "<sac-dialog\r\n  [(isvisible)]=\"isvisible\"\r\n  [title]=\"title\"\r\n  [allowesc]=\"false\"\r\n  [closebutton]=\"false\"\r\n>\r\n  <div dialogbody>\r\n    <div class=\"media\">\r\n      <div class=\"media-left media-middle\" *ngIf=\"hasImage()\">\r\n        <img [attr.src]=\"image\" />\r\n      </div>\r\n      <div class=\"media-body\">{{message}}</div>\r\n    </div>\r\n  </div>\r\n  <div dialogfooter>\r\n    <ng-container *ngFor=\"let button of buttons\">\r\n      <sac-button\r\n        [name]=\"button.key\"\r\n        [text]=\"button.text\"\r\n        [role]=\"button.role || 'default'\"\r\n        (clicked)=\"confirm(button.key)\"\r\n        style=\"margin-left: 15px\"\r\n      ></sac-button>\r\n    </ng-container>\r\n  </div>\r\n</sac-dialog>\r\n"
+                    template: "<sac-dialog\r\n  name=\"confirmDialog\"\r\n  [(isvisible)]=\"isvisible\"\r\n  [title]=\"title\"\r\n  [allowesc]=\"false\"\r\n  [closebutton]=\"false\"\r\n>\r\n  <div dialogbody>\r\n    <div class=\"media\">\r\n      <div class=\"media-left media-middle\" *ngIf=\"hasImage()\">\r\n        <img [attr.src]=\"image\" />\r\n      </div>\r\n      <div class=\"media-body\">{{message}}</div>\r\n    </div>\r\n  </div>\r\n  <div dialogfooter>\r\n    <ng-container *ngFor=\"let button of buttons\">\r\n      <sac-button\r\n        [name]=\"button.key\"\r\n        [text]=\"button.text\"\r\n        [role]=\"button.role || 'default'\"\r\n        (clicked)=\"confirm(button.key)\"\r\n      ></sac-button>\r\n    </ng-container>\r\n  </div>\r\n</sac-dialog>\r\n"
                 },] }
     ];
 
@@ -1040,7 +1111,7 @@
     SacDateComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-date',
-                    template: "<div\r\n  class=\"row form-group\"\r\n  [class.has-error]=\"invalid && (dirty || touched)\"\r\n  [ngClass]=\"componentHeight | toLabelHeight\"\r\n>\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-xs-12 control-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-xs-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      style=\"position: relative\"\r\n      [style.width.px]=\"componentHeight === ControlHeight.Small ? 120 : componentHeight === ControlHeight.Large ? 180 : 140\"\r\n    >\r\n      <div\r\n        id=\"{{name}}\"\r\n        class=\"datetime-textbox input-group\"\r\n        [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n        [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n      >\r\n        <!-- this class comes in the div above when disabled [ngClass]=\"[disablelabel === false ? 'col-md-' + _inputsize : 'col-md-12']\" -->\r\n        <input\r\n          name=\"{{name}}\"\r\n          type=\"text\"\r\n          class=\"form-control date-control\"\r\n          [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n          [ngClass]=\"[componentHeight | toControlHeight]\"\r\n          [imask]=\"imaskDate\"\r\n          placeholder=\"dd.mm.yyyy\"\r\n          [attr.placeholder]=\"placeholder\"\r\n          [value]=\"valuestring\"\r\n          maxlength=\"10\"\r\n          size=\"10\"\r\n          (blur)=\"onTouch()\"\r\n          (accept)=\"setValueString($event)\"\r\n          [disabled]=\"isdisabled\"\r\n          (click)=\"showDateSelector()\"\r\n        />\r\n        <span class=\"input-group-btn\">\r\n          <button\r\n            class=\"btn btn-default\"\r\n            type=\"button\"\r\n            (click)=\"showDateSelector()\"\r\n            [disabled]=\"isdisabled\"\r\n          >\r\n            <i [class]=\"IconSelector\"></i>\r\n          </button>\r\n        </span>\r\n      </div>\r\n      <div\r\n        class=\"help-block help-block-error\"\r\n        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      >\r\n        {{ GetErrorMessage() | async }}\r\n      </div>\r\n\r\n      <div\r\n        class=\"popover bottom in\"\r\n        role=\"tooltip\"\r\n        *ngIf=\"_showselector\"\r\n        style=\"\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.px]=\"componentHeight === ControlHeight.Small ? 4 : componentHeight === ControlHeight.Large ? 14 : 10\"\r\n        ></div>\r\n        <h3 class=\"popover-title\" style=\"display: none\"></h3>\r\n        <div class=\"popover-content\">\r\n          <sac-dateselector\r\n            *ngIf=\"_showselector\"\r\n            [initialvalue]=\"value\"\r\n            (selectdate)=\"dateselect($event)\"\r\n            dateselection=\"true\"\r\n          ></sac-dateselector>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                    template: "<div\r\n  class=\"row form-group\"\r\n  [class.has-error]=\"invalid && (dirty || touched)\"\r\n  [ngClass]=\"componentHeight | toLabelHeight\"\r\n>\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-xs-12 control-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}\r\n    <sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n    >\r\n      <span\r\n        [class]=\"HelptextTooltipIcon\"\r\n        style=\"margin-left: 5px\"\r\n      ></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-xs-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      style=\"position: relative\"\r\n      [style.width.px]=\"componentHeight === ControlHeight.Small ? 120 : componentHeight === ControlHeight.Large ? 180 : 140\"\r\n    >\r\n      <div\r\n        id=\"{{name}}\"\r\n        class=\"datetime-textbox input-group\"\r\n        [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n        [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n      >\r\n        <!-- this class comes in the div above when disabled [ngClass]=\"[disablelabel === false ? 'col-md-' + _inputsize : 'col-md-12']\" -->\r\n        <input\r\n          name=\"{{name}}\"\r\n          type=\"text\"\r\n          class=\"form-control date-control\"\r\n          [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n          [ngClass]=\"[componentHeight | toControlHeight]\"\r\n          [imask]=\"imaskDate\"\r\n          placeholder=\"dd.mm.yyyy\"\r\n          [attr.placeholder]=\"placeholder\"\r\n          [value]=\"valuestring\"\r\n          maxlength=\"10\"\r\n          size=\"10\"\r\n          (blur)=\"onTouch()\"\r\n          (accept)=\"setValueString($event)\"\r\n          [disabled]=\"isdisabled\"\r\n          (click)=\"showDateSelector()\"\r\n        />\r\n        <span class=\"input-group-btn\">\r\n          <button\r\n            class=\"btn btn-default\"\r\n            type=\"button\"\r\n            (click)=\"showDateSelector()\"\r\n            [disabled]=\"isdisabled\"\r\n          >\r\n            <i [class]=\"IconSelector\"></i>\r\n          </button>\r\n        </span>\r\n      </div>\r\n      <p *ngIf=\"helptextmode === 'text' && helptext\" class=\"help-block\">\r\n        {{helptext}}\r\n      </p>\r\n      <div\r\n        class=\"help-block help-block-error\"\r\n        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      >\r\n        {{ GetErrorMessage() | async }}\r\n      </div>\r\n\r\n      <div\r\n        class=\"popover bottom in\"\r\n        role=\"tooltip\"\r\n        *ngIf=\"_showselector\"\r\n        style=\"display: block; left: 0px; right: unset; max-width: 325px\"\r\n        [style.top.px]=\"componentHeight === ControlHeight.Large ? 46 : 34\"\r\n      >\r\n        <div\r\n          class=\"arrow\"\r\n          [style.left.px]=\"componentHeight === ControlHeight.Small ? 102 : componentHeight === ControlHeight.Large ? 155 : 120\"\r\n          style=\"right: unset\"\r\n        ></div>\r\n        <h3 class=\"popover-title\" style=\"display: none\"></h3>\r\n        <div class=\"popover-content\">\r\n          <sac-dateselector\r\n            *ngIf=\"_showselector\"\r\n            [initialvalue]=\"value\"\r\n            (selectdate)=\"dateselect($event)\"\r\n            dateselection=\"true\"\r\n          ></sac-dateselector>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
                     // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                     providers: [
                         {
@@ -1093,7 +1164,7 @@
     SacDateTimeComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-datetime',
-                    template: "<div\r\n  class=\"row form-group\"\r\n  [class.has-error]=\"invalid && (dirty || touched)\"\r\n  [ngClass]=\"componentHeight | toLabelHeight\"\r\n>\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-xs-12 control-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-xs-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      style=\"position: relative\"\r\n      [style.width.px]=\"componentHeight === ControlHeight.Small ? 160 : componentHeight === ControlHeight.Large ? 230 : 180\"\r\n    >\r\n      <div\r\n        id=\"{{name}}\"\r\n        class=\"datetime-textbox input-group\"\r\n        [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n        [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n      >\r\n        <input\r\n          id=\"{{name}}\"\r\n          name=\"{{name}}\"\r\n          type=\"text\"\r\n          class=\"form-control\"\r\n          [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n          [ngClass]=\"[componentHeight | toControlHeight]\"\r\n          [imask]=\"imaskDate\"\r\n          [attr.placeholder]=\"placeholder\"\r\n          [value]=\"valuestring\"\r\n          (blur)=\"onTouch()\"\r\n          (accept)=\"setValueString($event)\"\r\n          [disabled]=\"isdisabled\"\r\n          (click)=\"showDateSelector()\"\r\n        />\r\n        <span class=\"input-group-btn\">\r\n          <button\r\n            class=\"btn btn-default\"\r\n            type=\"button\"\r\n            (click)=\"showDateSelector()\"\r\n            [disabled]=\"isdisabled\"\r\n          >\r\n            <i [class]=\"IconSelector\"></i>\r\n          </button>\r\n        </span>\r\n      </div>\r\n      <div\r\n        class=\"help-block help-block-error\"\r\n        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      >\r\n        {{ GetErrorMessage() | async }}\r\n      </div>\r\n\r\n      <div\r\n        class=\"popover bottom in\"\r\n        role=\"tooltip\"\r\n        *ngIf=\"_showselector\"\r\n        style=\"\r\n          display: block;\r\n          left: unset;\r\n          right: 0px;\r\n          top: 34px;\r\n          max-width: 325px;\r\n        \"\r\n      >\r\n        <div class=\"arrow\" style=\"left: unset; right: 10px\"></div>\r\n        <h3 class=\"popover-title\" style=\"display: none\"></h3>\r\n        <div class=\"popover-content\">\r\n          <sac-dateselector\r\n            *ngIf=\"_showselector\"\r\n            [initialvalue]=\"value\"\r\n            (selectdate)=\"dateselect($event)\"\r\n            dateselection=\"true\"\r\n            timeselection=\"true\"\r\n          ></sac-dateselector>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                    template: "<div\r\n  class=\"row form-group\"\r\n  [class.has-error]=\"invalid && (dirty || touched)\"\r\n  [ngClass]=\"componentHeight | toLabelHeight\"\r\n>\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-xs-12 control-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}\r\n    <sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n    >\r\n      <span\r\n        [class]=\"HelptextTooltipIcon\"\r\n        style=\"margin-left: 5px\"\r\n      ></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-xs-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      style=\"position: relative\"\r\n      [style.width.px]=\"componentHeight === ControlHeight.Small ? 160 : componentHeight === ControlHeight.Large ? 230 : 180\"\r\n    >\r\n      <div\r\n        id=\"{{name}}\"\r\n        class=\"datetime-textbox input-group\"\r\n        [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n        [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n      >\r\n        <input\r\n          id=\"{{name}}\"\r\n          name=\"{{name}}\"\r\n          type=\"text\"\r\n          class=\"form-control\"\r\n          [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n          [ngClass]=\"[componentHeight | toControlHeight]\"\r\n          [imask]=\"imaskDate\"\r\n          [attr.placeholder]=\"placeholder\"\r\n          [value]=\"valuestring\"\r\n          (blur)=\"onTouch()\"\r\n          (accept)=\"setValueString($event)\"\r\n          [disabled]=\"isdisabled\"\r\n          (click)=\"showDateSelector()\"\r\n        />\r\n        <span class=\"input-group-btn\">\r\n          <button\r\n            class=\"btn btn-default\"\r\n            type=\"button\"\r\n            (click)=\"showDateSelector()\"\r\n            [disabled]=\"isdisabled\"\r\n          >\r\n            <i [class]=\"IconSelector\"></i>\r\n          </button>\r\n        </span>\r\n      </div>\r\n      <p *ngIf=\"helptextmode === 'text' && helptext\" class=\"help-block\">\r\n        {{helptext}}\r\n      </p>\r\n      <div\r\n        class=\"help-block help-block-error\"\r\n        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      >\r\n        {{ GetErrorMessage() | async }}\r\n      </div>\r\n\r\n      <div\r\n        class=\"popover bottom in\"\r\n        role=\"tooltip\"\r\n        *ngIf=\"_showselector\"\r\n        style=\"display: block; left: 0px; right: unset; max-width: 325px\"\r\n        [style.top.px]=\"componentHeight === ControlHeight.Large ? 46 : 34\"\r\n      >\r\n        <div\r\n          class=\"arrow\"\r\n          [style.left.px]=\"componentHeight === ControlHeight.Small ? 140 : componentHeight === ControlHeight.Large ? 205 : 160\"\r\n          style=\"right: unset\"\r\n        ></div>\r\n        <h3 class=\"popover-title\" style=\"display: none\"></h3>\r\n        <div class=\"popover-content\">\r\n          <sac-dateselector\r\n            *ngIf=\"_showselector\"\r\n            [initialvalue]=\"value\"\r\n            (selectdate)=\"dateselect($event)\"\r\n            dateselection=\"true\"\r\n            timeselection=\"true\"\r\n          ></sac-dateselector>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
                     // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                     providers: [
                         {
@@ -1132,7 +1203,7 @@
     SacTimeComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-time',
-                    template: "<div\r\n  class=\"row form-group\"\r\n  [class.has-error]=\"invalid && (dirty || touched)\"\r\n  [ngClass]=\"componentHeight | toLabelHeight\"\r\n>\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-xs-12 control-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-xs-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      style=\"position: relative\"\r\n      [style.width.px]=\"componentHeight === ControlHeight.Small ? 120 : componentHeight === ControlHeight.Large ? 160 : 140\"\r\n    >\r\n      <div\r\n        class=\"input-group\"\r\n        [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n        [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n      >\r\n        <input\r\n          id=\"{{name}}\"\r\n          name=\"{{name}}\"\r\n          type=\"text\"\r\n          [value]=\"valuestring\"\r\n          maxlength=\"6\"\r\n          [imask]=\"imaskDate\"\r\n          size=\"6\"\r\n          class=\"form-control\"\r\n          [attr.placeholder]=\"placeholder\"\r\n          data-error-msg=\"ctl00_cphContent_ctl00_ucPublicationDetail_dtpValidFrom_timeTextBoxTypeValidator\"\r\n          [ngClass]=\"{'is-invalid': invalid && (dirty || touched) }\"\r\n          (blur)=\"onTouch()\"\r\n          (accept)=\"setValueString($event)\"\r\n          [disabled]=\"isdisabled\"\r\n        />\r\n        <span class=\"input-group-btn\">\r\n          <button\r\n            class=\"btn btn-default\"\r\n            type=\"button\"\r\n            (click)=\"showTimeSelector()\"\r\n            [disabled]=\"isdisabled\"\r\n          >\r\n            <i [class]=\"IconSelector\"></i>\r\n          </button>\r\n        </span>\r\n      </div>\r\n      <div\r\n        class=\"help-block help-block-error\"\r\n        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      >\r\n        {{ GetErrorMessage() | async }}\r\n      </div>\r\n      <div\r\n        class=\"popover bottom in\"\r\n        role=\"tooltip\"\r\n        *ngIf=\"_showselector\"\r\n        style=\"\r\n          display: block;\r\n          left: unset;\r\n          right: 0px;\r\n          top: 34px;\r\n          max-width: 325px;\r\n        \"\r\n      >\r\n        <div class=\"arrow\" style=\"left: unset; right: 10px\"></div>\r\n        <h3 class=\"popover-title\" style=\"display: none\"></h3>\r\n        <div class=\"popover-content\">\r\n          <sac-dateselector\r\n            *ngIf=\"_showselector\"\r\n            [initialvalue]=\"value\"\r\n            (selectdate)=\"timeselect($event)\"\r\n            timeselection=\"true\"\r\n          ></sac-dateselector>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                    template: "<div\r\n  class=\"row form-group\"\r\n  [class.has-error]=\"invalid && (dirty || touched)\"\r\n  [ngClass]=\"componentHeight | toLabelHeight\"\r\n>\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-xs-12 control-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}\r\n    <sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n    >\r\n      <span\r\n        [class]=\"HelptextTooltipIcon\"\r\n        style=\"margin-left: 5px\"\r\n      ></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-xs-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      style=\"position: relative\"\r\n      [style.width.px]=\"componentHeight === ControlHeight.Small ? 120 : componentHeight === ControlHeight.Large ? 160 : 140\"\r\n    >\r\n      <div\r\n        class=\"input-group\"\r\n        [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n        [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n      >\r\n        <input\r\n          id=\"{{name}}\"\r\n          name=\"{{name}}\"\r\n          type=\"text\"\r\n          [value]=\"valuestring\"\r\n          maxlength=\"6\"\r\n          [imask]=\"imaskDate\"\r\n          size=\"6\"\r\n          class=\"form-control\"\r\n          [attr.placeholder]=\"placeholder\"\r\n          data-error-msg=\"ctl00_cphContent_ctl00_ucPublicationDetail_dtpValidFrom_timeTextBoxTypeValidator\"\r\n          [ngClass]=\"{'is-invalid': invalid && (dirty || touched) }\"\r\n          (blur)=\"onTouch()\"\r\n          (accept)=\"setValueString($event)\"\r\n          [disabled]=\"isdisabled\"\r\n        />\r\n        <span class=\"input-group-btn\">\r\n          <button\r\n            class=\"btn btn-default\"\r\n            type=\"button\"\r\n            (click)=\"showTimeSelector()\"\r\n            [disabled]=\"isdisabled\"\r\n          >\r\n            <i [class]=\"IconSelector\"></i>\r\n          </button>\r\n        </span>\r\n      </div>\r\n      <p *ngIf=\"helptextmode === 'text' && helptext\" class=\"help-block\">\r\n        {{helptext}}\r\n      </p>\r\n      <div\r\n        class=\"help-block help-block-error\"\r\n        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      >\r\n        {{ GetErrorMessage() | async }}\r\n      </div>\r\n      <div\r\n        class=\"popover bottom in\"\r\n        role=\"tooltip\"\r\n        *ngIf=\"_showselector\"\r\n        style=\"display: block; left: 0px; right: unset; max-width: 325px\"\r\n        [style.top.px]=\"componentHeight === ControlHeight.Large ? 46 : 34\"\r\n      >\r\n        <div\r\n          class=\"arrow\"\r\n          [style.left.px]=\"componentHeight === ControlHeight.Small ? 102 : componentHeight === ControlHeight.Large ? 135 : 120\"\r\n          style=\"right: unset\"\r\n        ></div>\r\n        <h3 class=\"popover-title\" style=\"display: none\"></h3>\r\n        <div class=\"popover-content\">\r\n          <sac-dateselector\r\n            *ngIf=\"_showselector\"\r\n            [initialvalue]=\"value\"\r\n            (selectdate)=\"timeselect($event)\"\r\n            timeselection=\"true\"\r\n          ></sac-dateselector>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
                     // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                     providers: [
                         {
@@ -1167,7 +1238,12 @@
                         SacTimeComponent,
                         SacDateSelectorComponent,
                     ],
-                    imports: [common.CommonModule, angularImask.IMaskModule, SACBootstrap3LayoutModule],
+                    imports: [
+                        common.CommonModule,
+                        angularImask.IMaskModule,
+                        SACBootstrap3LayoutModule,
+                        SACBootstrap3TooltipModule,
+                    ],
                     exports: [
                         SacDateComponent,
                         SacDateTimeComponent,
@@ -1189,7 +1265,7 @@
     SacGridComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-grid',
-                    template: "<table class=\"table table-striped table-condensed table-hover\" id={{name}}>\r\n  <thead>\r\n    <tr>\r\n      <ng-container *ngTemplateOutlet=\"template; context { row: {}, type: 'header'}\">\r\n      </ng-container>\r\n    </tr>\r\n  </thead>\r\n  <tbody>\r\n    <ng-container *ngFor=\"let item of value; let i=index\">\r\n      <tr>\r\n        <ng-container *ngTemplateOutlet=\"template; context { row: item, type: 'body'}\">\r\n        </ng-container>\r\n      </tr>\r\n    </ng-container>\r\n    <tr *ngIf=\"value === undefined || value === null || value.length === 0\">\r\n      <td [attr.colspan]=\"ColumnCount\">{{emptytext}}</td>\r\n    </tr>\r\n    <tr>\r\n      <td [attr.colspan]=\"ColumnCount\">\r\n        <div class=\"container-fluid\">\r\n          <sac-paging name=\"{{name}}Paging\" (paging)=\"pageChange($event)\" [pagerdata]=\"pagerdata\" [pagingtext]=\"pagingtext\" [pagesizetext]=\"pagesizetext\"></sac-paging>\r\n        </div>\r\n      </td>\r\n    </tr>\r\n  </tbody>\r\n</table>\r\n",
+                    template: "<table class=\"table table-striped table-condensed table-hover\" id=\"{{name}}\">\r\n  <thead>\r\n    <tr>\r\n      <ng-container\r\n        *ngTemplateOutlet=\"template; context { row: {}, type: 'header'}\"\r\n      >\r\n      </ng-container>\r\n    </tr>\r\n  </thead>\r\n  <tbody>\r\n    <ng-container *ngFor=\"let item of value; let i=index\">\r\n      <tr>\r\n        <ng-container\r\n          *ngTemplateOutlet=\"template; context { row: item, type: 'body'}\"\r\n        >\r\n        </ng-container>\r\n      </tr>\r\n    </ng-container>\r\n    <tr *ngIf=\"value === undefined || value === null || value.length === 0\">\r\n      <td [attr.colspan]=\"ColumnCount\">{{emptytext}}</td>\r\n    </tr>\r\n    <tr *ngIf=\"pagerdata\">\r\n      <td [attr.colspan]=\"ColumnCount\">\r\n        <div class=\"container-fluid\">\r\n          <sac-paging\r\n            name=\"{{name}}Paging\"\r\n            (paging)=\"pageChange($event)\"\r\n            [pagerdata]=\"pagerdata\"\r\n            [pagingtext]=\"pagingtext\"\r\n            [pagesizetext]=\"pagesizetext\"\r\n          ></sac-paging>\r\n        </div>\r\n      </td>\r\n    </tr>\r\n  </tbody>\r\n</table>\r\n",
                     // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                     providers: [
                         { provide: forms.NG_VALUE_ACCESSOR, multi: true, useExisting: SacGridComponent },
@@ -1201,50 +1277,17 @@
         template: [{ type: core.ContentChild, args: [core.TemplateRef, { static: true },] }]
     };
 
-    var SacGridColumnComponent = /** @class */ (function (_super) {
-        __extends(SacGridColumnComponent, _super);
-        function SacGridColumnComponent(grid, injector, el) {
-            return _super.call(this, grid, injector, el) || this;
-        }
-        return SacGridColumnComponent;
-    }(sacCommon.SacGridColumnCommon));
-    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]=\"IconSortUp\"\r\n    style=\"padding-left: 0.5rem\"\r\n    *ngIf=\"IsSortedColumn() && GetSortDirection() ==='asc'\"\r\n  ></span>\r\n  <span\r\n    [class]=\"IconSortDown\"\r\n    style=\"padding-left: 0.5rem\"\r\n    *ngIf=\"IsSortedColumn() && GetSortDirection() ==='desc'\"\r\n  ></span>\r\n</th>\r\n<td\r\n  scope=\"col\"\r\n  *ngIf=\"IsBody()\"\r\n  [style.width]=\"width\"\r\n  [class.ellipsis]=\"IsEllipsis()\"\r\n>\r\n  <span [attr.title]=\"IsEllipsis() ? value : null\"> {{value}} </span>\r\n</td>\r\n",
-                    providers: [
-                        {
-                            provide: sacCommon.SacGridColumnBaseCommon,
-                            useExisting: core.forwardRef(function () { return SacGridColumnComponent; }),
-                        },
-                    ]
-                },] }
-    ];
-    SacGridColumnComponent.ctorParameters = function () { return [
-        { type: SacGridComponent },
-        { type: core.Injector },
-        { type: core.ElementRef }
-    ]; };
-
     /**
      * Grid Action Button
-     *
-     * @example Standard Action
-     *
-     * <ngGridButton icon="edit" (clicked)="action('edit')" [isdisabled]="true"></ngGridButton>
-     *
-     * @example Custom Action
-     *
-     * <ngGridButton iconstyle="sprite" icon="icon-sprite-base-main_info" (clicked)="action('info')"></ngGridButton>
-     *
      */
     var SacGridButtonComponent = /** @class */ (function (_super) {
         __extends(SacGridButtonComponent, _super);
         function SacGridButtonComponent() {
             return _super !== null && _super.apply(this, arguments) || this;
         }
+        // #region Public Methods
         /**
-         * Gibt das Icon für den Button zurück
+         * Returns the icon for the button
          */
         SacGridButtonComponent.prototype.getIconClass = function () {
             var iconset = this.iconstyle;
@@ -1276,29 +1319,29 @@
                 },] }
     ];
 
-    var SacPagingComponent = /** @class */ (function (_super) {
-        __extends(SacPagingComponent, _super);
-        /**
-         * Konstruktor
-         */
-        function SacPagingComponent(injector) {
-            return _super.call(this, injector) || this;
+    var SacGridColumnComponent = /** @class */ (function (_super) {
+        __extends(SacGridColumnComponent, _super);
+        function SacGridColumnComponent(grid, injector, el) {
+            return _super.call(this, grid, injector, el) || this;
         }
-        return SacPagingComponent;
-    }(sacCommon.SacPagingCommon));
-    SacPagingComponent.decorators = [
+        return SacGridColumnComponent;
+    }(sacCommon.SacGridColumnCommon));
+    SacGridColumnComponent.decorators = [
         { type: core.Component, args: [{
-                    selector: 'sac-paging',
-                    template: "<div class=\"row\">\r\n  <div class=\"pager-nav col-sm-9\" id=\"{{name}}\">\r\n    <ul class=\"pagination\" style=\"margin: 10px 0\">\r\n      <li\r\n        [ngClass]=\"{'aspNetDisabled disabled': activePageIndex === firstPageIndex}\"\r\n      >\r\n        <a (click)=\"firstPage()\">\u00AB</a>\r\n      </li>\r\n      <li\r\n        *ngFor=\"let page of paginators; let i = index\"\r\n        [ngClass]=\"{'active': page === activePageIndex}\"\r\n      >\r\n        <a (click)=\"changePage(page)\">{{page + 1 }}</a>\r\n      </li>\r\n      <li\r\n        [ngClass]=\"{'aspNetDisabled disabled': activePageIndex === lastPageIndex}\"\r\n      >\r\n        <a (click)=\"lastPage()\">\u00BB</a>\r\n      </li>\r\n    </ul>\r\n  </div>\r\n  <div class=\"col-sm-3 text-right\" style=\"margin: 20px 0\">\r\n    Seite {{getCurrentPageNumber()}} von {{getTotalPageNumber()}}\r\n  </div>\r\n</div>\r\n",
-                    // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
+                    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]=\"IconSortUp\"\r\n    style=\"padding-left: 0.5rem\"\r\n    *ngIf=\"IsSortedColumn() && GetSortDirection() ==='asc'\"\r\n  ></span>\r\n  <span\r\n    [class]=\"IconSortDown\"\r\n    style=\"padding-left: 0.5rem\"\r\n    *ngIf=\"IsSortedColumn() && GetSortDirection() ==='desc'\"\r\n  ></span>\r\n</th>\r\n<td\r\n  scope=\"col\"\r\n  *ngIf=\"IsBody()\"\r\n  [style.width]=\"width\"\r\n  [class.ellipsis]=\"IsEllipsis()\"\r\n>\r\n  <span [attr.title]=\"IsEllipsis() ? value : null\"> {{value}} </span>\r\n</td>\r\n",
                     providers: [
-                        { provide: forms.NG_VALUE_ACCESSOR, multi: true, useExisting: SacPagingComponent },
-                        { provide: forms.NG_VALIDATORS, multi: true, useExisting: core.forwardRef(function () { return SacPagingComponent; }) }
+                        {
+                            provide: sacCommon.SacGridColumnBaseCommon,
+                            useExisting: core.forwardRef(function () { return SacGridColumnComponent; }),
+                        },
                     ]
                 },] }
     ];
-    SacPagingComponent.ctorParameters = function () { return [
-        { type: core.Injector }
+    SacGridColumnComponent.ctorParameters = function () { return [
+        { type: SacGridComponent },
+        { type: core.Injector },
+        { type: core.ElementRef }
     ]; };
 
     var SacGridColumnActionComponent = /** @class */ (function (_super) {
@@ -1352,75 +1395,55 @@
                 },] }
     ];
 
-    var SACBootstrap3GridModule = /** @class */ (function () {
-        function SACBootstrap3GridModule() {
-        }
-        return SACBootstrap3GridModule;
-    }());
-    SACBootstrap3GridModule.decorators = [
-        { type: core.NgModule, args: [{
-                    declarations: [SacGridComponent, SacGridColumnComponent, SacGridColumnActionComponent, SacPagingComponent, SacGridButtonComponent, SacGridImageComponent],
-                    imports: [
-                        common.CommonModule
-                    ],
-                    exports: [SacGridComponent, SacGridColumnComponent, SacGridColumnActionComponent, SacPagingComponent, SacGridButtonComponent, SacGridImageComponent]
-                },] }
-    ];
-
-    /**
-     * Tooltip Komponente
-     *
-     * @example ToolTip Control
-     *
-     *  <ngTooltip tooltiptext="Mein Tooltip" [inlinemode]="true">
-     *    <i class="tooltip"></i>
-     *  </ngTooltip>
-     *
-     * @example ToolTip Control im Inline Mode. Style auf Icon kann auch in Klasse ausgelagert werden.
-     *
-     *  <div class="form-inline">
-     *    <ngInputSearch iconname="Suchen"></ngInputSearch>
-     *    <ngTooltip tooltiptext="Mein Tooltip" [inlinemode]="true">
-     *      <i class="tooltip" style="position: relative; left: 0; top: 3px; display: inline-block; margin-right: 10px;"></i>
-     *    </ngTooltip>
-     *  </div>
-     *
-     */
-    var SacTooltipComponent = /** @class */ (function (_super) {
-        __extends(SacTooltipComponent, _super);
+    var SacPagingComponent = /** @class */ (function (_super) {
+        __extends(SacPagingComponent, _super);
         /**
-         * Konstrukor
-         * @param parent SacFormular Instanz
-         * @param injector Component Injector
+         * Konstruktor
          */
-        function SacTooltipComponent(cdRef, ref) {
-            return _super.call(this, cdRef, ref) || this;
+        function SacPagingComponent(injector) {
+            return _super.call(this, injector) || this;
         }
-        return SacTooltipComponent;
-    }(sacCommon.SacTooltipCommon));
-    SacTooltipComponent.decorators = [
+        return SacPagingComponent;
+    }(sacCommon.SacPagingCommon));
+    SacPagingComponent.decorators = [
         { type: core.Component, args: [{
-                    selector: 'sac-tooltip',
-                    template: "<div [style.display]=\"inlinemode ? 'inline' : null\">\r\n  <div #container (mouseenter)=\"ShowTooltip()\" (mouseleave)=\"HideTooltip()\" [style.display]=\"inlinemode ? 'inline' : null\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n  <div *ngIf=\"IsTooltipVisible()\" [style.visibility]=\"IsTooltipContentVisible ? 'visible' : 'hidden'\" #tooltip class=\"tooltip in\" style=\"display: block;\"\r\n       [style.left.px]=\"LeftPos\" [style.top.px]=\"TopPos\"\r\n       [class.top]=\"GetTooltipPosition() === TooltipPosition.top\" [class.left]=\"GetTooltipPosition() === TooltipPosition.left\"\r\n       [class.right]=\"GetTooltipPosition() === TooltipPosition.right\" [class.bottom]=\"GetTooltipPosition() === TooltipPosition.bottom\">\r\n    <div class=\"tooltip-arrow\" style=\"top: 50%;\"></div>\r\n    <div class=\"tooltip-inner\">\r\n      {{tooltiptext}}\r\n    </div>\r\n  </div>\r\n</div>\r\n"
+                    selector: 'sac-paging',
+                    template: "<div class=\"row\">\r\n  <div class=\"pager-nav col-sm-4\" id=\"{{name}}\">\r\n    <ul class=\"pagination\" style=\"margin: 10px 0\">\r\n      <li\r\n        [ngClass]=\"{'aspNetDisabled disabled': activePageIndex === firstPageIndex}\"\r\n      >\r\n        <a (click)=\"firstPage()\">\u00AB</a>\r\n      </li>\r\n      <li\r\n        *ngFor=\"let page of paginators; let i = index\"\r\n        [ngClass]=\"{'active': page === activePageIndex}\"\r\n      >\r\n        <a (click)=\"changePage(page)\">{{page + 1 }}</a>\r\n      </li>\r\n      <li\r\n        [ngClass]=\"{'aspNetDisabled disabled': activePageIndex === lastPageIndex}\"\r\n      >\r\n        <a (click)=\"lastPage()\">\u00BB</a>\r\n      </li>\r\n    </ul>\r\n  </div>\r\n  <div class=\"col-sm-4 text-center\" style=\"margin: 20px 0\">\r\n    Seite {{getCurrentPageNumber()}} von {{getTotalPageNumber()}}\r\n  </div>\r\n  <div\r\n    class=\"col-sm-4 text-right\"\r\n    *ngIf=\"!pagesizedisabled\"\r\n    style=\"margin: 12px 0\"\r\n  >\r\n    <div class=\"form-inline\">\r\n      <div class=\"form-group\" id=\"{{name}}_size\">\r\n        <select\r\n          class=\"form-control form-control-sm\"\r\n          style=\"width: 85px\"\r\n          [ngModel]=\"pageSize\"\r\n          (ngModelChange)=\"changePageSize($event)\"\r\n        >\r\n          <option [ngValue]=\"size\" *ngFor=\"let size of getPageSizes\">\r\n            {{size}}\r\n          </option>\r\n        </select>\r\n        <span style=\"margin-left: 5px\">{{ PageSizeText | async }}</span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                    // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
+                    providers: [
+                        { provide: forms.NG_VALUE_ACCESSOR, multi: true, useExisting: SacPagingComponent },
+                        { provide: forms.NG_VALIDATORS, multi: true, useExisting: core.forwardRef(function () { return SacPagingComponent; }) }
+                    ]
                 },] }
     ];
-    SacTooltipComponent.ctorParameters = function () { return [
-        { type: core.ChangeDetectorRef },
-        { type: core.ElementRef }
+    SacPagingComponent.ctorParameters = function () { return [
+        { type: core.Injector }
     ]; };
 
-    var SACBootstrap3TooltipModule = /** @class */ (function () {
-        function SACBootstrap3TooltipModule() {
+    var SACBootstrap3GridModule = /** @class */ (function () {
+        function SACBootstrap3GridModule() {
         }
-        return SACBootstrap3TooltipModule;
+        return SACBootstrap3GridModule;
     }());
-    SACBootstrap3TooltipModule.decorators = [
+    SACBootstrap3GridModule.decorators = [
         { type: core.NgModule, args: [{
-                    declarations: [SacTooltipComponent],
-                    imports: [
-                        common.CommonModule, common.CommonModule
+                    declarations: [
+                        SacGridComponent,
+                        SacGridColumnComponent,
+                        SacGridColumnActionComponent,
+                        SacPagingComponent,
+                        SacGridButtonComponent,
+                        SacGridImageComponent,
+                    ],
+                    imports: [common.CommonModule, forms.FormsModule],
+                    exports: [
+                        SacGridComponent,
+                        SacGridColumnComponent,
+                        SacGridColumnActionComponent,
+                        SacPagingComponent,
+                        SacGridButtonComponent,
+                        SacGridImageComponent,
                     ],
-                    exports: [SacTooltipComponent]
                 },] }
     ];
 
@@ -1440,7 +1463,7 @@
     SacInputComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-input',
-                    template: "<div\r\n  class=\"row form-group\"\r\n  [class.has-error]=\"invalid && (dirty || touched)\"\r\n  [ngClass]=\"componentHeight | toLabelHeight\"\r\n>\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-xs-12 control-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-xs-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <input\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      type=\"text\"\r\n      class=\"form-control\"\r\n      [ngClass]=\"[componentHeight | toControlHeight]\"\r\n      [value]=\"value\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      (blur)=\"onTouch()\"\r\n      (input)=\"setValue($event.target.value)\"\r\n      [attr.maxlength]=\"maxlength\"\r\n      [disabled]=\"isdisabled\"\r\n      [readonly]=\"readonly\"\r\n    />\r\n    <label\r\n      for=\"{{name}}\"\r\n      class=\"form-label-adaptive form-label-fixed\"\r\n      [ngClass]=\"{ 'required': isrequired }\"\r\n      *ngIf=\"isAdaptiveLabel && !disablelabel\"\r\n      >{{label}}</label\r\n    >\r\n    <div\r\n      class=\"help-block help-block-error\"\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                    template: "<div\r\n  class=\"row form-group\"\r\n  [class.has-error]=\"invalid && (dirty || touched)\"\r\n  [ngClass]=\"componentHeight | toLabelHeight\"\r\n>\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-xs-12 control-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}\r\n    <sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n    >\r\n      <span\r\n        [class]=\"HelptextTooltipIcon\"\r\n        style=\"margin-left: 5px\"\r\n      ></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-xs-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <input\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      type=\"text\"\r\n      class=\"form-control\"\r\n      [ngClass]=\"[componentHeight | toControlHeight]\"\r\n      [value]=\"value\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      (blur)=\"onTouch()\"\r\n      (input)=\"setValue($event.target.value)\"\r\n      [attr.maxlength]=\"maxlength\"\r\n      [disabled]=\"isdisabled\"\r\n      [readonly]=\"readonly\"\r\n    />\r\n    <p *ngIf=\"helptextmode === 'text' && helptext\" class=\"help-block\">\r\n      {{helptext}}\r\n    </p>\r\n    <label\r\n      for=\"{{name}}\"\r\n      class=\"form-label-adaptive form-label-fixed\"\r\n      [ngClass]=\"{ 'required': isrequired }\"\r\n      *ngIf=\"isAdaptiveLabel && !disablelabel\"\r\n      >{{label}}</label\r\n    >\r\n    <div\r\n      class=\"help-block help-block-error\"\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n",
                     // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                     providers: [
                         { provide: forms.NG_VALUE_ACCESSOR, multi: true, useExisting: SacInputComponent },
@@ -1485,7 +1508,7 @@
     SacInputAreaComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-inputarea',
-                    template: "<div\r\n  class=\"row form-group\"\r\n  [class.has-error]=\"invalid && (dirty || touched)\"\r\n  [ngClass]=\"componentHeight | toLabelHeight\"\r\n>\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-xs-12 control-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-xs-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <textarea\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      type=\"\"\r\n      class=\"form-control\"\r\n      [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n      [class.validation-error]=\"invalid && (dirty || touched)\"\r\n      [class.required]=\"isrequired\"\r\n      [ngClass]=\"[componentHeight | toControlHeight]\"\r\n      [value]=\"value\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      (blur)=\"onTouch()\"\r\n      (input)=\"setValue($event.target.value)\"\r\n      (keypress)=\"onKeyPress($event)\"\r\n      [attr.rows]=\"rows\"\r\n      [disabled]=\"isdisabled\"\r\n      [readonly]=\"readonly\"\r\n    ></textarea>\r\n    <label\r\n      for=\"{{name}}\"\r\n      class=\"form-label-adaptive form-label-fixed\"\r\n      [ngClass]=\"{ 'required': isrequired }\"\r\n      *ngIf=\"isAdaptiveLabel && !disablelabel\"\r\n      >{{label}}</label\r\n    >\r\n    <div\r\n      class=\"help-block help-block-error\"\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                    template: "<div\r\n  class=\"row form-group\"\r\n  [class.has-error]=\"invalid && (dirty || touched)\"\r\n  [ngClass]=\"componentHeight | toLabelHeight\"\r\n>\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-xs-12 control-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}\r\n    <sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n    >\r\n      <span\r\n        [class]=\"HelptextTooltipIcon\"\r\n        style=\"margin-left: 5px\"\r\n      ></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-xs-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <textarea\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      type=\"\"\r\n      class=\"form-control\"\r\n      [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n      [class.validation-error]=\"invalid && (dirty || touched)\"\r\n      [class.required]=\"isrequired\"\r\n      [ngClass]=\"[componentHeight | toControlHeight]\"\r\n      [value]=\"value\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      (blur)=\"onTouch()\"\r\n      (input)=\"setValue($event.target.value)\"\r\n      (keypress)=\"onKeyPress($event)\"\r\n      [attr.rows]=\"rows\"\r\n      [disabled]=\"isdisabled\"\r\n      [readonly]=\"readonly\"\r\n    ></textarea>\r\n    <p *ngIf=\"helptextmode === 'text' && helptext\" class=\"help-block\">\r\n      {{helptext}}\r\n    </p>\r\n    <label\r\n      for=\"{{name}}\"\r\n      class=\"form-label-adaptive form-label-fixed\"\r\n      [ngClass]=\"{ 'required': isrequired }\"\r\n      *ngIf=\"isAdaptiveLabel && !disablelabel\"\r\n      >{{label}}</label\r\n    >\r\n    <div\r\n      class=\"help-block help-block-error\"\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n",
                     // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                     providers: [
                         {
@@ -1522,7 +1545,7 @@
     SacInputCurrencyComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-inputcurrency',
-                    template: "<div\r\n  class=\"row form-group\"\r\n  [class.has-error]=\"invalid && (dirty || touched)\"\r\n  [ngClass]=\"componentHeight | toLabelHeight\"\r\n>\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-xs-12 control-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-xs-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group\"\r\n      [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n    >\r\n      <input\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        [ngClass]=\"[componentHeight | toControlHeight]\"\r\n        [value]=\"value\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        (blur)=\"onTouch()\"\r\n        (input)=\"setValue($event.target.value)\"\r\n        (keypress)=\"onKeyPress($event)\"\r\n        [disabled]=\"isdisabled\"\r\n        [readonly]=\"readonly\"\r\n      />\r\n      <label\r\n        for=\"{{name}}\"\r\n        class=\"form-label-adaptive form-label-fixed\"\r\n        [ngClass]=\"{ 'required': isrequired }\"\r\n        *ngIf=\"isAdaptiveLabel && !disablelabel\"\r\n        >{{label}}</label\r\n      >\r\n      <div class=\"input-group-addon\">{{currency}}</div>\r\n    </div>\r\n    <div\r\n      class=\"help-block help-block-error\"\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                    template: "<div\r\n  class=\"row form-group\"\r\n  [class.has-error]=\"invalid && (dirty || touched)\"\r\n  [ngClass]=\"componentHeight | toLabelHeight\"\r\n>\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-xs-12 control-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}\r\n    <sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n    >\r\n      <span\r\n        [class]=\"HelptextTooltipIcon\"\r\n        style=\"margin-left: 5px\"\r\n      ></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-xs-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group\"\r\n      [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n    >\r\n      <input\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        [ngClass]=\"[componentHeight | toControlHeight]\"\r\n        [value]=\"value\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        (blur)=\"onTouch()\"\r\n        (input)=\"setValue($event.target.value)\"\r\n        (keypress)=\"onKeyPress($event)\"\r\n        [disabled]=\"isdisabled\"\r\n        [readonly]=\"readonly\"\r\n      />\r\n      <label\r\n        for=\"{{name}}\"\r\n        class=\"form-label-adaptive form-label-fixed\"\r\n        [ngClass]=\"{ 'required': isrequired }\"\r\n        *ngIf=\"isAdaptiveLabel && !disablelabel\"\r\n        >{{label}}</label\r\n      >\r\n      <div class=\"input-group-addon\">{{currency}}</div>\r\n    </div>\r\n    <p *ngIf=\"helptextmode === 'text' && helptext\" class=\"help-block\">\r\n      {{helptext}}\r\n    </p>\r\n    <div\r\n      class=\"help-block help-block-error\"\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n",
                     // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                     providers: [
                         {
@@ -1559,7 +1582,7 @@
     SacInputDecimalComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-inputdecimal',
-                    template: "<div\r\n  class=\"row form-group\"\r\n  [class.has-error]=\"invalid && (dirty || touched)\"\r\n  [ngClass]=\"componentHeight | toLabelHeight\"\r\n>\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-xs-12 control-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-xs-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <input\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      type=\"text\"\r\n      class=\"form-control\"\r\n      [ngClass]=\"[componentHeight | toControlHeight]\"\r\n      [value]=\"value\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      (blur)=\"onTouch()\"\r\n      (input)=\"setValue($event.target.value)\"\r\n      (keypress)=\"onKeyPress($event)\"\r\n      [disabled]=\"isdisabled\"\r\n      [readonly]=\"readonly\"\r\n    />\r\n    <label\r\n      for=\"{{name}}\"\r\n      class=\"form-label-adaptive form-label-fixed\"\r\n      [ngClass]=\"{ 'required': isrequired }\"\r\n      *ngIf=\"isAdaptiveLabel && !disablelabel\"\r\n      >{{label}}</label\r\n    >\r\n    <div\r\n      class=\"help-block help-block-error\"\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                    template: "<div\r\n  class=\"row form-group\"\r\n  [class.has-error]=\"invalid && (dirty || touched)\"\r\n  [ngClass]=\"componentHeight | toLabelHeight\"\r\n>\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-xs-12 control-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}\r\n    <sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n    >\r\n      <span\r\n        [class]=\"HelptextTooltipIcon\"\r\n        style=\"margin-left: 5px\"\r\n      ></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-xs-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <input\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      type=\"text\"\r\n      class=\"form-control\"\r\n      [ngClass]=\"[componentHeight | toControlHeight]\"\r\n      [value]=\"value\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      (blur)=\"onTouch()\"\r\n      (input)=\"setValue($event.target.value)\"\r\n      (keypress)=\"onKeyPress($event)\"\r\n      [disabled]=\"isdisabled\"\r\n      [readonly]=\"readonly\"\r\n    />\r\n    <p *ngIf=\"helptextmode === 'text' && helptext\" class=\"help-block\">\r\n      {{helptext}}\r\n    </p>\r\n    <label\r\n      for=\"{{name}}\"\r\n      class=\"form-label-adaptive form-label-fixed\"\r\n      [ngClass]=\"{ 'required': isrequired }\"\r\n      *ngIf=\"isAdaptiveLabel && !disablelabel\"\r\n      >{{label}}</label\r\n    >\r\n    <div\r\n      class=\"help-block help-block-error\"\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n",
                     // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                     providers: [
                         {
@@ -1596,7 +1619,7 @@
     SacInputEmailComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-inputemail',
-                    template: "<div\r\n  class=\"row form-group\"\r\n  [class.has-error]=\"invalid && (dirty || touched)\"\r\n  [ngClass]=\"componentHeight | toLabelHeight\"\r\n>\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-xs-12 control-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-xs-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group\"\r\n      [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n    >\r\n      <div class=\"input-group-addon\">@</div>\r\n      <input\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        [ngClass]=\"[componentHeight | toControlHeight]\"\r\n        [value]=\"value\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        (blur)=\"onTouch()\"\r\n        (input)=\"setValue($event.target.value)\"\r\n        autocomplete=\"email\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        [disabled]=\"isdisabled\"\r\n        [readonly]=\"readonly\"\r\n      />\r\n      <label\r\n        for=\"{{name}}\"\r\n        class=\"form-label-adaptive form-label-fixed\"\r\n        [ngClass]=\"{ 'required': isrequired }\"\r\n        *ngIf=\"isAdaptiveLabel && !disablelabel\"\r\n        >{{label}}</label\r\n      >\r\n    </div>\r\n    <div\r\n      class=\"help-block help-block-error\"\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                    template: "<div\r\n  class=\"row form-group\"\r\n  [class.has-error]=\"invalid && (dirty || touched)\"\r\n  [ngClass]=\"componentHeight | toLabelHeight\"\r\n>\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-xs-12 control-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}\r\n    <sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n    >\r\n      <span\r\n        [class]=\"HelptextTooltipIcon\"\r\n        style=\"margin-left: 5px\"\r\n      ></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-xs-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group\"\r\n      [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n    >\r\n      <div class=\"input-group-addon\">@</div>\r\n      <input\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        [ngClass]=\"[componentHeight | toControlHeight]\"\r\n        [value]=\"value\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        (blur)=\"onTouch()\"\r\n        (input)=\"setValue($event.target.value)\"\r\n        autocomplete=\"email\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        [disabled]=\"isdisabled\"\r\n        [readonly]=\"readonly\"\r\n      />\r\n      <label\r\n        for=\"{{name}}\"\r\n        class=\"form-label-adaptive form-label-fixed\"\r\n        [ngClass]=\"{ 'required': isrequired }\"\r\n        *ngIf=\"isAdaptiveLabel && !disablelabel\"\r\n        >{{label}}</label\r\n      >\r\n    </div>\r\n    <p *ngIf=\"helptextmode === 'text' && helptext\" class=\"help-block\">\r\n      {{helptext}}\r\n    </p>\r\n    <div\r\n      class=\"help-block help-block-error\"\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n",
                     // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                     providers: [
                         {
@@ -1633,7 +1656,7 @@
     SacInputIntegerComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-inputinteger',
-                    template: "<div\r\n  class=\"row form-group\"\r\n  [class.has-error]=\"invalid && (dirty || touched)\"\r\n  [ngClass]=\"componentHeight | toLabelHeight\"\r\n>\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-xs-12 control-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-xs-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <input\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      type=\"text\"\r\n      class=\"form-control\"\r\n      [ngClass]=\"[componentHeight | toControlHeight]\"\r\n      [value]=\"value\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      (blur)=\"onTouch()\"\r\n      (input)=\"setValue($event.target.value)\"\r\n      (keypress)=\"onKeyPress($event)\"\r\n      [disabled]=\"isdisabled\"\r\n      [readonly]=\"readonly\"\r\n    />\r\n    <label\r\n      for=\"{{name}}\"\r\n      class=\"form-label-adaptive form-label-fixed\"\r\n      [ngClass]=\"{ 'required': isrequired }\"\r\n      *ngIf=\"isAdaptiveLabel && !disablelabel\"\r\n      >{{label}}</label\r\n    >\r\n    <div\r\n      class=\"help-block help-block-error\"\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                    template: "<div\r\n  class=\"row form-group\"\r\n  [class.has-error]=\"invalid && (dirty || touched)\"\r\n  [ngClass]=\"componentHeight | toLabelHeight\"\r\n>\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-xs-12 control-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}\r\n    <sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n    >\r\n      <span\r\n        [class]=\"HelptextTooltipIcon\"\r\n        style=\"margin-left: 5px\"\r\n      ></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-xs-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <input\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      type=\"text\"\r\n      class=\"form-control\"\r\n      [ngClass]=\"[componentHeight | toControlHeight]\"\r\n      [value]=\"value\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      (blur)=\"onTouch()\"\r\n      (input)=\"setValue($event.target.value)\"\r\n      (keypress)=\"onKeyPress($event)\"\r\n      [disabled]=\"isdisabled\"\r\n      [readonly]=\"readonly\"\r\n    />\r\n    <p *ngIf=\"helptextmode === 'text' && helptext\" class=\"help-block\">\r\n      {{helptext}}\r\n    </p>\r\n    <label\r\n      for=\"{{name}}\"\r\n      class=\"form-label-adaptive form-label-fixed\"\r\n      [ngClass]=\"{ 'required': isrequired }\"\r\n      *ngIf=\"isAdaptiveLabel && !disablelabel\"\r\n      >{{label}}</label\r\n    >\r\n    <div\r\n      class=\"help-block help-block-error\"\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n",
                     // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                     providers: [
                         {
@@ -1670,7 +1693,7 @@
     SacInputPasswordComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-inputpassword',
-                    template: "<div\r\n  class=\"row form-group\"\r\n  [class.has-error]=\"invalid && (dirty || touched)\"\r\n  [ngClass]=\"componentHeight | toLabelHeight\"\r\n>\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-xs-12 control-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-xs-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <input\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      class=\"form-control\"\r\n      [ngClass]=\"[componentHeight | toControlHeight]\"\r\n      type=\"password\"\r\n      [value]=\"value\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      (blur)=\"onTouch()\"\r\n      (input)=\"setValue($event.target.value)\"\r\n      [attr.maxlength]=\"maxlength\"\r\n      autocomplete=\"new-password\"\r\n      [disabled]=\"isdisabled\"\r\n      [readonly]=\"readonly\"\r\n    />\r\n    <label\r\n      for=\"{{name}}\"\r\n      class=\"form-label-adaptive form-label-fixed\"\r\n      [ngClass]=\"{ 'required': isrequired }\"\r\n      *ngIf=\"isAdaptiveLabel && !disablelabel\"\r\n      >{{label}}</label\r\n    >\r\n    <div\r\n      class=\"help-block help-block-error\"\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                    template: "<div\r\n  class=\"row form-group\"\r\n  [class.has-error]=\"invalid && (dirty || touched)\"\r\n  [ngClass]=\"componentHeight | toLabelHeight\"\r\n>\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-xs-12 control-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}\r\n    <sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n    >\r\n      <span\r\n        [class]=\"HelptextTooltipIcon\"\r\n        style=\"margin-left: 5px\"\r\n      ></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-xs-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <input\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      class=\"form-control\"\r\n      [ngClass]=\"[componentHeight | toControlHeight]\"\r\n      type=\"password\"\r\n      [value]=\"value\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      (blur)=\"onTouch()\"\r\n      (input)=\"setValue($event.target.value)\"\r\n      [attr.maxlength]=\"maxlength\"\r\n      autocomplete=\"new-password\"\r\n      [disabled]=\"isdisabled\"\r\n      [readonly]=\"readonly\"\r\n    />\r\n    <p *ngIf=\"helptextmode === 'text' && helptext\" class=\"help-block\">\r\n      {{helptext}}\r\n    </p>\r\n    <label\r\n      for=\"{{name}}\"\r\n      class=\"form-label-adaptive form-label-fixed\"\r\n      [ngClass]=\"{ 'required': isrequired }\"\r\n      *ngIf=\"isAdaptiveLabel && !disablelabel\"\r\n      >{{label}}</label\r\n    >\r\n    <div\r\n      class=\"help-block help-block-error\"\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n",
                     // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                     providers: [
                         {
@@ -1707,7 +1730,7 @@
     SacInputSearchComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-inputsearch',
-                    template: "<div\r\n  class=\"row form-group\"\r\n  [class.has-error]=\"invalid && (dirty || touched)\"\r\n  [ngClass]=\"componentHeight | toLabelHeight\"\r\n>\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-xs-12 control-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-xs-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group\"\r\n      [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n    >\r\n      <input\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        [ngClass]=\"[componentHeight | toControlHeight]\"\r\n        [value]=\"value\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        (blur)=\"onTouch()\"\r\n        (input)=\"setValue($event.target.value)\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        [disabled]=\"isdisabled\"\r\n        [readonly]=\"readonly\"\r\n      />\r\n      <span class=\"input-group-btn\">\r\n        <input\r\n          type=\"submit\"\r\n          class=\"btn btn-default\"\r\n          id=\"{{name}}_search\"\r\n          (click)=\"searchClick()\"\r\n          [value]=\"buttontext\"\r\n        />\r\n      </span>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                    template: "<div\r\n  class=\"row form-group\"\r\n  [class.has-error]=\"invalid && (dirty || touched)\"\r\n  [ngClass]=\"componentHeight | toLabelHeight\"\r\n>\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-xs-12 control-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}\r\n    <sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n    >\r\n      <span\r\n        [class]=\"HelptextTooltipIcon\"\r\n        style=\"margin-left: 5px\"\r\n      ></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-xs-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group\"\r\n      [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n    >\r\n      <input\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        [ngClass]=\"[componentHeight | toControlHeight]\"\r\n        [value]=\"value\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        (blur)=\"onTouch()\"\r\n        (input)=\"setValue($event.target.value)\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        [disabled]=\"isdisabled\"\r\n        [readonly]=\"readonly\"\r\n      />\r\n      <span class=\"input-group-btn\">\r\n        <button\r\n          type=\"submit\"\r\n          class=\"btn btn-default\"\r\n          id=\"{{name}}_search\"\r\n          (click)=\"searchClick()\"\r\n        >\r\n          <i\r\n            *ngIf=\"buttonmode === 'icon' || buttonmode === 'mixed'\"\r\n            [class]=\"iconname\"\r\n            [style.margin-right.px]=\"buttonmode === 'mixed' ? 7 : null\"\r\n          ></i>\r\n          <ng-container *ngIf=\"buttonmode === 'text' || buttonmode === 'mixed'\"\r\n            >{{buttontext}}</ng-container\r\n          >\r\n        </button>\r\n      </span>\r\n    </div>\r\n    <p *ngIf=\"helptextmode === 'text' && helptext\" class=\"help-block\">\r\n      {{helptext}}\r\n    </p>\r\n  </div>\r\n</div>\r\n",
                     // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                     providers: [
                         {
@@ -1784,7 +1807,7 @@
     SacDropdownComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-dropdown',
-                    template: "<div\r\n  class=\"row form-group\"\r\n  [class.has-error]=\"invalid && (dirty || touched)\"\r\n  [ngClass]=\"componentHeight | toLabelHeight\"\r\n>\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-xs-12 control-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-xs-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <select\r\n      #dropdownitem\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      class=\"form-control\"\r\n      [ngClass]=\"[componentHeight | toControlHeight]\"\r\n      (blur)=\"onTouch()\"\r\n      (change)=\"setValue(dropdownitem.value)\"\r\n      [disabled]=\"isdisabled\"\r\n    >\r\n      <option *ngIf=\"emptylabel !== ''\" [ngValue]=\"emptyvalue\">\r\n        {{emptylabel}}\r\n      </option>\r\n\r\n      <ng-content></ng-content>\r\n\r\n      <ng-container *ngIf=\"groupitems === ''\">\r\n        <option\r\n          *ngFor=\"let item of options\"\r\n          [ngValue]=\"optionvalue ? item[optionvalue] : item\"\r\n          [disabled]=\"optionenabled !== '' && item[optionenabled] === false\"\r\n        >\r\n          <ng-template\r\n            *ngTemplateOutlet=\"optionlabeltemplate || defaultItemLabelTemplate;context:{ label: item[optionlabel], item: item }\"\r\n          >\r\n          </ng-template>\r\n        </option>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"groupitems !== ''\">\r\n        <optgroup\r\n          *ngFor=\"let group of options\"\r\n          [attr.label]=\"group[grouplabel]\"\r\n        >\r\n          <option\r\n            *ngFor=\"let item of group[groupitems]\"\r\n            [ngValue]=\"optionvalue ? item[optionvalue] : item\"\r\n            [disabled]=\"optionenabled !== '' && item[optionenabled] === false\"\r\n          >\r\n            <ng-template\r\n              *ngTemplateOutlet=\"optionlabeltemplate || defaultItemLabelTemplate;context:{ label: item[optionlabel], item: item }\"\r\n            >\r\n            </ng-template>\r\n          </option>\r\n        </optgroup>\r\n      </ng-container>\r\n    </select>\r\n    <div\r\n      class=\"help-block help-block-error\"\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #defaultItemLabelTemplate let-label=\"label\">\r\n  {{label}}\r\n</ng-template>\r\n",
+                    template: "<div\r\n  class=\"row form-group\"\r\n  [class.has-error]=\"invalid && (dirty || touched)\"\r\n  [ngClass]=\"componentHeight | toLabelHeight\"\r\n>\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-xs-12 control-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}\r\n    <sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n    >\r\n      <span\r\n        [class]=\"HelptextTooltipIcon\"\r\n        style=\"margin-left: 5px\"\r\n      ></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-xs-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <select\r\n      #dropdownitem\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      class=\"form-control\"\r\n      [ngClass]=\"[componentHeight | toControlHeight]\"\r\n      (blur)=\"onTouch()\"\r\n      (change)=\"setValue(dropdownitem.value)\"\r\n      [disabled]=\"isdisabled\"\r\n    >\r\n      <option *ngIf=\"emptylabel !== ''\" [ngValue]=\"emptyvalue\">\r\n        {{emptylabel}}\r\n      </option>\r\n\r\n      <ng-content></ng-content>\r\n\r\n      <ng-container *ngIf=\"groupitems === ''\">\r\n        <option\r\n          *ngFor=\"let item of options\"\r\n          [ngValue]=\"optionvalue ? item[optionvalue] : item\"\r\n          [disabled]=\"optionenabled !== '' && item[optionenabled] === false\"\r\n        >\r\n          <ng-template\r\n            *ngTemplateOutlet=\"optionlabeltemplate || defaultItemLabelTemplate;context:{ label: item[optionlabel], item: item }\"\r\n          >\r\n          </ng-template>\r\n        </option>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"groupitems !== ''\">\r\n        <optgroup\r\n          *ngFor=\"let group of options\"\r\n          [attr.label]=\"group[grouplabel]\"\r\n        >\r\n          <option\r\n            *ngFor=\"let item of group[groupitems]\"\r\n            [ngValue]=\"optionvalue ? item[optionvalue] : item\"\r\n            [disabled]=\"optionenabled !== '' && item[optionenabled] === false\"\r\n          >\r\n            <ng-template\r\n              *ngTemplateOutlet=\"optionlabeltemplate || defaultItemLabelTemplate;context:{ label: item[optionlabel], item: item }\"\r\n            >\r\n            </ng-template>\r\n          </option>\r\n        </optgroup>\r\n      </ng-container>\r\n    </select>\r\n    <p *ngIf=\"helptextmode === 'text' && helptext\" class=\"help-block\">\r\n      {{helptext}}\r\n    </p>\r\n    <div\r\n      class=\"help-block help-block-error\"\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #defaultItemLabelTemplate let-label=\"label\">\r\n  {{label}}\r\n</ng-template>\r\n",
                     // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                     providers: [
                         {
@@ -1846,7 +1869,7 @@
     SacListboxComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-listbox',
-                    template: "<div\r\n  class=\"row form-group\"\r\n  [class.has-error]=\"invalid && (dirty || touched)\"\r\n  [ngClass]=\"componentHeight | toLabelHeight\"\r\n>\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-xs-12 control-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-xs-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <select\r\n      multiple\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      class=\"form-control\"\r\n      [ngClass]=\"[componentHeight | toControlHeight]\"\r\n      [size]=\"rowsize\"\r\n      (blur)=\"onTouch()\"\r\n      (change)=\"getSelectedItems($event.target)\"\r\n      [disabled]=\"isdisabled\"\r\n    >\r\n      <ng-content></ng-content>\r\n      <ng-container *ngIf=\"groupitems === ''\">\r\n        <option\r\n          *ngFor=\"let option of options\"\r\n          [value]=\"option[optionvalue]\"\r\n          [disabled]=\"optionenabled !== '' && option[optionenabled] === false\"\r\n        >\r\n          <ng-template\r\n            *ngTemplateOutlet=\"optionlabeltemplate || defaultItemLabelTemplate;context:{ label: option[optionlabel] }\"\r\n          >\r\n          </ng-template>\r\n        </option>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"groupitems !== ''\">\r\n        <optgroup\r\n          *ngFor=\"let option of options\"\r\n          [attr.label]=\"option[grouplabel]\"\r\n        >\r\n          <option\r\n            *ngFor=\"let item of option[groupitems]\"\r\n            [value]=\"item[optionvalue]\"\r\n            [disabled]=\"optionenabled !== '' && item[optionenabled] === false\"\r\n          >\r\n            <ng-template\r\n              *ngTemplateOutlet=\"optionlabeltemplate || defaultItemLabelTemplate;context:{ label: item[optionlabel] }\"\r\n            >\r\n            </ng-template>\r\n          </option>\r\n        </optgroup>\r\n      </ng-container>\r\n    </select>\r\n    <div\r\n      class=\"help-block help-block-error\"\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #defaultItemLabelTemplate let-label=\"label\">\r\n  {{label}}\r\n</ng-template>\r\n",
+                    template: "<div\r\n  class=\"row form-group\"\r\n  [class.has-error]=\"invalid && (dirty || touched)\"\r\n  [ngClass]=\"componentHeight | toLabelHeight\"\r\n>\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-xs-12 control-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}\r\n    <sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n    >\r\n      <span\r\n        [class]=\"HelptextTooltipIcon\"\r\n        style=\"margin-left: 5px\"\r\n      ></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-xs-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <select\r\n      multiple\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      class=\"form-control\"\r\n      [ngClass]=\"[componentHeight | toControlHeight]\"\r\n      [size]=\"rowsize\"\r\n      (blur)=\"onTouch()\"\r\n      (change)=\"getSelectedItems($event.target)\"\r\n      [disabled]=\"isdisabled\"\r\n    >\r\n      <ng-content></ng-content>\r\n      <ng-container *ngIf=\"groupitems === ''\">\r\n        <option\r\n          *ngFor=\"let option of options\"\r\n          [value]=\"option[optionvalue]\"\r\n          [disabled]=\"optionenabled !== '' && option[optionenabled] === false\"\r\n        >\r\n          <ng-template\r\n            *ngTemplateOutlet=\"optionlabeltemplate || defaultItemLabelTemplate;context:{ label: option[optionlabel] }\"\r\n          >\r\n          </ng-template>\r\n        </option>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"groupitems !== ''\">\r\n        <optgroup\r\n          *ngFor=\"let option of options\"\r\n          [attr.label]=\"option[grouplabel]\"\r\n        >\r\n          <option\r\n            *ngFor=\"let item of option[groupitems]\"\r\n            [value]=\"item[optionvalue]\"\r\n            [disabled]=\"optionenabled !== '' && item[optionenabled] === false\"\r\n          >\r\n            <ng-template\r\n              *ngTemplateOutlet=\"optionlabeltemplate || defaultItemLabelTemplate;context:{ label: item[optionlabel] }\"\r\n            >\r\n            </ng-template>\r\n          </option>\r\n        </optgroup>\r\n      </ng-container>\r\n    </select>\r\n    <p *ngIf=\"helptextmode === 'text' && helptext\" class=\"help-block\">\r\n      {{helptext}}\r\n    </p>\r\n    <div\r\n      class=\"help-block help-block-error\"\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #defaultItemLabelTemplate let-label=\"label\">\r\n  {{label}}\r\n</ng-template>\r\n",
                     // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                     providers: [
                         {
@@ -1882,6 +1905,7 @@
                     imports: [
                         common.CommonModule,
                         sacCommon.SACCommonListboxOptionModule,
+                        SACBootstrap3TooltipModule,
                         forms.FormsModule,
                         SACBootstrap3LayoutModule,
                     ],
@@ -1923,7 +1947,7 @@
     SacStaticFormContainerComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-staticformcontainer',
-                    template: "<div\r\n  class=\"row form-group\"\r\n  [class.has-error]=\"invalid && (dirty || touched)\"\r\n  [ngClass]=\"componentHeight | toLabelHeight\"\r\n>\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-xs-12 control-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-xs-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <ng-content></ng-content>\r\n    <label\r\n      for=\"{{name}}\"\r\n      class=\"form-label-adaptive form-label-fixed\"\r\n      [ngClass]=\"{ 'required': isrequired }\"\r\n      *ngIf=\"isAdaptiveLabel && !disablelabel\"\r\n      >{{label}}</label\r\n    >\r\n    <div\r\n      class=\"help-block help-block-error\"\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                    template: "<div\r\n  class=\"row form-group\"\r\n  [class.has-error]=\"invalid && (dirty || touched)\"\r\n  [ngClass]=\"componentHeight | toLabelHeight\"\r\n>\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-xs-12 control-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}\r\n    <sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n    >\r\n      <span [class]=\"HelptextTooltipIcon\" style=\"margin-left: 5px\"></span>\r\n    </sac-tooltip>\r\n  </label>\r\n  <div\r\n    class=\"col-xs-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <ng-content></ng-content>\r\n    <p *ngIf=\"helptextmode === 'text' && helptext\" class=\"help-block\">\r\n      {{helptext}}\r\n    </p>\r\n\r\n    <label\r\n      for=\"{{name}}\"\r\n      class=\"form-label-adaptive form-label-fixed\"\r\n      [ngClass]=\"{ 'required': isrequired }\"\r\n      *ngIf=\"isAdaptiveLabel && !disablelabel\"\r\n      >{{label}}</label\r\n    >\r\n    <div\r\n      class=\"help-block help-block-error\"\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n",
                     // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                     providers: [
                         {
@@ -1960,7 +1984,7 @@
     SacStaticLabelComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-staticlabel',
-                    template: "<div class=\"row form-group\" [ngClass]=\"componentHeight | toLabelHeight\">\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-xs-12 control-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-xs-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"form-control-static\"\r\n      [style.padding-left.px]=\"0\"\r\n      [innerHTML]=\"value\"\r\n    ></div>\r\n    <label\r\n      for=\"{{name}}\"\r\n      class=\"col-left control-label\"\r\n      *ngIf=\"isAdaptiveLabel && !disablelabel\"\r\n      >{{label}}</label\r\n    >\r\n  </div>\r\n</div>\r\n",
+                    template: "<div class=\"row form-group\" [ngClass]=\"componentHeight | toLabelHeight\">\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-xs-12 control-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    >{{label}}\r\n    <sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n    >\r\n      <span [class]=\"HelptextTooltipIcon\" style=\"margin-left: 5px\"></span>\r\n    </sac-tooltip>\r\n  </label>\r\n  <div\r\n    class=\"col-xs-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      [id]=\"name\"\r\n      class=\"form-control-static\"\r\n      [style.padding-left.px]=\"0\"\r\n      [innerHTML]=\"value\"\r\n    ></div>\r\n    <p *ngIf=\"helptextmode === 'text' && helptext\" class=\"help-block\">\r\n      {{helptext}}\r\n    </p>\r\n    <label\r\n      for=\"{{name}}\"\r\n      class=\"col-left control-label\"\r\n      *ngIf=\"isAdaptiveLabel && !disablelabel\"\r\n      >{{label}}</label\r\n    >\r\n  </div>\r\n</div>\r\n",
                     // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                     providers: [
                         {
@@ -2025,7 +2049,7 @@
     SacTabComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-tab',
-                    template: "<!-- Nav tabs -->\r\n<div [id]=\"name\" class=\"content-nav-tabs\">\r\n  <ul class=\"nav nav-tabs\" role=\"tablist\">\r\n    <li\r\n      *ngFor=\"let item of _tabItems\"\r\n      [ngClass]=\"{ 'active show': item.active, 'disabled': item.disabled }\"\r\n      (click)=\"selectTab(item)\"\r\n      [ngStyle]=\"{'cursor': item._disabled ? 'not-allowed' : 'pointer'}\"\r\n    >\r\n      <a [id]=\"GetTabItemButtonId(item._id)\" role=\"tab\">\r\n        <ng-template\r\n          *ngTemplateOutlet=\"tablabeltemplate || defaultTabLabelTemplate;context:{ label: item.label }\"\r\n        >\r\n        </ng-template>\r\n      </a>\r\n    </li>\r\n  </ul>\r\n</div>\r\n\r\n<!-- Tab panes -->\r\n<div class=\"tab-content\" style=\"margin-top: 15px\">\r\n  <ng-content></ng-content>\r\n</div>\r\n\r\n<ng-template #defaultTabLabelTemplate let-label=\"label\">\r\n  {{label}}\r\n</ng-template>\r\n"
+                    template: "<!-- Nav tabs -->\r\n<div [id]=\"name\" class=\"content-nav-tabs\">\r\n  <ul class=\"nav nav-tabs\" role=\"tablist\">\r\n    <li\r\n      *ngFor=\"let item of _tabItems\"\r\n      [ngClass]=\"{ 'active show': item.active, 'disabled': item.disabled }\"\r\n      (click)=\"selectTab(item)\"\r\n      [ngStyle]=\"{'cursor': item._disabled ? 'not-allowed' : 'pointer'}\"\r\n    >\r\n      <a [id]=\"GetTabItemButtonId(item.id)\" role=\"tab\">\r\n        <ng-template\r\n          *ngTemplateOutlet=\"tablabeltemplate || defaultTabLabelTemplate;context:{ label: item.label }\"\r\n        >\r\n        </ng-template>\r\n      </a>\r\n    </li>\r\n  </ul>\r\n</div>\r\n\r\n<!-- Tab panes -->\r\n<div class=\"tab-content\" style=\"margin-top: 15px\">\r\n  <ng-content></ng-content>\r\n</div>\r\n\r\n<ng-template #defaultTabLabelTemplate let-label=\"label\">\r\n  {{label}}\r\n</ng-template>\r\n"
                 },] }
     ];
     SacTabComponent.propDecorators = {
@@ -2073,7 +2097,7 @@
     SacTinyMceComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-tinymce',
-                    template: "<div\r\n  class=\"row form-group\"\r\n  [class.has-error]=\"invalid && (dirty || touched)\"\r\n  [ngClass]=\"componentHeight | toLabelHeight\"\r\n>\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-xs-12 control-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n  >\r\n    {{label}}\r\n  </label>\r\n  <div\r\n    class=\"col-xs-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n    [class.has-error]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n  >\r\n    <editor\r\n      [id]=\"name + '_tinymce'\"\r\n      [init]=\"_config\"\r\n      [initialValue]=\"value\"\r\n      ngModel\r\n      [ngModelOptions]=\"{standalone: true}\"\r\n      (ngModelChange)=\"setValue($event)\"\r\n      (onSaveContent)=\"save($event.event.content)\"\r\n      [disabled]=\"disabled\"\r\n      [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    ></editor>\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"help-block\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<sac-dialog\r\n  *ngIf=\"selectdialogvisible\"\r\n  [allowesc]=\"false\"\r\n  [backdrop]=\"true\"\r\n  [(isvisible)]=\"selectdialogvisible\"\r\n  title=\"{{ lngResourceService.GetString(validationKeyService.TinyMceFileselectDialogtitle) | async }}\"\r\n  size=\"large\"\r\n  height=\"500px\"\r\n>\r\n  <ng-container dialogbody> </ng-container>\r\n  <ng-container dialogfooter>\r\n    <sac-button\r\n      role=\"primary\"\r\n      [name]=\"name + '_modalOk'\"\r\n      text=\"{{ lngResourceService.GetString(validationKeyService.TinyMceFileselectOk) | async }}\"\r\n      (clicked)=\"setSelectDialogResult()\"\r\n    ></sac-button>\r\n    <sac-button\r\n      [name]=\"name + '_modalClose'\"\r\n      text=\"{{ lngResourceService.GetString(validationKeyService.TinyMceFileselectCancel) | async }}\"\r\n      (clicked)=\"closeSelectDialog()\"\r\n    ></sac-button>\r\n  </ng-container>\r\n</sac-dialog>\r\n",
+                    template: "<div\r\n  class=\"row form-group\"\r\n  [class.has-error]=\"invalid && (dirty || touched)\"\r\n  [ngClass]=\"componentHeight | toLabelHeight\"\r\n>\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-xs-12 control-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n  >\r\n    {{label}}\r\n    <sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n    >\r\n      <span [class]=\"HelptextTooltipIcon\" style=\"margin-left: 5px\"></span>\r\n    </sac-tooltip>\r\n  </label>\r\n  <div\r\n    class=\"col-xs-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n    [class.has-error]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n  >\r\n    <editor\r\n      [id]=\"name + '_tinymce'\"\r\n      [init]=\"_config\"\r\n      [initialValue]=\"value\"\r\n      ngModel\r\n      [ngModelOptions]=\"{standalone: true}\"\r\n      (ngModelChange)=\"setValue($event)\"\r\n      (onSaveContent)=\"save($event.event.content)\"\r\n      [disabled]=\"disabled\"\r\n      [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    ></editor>\r\n    <p *ngIf=\"helptextmode === 'text' && helptext\" class=\"help-block\">\r\n      {{helptext}}\r\n    </p>\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"help-block\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<sac-dialog\r\n  *ngIf=\"selectdialogvisible\"\r\n  [allowesc]=\"false\"\r\n  [backdrop]=\"true\"\r\n  [(isvisible)]=\"selectdialogvisible\"\r\n  title=\"{{ lngResourceService.GetString(validationKeyService.TinyMceFileselectDialogtitle) | async }}\"\r\n  size=\"large\"\r\n  height=\"500px\"\r\n>\r\n  <ng-container dialogbody> </ng-container>\r\n  <ng-container dialogfooter>\r\n    <sac-button\r\n      role=\"primary\"\r\n      [name]=\"name + '_modalOk'\"\r\n      text=\"{{ lngResourceService.GetString(validationKeyService.TinyMceFileselectOk) | async }}\"\r\n      (clicked)=\"setSelectDialogResult()\"\r\n    ></sac-button>\r\n    <sac-button\r\n      [name]=\"name + '_modalClose'\"\r\n      text=\"{{ lngResourceService.GetString(validationKeyService.TinyMceFileselectCancel) | async }}\"\r\n      (clicked)=\"closeSelectDialog()\"\r\n    ></sac-button>\r\n  </ng-container>\r\n</sac-dialog>\r\n",
                     // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
                     providers: [
                         {
@@ -2110,6 +2134,7 @@
                         SACBootstrap3ButtonModule,
                         SACBootstrap3DialogModule,
                         SACBootstrap3LayoutModule,
+                        SACBootstrap3TooltipModule,
                     ],
                     exports: [SacTinyMceComponent],
                 },] }
@@ -2194,7 +2219,7 @@
     SacUploadComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-upload',
-                    template: "<div\r\n  class=\"row form-group\"\r\n  [class.has-error]=\"invalid && (dirty || touched)\"\r\n  [ngClass]=\"componentHeight | toLabelHeight\"\r\n>\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-xs-12 control-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-xs-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group upload-component upload-single\"\r\n      [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n    >\r\n      <div class=\"input-group-btn\">\r\n        <!-- image-preview-input -->\r\n        <div\r\n          class=\"btn upload-input custom-file\"\r\n          [class.disabled]=\"HasQueueItem()\"\r\n          [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n          [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n        >\r\n          <i [class]=\"IconBrowse\"></i>\r\n          <span class=\"upload-browse\"\r\n            >{{\r\n            lngResourceService.GetString(validationKeyService.UploadButtonBrowse)\r\n            | async }}</span\r\n          >\r\n          <input\r\n            type=\"file\"\r\n            class=\"custom-file-input\"\r\n            #files\r\n            (click)=\"files.value = ''\"\r\n            (uploadxState)=\"onUpload($event)\"\r\n            multiple\r\n            [disabled]=\"HasQueueItem()\"\r\n          />\r\n        </div>\r\n      </div>\r\n      <div class=\"form-control upload-progress\">\r\n        <div class=\"progress\">\r\n          <div\r\n            class=\"progress-bar\"\r\n            [class.progress-bar-success]=\"Progress()===100\"\r\n            role=\"progressbar\"\r\n            [attr.aria-valuenow]=\"Progress()\"\r\n            aria-valuemin=\"0\"\r\n            aria-valuemax=\"100\"\r\n            [style.width.%]=\"Progress()\"\r\n          >\r\n            <span class=\"progress-text text-dark\"\r\n              >{{ Filename() | async }}</span\r\n            >\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <!-- <input type=\"textimage-preview-filename\" class=\"form-control image-preview-filename\" disabled=\"disabled\"> --><!-- don't give a name === doesn't send on POST/GET -->\r\n      <div class=\"input-group-btn\">\r\n        <!-- image-preview-clear button -->\r\n        <a\r\n          class=\"btn\"\r\n          (click)=\"cancelAll()\"\r\n          [attr.disabled]=\"HasQueueItem() === false ? 'disabled' : null\"\r\n          [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n          [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n        >\r\n          <span [class]=\"IconDelete\"></span>\r\n        </a>\r\n        <a\r\n          *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && IsPaused() === false)\"\r\n          class=\"btn\"\r\n          (click)=\"pauseAll()\"\r\n          [attr.disabled]=\"IsUploading() === false ? 'disabled' : null\"\r\n          [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n          [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n        >\r\n          <span [class]=\"IconPause\"></span>\r\n        </a>\r\n        <a\r\n          *ngIf=\"autoupload && enablepause && IsPaused()\"\r\n          class=\"btn\"\r\n          (click)=\"uploadAll()\"\r\n          [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n          [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n        >\r\n          <span [class]=\"IconContinue\"></span>\r\n        </a>\r\n        <a\r\n          *ngIf=\"autoupload === false\"\r\n          class=\"btn\"\r\n          (click)=\"uploadAll()\"\r\n          [attr.disabled]=\"IsStateToUpload() === false ?  'disabled' : null\"\r\n          [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n          [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n        >\r\n          <span [class]=\"IconUpload\"></span> {{\r\n          lngResourceService.GetString(validationKeyService.UploadButtonUpload)\r\n          | async }}\r\n        </a>\r\n      </div>\r\n    </div>\r\n    <div\r\n      class=\"help-block help-block-error\"\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                    template: "<div\r\n  class=\"row form-group\"\r\n  [class.has-error]=\"invalid && (dirty || touched)\"\r\n  [ngClass]=\"componentHeight | toLabelHeight\"\r\n>\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-xs-12 control-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}\r\n    <sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n    >\r\n      <span\r\n        [class]=\"HelptextTooltipIcon\"\r\n        style=\"margin-left: 5px\"\r\n      ></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-xs-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group upload-component upload-single\"\r\n      [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n    >\r\n      <div class=\"input-group-btn\">\r\n        <!-- image-preview-input -->\r\n        <div\r\n          class=\"btn upload-input custom-file\"\r\n          [class.disabled]=\"HasQueueItem()\"\r\n          [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n          [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n        >\r\n          <i [class]=\"IconBrowse\"></i>\r\n          <span class=\"upload-browse\"\r\n            >{{\r\n            lngResourceService.GetString(validationKeyService.UploadButtonBrowse)\r\n            | async }}</span\r\n          >\r\n          <input\r\n            type=\"file\"\r\n            class=\"custom-file-input\"\r\n            #files\r\n            (click)=\"files.value = ''\"\r\n            (uploadxState)=\"onUpload($event)\"\r\n            multiple\r\n            [disabled]=\"HasQueueItem()\"\r\n          />\r\n        </div>\r\n      </div>\r\n      <div class=\"form-control upload-progress\">\r\n        <div class=\"progress\">\r\n          <div\r\n            class=\"progress-bar\"\r\n            [class.progress-bar-success]=\"Progress()===100\"\r\n            role=\"progressbar\"\r\n            [attr.aria-valuenow]=\"Progress()\"\r\n            aria-valuemin=\"0\"\r\n            aria-valuemax=\"100\"\r\n            [style.width.%]=\"Progress()\"\r\n          >\r\n            <span class=\"progress-text text-dark\"\r\n              >{{ Filename() | async }}</span\r\n            >\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <!-- <input type=\"textimage-preview-filename\" class=\"form-control image-preview-filename\" disabled=\"disabled\"> --><!-- don't give a name === doesn't send on POST/GET -->\r\n      <div class=\"input-group-btn\">\r\n        <!-- image-preview-clear button -->\r\n        <a\r\n          class=\"btn\"\r\n          (click)=\"cancelAll()\"\r\n          [attr.disabled]=\"HasQueueItem() === false ? 'disabled' : null\"\r\n          [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n          [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n        >\r\n          <span [class]=\"IconDelete\"></span>\r\n        </a>\r\n        <a\r\n          *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && IsPaused() === false)\"\r\n          class=\"btn\"\r\n          (click)=\"pauseAll()\"\r\n          [attr.disabled]=\"IsUploading() === false ? 'disabled' : null\"\r\n          [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n          [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n        >\r\n          <span [class]=\"IconPause\"></span>\r\n        </a>\r\n        <a\r\n          *ngIf=\"autoupload && enablepause && IsPaused()\"\r\n          class=\"btn\"\r\n          (click)=\"uploadAll()\"\r\n          [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n          [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n        >\r\n          <span [class]=\"IconContinue\"></span>\r\n        </a>\r\n        <a\r\n          *ngIf=\"autoupload === false\"\r\n          class=\"btn\"\r\n          (click)=\"uploadAll()\"\r\n          [attr.disabled]=\"IsStateToUpload() === false ?  'disabled' : null\"\r\n          [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n          [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n        >\r\n          <span [class]=\"IconUpload\"></span> {{\r\n          lngResourceService.GetString(validationKeyService.UploadButtonUpload)\r\n          | async }}\r\n        </a>\r\n      </div>\r\n    </div>\r\n    <p *ngIf=\"helptextmode === 'text' && helptext\" class=\"help-block\">\r\n      {{helptext}}\r\n    </p>\r\n    <div\r\n      class=\"help-block help-block-error\"\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n",
                     providers: [
                         {
                             provide: forms.NG_VALUE_ACCESSOR,
@@ -2236,7 +2261,7 @@
     SacUploadMultipleComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'sac-uploadmultiple',
-                    template: "<div\r\n  class=\"row form-group\"\r\n  [class.has-error]=\"invalid && (dirty || touched)\"\r\n  [ngClass]=\"componentHeight | toLabelHeight\"\r\n>\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-xs-12 control-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-xs-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div class=\"upload-component\">\r\n      <div class=\"row\">\r\n        <div class=\"col-xs-12\">\r\n          <div\r\n            class=\"btn-group\"\r\n            [class.btn-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n            [class.btn-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n          >\r\n            <div\r\n              class=\"btn upload-input custom-file\"\r\n              [class.disabled]=\"maxfiles > 0 &&  uploads.length >= maxfiles\"\r\n              [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n              [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n            >\r\n              <i [class]=\"IconBrowse\"></i>\r\n              <span class=\"upload-browse\">Browse</span>\r\n              <input\r\n                type=\"file\"\r\n                class=\"custom-file-input\"\r\n                #files\r\n                (click)=\"files.value = ''\"\r\n                (uploadxState)=\"onUpload($event)\"\r\n                multiple\r\n                [disabled]=\"maxfiles > 0 &&  uploads.length >= maxfiles\"\r\n              />\r\n            </div>\r\n\r\n            <div\r\n              class=\"btn-group\"\r\n              [class.btn-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n              [class.btn-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n            >\r\n              <!-- image-preview-clear button -->\r\n              <a\r\n                class=\"btn\"\r\n                (click)=\"cancelAll()\"\r\n                [attr.disabled]=\"HasQueueItem() === false ? 'disabled' : null\"\r\n                [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n                [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n              >\r\n                <span [class]=\"IconDelete\"></span>\r\n              </a>\r\n              <a\r\n                *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && IsPaused() === false)\"\r\n                class=\"btn\"\r\n                (click)=\"pauseAll()\"\r\n                [attr.disabled]=\"IsUploading() === false ? 'disabled' : null\"\r\n                [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n                [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n              >\r\n                <span [class]=\"IconPause\"></span>\r\n              </a>\r\n              <a\r\n                *ngIf=\"autoupload && enablepause && IsPaused() === true\"\r\n                class=\"btn\"\r\n                (click)=\"uploadAll()\"\r\n                [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n                [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n              >\r\n                <span [class]=\"IconContinue\"></span>\r\n              </a>\r\n              <a\r\n                *ngIf=\"autoupload === false\"\r\n                class=\"btn\"\r\n                (click)=\"uploadAll()\"\r\n                [attr.disabled]=\"IsStateToUpload() === false ?  'disabled' : null\"\r\n                [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n                [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n              >\r\n                <span [class]=\"IconUpload\"></span> {{\r\n                lngResourceService.GetString(validationKeyService.UploadButtonUpload)\r\n                | async }}\r\n              </a>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngFor=\"let file of uploads\" style=\"margin-top: 5px\">\r\n        <div\r\n          class=\"input-group upload-component upload-multiple\"\r\n          [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n          [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n        >\r\n          <div class=\"form-control upload-progress\">\r\n            <div class=\"progress\">\r\n              <div\r\n                class=\"progress-bar\"\r\n                [class.progress-bar-success]=\"file.progress===100\"\r\n                role=\"progressbar\"\r\n                [attr.aria-valuenow]=\"file.progress\"\r\n                aria-valuemin=\"0\"\r\n                aria-valuemax=\"100\"\r\n                [style.width.%]=\"file.progress\"\r\n              >\r\n                <span class=\"progress-text text-dark\">{{ file.name }}</span>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div\r\n            class=\"input-group-btn\"\r\n            [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n            [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n          >\r\n            <!-- image-preview-clear button -->\r\n            <a\r\n              class=\"btn\"\r\n              (click)=\"cancel(file.uploadId)\"\r\n              [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n              [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n            >\r\n              <span [class]=\"IconDelete\"></span>\r\n            </a>\r\n            <a\r\n              *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && file.status !== 'paused')\"\r\n              class=\"btn\"\r\n              (click)=\"pause(file.uploadId)\"\r\n              [attr.disabled]=\"file.status !== 'uploading' ? 'disabled' : null\"\r\n              [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n              [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n            >\r\n              <span [class]=\"IconPause\"></span>\r\n            </a>\r\n            <a\r\n              *ngIf=\"autoupload && enablepause && file.status === 'paused'\"\r\n              class=\"btn\"\r\n              (click)=\"upload(file.uploadId)\"\r\n              [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n              [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n            >\r\n              <span [class]=\"IconContinue\"></span>\r\n            </a>\r\n            <a\r\n              *ngIf=\"autoupload === false\"\r\n              class=\"btn\"\r\n              (click)=\"upload(file.uploadId)\"\r\n              [attr.disabled]=\"file.status !== 'added' && file.status !== 'paused' ?  'disabled' : null\"\r\n              [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n              [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n            >\r\n              <span [class]=\"IconUpload\"></span> {{\r\n              lngResourceService.GetString(validationKeyService.UploadButtonUpload)\r\n              | async }}\r\n            </a>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div\r\n      class=\"help-block help-block-error\"\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                    template: "<div\r\n  class=\"row form-group\"\r\n  [class.has-error]=\"invalid && (dirty || touched)\"\r\n  [ngClass]=\"componentHeight | toLabelHeight\"\r\n>\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-xs-12 control-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}\r\n    <sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n    >\r\n      <span\r\n        [class]=\"HelptextTooltipIcon\"\r\n        style=\"margin-left: 5px\"\r\n      ></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-xs-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div class=\"upload-component\">\r\n      <div class=\"row\">\r\n        <div class=\"col-xs-12\">\r\n          <div\r\n            class=\"btn-group\"\r\n            [class.btn-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n            [class.btn-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n          >\r\n            <div\r\n              class=\"btn upload-input custom-file\"\r\n              [class.disabled]=\"maxfiles > 0 &&  uploads.length >= maxfiles\"\r\n              [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n              [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n            >\r\n              <i [class]=\"IconBrowse\"></i>\r\n              <span class=\"upload-browse\">Browse</span>\r\n              <input\r\n                type=\"file\"\r\n                class=\"custom-file-input\"\r\n                #files\r\n                (click)=\"files.value = ''\"\r\n                (uploadxState)=\"onUpload($event)\"\r\n                multiple\r\n                [disabled]=\"maxfiles > 0 &&  uploads.length >= maxfiles\"\r\n              />\r\n            </div>\r\n\r\n            <div\r\n              class=\"btn-group\"\r\n              [class.btn-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n              [class.btn-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n            >\r\n              <!-- image-preview-clear button -->\r\n              <a\r\n                class=\"btn\"\r\n                (click)=\"cancelAll()\"\r\n                [attr.disabled]=\"HasQueueItem() === false ? 'disabled' : null\"\r\n                [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n                [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n              >\r\n                <span [class]=\"IconDelete\"></span>\r\n              </a>\r\n              <a\r\n                *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && IsPaused() === false)\"\r\n                class=\"btn\"\r\n                (click)=\"pauseAll()\"\r\n                [attr.disabled]=\"IsUploading() === false ? 'disabled' : null\"\r\n                [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n                [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n              >\r\n                <span [class]=\"IconPause\"></span>\r\n              </a>\r\n              <a\r\n                *ngIf=\"autoupload && enablepause && IsPaused() === true\"\r\n                class=\"btn\"\r\n                (click)=\"uploadAll()\"\r\n                [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n                [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n              >\r\n                <span [class]=\"IconContinue\"></span>\r\n              </a>\r\n              <a\r\n                *ngIf=\"autoupload === false\"\r\n                class=\"btn\"\r\n                (click)=\"uploadAll()\"\r\n                [attr.disabled]=\"IsStateToUpload() === false ?  'disabled' : null\"\r\n                [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n                [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n              >\r\n                <span [class]=\"IconUpload\"></span> {{\r\n                lngResourceService.GetString(validationKeyService.UploadButtonUpload)\r\n                | async }}\r\n              </a>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngFor=\"let file of uploads\" style=\"margin-top: 5px\">\r\n        <div\r\n          class=\"input-group upload-component upload-multiple\"\r\n          [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n          [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n        >\r\n          <div class=\"form-control upload-progress\">\r\n            <div class=\"progress\">\r\n              <div\r\n                class=\"progress-bar\"\r\n                [class.progress-bar-success]=\"file.progress===100\"\r\n                role=\"progressbar\"\r\n                [attr.aria-valuenow]=\"file.progress\"\r\n                aria-valuemin=\"0\"\r\n                aria-valuemax=\"100\"\r\n                [style.width.%]=\"file.progress\"\r\n              >\r\n                <span class=\"progress-text text-dark\">{{ file.name }}</span>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div\r\n            class=\"input-group-btn\"\r\n            [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n            [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n          >\r\n            <!-- image-preview-clear button -->\r\n            <a\r\n              class=\"btn\"\r\n              (click)=\"cancel(file.uploadId)\"\r\n              [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n              [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n            >\r\n              <span [class]=\"IconDelete\"></span>\r\n            </a>\r\n            <a\r\n              *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && file.status !== 'paused')\"\r\n              class=\"btn\"\r\n              (click)=\"pause(file.uploadId)\"\r\n              [attr.disabled]=\"file.status !== 'uploading' ? 'disabled' : null\"\r\n              [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n              [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n            >\r\n              <span [class]=\"IconPause\"></span>\r\n            </a>\r\n            <a\r\n              *ngIf=\"autoupload && enablepause && file.status === 'paused'\"\r\n              class=\"btn\"\r\n              (click)=\"upload(file.uploadId)\"\r\n              [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n              [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n            >\r\n              <span [class]=\"IconContinue\"></span>\r\n            </a>\r\n            <a\r\n              *ngIf=\"autoupload === false\"\r\n              class=\"btn\"\r\n              (click)=\"upload(file.uploadId)\"\r\n              [attr.disabled]=\"file.status !== 'added' && file.status !== 'paused' ?  'disabled' : null\"\r\n              [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n              [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n            >\r\n              <span [class]=\"IconUpload\"></span> {{\r\n              lngResourceService.GetString(validationKeyService.UploadButtonUpload)\r\n              | async }}\r\n            </a>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <p *ngIf=\"helptextmode === 'text' && helptext\" class=\"help-block\">\r\n      {{helptext}}\r\n    </p>\r\n    <div\r\n      class=\"help-block help-block-error\"\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n",
                     providers: [
                         {
                             provide: forms.NG_VALUE_ACCESSOR,
@@ -2267,7 +2292,12 @@
     SACBootstrap3UploadModule.decorators = [
         { type: core.NgModule, args: [{
                     declarations: [SacUploadComponent, SacUploadMultipleComponent],
-                    imports: [common.CommonModule, forms.FormsModule, SACBootstrap3LayoutModule],
+                    imports: [
+                        common.CommonModule,
+                        forms.FormsModule,
+                        SACBootstrap3LayoutModule,
+                        SACBootstrap3TooltipModule,
+                    ],
                     exports: [SacUploadComponent, SacUploadMultipleComponent],
                 },] }
     ];
@@ -2421,74 +2451,60 @@
                 },] }
     ];
 
+    // #region Classes
     /**
-     * Factory Methode für SacForm
-     * @param form NgFormular
-     */
-    function SACFORM_FACTORY(form) {
-        return form;
-    }
-    /**
-     * Factory Methode für NgForm
-     * @param form NgForm
+     * Directive to inherit an NgForm/NgForm from a parent component
      */
-    function NGFORM_FACTORY(form) {
-        return form;
-    }
-    /**
-     * Directive zum erben eines NgForm/NgFormular einer übergeordneten Komponente
-     *
-     * @example Implementation in Markup
-     *
-     * <div sacInheritForm>
-     * </div>
-     *
-     * @example Model an Sub-Komponente übergeben
-     *
-     * <div sacInheritForm>
-     * <div>SubForm</div>
-     * <div>
-     *  <ngInput [(ngModel)]="mymodel.fieldarea2" name="subformField3" label="field 3" [isrequired]="true"></ngInput>
-     * </div>
-     * </div>
-     *
-     *
-     * (at)Component({
-     * selector: 'sacInheritForm',
-     * templateUrl: './subform.component.html'
-     * })
-     * export class SubFormComponent implements DoCheck {
-     *
-     * (at)Input() mymodel;
-     * (at)Output() mymodelChange = new EventEmitter();
-     *
-     * ngDoCheck() {
-     *   this.mymodelChange.next(this.mymodel);
-     * }
-     *}
-     *
-     */
-    var SacInheritFormDirective = /** @class */ (function () {
-        function SacInheritFormDirective() {
+    var SacInheritFormDirective = /** @class */ (function (_super) {
+        __extends(SacInheritFormDirective, _super);
+        // #region Constructors
+        /**
+         * Construtor
+         * @param injector: injector to receive the NgForm instance
+         */
+        function SacInheritFormDirective(injector) {
+            return _super.call(this, injector.get(forms.NgForm)) || this;
         }
         return SacInheritFormDirective;
-    }());
+    }(sacCommon.SacFormCommon));
     SacInheritFormDirective.decorators = [
         { type: core.Directive, args: [{
                     selector: '[sacInheritForm]',
+                    exportAs: 'sacinheritform',
                     providers: [
                         {
                             provide: SacFormDirective,
                             useFactory: SACFORM_FACTORY,
-                            deps: [[new core.SkipSelf(), SacFormDirective]]
-                        }, {
+                            deps: [[new core.SkipSelf(), SacFormDirective]],
+                        },
+                        {
                             provide: forms.ControlContainer,
                             useFactory: NGFORM_FACTORY,
-                            deps: [forms.NgForm]
-                        }
-                    ]
+                            deps: [forms.NgForm],
+                        },
+                    ],
                 },] }
-    ];
+    ];
+    SacInheritFormDirective.ctorParameters = function () { return [
+        { type: core.Injector }
+    ]; };
+    // #endregion Classes
+    // #region Functions
+    /**
+     * Factory Methode für NgForm
+     * @param form NgForm
+     */
+    function NGFORM_FACTORY(form) {
+        return form;
+    }
+    /**
+     * Factory Methode für SacForm
+     * @param form NgFormular
+     */
+    function SACFORM_FACTORY(form) {
+        return form;
+    }
+    // #endregion Functions
 
     var SACBootstrap3FormModule = /** @class */ (function () {
         function SACBootstrap3FormModule() {