@simpleangularcontrols/sac-bootstrap3 10.0.0-rc.20 → 10.0.0-rc.22

package/fesm2015/simpleangularcontrols-sac-bootstrap3.js

@@ -8,2124 +8,2124 @@ import { IMaskModule } from 'angular-imask';
 import moment_ from 'moment';
 import { EditorModule } from '@tinymce/tinymce-angular';
 
-class SacButtonComponent extends SacButtonCommon {
-}
-SacButtonComponent.decorators = [
-    { type: 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=\"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: 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); } }']
-            },] }
-];
-
-class SACBootstrap3ButtonModule {
-}
-SACBootstrap3ButtonModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [SacButtonComponent],
-                imports: [
-                    CommonModule
-                ],
-                exports: [SacButtonComponent]
-            },] }
-];
-
-class SacFormLayoutDirective extends SacFormLayoutCommon {
-}
-SacFormLayoutDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[sacFormLayout]',
-            },] }
-];
-
-class SacToControlHeightPipe {
-    // #region Public Methods
-    /**
-     * Returns the CSS class that defines the height for the control
-     * @param value ControlHeight value or null
-     */
-    transform(value) {
-        // Return default value
-        if (!value) {
-            return '';
-        }
-        switch (value) {
-            case ControlHeight.Small:
-                return 'input-sm';
-            case ControlHeight.Large:
-                return 'input-lg';
-            default:
-                return '';
-        }
-    }
-}
-SacToControlHeightPipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'toControlHeight',
-            },] }
-];
-
-class SacToControlWidthCssPipe {
-    // #region Public Methods
-    /**
-     * Get CSS classes from label width configuration to set control size
-     * @param value Configuration with grid columns for different viewports
-     * @returns string with css classe for bootstrap3
-     */
-    transform(value) {
-        const classes = [];
-        if (value.labelSizeXs) {
-            classes.push('col-xs-' + this.calcControlSize(value.labelSizeXs));
-        }
-        if (value.labelSizeSm) {
-            classes.push('col-sm-' + this.calcControlSize(value.labelSizeSm));
-        }
-        if (value.labelSizeMd) {
-            classes.push('col-md-' + this.calcControlSize(value.labelSizeMd));
-        }
-        if (value.labelSizeLg) {
-            classes.push('col-lg-' + this.calcControlSize(value.labelSizeLg));
-        }
-        return classes.join(' ');
-    }
-    // #endregion Public Methods
-    // #region Private Methods
-    /**
-     * calculate the control size
-     * @param labelsize grid size of label
-     * @returns grid size for control. should be between 1 and 12
-     */
-    calcControlSize(labelsize) {
-        if (labelsize === 12) {
-            return 12;
-        }
-        if (!labelsize) {
-            return 12;
-        }
-        return 12 - labelsize;
-    }
-}
-SacToControlWidthCssPipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'toControlWidthCss',
-            },] }
-];
-
-class SacToLabelHeightPipe {
-    // #region Public Methods
-    /**
-     * Returns the CSS class that defines the height for the control
-     * @param value ControlHeight value or null
-     */
-    transform(value) {
-        // Return default value
-        if (!value) {
-            return '';
-        }
-        switch (value) {
-            case ControlHeight.Small:
-                return 'form-group-sm';
-            case ControlHeight.Large:
-                return 'form-group-lg';
-            default:
-                return '';
-        }
-    }
-}
-SacToLabelHeightPipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'toLabelHeight',
-            },] }
-];
-
-class SacToLabelWidthCssPipe {
-    // #region Public Methods
-    /**
-     * Get CSS classes from label width configuration to set label size
-     * @param value Configuration with grid columns for different viewports
-     * @returns string with css classe for bootstrap3
-     */
-    transform(value) {
-        const classes = [];
-        if (value.labelSizeXs) {
-            classes.push('col-xs-' + value.labelSizeXs);
-        }
-        if (value.labelSizeSm) {
-            classes.push('col-sm-' + value.labelSizeSm);
-        }
-        if (value.labelSizeMd) {
-            classes.push('col-md-' + value.labelSizeMd);
-        }
-        if (value.labelSizeLg) {
-            classes.push('col-lg-' + value.labelSizeLg);
-        }
-        return classes.join(' ');
-    }
-}
-SacToLabelWidthCssPipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'toLabelWidthCss',
-            },] }
-];
-
-class SACBootstrap3LayoutModule {
-}
-SACBootstrap3LayoutModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [
-                    SacFormLayoutDirective,
-                    SacToControlHeightPipe,
-                    SacToControlWidthCssPipe,
-                    SacToLabelHeightPipe,
-                    SacToLabelWidthCssPipe,
-                ],
-                imports: [CommonModule],
-                exports: [
-                    SacFormLayoutDirective,
-                    SacToControlHeightPipe,
-                    SacToControlWidthCssPipe,
-                    SacToLabelHeightPipe,
-                    SacToLabelWidthCssPipe,
-                ],
-            },] }
-];
-
-/**
- * Tooltip Komponente
- *
- * @example ToolTip Control
- *
- *  <ngTooltip tooltiptext="Mein Tooltip" [inlinemode]="true">
- *    <i class="tooltip"></i>
- *  </ngTooltip>
- *
- * @example ToolTip Control im Inline Mode. Style auf Icon kann auch in Klasse ausgelagert werden.
- *
- *  <div class="form-inline">
- *    <ngInputSearch iconname="Suchen"></ngInputSearch>
- *    <ngTooltip tooltiptext="Mein Tooltip" [inlinemode]="true">
- *      <i class="tooltip" style="position: relative; left: 0; top: 3px; display: inline-block; margin-right: 10px;"></i>
- *    </ngTooltip>
- *  </div>
- *
- */
-class SacTooltipComponent extends SacTooltipCommon {
-    // #region Constructors
-    /**
-     * Konstrukor
-     * @param parent SacFormular Instanz
-     * @param injector Component Injector
-     */
-    constructor(cdRef, ref) {
-        super(cdRef, ref);
-    }
-    // #endregion Constructors
-    // #region Protected Methods
-    /**
-     * Padding for Tooltip
-     * @returns Always 0. BS3 not require Padding
-     */
-    getTooltipOffset() {
-        return 0;
-    }
-}
-SacTooltipComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'sac-tooltip',
-                template: "<div [style.display]=\"inlinemode ? 'inline' : null\">\r\n    <div\r\n        #container\r\n        (mouseenter)=\"ShowTooltip()\"\r\n        (mouseleave)=\"HideTooltip()\"\r\n        [style.display]=\"inlinemode ? 'inline' : null\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n    <div\r\n        *ngIf=\"IsTooltipVisible()\"\r\n        #tooltip>\r\n        <div\r\n            [style.visibility]=\"IsTooltipContentVisible ? 'visible' : 'hidden'\"\r\n            class=\"tooltip in\"\r\n            style=\"display: block\"\r\n            [style.left.px]=\"LeftPos\"\r\n            [style.top.px]=\"TopPos\"\r\n            [class.top]=\"GetTooltipPosition() === TooltipPosition.top\"\r\n            [class.left]=\"GetTooltipPosition() === TooltipPosition.left\"\r\n            [class.right]=\"GetTooltipPosition() === TooltipPosition.right\"\r\n            [class.bottom]=\"GetTooltipPosition() === TooltipPosition.bottom\">\r\n            <div class=\"tooltip-arrow\"></div>\r\n            <div class=\"tooltip-inner\">{{ tooltiptext }}</div>\r\n        </div>\r\n    </div>\r\n</div>\r\n"
-            },] }
-];
-SacTooltipComponent.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef }
-];
-
-class SACBootstrap3TooltipModule {
-}
-SACBootstrap3TooltipModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [SacTooltipComponent],
-                imports: [CommonModule],
-                exports: [SacTooltipComponent],
-            },] }
-];
-
-class SacCheckboxComponent extends SacCheckboxCommon {
-    // #region Constructors
-    /**
-     * Constructor
-     * @param formLayout SacFormLayout to define scoped layout settings
-     * @param injector Injector for injecting services
-     */
-    constructor(formLayout, injector) {
-        super(formLayout, injector);
-    }
-}
-SacCheckboxComponent.decorators = [
-    { type: 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    <label\r\n        *ngIf=\"!disablelabel && !stacked\"\r\n        for=\"{{ name }}\"\r\n        class=\"col-xs-12 control-label\"\r\n        [ngClass]=\"[!disablelabel && !stacked ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\">\r\n        <span class=\"text\">{{ label }}</span>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [class]=\"HelptextTooltipIcon\"\r\n                style=\"margin-left: 5px\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-xs-12\"\r\n        [ngClass]=\"[!disablelabel && !stacked ? (this.labelSizes | toControlWidthCss) : '']\">\r\n        <div\r\n            class=\"checkbox\"\r\n            [class.checkbox-sm]=\"componentHeight === ControlHeight.Small\"\r\n            [class.checkbox-lg]=\"componentHeight === ControlHeight.Large\">\r\n            <label for=\"{{ name }}\">\r\n                <input\r\n                    id=\"{{ name }}\"\r\n                    name=\"{{ name }}\"\r\n                    type=\"checkbox\"\r\n                    class=\"visible-checkbox\"\r\n                    [checked]=\"value\"\r\n                    [disabled]=\"isdisabled\"\r\n                    (blur)=\"onTouch()\"\r\n                    (change)=\"setValue($event.target.checked)\" />\r\n                <ng-container *ngIf=\"checkboxtext\">\r\n                    <span>{{ checkboxtext }}</span>\r\n                </ng-container>\r\n            </label>\r\n\r\n            <div\r\n                *ngIf=\"helptextmode === 'tooltip' && helptext && (disablelabel || stacked)\"\r\n                class=\"form-control-static\"\r\n                style=\"display: inline\">\r\n                <sac-tooltip\r\n                    [tooltiptext]=\"helptext\"\r\n                    [inlinemode]=\"true\">\r\n                    <span\r\n                        [class]=\"HelptextTooltipIcon\"\r\n                        style=\"margin-left: 5px; margin-right: 5px\">\r\n                    </span>\r\n                </sac-tooltip>\r\n            </div>\r\n        </div>\r\n        <p\r\n            *ngIf=\"helptextmode === 'text' && helptext\"\r\n            class=\"help-block\">\r\n            {{ helptext }}\r\n        </p>\r\n    </div>\r\n</div>\r\n",
-                // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
-                providers: [
-                    {
-                        provide: NG_VALUE_ACCESSOR,
-                        multi: true,
-                        useExisting: SacCheckboxComponent,
-                    },
-                    {
-                        provide: NG_VALIDATORS,
-                        useExisting: forwardRef(() => SacCheckboxComponent),
-                        multi: true,
-                    },
-                ],
-                styles: [".checkbox-sm{padding-top:2px}.checkbox-sm input{height:12px;margin-top:2px;width:12px}.checkbox-sm label{font-size:12px;padding-top:2px}.checkbox-lg input{height:20px;margin-top:2px;width:20px}.checkbox-lg label{font-size:18px;padding-top:4px}"]
-            },] }
-];
-SacCheckboxComponent.ctorParameters = () => [
-    { type: SacFormLayoutDirective, decorators: [{ type: Host }, { type: Optional }] },
-    { type: Injector }
-];
-
-class SacRadiobuttonsComponent extends SacRadiobuttonsCommon {
-    // #region Constructors
-    /**
-     * Constructor
-     * @param formLayout SacFormLayout to define scoped layout settings
-     * @param injector Injector for injecting services
-     */
-    constructor(formLayout, injector) {
-        super(formLayout, injector);
-    }
-}
-SacRadiobuttonsComponent.decorators = [
-    { type: 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    <label\r\n        *ngIf=\"disablelabel === false\"\r\n        for=\"{{ name }}\"\r\n        class=\"col-xs-12 control-label\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\">\r\n        <span class=\"text\">{{ label }}</span>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [class]=\"HelptextTooltipIcon\"\r\n                style=\"margin-left: 5px\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-xs-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\r\n        <div>\r\n            <ng-content></ng-content>\r\n        </div>\r\n        <p\r\n            *ngIf=\"helptextmode === 'text' && helptext\"\r\n            class=\"help-block\">\r\n            {{ helptext }}\r\n        </p>\r\n    </div>\r\n</div>\r\n",
-                // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
-                providers: [
-                    {
-                        provide: NG_VALUE_ACCESSOR,
-                        useExisting: forwardRef(() => SacRadiobuttonsComponent),
-                        multi: true,
-                    },
-                    {
-                        provide: NG_VALIDATORS,
-                        useExisting: forwardRef(() => SacRadiobuttonsComponent),
-                        multi: true,
-                    },
-                ]
-            },] }
-];
-SacRadiobuttonsComponent.ctorParameters = () => [
-    { type: SacFormLayoutDirective, decorators: [{ type: Host }, { type: Optional }] },
-    { type: Injector }
-];
-
-class SacRadiobuttonComponent extends SacRadiobuttonCommon {
-    // #region Constructors
-    constructor(sacRadioButtons, formLayout, injector) {
-        super(sacRadioButtons, formLayout, injector);
-    }
-}
-SacRadiobuttonComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'sac-radiobutton',
-                template: "<div\r\n    class=\"radio\"\r\n    *ngIf=\"hidden === false\"\r\n    [class.radio-sm]=\"componentHeight === ControlHeight.Small\"\r\n    [class.radio-lg]=\"componentHeight === ControlHeight.Large\">\r\n    <label for=\"{{ getName }}_{{ getIndex }}\">\r\n        <input\r\n            id=\"{{ getName }}_{{ getIndex }}\"\r\n            name=\"{{ getName }}\"\r\n            type=\"radio\"\r\n            [value]=\"value\"\r\n            [checked]=\"checked\"\r\n            (change)=\"ChangeEvent()\"\r\n            [disabled]=\"isDisabled\" />\r\n        <ng-template *ngTemplateOutlet=\"labeltemplate || defaultItemLabelTemplate; context: { label: label }\"></ng-template>\r\n        <p\r\n            *ngIf=\"helptextmode === 'text' && helptext\"\r\n            class=\"help-block\">\r\n            {{ helptext }}\r\n        </p>\r\n    </label>\r\n\r\n    <div\r\n        *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n        class=\"form-control-static\"\r\n        style=\"display: inline\">\r\n        <sac-tooltip\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [class]=\"HelptextTooltipIcon\"\r\n                style=\"margin-left: 5px; margin-right: 5px\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </div>\r\n</div>\r\n\r\n<ng-template\r\n    #defaultItemLabelTemplate\r\n    let-label=\"label\">\r\n    <span>{{ label }}</span>\r\n</ng-template>\r\n",
-                styles: [".radio-lg label{font-size:18px;padding-top:2px}.radio-lg label input{height:20px;margin-top:2px;width:20px}.radio-sm{padding-top:2px}.radio-sm label{font-size:12px;min-height:14px;padding-top:2px}.radio-sm label input{height:12px;margin-top:2px;width:12px}"]
-            },] }
-];
-SacRadiobuttonComponent.ctorParameters = () => [
-    { type: SacRadiobuttonsComponent, decorators: [{ type: Host }] },
-    { type: SacFormLayoutDirective, decorators: [{ type: Host }, { type: Optional }] },
-    { type: Injector }
-];
-
-class SACBootstrap3CheckboxModule {
-}
-SACBootstrap3CheckboxModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [
-                    SacCheckboxComponent,
-                    SacRadiobuttonComponent,
-                    SacRadiobuttonsComponent,
-                ],
-                imports: [
-                    CommonModule,
-                    SACBootstrap3LayoutModule,
-                    SACBootstrap3TooltipModule,
-                ],
-                exports: [
-                    SacCheckboxComponent,
-                    SacRadiobuttonComponent,
-                    SacRadiobuttonsComponent,
-                ],
-            },] }
-];
-
-class SacDialogComponent extends SacDialogCommon {
-    constructor(el, cdRef) {
-        super(cdRef);
-        //#region Bootstrap 3 Spezifische Properites
-        this.zindex = 20002;
-        this._lastDialogMarginTop = 0;
-        this.element = el.nativeElement;
-    }
-    // Margin Top für Center Position des Dialogs berechnen
-    get dialogMarginTop() {
-        let result = 0;
-        // ContentPlaceholder kann NULL/UNDEFINED sein wenn Dialog nicht angezeigt wird
-        if (this.dialogElement !== null && this.dialogElement !== undefined) {
-            result = (this.dialogElement.nativeElement.clientHeight / 2) * -1;
-        }
-        // Change Detection ausführen, falls Wert nach Rendering noch geändert hat. Kann durch HTML Content / Zeilenumbrüche usw. ausgelöst werden.
-        if (this._lastDialogMarginTop !== result) {
-            this._lastDialogMarginTop = result;
-            this.ChangeDetector.detectChanges();
-        }
-        return result;
-    }
-    //#endregion
-    ngOnInit() {
-        // Element an Body für korrektes Styling unter Bootstrap 3 verschieben
-        document.body.appendChild(this.element);
-    }
-    ngOnDestroy() {
-        this.hide();
-        if (document.body.contains(this.element)) {
-            document.body.removeChild(this.element);
-        }
-        super.ngOnDestroy();
-    }
-}
-SacDialogComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'sac-dialog',
-                template: "<div [id]=\"name\" *ngIf=\"_show\" [ngStyle]=\"{'z-index': zindex}\">\r\n  <div\r\n    class=\"modal in\"\r\n    style=\"display: block\"\r\n    tabindex=\"-1\"\r\n    role=\"dialog\"\r\n    #dialog\r\n  >\r\n    <div\r\n      class=\"modal-dialog\"\r\n      [class.modal-sm]=\"_size==='small'\"\r\n      [class.modal-lg]=\"_size === 'large' || _size === 'extralarge'\"\r\n      role=\"document\"\r\n    >\r\n      <div class=\"modal-content\">\r\n        <div class=\"modal-header\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"close\"\r\n            data-dismiss=\"modal\"\r\n            aria-label=\"Close\"\r\n            (click)=\"hide()\"\r\n            *ngIf=\"closebutton\"\r\n          >\r\n            <span aria-hidden=\"true\">&times;</span>\r\n          </button>\r\n          <span class=\"modal-title\">{{title}}</span>\r\n        </div>\r\n        <div class=\"modal-body\">\r\n          <ng-content select=\"[dialogbody]\"></ng-content>\r\n        </div>\r\n        <div class=\"modal-footer\">\r\n          <ng-content select=\"[dialogfooter]\"></ng-content>\r\n        </div>\r\n      </div>\r\n      <!-- /.modal-content -->\r\n    </div>\r\n    <!-- /.modal-dialog -->\r\n  </div>\r\n  <!-- /.modal -->\r\n</div>\r\n<div class=\"modal-backdrop in\" *ngIf=\"_show && backdrop\" #backdrop></div>\r\n"
-            },] }
-];
-SacDialogComponent.ctorParameters = () => [
-    { type: ElementRef },
-    { type: ChangeDetectorRef }
-];
-SacDialogComponent.propDecorators = {
-    zindex: [{ type: Input }]
+class SacButtonComponent extends SacButtonCommon {
+}
+SacButtonComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'sac-button',
+                template: "<a\n  [id]=\"name\"\n  class=\"btn\"\n  [class.btn-primary]=\"role === 'primary'\"\n  [class.btn-secondary]=\"role === 'secondary'\"\n  [class.btn-success]=\"role === 'success'\"\n  [class.btn-danger]=\"role === 'danger'\"\n  [class.btn-warning]=\"role === 'warning'\"\n  [class.btn-info]=\"role === 'info'\"\n  [class.btn-default]=\"role === 'default'\"\n  [class.btn-link]=\"role === 'link'\"\n  [attr.disabled]=\"_isdisabled ? 'disabled' : null\"\n  (click)=\"buttonClick()\"\n>\n  <i\n    *ngIf=\"isloading\"\n    class=\"\"\n    role=\"status\"\n    aria-hidden=\"true\"\n    class=\"glyphicon glyphicon-repeat spin\"\n    [ngStyle]=\"{ 'margin-right': text ? '0.5rem': null}\"\n  ></i>\n  <i\n    *ngIf=\"!isloading && icon !== ''\"\n    [ngClass]=\"icon\"\n    [ngStyle]=\"{ 'margin-right': text ? '0.5rem': null}\"\n  ></i>\n  {{text}}\n</a>\n",
+                encapsulation: 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); } }']
+            },] }
+];
+
+class SACBootstrap3ButtonModule {
+}
+SACBootstrap3ButtonModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [SacButtonComponent],
+                imports: [
+                    CommonModule
+                ],
+                exports: [SacButtonComponent]
+            },] }
+];
+
+class SacFormLayoutDirective extends SacFormLayoutCommon {
+}
+SacFormLayoutDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[sacFormLayout]',
+            },] }
+];
+
+class SacToControlHeightPipe {
+    // #region Public Methods
+    /**
+     * Returns the CSS class that defines the height for the control
+     * @param value ControlHeight value or null
+     */
+    transform(value) {
+        // Return default value
+        if (!value) {
+            return '';
+        }
+        switch (value) {
+            case ControlHeight.Small:
+                return 'input-sm';
+            case ControlHeight.Large:
+                return 'input-lg';
+            default:
+                return '';
+        }
+    }
+}
+SacToControlHeightPipe.decorators = [
+    { type: Pipe, args: [{
+                name: 'toControlHeight',
+            },] }
+];
+
+class SacToControlWidthCssPipe {
+    // #region Public Methods
+    /**
+     * Get CSS classes from label width configuration to set control size
+     * @param value Configuration with grid columns for different viewports
+     * @returns string with css classe for bootstrap3
+     */
+    transform(value) {
+        const classes = [];
+        if (value.labelSizeXs) {
+            classes.push('col-xs-' + this.calcControlSize(value.labelSizeXs));
+        }
+        if (value.labelSizeSm) {
+            classes.push('col-sm-' + this.calcControlSize(value.labelSizeSm));
+        }
+        if (value.labelSizeMd) {
+            classes.push('col-md-' + this.calcControlSize(value.labelSizeMd));
+        }
+        if (value.labelSizeLg) {
+            classes.push('col-lg-' + this.calcControlSize(value.labelSizeLg));
+        }
+        return classes.join(' ');
+    }
+    // #endregion Public Methods
+    // #region Private Methods
+    /**
+     * calculate the control size
+     * @param labelsize grid size of label
+     * @returns grid size for control. should be between 1 and 12
+     */
+    calcControlSize(labelsize) {
+        if (labelsize === 12) {
+            return 12;
+        }
+        if (!labelsize) {
+            return 12;
+        }
+        return 12 - labelsize;
+    }
+}
+SacToControlWidthCssPipe.decorators = [
+    { type: Pipe, args: [{
+                name: 'toControlWidthCss',
+            },] }
+];
+
+class SacToLabelHeightPipe {
+    // #region Public Methods
+    /**
+     * Returns the CSS class that defines the height for the control
+     * @param value ControlHeight value or null
+     */
+    transform(value) {
+        // Return default value
+        if (!value) {
+            return '';
+        }
+        switch (value) {
+            case ControlHeight.Small:
+                return 'form-group-sm';
+            case ControlHeight.Large:
+                return 'form-group-lg';
+            default:
+                return '';
+        }
+    }
+}
+SacToLabelHeightPipe.decorators = [
+    { type: Pipe, args: [{
+                name: 'toLabelHeight',
+            },] }
+];
+
+class SacToLabelWidthCssPipe {
+    // #region Public Methods
+    /**
+     * Get CSS classes from label width configuration to set label size
+     * @param value Configuration with grid columns for different viewports
+     * @returns string with css classe for bootstrap3
+     */
+    transform(value) {
+        const classes = [];
+        if (value.labelSizeXs) {
+            classes.push('col-xs-' + value.labelSizeXs);
+        }
+        if (value.labelSizeSm) {
+            classes.push('col-sm-' + value.labelSizeSm);
+        }
+        if (value.labelSizeMd) {
+            classes.push('col-md-' + value.labelSizeMd);
+        }
+        if (value.labelSizeLg) {
+            classes.push('col-lg-' + value.labelSizeLg);
+        }
+        return classes.join(' ');
+    }
+}
+SacToLabelWidthCssPipe.decorators = [
+    { type: Pipe, args: [{
+                name: 'toLabelWidthCss',
+            },] }
+];
+
+class SACBootstrap3LayoutModule {
+}
+SACBootstrap3LayoutModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [
+                    SacFormLayoutDirective,
+                    SacToControlHeightPipe,
+                    SacToControlWidthCssPipe,
+                    SacToLabelHeightPipe,
+                    SacToLabelWidthCssPipe,
+                ],
+                imports: [CommonModule],
+                exports: [
+                    SacFormLayoutDirective,
+                    SacToControlHeightPipe,
+                    SacToControlWidthCssPipe,
+                    SacToLabelHeightPipe,
+                    SacToLabelWidthCssPipe,
+                ],
+            },] }
+];
+
+/**
+ * Tooltip Komponente
+ *
+ * @example ToolTip Control
+ *
+ *  <ngTooltip tooltiptext="Mein Tooltip" [inlinemode]="true">
+ *    <i class="tooltip"></i>
+ *  </ngTooltip>
+ *
+ * @example ToolTip Control im Inline Mode. Style auf Icon kann auch in Klasse ausgelagert werden.
+ *
+ *  <div class="form-inline">
+ *    <ngInputSearch iconname="Suchen"></ngInputSearch>
+ *    <ngTooltip tooltiptext="Mein Tooltip" [inlinemode]="true">
+ *      <i class="tooltip" style="position: relative; left: 0; top: 3px; display: inline-block; margin-right: 10px;"></i>
+ *    </ngTooltip>
+ *  </div>
+ *
+ */
+class SacTooltipComponent extends SacTooltipCommon {
+    // #region Constructors
+    /**
+     * Konstrukor
+     * @param parent SacFormular Instanz
+     * @param injector Component Injector
+     */
+    constructor(cdRef, ref) {
+        super(cdRef, ref);
+    }
+    // #endregion Constructors
+    // #region Protected Methods
+    /**
+     * Padding for Tooltip
+     * @returns Always 0. BS3 not require Padding
+     */
+    getTooltipOffset() {
+        return 0;
+    }
+}
+SacTooltipComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'sac-tooltip',
+                template: "<div [style.display]=\"inlinemode ? 'inline' : null\">\n    <div\n        #container\n        (mouseenter)=\"ShowTooltip()\"\n        (mouseleave)=\"HideTooltip()\"\n        [style.display]=\"inlinemode ? 'inline' : null\">\n        <ng-content></ng-content>\n    </div>\n    <div\n        *ngIf=\"IsTooltipVisible()\"\n        #tooltip>\n        <div\n            [style.visibility]=\"IsTooltipContentVisible ? 'visible' : 'hidden'\"\n            class=\"tooltip in\"\n            style=\"display: block\"\n            [style.left.px]=\"LeftPos\"\n            [style.top.px]=\"TopPos\"\n            [class.top]=\"GetTooltipPosition() === TooltipPosition.top\"\n            [class.left]=\"GetTooltipPosition() === TooltipPosition.left\"\n            [class.right]=\"GetTooltipPosition() === TooltipPosition.right\"\n            [class.bottom]=\"GetTooltipPosition() === TooltipPosition.bottom\">\n            <div class=\"tooltip-arrow\"></div>\n            <div class=\"tooltip-inner\">{{ tooltiptext }}</div>\n        </div>\n    </div>\n</div>\n"
+            },] }
+];
+SacTooltipComponent.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: ElementRef }
+];
+
+class SACBootstrap3TooltipModule {
+}
+SACBootstrap3TooltipModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [SacTooltipComponent],
+                imports: [CommonModule],
+                exports: [SacTooltipComponent],
+            },] }
+];
+
+class SacCheckboxComponent extends SacCheckboxCommon {
+    // #region Constructors
+    /**
+     * Constructor
+     * @param formLayout SacFormLayout to define scoped layout settings
+     * @param injector Injector for injecting services
+     */
+    constructor(formLayout, injector) {
+        super(formLayout, injector);
+    }
+}
+SacCheckboxComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'sac-checkbox',
+                template: "<div\n    class=\"row\"\n    [class.form-group]=\"!stacked\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\">\n    <label\n        *ngIf=\"!disablelabel && !stacked\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[!disablelabel && !stacked ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[!disablelabel && !stacked ? (this.labelSizes | toControlWidthCss) : '']\">\n        <div\n            class=\"checkbox\"\n            [class.checkbox-sm]=\"componentHeight === ControlHeight.Small\"\n            [class.checkbox-lg]=\"componentHeight === ControlHeight.Large\">\n            <label for=\"{{ name }}\">\n                <input\n                    id=\"{{ name }}\"\n                    name=\"{{ name }}\"\n                    type=\"checkbox\"\n                    class=\"visible-checkbox\"\n                    [checked]=\"value\"\n                    [disabled]=\"isdisabled\"\n                    (blur)=\"onTouch()\"\n                    (change)=\"setValue($event.target.checked)\" />\n                <ng-container *ngIf=\"checkboxtext\">\n                    <span>{{ checkboxtext }}</span>\n                </ng-container>\n            </label>\n\n            <div\n                *ngIf=\"helptextmode === 'tooltip' && helptext && (disablelabel || stacked)\"\n                class=\"form-control-static\"\n                style=\"display: inline\">\n                <sac-tooltip\n                    [tooltiptext]=\"helptext\"\n                    [inlinemode]=\"true\">\n                    <span\n                        [class]=\"HelptextTooltipIcon\"\n                        style=\"margin-left: 5px; margin-right: 5px\">\n                    </span>\n                </sac-tooltip>\n            </div>\n        </div>\n        <p\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"help-block\">\n            {{ helptext }}\n        </p>\n    </div>\n</div>\n",
+                // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
+                providers: [
+                    {
+                        provide: NG_VALUE_ACCESSOR,
+                        multi: true,
+                        useExisting: SacCheckboxComponent,
+                    },
+                    {
+                        provide: NG_VALIDATORS,
+                        useExisting: forwardRef(() => SacCheckboxComponent),
+                        multi: true,
+                    },
+                ],
+                styles: [".checkbox-sm{padding-top:2px}.checkbox-sm input{height:12px;margin-top:2px;width:12px}.checkbox-sm label{font-size:12px;padding-top:2px}.checkbox-lg input{height:20px;margin-top:2px;width:20px}.checkbox-lg label{font-size:18px;padding-top:4px}"]
+            },] }
+];
+SacCheckboxComponent.ctorParameters = () => [
+    { type: SacFormLayoutDirective, decorators: [{ type: Host }, { type: Optional }] },
+    { type: Injector }
+];
+
+class SacRadiobuttonsComponent extends SacRadiobuttonsCommon {
+    // #region Constructors
+    /**
+     * Constructor
+     * @param formLayout SacFormLayout to define scoped layout settings
+     * @param injector Injector for injecting services
+     */
+    constructor(formLayout, injector) {
+        super(formLayout, injector);
+    }
+}
+SacRadiobuttonsComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'sac-radiobuttons',
+                template: "<div\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\">\n    <label\n        *ngIf=\"disablelabel === false\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\n        <div>\n            <ng-content></ng-content>\n        </div>\n        <p\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"help-block\">\n            {{ helptext }}\n        </p>\n    </div>\n</div>\n",
+                // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
+                providers: [
+                    {
+                        provide: NG_VALUE_ACCESSOR,
+                        useExisting: forwardRef(() => SacRadiobuttonsComponent),
+                        multi: true,
+                    },
+                    {
+                        provide: NG_VALIDATORS,
+                        useExisting: forwardRef(() => SacRadiobuttonsComponent),
+                        multi: true,
+                    },
+                ]
+            },] }
+];
+SacRadiobuttonsComponent.ctorParameters = () => [
+    { type: SacFormLayoutDirective, decorators: [{ type: Host }, { type: Optional }] },
+    { type: Injector }
+];
+
+class SacRadiobuttonComponent extends SacRadiobuttonCommon {
+    // #region Constructors
+    constructor(sacRadioButtons, formLayout, injector) {
+        super(sacRadioButtons, formLayout, injector);
+    }
+}
+SacRadiobuttonComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'sac-radiobutton',
+                template: "<div\n    class=\"radio\"\n    *ngIf=\"hidden === false\"\n    [class.radio-sm]=\"componentHeight === ControlHeight.Small\"\n    [class.radio-lg]=\"componentHeight === ControlHeight.Large\">\n    <label for=\"{{ getName }}_{{ getIndex }}\">\n        <input\n            id=\"{{ getName }}_{{ getIndex }}\"\n            name=\"{{ getName }}\"\n            type=\"radio\"\n            [value]=\"value\"\n            [checked]=\"checked\"\n            (change)=\"ChangeEvent()\"\n            [disabled]=\"isDisabled\" />\n        <ng-template *ngTemplateOutlet=\"labeltemplate || defaultItemLabelTemplate; context: { label: label }\"></ng-template>\n        <p\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"help-block\">\n            {{ helptext }}\n        </p>\n    </label>\n\n    <div\n        *ngIf=\"helptextmode === 'tooltip' && helptext\"\n        class=\"form-control-static\"\n        style=\"display: inline\">\n        <sac-tooltip\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px; margin-right: 5px\">\n            </span>\n        </sac-tooltip>\n    </div>\n</div>\n\n<ng-template\n    #defaultItemLabelTemplate\n    let-label=\"label\">\n    <span>{{ label }}</span>\n</ng-template>\n",
+                styles: [".radio-lg label{font-size:18px;padding-top:2px}.radio-lg label input{height:20px;margin-top:2px;width:20px}.radio-sm{padding-top:2px}.radio-sm label{font-size:12px;min-height:14px;padding-top:2px}.radio-sm label input{height:12px;margin-top:2px;width:12px}"]
+            },] }
+];
+SacRadiobuttonComponent.ctorParameters = () => [
+    { type: SacRadiobuttonsComponent, decorators: [{ type: Host }] },
+    { type: SacFormLayoutDirective, decorators: [{ type: Host }, { type: Optional }] },
+    { type: Injector }
+];
+
+class SACBootstrap3CheckboxModule {
+}
+SACBootstrap3CheckboxModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [
+                    SacCheckboxComponent,
+                    SacRadiobuttonComponent,
+                    SacRadiobuttonsComponent,
+                ],
+                imports: [
+                    CommonModule,
+                    SACBootstrap3LayoutModule,
+                    SACBootstrap3TooltipModule,
+                ],
+                exports: [
+                    SacCheckboxComponent,
+                    SacRadiobuttonComponent,
+                    SacRadiobuttonsComponent,
+                ],
+            },] }
+];
+
+class SacDialogComponent extends SacDialogCommon {
+    constructor(el, cdRef) {
+        super(cdRef);
+        //#region Bootstrap 3 Spezifische Properites
+        this.zindex = 20002;
+        this._lastDialogMarginTop = 0;
+        this.element = el.nativeElement;
+    }
+    // Margin Top für Center Position des Dialogs berechnen
+    get dialogMarginTop() {
+        let result = 0;
+        // ContentPlaceholder kann NULL/UNDEFINED sein wenn Dialog nicht angezeigt wird
+        if (this.dialogElement !== null && this.dialogElement !== undefined) {
+            result = (this.dialogElement.nativeElement.clientHeight / 2) * -1;
+        }
+        // Change Detection ausführen, falls Wert nach Rendering noch geändert hat. Kann durch HTML Content / Zeilenumbrüche usw. ausgelöst werden.
+        if (this._lastDialogMarginTop !== result) {
+            this._lastDialogMarginTop = result;
+            this.ChangeDetector.detectChanges();
+        }
+        return result;
+    }
+    //#endregion
+    ngOnInit() {
+        // Element an Body für korrektes Styling unter Bootstrap 3 verschieben
+        document.body.appendChild(this.element);
+    }
+    ngOnDestroy() {
+        this.hide();
+        if (document.body.contains(this.element)) {
+            document.body.removeChild(this.element);
+        }
+        super.ngOnDestroy();
+    }
+}
+SacDialogComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'sac-dialog',
+                template: "<div [id]=\"name\" *ngIf=\"_show\" [ngStyle]=\"{'z-index': zindex}\">\n  <div\n    class=\"modal in\"\n    style=\"display: block\"\n    tabindex=\"-1\"\n    role=\"dialog\"\n    #dialog\n  >\n    <div\n      class=\"modal-dialog\"\n      [class.modal-sm]=\"_size==='small'\"\n      [class.modal-lg]=\"_size === 'large' || _size === 'extralarge'\"\n      role=\"document\"\n    >\n      <div class=\"modal-content\">\n        <div class=\"modal-header\">\n          <button\n            type=\"button\"\n            class=\"close\"\n            data-dismiss=\"modal\"\n            aria-label=\"Close\"\n            (click)=\"hide()\"\n            *ngIf=\"closebutton\"\n          >\n            <span aria-hidden=\"true\">&times;</span>\n          </button>\n          <span class=\"modal-title\">{{title}}</span>\n        </div>\n        <div class=\"modal-body\">\n          <ng-content select=\"[dialogbody]\"></ng-content>\n        </div>\n        <div class=\"modal-footer\">\n          <ng-content select=\"[dialogfooter]\"></ng-content>\n        </div>\n      </div>\n      <!-- /.modal-content -->\n    </div>\n    <!-- /.modal-dialog -->\n  </div>\n  <!-- /.modal -->\n</div>\n<div class=\"modal-backdrop in\" *ngIf=\"_show && backdrop\" #backdrop></div>\n"
+            },] }
+];
+SacDialogComponent.ctorParameters = () => [
+    { type: ElementRef },
+    { type: ChangeDetectorRef }
+];
+SacDialogComponent.propDecorators = {
+    zindex: [{ type: Input }]
 };
 
-class SACBootstrap3DialogModule {
-}
-SACBootstrap3DialogModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [SacDialogComponent],
-                imports: [
-                    CommonModule
-                ],
-                exports: [SacDialogComponent]
-            },] }
-];
-
-class SacConfirmComponent extends SacConfirmCommon {
-}
-SacConfirmComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'sac-confirm',
-                template: "<sac-dialog\r\n  name=\"confirmDialog\"\r\n  [(isvisible)]=\"isvisible\"\r\n  [title]=\"title\"\r\n  [allowesc]=\"false\"\r\n  [closebutton]=\"false\"\r\n>\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"
-            },] }
-];
-
-/**
- * Service für Confirm Messages in TypeScript Code
- *
- * @example
- * // Beispiel für ConfirmMessage mit Standard Buttons (Ja / Nein).
- * confirmService.ConfirmMessage('titel', 'frage').subscribe(action => { // Action Code });
- *
- * @example
- * // Beispiel für ConfirmMessage mit eigenen Buttons
- * let buttons: SacConfirmButton[] = [];
- * buttons.push(new SacConfirmButton('ActionKey','Text Primary'));
- * buttons.push(new SacConfirmButton('ActionKey2','Text Button 2'));
- * confirmService.ConfirmMessage('titel', 'frage', buttons).subscribe(action => { // Action Code });
- */
-class ServiceConfirm extends ServiceConfirmCommon {
-    // #endregion Properties
-    // #region Constructors
-    /**
-     * Konstruktor
-     * @param componentFactoryResolver Component Factory Resolver Instanz
-     * @param appRef Application Referenz. Wird benötigt um den Dialog am Body anzuhängen
-     * @param injector Injector. Wird benötigt um den Dialog dynamisch zu erzeugen
-     */
-    constructor(componentFactoryResolver, appRef, injector) {
-        super(appRef, injector);
-        this.componentFactoryResolver = componentFactoryResolver;
-        // #region Properties
-        /**
-         * Collection von Buttons die angezeigt werden müssen.
-         */
-        this.buttons = [];
-        /**
-         * Message die in Dialog angezeigt werden soll.
-         */
-        this.message = '';
-        /**
-         * Titel der im Dialog angezeigt werden soll.
-         */
-        this.title = '';
-    }
-    // #endregion Constructors
-    // #region Public Methods
-    /**
-     * Confirm Dialog anzeigen
-     * @param message Nachricht die angezeigt werden soll.
-     * @returns EventEmitter mit Key des Buttons, welcher geklickt wurde.
-     */
-    ConfirmMessage(title, message, buttons = null) {
-        this.title = title;
-        this.message = message;
-        // Default Buttons setzen, wenn keine Buttons angegeben sind
-        if (!isDefined(buttons)) {
-            this.buttons = [];
-            forkJoin({
-                button_yes: this.localisationService.GetString(this.validationKeyService.ConfirmDefaultButtonYes),
-                button_no: this.localisationService.GetString(this.validationKeyService.ConfirmDefaultButtonNo),
-            })
-                .pipe(take(1))
-                .subscribe((texte) => {
-                this.buttons.push(new SacConfirmButton('yes', texte.button_yes, 'primary'));
-                this.buttons.push(new SacConfirmButton('no', texte.button_no));
-            });
-        }
-        else {
-            this.buttons = buttons;
-        }
-        return super.Confirm();
-    }
-    /**
-     * Erzeugen einer Component Factory für einen Dialog
-     */
-    GetComponentFactory() {
-        return this.componentFactoryResolver.resolveComponentFactory(SacConfirmComponent);
-    }
-    // #endregion Public Methods
-    // #region Protected Methods
-    /**
-     * Konfiguration des Dialogs
-     * @param instance Instanz eines SacConfirm Dialogs
-     */
-    ConfigureDialog(instance) {
-        // Text in Dialog setzen
-        instance.title = this.title;
-        instance.message = this.message;
-        instance.buttons = this.buttons;
-        instance.image = this.iconService.ConfirmDefaultImage;
-    }
-}
-ServiceConfirm.decorators = [
-    { type: Injectable }
-];
-ServiceConfirm.ctorParameters = () => [
-    { type: ComponentFactoryResolver, decorators: [{ type: Inject, args: [ComponentFactoryResolver,] }] },
-    { type: ApplicationRef },
-    { type: Injector }
-];
-
-/**
- *  Module für Confirm Messages
- *
- *  In NgModule der Applikation folgenden Eintrag bei Imports einfügen: ExanicBootstrap3ConfirmModule.forRoot()
- *
- */
-class SACBootstrap3ConfirmModule {
-    // #region Public Static Methods
-    static forRoot() {
-        return {
-            ngModule: SACBootstrap3ConfirmModule,
-            providers: [ServiceConfirm],
-        };
-    }
-}
-SACBootstrap3ConfirmModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [SacConfirmComponent],
-                imports: [CommonModule, SACBootstrap3DialogModule, SACBootstrap3ButtonModule],
-                exports: [SacConfirmComponent],
-                entryComponents: [SacConfirmComponent],
-            },] }
-];
-
-/**
- * Component for context menu
- */
-class SacContextmenuComponent extends SacContextmenuCommon {
-    // #region Constructors
-    /**
-     * Constructor
-     * @param document Reference to HTML document
-     * @param ngZone Angular Zone Service
-     * @param elementRef Reference to HTML element of the current component
-     * @param renderer Render Service from Angular
-     * @param injector injector to resolve services
-     */
-    constructor(document, ngZone, elementRef, renderer, injector) {
-        super(document, ngZone, elementRef, renderer, injector);
-    }
-}
-SacContextmenuComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'sac-contextmenu',
-                template: "<div\r\n    class=\"dropdown\"\r\n    [ngClass]=\"cssclass\">\r\n    <ng-container [ngTemplateOutlet]=\"buttontemplate || defaultButtonTemplate\"></ng-container>\r\n\r\n    <ul\r\n        class=\"dropdown-menu dropdown-menu-right\"\r\n        sacContextMenuContainer\r\n        [class.show]=\"isopen\">\r\n        <ng-content></ng-content>\r\n    </ul>\r\n</div>\r\n\r\n<ng-template #defaultButtonTemplate>\r\n    <button\r\n        sacContextMenuAnchor\r\n        class=\"btn btn-link\"\r\n        type=\"button\"\r\n        (click)=\"toggle()\">\r\n        <i [class]=\"IconContextMenu\"></i>\r\n    </button>\r\n</ng-template>\r\n"
-            },] }
-];
-SacContextmenuComponent.ctorParameters = () => [
-    { type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] },
-    { type: NgZone },
-    { type: ElementRef },
-    { type: Renderer2 },
-    { type: Injector }
-];
-
-/**
- * Anker Komponente für Context Menü. Wird zum positionieren des Context Menü in der Page benötigt.
- */
-class SacContextmenuAnchorDirective extends SacContextmenuAnchorCommon {
-    // #region Constructors
-    /**
-     * Konstruktor
-     * @param elementRef HTML DOM Referenz
-     */
-    constructor(elementRef) {
-        super(elementRef);
-    }
-}
-SacContextmenuAnchorDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[sacContextMenuAnchor]',
-                providers: [
-                    {
-                        provide: SacContextmenuAnchorCommon,
-                        useExisting: forwardRef(() => SacContextmenuAnchorDirective),
-                    },
-                ],
-            },] }
-];
-SacContextmenuAnchorDirective.ctorParameters = () => [
-    { type: ElementRef }
-];
-
-/**
- * Marker Komponente für Context Menü
- */
-class SacContextmenuContainerDirective extends SacContextMenuContrainerCommon {
-    // #region Constructors
-    /**
-     * Konstruktor
-     * @param elementRef Referenz auf DOM Element
-     */
-    constructor(elementRef) {
-        super(elementRef);
-    }
-}
-SacContextmenuContainerDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[sacContextMenuContainer]',
-                providers: [
-                    {
-                        provide: SacContextMenuContrainerCommon,
-                        useExisting: forwardRef(() => SacContextmenuContainerDirective),
-                    },
-                ],
-            },] }
-];
-SacContextmenuContainerDirective.ctorParameters = () => [
-    { type: ElementRef }
-];
-
-/**
- * Component for menu entry in context menu
- */
-class SacContextmenuItemButtonComponent extends SacContextmenuItemButtonCommon {
-    // #region Constructors
-    /**
-     * Constructor
-     * @param contextmenu Instance von Context Menü
-     */
-    constructor(el) {
-        super();
-        this.el = el;
-    }
-    // #endregion Constructors
-    // #region Public Methods
-    ngOnInit() {
-        const rootElement = this.el.nativeElement;
-        const parentElement = rootElement.parentElement;
-        while (rootElement.firstChild) {
-            parentElement.insertBefore(rootElement.firstChild, rootElement);
-        }
-        parentElement.removeChild(rootElement);
-    }
-}
-SacContextmenuItemButtonComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'sac-contextmenubutton',
-                template: "<li\r\n    [class.disabled]=\"isdisabled\"\r\n    [ngClass]=\"cssclass\">\r\n    <a\r\n        [id]=\"name\"\r\n        (click)=\"callaction($event)\"\r\n        [attr.disabled]=\"isdisabled ? 'disabled' : null\"\r\n        [ngStyle]=\"{ cursor: !isdisabled ? 'pointer' : null }\"\r\n        style=\"display: flex\">\r\n        <div\r\n            style=\"min-width: 25px\"\r\n            *ngIf=\"!isicondisabled\">\r\n            <img\r\n                *ngIf=\"image\"\r\n                [src]=\"image\"\r\n                style=\"vertical-align: baseline\"\r\n                [ngStyle]=\"{ 'margin-right': text ? '5px' : null }\" />\r\n            <i\r\n                *ngIf=\"icon\"\r\n                [class]=\"iconstyle + ' ' + icon\"\r\n                [ngStyle]=\"{ 'margin-right': text ? '5px' : null }\">\r\n            </i>\r\n        </div>\r\n        <div>{{ text }}</div>\r\n    </a>\r\n</li>\r\n",
-                providers: [
-                    {
-                        provide: SacContextmenuItemCommon,
-                        useExisting: forwardRef(() => SacContextmenuItemButtonComponent),
-                    },
-                ]
-            },] }
-];
-SacContextmenuItemButtonComponent.ctorParameters = () => [
-    { type: ElementRef }
-];
-
-/**
- * Splitter Komponente in Context Menü
- */
-class SacContextmenuItemSplitterComponent extends SacContextmenuItemCommon {
-}
-SacContextmenuItemSplitterComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'sac-contextmenusplitter',
-                template: "<li\r\n    role=\"separator\"\r\n    class=\"divider\"></li>\r\n",
-                providers: [
-                    {
-                        provide: SacContextmenuItemCommon,
-                        useExisting: forwardRef(() => SacContextmenuItemSplitterComponent),
-                    },
-                ]
-            },] }
-];
-
-class SACBootstrap3ContextmenuModule {
-}
-SACBootstrap3ContextmenuModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [
-                    SacContextmenuComponent,
-                    SacContextmenuItemButtonComponent,
-                    SacContextmenuItemSplitterComponent,
-                    SacContextmenuAnchorDirective,
-                    SacContextmenuContainerDirective,
-                ],
-                imports: [CommonModule],
-                exports: [
-                    SacContextmenuComponent,
-                    SacContextmenuItemButtonComponent,
-                    SacContextmenuItemSplitterComponent,
-                    SacContextmenuAnchorDirective,
-                ],
-            },] }
-];
-
-// #region Classes
-class SacDateComponent extends SacDateCommon {
-    // #region Constructors
-    /**
-     * Constructor
-     * @param formLayout SacFormLayout to define scoped layout settings
-     * @param injector Injector for injecting services
-     * @param elementRef Reference to html dom element
-     * @param cdRef  Change Dectection Servie
-     */
-    constructor(formLayout, injector, elementRef, cdRef) {
-        super(formLayout, injector, elementRef, cdRef);
-    }
-}
-SacDateComponent.decorators = [
-    { type: 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    <label\r\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n        id=\"{{ name }}label\"\r\n        for=\"{{ name }}\"\r\n        class=\"col-xs-12 control-label\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\r\n        [class.required]=\"isrequired\">\r\n        <span class=\"text\">{{ label }}</span>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [class]=\"HelptextTooltipIcon\"\r\n                style=\"margin-left: 5px\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-xs-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\r\n        <div\r\n            style=\"position: relative\"\r\n            [style.width.px]=\"componentHeight === ControlHeight.Small ? 120 : componentHeight === ControlHeight.Large ? 180 : 140\">\r\n            <div\r\n                class=\"datetime-textbox input-group\"\r\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\r\n                <!-- this class comes in the div above when disabled [ngClass]=\"[disablelabel === false ? 'col-md-' + _inputsize : 'col-md-12']\" -->\r\n                <input\r\n                    id=\"{{ name }}\"\r\n                    name=\"{{ name }}\"\r\n                    type=\"text\"\r\n                    class=\"form-control date-control\"\r\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n                    [ngClass]=\"[componentHeight | toControlHeight]\"\r\n                    [imask]=\"imaskDate\"\r\n                    [attr.placeholder]=\"placeholder\"\r\n                    [value]=\"valuestring\"\r\n                    (blur)=\"onTouch()\"\r\n                    (accept)=\"setValueString($event)\"\r\n                    [disabled]=\"isdisabled\"\r\n                    (click)=\"showDateSelector()\" />\r\n                <span class=\"input-group-btn\">\r\n                    <button\r\n                        #pickerbutton\r\n                        class=\"btn btn-default\"\r\n                        type=\"button\"\r\n                        (click)=\"showDateSelector()\"\r\n                        [disabled]=\"isdisabled\">\r\n                        <i [class]=\"IconSelector\"></i>\r\n                    </button>\r\n                </span>\r\n            </div>\r\n            <p\r\n                *ngIf=\"helptextmode === 'text' && helptext\"\r\n                class=\"help-block\">\r\n                {{ helptext }}\r\n            </p>\r\n            <div\r\n                class=\"help-block help-block-error\"\r\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\r\n                {{ GetErrorMessage() | async }}\r\n            </div>\r\n\r\n            <div\r\n                #picker\r\n                *ngIf=\"_showselector\">\r\n                <div\r\n                    class=\"popover in\"\r\n                    role=\"tooltip\"\r\n                    style=\"display: block; max-width: unset; margin: 0\"\r\n                    [class.bottom]=\"GetPickerPosition() == TooltipPosition.bottom || GetPickerPosition() == TooltipPosition.bottomend\"\r\n                    [class.top]=\"GetPickerPosition() == TooltipPosition.top || GetPickerPosition() == TooltipPosition.topend\"\r\n                    [style.left.px]=\"posPopupLeft\"\r\n                    [style.top.px]=\"posPopupTop\">\r\n                    <div\r\n                        #pickerarrow\r\n                        style=\"margin: 0\"\r\n                        class=\"arrow\"\r\n                        [style.top.px]=\"posArrowTop\"\r\n                        [style.left.px]=\"posArrowLeft\">\r\n                    </div>\r\n\r\n                    <div class=\"popover-content\">\r\n                        <sac-dateselector\r\n                            *ngIf=\"_showselector\"\r\n                            [initialvalue]=\"value\"\r\n                            (selectdate)=\"dateselect($event)\"\r\n                            dateselection=\"true\">\r\n                        </sac-dateselector>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n            class=\"form-control-static\"\r\n            style=\"margin-left: 5px\">\r\n            <sac-tooltip\r\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n                [tooltiptext]=\"helptext\"\r\n                [inlinemode]=\"true\">\r\n                <span\r\n                    [class]=\"HelptextTooltipIcon\"\r\n                    style=\"margin-left: 5px; margin-right: 5px\">\r\n                </span>\r\n            </sac-tooltip>\r\n        </div>\r\n    </div>\r\n</div>\r\n",
-                // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
-                providers: [
-                    {
-                        provide: NG_VALUE_ACCESSOR,
-                        multi: true,
-                        useExisting: forwardRef(() => SacDateComponent),
-                    },
-                    {
-                        provide: NG_VALIDATORS,
-                        multi: true,
-                        useExisting: forwardRef(() => SacDateComponent),
-                    },
-                ]
-            },] }
-];
-SacDateComponent.ctorParameters = () => [
-    { type: SacFormLayoutDirective, decorators: [{ type: Host }, { type: Optional }] },
-    { type: Injector },
-    { type: ElementRef },
-    { type: ChangeDetectorRef }
-];
-// #endregion Classes
-// #region Variables
-const moment = moment_;
+class SACBootstrap3DialogModule {
+}
+SACBootstrap3DialogModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [SacDialogComponent],
+                imports: [
+                    CommonModule
+                ],
+                exports: [SacDialogComponent]
+            },] }
+];
+
+class SacConfirmComponent extends SacConfirmCommon {
+}
+SacConfirmComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'sac-confirm',
+                template: "<sac-dialog\n  name=\"confirmDialog\"\n  [(isvisible)]=\"isvisible\"\n  [title]=\"title\"\n  [allowesc]=\"false\"\n  [closebutton]=\"false\"\n>\n  <div dialogbody>\n    <div class=\"media\">\n      <div class=\"media-left media-middle\" *ngIf=\"hasImage()\">\n        <img [attr.src]=\"image\" />\n      </div>\n      <div class=\"media-body\">{{message}}</div>\n    </div>\n  </div>\n  <div dialogfooter>\n    <ng-container *ngFor=\"let button of buttons\">\n      <sac-button\n        [name]=\"button.key\"\n        [text]=\"button.text\"\n        [role]=\"button.role || 'default'\"\n        (clicked)=\"confirm(button.key)\"\n      ></sac-button>\n    </ng-container>\n  </div>\n</sac-dialog>\n"
+            },] }
+];
+
+/**
+ * Service für Confirm Messages in TypeScript Code
+ *
+ * @example
+ * // Beispiel für ConfirmMessage mit Standard Buttons (Ja / Nein).
+ * confirmService.ConfirmMessage('titel', 'frage').subscribe(action => { // Action Code });
+ *
+ * @example
+ * // Beispiel für ConfirmMessage mit eigenen Buttons
+ * let buttons: SacConfirmButton[] = [];
+ * buttons.push(new SacConfirmButton('ActionKey','Text Primary'));
+ * buttons.push(new SacConfirmButton('ActionKey2','Text Button 2'));
+ * confirmService.ConfirmMessage('titel', 'frage', buttons).subscribe(action => { // Action Code });
+ */
+class ServiceConfirm extends ServiceConfirmCommon {
+    // #endregion Properties
+    // #region Constructors
+    /**
+     * Konstruktor
+     * @param componentFactoryResolver Component Factory Resolver Instanz
+     * @param appRef Application Referenz. Wird benötigt um den Dialog am Body anzuhängen
+     * @param injector Injector. Wird benötigt um den Dialog dynamisch zu erzeugen
+     */
+    constructor(componentFactoryResolver, appRef, injector) {
+        super(appRef, injector);
+        this.componentFactoryResolver = componentFactoryResolver;
+        // #region Properties
+        /**
+         * Collection von Buttons die angezeigt werden müssen.
+         */
+        this.buttons = [];
+        /**
+         * Message die in Dialog angezeigt werden soll.
+         */
+        this.message = '';
+        /**
+         * Titel der im Dialog angezeigt werden soll.
+         */
+        this.title = '';
+    }
+    // #endregion Constructors
+    // #region Public Methods
+    /**
+     * Confirm Dialog anzeigen
+     * @param message Nachricht die angezeigt werden soll.
+     * @returns EventEmitter mit Key des Buttons, welcher geklickt wurde.
+     */
+    ConfirmMessage(title, message, buttons = null) {
+        this.title = title;
+        this.message = message;
+        // Default Buttons setzen, wenn keine Buttons angegeben sind
+        if (!isDefined(buttons)) {
+            this.buttons = [];
+            forkJoin({
+                button_yes: this.localisationService.GetString(this.validationKeyService.ConfirmDefaultButtonYes),
+                button_no: this.localisationService.GetString(this.validationKeyService.ConfirmDefaultButtonNo),
+            })
+                .pipe(take(1))
+                .subscribe((texte) => {
+                this.buttons.push(new SacConfirmButton('yes', texte.button_yes, 'primary'));
+                this.buttons.push(new SacConfirmButton('no', texte.button_no));
+            });
+        }
+        else {
+            this.buttons = buttons;
+        }
+        return super.Confirm();
+    }
+    /**
+     * Erzeugen einer Component Factory für einen Dialog
+     */
+    GetComponentFactory() {
+        return this.componentFactoryResolver.resolveComponentFactory(SacConfirmComponent);
+    }
+    // #endregion Public Methods
+    // #region Protected Methods
+    /**
+     * Konfiguration des Dialogs
+     * @param instance Instanz eines SacConfirm Dialogs
+     */
+    ConfigureDialog(instance) {
+        // Text in Dialog setzen
+        instance.title = this.title;
+        instance.message = this.message;
+        instance.buttons = this.buttons;
+        instance.image = this.iconService.ConfirmDefaultImage;
+    }
+}
+ServiceConfirm.decorators = [
+    { type: Injectable }
+];
+ServiceConfirm.ctorParameters = () => [
+    { type: ComponentFactoryResolver, decorators: [{ type: Inject, args: [ComponentFactoryResolver,] }] },
+    { type: ApplicationRef },
+    { type: Injector }
+];
+
+/**
+ *  Module für Confirm Messages
+ *
+ *  In NgModule der Applikation folgenden Eintrag bei Imports einfügen: ExanicBootstrap3ConfirmModule.forRoot()
+ *
+ */
+class SACBootstrap3ConfirmModule {
+    // #region Public Static Methods
+    static forRoot() {
+        return {
+            ngModule: SACBootstrap3ConfirmModule,
+            providers: [ServiceConfirm],
+        };
+    }
+}
+SACBootstrap3ConfirmModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [SacConfirmComponent],
+                imports: [CommonModule, SACBootstrap3DialogModule, SACBootstrap3ButtonModule],
+                exports: [SacConfirmComponent],
+                entryComponents: [SacConfirmComponent],
+            },] }
+];
+
+/**
+ * Component for context menu
+ */
+class SacContextmenuComponent extends SacContextmenuCommon {
+    // #region Constructors
+    /**
+     * Constructor
+     * @param document Reference to HTML document
+     * @param ngZone Angular Zone Service
+     * @param elementRef Reference to HTML element of the current component
+     * @param renderer Render Service from Angular
+     * @param injector injector to resolve services
+     */
+    constructor(document, ngZone, elementRef, renderer, injector) {
+        super(document, ngZone, elementRef, renderer, injector);
+    }
+}
+SacContextmenuComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'sac-contextmenu',
+                template: "<div\n    class=\"dropdown\"\n    [ngClass]=\"cssclass\">\n    <ng-container [ngTemplateOutlet]=\"buttontemplate || defaultButtonTemplate\"></ng-container>\n\n    <ul\n        class=\"dropdown-menu dropdown-menu-right\"\n        sacContextMenuContainer\n        [class.show]=\"isopen\">\n        <ng-content></ng-content>\n    </ul>\n</div>\n\n<ng-template #defaultButtonTemplate>\n    <button\n        sacContextMenuAnchor\n        class=\"btn btn-link\"\n        type=\"button\"\n        (click)=\"toggle()\">\n        <i [class]=\"IconContextMenu\"></i>\n    </button>\n</ng-template>\n"
+            },] }
+];
+SacContextmenuComponent.ctorParameters = () => [
+    { type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] },
+    { type: NgZone },
+    { type: ElementRef },
+    { type: Renderer2 },
+    { type: Injector }
+];
+
+/**
+ * Anker Komponente für Context Menü. Wird zum positionieren des Context Menü in der Page benötigt.
+ */
+class SacContextmenuAnchorDirective extends SacContextmenuAnchorCommon {
+    // #region Constructors
+    /**
+     * Konstruktor
+     * @param elementRef HTML DOM Referenz
+     */
+    constructor(elementRef) {
+        super(elementRef);
+    }
+}
+SacContextmenuAnchorDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[sacContextMenuAnchor]',
+                providers: [
+                    {
+                        provide: SacContextmenuAnchorCommon,
+                        useExisting: forwardRef(() => SacContextmenuAnchorDirective),
+                    },
+                ],
+            },] }
+];
+SacContextmenuAnchorDirective.ctorParameters = () => [
+    { type: ElementRef }
+];
+
+/**
+ * Marker Komponente für Context Menü
+ */
+class SacContextmenuContainerDirective extends SacContextMenuContrainerCommon {
+    // #region Constructors
+    /**
+     * Konstruktor
+     * @param elementRef Referenz auf DOM Element
+     */
+    constructor(elementRef) {
+        super(elementRef);
+    }
+}
+SacContextmenuContainerDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[sacContextMenuContainer]',
+                providers: [
+                    {
+                        provide: SacContextMenuContrainerCommon,
+                        useExisting: forwardRef(() => SacContextmenuContainerDirective),
+                    },
+                ],
+            },] }
+];
+SacContextmenuContainerDirective.ctorParameters = () => [
+    { type: ElementRef }
+];
+
+/**
+ * Component for menu entry in context menu
+ */
+class SacContextmenuItemButtonComponent extends SacContextmenuItemButtonCommon {
+    // #region Constructors
+    /**
+     * Constructor
+     * @param contextmenu Instance von Context Menü
+     */
+    constructor(el) {
+        super();
+        this.el = el;
+    }
+    // #endregion Constructors
+    // #region Public Methods
+    ngOnInit() {
+        const rootElement = this.el.nativeElement;
+        const parentElement = rootElement.parentElement;
+        while (rootElement.firstChild) {
+            parentElement.insertBefore(rootElement.firstChild, rootElement);
+        }
+        parentElement.removeChild(rootElement);
+    }
+}
+SacContextmenuItemButtonComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'sac-contextmenubutton',
+                template: "<li\n    [class.disabled]=\"isdisabled\"\n    [ngClass]=\"cssclass\">\n    <a\n        [id]=\"name\"\n        (click)=\"callaction($event)\"\n        [attr.disabled]=\"isdisabled ? 'disabled' : null\"\n        [ngStyle]=\"{ cursor: !isdisabled ? 'pointer' : null }\"\n        style=\"display: flex\">\n        <div\n            style=\"min-width: 25px\"\n            *ngIf=\"!isicondisabled\">\n            <img\n                *ngIf=\"image\"\n                [src]=\"image\"\n                style=\"vertical-align: baseline\"\n                [ngStyle]=\"{ 'margin-right': text ? '5px' : null }\" />\n            <i\n                *ngIf=\"icon\"\n                [class]=\"iconstyle + ' ' + icon\"\n                [ngStyle]=\"{ 'margin-right': text ? '5px' : null }\">\n            </i>\n        </div>\n        <div>{{ text }}</div>\n    </a>\n</li>\n",
+                providers: [
+                    {
+                        provide: SacContextmenuItemCommon,
+                        useExisting: forwardRef(() => SacContextmenuItemButtonComponent),
+                    },
+                ]
+            },] }
+];
+SacContextmenuItemButtonComponent.ctorParameters = () => [
+    { type: ElementRef }
+];
+
+/**
+ * Splitter Komponente in Context Menü
+ */
+class SacContextmenuItemSplitterComponent extends SacContextmenuItemCommon {
+}
+SacContextmenuItemSplitterComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'sac-contextmenusplitter',
+                template: "<li\n    role=\"separator\"\n    class=\"divider\"></li>\n",
+                providers: [
+                    {
+                        provide: SacContextmenuItemCommon,
+                        useExisting: forwardRef(() => SacContextmenuItemSplitterComponent),
+                    },
+                ]
+            },] }
+];
+
+class SACBootstrap3ContextmenuModule {
+}
+SACBootstrap3ContextmenuModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [
+                    SacContextmenuComponent,
+                    SacContextmenuItemButtonComponent,
+                    SacContextmenuItemSplitterComponent,
+                    SacContextmenuAnchorDirective,
+                    SacContextmenuContainerDirective,
+                ],
+                imports: [CommonModule],
+                exports: [
+                    SacContextmenuComponent,
+                    SacContextmenuItemButtonComponent,
+                    SacContextmenuItemSplitterComponent,
+                    SacContextmenuAnchorDirective,
+                ],
+            },] }
+];
+
+// #region Classes
+class SacDateComponent extends SacDateCommon {
+    // #region Constructors
+    /**
+     * Constructor
+     * @param formLayout SacFormLayout to define scoped layout settings
+     * @param injector Injector for injecting services
+     * @param elementRef Reference to html dom element
+     * @param cdRef  Change Dectection Servie
+     */
+    constructor(formLayout, injector, elementRef, cdRef) {
+        super(formLayout, injector, elementRef, cdRef);
+    }
+}
+SacDateComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'sac-date',
+                template: "<div\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n        <div\n            style=\"position: relative\"\n            [style.width.px]=\"componentHeight === ControlHeight.Small ? 120 : componentHeight === ControlHeight.Large ? 180 : 140\">\n            <div\n                class=\"datetime-textbox input-group\"\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\n                <!-- this class comes in the div above when disabled [ngClass]=\"[disablelabel === false ? 'col-md-' + _inputsize : 'col-md-12']\" -->\n                <input\n                    id=\"{{ name }}\"\n                    name=\"{{ name }}\"\n                    type=\"text\"\n                    class=\"form-control date-control\"\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\n                    [ngClass]=\"[componentHeight | toControlHeight]\"\n                    [imask]=\"imaskDate\"\n                    [attr.placeholder]=\"placeholder\"\n                    [value]=\"valuestring\"\n                    (blur)=\"onTouch()\"\n                    (accept)=\"setValueString($event)\"\n                    [disabled]=\"isdisabled\"\n                    (click)=\"showDateSelector()\" />\n                <span class=\"input-group-btn\">\n                    <button\n                        #pickerbutton\n                        class=\"btn btn-default\"\n                        type=\"button\"\n                        (click)=\"showDateSelector()\"\n                        [disabled]=\"isdisabled\">\n                        <i [class]=\"IconSelector\"></i>\n                    </button>\n                </span>\n            </div>\n            <p\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"help-block\">\n                {{ helptext }}\n            </p>\n            <div\n                class=\"help-block help-block-error\"\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                {{ GetErrorMessage() | async }}\n            </div>\n\n            <div\n                #picker\n                *ngIf=\"_showselector\">\n                <div\n                    class=\"popover in\"\n                    role=\"tooltip\"\n                    style=\"display: block; max-width: unset; margin: 0\"\n                    [class.bottom]=\"GetPickerPosition() == TooltipPosition.bottom || GetPickerPosition() == TooltipPosition.bottomend\"\n                    [class.top]=\"GetPickerPosition() == TooltipPosition.top || GetPickerPosition() == TooltipPosition.topend\"\n                    [style.left.px]=\"posPopupLeft\"\n                    [style.top.px]=\"posPopupTop\">\n                    <div\n                        #pickerarrow\n                        style=\"margin: 0\"\n                        class=\"arrow\"\n                        [style.top.px]=\"posArrowTop\"\n                        [style.left.px]=\"posArrowLeft\">\n                    </div>\n\n                    <div class=\"popover-content\">\n                        <sac-dateselector\n                            *ngIf=\"_showselector\"\n                            [initialvalue]=\"value\"\n                            (selectdate)=\"dateselect($event)\"\n                            dateselection=\"true\">\n                        </sac-dateselector>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-static\"\n            style=\"margin-left: 5px\">\n            <sac-tooltip\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [class]=\"HelptextTooltipIcon\"\n                    style=\"margin-left: 5px; margin-right: 5px\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n",
+                // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
+                providers: [
+                    {
+                        provide: NG_VALUE_ACCESSOR,
+                        multi: true,
+                        useExisting: forwardRef(() => SacDateComponent),
+                    },
+                    {
+                        provide: NG_VALIDATORS,
+                        multi: true,
+                        useExisting: forwardRef(() => SacDateComponent),
+                    },
+                ]
+            },] }
+];
+SacDateComponent.ctorParameters = () => [
+    { type: SacFormLayoutDirective, decorators: [{ type: Host }, { type: Optional }] },
+    { type: Injector },
+    { type: ElementRef },
+    { type: ChangeDetectorRef }
+];
+// #endregion Classes
+// #region Variables
+const moment = moment_;
 // #endregion Variables
 
-class SacDateSelectorComponent extends SacDateSelectorCommon {
-}
-SacDateSelectorComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'sac-dateselector',
-                template: "<div class=\"calendar-selector\" style=\"min-width: 265px\">\r\n  <table class=\"table-condensed\" style=\"width: 100%\" *ngIf=\"dateselection\">\r\n    <thead>\r\n      <tr>\r\n        <th class=\"prev text-left\" (click)=\"monthBack()\">\r\n          <i [class]=\"iconMonthPrev\"></i>\r\n        </th>\r\n        <th colspan=\"5\" class=\"switch text-center\">{{month+1}}/{{year}}</th>\r\n        <th class=\"next text-right\" (click)=\"monthNext()\">\r\n          <i [class]=\"iconMonthNext\"></i>\r\n        </th>\r\n      </tr>\r\n      <tr>\r\n        <th class=\"dow text-center\">Mo</th>\r\n        <th class=\"dow text-center\">Di</th>\r\n        <th class=\"dow text-center\">Mi</th>\r\n        <th class=\"dow text-center\">Do</th>\r\n        <th class=\"dow text-center\">Fr</th>\r\n        <th class=\"dow text-center\">Sa</th>\r\n        <th class=\"dow text-center\">So</th>\r\n      </tr>\r\n    </thead>\r\n    <tbody>\r\n      <ng-container *ngFor=\"let week of dates; let i=index\">\r\n        <tr>\r\n          <td\r\n            class=\"text-center\"\r\n            *ngFor=\"let item of week\"\r\n            [ngStyle]=\"{'cursor': item.isenabled ? 'pointer' : null}\"\r\n            [ngClass]=\"{'day-current': item.iscurrent, 'day-selected': item.isselected, 'day-new': item.isnew, 'day-disabled': !item.isenabled}\"\r\n            (click)=\"selectDate(item)\"\r\n          >\r\n            {{ item.displaytext }}\r\n          </td>\r\n        </tr>\r\n      </ng-container>\r\n    </tbody>\r\n  </table>\r\n  <div class=\"container-fluid\" *ngIf=\"timeselection\" style=\"margin-top: 10px\">\r\n    <div class=\"row\">\r\n      <div class=\"col-md-6\" style=\"padding-right: 20px\">\r\n        <div class=\"form-group\">\r\n          <label>Stunde</label>\r\n          <input\r\n            type=\"number\"\r\n            class=\"form-control\"\r\n            [value]=\"getHours()\"\r\n            (input)=\"setHours($event.target.value)\"\r\n            min=\"0\"\r\n            max=\"23\"\r\n          />\r\n        </div>\r\n      </div>\r\n      <div class=\"col-md-6\" style=\"padding-left: 20px\">\r\n        <div class=\"form-group\">\r\n          <label>Minute</label>\r\n          <input\r\n            type=\"number\"\r\n            class=\"form-control\"\r\n            [value]=\"getMinutes()\"\r\n            (input)=\"setMinutes($event.target.value)\"\r\n            min=\"0\"\r\n            max=\"59\"\r\n          />\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"row\" style=\"margin-top: 10px\">\r\n    <div class=\"col-md-4 text-left\">\r\n      <button type=\"button\" class=\"btn btn-default\" (click)=\"setToday()\">\r\n        Heute\r\n      </button>\r\n    </div>\r\n    <div class=\"col-md-8 text-right\">\r\n      <button type=\"button\" class=\"btn btn-default\" (click)=\"resetSelection()\">\r\n        Reset\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        class=\"btn btn-primary\"\r\n        style=\"margin-left: 10px\"\r\n        (click)=\"applySelection()\"\r\n      >\r\n        Apply\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n"
-            },] }
-];
-
-class SacDateTimeComponent extends SacDateTimeCommon {
-    // #region Constructors
-    /**
-     * Constructor
-     * @param formLayout SacFormLayout to define scoped layout settings
-     * @param injector Injector for injecting services
-     * @param elementRef Reference to html dom element
-     * @param cdRef  Change Dectection Servie
-     */
-    constructor(formLayout, injector, elementRef, cdRef) {
-        super(formLayout, injector, elementRef, cdRef);
-    }
-}
-SacDateTimeComponent.decorators = [
-    { type: 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    <label\r\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n        id=\"{{ name }}label\"\r\n        for=\"{{ name }}\"\r\n        class=\"col-xs-12 control-label\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\r\n        [class.required]=\"isrequired\">\r\n        <span class=\"text\">{{ label }}</span>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [class]=\"HelptextTooltipIcon\"\r\n                style=\"margin-left: 5px\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-xs-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\r\n        <div\r\n            style=\"position: relative\"\r\n            [style.width.px]=\"componentHeight === ControlHeight.Small ? 160 : componentHeight === ControlHeight.Large ? 230 : 180\">\r\n            <div\r\n                class=\"datetime-textbox input-group\"\r\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\r\n                <input\r\n                    id=\"{{ name }}\"\r\n                    name=\"{{ name }}\"\r\n                    type=\"text\"\r\n                    class=\"form-control date-control\"\r\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n                    [ngClass]=\"[componentHeight | toControlHeight]\"\r\n                    [imask]=\"imaskDate\"\r\n                    [attr.placeholder]=\"placeholder\"\r\n                    [value]=\"valuestring\"\r\n                    (blur)=\"onTouch()\"\r\n                    (accept)=\"setValueString($event)\"\r\n                    [disabled]=\"isdisabled\"\r\n                    (click)=\"showDateSelector()\" />\r\n                <span class=\"input-group-btn\">\r\n                    <button\r\n                        #pickerbutton\r\n                        class=\"btn btn-default\"\r\n                        type=\"button\"\r\n                        (click)=\"showDateSelector()\"\r\n                        [disabled]=\"isdisabled\">\r\n                        <i [class]=\"IconSelector\"></i>\r\n                    </button>\r\n                </span>\r\n            </div>\r\n            <p\r\n                *ngIf=\"helptextmode === 'text' && helptext\"\r\n                class=\"help-block\">\r\n                {{ helptext }}\r\n            </p>\r\n            <div\r\n                class=\"help-block help-block-error\"\r\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\r\n                {{ GetErrorMessage() | async }}\r\n            </div>\r\n\r\n            <div\r\n                #picker\r\n                *ngIf=\"_showselector\">\r\n                <div\r\n                    class=\"popover in\"\r\n                    role=\"tooltip\"\r\n                    style=\"display: block; max-width: unset; margin: 0\"\r\n                    [class.bottom]=\"GetPickerPosition() == TooltipPosition.bottom || GetPickerPosition() == TooltipPosition.bottomend\"\r\n                    [class.top]=\"GetPickerPosition() == TooltipPosition.top || GetPickerPosition() == TooltipPosition.topend\"\r\n                    [style.left.px]=\"posPopupLeft\"\r\n                    [style.top.px]=\"posPopupTop\">\r\n                    <div\r\n                        #pickerarrow\r\n                        style=\"margin: 0\"\r\n                        class=\"arrow\"\r\n                        [style.top.px]=\"posArrowTop\"\r\n                        [style.left.px]=\"posArrowLeft\">\r\n                    </div>\r\n\r\n                    <div class=\"popover-content\">\r\n                        <sac-dateselector\r\n                            *ngIf=\"_showselector\"\r\n                            [initialvalue]=\"value\"\r\n                            (selectdate)=\"dateselect($event)\"\r\n                            dateselection=\"true\"\r\n                            timeselection=\"true\"></sac-dateselector>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n            class=\"form-control-static\"\r\n            style=\"margin-left: 5px\">\r\n            <sac-tooltip\r\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n                [tooltiptext]=\"helptext\"\r\n                [inlinemode]=\"true\">\r\n                <span\r\n                    [class]=\"HelptextTooltipIcon\"\r\n                    style=\"margin-left: 5px; margin-right: 5px\">\r\n                </span>\r\n            </sac-tooltip>\r\n        </div>\r\n    </div>\r\n</div>\r\n",
-                // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
-                providers: [
-                    {
-                        provide: NG_VALUE_ACCESSOR,
-                        multi: true,
-                        useExisting: forwardRef(() => SacDateTimeComponent),
-                    },
-                    {
-                        provide: NG_VALIDATORS,
-                        multi: true,
-                        useExisting: forwardRef(() => SacDateTimeComponent),
-                    },
-                ]
-            },] }
-];
-SacDateTimeComponent.ctorParameters = () => [
-    { type: SacFormLayoutDirective, decorators: [{ type: Host }, { type: Optional }] },
-    { type: Injector },
-    { type: ElementRef },
-    { type: ChangeDetectorRef }
-];
-
-class SacTimeComponent extends SacTimeCommon {
-    // #region Constructors
-    /**
-     * Constructor
-     * @param formLayout SacFormLayout to define scoped layout settings
-     * @param injector Injector for injecting services
-     * @param elementRef Reference to html dom element
-     * @param cdRef  Change Dectection Servie
-     */
-    constructor(formLayout, injector, elementRef, cdRef) {
-        super(formLayout, injector, elementRef, cdRef);
-    }
-}
-SacTimeComponent.decorators = [
-    { type: 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    <label\r\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n        id=\"{{ name }}label\"\r\n        for=\"{{ name }}\"\r\n        class=\"col-xs-12 control-label\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\r\n        [class.required]=\"isrequired\">\r\n        <span class=\"text\">{{ label }}</span>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [class]=\"HelptextTooltipIcon\"\r\n                style=\"margin-left: 5px\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-xs-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\r\n        <div\r\n            style=\"position: relative\"\r\n            [style.width.px]=\"componentHeight === ControlHeight.Small ? 120 : componentHeight === ControlHeight.Large ? 160 : 140\">\r\n            <div\r\n                class=\"datetime-textbox input-group\"\r\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\r\n                <input\r\n                    id=\"{{ name }}\"\r\n                    name=\"{{ name }}\"\r\n                    type=\"text\"\r\n                    class=\"form-control time-control\"\r\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n                    [ngClass]=\"[componentHeight | toControlHeight]\"\r\n                    [imask]=\"imaskDate\"\r\n                    [attr.placeholder]=\"placeholder\"\r\n                    [value]=\"valuestring\"\r\n                    (blur)=\"onTouch()\"\r\n                    (accept)=\"setValueString($event)\"\r\n                    [disabled]=\"isdisabled\"\r\n                    (click)=\"showTimeSelector()\"\r\n                    maxlength=\"6\"\r\n                    size=\"6\" />\r\n                <span class=\"input-group-btn\">\r\n                    <button\r\n                        #pickerbutton\r\n                        class=\"btn btn-default\"\r\n                        type=\"button\"\r\n                        (click)=\"showTimeSelector()\"\r\n                        [disabled]=\"isdisabled\">\r\n                        <i [class]=\"IconSelector\"></i>\r\n                    </button>\r\n                </span>\r\n            </div>\r\n            <p\r\n                *ngIf=\"helptextmode === 'text' && helptext\"\r\n                class=\"help-block\">\r\n                {{ helptext }}\r\n            </p>\r\n            <div\r\n                class=\"help-block help-block-error\"\r\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\r\n                {{ GetErrorMessage() | async }}\r\n            </div>\r\n\r\n            <div\r\n                #picker\r\n                *ngIf=\"_showselector\">\r\n                <div\r\n                    class=\"popover in\"\r\n                    role=\"tooltip\"\r\n                    style=\"display: block; max-width: unset; margin: 0\"\r\n                    [class.bottom]=\"GetPickerPosition() == TooltipPosition.bottom || GetPickerPosition() == TooltipPosition.bottomend\"\r\n                    [class.top]=\"GetPickerPosition() == TooltipPosition.top || GetPickerPosition() == TooltipPosition.topend\"\r\n                    [style.left.px]=\"posPopupLeft\"\r\n                    [style.top.px]=\"posPopupTop\">\r\n                    <div\r\n                        #pickerarrow\r\n                        style=\"margin: 0\"\r\n                        class=\"arrow\"\r\n                        [style.top.px]=\"posArrowTop\"\r\n                        [style.left.px]=\"posArrowLeft\">\r\n                    </div>\r\n\r\n                    <div class=\"popover-content\">\r\n                        <sac-dateselector\r\n                            *ngIf=\"_showselector\"\r\n                            [initialvalue]=\"value\"\r\n                            (selectdate)=\"timeselect($event)\"\r\n                            timeselection=\"true\"></sac-dateselector>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n            class=\"form-control-static\"\r\n            style=\"margin-left: 5px\">\r\n            <sac-tooltip\r\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n                [tooltiptext]=\"helptext\"\r\n                [inlinemode]=\"true\">\r\n                <span\r\n                    [class]=\"HelptextTooltipIcon\"\r\n                    style=\"margin-left: 5px; margin-right: 5px\">\r\n                </span>\r\n            </sac-tooltip>\r\n        </div>\r\n    </div>\r\n</div>\r\n",
-                // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
-                providers: [
-                    {
-                        provide: NG_VALUE_ACCESSOR,
-                        multi: true,
-                        useExisting: forwardRef(() => SacTimeComponent),
-                    },
-                    {
-                        provide: NG_VALIDATORS,
-                        multi: true,
-                        useExisting: forwardRef(() => SacTimeComponent),
-                    },
-                ]
-            },] }
-];
-SacTimeComponent.ctorParameters = () => [
-    { type: SacFormLayoutDirective, decorators: [{ type: Host }, { type: Optional }] },
-    { type: Injector },
-    { type: ElementRef },
-    { type: ChangeDetectorRef }
-];
-
-class SACBootstrap3DateTimeModule {
-}
-SACBootstrap3DateTimeModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [
-                    SacDateComponent,
-                    SacDateTimeComponent,
-                    SacTimeComponent,
-                    SacDateSelectorComponent,
-                ],
-                imports: [
-                    CommonModule,
-                    IMaskModule,
-                    SACBootstrap3LayoutModule,
-                    SACBootstrap3TooltipModule,
-                ],
-                exports: [
-                    SacDateComponent,
-                    SacDateTimeComponent,
-                    SacTimeComponent,
-                    SacDateSelectorComponent,
-                ],
-            },] }
-];
-
-class SacGridComponent extends SacGridCommon {
-    constructor() {
-        super(...arguments);
-        this.ellipsis = false;
-    }
-}
-SacGridComponent.decorators = [
-    { type: 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\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\r\n      *ngIf=\"value === undefined || value === null || value.length === 0\"\r\n      data-e2e=\"emptyrow\"\r\n    >\r\n      <td [attr.colspan]=\"ColumnCount\">{{emptytext}}</td>\r\n    </tr>\r\n  </tbody>\r\n  <tfoot *ngIf=\"pagerdata\">\r\n    <tr>\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  </tfoot>\r\n</table>\r\n",
-                // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
-                providers: [
-                    { provide: NG_VALUE_ACCESSOR, multi: true, useExisting: SacGridComponent },
-                    { provide: NG_VALIDATORS, multi: true, useExisting: forwardRef(() => SacGridComponent) }
-                ]
-            },] }
-];
-SacGridComponent.propDecorators = {
-    template: [{ type: ContentChild, args: [TemplateRef, { static: true },] }]
+class SacDateSelectorComponent extends SacDateSelectorCommon {
+}
+SacDateSelectorComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'sac-dateselector',
+                template: "<div class=\"calendar-selector\" style=\"min-width: 265px\">\n  <table class=\"table-condensed\" style=\"width: 100%\" *ngIf=\"dateselection\">\n    <thead>\n      <tr>\n        <th class=\"prev text-left\" (click)=\"monthBack()\">\n          <i [class]=\"iconMonthPrev\"></i>\n        </th>\n        <th colspan=\"5\" class=\"switch text-center\">{{month+1}}/{{year}}</th>\n        <th class=\"next text-right\" (click)=\"monthNext()\">\n          <i [class]=\"iconMonthNext\"></i>\n        </th>\n      </tr>\n      <tr>\n        <th class=\"dow text-center\">Mo</th>\n        <th class=\"dow text-center\">Di</th>\n        <th class=\"dow text-center\">Mi</th>\n        <th class=\"dow text-center\">Do</th>\n        <th class=\"dow text-center\">Fr</th>\n        <th class=\"dow text-center\">Sa</th>\n        <th class=\"dow text-center\">So</th>\n      </tr>\n    </thead>\n    <tbody>\n      <ng-container *ngFor=\"let week of dates; let i=index\">\n        <tr>\n          <td\n            class=\"text-center\"\n            *ngFor=\"let item of week\"\n            [ngStyle]=\"{'cursor': item.isenabled ? 'pointer' : null}\"\n            [ngClass]=\"{'day-current': item.iscurrent, 'day-selected': item.isselected, 'day-new': item.isnew, 'day-disabled': !item.isenabled}\"\n            (click)=\"selectDate(item)\"\n          >\n            {{ item.displaytext }}\n          </td>\n        </tr>\n      </ng-container>\n    </tbody>\n  </table>\n  <div class=\"container-fluid\" *ngIf=\"timeselection\" style=\"margin-top: 10px\">\n    <div class=\"row\">\n      <div class=\"col-md-6\" style=\"padding-right: 20px\">\n        <div class=\"form-group\">\n          <label>Stunde</label>\n          <input\n            type=\"number\"\n            class=\"form-control\"\n            [value]=\"getHours()\"\n            (input)=\"setHours($event.target.value)\"\n            min=\"0\"\n            max=\"23\"\n          />\n        </div>\n      </div>\n      <div class=\"col-md-6\" style=\"padding-left: 20px\">\n        <div class=\"form-group\">\n          <label>Minute</label>\n          <input\n            type=\"number\"\n            class=\"form-control\"\n            [value]=\"getMinutes()\"\n            (input)=\"setMinutes($event.target.value)\"\n            min=\"0\"\n            max=\"59\"\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"row\" style=\"margin-top: 10px\">\n    <div class=\"col-md-4 text-left\">\n      <button type=\"button\" class=\"btn btn-default\" (click)=\"setToday()\">\n        Heute\n      </button>\n    </div>\n    <div class=\"col-md-8 text-right\">\n      <button type=\"button\" class=\"btn btn-default\" (click)=\"resetSelection()\">\n        Reset\n      </button>\n      <button\n        type=\"button\"\n        class=\"btn btn-primary\"\n        style=\"margin-left: 10px\"\n        (click)=\"applySelection()\"\n      >\n        Apply\n      </button>\n    </div>\n  </div>\n</div>\n"
+            },] }
+];
+
+class SacDateTimeComponent extends SacDateTimeCommon {
+    // #region Constructors
+    /**
+     * Constructor
+     * @param formLayout SacFormLayout to define scoped layout settings
+     * @param injector Injector for injecting services
+     * @param elementRef Reference to html dom element
+     * @param cdRef  Change Dectection Servie
+     */
+    constructor(formLayout, injector, elementRef, cdRef) {
+        super(formLayout, injector, elementRef, cdRef);
+    }
+}
+SacDateTimeComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'sac-datetime',
+                template: "<div\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n        <div\n            style=\"position: relative\"\n            [style.width.px]=\"componentHeight === ControlHeight.Small ? 160 : componentHeight === ControlHeight.Large ? 230 : 180\">\n            <div\n                class=\"datetime-textbox input-group\"\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\n                <input\n                    id=\"{{ name }}\"\n                    name=\"{{ name }}\"\n                    type=\"text\"\n                    class=\"form-control date-control\"\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\n                    [ngClass]=\"[componentHeight | toControlHeight]\"\n                    [imask]=\"imaskDate\"\n                    [attr.placeholder]=\"placeholder\"\n                    [value]=\"valuestring\"\n                    (blur)=\"onTouch()\"\n                    (accept)=\"setValueString($event)\"\n                    [disabled]=\"isdisabled\"\n                    (click)=\"showDateSelector()\" />\n                <span class=\"input-group-btn\">\n                    <button\n                        #pickerbutton\n                        class=\"btn btn-default\"\n                        type=\"button\"\n                        (click)=\"showDateSelector()\"\n                        [disabled]=\"isdisabled\">\n                        <i [class]=\"IconSelector\"></i>\n                    </button>\n                </span>\n            </div>\n            <p\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"help-block\">\n                {{ helptext }}\n            </p>\n            <div\n                class=\"help-block help-block-error\"\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                {{ GetErrorMessage() | async }}\n            </div>\n\n            <div\n                #picker\n                *ngIf=\"_showselector\">\n                <div\n                    class=\"popover in\"\n                    role=\"tooltip\"\n                    style=\"display: block; max-width: unset; margin: 0\"\n                    [class.bottom]=\"GetPickerPosition() == TooltipPosition.bottom || GetPickerPosition() == TooltipPosition.bottomend\"\n                    [class.top]=\"GetPickerPosition() == TooltipPosition.top || GetPickerPosition() == TooltipPosition.topend\"\n                    [style.left.px]=\"posPopupLeft\"\n                    [style.top.px]=\"posPopupTop\">\n                    <div\n                        #pickerarrow\n                        style=\"margin: 0\"\n                        class=\"arrow\"\n                        [style.top.px]=\"posArrowTop\"\n                        [style.left.px]=\"posArrowLeft\">\n                    </div>\n\n                    <div class=\"popover-content\">\n                        <sac-dateselector\n                            *ngIf=\"_showselector\"\n                            [initialvalue]=\"value\"\n                            (selectdate)=\"dateselect($event)\"\n                            dateselection=\"true\"\n                            timeselection=\"true\"></sac-dateselector>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-static\"\n            style=\"margin-left: 5px\">\n            <sac-tooltip\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [class]=\"HelptextTooltipIcon\"\n                    style=\"margin-left: 5px; margin-right: 5px\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n",
+                // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
+                providers: [
+                    {
+                        provide: NG_VALUE_ACCESSOR,
+                        multi: true,
+                        useExisting: forwardRef(() => SacDateTimeComponent),
+                    },
+                    {
+                        provide: NG_VALIDATORS,
+                        multi: true,
+                        useExisting: forwardRef(() => SacDateTimeComponent),
+                    },
+                ]
+            },] }
+];
+SacDateTimeComponent.ctorParameters = () => [
+    { type: SacFormLayoutDirective, decorators: [{ type: Host }, { type: Optional }] },
+    { type: Injector },
+    { type: ElementRef },
+    { type: ChangeDetectorRef }
+];
+
+class SacTimeComponent extends SacTimeCommon {
+    // #region Constructors
+    /**
+     * Constructor
+     * @param formLayout SacFormLayout to define scoped layout settings
+     * @param injector Injector for injecting services
+     * @param elementRef Reference to html dom element
+     * @param cdRef  Change Dectection Servie
+     */
+    constructor(formLayout, injector, elementRef, cdRef) {
+        super(formLayout, injector, elementRef, cdRef);
+    }
+}
+SacTimeComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'sac-time',
+                template: "<div\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n        <div\n            style=\"position: relative\"\n            [style.width.px]=\"componentHeight === ControlHeight.Small ? 120 : componentHeight === ControlHeight.Large ? 160 : 140\">\n            <div\n                class=\"datetime-textbox input-group\"\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\n                <input\n                    id=\"{{ name }}\"\n                    name=\"{{ name }}\"\n                    type=\"text\"\n                    class=\"form-control time-control\"\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\n                    [ngClass]=\"[componentHeight | toControlHeight]\"\n                    [imask]=\"imaskDate\"\n                    [attr.placeholder]=\"placeholder\"\n                    [value]=\"valuestring\"\n                    (blur)=\"onTouch()\"\n                    (accept)=\"setValueString($event)\"\n                    [disabled]=\"isdisabled\"\n                    (click)=\"showTimeSelector()\"\n                    maxlength=\"6\"\n                    size=\"6\" />\n                <span class=\"input-group-btn\">\n                    <button\n                        #pickerbutton\n                        class=\"btn btn-default\"\n                        type=\"button\"\n                        (click)=\"showTimeSelector()\"\n                        [disabled]=\"isdisabled\">\n                        <i [class]=\"IconSelector\"></i>\n                    </button>\n                </span>\n            </div>\n            <p\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"help-block\">\n                {{ helptext }}\n            </p>\n            <div\n                class=\"help-block help-block-error\"\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                {{ GetErrorMessage() | async }}\n            </div>\n\n            <div\n                #picker\n                *ngIf=\"_showselector\">\n                <div\n                    class=\"popover in\"\n                    role=\"tooltip\"\n                    style=\"display: block; max-width: unset; margin: 0\"\n                    [class.bottom]=\"GetPickerPosition() == TooltipPosition.bottom || GetPickerPosition() == TooltipPosition.bottomend\"\n                    [class.top]=\"GetPickerPosition() == TooltipPosition.top || GetPickerPosition() == TooltipPosition.topend\"\n                    [style.left.px]=\"posPopupLeft\"\n                    [style.top.px]=\"posPopupTop\">\n                    <div\n                        #pickerarrow\n                        style=\"margin: 0\"\n                        class=\"arrow\"\n                        [style.top.px]=\"posArrowTop\"\n                        [style.left.px]=\"posArrowLeft\">\n                    </div>\n\n                    <div class=\"popover-content\">\n                        <sac-dateselector\n                            *ngIf=\"_showselector\"\n                            [initialvalue]=\"value\"\n                            (selectdate)=\"timeselect($event)\"\n                            timeselection=\"true\"></sac-dateselector>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-static\"\n            style=\"margin-left: 5px\">\n            <sac-tooltip\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [class]=\"HelptextTooltipIcon\"\n                    style=\"margin-left: 5px; margin-right: 5px\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n",
+                // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
+                providers: [
+                    {
+                        provide: NG_VALUE_ACCESSOR,
+                        multi: true,
+                        useExisting: forwardRef(() => SacTimeComponent),
+                    },
+                    {
+                        provide: NG_VALIDATORS,
+                        multi: true,
+                        useExisting: forwardRef(() => SacTimeComponent),
+                    },
+                ]
+            },] }
+];
+SacTimeComponent.ctorParameters = () => [
+    { type: SacFormLayoutDirective, decorators: [{ type: Host }, { type: Optional }] },
+    { type: Injector },
+    { type: ElementRef },
+    { type: ChangeDetectorRef }
+];
+
+class SACBootstrap3DateTimeModule {
+}
+SACBootstrap3DateTimeModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [
+                    SacDateComponent,
+                    SacDateTimeComponent,
+                    SacTimeComponent,
+                    SacDateSelectorComponent,
+                ],
+                imports: [
+                    CommonModule,
+                    IMaskModule,
+                    SACBootstrap3LayoutModule,
+                    SACBootstrap3TooltipModule,
+                ],
+                exports: [
+                    SacDateComponent,
+                    SacDateTimeComponent,
+                    SacTimeComponent,
+                    SacDateSelectorComponent,
+                ],
+            },] }
+];
+
+class SacGridComponent extends SacGridCommon {
+    constructor() {
+        super(...arguments);
+        this.ellipsis = false;
+    }
+}
+SacGridComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'sac-grid',
+                template: "<table class=\"table table-striped table-condensed table-hover\" id=\"{{name}}\">\n  <thead>\n    <tr>\n      <ng-container\n        *ngTemplateOutlet=\"template; context { row: {}, type: 'header'}\"\n      >\n      </ng-container>\n    </tr>\n  </thead>\n  <tbody>\n    <ng-container *ngFor=\"let item of value; let i=index\">\n      <tr>\n        <ng-container\n          *ngTemplateOutlet=\"template; context { row: item, type: 'body'}\"\n        >\n        </ng-container>\n      </tr>\n    </ng-container>\n    <tr\n      *ngIf=\"value === undefined || value === null || value.length === 0\"\n      data-e2e=\"emptyrow\"\n    >\n      <td [attr.colspan]=\"ColumnCount\">{{emptytext}}</td>\n    </tr>\n  </tbody>\n  <tfoot *ngIf=\"pagerdata\">\n    <tr>\n      <td [attr.colspan]=\"ColumnCount\">\n        <div class=\"container-fluid\">\n          <sac-paging\n            name=\"{{name}}Paging\"\n            (paging)=\"pageChange($event)\"\n            [pagerdata]=\"pagerdata\"\n            [pagingtext]=\"pagingtext\"\n            [pagesizetext]=\"pagesizetext\"\n          ></sac-paging>\n        </div>\n      </td>\n    </tr>\n  </tfoot>\n</table>\n",
+                // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
+                providers: [
+                    { provide: NG_VALUE_ACCESSOR, multi: true, useExisting: SacGridComponent },
+                    { provide: NG_VALIDATORS, multi: true, useExisting: forwardRef(() => SacGridComponent) }
+                ]
+            },] }
+];
+SacGridComponent.propDecorators = {
+    template: [{ type: ContentChild, args: [TemplateRef, { static: true },] }]
 };
 
-/**
- * Grid Action Button
- */
-class SacGridButtonComponent extends SacGridButtonCommon {
-    // #region Public Methods
-    /**
-     * Returns the icon for the button
-     */
-    getIconClass() {
-        let iconset = this.iconstyle;
-        let iconcss = this.icon;
-        if (iconset === '') {
-            switch (this.icon) {
-                case 'edit':
-                    iconset = 'sprite';
-                    iconcss = 'icon-sprite-base-main_edit';
-                    break;
-                case 'delete':
-                    iconset = 'sprite';
-                    iconcss = 'icon-sprite-base-main_delete';
-                    break;
-            }
-        }
-        if (this._isdisabledvalue) {
-            iconcss += '_disabled';
-        }
-        const result = iconset + ' ' + iconcss;
-        return result.trim();
-    }
-}
-SacGridButtonComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'sac-gridbutton',
-                template: "<a (click)=\"callaction()\" style=\"padding-right: 5px;\" [class.disabled]=\"isdisabled\" [attr.disabled]=\"isdisabled ? 'disabled' : null\"><span class=\"{{getIconClass()}}\"></span></a>\r\n"
-            },] }
-];
-
-class SacGridColumnComponent extends SacGridColumnCommon {
-    constructor(grid, injector, el) {
-        super(grid, injector, el);
-    }
-}
-SacGridColumnComponent.decorators = [
-    { type: 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    <span>{{ header }}</span>\r\n    <span\r\n        [class]=\"IconSortUp\"\r\n        style=\"padding-left: 0.5rem\"\r\n        *ngIf=\"IsSortedColumn() && GetSortDirection() === 'asc'\"></span>\r\n    <span\r\n        [class]=\"IconSortDown\"\r\n        style=\"padding-left: 0.5rem\"\r\n        *ngIf=\"IsSortedColumn() && GetSortDirection() === 'desc'\"></span>\r\n</th>\r\n<td\r\n    scope=\"col\"\r\n    *ngIf=\"IsBody()\"\r\n    [style.width]=\"width\"\r\n    [class.ellipsis]=\"IsEllipsis()\"\r\n    (click)=\"ColumnClick()\"\r\n    [style.max-width]=\"IsEllipsis() ? width : null\"\r\n    [style.overflow]=\"IsEllipsis() ? 'hidden' : null\"\r\n    [style.text-overflow]=\"IsEllipsis() ? 'ellipsis' : null\"\r\n    [style.white-space]=\"IsEllipsis() ? 'nowrap' : null\">\r\n    <span\r\n        [attr.title]=\"IsEllipsis() ? value : null\"\r\n        [innerHtml]=\"value\"></span>\r\n</td>\r\n",
-                providers: [
-                    {
-                        provide: SacGridColumnBaseCommon,
-                        useExisting: forwardRef(() => SacGridColumnComponent),
-                    },
-                ]
-            },] }
-];
-SacGridColumnComponent.ctorParameters = () => [
-    { type: SacGridComponent },
-    { type: Injector },
-    { type: ElementRef }
-];
-
-class SacGridColumnActionComponent extends SacGridColumnActionCommon {
-    constructor(grid, injector, el) {
-        super(grid, injector, el);
-        this.width = '52px';
-    }
-}
-SacGridColumnActionComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'sac-gridcolumnaction',
-                template: "<th scope=\"col\" *ngIf=\"IsHeader()\" [style.width]=\"width\"><span></span></th>\r\n<td scope=\"col\" *ngIf=\"IsBody()\">\r\n   <ng-content></ng-content>\r\n</td>\r\n",
-                providers: [
-                    {
-                        provide: SacGridColumnBaseCommon,
-                        useExisting: forwardRef(() => SacGridColumnActionComponent),
-                    },
-                ]
-            },] }
-];
-SacGridColumnActionComponent.ctorParameters = () => [
-    { type: SacGridComponent },
-    { type: Injector },
-    { type: ElementRef }
-];
-
-class SacGridImageComponent extends SacGridImageCommon {
-    getIconClass() {
-        switch (this.iconstyle) {
-            case 'edit':
-                return 'sprite icon-sprite-base-main_edit';
-            case 'delete':
-                return 'sprite icon-sprite-base-main_delete';
-            default:
-                return this.iconstyle;
-        }
-    }
-}
-SacGridImageComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'sac-gridimage',
-                template: "<span style=\"padding-right: 5px;\"><span class=\"{{getIconClass()}}\"></span></span>\r\n"
-            },] }
-];
-
-class SacPagingComponent extends SacPagingCommon {
-    /**
-     * Konstruktor
-     */
-    constructor(injector) { super(injector); }
-}
-SacPagingComponent.decorators = [
-    { type: Component, args: [{
-                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: NG_VALUE_ACCESSOR, multi: true, useExisting: SacPagingComponent },
-                    { provide: NG_VALIDATORS, multi: true, useExisting: forwardRef(() => SacPagingComponent) }
-                ]
-            },] }
-];
-SacPagingComponent.ctorParameters = () => [
-    { type: Injector }
-];
-
-class SACBootstrap3GridModule {
-}
-SACBootstrap3GridModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [
-                    SacGridComponent,
-                    SacGridColumnComponent,
-                    SacGridColumnActionComponent,
-                    SacPagingComponent,
-                    SacGridButtonComponent,
-                    SacGridImageComponent,
-                ],
-                imports: [CommonModule, FormsModule],
-                exports: [
-                    SacGridComponent,
-                    SacGridColumnComponent,
-                    SacGridColumnActionComponent,
-                    SacPagingComponent,
-                    SacGridButtonComponent,
-                    SacGridImageComponent,
-                ],
-            },] }
-];
-
-class SacInputComponent extends SacInputCommon {
-    // #region Constructors
-    /**
-     * Constructor
-     * @param formLayout SacFormLayout to define scoped layout settings
-     * @param injector Injector for injecting services
-     */
-    constructor(formLayout, injector) {
-        super(formLayout, injector);
-    }
-}
-SacInputComponent.decorators = [
-    { type: 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    <label\r\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n        id=\"{{ name }}label\"\r\n        for=\"{{ name }}\"\r\n        class=\"col-xs-12 control-label\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\r\n        [class.required]=\"isrequired\">\r\n        <span class=\"text\">{{ label }}</span>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [class]=\"HelptextTooltipIcon\"\r\n                style=\"margin-left: 5px\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-xs-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\r\n        <div [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\r\n            <input\r\n                id=\"{{ name }}\"\r\n                name=\"{{ name }}\"\r\n                type=\"text\"\r\n                class=\"form-control\"\r\n                [ngClass]=\"[componentHeight | toControlHeight]\"\r\n                [value]=\"value\"\r\n                [attr.placeholder]=\"placeholder\"\r\n                (blur)=\"onTouch()\"\r\n                (input)=\"setValue($event.target.value)\"\r\n                [attr.maxlength]=\"maxlength\"\r\n                [disabled]=\"isdisabled\"\r\n                [readonly]=\"readonly\" />\r\n\r\n            <div\r\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n                class=\"form-control-static\"\r\n                style=\"margin-left: 5px\">\r\n                <sac-tooltip\r\n                    *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n                    [tooltiptext]=\"helptext\"\r\n                    [inlinemode]=\"true\">\r\n                    <span\r\n                        [class]=\"HelptextTooltipIcon\"\r\n                        style=\"margin-left: 5px; margin-right: 5px\">\r\n                    </span>\r\n                </sac-tooltip>\r\n            </div>\r\n        </div>\r\n\r\n        <p\r\n            *ngIf=\"helptextmode === 'text' && helptext\"\r\n            class=\"help-block\">\r\n            {{ helptext }}\r\n        </p>\r\n\r\n        <div\r\n            class=\"help-block help-block-error\"\r\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\r\n            {{ GetErrorMessage() | async }}\r\n        </div>\r\n    </div>\r\n</div>\r\n",
-                // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
-                providers: [
-                    { provide: NG_VALUE_ACCESSOR, multi: true, useExisting: SacInputComponent },
-                    {
-                        provide: NG_VALIDATORS,
-                        multi: true,
-                        useExisting: forwardRef(() => SacInputComponent),
-                    },
-                ]
-            },] }
-];
-SacInputComponent.ctorParameters = () => [
-    { type: SacFormLayoutDirective, decorators: [{ type: Host }, { type: Optional }] },
-    { type: Injector }
-];
-
-/**
- * Komponente für TextArea
- *
- * @example
- *
- * <ngInputArea name="ngInputArea" label="My Label" placeholder='i am input area' [isrequired]="true" customCssClass="myClass1 myClass3"></ngInputArea>
- *
- * @example
- *
- * <ngInputArea name="ngInputArea" label="My Label" height="150px" placeholder='i am input area' [islanguagespecific]="true">
- *
- */
-class SacInputAreaComponent extends SacInputAreaCommon {
-    // #region Constructors
-    /**
-     * Constructor
-     * @param formLayout SacFormLayout to define scoped layout settings
-     * @param injector Injector for injecting services
-     */
-    constructor(formLayout, injector) {
-        super(formLayout, injector);
-    }
-}
-SacInputAreaComponent.decorators = [
-    { type: 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    <label\r\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n        id=\"{{ name }}label\"\r\n        for=\"{{ name }}\"\r\n        class=\"col-xs-12 control-label\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\r\n        [class.required]=\"isrequired\">\r\n        <span class=\"text\">{{ label }}</span>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [class]=\"HelptextTooltipIcon\"\r\n                style=\"margin-left: 5px\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-xs-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\r\n        <div [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\r\n            <textarea\r\n                id=\"{{ name }}\"\r\n                name=\"{{ name }}\"\r\n                type=\"\"\r\n                class=\"form-control\"\r\n                [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n                [class.validation-error]=\"invalid && (dirty || touched)\"\r\n                [class.required]=\"isrequired\"\r\n                [ngClass]=\"[componentHeight | toControlHeight]\"\r\n                [value]=\"value\"\r\n                [attr.placeholder]=\"placeholder\"\r\n                (blur)=\"onTouch()\"\r\n                (input)=\"setValue($event.target.value)\"\r\n                (keypress)=\"onKeyPress($event)\"\r\n                [attr.rows]=\"rows\"\r\n                [disabled]=\"isdisabled\"\r\n                [readonly]=\"readonly\">\r\n            </textarea>\r\n\r\n            <div\r\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n                class=\"form-control-static\"\r\n                style=\"margin-left: 5px\">\r\n                <sac-tooltip\r\n                    *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n                    [tooltiptext]=\"helptext\"\r\n                    [inlinemode]=\"true\">\r\n                    <span\r\n                        [class]=\"HelptextTooltipIcon\"\r\n                        style=\"margin-left: 5px; margin-right: 5px\">\r\n                    </span>\r\n                </sac-tooltip>\r\n            </div>\r\n        </div>\r\n\r\n        <p\r\n            *ngIf=\"helptextmode === 'text' && helptext\"\r\n            class=\"help-block\">\r\n            {{ helptext }}\r\n        </p>\r\n\r\n        <div\r\n            class=\"help-block help-block-error\"\r\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\r\n            {{ GetErrorMessage() | async }}\r\n        </div>\r\n    </div>\r\n</div>\r\n",
-                // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
-                providers: [
-                    {
-                        provide: NG_VALUE_ACCESSOR,
-                        multi: true,
-                        useExisting: SacInputAreaComponent,
-                    },
-                    {
-                        provide: NG_VALIDATORS,
-                        multi: true,
-                        useExisting: forwardRef(() => SacInputAreaComponent),
-                    },
-                ]
-            },] }
-];
-SacInputAreaComponent.ctorParameters = () => [
-    { type: SacFormLayoutDirective, decorators: [{ type: Host }, { type: Optional }] },
-    { type: Injector }
-];
-
-class SacInputCurrencyComponent extends SacInputCurrencyCommon {
-    // #region Constructors
-    /**
-     * Constructor
-     * @param formLayout SacFormLayout to define scoped layout settings
-     * @param injector Injector for injecting services
-     */
-    constructor(formLayout, injector) {
-        super(formLayout, injector);
-    }
-}
-SacInputCurrencyComponent.decorators = [
-    { type: 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    <label\r\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n        id=\"{{ name }}label\"\r\n        for=\"{{ name }}\"\r\n        class=\"col-xs-12 control-label\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\r\n        [class.required]=\"isrequired\">\r\n        <span class=\"text\">{{ label }}</span>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [class]=\"HelptextTooltipIcon\"\r\n                style=\"margin-left: 5px\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-xs-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [class.clearfix]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n        <div\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n            class=\"form-control-static pull-right\"\r\n            style=\"margin-left: 5px\">\r\n            <sac-tooltip\r\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n                [tooltiptext]=\"helptext\"\r\n                [inlinemode]=\"true\">\r\n                <span\r\n                    [class]=\"HelptextTooltipIcon\"\r\n                    style=\"margin-left: 5px; margin-right: 5px\">\r\n                </span>\r\n            </sac-tooltip>\r\n        </div>\r\n\r\n        <div\r\n            class=\"input-group\"\r\n            [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n            [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\r\n            <input\r\n                id=\"{{ name }}\"\r\n                name=\"{{ name }}\"\r\n                type=\"text\"\r\n                class=\"form-control\"\r\n                [ngClass]=\"[componentHeight | toControlHeight]\"\r\n                [value]=\"value\"\r\n                [attr.placeholder]=\"placeholder\"\r\n                (blur)=\"onTouch()\"\r\n                (input)=\"setValue($event.target.value)\"\r\n                (keypress)=\"onKeyPress($event)\"\r\n                [disabled]=\"isdisabled\"\r\n                [readonly]=\"readonly\" />\r\n            <div class=\"input-group-addon\">{{ currency }}</div>\r\n        </div>\r\n\r\n        <p\r\n            *ngIf=\"helptextmode === 'text' && helptext\"\r\n            class=\"help-block\">\r\n            {{ helptext }}\r\n        </p>\r\n\r\n        <div\r\n            class=\"help-block help-block-error\"\r\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\r\n            {{ GetErrorMessage() | async }}\r\n        </div>\r\n    </div>\r\n</div>\r\n",
-                // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
-                providers: [
-                    {
-                        provide: NG_VALUE_ACCESSOR,
-                        multi: true,
-                        useExisting: SacInputCurrencyComponent,
-                    },
-                    {
-                        provide: NG_VALIDATORS,
-                        multi: true,
-                        useExisting: forwardRef(() => SacInputCurrencyComponent),
-                    },
-                ]
-            },] }
-];
-SacInputCurrencyComponent.ctorParameters = () => [
-    { type: SacFormLayoutDirective, decorators: [{ type: Host }, { type: Optional }] },
-    { type: Injector }
-];
-
-class SacInputDecimalComponent extends SacInputDecimalCommon {
-    // #region Constructors
-    /**
-     * Constructor
-     * @param formLayout SacFormLayout to define scoped layout settings
-     * @param injector Injector for injecting services
-     */
-    constructor(formLayout, injector) {
-        super(formLayout, injector);
-    }
-}
-SacInputDecimalComponent.decorators = [
-    { type: 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    <label\r\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n        id=\"{{ name }}label\"\r\n        for=\"{{ name }}\"\r\n        class=\"col-xs-12 control-label\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\r\n        [class.required]=\"isrequired\">\r\n        <span class=\"text\">{{ label }}</span>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [class]=\"HelptextTooltipIcon\"\r\n                style=\"margin-left: 5px\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-xs-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\r\n        <div [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\r\n            <input\r\n                id=\"{{ name }}\"\r\n                name=\"{{ name }}\"\r\n                type=\"text\"\r\n                class=\"form-control\"\r\n                [ngClass]=\"[componentHeight | toControlHeight]\"\r\n                [value]=\"value\"\r\n                [attr.placeholder]=\"placeholder\"\r\n                (blur)=\"onTouch()\"\r\n                (input)=\"setValue($event.target.value)\"\r\n                (keypress)=\"onKeyPress($event)\"\r\n                [disabled]=\"isdisabled\"\r\n                [readonly]=\"readonly\" />\r\n\r\n            <div\r\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n                class=\"form-control-static\"\r\n                style=\"margin-left: 5px\">\r\n                <sac-tooltip\r\n                    *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n                    [tooltiptext]=\"helptext\"\r\n                    [inlinemode]=\"true\">\r\n                    <span\r\n                        [class]=\"HelptextTooltipIcon\"\r\n                        style=\"margin-left: 5px; margin-right: 5px\">\r\n                    </span>\r\n                </sac-tooltip>\r\n            </div>\r\n        </div>\r\n\r\n        <p\r\n            *ngIf=\"helptextmode === 'text' && helptext\"\r\n            class=\"help-block\">\r\n            {{ helptext }}\r\n        </p>\r\n\r\n        <div\r\n            class=\"help-block help-block-error\"\r\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\r\n            {{ GetErrorMessage() | async }}\r\n        </div>\r\n    </div>\r\n</div>\r\n",
-                // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
-                providers: [
-                    {
-                        provide: NG_VALUE_ACCESSOR,
-                        multi: true,
-                        useExisting: SacInputDecimalComponent,
-                    },
-                    {
-                        provide: NG_VALIDATORS,
-                        multi: true,
-                        useExisting: forwardRef(() => SacInputDecimalComponent),
-                    },
-                ]
-            },] }
-];
-SacInputDecimalComponent.ctorParameters = () => [
-    { type: SacFormLayoutDirective, decorators: [{ type: Host }, { type: Optional }] },
-    { type: Injector }
-];
-
-class SacInputEmailComponent extends SacInputEmailCommon {
-    // #region Constructors
-    /**
-     * Constructor
-     * @param formLayout SacFormLayout to define scoped layout settings
-     * @param injector Injector for injecting services
-     */
-    constructor(formLayout, injector) {
-        super(formLayout, injector);
-    }
-}
-SacInputEmailComponent.decorators = [
-    { type: 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    <label\r\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n        id=\"{{ name }}label\"\r\n        for=\"{{ name }}\"\r\n        class=\"col-xs-12 control-label\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\r\n        [class.required]=\"isrequired\">\r\n        <span class=\"text\">{{ label }}</span>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [class]=\"HelptextTooltipIcon\"\r\n                style=\"margin-left: 5px\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-xs-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [class.clearfix]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n        <div\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n            class=\"form-control-static pull-right\"\r\n            style=\"margin-left: 5px\">\r\n            <sac-tooltip\r\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n                [tooltiptext]=\"helptext\"\r\n                [inlinemode]=\"true\">\r\n                <span\r\n                    [class]=\"HelptextTooltipIcon\"\r\n                    style=\"margin-left: 5px; margin-right: 5px\">\r\n                </span>\r\n            </sac-tooltip>\r\n        </div>\r\n\r\n        <div\r\n            class=\"input-group\"\r\n            [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n            [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\r\n            <div class=\"input-group-addon\">@</div>\r\n            <input\r\n                id=\"{{ name }}\"\r\n                name=\"{{ name }}\"\r\n                type=\"text\"\r\n                class=\"form-control\"\r\n                [ngClass]=\"[componentHeight | toControlHeight]\"\r\n                [value]=\"value\"\r\n                [attr.placeholder]=\"placeholder\"\r\n                (blur)=\"onTouch()\"\r\n                (input)=\"setValue($event.target.value)\"\r\n                autocomplete=\"email\"\r\n                [attr.maxlength]=\"maxlength\"\r\n                [disabled]=\"isdisabled\"\r\n                [readonly]=\"readonly\" />\r\n        </div>\r\n\r\n        <p\r\n            *ngIf=\"helptextmode === 'text' && helptext\"\r\n            class=\"help-block\">\r\n            {{ helptext }}\r\n        </p>\r\n\r\n        <div\r\n            class=\"help-block help-block-error\"\r\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\r\n            {{ GetErrorMessage() | async }}\r\n        </div>\r\n    </div>\r\n</div>\r\n",
-                // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
-                providers: [
-                    {
-                        provide: NG_VALUE_ACCESSOR,
-                        multi: true,
-                        useExisting: SacInputEmailComponent,
-                    },
-                    {
-                        provide: NG_VALIDATORS,
-                        multi: true,
-                        useExisting: forwardRef(() => SacInputEmailComponent),
-                    },
-                ]
-            },] }
-];
-SacInputEmailComponent.ctorParameters = () => [
-    { type: SacFormLayoutDirective, decorators: [{ type: Host }, { type: Optional }] },
-    { type: Injector }
-];
-
-class SacInputIntegerComponent extends SacInputIntegerCommon {
-    // #region Constructors
-    /**
-     * Constructor
-     * @param formLayout SacFormLayout to define scoped layout settings
-     * @param injector Injector for injecting services
-     */
-    constructor(formLayout, injector) {
-        super(formLayout, injector);
-    }
-}
-SacInputIntegerComponent.decorators = [
-    { type: 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    <label\r\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n        id=\"{{ name }}label\"\r\n        for=\"{{ name }}\"\r\n        class=\"col-xs-12 control-label\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\r\n        [class.required]=\"isrequired\">\r\n        <span class=\"text\">{{ label }}</span>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [class]=\"HelptextTooltipIcon\"\r\n                style=\"margin-left: 5px\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-xs-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\r\n        <div [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\r\n            <input\r\n                id=\"{{ name }}\"\r\n                name=\"{{ name }}\"\r\n                type=\"text\"\r\n                class=\"form-control\"\r\n                [ngClass]=\"[componentHeight | toControlHeight]\"\r\n                [value]=\"value\"\r\n                [attr.placeholder]=\"placeholder\"\r\n                (blur)=\"onTouch()\"\r\n                (input)=\"setValue($event.target.value)\"\r\n                (keypress)=\"onKeyPress($event)\"\r\n                [disabled]=\"isdisabled\"\r\n                [readonly]=\"readonly\" />\r\n\r\n            <div\r\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n                class=\"form-control-static\"\r\n                style=\"margin-left: 5px\">\r\n                <sac-tooltip\r\n                    *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n                    [tooltiptext]=\"helptext\"\r\n                    [inlinemode]=\"true\">\r\n                    <span\r\n                        [class]=\"HelptextTooltipIcon\"\r\n                        style=\"margin-left: 5px; margin-right: 5px\">\r\n                    </span>\r\n                </sac-tooltip>\r\n            </div>\r\n        </div>\r\n\r\n        <p\r\n            *ngIf=\"helptextmode === 'text' && helptext\"\r\n            class=\"help-block\">\r\n            {{ helptext }}\r\n        </p>\r\n\r\n        <div\r\n            class=\"help-block help-block-error\"\r\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\r\n            {{ GetErrorMessage() | async }}\r\n        </div>\r\n    </div>\r\n</div>\r\n",
-                // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
-                providers: [
-                    {
-                        provide: NG_VALUE_ACCESSOR,
-                        multi: true,
-                        useExisting: SacInputIntegerComponent,
-                    },
-                    {
-                        provide: NG_VALIDATORS,
-                        multi: true,
-                        useExisting: forwardRef(() => SacInputIntegerComponent),
-                    },
-                ]
-            },] }
-];
-SacInputIntegerComponent.ctorParameters = () => [
-    { type: SacFormLayoutDirective, decorators: [{ type: Host }, { type: Optional }] },
-    { type: Injector }
-];
-
-class SacInputPasswordComponent extends SacInputPasswordCommon {
-    // #region Constructors
-    /**
-     * Constructor
-     * @param formLayout SacFormLayout to define scoped layout settings
-     * @param injector Injector for injecting services
-     */
-    constructor(formLayout, injector) {
-        super(formLayout, injector);
-    }
-}
-SacInputPasswordComponent.decorators = [
-    { type: 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    <label\r\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n        id=\"{{ name }}label\"\r\n        for=\"{{ name }}\"\r\n        class=\"col-xs-12 control-label\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\r\n        [class.required]=\"isrequired\">\r\n        <span class=\"text\">{{ label }}</span>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [class]=\"HelptextTooltipIcon\"\r\n                style=\"margin-left: 5px\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-xs-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\r\n        <div [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\r\n            <input\r\n                id=\"{{ name }}\"\r\n                name=\"{{ name }}\"\r\n                class=\"form-control\"\r\n                [ngClass]=\"[componentHeight | toControlHeight]\"\r\n                type=\"password\"\r\n                [value]=\"value\"\r\n                [attr.placeholder]=\"placeholder\"\r\n                (blur)=\"onTouch()\"\r\n                (input)=\"setValue($event.target.value)\"\r\n                [attr.maxlength]=\"maxlength\"\r\n                autocomplete=\"new-password\"\r\n                [disabled]=\"isdisabled\"\r\n                [readonly]=\"readonly\" />\r\n\r\n            <div\r\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n                class=\"form-control-static\"\r\n                style=\"margin-left: 5px\">\r\n                <sac-tooltip\r\n                    *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n                    [tooltiptext]=\"helptext\"\r\n                    [inlinemode]=\"true\">\r\n                    <span\r\n                        [class]=\"HelptextTooltipIcon\"\r\n                        style=\"margin-left: 5px; margin-right: 5px\">\r\n                    </span>\r\n                </sac-tooltip>\r\n            </div>\r\n        </div>\r\n\r\n        <p\r\n            *ngIf=\"helptextmode === 'text' && helptext\"\r\n            class=\"help-block\">\r\n            {{ helptext }}\r\n        </p>\r\n\r\n        <div\r\n            class=\"help-block help-block-error\"\r\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\r\n            {{ GetErrorMessage() | async }}\r\n        </div>\r\n    </div>\r\n</div>\r\n",
-                // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
-                providers: [
-                    {
-                        provide: NG_VALUE_ACCESSOR,
-                        multi: true,
-                        useExisting: SacInputPasswordComponent,
-                    },
-                    {
-                        provide: NG_VALIDATORS,
-                        multi: true,
-                        useExisting: forwardRef(() => SacInputPasswordComponent),
-                    },
-                ]
-            },] }
-];
-SacInputPasswordComponent.ctorParameters = () => [
-    { type: SacFormLayoutDirective, decorators: [{ type: Host }, { type: Optional }] },
-    { type: Injector }
-];
-
-class SacInputSearchComponent extends SacInputSearchCommon {
-    // #region Constructors
-    /**
-     * Constructor
-     * @param formLayout SacFormLayout to define scoped layout settings
-     * @param injector Injector for injecting services
-     */
-    constructor(formLayout, injector) {
-        super(formLayout, injector);
-    }
-}
-SacInputSearchComponent.decorators = [
-    { type: 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    <label\r\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n        id=\"{{ name }}label\"\r\n        for=\"{{ name }}\"\r\n        class=\"col-xs-12 control-label\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\r\n        [class.required]=\"isrequired\">\r\n        <span class=\"text\">{{ label }}</span>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [class]=\"HelptextTooltipIcon\"\r\n                style=\"margin-left: 5px\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-xs-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [class.clearfix]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\r\n        <div\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n            class=\"form-control-static pull-right\"\r\n            style=\"margin-left: 5px\">\r\n            <sac-tooltip\r\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n                [tooltiptext]=\"helptext\"\r\n                [inlinemode]=\"true\">\r\n                <span\r\n                    [class]=\"HelptextTooltipIcon\"\r\n                    style=\"margin-left: 5px; margin-right: 5px\">\r\n                </span>\r\n            </sac-tooltip>\r\n        </div>\r\n\r\n        <div\r\n            class=\"input-group\"\r\n            [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n            [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\r\n            <input\r\n                id=\"{{ name }}\"\r\n                name=\"{{ name }}\"\r\n                type=\"text\"\r\n                class=\"form-control\"\r\n                [ngClass]=\"[componentHeight | toControlHeight]\"\r\n                [value]=\"value\"\r\n                [attr.placeholder]=\"placeholder\"\r\n                (blur)=\"onTouch()\"\r\n                (input)=\"setValue($event.target.value)\"\r\n                [attr.maxlength]=\"maxlength\"\r\n                [disabled]=\"isdisabled\"\r\n                [readonly]=\"readonly\" />\r\n            <span class=\"input-group-btn\">\r\n                <button\r\n                    type=\"button\"\r\n                    class=\"btn btn-default\"\r\n                    id=\"{{ name }}_search\"\r\n                    (click)=\"searchClick()\">\r\n                    <i\r\n                        *ngIf=\"buttonmode === 'icon' || buttonmode === 'mixed'\"\r\n                        [class]=\"iconname\"\r\n                        [style.margin-right.px]=\"buttonmode === 'mixed' ? 7 : null\">\r\n                    </i>\r\n                    <ng-container *ngIf=\"buttonmode === 'text' || buttonmode === 'mixed'\">{{ buttontext }}</ng-container>\r\n                </button>\r\n            </span>\r\n        </div>\r\n\r\n        <p\r\n            *ngIf=\"helptextmode === 'text' && helptext\"\r\n            class=\"help-block\">\r\n            {{ helptext }}\r\n        </p>\r\n    </div>\r\n</div>\r\n",
-                // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
-                providers: [
-                    {
-                        provide: NG_VALUE_ACCESSOR,
-                        multi: true,
-                        useExisting: SacInputSearchComponent,
-                    },
-                    {
-                        provide: NG_VALIDATORS,
-                        multi: true,
-                        useExisting: forwardRef(() => SacInputSearchComponent),
-                    },
-                ]
-            },] }
-];
-SacInputSearchComponent.ctorParameters = () => [
-    { type: SacFormLayoutDirective, decorators: [{ type: Host }, { type: Optional }] },
-    { type: Injector }
-];
-
-class SACBootstrap3InputModule {
-}
-SACBootstrap3InputModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [
-                    SacInputComponent,
-                    SacInputAreaComponent,
-                    SacInputCurrencyComponent,
-                    SacInputDecimalComponent,
-                    SacInputEmailComponent,
-                    SacInputIntegerComponent,
-                    SacInputPasswordComponent,
-                    SacInputSearchComponent,
-                ],
-                imports: [
-                    CommonModule,
-                    CommonModule,
-                    FormsModule,
-                    SACBootstrap3TooltipModule,
-                    SACBootstrap3LayoutModule,
-                ],
-                exports: [
-                    SacInputComponent,
-                    SacInputAreaComponent,
-                    SacInputCurrencyComponent,
-                    SacInputDecimalComponent,
-                    SacInputEmailComponent,
-                    SacInputIntegerComponent,
-                    SacInputPasswordComponent,
-                    SacInputSearchComponent,
-                ],
-            },] }
-];
-
-// #region Classes
-class SacDropdownComponent extends SacDropdownCommon {
-    // #region Constructors
-    /**
-     * Constructor
-     * @param formLayout SacFormLayout to define scoped layout settings
-     * @param injector Injector for injecting services
-     * @param renderer Angular rendering engine
-     * @param elementRef Reference to html dom element
-     */
-    constructor(formLayout, injector, renderer, elementRef) {
-        super(formLayout, injector, renderer, elementRef);
-    }
-}
-SacDropdownComponent.decorators = [
-    { type: 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    <label\r\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n        id=\"{{ name }}label\"\r\n        for=\"{{ name }}\"\r\n        class=\"col-xs-12 control-label\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\r\n        [class.required]=\"isrequired\">\r\n        <span class=\"text\">{{ label }}</span>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [class]=\"HelptextTooltipIcon\"\r\n                style=\"margin-left: 5px\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-xs-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\r\n        <div [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\r\n            <select\r\n                #dropdownitem\r\n                id=\"{{ name }}\"\r\n                name=\"{{ name }}\"\r\n                class=\"form-control\"\r\n                [ngClass]=\"[componentHeight | toControlHeight]\"\r\n                (blur)=\"onTouch()\"\r\n                (change)=\"setValue(dropdownitem.value)\"\r\n                [disabled]=\"isdisabled\">\r\n                <option\r\n                    *ngIf=\"emptylabel !== ''\"\r\n                    [ngValue]=\"emptyvalue\">\r\n                    {{ emptylabel }}\r\n                </option>\r\n\r\n                <ng-content></ng-content>\r\n\r\n                <ng-container *ngIf=\"groupitems === ''\">\r\n                    <option\r\n                        *ngFor=\"let item of options\"\r\n                        [ngValue]=\"optionvalue ? item[optionvalue] : item\"\r\n                        [disabled]=\"optionenabled !== '' && item[optionenabled] === false\">\r\n                        <ng-template *ngTemplateOutlet=\"optionlabeltemplate || defaultItemLabelTemplate; context: { label: item[optionlabel], item: item }\"> </ng-template>\r\n                    </option>\r\n                </ng-container>\r\n\r\n                <ng-container *ngIf=\"groupitems !== ''\">\r\n                    <optgroup\r\n                        *ngFor=\"let group of options\"\r\n                        [attr.label]=\"group[grouplabel]\">\r\n                        <option\r\n                            *ngFor=\"let item of group[groupitems]\"\r\n                            [ngValue]=\"optionvalue ? item[optionvalue] : item\"\r\n                            [disabled]=\"optionenabled !== '' && item[optionenabled] === false\">\r\n                            <ng-template *ngTemplateOutlet=\"optionlabeltemplate || defaultItemLabelTemplate; context: { label: item[optionlabel], item: item }\"> </ng-template>\r\n                        </option>\r\n                    </optgroup>\r\n                </ng-container>\r\n            </select>\r\n\r\n            <div\r\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n                class=\"form-control-static\"\r\n                style=\"margin-left: 5px\">\r\n                <sac-tooltip\r\n                    *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n                    [tooltiptext]=\"helptext\"\r\n                    [inlinemode]=\"true\">\r\n                    <span\r\n                        [class]=\"HelptextTooltipIcon\"\r\n                        style=\"margin-left: 5px; margin-right: 5px\">\r\n                    </span>\r\n                </sac-tooltip>\r\n            </div>\r\n        </div>\r\n\r\n        <p\r\n            *ngIf=\"helptextmode === 'text' && helptext\"\r\n            class=\"help-block\">\r\n            {{ helptext }}\r\n        </p>\r\n\r\n        <div\r\n            class=\"help-block help-block-error\"\r\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\r\n            {{ GetErrorMessage() | async }}\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<ng-template\r\n    #defaultItemLabelTemplate\r\n    let-label=\"label\">\r\n    {{ label }}\r\n</ng-template>\r\n",
-                // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
-                providers: [
-                    {
-                        provide: NG_VALUE_ACCESSOR,
-                        multi: true,
-                        useExisting: SacDropdownComponent,
-                    },
-                    {
-                        provide: NG_VALIDATORS,
-                        multi: true,
-                        useExisting: forwardRef(() => SacDropdownComponent),
-                    },
-                ]
-            },] }
-];
-SacDropdownComponent.ctorParameters = () => [
-    { type: SacFormLayoutDirective, decorators: [{ type: Host }, { type: Optional }] },
-    { type: Injector },
-    { type: Renderer2 },
-    { type: ElementRef }
-];
-class SacDropdownOptionDirective extends SacDropdownOptionCommon {
-    // #region Constructors
-    /**
-     * Konstruktor
-     * @param elementRef Referenz auf HTML DOM Element
-     * @param renderer Angular Rendering Engine
-     * @param dropdownList Referenz auf DropDown Komponente
-     */
-    constructor(elementRef, renderer, dropdownList) {
-        super(elementRef, renderer, dropdownList);
-    }
-}
-SacDropdownOptionDirective.decorators = [
-    { type: Directive, args: [{ selector: 'option,[sacOption]' },] }
-];
-SacDropdownOptionDirective.ctorParameters = () => [
-    { type: ElementRef },
-    { type: Renderer2 },
-    { type: SacDropdownComponent, decorators: [{ type: Optional }, { type: Host }] }
-];
+/**
+ * Grid Action Button
+ */
+class SacGridButtonComponent extends SacGridButtonCommon {
+    // #region Public Methods
+    /**
+     * Returns the icon for the button
+     */
+    getIconClass() {
+        let iconset = this.iconstyle;
+        let iconcss = this.icon;
+        if (iconset === '') {
+            switch (this.icon) {
+                case 'edit':
+                    iconset = 'sprite';
+                    iconcss = 'icon-sprite-base-main_edit';
+                    break;
+                case 'delete':
+                    iconset = 'sprite';
+                    iconcss = 'icon-sprite-base-main_delete';
+                    break;
+            }
+        }
+        if (this._isdisabledvalue) {
+            iconcss += '_disabled';
+        }
+        const result = iconset + ' ' + iconcss;
+        return result.trim();
+    }
+}
+SacGridButtonComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'sac-gridbutton',
+                template: "<a (click)=\"callaction()\" style=\"padding-right: 5px;\" [class.disabled]=\"isdisabled\" [attr.disabled]=\"isdisabled ? 'disabled' : null\"><span class=\"{{getIconClass()}}\"></span></a>\n"
+            },] }
+];
+
+class SacGridColumnComponent extends SacGridColumnCommon {
+    constructor(grid, injector, el) {
+        super(grid, injector, el);
+    }
+}
+SacGridColumnComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'sac-gridcolumn',
+                template: "<th\n    scope=\"col\"\n    *ngIf=\"IsHeader()\"\n    [style.width]=\"width\"\n    (click)=\"SortByColumn()\">\n    <span>{{ header }}</span>\n    <span\n        [class]=\"IconSortUp\"\n        style=\"padding-left: 0.5rem\"\n        *ngIf=\"IsSortedColumn() && GetSortDirection() === 'asc'\"></span>\n    <span\n        [class]=\"IconSortDown\"\n        style=\"padding-left: 0.5rem\"\n        *ngIf=\"IsSortedColumn() && GetSortDirection() === 'desc'\"></span>\n</th>\n<td\n    scope=\"col\"\n    *ngIf=\"IsBody()\"\n    [style.width]=\"width\"\n    [class.ellipsis]=\"IsEllipsis()\"\n    (click)=\"ColumnClick()\"\n    [style.max-width]=\"IsEllipsis() ? width : null\"\n    [style.overflow]=\"IsEllipsis() ? 'hidden' : null\"\n    [style.text-overflow]=\"IsEllipsis() ? 'ellipsis' : null\"\n    [style.white-space]=\"IsEllipsis() ? 'nowrap' : null\">\n    <span\n        [attr.title]=\"IsEllipsis() ? value : null\"\n        [innerHtml]=\"value\"></span>\n</td>\n",
+                providers: [
+                    {
+                        provide: SacGridColumnBaseCommon,
+                        useExisting: forwardRef(() => SacGridColumnComponent),
+                    },
+                ]
+            },] }
+];
+SacGridColumnComponent.ctorParameters = () => [
+    { type: SacGridComponent },
+    { type: Injector },
+    { type: ElementRef }
+];
+
+class SacGridColumnActionComponent extends SacGridColumnActionCommon {
+    constructor(grid, injector, el) {
+        super(grid, injector, el);
+        this.width = '52px';
+    }
+}
+SacGridColumnActionComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'sac-gridcolumnaction',
+                template: "<th scope=\"col\" *ngIf=\"IsHeader()\" [style.width]=\"width\"><span></span></th>\n<td scope=\"col\" *ngIf=\"IsBody()\">\n   <ng-content></ng-content>\n</td>\n",
+                providers: [
+                    {
+                        provide: SacGridColumnBaseCommon,
+                        useExisting: forwardRef(() => SacGridColumnActionComponent),
+                    },
+                ]
+            },] }
+];
+SacGridColumnActionComponent.ctorParameters = () => [
+    { type: SacGridComponent },
+    { type: Injector },
+    { type: ElementRef }
+];
+
+class SacGridImageComponent extends SacGridImageCommon {
+    getIconClass() {
+        switch (this.iconstyle) {
+            case 'edit':
+                return 'sprite icon-sprite-base-main_edit';
+            case 'delete':
+                return 'sprite icon-sprite-base-main_delete';
+            default:
+                return this.iconstyle;
+        }
+    }
+}
+SacGridImageComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'sac-gridimage',
+                template: "<span style=\"padding-right: 5px;\"><span class=\"{{getIconClass()}}\"></span></span>\n"
+            },] }
+];
+
+class SacPagingComponent extends SacPagingCommon {
+    /**
+     * Konstruktor
+     */
+    constructor(injector) { super(injector); }
+}
+SacPagingComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'sac-paging',
+                template: "<div class=\"row\">\n  <div class=\"pager-nav col-sm-4\" id=\"{{name}}\">\n    <ul class=\"pagination\" style=\"margin: 10px 0\">\n      <li\n        [ngClass]=\"{'aspNetDisabled disabled': activePageIndex === firstPageIndex}\"\n      >\n        <a (click)=\"firstPage()\">\u00AB</a>\n      </li>\n      <li\n        *ngFor=\"let page of paginators; let i = index\"\n        [ngClass]=\"{'active': page === activePageIndex}\"\n      >\n        <a (click)=\"changePage(page)\">{{page + 1 }}</a>\n      </li>\n      <li\n        [ngClass]=\"{'aspNetDisabled disabled': activePageIndex === lastPageIndex}\"\n      >\n        <a (click)=\"lastPage()\">\u00BB</a>\n      </li>\n    </ul>\n  </div>\n  <div class=\"col-sm-4 text-center\" style=\"margin: 20px 0\">\n    Seite {{getCurrentPageNumber()}} von {{getTotalPageNumber()}}\n  </div>\n  <div\n    class=\"col-sm-4 text-right\"\n    *ngIf=\"!pagesizedisabled\"\n    style=\"margin: 12px 0\"\n  >\n    <div class=\"form-inline\">\n      <div class=\"form-group\" id=\"{{name}}_size\">\n        <select\n          class=\"form-control form-control-sm\"\n          style=\"width: 85px\"\n          [ngModel]=\"pageSize\"\n          (ngModelChange)=\"changePageSize($event)\"\n        >\n          <option [ngValue]=\"size\" *ngFor=\"let size of getPageSizes\">\n            {{size}}\n          </option>\n        </select>\n        <span style=\"margin-left: 5px\">{{ PageSizeText | async }}</span>\n      </div>\n    </div>\n  </div>\n</div>\n",
+                // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
+                providers: [
+                    { provide: NG_VALUE_ACCESSOR, multi: true, useExisting: SacPagingComponent },
+                    { provide: NG_VALIDATORS, multi: true, useExisting: forwardRef(() => SacPagingComponent) }
+                ]
+            },] }
+];
+SacPagingComponent.ctorParameters = () => [
+    { type: Injector }
+];
+
+class SACBootstrap3GridModule {
+}
+SACBootstrap3GridModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [
+                    SacGridComponent,
+                    SacGridColumnComponent,
+                    SacGridColumnActionComponent,
+                    SacPagingComponent,
+                    SacGridButtonComponent,
+                    SacGridImageComponent,
+                ],
+                imports: [CommonModule, FormsModule],
+                exports: [
+                    SacGridComponent,
+                    SacGridColumnComponent,
+                    SacGridColumnActionComponent,
+                    SacPagingComponent,
+                    SacGridButtonComponent,
+                    SacGridImageComponent,
+                ],
+            },] }
+];
+
+class SacInputComponent extends SacInputCommon {
+    // #region Constructors
+    /**
+     * Constructor
+     * @param formLayout SacFormLayout to define scoped layout settings
+     * @param injector Injector for injecting services
+     */
+    constructor(formLayout, injector) {
+        super(formLayout, injector);
+    }
+}
+SacInputComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'sac-input',
+                template: "<div\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\n        <div [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n            <input\n                id=\"{{ name }}\"\n                name=\"{{ name }}\"\n                type=\"text\"\n                class=\"form-control\"\n                [ngClass]=\"[componentHeight | toControlHeight]\"\n                [value]=\"value\"\n                [attr.placeholder]=\"placeholder\"\n                (blur)=\"onTouch()\"\n                (input)=\"setValue($event.target.value)\"\n                [attr.maxlength]=\"maxtextlength\"\n                [disabled]=\"isdisabled\"\n                [readonly]=\"readonly\" />\n\n            <div\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n                class=\"form-control-static\"\n                style=\"margin-left: 5px\">\n                <sac-tooltip\n                    *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                    [tooltiptext]=\"helptext\"\n                    [inlinemode]=\"true\">\n                    <span\n                        [class]=\"HelptextTooltipIcon\"\n                        style=\"margin-left: 5px; margin-right: 5px\">\n                    </span>\n                </sac-tooltip>\n            </div>\n        </div>\n\n        <p\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"help-block\">\n            {{ helptext }}\n        </p>\n\n        <div\n            class=\"help-block help-block-error\"\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n            {{ GetErrorMessage() | async }}\n        </div>\n    </div>\n</div>\n",
+                // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
+                providers: [
+                    { provide: NG_VALUE_ACCESSOR, multi: true, useExisting: SacInputComponent },
+                    {
+                        provide: NG_VALIDATORS,
+                        multi: true,
+                        useExisting: forwardRef(() => SacInputComponent),
+                    },
+                ]
+            },] }
+];
+SacInputComponent.ctorParameters = () => [
+    { type: SacFormLayoutDirective, decorators: [{ type: Host }, { type: Optional }] },
+    { type: Injector }
+];
+
+/**
+ * Komponente für TextArea
+ *
+ * @example
+ *
+ * <ngInputArea name="ngInputArea" label="My Label" placeholder='i am input area' [isrequired]="true" customCssClass="myClass1 myClass3"></ngInputArea>
+ *
+ * @example
+ *
+ * <ngInputArea name="ngInputArea" label="My Label" height="150px" placeholder='i am input area' [islanguagespecific]="true">
+ *
+ */
+class SacInputAreaComponent extends SacInputAreaCommon {
+    // #region Constructors
+    /**
+     * Constructor
+     * @param formLayout SacFormLayout to define scoped layout settings
+     * @param injector Injector for injecting services
+     */
+    constructor(formLayout, injector) {
+        super(formLayout, injector);
+    }
+}
+SacInputAreaComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'sac-inputarea',
+                template: "<div\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\n        <div [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n            <textarea\n                id=\"{{ name }}\"\n                name=\"{{ name }}\"\n                type=\"\"\n                class=\"form-control\"\n                [class.is-invalid]=\"invalid && (dirty || touched)\"\n                [class.validation-error]=\"invalid && (dirty || touched)\"\n                [class.required]=\"isrequired\"\n                [ngClass]=\"[componentHeight | toControlHeight]\"\n                [value]=\"value\"\n                [attr.placeholder]=\"placeholder\"\n                (blur)=\"onTouch()\"\n                (input)=\"setValue($event.target.value)\"\n                (keypress)=\"onKeyPress($event)\"\n                [attr.rows]=\"rows\"\n                [disabled]=\"isdisabled\"\n                [readonly]=\"readonly\">\n            </textarea>\n\n            <div\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n                class=\"form-control-static\"\n                style=\"margin-left: 5px\">\n                <sac-tooltip\n                    *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                    [tooltiptext]=\"helptext\"\n                    [inlinemode]=\"true\">\n                    <span\n                        [class]=\"HelptextTooltipIcon\"\n                        style=\"margin-left: 5px; margin-right: 5px\">\n                    </span>\n                </sac-tooltip>\n            </div>\n        </div>\n\n        <p\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"help-block\">\n            {{ helptext }}\n        </p>\n\n        <div\n            class=\"help-block help-block-error\"\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n            {{ GetErrorMessage() | async }}\n        </div>\n    </div>\n</div>\n",
+                // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
+                providers: [
+                    {
+                        provide: NG_VALUE_ACCESSOR,
+                        multi: true,
+                        useExisting: SacInputAreaComponent,
+                    },
+                    {
+                        provide: NG_VALIDATORS,
+                        multi: true,
+                        useExisting: forwardRef(() => SacInputAreaComponent),
+                    },
+                ]
+            },] }
+];
+SacInputAreaComponent.ctorParameters = () => [
+    { type: SacFormLayoutDirective, decorators: [{ type: Host }, { type: Optional }] },
+    { type: Injector }
+];
+
+class SacInputCurrencyComponent extends SacInputCurrencyCommon {
+    // #region Constructors
+    /**
+     * Constructor
+     * @param formLayout SacFormLayout to define scoped layout settings
+     * @param injector Injector for injecting services
+     */
+    constructor(formLayout, injector) {
+        super(formLayout, injector);
+    }
+}
+SacInputCurrencyComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'sac-inputcurrency',
+                template: "<div\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.clearfix]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-static pull-right\"\n            style=\"margin-left: 5px\">\n            <sac-tooltip\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [class]=\"HelptextTooltipIcon\"\n                    style=\"margin-left: 5px; margin-right: 5px\">\n                </span>\n            </sac-tooltip>\n        </div>\n\n        <div\n            class=\"input-group\"\n            [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n            [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\n            <input\n                id=\"{{ name }}\"\n                name=\"{{ name }}\"\n                type=\"text\"\n                class=\"form-control\"\n                [ngClass]=\"[componentHeight | toControlHeight]\"\n                [value]=\"value\"\n                [attr.placeholder]=\"placeholder\"\n                (blur)=\"onTouch()\"\n                (input)=\"setValue($event.target.value)\"\n                (keypress)=\"onKeyPress($event)\"\n                [disabled]=\"isdisabled\"\n                [readonly]=\"readonly\" />\n            <div class=\"input-group-addon\">{{ currency }}</div>\n        </div>\n\n        <p\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"help-block\">\n            {{ helptext }}\n        </p>\n\n        <div\n            class=\"help-block help-block-error\"\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n            {{ GetErrorMessage() | async }}\n        </div>\n    </div>\n</div>\n",
+                // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
+                providers: [
+                    {
+                        provide: NG_VALUE_ACCESSOR,
+                        multi: true,
+                        useExisting: SacInputCurrencyComponent,
+                    },
+                    {
+                        provide: NG_VALIDATORS,
+                        multi: true,
+                        useExisting: forwardRef(() => SacInputCurrencyComponent),
+                    },
+                ]
+            },] }
+];
+SacInputCurrencyComponent.ctorParameters = () => [
+    { type: SacFormLayoutDirective, decorators: [{ type: Host }, { type: Optional }] },
+    { type: Injector }
+];
+
+class SacInputDecimalComponent extends SacInputDecimalCommon {
+    // #region Constructors
+    /**
+     * Constructor
+     * @param formLayout SacFormLayout to define scoped layout settings
+     * @param injector Injector for injecting services
+     */
+    constructor(formLayout, injector) {
+        super(formLayout, injector);
+    }
+}
+SacInputDecimalComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'sac-inputdecimal',
+                template: "<div\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\n        <div [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n            <input\n                id=\"{{ name }}\"\n                name=\"{{ name }}\"\n                type=\"text\"\n                class=\"form-control\"\n                [ngClass]=\"[componentHeight | toControlHeight]\"\n                [value]=\"value\"\n                [attr.placeholder]=\"placeholder\"\n                (blur)=\"onTouch()\"\n                (input)=\"setValue($event.target.value)\"\n                (keypress)=\"onKeyPress($event)\"\n                [disabled]=\"isdisabled\"\n                [readonly]=\"readonly\" />\n\n            <div\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n                class=\"form-control-static\"\n                style=\"margin-left: 5px\">\n                <sac-tooltip\n                    *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                    [tooltiptext]=\"helptext\"\n                    [inlinemode]=\"true\">\n                    <span\n                        [class]=\"HelptextTooltipIcon\"\n                        style=\"margin-left: 5px; margin-right: 5px\">\n                    </span>\n                </sac-tooltip>\n            </div>\n        </div>\n\n        <p\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"help-block\">\n            {{ helptext }}\n        </p>\n\n        <div\n            class=\"help-block help-block-error\"\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n            {{ GetErrorMessage() | async }}\n        </div>\n    </div>\n</div>\n",
+                // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
+                providers: [
+                    {
+                        provide: NG_VALUE_ACCESSOR,
+                        multi: true,
+                        useExisting: SacInputDecimalComponent,
+                    },
+                    {
+                        provide: NG_VALIDATORS,
+                        multi: true,
+                        useExisting: forwardRef(() => SacInputDecimalComponent),
+                    },
+                ]
+            },] }
+];
+SacInputDecimalComponent.ctorParameters = () => [
+    { type: SacFormLayoutDirective, decorators: [{ type: Host }, { type: Optional }] },
+    { type: Injector }
+];
+
+class SacInputEmailComponent extends SacInputEmailCommon {
+    // #region Constructors
+    /**
+     * Constructor
+     * @param formLayout SacFormLayout to define scoped layout settings
+     * @param injector Injector for injecting services
+     */
+    constructor(formLayout, injector) {
+        super(formLayout, injector);
+    }
+}
+SacInputEmailComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'sac-inputemail',
+                template: "<div\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.clearfix]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-static pull-right\"\n            style=\"margin-left: 5px\">\n            <sac-tooltip\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [class]=\"HelptextTooltipIcon\"\n                    style=\"margin-left: 5px; margin-right: 5px\">\n                </span>\n            </sac-tooltip>\n        </div>\n\n        <div\n            class=\"input-group\"\n            [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n            [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\n            <div class=\"input-group-addon\">@</div>\n            <input\n                id=\"{{ name }}\"\n                name=\"{{ name }}\"\n                type=\"text\"\n                class=\"form-control\"\n                [ngClass]=\"[componentHeight | toControlHeight]\"\n                [value]=\"value\"\n                [attr.placeholder]=\"placeholder\"\n                (blur)=\"onTouch()\"\n                (input)=\"setValue($event.target.value)\"\n                autocomplete=\"email\"\n                [attr.maxlength]=\"maxtextlength\"\n                [disabled]=\"isdisabled\"\n                [readonly]=\"readonly\" />\n        </div>\n\n        <p\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"help-block\">\n            {{ helptext }}\n        </p>\n\n        <div\n            class=\"help-block help-block-error\"\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n            {{ GetErrorMessage() | async }}\n        </div>\n    </div>\n</div>\n",
+                // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
+                providers: [
+                    {
+                        provide: NG_VALUE_ACCESSOR,
+                        multi: true,
+                        useExisting: SacInputEmailComponent,
+                    },
+                    {
+                        provide: NG_VALIDATORS,
+                        multi: true,
+                        useExisting: forwardRef(() => SacInputEmailComponent),
+                    },
+                ]
+            },] }
+];
+SacInputEmailComponent.ctorParameters = () => [
+    { type: SacFormLayoutDirective, decorators: [{ type: Host }, { type: Optional }] },
+    { type: Injector }
+];
+
+class SacInputIntegerComponent extends SacInputIntegerCommon {
+    // #region Constructors
+    /**
+     * Constructor
+     * @param formLayout SacFormLayout to define scoped layout settings
+     * @param injector Injector for injecting services
+     */
+    constructor(formLayout, injector) {
+        super(formLayout, injector);
+    }
+}
+SacInputIntegerComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'sac-inputinteger',
+                template: "<div\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\n        <div [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n            <input\n                id=\"{{ name }}\"\n                name=\"{{ name }}\"\n                type=\"text\"\n                class=\"form-control\"\n                [ngClass]=\"[componentHeight | toControlHeight]\"\n                [value]=\"value\"\n                [attr.placeholder]=\"placeholder\"\n                (blur)=\"onTouch()\"\n                (input)=\"setValue($event.target.value)\"\n                (keypress)=\"onKeyPress($event)\"\n                [disabled]=\"isdisabled\"\n                [readonly]=\"readonly\" />\n\n            <div\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n                class=\"form-control-static\"\n                style=\"margin-left: 5px\">\n                <sac-tooltip\n                    *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                    [tooltiptext]=\"helptext\"\n                    [inlinemode]=\"true\">\n                    <span\n                        [class]=\"HelptextTooltipIcon\"\n                        style=\"margin-left: 5px; margin-right: 5px\">\n                    </span>\n                </sac-tooltip>\n            </div>\n        </div>\n\n        <p\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"help-block\">\n            {{ helptext }}\n        </p>\n\n        <div\n            class=\"help-block help-block-error\"\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n            {{ GetErrorMessage() | async }}\n        </div>\n    </div>\n</div>\n",
+                // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
+                providers: [
+                    {
+                        provide: NG_VALUE_ACCESSOR,
+                        multi: true,
+                        useExisting: SacInputIntegerComponent,
+                    },
+                    {
+                        provide: NG_VALIDATORS,
+                        multi: true,
+                        useExisting: forwardRef(() => SacInputIntegerComponent),
+                    },
+                ]
+            },] }
+];
+SacInputIntegerComponent.ctorParameters = () => [
+    { type: SacFormLayoutDirective, decorators: [{ type: Host }, { type: Optional }] },
+    { type: Injector }
+];
+
+class SacInputPasswordComponent extends SacInputPasswordCommon {
+    // #region Constructors
+    /**
+     * Constructor
+     * @param formLayout SacFormLayout to define scoped layout settings
+     * @param injector Injector for injecting services
+     */
+    constructor(formLayout, injector) {
+        super(formLayout, injector);
+    }
+}
+SacInputPasswordComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'sac-inputpassword',
+                template: "<div\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\n        <div [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n            <input\n                id=\"{{ name }}\"\n                name=\"{{ name }}\"\n                class=\"form-control\"\n                [ngClass]=\"[componentHeight | toControlHeight]\"\n                type=\"password\"\n                [value]=\"value\"\n                [attr.placeholder]=\"placeholder\"\n                (blur)=\"onTouch()\"\n                (input)=\"setValue($event.target.value)\"\n                [attr.maxlength]=\"maxtextlength\"\n                autocomplete=\"new-password\"\n                [disabled]=\"isdisabled\"\n                [readonly]=\"readonly\" />\n\n            <div\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n                class=\"form-control-static\"\n                style=\"margin-left: 5px\">\n                <sac-tooltip\n                    *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                    [tooltiptext]=\"helptext\"\n                    [inlinemode]=\"true\">\n                    <span\n                        [class]=\"HelptextTooltipIcon\"\n                        style=\"margin-left: 5px; margin-right: 5px\">\n                    </span>\n                </sac-tooltip>\n            </div>\n        </div>\n\n        <p\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"help-block\">\n            {{ helptext }}\n        </p>\n\n        <div\n            class=\"help-block help-block-error\"\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n            {{ GetErrorMessage() | async }}\n        </div>\n    </div>\n</div>\n",
+                // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
+                providers: [
+                    {
+                        provide: NG_VALUE_ACCESSOR,
+                        multi: true,
+                        useExisting: SacInputPasswordComponent,
+                    },
+                    {
+                        provide: NG_VALIDATORS,
+                        multi: true,
+                        useExisting: forwardRef(() => SacInputPasswordComponent),
+                    },
+                ]
+            },] }
+];
+SacInputPasswordComponent.ctorParameters = () => [
+    { type: SacFormLayoutDirective, decorators: [{ type: Host }, { type: Optional }] },
+    { type: Injector }
+];
+
+class SacInputSearchComponent extends SacInputSearchCommon {
+    // #region Constructors
+    /**
+     * Constructor
+     * @param formLayout SacFormLayout to define scoped layout settings
+     * @param injector Injector for injecting services
+     */
+    constructor(formLayout, injector) {
+        super(formLayout, injector);
+    }
+}
+SacInputSearchComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'sac-inputsearch',
+                template: "<div\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.clearfix]=\"helptextmode === 'tooltip' && helptext && disablelabel\">\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-static pull-right\"\n            style=\"margin-left: 5px\">\n            <sac-tooltip\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [class]=\"HelptextTooltipIcon\"\n                    style=\"margin-left: 5px; margin-right: 5px\">\n                </span>\n            </sac-tooltip>\n        </div>\n\n        <div\n            class=\"input-group\"\n            [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n            [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\n            <input\n                id=\"{{ name }}\"\n                name=\"{{ name }}\"\n                type=\"text\"\n                class=\"form-control\"\n                [ngClass]=\"[componentHeight | toControlHeight]\"\n                [value]=\"value\"\n                [attr.placeholder]=\"placeholder\"\n                (blur)=\"onTouch()\"\n                (input)=\"setValue($event.target.value)\"\n                [attr.maxlength]=\"maxtextlength\"\n                [disabled]=\"isdisabled\"\n                [readonly]=\"readonly\" />\n            <span class=\"input-group-btn\">\n                <button\n                    type=\"button\"\n                    class=\"btn btn-default\"\n                    id=\"{{ name }}_search\"\n                    (click)=\"searchClick()\">\n                    <i\n                        *ngIf=\"buttonmode === 'icon' || buttonmode === 'mixed'\"\n                        [class]=\"iconname\"\n                        [style.margin-right.px]=\"buttonmode === 'mixed' ? 7 : null\">\n                    </i>\n                    <ng-container *ngIf=\"buttonmode === 'text' || buttonmode === 'mixed'\">{{ buttontext }}</ng-container>\n                </button>\n            </span>\n        </div>\n\n        <p\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"help-block\">\n            {{ helptext }}\n        </p>\n    </div>\n</div>\n",
+                // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
+                providers: [
+                    {
+                        provide: NG_VALUE_ACCESSOR,
+                        multi: true,
+                        useExisting: SacInputSearchComponent,
+                    },
+                    {
+                        provide: NG_VALIDATORS,
+                        multi: true,
+                        useExisting: forwardRef(() => SacInputSearchComponent),
+                    },
+                ]
+            },] }
+];
+SacInputSearchComponent.ctorParameters = () => [
+    { type: SacFormLayoutDirective, decorators: [{ type: Host }, { type: Optional }] },
+    { type: Injector }
+];
+
+class SACBootstrap3InputModule {
+}
+SACBootstrap3InputModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [
+                    SacInputComponent,
+                    SacInputAreaComponent,
+                    SacInputCurrencyComponent,
+                    SacInputDecimalComponent,
+                    SacInputEmailComponent,
+                    SacInputIntegerComponent,
+                    SacInputPasswordComponent,
+                    SacInputSearchComponent,
+                ],
+                imports: [
+                    CommonModule,
+                    CommonModule,
+                    FormsModule,
+                    SACBootstrap3TooltipModule,
+                    SACBootstrap3LayoutModule,
+                ],
+                exports: [
+                    SacInputComponent,
+                    SacInputAreaComponent,
+                    SacInputCurrencyComponent,
+                    SacInputDecimalComponent,
+                    SacInputEmailComponent,
+                    SacInputIntegerComponent,
+                    SacInputPasswordComponent,
+                    SacInputSearchComponent,
+                ],
+            },] }
+];
+
+// #region Classes
+class SacDropdownComponent extends SacDropdownCommon {
+    // #region Constructors
+    /**
+     * Constructor
+     * @param formLayout SacFormLayout to define scoped layout settings
+     * @param injector Injector for injecting services
+     * @param renderer Angular rendering engine
+     * @param elementRef Reference to html dom element
+     */
+    constructor(formLayout, injector, renderer, elementRef) {
+        super(formLayout, injector, renderer, elementRef);
+    }
+}
+SacDropdownComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'sac-dropdown',
+                template: "<div\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\n        <div [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n            <select\n                #dropdownitem\n                id=\"{{ name }}\"\n                name=\"{{ name }}\"\n                class=\"form-control\"\n                [ngClass]=\"[componentHeight | toControlHeight]\"\n                (blur)=\"onTouch()\"\n                (change)=\"setValue(dropdownitem.value)\"\n                [disabled]=\"isdisabled\">\n                <option\n                    *ngIf=\"emptylabel !== ''\"\n                    [ngValue]=\"emptyvalue\">\n                    {{ emptylabel }}\n                </option>\n\n                <ng-content></ng-content>\n\n                <ng-container *ngIf=\"groupitems === ''\">\n                    <option\n                        *ngFor=\"let item of options\"\n                        [ngValue]=\"optionvalue ? item[optionvalue] : item\"\n                        [disabled]=\"optionenabled !== '' && item[optionenabled] === false\">\n                        <ng-template *ngTemplateOutlet=\"optionlabeltemplate || defaultItemLabelTemplate; context: { label: item[optionlabel], item: item }\"> </ng-template>\n                    </option>\n                </ng-container>\n\n                <ng-container *ngIf=\"groupitems !== ''\">\n                    <optgroup\n                        *ngFor=\"let group of options\"\n                        [attr.label]=\"group[grouplabel]\">\n                        <option\n                            *ngFor=\"let item of group[groupitems]\"\n                            [ngValue]=\"optionvalue ? item[optionvalue] : item\"\n                            [disabled]=\"optionenabled !== '' && item[optionenabled] === false\">\n                            <ng-template *ngTemplateOutlet=\"optionlabeltemplate || defaultItemLabelTemplate; context: { label: item[optionlabel], item: item }\"> </ng-template>\n                        </option>\n                    </optgroup>\n                </ng-container>\n            </select>\n\n            <div\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n                class=\"form-control-static\"\n                style=\"margin-left: 5px\">\n                <sac-tooltip\n                    *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                    [tooltiptext]=\"helptext\"\n                    [inlinemode]=\"true\">\n                    <span\n                        [class]=\"HelptextTooltipIcon\"\n                        style=\"margin-left: 5px; margin-right: 5px\">\n                    </span>\n                </sac-tooltip>\n            </div>\n        </div>\n\n        <p\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"help-block\">\n            {{ helptext }}\n        </p>\n\n        <div\n            class=\"help-block help-block-error\"\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n            {{ GetErrorMessage() | async }}\n        </div>\n    </div>\n</div>\n\n<ng-template\n    #defaultItemLabelTemplate\n    let-label=\"label\">\n    {{ label }}\n</ng-template>\n",
+                // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
+                providers: [
+                    {
+                        provide: NG_VALUE_ACCESSOR,
+                        multi: true,
+                        useExisting: SacDropdownComponent,
+                    },
+                    {
+                        provide: NG_VALIDATORS,
+                        multi: true,
+                        useExisting: forwardRef(() => SacDropdownComponent),
+                    },
+                ]
+            },] }
+];
+SacDropdownComponent.ctorParameters = () => [
+    { type: SacFormLayoutDirective, decorators: [{ type: Host }, { type: Optional }] },
+    { type: Injector },
+    { type: Renderer2 },
+    { type: ElementRef }
+];
+class SacDropdownOptionDirective extends SacDropdownOptionCommon {
+    // #region Constructors
+    /**
+     * Konstruktor
+     * @param elementRef Referenz auf HTML DOM Element
+     * @param renderer Angular Rendering Engine
+     * @param dropdownList Referenz auf DropDown Komponente
+     */
+    constructor(elementRef, renderer, dropdownList) {
+        super(elementRef, renderer, dropdownList);
+    }
+}
+SacDropdownOptionDirective.decorators = [
+    { type: Directive, args: [{ selector: 'option,[sacOption]' },] }
+];
+SacDropdownOptionDirective.ctorParameters = () => [
+    { type: ElementRef },
+    { type: Renderer2 },
+    { type: SacDropdownComponent, decorators: [{ type: Optional }, { type: Host }] }
+];
 // #endregion Classes
 
-class SacListboxComponent extends SacListboxCommon {
-    // #region Constructors
-    /**
-     * Constructor
-     * @param formLayout SacFormLayout to define scoped layout settings
-     * @param injector Injector for injecting services
-     */
-    constructor(formLayout, injector) {
-        super(formLayout, injector);
-    }
-}
-SacListboxComponent.decorators = [
-    { type: 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    <label\r\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n        id=\"{{ name }}label\"\r\n        for=\"{{ name }}\"\r\n        class=\"col-xs-12 control-label\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\r\n        [class.required]=\"isrequired\">\r\n        <span class=\"text\">{{ label }}</span>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [class]=\"HelptextTooltipIcon\"\r\n                style=\"margin-left: 5px\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-xs-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\r\n        <div [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\r\n            <select\r\n                multiple\r\n                id=\"{{ name }}\"\r\n                name=\"{{ name }}\"\r\n                class=\"form-control\"\r\n                [ngClass]=\"[componentHeight | toControlHeight]\"\r\n                [size]=\"rowsize\"\r\n                (blur)=\"onTouch()\"\r\n                (change)=\"getSelectedItems($event.target)\"\r\n                [disabled]=\"isdisabled\">\r\n                <ng-content></ng-content>\r\n                <ng-container *ngIf=\"groupitems === ''\">\r\n                    <option\r\n                        *ngFor=\"let option of options\"\r\n                        [value]=\"option[optionvalue]\"\r\n                        [disabled]=\"optionenabled !== '' && option[optionenabled] === false\">\r\n                        <ng-template *ngTemplateOutlet=\"optionlabeltemplate || defaultItemLabelTemplate; context: { label: option[optionlabel] }\"> </ng-template>\r\n                    </option>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"groupitems !== ''\">\r\n                    <optgroup\r\n                        *ngFor=\"let option of options\"\r\n                        [attr.label]=\"option[grouplabel]\">\r\n                        <option\r\n                            *ngFor=\"let item of option[groupitems]\"\r\n                            [value]=\"item[optionvalue]\"\r\n                            [disabled]=\"optionenabled !== '' && item[optionenabled] === false\">\r\n                            <ng-template *ngTemplateOutlet=\"optionlabeltemplate || defaultItemLabelTemplate; context: { label: item[optionlabel] }\"> </ng-template>\r\n                        </option>\r\n                    </optgroup>\r\n                </ng-container>\r\n            </select>\r\n\r\n            <div\r\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n                class=\"form-control-static\"\r\n                style=\"margin-left: 5px\">\r\n                <sac-tooltip\r\n                    *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n                    [tooltiptext]=\"helptext\"\r\n                    [inlinemode]=\"true\">\r\n                    <span\r\n                        [class]=\"HelptextTooltipIcon\"\r\n                        style=\"margin-left: 5px; margin-right: 5px\">\r\n                    </span>\r\n                </sac-tooltip>\r\n            </div>\r\n        </div>\r\n\r\n        <p\r\n            *ngIf=\"helptextmode === 'text' && helptext\"\r\n            class=\"help-block\">\r\n            {{ helptext }}\r\n        </p>\r\n\r\n        <div\r\n            class=\"help-block help-block-error\"\r\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\r\n            {{ GetErrorMessage() | async }}\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<ng-template\r\n    #defaultItemLabelTemplate\r\n    let-label=\"label\">\r\n    {{ label }}\r\n</ng-template>\r\n",
-                // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
-                providers: [
-                    {
-                        provide: NG_VALUE_ACCESSOR,
-                        multi: true,
-                        useExisting: SacListboxComponent,
-                    },
-                    {
-                        provide: NG_VALIDATORS,
-                        multi: true,
-                        useExisting: forwardRef(() => SacListboxComponent),
-                    },
-                ]
-            },] }
-];
-SacListboxComponent.ctorParameters = () => [
-    { type: SacFormLayoutDirective, decorators: [{ type: Host }, { type: Optional }] },
-    { type: Injector }
-];
-
-class SACBootstrap3ListModule {
-}
-SACBootstrap3ListModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [
-                    SacDropdownComponent,
-                    SacDropdownOptionDirective,
-                    SacListboxComponent,
-                ],
-                imports: [
-                    CommonModule,
-                    SACCommonListboxOptionModule,
-                    SACBootstrap3TooltipModule,
-                    FormsModule,
-                    SACBootstrap3LayoutModule,
-                ],
-                exports: [
-                    SacDropdownComponent,
-                    SacDropdownOptionDirective,
-                    SacListboxComponent,
-                ],
-            },] }
-];
-
-/**
- * Component für einbindung eines beliebigen Controls in die Form Struktur
- *
- * @example
- *  <ngStaticFormContainer name='myformcontainer' label="My Custom Form Control" [isrequired]='false'>
- *      <input type="range" class="form-control" />
- *  </ngStaticFormContainer>
- *
- * @example
- * <ngStaticFormContainer name='myformcintainer' label="My Custom Form Control" [isrequired]='false' tooltiptext="Dies ist ein Tooltip Text">
- *     <input type="range" class="form-control" />
- * </ngStaticFormContainer>
- *
- **/
-class SacStaticFormContainerComponent extends SacStaticFormContainerCommon {
-    // #region Constructors
-    /**
-     * Constructor
-     * @param formLayout SacFormLayout to define scoped layout settings
-     * @param injector Injector for injecting services
-     */
-    constructor(formLayout, injector) {
-        super(formLayout, injector);
-    }
-}
-SacStaticFormContainerComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'sac-staticformcontainer',
-                template: "<div\r\n    class=\"row form-group\"\r\n    [class.has-error]=\"isinvalid && errormessage\"\r\n    [ngClass]=\"componentHeight | toLabelHeight\">\r\n    <label\r\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n        id=\"{{ name }}label\"\r\n        for=\"{{ name }}\"\r\n        class=\"col-xs-12 control-label\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\r\n        [class.required]=\"isrequired\">\r\n        <span class=\"text\">{{ label }}</span>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [class]=\"HelptextTooltipIcon\"\r\n                style=\"margin-left: 5px\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-xs-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\r\n        <div [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\r\n            <ng-content></ng-content>\r\n\r\n            <div\r\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n                class=\"form-control-static\"\r\n                style=\"margin-left: 5px\">\r\n                <sac-tooltip\r\n                    *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n                    [tooltiptext]=\"helptext\"\r\n                    [inlinemode]=\"true\">\r\n                    <span\r\n                        [class]=\"HelptextTooltipIcon\"\r\n                        style=\"margin-left: 5px; margin-right: 5px\">\r\n                    </span>\r\n                </sac-tooltip>\r\n            </div>\r\n        </div>\r\n\r\n        <p\r\n            *ngIf=\"helptextmode === 'text' && helptext\"\r\n            class=\"help-block\">\r\n            {{ helptext }}\r\n        </p>\r\n\r\n        <div\r\n            class=\"help-block help-block-error\"\r\n            *ngIf=\"isinlineerrorenabled && isinvalid && errormessage\">\r\n            {{ errormessage }}\r\n        </div>\r\n    </div>\r\n</div>\r\n",
-                // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
-                providers: [
-                    {
-                        provide: NG_VALUE_ACCESSOR,
-                        multi: true,
-                        useExisting: SacStaticFormContainerComponent,
-                    },
-                    {
-                        provide: NG_VALIDATORS,
-                        multi: true,
-                        useExisting: forwardRef(() => SacStaticFormContainerComponent),
-                    },
-                ]
-            },] }
-];
-SacStaticFormContainerComponent.ctorParameters = () => [
-    { type: SacFormLayoutDirective, decorators: [{ type: Host }, { type: Optional }] },
-    { type: Injector }
-];
-
-class SacStaticLabelComponent extends SacStaticLabelCommon {
-    // #region Constructors
-    /**
-     * Constructor
-     * @param formLayout SacFormLayout to define scoped layout settings
-     * @param injector Injector for injecting services
-     */
-    constructor(formLayout, injector) {
-        super(formLayout, injector);
-    }
-}
-SacStaticLabelComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'sac-staticlabel',
-                template: "<div\r\n    class=\"row form-group\"\r\n    [ngClass]=\"componentHeight | toLabelHeight\">\r\n    <label\r\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n        id=\"{{ name }}label\"\r\n        for=\"{{ name }}\"\r\n        class=\"col-xs-12 control-label\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\">\r\n        <span class=\"text\">{{ label }}</span>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [class]=\"HelptextTooltipIcon\"\r\n                style=\"margin-left: 5px\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-xs-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\r\n        <div\r\n            [id]=\"name\"\r\n            class=\"form-control-static\"\r\n            [style.padding-left.px]=\"0\"\r\n            [innerHTML]=\"value\">\r\n        </div>\r\n\r\n        <div\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n            class=\"form-control-static\"\r\n            style=\"margin-left: 5px\">\r\n            <sac-tooltip\r\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n                [tooltiptext]=\"helptext\"\r\n                [inlinemode]=\"true\">\r\n                <span\r\n                    [class]=\"HelptextTooltipIcon\"\r\n                    style=\"margin-left: 5px; margin-right: 5px\">\r\n                </span>\r\n            </sac-tooltip>\r\n        </div>\r\n\r\n        <p\r\n            *ngIf=\"helptextmode === 'text' && helptext\"\r\n            class=\"help-block\">\r\n            {{ helptext }}\r\n        </p>\r\n    </div>\r\n</div>\r\n",
-                // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
-                providers: [
-                    {
-                        provide: NG_VALUE_ACCESSOR,
-                        multi: true,
-                        useExisting: SacStaticLabelComponent,
-                    },
-                    {
-                        provide: NG_VALIDATORS,
-                        multi: true,
-                        useExisting: forwardRef(() => SacStaticLabelComponent),
-                    },
-                ]
-            },] }
-];
-SacStaticLabelComponent.ctorParameters = () => [
-    { type: SacFormLayoutDirective, decorators: [{ type: Host }, { type: Optional }] },
-    { type: Injector }
-];
-
-class SACBootstrap3StaticLabelModule {
-}
-SACBootstrap3StaticLabelModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [SacStaticLabelComponent, SacStaticFormContainerComponent],
-                imports: [
-                    CommonModule,
-                    SACBootstrap3TooltipModule,
-                    SACBootstrap3LayoutModule,
-                ],
-                exports: [SacStaticLabelComponent, SacStaticFormContainerComponent],
-            },] }
-];
-
-class SacTabItemComponent extends SacTabItemCommon {
-}
-SacTabItemComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'sac-tabitem',
-                template: "<div [id]=\"id\" [hidden]=\"unloadwhenhidden === false && active === false\"\r\n     *ngIf=\"(unloadwhenhidden === true && active === true) || unloadwhenhidden === false\" class=\"tab-pane\">\r\n  <ng-template [ngTemplateOutlet]=\"templateRef\"></ng-template>\r\n</div>\r\n\r\n"
-            },] }
-];
-
-class SacTabComponent extends SacTabCommon {
-    tabItems() {
-        return this._tabItems.toArray();
-    }
-}
-SacTabComponent.decorators = [
-    { type: 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"
-            },] }
-];
-SacTabComponent.propDecorators = {
-    _tabItems: [{ type: ContentChildren, args: [SacTabItemComponent,] }]
+class SacListboxComponent extends SacListboxCommon {
+    // #region Constructors
+    /**
+     * Constructor
+     * @param formLayout SacFormLayout to define scoped layout settings
+     * @param injector Injector for injecting services
+     */
+    constructor(formLayout, injector) {
+        super(formLayout, injector);
+    }
+}
+SacListboxComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'sac-listbox',
+                template: "<div\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\n        <div [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n            <select\n                multiple\n                id=\"{{ name }}\"\n                name=\"{{ name }}\"\n                class=\"form-control\"\n                [ngClass]=\"[componentHeight | toControlHeight]\"\n                [size]=\"rowsize\"\n                (blur)=\"onTouch()\"\n                (change)=\"getSelectedItems($event.target)\"\n                [disabled]=\"isdisabled\">\n                <ng-content></ng-content>\n                <ng-container *ngIf=\"groupitems === ''\">\n                    <option\n                        *ngFor=\"let option of options\"\n                        [value]=\"option[optionvalue]\"\n                        [disabled]=\"optionenabled !== '' && option[optionenabled] === false\">\n                        <ng-template *ngTemplateOutlet=\"optionlabeltemplate || defaultItemLabelTemplate; context: { label: option[optionlabel] }\"> </ng-template>\n                    </option>\n                </ng-container>\n                <ng-container *ngIf=\"groupitems !== ''\">\n                    <optgroup\n                        *ngFor=\"let option of options\"\n                        [attr.label]=\"option[grouplabel]\">\n                        <option\n                            *ngFor=\"let item of option[groupitems]\"\n                            [value]=\"item[optionvalue]\"\n                            [disabled]=\"optionenabled !== '' && item[optionenabled] === false\">\n                            <ng-template *ngTemplateOutlet=\"optionlabeltemplate || defaultItemLabelTemplate; context: { label: item[optionlabel] }\"> </ng-template>\n                        </option>\n                    </optgroup>\n                </ng-container>\n            </select>\n\n            <div\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n                class=\"form-control-static\"\n                style=\"margin-left: 5px\">\n                <sac-tooltip\n                    *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                    [tooltiptext]=\"helptext\"\n                    [inlinemode]=\"true\">\n                    <span\n                        [class]=\"HelptextTooltipIcon\"\n                        style=\"margin-left: 5px; margin-right: 5px\">\n                    </span>\n                </sac-tooltip>\n            </div>\n        </div>\n\n        <p\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"help-block\">\n            {{ helptext }}\n        </p>\n\n        <div\n            class=\"help-block help-block-error\"\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n            {{ GetErrorMessage() | async }}\n        </div>\n    </div>\n</div>\n\n<ng-template\n    #defaultItemLabelTemplate\n    let-label=\"label\">\n    {{ label }}\n</ng-template>\n",
+                // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
+                providers: [
+                    {
+                        provide: NG_VALUE_ACCESSOR,
+                        multi: true,
+                        useExisting: SacListboxComponent,
+                    },
+                    {
+                        provide: NG_VALIDATORS,
+                        multi: true,
+                        useExisting: forwardRef(() => SacListboxComponent),
+                    },
+                ]
+            },] }
+];
+SacListboxComponent.ctorParameters = () => [
+    { type: SacFormLayoutDirective, decorators: [{ type: Host }, { type: Optional }] },
+    { type: Injector }
+];
+
+class SACBootstrap3ListModule {
+}
+SACBootstrap3ListModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [
+                    SacDropdownComponent,
+                    SacDropdownOptionDirective,
+                    SacListboxComponent,
+                ],
+                imports: [
+                    CommonModule,
+                    SACCommonListboxOptionModule,
+                    SACBootstrap3TooltipModule,
+                    FormsModule,
+                    SACBootstrap3LayoutModule,
+                ],
+                exports: [
+                    SacDropdownComponent,
+                    SacDropdownOptionDirective,
+                    SacListboxComponent,
+                ],
+            },] }
+];
+
+/**
+ * Component für einbindung eines beliebigen Controls in die Form Struktur
+ *
+ * @example
+ *  <ngStaticFormContainer name='myformcontainer' label="My Custom Form Control" [isrequired]='false'>
+ *      <input type="range" class="form-control" />
+ *  </ngStaticFormContainer>
+ *
+ * @example
+ * <ngStaticFormContainer name='myformcintainer' label="My Custom Form Control" [isrequired]='false' tooltiptext="Dies ist ein Tooltip Text">
+ *     <input type="range" class="form-control" />
+ * </ngStaticFormContainer>
+ *
+ **/
+class SacStaticFormContainerComponent extends SacStaticFormContainerCommon {
+    // #region Constructors
+    /**
+     * Constructor
+     * @param formLayout SacFormLayout to define scoped layout settings
+     * @param injector Injector for injecting services
+     */
+    constructor(formLayout, injector) {
+        super(formLayout, injector);
+    }
+}
+SacStaticFormContainerComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'sac-staticformcontainer',
+                template: "<div\n    class=\"row form-group\"\n    [class.has-error]=\"isinvalid && errormessage\"\n    [ngClass]=\"componentHeight | toLabelHeight\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\n        <div [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n            <ng-content></ng-content>\n\n            <div\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n                class=\"form-control-static\"\n                style=\"margin-left: 5px\">\n                <sac-tooltip\n                    *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                    [tooltiptext]=\"helptext\"\n                    [inlinemode]=\"true\">\n                    <span\n                        [class]=\"HelptextTooltipIcon\"\n                        style=\"margin-left: 5px; margin-right: 5px\">\n                    </span>\n                </sac-tooltip>\n            </div>\n        </div>\n\n        <p\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"help-block\">\n            {{ helptext }}\n        </p>\n\n        <div\n            class=\"help-block help-block-error\"\n            *ngIf=\"isinlineerrorenabled && isinvalid && errormessage\">\n            {{ errormessage }}\n        </div>\n    </div>\n</div>\n",
+                // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
+                providers: [
+                    {
+                        provide: NG_VALUE_ACCESSOR,
+                        multi: true,
+                        useExisting: SacStaticFormContainerComponent,
+                    },
+                    {
+                        provide: NG_VALIDATORS,
+                        multi: true,
+                        useExisting: forwardRef(() => SacStaticFormContainerComponent),
+                    },
+                ]
+            },] }
+];
+SacStaticFormContainerComponent.ctorParameters = () => [
+    { type: SacFormLayoutDirective, decorators: [{ type: Host }, { type: Optional }] },
+    { type: Injector }
+];
+
+class SacStaticLabelComponent extends SacStaticLabelCommon {
+    // #region Constructors
+    /**
+     * Constructor
+     * @param formLayout SacFormLayout to define scoped layout settings
+     * @param injector Injector for injecting services
+     */
+    constructor(formLayout, injector) {
+        super(formLayout, injector);
+    }
+}
+SacStaticLabelComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'sac-staticlabel',
+                template: "<div\n    class=\"row form-group\"\n    [ngClass]=\"componentHeight | toLabelHeight\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n        <div\n            [id]=\"name\"\n            class=\"form-control-static\"\n            [style.padding-left.px]=\"0\"\n            [innerHTML]=\"value\">\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-static\"\n            style=\"margin-left: 5px\">\n            <sac-tooltip\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [class]=\"HelptextTooltipIcon\"\n                    style=\"margin-left: 5px; margin-right: 5px\">\n                </span>\n            </sac-tooltip>\n        </div>\n\n        <p\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"help-block\">\n            {{ helptext }}\n        </p>\n    </div>\n</div>\n",
+                // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
+                providers: [
+                    {
+                        provide: NG_VALUE_ACCESSOR,
+                        multi: true,
+                        useExisting: SacStaticLabelComponent,
+                    },
+                    {
+                        provide: NG_VALIDATORS,
+                        multi: true,
+                        useExisting: forwardRef(() => SacStaticLabelComponent),
+                    },
+                ]
+            },] }
+];
+SacStaticLabelComponent.ctorParameters = () => [
+    { type: SacFormLayoutDirective, decorators: [{ type: Host }, { type: Optional }] },
+    { type: Injector }
+];
+
+class SACBootstrap3StaticLabelModule {
+}
+SACBootstrap3StaticLabelModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [SacStaticLabelComponent, SacStaticFormContainerComponent],
+                imports: [
+                    CommonModule,
+                    SACBootstrap3TooltipModule,
+                    SACBootstrap3LayoutModule,
+                ],
+                exports: [SacStaticLabelComponent, SacStaticFormContainerComponent],
+            },] }
+];
+
+class SacTabItemComponent extends SacTabItemCommon {
+}
+SacTabItemComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'sac-tabitem',
+                template: "<div [id]=\"id\" [hidden]=\"unloadwhenhidden === false && active === false\"\n     *ngIf=\"(unloadwhenhidden === true && active === true) || unloadwhenhidden === false\" class=\"tab-pane\">\n  <ng-template [ngTemplateOutlet]=\"templateRef\"></ng-template>\n</div>\n\n"
+            },] }
+];
+
+class SacTabComponent extends SacTabCommon {
+    tabItems() {
+        return this._tabItems.toArray();
+    }
+}
+SacTabComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'sac-tab',
+                template: "<!-- Nav tabs -->\n<div [id]=\"name\" class=\"content-nav-tabs\">\n  <ul class=\"nav nav-tabs\" role=\"tablist\">\n    <li\n      *ngFor=\"let item of _tabItems\"\n      [ngClass]=\"{ 'active show': item.active, 'disabled': item.disabled }\"\n      (click)=\"selectTab(item)\"\n      [ngStyle]=\"{'cursor': item._disabled ? 'not-allowed' : 'pointer'}\"\n    >\n      <a [id]=\"GetTabItemButtonId(item.id)\" role=\"tab\">\n        <ng-template\n          *ngTemplateOutlet=\"tablabeltemplate || defaultTabLabelTemplate;context:{ label: item.label }\"\n        >\n        </ng-template>\n      </a>\n    </li>\n  </ul>\n</div>\n\n<!-- Tab panes -->\n<div class=\"tab-content\" style=\"margin-top: 15px\">\n  <ng-content></ng-content>\n</div>\n\n<ng-template #defaultTabLabelTemplate let-label=\"label\">\n  {{label}}\n</ng-template>\n"
+            },] }
+];
+SacTabComponent.propDecorators = {
+    _tabItems: [{ type: ContentChildren, args: [SacTabItemComponent,] }]
 };
 
-class SACBootstrap3TabsModule {
-}
-SACBootstrap3TabsModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [SacTabComponent, SacTabItemComponent],
-                imports: [
-                    CommonModule
-                ],
-                exports: [SacTabComponent, SacTabItemComponent]
-            },] }
-];
-
-class SacTinyMceComponent extends SacTinyMceCommon {
-    // #region Constructors
-    /**
-     * Constructor
-     * @param formLayout SacFormLayout to define scoped layout settings
-     * @param injector Injector for injecting services
-     * @param ngZone ngZone to manage external javascripts
-     */
-    constructor(formLayout, injector, ngZone) {
-        super(formLayout, injector, ngZone);
-    }
-    // #endregion Constructors
-    // #region Public Methods
-    /**
-     * overwrite tinymce defaults
-     * @returns boostrap3 does not support file browser
-     */
-    overwriteDefaultSettings() {
-        return { file_picker_types: undefined, file_picker_callback: undefined };
-    }
-}
-SacTinyMceComponent.decorators = [
-    { type: 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    <label\r\n        for=\"{{ name }}\"\r\n        class=\"col-xs-12 control-label\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\r\n        [class.required]=\"isrequired\">\r\n        <span class=\"text\">{{ label }}</span>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [class]=\"HelptextTooltipIcon\"\r\n                style=\"margin-left: 5px\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-xs-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [class.has-error]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n        [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\r\n        <div [style.flex-grow]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 1 : null\">\r\n            <editor\r\n                [id]=\"name + '_tinymce'\"\r\n                [init]=\"_config\"\r\n                [initialValue]=\"value\"\r\n                ngModel\r\n                [ngModelOptions]=\"{ standalone: true }\"\r\n                (ngModelChange)=\"setValue($event)\"\r\n                (onSaveContent)=\"save($event.event.content)\"\r\n                [disabled]=\"disabled\"\r\n                [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\"></editor>\r\n            <p\r\n                *ngIf=\"helptextmode === 'text' && helptext\"\r\n                class=\"help-block\">\r\n                {{ helptext }}\r\n            </p>\r\n            <div\r\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n                class=\"help-block\">\r\n                {{ GetErrorMessage() | async }}\r\n            </div>\r\n        </div>\r\n\r\n        <div\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n            class=\"form-control-static\"\r\n            style=\"margin-left: 5px\">\r\n            <sac-tooltip\r\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n                [tooltiptext]=\"helptext\"\r\n                [inlinemode]=\"true\">\r\n                <span\r\n                    [class]=\"HelptextTooltipIcon\"\r\n                    style=\"margin-left: 5px; margin-right: 5px\">\r\n                </span>\r\n            </sac-tooltip>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<sac-dialog\r\n    *ngIf=\"selectdialogvisible\"\r\n    [allowesc]=\"false\"\r\n    [backdrop]=\"true\"\r\n    [(isvisible)]=\"selectdialogvisible\"\r\n    title=\"{{ lngResourceService.GetString(validationKeyService.TinyMceFileselectDialogtitle) | async }}\"\r\n    size=\"large\"\r\n    height=\"500px\">\r\n    <ng-container dialogbody> </ng-container>\r\n    <ng-container dialogfooter>\r\n        <sac-button\r\n            role=\"primary\"\r\n            [name]=\"name + '_modalOk'\"\r\n            text=\"{{ lngResourceService.GetString(validationKeyService.TinyMceFileselectOk) | async }}\"\r\n            (clicked)=\"setSelectDialogResult()\"></sac-button>\r\n        <sac-button\r\n            [name]=\"name + '_modalClose'\"\r\n            text=\"{{ lngResourceService.GetString(validationKeyService.TinyMceFileselectCancel) | async }}\"\r\n            (clicked)=\"closeSelectDialog()\"></sac-button>\r\n    </ng-container>\r\n</sac-dialog>\r\n",
-                // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
-                providers: [
-                    {
-                        provide: NG_VALUE_ACCESSOR,
-                        multi: true,
-                        useExisting: SacTinyMceComponent,
-                    },
-                    {
-                        provide: NG_VALIDATORS,
-                        useExisting: forwardRef(() => SacTinyMceComponent),
-                        multi: true,
-                    },
-                ]
-            },] }
-];
-SacTinyMceComponent.ctorParameters = () => [
-    { type: SacFormLayoutDirective, decorators: [{ type: Host }, { type: Optional }] },
-    { type: Injector },
-    { type: NgZone }
-];
-
-class SACBootstrap3TinyMceModule {
-}
-SACBootstrap3TinyMceModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [SacTinyMceComponent],
-                imports: [
-                    CommonModule,
-                    FormsModule,
-                    EditorModule,
-                    SACBootstrap3ButtonModule,
-                    SACBootstrap3DialogModule,
-                    SACBootstrap3LayoutModule,
-                    SACBootstrap3TooltipModule,
-                ],
-                exports: [SacTinyMceComponent],
-            },] }
-];
-
-/**
- * Treeview Compomnent
- */
-class SacTreeviewComponent extends SacTreeviewCommon {
-    // #region Constructors
-    /**
-     * Constructor
-     * @param formLayout SacFormLayout to define scoped layout settings
-     * @param injector Component Injector
-     */
-    constructor(formLayout, injector) {
-        super(formLayout, injector);
-    }
-}
-SacTreeviewComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'sac-treeview',
-                template: "<div\r\n    class=\"row mb-3\"\r\n    [class.g-0]=\"disablelabel\"\r\n    [class.has-error]=\"invalid && (dirty || touched)\">\r\n    <label\r\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n        id=\"{{ name }}label\"\r\n        for=\"{{ name }}\"\r\n        class=\"col-xs-12 control-label\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\r\n        [class.required]=\"isrequired\">\r\n        <span class=\"text\">{{ label }}</span>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [class]=\"HelptextTooltipIcon\"\r\n                style=\"margin-left: 5px\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-xs-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [class.has-error]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\r\n        <div [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\r\n            <div [style.width.%]=\"helptextmode === 'tooltip' && helptext && disablelabel ? '100' : null\">\r\n                <table\r\n                    class=\"table table-hover table-condensed\"\r\n                    id=\"{{ name }}\"\r\n                    style=\"table-layout: fixed\"\r\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n                    [class.border]=\"invalid && (dirty || touched)\"\r\n                    [class.border-danger]=\"invalid && (dirty || touched)\">\r\n                    <tbody>\r\n                        <ng-container *ngFor=\"let node of data\">\r\n                            <ng-template\r\n                                [ngTemplateOutlet]=\"treeItem\"\r\n                                [ngTemplateOutletContext]=\"{ node: node, deep: 0, path: '', textpath: '' }\">\r\n                            </ng-template>\r\n                        </ng-container>\r\n                    </tbody>\r\n                </table>\r\n\r\n                <div\r\n                    *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n                    class=\"help-block\">\r\n                    {{ GetErrorMessage() | async }}\r\n                </div>\r\n\r\n                <p\r\n                    *ngIf=\"helptextmode === 'text' && helptext\"\r\n                    class=\"help-block\">\r\n                    {{ helptext }}\r\n                </p>\r\n            </div>\r\n\r\n            <div\r\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n                class=\"form-control-static\"\r\n                style=\"margin-left: 5px\">\r\n                <sac-tooltip\r\n                    *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n                    [tooltiptext]=\"helptext\"\r\n                    [inlinemode]=\"true\">\r\n                    <span\r\n                        [class]=\"HelptextTooltipIcon\"\r\n                        style=\"margin-left: 5px; margin-right: 5px\">\r\n                    </span>\r\n                </sac-tooltip>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n<ng-template\r\n    #treeItem\r\n    let-node=\"node\"\r\n    let-deep=\"deep\"\r\n    let-path=\"path\"\r\n    let-textpath=\"textpath\">\r\n    <tr\r\n        [class.active]=\"isSelectedState(node)\"\r\n        attr.data-path=\"{{ path }}/{{ getStringField(node, attrid) }}\"\r\n        attr.data-textpath=\"{{ textpath }}/{{ getStringField(node, attrlabel) }}\">\r\n        <td>\r\n            <div\r\n                class=\"py-1 px-2 d-flex align-items-center\"\r\n                style=\"display: flex; flex-direction: row; cursor: pointer; align-items: center\"\r\n                (mouseenter)=\"setHoverState(node, true)\"\r\n                (mouseleave)=\"setHoverState(node, false)\">\r\n                <div\r\n                    style=\"margin-right: 15px\"\r\n                    *ngFor=\"let i of count(deep)\">\r\n                </div>\r\n\r\n                <div\r\n                    (click)=\"onNodeClicked(node)\"\r\n                    *ngIf=\"expandedstate === 'true' || expandedstate === true\"\r\n                    style=\"margin-right: 15px\"\r\n                    [ngClass]=\"!hasChildren(node) ? iconFolderEmpty : !isExpandedState(node) ? iconFolderCollabsed : isExpandedState(node) ? iconFolderOpen : ''\">\r\n                </div>\r\n\r\n                <div\r\n                    (click)=\"onNodeClicked(node)\"\r\n                    *ngIf=\"attricon && getStringField(node, attricon)\">\r\n                    <ng-template\r\n                        [ngTemplateOutlet]=\"templateicon || defaultTemplateIcon\"\r\n                        [ngTemplateOutletContext]=\"{ node: node }\">\r\n                    </ng-template>\r\n                </div>\r\n\r\n                <div\r\n                    (click)=\"onNodeClicked(node)\"\r\n                    style=\"padding-top: 7px; padding-bottom: 7px; flex-grow: 1\"\r\n                    [style.max-width.%]=\"enableellipsis ? '100' : null\"\r\n                    [style.overflow]=\"enableellipsis ? 'hidden' : null\"\r\n                    [style.text-overflow]=\"enableellipsis ? 'ellipsis' : null\"\r\n                    [style.white-space]=\"enableellipsis ? 'nowrap' : null\">\r\n                    <ng-template\r\n                        [ngTemplateOutlet]=\"templatelabel || defaultTemplateLabel\"\r\n                        [ngTemplateOutletContext]=\"{ node: node, label: getStringField(node, attrlabel) }\">\r\n                    </ng-template>\r\n                </div>\r\n\r\n                <div\r\n                    (click)=\"setSelectedState(node)\"\r\n                    style=\"flex-shrink: 0\"\r\n                    *ngIf=\"!isDisabledState(node) && (showactionalways || isSelectedState(node) || isHoverState(node))\">\r\n                    <ng-template\r\n                        [ngTemplateOutlet]=\"templateaction || defaultTemplateAction\"\r\n                        [ngTemplateOutletContext]=\"{ node: node, actionhandler: onActionClicked.bind(this) }\">\r\n                    </ng-template>\r\n                </div>\r\n            </div>\r\n        </td>\r\n    </tr>\r\n    <ng-container *ngIf=\"isExpandedState(node)\">\r\n        <ng-template\r\n            *ngFor=\"let child of getChildren(node)\"\r\n            [ngTemplateOutlet]=\"treeItem\"\r\n            [ngTemplateOutletContext]=\"{\r\n                node: child,\r\n                deep: deep + 1,\r\n                path: path + '/' + getStringField(node, attrid),\r\n                textpath: textpath + '/' + getStringField(node, attrlabel)\r\n            }\">\r\n        </ng-template>\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<ng-template\r\n    #defaultTemplateLabel\r\n    let-label=\"label\"\r\n    let-node=\"node\">\r\n    <span [title]=\"label\">\r\n        {{ label }}\r\n    </span>\r\n</ng-template>\r\n\r\n<ng-template\r\n    #defaultTemplateIcon\r\n    let-node=\"node\">\r\n    <div\r\n        style=\"margin-right: 15px\"\r\n        [ngClass]=\"getStringField(node, attricon)\">\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template\r\n    #defaultTemplateAction\r\n    let-node=\"node\"\r\n    let-actionhandler=\"actionhandler\">\r\n    <a\r\n        class=\"btn btn-link text-secondary\"\r\n        (click)=\"actionhandler({ action: 'default', node: node })\">\r\n        <i [class]=\"iconAction\"></i>\r\n    </a>\r\n</ng-template>\r\n",
-                providers: [
-                    {
-                        provide: NG_VALUE_ACCESSOR,
-                        multi: true,
-                        useExisting: SacTreeviewComponent,
-                    },
-                    {
-                        provide: NG_VALIDATORS,
-                        useExisting: forwardRef(() => SacTreeviewComponent),
-                        multi: true,
-                    },
-                ]
-            },] }
-];
-SacTreeviewComponent.ctorParameters = () => [
-    { type: SacFormLayoutDirective, decorators: [{ type: Host }, { type: Optional }] },
-    { type: Injector }
-];
-
-class SACBootstrap3TreeviewModule {
-}
-SACBootstrap3TreeviewModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [SacTreeviewComponent],
-                imports: [CommonModule, SACBootstrap3TooltipModule, SACBootstrap3LayoutModule, SACBootstrap3ContextmenuModule],
-                exports: [SacTreeviewComponent],
-            },] }
-];
-
-/**
- * Dropzone Komponente für mehrere Uploads
- * @see https://github.com/kukhariev/ngx-uploadx/
- */
-class SacDropzoneMultipleComponent extends SacDropzoneMultipleCommon {
-    // #region Constructors
-    /**
-     * Constructor
-     * @param formLayout SacFormLayout to define scoped layout settings
-     * @param injector Injector for injecting services
-     * @param renderer Angular rendering engine
-     * @param ngZone ngZone to manage external javascripts
-     */
-    constructor(formLayout, injector, renderer, ngZone) {
-        super(formLayout, injector, renderer, ngZone);
-    }
-    // #endregion Constructors
-    // #region Public Methods
-    /**
-     * Initialisiert das Control
-     */
-    ngOnInit() {
-        super.ngOnInit();
-    }
-}
-SacDropzoneMultipleComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'sac-dropzonemultiple',
-                template: "<div\r\n    id=\"{{ name }}\"\r\n    class=\"row form-group\"\r\n    [class.has-error]=\"invalid && (dirty || touched)\"\r\n    [ngClass]=\"componentHeight | toLabelHeight\">\r\n    <label\r\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n        id=\"{{ name }}label\"\r\n        for=\"{{ name }}_uploadinput\"\r\n        class=\"col-xs-12 control-label\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\r\n        [class.required]=\"isrequired\">\r\n        <span class=\"text\">{{ label }}</span>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [class]=\"HelptextTooltipIcon\"\r\n                style=\"margin-left: 5px\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-xs-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\r\n        <div [style.flex-grow]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 1 : null\">\r\n            <div\r\n                class=\"img-rounded dropzone control-label\"\r\n                (drop)=\"dropHandler($event)\"\r\n                (dragover)=\"onDragOver($event)\"\r\n                (dragleave)=\"onDragLeave($event)\"\r\n                [class.active]=\"active\"\r\n                [style.min-height]=\"uploadheight\"\r\n                [class.is-invalid]=\"invalid && (dirty || touched)\">\r\n                <div\r\n                    class=\"content\"\r\n                    *ngIf=\"uploads.length === 0\">\r\n                    <div>\r\n                        <div [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\r\n                            <ng-content></ng-content>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div *ngIf=\"uploads.length > 0\">\r\n                    <div>\r\n                        <div\r\n                            class=\"dropzone-uploadstates\"\r\n                            [class.mt-1]=\"i > 0\"\r\n                            *ngFor=\"let file of uploads; let i = index\">\r\n                            <div\r\n                                class=\"input-group upload-component upload-component-multiple\"\r\n                                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n                                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\r\n                                <div class=\"form-control upload-progress border-secondary\">\r\n                                    <div class=\"progress\">\r\n                                        <div\r\n                                            class=\"progress-bar\"\r\n                                            [class.progress-bar-success]=\"file.progress === 100\"\r\n                                            role=\"progressbar\"\r\n                                            [attr.aria-valuenow]=\"file.progress\"\r\n                                            aria-valuemin=\"0\"\r\n                                            aria-valuemax=\"100\"\r\n                                            [style.width.%]=\"file.progress\">\r\n                                            <span class=\"progress-text\">{{ file.name }}</span>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"input-group-btn\">\r\n                                    <!-- image-preview-clear button -->\r\n                                    <a\r\n                                        class=\"btn\"\r\n                                        (click)=\"cancel(file.uploadId)\"\r\n                                        [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n                                        [class.btn-danger]=\"invalid && (dirty || touched)\">\r\n                                        <span [class]=\"IconDelete\"></span>\r\n                                    </a>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <input\r\n                    #files\r\n                    multiple\r\n                    id=\"{{ name }}_uploadinput\"\r\n                    type=\"file\"\r\n                    class=\"custom-file-input\"\r\n                    (click)=\"files.value = ''\"\r\n                    (uploadxState)=\"onUpload($event)\"\r\n                    [disabled]=\"HasQueueItem()\" />\r\n            </div>\r\n            <small\r\n                *ngIf=\"helptextmode === 'text' && helptext\"\r\n                class=\"help-block\">\r\n                {{ helptext }}\r\n            </small>\r\n            <div\r\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n                class=\"help-block help-block-error\">\r\n                {{ GetErrorMessage() | async }}\r\n            </div>\r\n        </div>\r\n\r\n        <div\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n            class=\"form-control-static\"\r\n            style=\"margin-left: 5px\">\r\n            <sac-tooltip\r\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n                [tooltiptext]=\"helptext\"\r\n                [inlinemode]=\"true\">\r\n                <span\r\n                    [class]=\"HelptextTooltipIcon\"\r\n                    style=\"margin-left: 5px; margin-right: 5px\">\r\n                </span>\r\n            </sac-tooltip>\r\n        </div>\r\n    </div>\r\n</div>\r\n",
-                providers: [
-                    {
-                        provide: NG_VALUE_ACCESSOR,
-                        multi: true,
-                        useExisting: SacDropzoneMultipleComponent,
-                    },
-                    {
-                        provide: NG_VALIDATORS,
-                        multi: true,
-                        useExisting: forwardRef(() => SacDropzoneMultipleComponent),
-                    },
-                ],
-                styles: [".upload-component .upload-input{position:relative}.upload-component .custom-file>i{margin-right:15px}.upload-component .custom-file .custom-file-input{bottom:0;display:inline-block;left:0;margin:0;opacity:0;overflow:hidden;position:absolute;right:0;top:0;width:100%;z-index:2}.upload-component.upload-multiple .upload-progress .progress{border-bottom-right-radius:0;border-top-right-radius:0}.upload-component.upload-single .upload-progress .progress{border-radius:0}.upload-component .upload-progress{padding:0}.upload-component .upload-progress .progress{height:100%}.upload-component .upload-progress .progress .progress-text{color:#000;display:table-cell;height:34px;left:0;line-height:34px;position:absolute;right:0;top:50%;transform:translateY(-50%)}.dropzone{border-style:dashed;border-width:2px;min-height:120px;padding-bottom:50px;padding-top:50px;position:relative;text-align:center;width:100%}.dropzone.active{background-color:#add8e6}.dropzone .progress{border-radius:0}.dropzone .progress .progress-bar{border-bottom-right-radius:0;border-top-right-radius:0;display:flex;flex-direction:column;justify-content:center;text-align:center}.dropzone .progress .progress-bar .progress-text{color:#000;display:table-cell;height:34px;left:0;line-height:34px;position:absolute;right:0;top:50%;transform:translateY(-50%)}.dropzone input[type=file]{bottom:0;left:0;opacity:0;position:absolute;right:0;top:0;width:100%}.dropzone .dropzone-uploadstates{margin-left:auto;margin-right:auto;margin-top:6px;max-width:450px;width:80%}"]
-            },] }
-];
-SacDropzoneMultipleComponent.ctorParameters = () => [
-    { type: SacFormLayoutDirective, decorators: [{ type: Host }, { type: Optional }] },
-    { type: Injector },
-    { type: Renderer2 },
-    { type: NgZone }
-];
-
-/**
- * Dropzone Komponente für den Upload eines Files
- * @see https://github.com/kukhariev/ngx-uploadx/
- */
-class SacDropzoneSingleComponent extends SacDropzoneSingleCommon {
-    // #region Constructors
-    /**
-     * Constructor
-     * @param formLayout SacFormLayout to define scoped layout settings
-     * @param injector Injector for injecting services
-     * @param renderer Angular rendering engine
-     * @param ngZone ngZone to manage external javascripts
-     */
-    constructor(formLayout, injector, renderer, ngZone) {
-        super(formLayout, injector, renderer, ngZone);
-    }
-    // #endregion Constructors
-    // #region Public Methods
-    /**
-     * Initialisiert das Control
-     */
-    ngOnInit() {
-        super.ngOnInit();
-    }
-}
-SacDropzoneSingleComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'sac-dropzonesingle',
-                template: "<div\r\n    id=\"{{ name }}\"\r\n    class=\"row form-group\"\r\n    [class.has-error]=\"invalid && (dirty || touched)\"\r\n    [ngClass]=\"componentHeight | toLabelHeight\">\r\n    <label\r\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n        id=\"{{ name }}label\"\r\n        for=\"{{ name }}_uploadinput\"\r\n        class=\"col-xs-12 control-label\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\r\n        [class.required]=\"isrequired\">\r\n        <span class=\"text\">{{ label }}</span>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [class]=\"HelptextTooltipIcon\"\r\n                style=\"margin-left: 5px\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-xs-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\r\n        <div [style.flex-grow]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 1 : null\">\r\n            <div\r\n                class=\"img-rounded dropzone control-label\"\r\n                (drop)=\"dropHandler($event)\"\r\n                (dragover)=\"onDragOver($event)\"\r\n                (dragleave)=\"onDragLeave($event)\"\r\n                [style.min-height]=\"uploadheight\"\r\n                [class.active]=\"active\"\r\n                [class.is-invalid]=\"invalid && (dirty || touched)\">\r\n                <div\r\n                    class=\"content\"\r\n                    *ngIf=\"uploads.length === 0\">\r\n                    <div>\r\n                        <div [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\r\n                            <ng-content></ng-content>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div *ngIf=\"uploads.length > 0\">\r\n                    <div>\r\n                        <div\r\n                            class=\"dropzone-uploadstates\"\r\n                            *ngFor=\"let file of uploads\">\r\n                            <div\r\n                                class=\"input-group upload-component upload-component-multiple\"\r\n                                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n                                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\r\n                                <div class=\"form-control upload-progress\">\r\n                                    <div class=\"progress\">\r\n                                        <div\r\n                                            class=\"progress-bar\"\r\n                                            [class.progress-bar-success]=\"file.progress === 100\"\r\n                                            role=\"progressbar\"\r\n                                            [attr.aria-valuenow]=\"file.progress\"\r\n                                            aria-valuemin=\"0\"\r\n                                            aria-valuemax=\"100\"\r\n                                            [style.width.%]=\"file.progress\">\r\n                                            <span class=\"progress-text\">{{ file.name }}</span>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"input-group-btn\">\r\n                                    <!-- image-preview-clear button -->\r\n                                    <a\r\n                                        class=\"btn\"\r\n                                        (click)=\"cancel(file.uploadId)\"\r\n                                        [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n                                        [class.btn-danger]=\"invalid && (dirty || touched)\">\r\n                                        <span [class]=\"IconDelete\"></span>\r\n                                    </a>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <input\r\n                    #files\r\n                    id=\"{{ name }}_uploadinput\"\r\n                    type=\"file\"\r\n                    class=\"custom-file-input\"\r\n                    (click)=\"files.value = ''\"\r\n                    (uploadxState)=\"onUpload($event)\"\r\n                    [disabled]=\"HasQueueItem()\" />\r\n            </div>\r\n            <small\r\n                *ngIf=\"helptextmode === 'text' && helptext\"\r\n                class=\"help-block\">\r\n                {{ helptext }}\r\n            </small>\r\n            <div\r\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n                class=\"help-block help-block-error\">\r\n                {{ GetErrorMessage() | async }}\r\n            </div>\r\n        </div>\r\n\r\n        <div\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n            class=\"form-control-static\"\r\n            style=\"margin-left: 5px\">\r\n            <sac-tooltip\r\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n                [tooltiptext]=\"helptext\"\r\n                [inlinemode]=\"true\">\r\n                <span\r\n                    [class]=\"HelptextTooltipIcon\"\r\n                    style=\"margin-left: 5px; margin-right: 5px\">\r\n                </span>\r\n            </sac-tooltip>\r\n        </div>\r\n    </div>\r\n</div>\r\n",
-                providers: [
-                    {
-                        provide: NG_VALUE_ACCESSOR,
-                        multi: true,
-                        useExisting: SacDropzoneSingleComponent,
-                    },
-                    {
-                        provide: NG_VALIDATORS,
-                        multi: true,
-                        useExisting: forwardRef(() => SacDropzoneSingleComponent),
-                    },
-                ],
-                styles: [".upload-component .upload-input{position:relative}.upload-component .custom-file>i{margin-right:15px}.upload-component .custom-file .custom-file-input{bottom:0;display:inline-block;left:0;margin:0;opacity:0;overflow:hidden;position:absolute;right:0;top:0;width:100%;z-index:2}.upload-component.upload-multiple .upload-progress .progress{border-bottom-right-radius:0;border-top-right-radius:0}.upload-component.upload-single .upload-progress .progress{border-radius:0}.upload-component .upload-progress{padding:0}.upload-component .upload-progress .progress{height:100%}.upload-component .upload-progress .progress .progress-text{color:#000;display:table-cell;height:34px;left:0;line-height:34px;position:absolute;right:0;top:50%;transform:translateY(-50%)}.dropzone{border-style:dashed;border-width:2px;min-height:120px;padding-bottom:50px;padding-top:50px;position:relative;text-align:center;width:100%}.dropzone.active{background-color:#add8e6}.dropzone .progress{border-radius:0}.dropzone .progress .progress-bar{border-bottom-right-radius:0;border-top-right-radius:0;display:flex;flex-direction:column;justify-content:center;text-align:center}.dropzone .progress .progress-bar .progress-text{color:#000;display:table-cell;height:34px;left:0;line-height:34px;position:absolute;right:0;top:50%;transform:translateY(-50%)}.dropzone input[type=file]{bottom:0;left:0;opacity:0;position:absolute;right:0;top:0;width:100%}.dropzone .dropzone-uploadstates{margin-left:auto;margin-right:auto;margin-top:6px;max-width:450px;width:80%}"]
-            },] }
-];
-SacDropzoneSingleComponent.ctorParameters = () => [
-    { type: SacFormLayoutDirective, decorators: [{ type: Host }, { type: Optional }] },
-    { type: Injector },
-    { type: Renderer2 },
-    { type: NgZone }
-];
-
-// https://github.com/kukhariev/ngx-uploadx/
-class SacUploadComponent extends SacUploadSingleCommon {
-    // #region Constructors
-    /**
-     * Constructor
-     * @param formLayout SacFormLayout to define scoped layout settings
-     * @param injector Injector for injecting services
-     * @param renderer Angular rendering engine
-     * @param ngZone ngZone to manage external javascripts
-     */
-    constructor(formLayout, injector, renderer, ngZone) {
-        super(formLayout, injector, renderer, ngZone);
-    }
-}
-SacUploadComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'sac-upload',
-                template: "<div\r\n    id=\"{{ name }}\"\r\n    class=\"row form-group\"\r\n    [class.has-error]=\"invalid && (dirty || touched)\"\r\n    [ngClass]=\"componentHeight | toLabelHeight\">\r\n    <label\r\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n        id=\"{{ name }}label\"\r\n        for=\"{{ name }}_uploadinput\"\r\n        class=\"col-xs-12 control-label\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\r\n        [class.required]=\"isrequired\">\r\n        <span class=\"text\">{{ label }}</span>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [class]=\"HelptextTooltipIcon\"\r\n                style=\"margin-left: 5px\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-xs-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\r\n        [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\r\n        <div [style.flex-grow]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 1 : null\">\r\n            <div\r\n                class=\"input-group upload-component upload-single\"\r\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\r\n                <div class=\"input-group-btn\">\r\n                    <!-- image-preview-input -->\r\n                    <div\r\n                        class=\"btn upload-input custom-file\"\r\n                        [class.disabled]=\"HasQueueItem()\"\r\n                        [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n                        [class.btn-danger]=\"invalid && (dirty || touched)\">\r\n                        <i [class]=\"IconBrowse\"></i>\r\n                        <span class=\"upload-browse\">{{ lngResourceService.GetString(validationKeyService.UploadButtonBrowse) | async }}</span>\r\n                        <input\r\n                            id=\"{{ name }}_uploadinput\"\r\n                            type=\"file\"\r\n                            class=\"custom-file-input\"\r\n                            #files\r\n                            (click)=\"files.value = ''\"\r\n                            (uploadxState)=\"onUpload($event)\"\r\n                            multiple\r\n                            [disabled]=\"HasQueueItem()\" />\r\n                    </div>\r\n                </div>\r\n                <div class=\"form-control upload-progress\">\r\n                    <div class=\"progress\">\r\n                        <div\r\n                            class=\"progress-bar\"\r\n                            [class.progress-bar-success]=\"Progress() === 100\"\r\n                            role=\"progressbar\"\r\n                            [attr.aria-valuenow]=\"Progress()\"\r\n                            aria-valuemin=\"0\"\r\n                            aria-valuemax=\"100\"\r\n                            [style.width.%]=\"Progress()\">\r\n                            <span class=\"progress-text text-dark\">{{ Filename() | async }}</span>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"input-group-btn\">\r\n                    <!-- image-preview-clear button -->\r\n                    <a\r\n                        class=\"btn\"\r\n                        (click)=\"cancelAll()\"\r\n                        [attr.disabled]=\"HasQueueItem() === false ? 'disabled' : null\"\r\n                        [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n                        [class.btn-danger]=\"invalid && (dirty || touched)\">\r\n                        <span [class]=\"IconDelete\"></span>\r\n                    </a>\r\n                    <a\r\n                        *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && IsPaused() === false)\"\r\n                        class=\"btn\"\r\n                        (click)=\"pauseAll()\"\r\n                        [attr.disabled]=\"IsUploading() === false ? 'disabled' : null\"\r\n                        [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n                        [class.btn-danger]=\"invalid && (dirty || touched)\">\r\n                        <span [class]=\"IconPause\"></span>\r\n                    </a>\r\n                    <a\r\n                        *ngIf=\"autoupload && enablepause && IsPaused()\"\r\n                        class=\"btn\"\r\n                        (click)=\"uploadAll()\"\r\n                        [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n                        [class.btn-danger]=\"invalid && (dirty || touched)\">\r\n                        <span [class]=\"IconContinue\"></span>\r\n                    </a>\r\n                    <a\r\n                        *ngIf=\"autoupload === false\"\r\n                        class=\"btn\"\r\n                        (click)=\"uploadAll()\"\r\n                        [attr.disabled]=\"IsStateToUpload() === false ? 'disabled' : null\"\r\n                        [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n                        [class.btn-danger]=\"invalid && (dirty || touched)\">\r\n                        <span [class]=\"IconUpload\"></span> {{ lngResourceService.GetString(validationKeyService.UploadButtonUpload) | async }}\r\n                    </a>\r\n                </div>\r\n            </div>\r\n\r\n            <p\r\n                *ngIf=\"helptextmode === 'text' && helptext\"\r\n                class=\"help-block\">\r\n                {{ helptext }}\r\n            </p>\r\n\r\n            <div\r\n                class=\"help-block help-block-error\"\r\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\r\n                {{ GetErrorMessage() | async }}\r\n            </div>\r\n        </div>\r\n\r\n        <div\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n            class=\"form-control-static\"\r\n            style=\"margin-left: 5px\">\r\n            <sac-tooltip\r\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n                [tooltiptext]=\"helptext\"\r\n                [inlinemode]=\"true\">\r\n                <span\r\n                    [class]=\"HelptextTooltipIcon\"\r\n                    style=\"margin-left: 5px; margin-right: 5px\">\r\n                </span>\r\n            </sac-tooltip>\r\n        </div>\r\n    </div>\r\n</div>\r\n",
-                providers: [
-                    {
-                        provide: NG_VALUE_ACCESSOR,
-                        multi: true,
-                        useExisting: SacUploadComponent,
-                    },
-                    {
-                        provide: NG_VALIDATORS,
-                        multi: true,
-                        useExisting: forwardRef(() => SacUploadComponent),
-                    },
-                ],
-                styles: [".upload-component .upload-input{position:relative}.upload-component .custom-file>i{margin-right:15px}.upload-component .custom-file .custom-file-input{bottom:0;display:inline-block;left:0;margin:0;opacity:0;overflow:hidden;position:absolute;right:0;top:0;width:100%;z-index:2}.upload-component.upload-multiple .upload-progress .progress{border-bottom-right-radius:0;border-top-right-radius:0}.upload-component.upload-single .upload-progress .progress{border-radius:0}.upload-component .upload-progress{padding:0}.upload-component .upload-progress .progress{height:100%}.upload-component .upload-progress .progress .progress-text{color:#000;display:table-cell;height:34px;left:0;line-height:34px;position:absolute;right:0;top:50%;transform:translateY(-50%)}.dropzone{border-style:dashed;border-width:2px;min-height:120px;padding-bottom:50px;padding-top:50px;position:relative;text-align:center;width:100%}.dropzone.active{background-color:#add8e6}.dropzone .progress{border-radius:0}.dropzone .progress .progress-bar{border-bottom-right-radius:0;border-top-right-radius:0;display:flex;flex-direction:column;justify-content:center;text-align:center}.dropzone .progress .progress-bar .progress-text{color:#000;display:table-cell;height:34px;left:0;line-height:34px;position:absolute;right:0;top:50%;transform:translateY(-50%)}.dropzone input[type=file]{bottom:0;left:0;opacity:0;position:absolute;right:0;top:0;width:100%}.dropzone .dropzone-uploadstates{margin-left:auto;margin-right:auto;margin-top:6px;max-width:450px;width:80%}"]
-            },] }
-];
-SacUploadComponent.ctorParameters = () => [
-    { type: SacFormLayoutDirective, decorators: [{ type: Host }, { type: Optional }] },
-    { type: Injector },
-    { type: Renderer2 },
-    { type: NgZone }
-];
-
-// https://github.com/kukhariev/ngx-uploadx/
-class SacUploadMultipleComponent extends SacUploadMultipleCommon {
-    // #region Constructors
-    /**
-     * Constructor
-     * @param formLayout SacFormLayout to define scoped layout settings
-     * @param injector Injector for injecting services
-     * @param renderer Angular rendering engine
-     * @param ngZone ngZone to manage external javascripts
-     */
-    constructor(formLayout, injector, renderer, ngZone) {
-        super(formLayout, injector, renderer, ngZone);
-    }
-}
-SacUploadMultipleComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'sac-uploadmultiple',
-                template: "<div\r\n    id=\"{{ name }}\"\r\n    class=\"row form-group\"\r\n    [class.has-error]=\"invalid && (dirty || touched)\"\r\n    [ngClass]=\"componentHeight | toLabelHeight\">\r\n    <label\r\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n        id=\"{{ name }}label\"\r\n        for=\"{{ name }}_uploadinput\"\r\n        class=\"col-xs-12 control-label\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\r\n        [class.required]=\"isrequired\">\r\n        <span class=\"text\">{{ label }}</span>\r\n        <sac-tooltip\r\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n            [tooltiptext]=\"helptext\"\r\n            [inlinemode]=\"true\">\r\n            <span\r\n                [class]=\"HelptextTooltipIcon\"\r\n                style=\"margin-left: 5px\">\r\n            </span>\r\n        </sac-tooltip>\r\n    </label>\r\n    <div\r\n        class=\"col-xs-12\"\r\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\r\n        <div class=\"upload-component\">\r\n            <div class=\"row\">\r\n                <div\r\n                    class=\"col-xs-12\"\r\n                    [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\r\n                    <div\r\n                        class=\"btn-group\"\r\n                        [class.btn-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n                        [class.btn-group-lg]=\"componentHeight === ControlHeight.Large\">\r\n                        <div\r\n                            class=\"btn upload-input custom-file\"\r\n                            [class.disabled]=\"maxfiles > 0 && uploads.length >= maxfiles\"\r\n                            [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n                            [class.btn-danger]=\"invalid && (dirty || touched)\">\r\n                            <i [class]=\"IconBrowse\"></i>\r\n                            <span class=\"upload-browse\">Browse</span>\r\n                            <input\r\n                                id=\"{{ name }}_uploadinput\"\r\n                                type=\"file\"\r\n                                class=\"custom-file-input\"\r\n                                #files\r\n                                (click)=\"files.value = ''\"\r\n                                (uploadxState)=\"onUpload($event)\"\r\n                                multiple\r\n                                [disabled]=\"maxfiles > 0 && uploads.length >= maxfiles\" />\r\n                        </div>\r\n\r\n                        <div\r\n                            class=\"btn-group\"\r\n                            [class.btn-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n                            [class.btn-group-lg]=\"componentHeight === ControlHeight.Large\">\r\n                            <!-- image-preview-clear button -->\r\n                            <a\r\n                                class=\"btn\"\r\n                                (click)=\"cancelAll()\"\r\n                                [attr.disabled]=\"HasQueueItem() === false ? 'disabled' : null\"\r\n                                [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n                                [class.btn-danger]=\"invalid && (dirty || touched)\">\r\n                                <span [class]=\"IconDelete\"></span>\r\n                            </a>\r\n                            <a\r\n                                *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && IsPaused() === false)\"\r\n                                class=\"btn\"\r\n                                (click)=\"pauseAll()\"\r\n                                [attr.disabled]=\"IsUploading() === false ? 'disabled' : null\"\r\n                                [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n                                [class.btn-danger]=\"invalid && (dirty || touched)\">\r\n                                <span [class]=\"IconPause\"></span>\r\n                            </a>\r\n                            <a\r\n                                *ngIf=\"autoupload && enablepause && IsPaused() === true\"\r\n                                class=\"btn\"\r\n                                (click)=\"uploadAll()\"\r\n                                [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n                                [class.btn-danger]=\"invalid && (dirty || touched)\">\r\n                                <span [class]=\"IconContinue\"></span>\r\n                            </a>\r\n                            <a\r\n                                *ngIf=\"autoupload === false\"\r\n                                class=\"btn\"\r\n                                (click)=\"uploadAll()\"\r\n                                [attr.disabled]=\"IsStateToUpload() === false ? 'disabled' : null\"\r\n                                [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n                                [class.btn-danger]=\"invalid && (dirty || touched)\">\r\n                                <span [class]=\"IconUpload\"></span> {{ lngResourceService.GetString(validationKeyService.UploadButtonUpload) | async }}\r\n                            </a>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div\r\n                        *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\r\n                        class=\"form-control-static\"\r\n                        style=\"margin-left: 5px\">\r\n                        <sac-tooltip\r\n                            *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n                            [tooltiptext]=\"helptext\"\r\n                            [inlinemode]=\"true\">\r\n                            <span\r\n                                [class]=\"HelptextTooltipIcon\"\r\n                                style=\"margin-left: 5px; margin-right: 5px\">\r\n                            </span>\r\n                        </sac-tooltip>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <div\r\n                *ngFor=\"let file of uploads\"\r\n                style=\"margin-top: 5px\">\r\n                <div\r\n                    class=\"input-group upload-component upload-multiple\"\r\n                    [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n                    [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\r\n                    <div class=\"form-control upload-progress\">\r\n                        <div class=\"progress\">\r\n                            <div\r\n                                class=\"progress-bar\"\r\n                                [class.progress-bar-success]=\"file.progress === 100\"\r\n                                role=\"progressbar\"\r\n                                [attr.aria-valuenow]=\"file.progress\"\r\n                                aria-valuemin=\"0\"\r\n                                aria-valuemax=\"100\"\r\n                                [style.width.%]=\"file.progress\">\r\n                                <span class=\"progress-text text-dark\">{{ file.name }}</span>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div\r\n                        class=\"input-group-btn\"\r\n                        [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n                        [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\r\n                        <!-- image-preview-clear button -->\r\n                        <a\r\n                            class=\"btn\"\r\n                            (click)=\"cancel(file.uploadId)\"\r\n                            [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n                            [class.btn-danger]=\"invalid && (dirty || touched)\">\r\n                            <span [class]=\"IconDelete\"></span>\r\n                        </a>\r\n                        <a\r\n                            *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && file.status !== 'paused')\"\r\n                            class=\"btn\"\r\n                            (click)=\"pause(file.uploadId)\"\r\n                            [attr.disabled]=\"file.status !== 'uploading' ? 'disabled' : null\"\r\n                            [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n                            [class.btn-danger]=\"invalid && (dirty || touched)\">\r\n                            <span [class]=\"IconPause\"></span>\r\n                        </a>\r\n                        <a\r\n                            *ngIf=\"autoupload && enablepause && file.status === 'paused'\"\r\n                            class=\"btn\"\r\n                            (click)=\"upload(file.uploadId)\"\r\n                            [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n                            [class.btn-danger]=\"invalid && (dirty || touched)\">\r\n                            <span [class]=\"IconContinue\"></span>\r\n                        </a>\r\n                        <a\r\n                            *ngIf=\"autoupload === false\"\r\n                            class=\"btn\"\r\n                            (click)=\"upload(file.uploadId)\"\r\n                            [attr.disabled]=\"file.status !== 'added' && file.status !== 'paused' ? 'disabled' : null\"\r\n                            [class.btn-default]=\"!(invalid && (dirty || touched))\"\r\n                            [class.btn-danger]=\"invalid && (dirty || touched)\">\r\n                            <span [class]=\"IconUpload\"></span> {{ lngResourceService.GetString(validationKeyService.UploadButtonUpload) | async }}\r\n                        </a>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <p\r\n            *ngIf=\"helptextmode === 'text' && helptext\"\r\n            class=\"help-block\">\r\n            {{ helptext }}\r\n        </p>\r\n        <div\r\n            class=\"help-block help-block-error\"\r\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\r\n            {{ GetErrorMessage() | async }}\r\n        </div>\r\n    </div>\r\n</div>\r\n",
-                providers: [
-                    {
-                        provide: NG_VALUE_ACCESSOR,
-                        multi: true,
-                        useExisting: SacUploadMultipleComponent,
-                    },
-                    {
-                        provide: NG_VALIDATORS,
-                        multi: true,
-                        useExisting: forwardRef(() => SacUploadMultipleComponent),
-                    },
-                ],
-                styles: [".upload-component .upload-input{position:relative}.upload-component .custom-file>i{margin-right:15px}.upload-component .custom-file .custom-file-input{bottom:0;display:inline-block;left:0;margin:0;opacity:0;overflow:hidden;position:absolute;right:0;top:0;width:100%;z-index:2}.upload-component.upload-multiple .upload-progress .progress{border-bottom-right-radius:0;border-top-right-radius:0}.upload-component.upload-single .upload-progress .progress{border-radius:0}.upload-component .upload-progress{padding:0}.upload-component .upload-progress .progress{height:100%}.upload-component .upload-progress .progress .progress-text{color:#000;display:table-cell;height:34px;left:0;line-height:34px;position:absolute;right:0;top:50%;transform:translateY(-50%)}.dropzone{border-style:dashed;border-width:2px;min-height:120px;padding-bottom:50px;padding-top:50px;position:relative;text-align:center;width:100%}.dropzone.active{background-color:#add8e6}.dropzone .progress{border-radius:0}.dropzone .progress .progress-bar{border-bottom-right-radius:0;border-top-right-radius:0;display:flex;flex-direction:column;justify-content:center;text-align:center}.dropzone .progress .progress-bar .progress-text{color:#000;display:table-cell;height:34px;left:0;line-height:34px;position:absolute;right:0;top:50%;transform:translateY(-50%)}.dropzone input[type=file]{bottom:0;left:0;opacity:0;position:absolute;right:0;top:0;width:100%}.dropzone .dropzone-uploadstates{margin-left:auto;margin-right:auto;margin-top:6px;max-width:450px;width:80%}"]
-            },] }
-];
-SacUploadMultipleComponent.ctorParameters = () => [
-    { type: SacFormLayoutDirective, decorators: [{ type: Host }, { type: Optional }] },
-    { type: Injector },
-    { type: Renderer2 },
-    { type: NgZone }
-];
-
-class SACBootstrap3UploadModule {
-}
-SACBootstrap3UploadModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [
-                    SacUploadComponent,
-                    SacUploadMultipleComponent,
-                    SacDropzoneSingleComponent,
-                    SacDropzoneMultipleComponent,
-                ],
-                imports: [CommonModule, FormsModule, SACBootstrap3LayoutModule, SACBootstrap3TooltipModule],
-                exports: [SacUploadComponent, SacUploadMultipleComponent, SacDropzoneSingleComponent, SacDropzoneMultipleComponent],
-            },] }
-];
-
-/**
- * Erweiterung / Hooking für automatismen in Formular. Wird als Container für alle Controls benötigt.
- *
- * @example Beispiel über Div Container
- *
- * <div ngForm></div>
- *
- * @example Beispiel über Form Tag
- *
- * <form></form>
- */
-/* eslint @angular-eslint/directive-selector: 0 */
-class SacFormDirective extends SacFormCommon {
-    // #endregion Properties
-    // #region Constructors
-    /**
-     * Konstruktor
-     * @param form Instanz von NgForm für eigene automatische Formular Logik
-     */
-    constructor(form) {
-        super(form);
-        // #region Properties
-        /**
-         * Sets the standard CSS class for forms on the form container
-         */
-        this.cssClassForm = true;
-        /**
-         * Sets the default CSS class for horizontal forms on the form container
-         */
-        this.cssClassHorizontal = true;
-    }
-}
-SacFormDirective.decorators = [
-    { type: Directive, args: [{
-                selector: 'form:not([ngNoForm]):not([formGroup]),[ngForm]',
-                exportAs: 'sacform',
-            },] }
-];
-SacFormDirective.ctorParameters = () => [
-    { type: NgForm }
-];
-SacFormDirective.propDecorators = {
-    cssClassForm: [{ type: HostBinding, args: ['class.form',] }],
-    cssClassHorizontal: [{ type: HostBinding, args: ['class.form-horizontal',] }]
+class SACBootstrap3TabsModule {
+}
+SACBootstrap3TabsModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [SacTabComponent, SacTabItemComponent],
+                imports: [
+                    CommonModule
+                ],
+                exports: [SacTabComponent, SacTabItemComponent]
+            },] }
+];
+
+class SacTinyMceComponent extends SacTinyMceCommon {
+    // #region Constructors
+    /**
+     * Constructor
+     * @param formLayout SacFormLayout to define scoped layout settings
+     * @param injector Injector for injecting services
+     * @param ngZone ngZone to manage external javascripts
+     */
+    constructor(formLayout, injector, ngZone) {
+        super(formLayout, injector, ngZone);
+    }
+    // #endregion Constructors
+    // #region Public Methods
+    /**
+     * overwrite tinymce defaults
+     * @returns boostrap3 does not support file browser
+     */
+    overwriteDefaultSettings() {
+        return { file_picker_types: undefined, file_picker_callback: undefined };
+    }
+}
+SacTinyMceComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'sac-tinymce',
+                template: "<div\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\">\n    <label\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.has-error]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n        [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n        <div [style.flex-grow]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 1 : null\">\n            <editor\n                [id]=\"name + '_tinymce'\"\n                [init]=\"_config\"\n                [initialValue]=\"value\"\n                ngModel\n                [ngModelOptions]=\"{ standalone: true }\"\n                (ngModelChange)=\"setValue($event)\"\n                (onSaveContent)=\"save($event.event.content)\"\n                [disabled]=\"disabled\"\n                [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\"></editor>\n            <p\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"help-block\">\n                {{ helptext }}\n            </p>\n            <div\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"help-block\">\n                {{ GetErrorMessage() | async }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-static\"\n            style=\"margin-left: 5px\">\n            <sac-tooltip\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [class]=\"HelptextTooltipIcon\"\n                    style=\"margin-left: 5px; margin-right: 5px\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n\n<sac-dialog\n    *ngIf=\"selectdialogvisible\"\n    [allowesc]=\"false\"\n    [backdrop]=\"true\"\n    [(isvisible)]=\"selectdialogvisible\"\n    title=\"{{ lngResourceService.GetString(validationKeyService.TinyMceFileselectDialogtitle) | async }}\"\n    size=\"large\"\n    height=\"500px\">\n    <ng-container dialogbody> </ng-container>\n    <ng-container dialogfooter>\n        <sac-button\n            role=\"primary\"\n            [name]=\"name + '_modalOk'\"\n            text=\"{{ lngResourceService.GetString(validationKeyService.TinyMceFileselectOk) | async }}\"\n            (clicked)=\"setSelectDialogResult()\"></sac-button>\n        <sac-button\n            [name]=\"name + '_modalClose'\"\n            text=\"{{ lngResourceService.GetString(validationKeyService.TinyMceFileselectCancel) | async }}\"\n            (clicked)=\"closeSelectDialog()\"></sac-button>\n    </ng-container>\n</sac-dialog>\n",
+                // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
+                providers: [
+                    {
+                        provide: NG_VALUE_ACCESSOR,
+                        multi: true,
+                        useExisting: SacTinyMceComponent,
+                    },
+                    {
+                        provide: NG_VALIDATORS,
+                        useExisting: forwardRef(() => SacTinyMceComponent),
+                        multi: true,
+                    },
+                ]
+            },] }
+];
+SacTinyMceComponent.ctorParameters = () => [
+    { type: SacFormLayoutDirective, decorators: [{ type: Host }, { type: Optional }] },
+    { type: Injector },
+    { type: NgZone }
+];
+
+class SACBootstrap3TinyMceModule {
+}
+SACBootstrap3TinyMceModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [SacTinyMceComponent],
+                imports: [
+                    CommonModule,
+                    FormsModule,
+                    EditorModule,
+                    SACBootstrap3ButtonModule,
+                    SACBootstrap3DialogModule,
+                    SACBootstrap3LayoutModule,
+                    SACBootstrap3TooltipModule,
+                ],
+                exports: [SacTinyMceComponent],
+            },] }
+];
+
+/**
+ * Treeview Compomnent
+ */
+class SacTreeviewComponent extends SacTreeviewCommon {
+    // #region Constructors
+    /**
+     * Constructor
+     * @param formLayout SacFormLayout to define scoped layout settings
+     * @param injector Component Injector
+     */
+    constructor(formLayout, injector) {
+        super(formLayout, injector);
+    }
+}
+SacTreeviewComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'sac-treeview',
+                template: "<div\n    class=\"row mb-3\"\n    [class.g-0]=\"disablelabel\"\n    [class.has-error]=\"invalid && (dirty || touched)\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [class.has-error]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n        <div [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n            <div [style.width.%]=\"helptextmode === 'tooltip' && helptext && disablelabel ? '100' : null\">\n                <table\n                    class=\"table table-hover table-condensed\"\n                    id=\"{{ name }}\"\n                    style=\"table-layout: fixed\"\n                    [class.is-invalid]=\"invalid && (dirty || touched)\"\n                    [class.border]=\"invalid && (dirty || touched)\"\n                    [class.border-danger]=\"invalid && (dirty || touched)\">\n                    <tbody>\n                        <ng-container *ngFor=\"let node of data\">\n                            <ng-template\n                                [ngTemplateOutlet]=\"treeItem\"\n                                [ngTemplateOutletContext]=\"{ node: node, deep: 0, path: '', textpath: '' }\">\n                            </ng-template>\n                        </ng-container>\n                    </tbody>\n                </table>\n\n                <div\n                    *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                    class=\"help-block\">\n                    {{ GetErrorMessage() | async }}\n                </div>\n\n                <p\n                    *ngIf=\"helptextmode === 'text' && helptext\"\n                    class=\"help-block\">\n                    {{ helptext }}\n                </p>\n            </div>\n\n            <div\n                *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n                class=\"form-control-static\"\n                style=\"margin-left: 5px\">\n                <sac-tooltip\n                    *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                    [tooltiptext]=\"helptext\"\n                    [inlinemode]=\"true\">\n                    <span\n                        [class]=\"HelptextTooltipIcon\"\n                        style=\"margin-left: 5px; margin-right: 5px\">\n                    </span>\n                </sac-tooltip>\n            </div>\n        </div>\n    </div>\n</div>\n<ng-template\n    #treeItem\n    let-node=\"node\"\n    let-deep=\"deep\"\n    let-path=\"path\"\n    let-textpath=\"textpath\">\n    <tr\n        [class.active]=\"isSelectedState(node)\"\n        attr.data-path=\"{{ path }}/{{ getStringField(node, attrid) }}\"\n        attr.data-textpath=\"{{ textpath }}/{{ getStringField(node, attrlabel) }}\">\n        <td>\n            <div\n                class=\"py-1 px-2 d-flex align-items-center\"\n                style=\"display: flex; flex-direction: row; cursor: pointer; align-items: center\"\n                (mouseenter)=\"setHoverState(node, true)\"\n                (mouseleave)=\"setHoverState(node, false)\">\n                <div\n                    style=\"margin-right: 15px\"\n                    *ngFor=\"let i of count(deep)\">\n                </div>\n\n                <div\n                    (click)=\"onNodeClicked(node)\"\n                    *ngIf=\"expandedstate === 'true' || expandedstate === true\"\n                    style=\"margin-right: 15px\"\n                    [ngClass]=\"!hasChildren(node) ? iconFolderEmpty : !isExpandedState(node) ? iconFolderCollabsed : isExpandedState(node) ? iconFolderOpen : ''\">\n                </div>\n\n                <div\n                    (click)=\"onNodeClicked(node)\"\n                    *ngIf=\"attricon && getStringField(node, attricon)\">\n                    <ng-template\n                        [ngTemplateOutlet]=\"templateicon || defaultTemplateIcon\"\n                        [ngTemplateOutletContext]=\"{ node: node }\">\n                    </ng-template>\n                </div>\n\n                <div\n                    (click)=\"onNodeClicked(node)\"\n                    style=\"padding-top: 7px; padding-bottom: 7px; flex-grow: 1\"\n                    [style.max-width.%]=\"enableellipsis ? '100' : null\"\n                    [style.overflow]=\"enableellipsis ? 'hidden' : null\"\n                    [style.text-overflow]=\"enableellipsis ? 'ellipsis' : null\"\n                    [style.white-space]=\"enableellipsis ? 'nowrap' : null\">\n                    <ng-template\n                        [ngTemplateOutlet]=\"templatelabel || defaultTemplateLabel\"\n                        [ngTemplateOutletContext]=\"{ node: node, label: getStringField(node, attrlabel) }\">\n                    </ng-template>\n                </div>\n\n                <div\n                    (click)=\"setSelectedState(node)\"\n                    style=\"flex-shrink: 0\"\n                    *ngIf=\"!isDisabledState(node) && (showactionalways || isSelectedState(node) || isHoverState(node))\">\n                    <ng-template\n                        [ngTemplateOutlet]=\"templateaction || defaultTemplateAction\"\n                        [ngTemplateOutletContext]=\"{ node: node, actionhandler: onActionClicked.bind(this) }\">\n                    </ng-template>\n                </div>\n            </div>\n        </td>\n    </tr>\n    <ng-container *ngIf=\"isExpandedState(node)\">\n        <ng-template\n            *ngFor=\"let child of getChildren(node)\"\n            [ngTemplateOutlet]=\"treeItem\"\n            [ngTemplateOutletContext]=\"{\n                node: child,\n                deep: deep + 1,\n                path: path + '/' + getStringField(node, attrid),\n                textpath: textpath + '/' + getStringField(node, attrlabel)\n            }\">\n        </ng-template>\n    </ng-container>\n</ng-template>\n\n<ng-template\n    #defaultTemplateLabel\n    let-label=\"label\"\n    let-node=\"node\">\n    <span [title]=\"label\">\n        {{ label }}\n    </span>\n</ng-template>\n\n<ng-template\n    #defaultTemplateIcon\n    let-node=\"node\">\n    <div\n        style=\"margin-right: 15px\"\n        [ngClass]=\"getStringField(node, attricon)\">\n    </div>\n</ng-template>\n\n<ng-template\n    #defaultTemplateAction\n    let-node=\"node\"\n    let-actionhandler=\"actionhandler\">\n    <a\n        class=\"btn btn-link text-secondary\"\n        (click)=\"actionhandler({ action: 'default', node: node })\">\n        <i [class]=\"iconAction\"></i>\n    </a>\n</ng-template>\n",
+                providers: [
+                    {
+                        provide: NG_VALUE_ACCESSOR,
+                        multi: true,
+                        useExisting: SacTreeviewComponent,
+                    },
+                    {
+                        provide: NG_VALIDATORS,
+                        useExisting: forwardRef(() => SacTreeviewComponent),
+                        multi: true,
+                    },
+                ]
+            },] }
+];
+SacTreeviewComponent.ctorParameters = () => [
+    { type: SacFormLayoutDirective, decorators: [{ type: Host }, { type: Optional }] },
+    { type: Injector }
+];
+
+class SACBootstrap3TreeviewModule {
+}
+SACBootstrap3TreeviewModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [SacTreeviewComponent],
+                imports: [CommonModule, SACBootstrap3TooltipModule, SACBootstrap3LayoutModule, SACBootstrap3ContextmenuModule],
+                exports: [SacTreeviewComponent],
+            },] }
+];
+
+/**
+ * Dropzone Komponente für mehrere Uploads
+ * @see https://github.com/kukhariev/ngx-uploadx/
+ */
+class SacDropzoneMultipleComponent extends SacDropzoneMultipleCommon {
+    // #region Constructors
+    /**
+     * Constructor
+     * @param formLayout SacFormLayout to define scoped layout settings
+     * @param injector Injector for injecting services
+     * @param renderer Angular rendering engine
+     * @param ngZone ngZone to manage external javascripts
+     */
+    constructor(formLayout, injector, renderer, ngZone) {
+        super(formLayout, injector, renderer, ngZone);
+    }
+    // #endregion Constructors
+    // #region Public Methods
+    /**
+     * Initialisiert das Control
+     */
+    ngOnInit() {
+        super.ngOnInit();
+    }
+}
+SacDropzoneMultipleComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'sac-dropzonemultiple',
+                template: "<div\n    id=\"{{ name }}\"\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}_uploadinput\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n        <div [style.flex-grow]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 1 : null\">\n            <div\n                class=\"img-rounded dropzone control-label\"\n                (drop)=\"dropHandler($event)\"\n                (dragover)=\"onDragOver($event)\"\n                (dragleave)=\"onDragLeave($event)\"\n                [class.active]=\"active\"\n                [style.min-height]=\"uploadheight\"\n                [class.is-invalid]=\"invalid && (dirty || touched)\">\n                <div\n                    class=\"content\"\n                    *ngIf=\"uploads.length === 0\">\n                    <div>\n                        <div [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                            <ng-content></ng-content>\n                        </div>\n                    </div>\n                </div>\n                <div *ngIf=\"uploads.length > 0\">\n                    <div>\n                        <div\n                            class=\"dropzone-uploadstates\"\n                            [class.mt-1]=\"i > 0\"\n                            *ngFor=\"let file of uploads; let i = index\">\n                            <div\n                                class=\"input-group upload-component upload-component-multiple\"\n                                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\n                                <div class=\"form-control upload-progress border-secondary\">\n                                    <div class=\"progress\">\n                                        <div\n                                            class=\"progress-bar\"\n                                            [class.progress-bar-success]=\"file.progress === 100\"\n                                            role=\"progressbar\"\n                                            [attr.aria-valuenow]=\"file.progress\"\n                                            aria-valuemin=\"0\"\n                                            aria-valuemax=\"100\"\n                                            [style.width.%]=\"file.progress\">\n                                            <span class=\"progress-text\">{{ file.name }}</span>\n                                        </div>\n                                    </div>\n                                </div>\n                                <div class=\"input-group-btn\">\n                                    <!-- image-preview-clear button -->\n                                    <a\n                                        class=\"btn\"\n                                        (click)=\"cancel(file.uploadId)\"\n                                        [class.btn-default]=\"!(invalid && (dirty || touched))\"\n                                        [class.btn-danger]=\"invalid && (dirty || touched)\">\n                                        <span [class]=\"IconDelete\"></span>\n                                    </a>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <input\n                    #files\n                    multiple\n                    id=\"{{ name }}_uploadinput\"\n                    type=\"file\"\n                    class=\"custom-file-input\"\n                    (click)=\"files.value = ''\"\n                    (uploadxState)=\"onUpload($event)\"\n                    [disabled]=\"HasQueueItem()\" />\n            </div>\n            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"help-block\">\n                {{ helptext }}\n            </small>\n            <div\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"help-block help-block-error\">\n                {{ GetErrorMessage() | async }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-static\"\n            style=\"margin-left: 5px\">\n            <sac-tooltip\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [class]=\"HelptextTooltipIcon\"\n                    style=\"margin-left: 5px; margin-right: 5px\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n",
+                providers: [
+                    {
+                        provide: NG_VALUE_ACCESSOR,
+                        multi: true,
+                        useExisting: SacDropzoneMultipleComponent,
+                    },
+                    {
+                        provide: NG_VALIDATORS,
+                        multi: true,
+                        useExisting: forwardRef(() => SacDropzoneMultipleComponent),
+                    },
+                ],
+                styles: [".upload-component .upload-input{position:relative}.upload-component .custom-file>i{margin-right:15px}.upload-component .custom-file .custom-file-input{bottom:0;display:inline-block;left:0;margin:0;opacity:0;overflow:hidden;position:absolute;right:0;top:0;width:100%;z-index:2}.upload-component.upload-multiple .upload-progress .progress{border-bottom-right-radius:0;border-top-right-radius:0}.upload-component.upload-single .upload-progress .progress{border-radius:0}.upload-component .upload-progress{padding:0}.upload-component .upload-progress .progress{height:100%}.upload-component .upload-progress .progress .progress-text{color:#000;display:table-cell;height:34px;left:0;line-height:34px;position:absolute;right:0;top:50%;transform:translateY(-50%)}.dropzone{border-style:dashed;border-width:2px;min-height:120px;padding-bottom:50px;padding-top:50px;position:relative;text-align:center;width:100%}.dropzone.active{background-color:#add8e6}.dropzone .progress{border-radius:0}.dropzone .progress .progress-bar{border-bottom-right-radius:0;border-top-right-radius:0;display:flex;flex-direction:column;justify-content:center;text-align:center}.dropzone .progress .progress-bar .progress-text{color:#000;display:table-cell;height:34px;left:0;line-height:34px;position:absolute;right:0;top:50%;transform:translateY(-50%)}.dropzone input[type=file]{bottom:0;left:0;opacity:0;position:absolute;right:0;top:0;width:100%}.dropzone .dropzone-uploadstates{margin-left:auto;margin-right:auto;margin-top:6px;max-width:450px;width:80%}"]
+            },] }
+];
+SacDropzoneMultipleComponent.ctorParameters = () => [
+    { type: SacFormLayoutDirective, decorators: [{ type: Host }, { type: Optional }] },
+    { type: Injector },
+    { type: Renderer2 },
+    { type: NgZone }
+];
+
+/**
+ * Dropzone Komponente für den Upload eines Files
+ * @see https://github.com/kukhariev/ngx-uploadx/
+ */
+class SacDropzoneSingleComponent extends SacDropzoneSingleCommon {
+    // #region Constructors
+    /**
+     * Constructor
+     * @param formLayout SacFormLayout to define scoped layout settings
+     * @param injector Injector for injecting services
+     * @param renderer Angular rendering engine
+     * @param ngZone ngZone to manage external javascripts
+     */
+    constructor(formLayout, injector, renderer, ngZone) {
+        super(formLayout, injector, renderer, ngZone);
+    }
+    // #endregion Constructors
+    // #region Public Methods
+    /**
+     * Initialisiert das Control
+     */
+    ngOnInit() {
+        super.ngOnInit();
+    }
+}
+SacDropzoneSingleComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'sac-dropzonesingle',
+                template: "<div\n    id=\"{{ name }}\"\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}_uploadinput\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n        <div [style.flex-grow]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 1 : null\">\n            <div\n                class=\"img-rounded dropzone control-label\"\n                (drop)=\"dropHandler($event)\"\n                (dragover)=\"onDragOver($event)\"\n                (dragleave)=\"onDragLeave($event)\"\n                [style.min-height]=\"uploadheight\"\n                [class.active]=\"active\"\n                [class.is-invalid]=\"invalid && (dirty || touched)\">\n                <div\n                    class=\"content\"\n                    *ngIf=\"uploads.length === 0\">\n                    <div>\n                        <div [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                            <ng-content></ng-content>\n                        </div>\n                    </div>\n                </div>\n                <div *ngIf=\"uploads.length > 0\">\n                    <div>\n                        <div\n                            class=\"dropzone-uploadstates\"\n                            *ngFor=\"let file of uploads\">\n                            <div\n                                class=\"input-group upload-component upload-component-multiple\"\n                                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\n                                <div class=\"form-control upload-progress\">\n                                    <div class=\"progress\">\n                                        <div\n                                            class=\"progress-bar\"\n                                            [class.progress-bar-success]=\"file.progress === 100\"\n                                            role=\"progressbar\"\n                                            [attr.aria-valuenow]=\"file.progress\"\n                                            aria-valuemin=\"0\"\n                                            aria-valuemax=\"100\"\n                                            [style.width.%]=\"file.progress\">\n                                            <span class=\"progress-text\">{{ file.name }}</span>\n                                        </div>\n                                    </div>\n                                </div>\n                                <div class=\"input-group-btn\">\n                                    <!-- image-preview-clear button -->\n                                    <a\n                                        class=\"btn\"\n                                        (click)=\"cancel(file.uploadId)\"\n                                        [class.btn-default]=\"!(invalid && (dirty || touched))\"\n                                        [class.btn-danger]=\"invalid && (dirty || touched)\">\n                                        <span [class]=\"IconDelete\"></span>\n                                    </a>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <input\n                    #files\n                    id=\"{{ name }}_uploadinput\"\n                    type=\"file\"\n                    class=\"custom-file-input\"\n                    (click)=\"files.value = ''\"\n                    (uploadxState)=\"onUpload($event)\"\n                    [disabled]=\"HasQueueItem()\" />\n            </div>\n            <small\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"help-block\">\n                {{ helptext }}\n            </small>\n            <div\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\n                class=\"help-block help-block-error\">\n                {{ GetErrorMessage() | async }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-static\"\n            style=\"margin-left: 5px\">\n            <sac-tooltip\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [class]=\"HelptextTooltipIcon\"\n                    style=\"margin-left: 5px; margin-right: 5px\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n",
+                providers: [
+                    {
+                        provide: NG_VALUE_ACCESSOR,
+                        multi: true,
+                        useExisting: SacDropzoneSingleComponent,
+                    },
+                    {
+                        provide: NG_VALIDATORS,
+                        multi: true,
+                        useExisting: forwardRef(() => SacDropzoneSingleComponent),
+                    },
+                ],
+                styles: [".upload-component .upload-input{position:relative}.upload-component .custom-file>i{margin-right:15px}.upload-component .custom-file .custom-file-input{bottom:0;display:inline-block;left:0;margin:0;opacity:0;overflow:hidden;position:absolute;right:0;top:0;width:100%;z-index:2}.upload-component.upload-multiple .upload-progress .progress{border-bottom-right-radius:0;border-top-right-radius:0}.upload-component.upload-single .upload-progress .progress{border-radius:0}.upload-component .upload-progress{padding:0}.upload-component .upload-progress .progress{height:100%}.upload-component .upload-progress .progress .progress-text{color:#000;display:table-cell;height:34px;left:0;line-height:34px;position:absolute;right:0;top:50%;transform:translateY(-50%)}.dropzone{border-style:dashed;border-width:2px;min-height:120px;padding-bottom:50px;padding-top:50px;position:relative;text-align:center;width:100%}.dropzone.active{background-color:#add8e6}.dropzone .progress{border-radius:0}.dropzone .progress .progress-bar{border-bottom-right-radius:0;border-top-right-radius:0;display:flex;flex-direction:column;justify-content:center;text-align:center}.dropzone .progress .progress-bar .progress-text{color:#000;display:table-cell;height:34px;left:0;line-height:34px;position:absolute;right:0;top:50%;transform:translateY(-50%)}.dropzone input[type=file]{bottom:0;left:0;opacity:0;position:absolute;right:0;top:0;width:100%}.dropzone .dropzone-uploadstates{margin-left:auto;margin-right:auto;margin-top:6px;max-width:450px;width:80%}"]
+            },] }
+];
+SacDropzoneSingleComponent.ctorParameters = () => [
+    { type: SacFormLayoutDirective, decorators: [{ type: Host }, { type: Optional }] },
+    { type: Injector },
+    { type: Renderer2 },
+    { type: NgZone }
+];
+
+// https://github.com/kukhariev/ngx-uploadx/
+class SacUploadComponent extends SacUploadSingleCommon {
+    // #region Constructors
+    /**
+     * Constructor
+     * @param formLayout SacFormLayout to define scoped layout settings
+     * @param injector Injector for injecting services
+     * @param renderer Angular rendering engine
+     * @param ngZone ngZone to manage external javascripts
+     */
+    constructor(formLayout, injector, renderer, ngZone) {
+        super(formLayout, injector, renderer, ngZone);
+    }
+}
+SacUploadComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'sac-upload',
+                template: "<div\n    id=\"{{ name }}\"\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}_uploadinput\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\"\n        [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n        <div [style.flex-grow]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 1 : null\">\n            <div\n                class=\"input-group upload-component upload-single\"\n                [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\n                <div class=\"input-group-btn\">\n                    <!-- image-preview-input -->\n                    <div\n                        class=\"btn upload-input custom-file\"\n                        [class.disabled]=\"HasQueueItem()\"\n                        [class.btn-default]=\"!(invalid && (dirty || touched))\"\n                        [class.btn-danger]=\"invalid && (dirty || touched)\">\n                        <i [class]=\"IconBrowse\"></i>\n                        <span class=\"upload-browse\">{{ buttonbrowse ? buttonbrowse : (lngResourceService.GetString(validationKeyService.UploadButtonBrowse) | async) }}</span>\n                        <input\n                            id=\"{{ name }}_uploadinput\"\n                            type=\"file\"\n                            class=\"custom-file-input\"\n                            #files\n                            (click)=\"files.value = ''\"\n                            (uploadxState)=\"onUpload($event)\"\n                            multiple\n                            [disabled]=\"HasQueueItem()\" />\n                    </div>\n                </div>\n                <div class=\"form-control upload-progress\">\n                    <div class=\"progress\">\n                        <div\n                            class=\"progress-bar\"\n                            [class.progress-bar-success]=\"Progress() === 100\"\n                            role=\"progressbar\"\n                            [attr.aria-valuenow]=\"Progress()\"\n                            aria-valuemin=\"0\"\n                            aria-valuemax=\"100\"\n                            [style.width.%]=\"Progress()\">\n                            <span class=\"progress-text text-dark\">{{ Filename() | async }}</span>\n                        </div>\n                    </div>\n                </div>\n\n                <div class=\"input-group-btn\">\n                    <!-- image-preview-clear button -->\n                    <a\n                        class=\"btn\"\n                        (click)=\"cancelAll()\"\n                        [attr.disabled]=\"HasQueueItem() === false ? 'disabled' : null\"\n                        [class.btn-default]=\"!(invalid && (dirty || touched))\"\n                        [class.btn-danger]=\"invalid && (dirty || touched)\">\n                        <span [class]=\"IconDelete\"></span>\n                    </a>\n                    <a\n                        *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && IsPaused() === false)\"\n                        class=\"btn\"\n                        (click)=\"pauseAll()\"\n                        [attr.disabled]=\"IsUploading() === false ? 'disabled' : null\"\n                        [class.btn-default]=\"!(invalid && (dirty || touched))\"\n                        [class.btn-danger]=\"invalid && (dirty || touched)\">\n                        <span [class]=\"IconPause\"></span>\n                    </a>\n                    <a\n                        *ngIf=\"autoupload && enablepause && IsPaused()\"\n                        class=\"btn\"\n                        (click)=\"uploadAll()\"\n                        [class.btn-default]=\"!(invalid && (dirty || touched))\"\n                        [class.btn-danger]=\"invalid && (dirty || touched)\">\n                        <span [class]=\"IconContinue\"></span>\n                    </a>\n                    <a\n                        *ngIf=\"autoupload === false\"\n                        class=\"btn\"\n                        (click)=\"uploadAll()\"\n                        [attr.disabled]=\"IsStateToUpload() === false ? 'disabled' : null\"\n                        [class.btn-default]=\"!(invalid && (dirty || touched))\"\n                        [class.btn-danger]=\"invalid && (dirty || touched)\">\n                        <span [class]=\"IconUpload\"></span> {{ buttonupload ? buttonupload : (lngResourceService.GetString(validationKeyService.UploadButtonUpload) | async) }}\n                    </a>\n                </div>\n            </div>\n\n            <p\n                *ngIf=\"helptextmode === 'text' && helptext\"\n                class=\"help-block\">\n                {{ helptext }}\n            </p>\n\n            <div\n                class=\"help-block help-block-error\"\n                *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n                {{ GetErrorMessage() | async }}\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n            class=\"form-control-static\"\n            style=\"margin-left: 5px\">\n            <sac-tooltip\n                *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                [tooltiptext]=\"helptext\"\n                [inlinemode]=\"true\">\n                <span\n                    [class]=\"HelptextTooltipIcon\"\n                    style=\"margin-left: 5px; margin-right: 5px\">\n                </span>\n            </sac-tooltip>\n        </div>\n    </div>\n</div>\n",
+                providers: [
+                    {
+                        provide: NG_VALUE_ACCESSOR,
+                        multi: true,
+                        useExisting: SacUploadComponent,
+                    },
+                    {
+                        provide: NG_VALIDATORS,
+                        multi: true,
+                        useExisting: forwardRef(() => SacUploadComponent),
+                    },
+                ],
+                styles: [".upload-component .upload-input{position:relative}.upload-component .custom-file>i{margin-right:15px}.upload-component .custom-file .custom-file-input{bottom:0;display:inline-block;left:0;margin:0;opacity:0;overflow:hidden;position:absolute;right:0;top:0;width:100%;z-index:2}.upload-component.upload-multiple .upload-progress .progress{border-bottom-right-radius:0;border-top-right-radius:0}.upload-component.upload-single .upload-progress .progress{border-radius:0}.upload-component .upload-progress{padding:0}.upload-component .upload-progress .progress{height:100%}.upload-component .upload-progress .progress .progress-text{color:#000;display:table-cell;height:34px;left:0;line-height:34px;position:absolute;right:0;top:50%;transform:translateY(-50%)}.dropzone{border-style:dashed;border-width:2px;min-height:120px;padding-bottom:50px;padding-top:50px;position:relative;text-align:center;width:100%}.dropzone.active{background-color:#add8e6}.dropzone .progress{border-radius:0}.dropzone .progress .progress-bar{border-bottom-right-radius:0;border-top-right-radius:0;display:flex;flex-direction:column;justify-content:center;text-align:center}.dropzone .progress .progress-bar .progress-text{color:#000;display:table-cell;height:34px;left:0;line-height:34px;position:absolute;right:0;top:50%;transform:translateY(-50%)}.dropzone input[type=file]{bottom:0;left:0;opacity:0;position:absolute;right:0;top:0;width:100%}.dropzone .dropzone-uploadstates{margin-left:auto;margin-right:auto;margin-top:6px;max-width:450px;width:80%}"]
+            },] }
+];
+SacUploadComponent.ctorParameters = () => [
+    { type: SacFormLayoutDirective, decorators: [{ type: Host }, { type: Optional }] },
+    { type: Injector },
+    { type: Renderer2 },
+    { type: NgZone }
+];
+
+// https://github.com/kukhariev/ngx-uploadx/
+class SacUploadMultipleComponent extends SacUploadMultipleCommon {
+    // #region Constructors
+    /**
+     * Constructor
+     * @param formLayout SacFormLayout to define scoped layout settings
+     * @param injector Injector for injecting services
+     * @param renderer Angular rendering engine
+     * @param ngZone ngZone to manage external javascripts
+     */
+    constructor(formLayout, injector, renderer, ngZone) {
+        super(formLayout, injector, renderer, ngZone);
+    }
+}
+SacUploadMultipleComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'sac-uploadmultiple',
+                template: "<div\n    id=\"{{ name }}\"\n    class=\"row form-group\"\n    [class.has-error]=\"invalid && (dirty || touched)\"\n    [ngClass]=\"componentHeight | toLabelHeight\">\n    <label\n        *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\n        id=\"{{ name }}label\"\n        for=\"{{ name }}_uploadinput\"\n        class=\"col-xs-12 control-label\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\n        [class.required]=\"isrequired\">\n        <span class=\"text\">{{ label }}</span>\n        <sac-tooltip\n            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n            [tooltiptext]=\"helptext\"\n            [inlinemode]=\"true\">\n            <span\n                [class]=\"HelptextTooltipIcon\"\n                style=\"margin-left: 5px\">\n            </span>\n        </sac-tooltip>\n    </label>\n    <div\n        class=\"col-xs-12\"\n        [ngClass]=\"[disablelabel === false ? (this.labelSizes | toControlWidthCss) : '']\">\n        <div class=\"upload-component\">\n            <div class=\"row\">\n                <div\n                    class=\"col-xs-12\"\n                    [style.display]=\"helptextmode === 'tooltip' && helptext && disablelabel ? 'flex' : null\">\n                    <div\n                        class=\"btn-group\"\n                        [class.btn-group-sm]=\"componentHeight === ControlHeight.Small\"\n                        [class.btn-group-lg]=\"componentHeight === ControlHeight.Large\">\n                        <div\n                            class=\"btn upload-input custom-file\"\n                            [class.disabled]=\"maxfiles > 0 && uploads.length >= maxfiles\"\n                            [class.btn-default]=\"!(invalid && (dirty || touched))\"\n                            [class.btn-danger]=\"invalid && (dirty || touched)\">\n                            <i [class]=\"IconBrowse\"></i>\n                            <span class=\"upload-browse\">{{ buttonbrowse ? buttonbrowse : (lngResourceService.GetString(validationKeyService.UploadButtonBrowse) | async) }}</span>\n                            <input\n                                id=\"{{ name }}_uploadinput\"\n                                type=\"file\"\n                                class=\"custom-file-input\"\n                                #files\n                                (click)=\"files.value = ''\"\n                                (uploadxState)=\"onUpload($event)\"\n                                multiple\n                                [disabled]=\"maxfiles > 0 && uploads.length >= maxfiles\" />\n                        </div>\n\n                        <div\n                            class=\"btn-group\"\n                            [class.btn-group-sm]=\"componentHeight === ControlHeight.Small\"\n                            [class.btn-group-lg]=\"componentHeight === ControlHeight.Large\">\n                            <!-- image-preview-clear button -->\n                            <a\n                                class=\"btn\"\n                                (click)=\"cancelAll()\"\n                                [attr.disabled]=\"HasQueueItem() === false ? 'disabled' : null\"\n                                [class.btn-default]=\"!(invalid && (dirty || touched))\"\n                                [class.btn-danger]=\"invalid && (dirty || touched)\">\n                                <span [class]=\"IconDelete\"></span>\n                            </a>\n                            <a\n                                *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && IsPaused() === false)\"\n                                class=\"btn\"\n                                (click)=\"pauseAll()\"\n                                [attr.disabled]=\"IsUploading() === false ? 'disabled' : null\"\n                                [class.btn-default]=\"!(invalid && (dirty || touched))\"\n                                [class.btn-danger]=\"invalid && (dirty || touched)\">\n                                <span [class]=\"IconPause\"></span>\n                            </a>\n                            <a\n                                *ngIf=\"autoupload && enablepause && IsPaused() === true\"\n                                class=\"btn\"\n                                (click)=\"uploadAll()\"\n                                [class.btn-default]=\"!(invalid && (dirty || touched))\"\n                                [class.btn-danger]=\"invalid && (dirty || touched)\">\n                                <span [class]=\"IconContinue\"></span>\n                            </a>\n                            <a\n                                *ngIf=\"autoupload === false\"\n                                class=\"btn\"\n                                (click)=\"uploadAll()\"\n                                [attr.disabled]=\"IsStateToUpload() === false ? 'disabled' : null\"\n                                [class.btn-default]=\"!(invalid && (dirty || touched))\"\n                                [class.btn-danger]=\"invalid && (dirty || touched)\">\n                                <span [class]=\"IconUpload\"></span>\n                                {{ buttonupload ? buttonupload : (lngResourceService.GetString(validationKeyService.UploadButtonUpload) | async) }}\n                            </a>\n                        </div>\n                    </div>\n\n                    <div\n                        *ngIf=\"helptextmode === 'tooltip' && helptext && disablelabel\"\n                        class=\"form-control-static\"\n                        style=\"margin-left: 5px\">\n                        <sac-tooltip\n                            *ngIf=\"helptextmode === 'tooltip' && helptext\"\n                            [tooltiptext]=\"helptext\"\n                            [inlinemode]=\"true\">\n                            <span\n                                [class]=\"HelptextTooltipIcon\"\n                                style=\"margin-left: 5px; margin-right: 5px\">\n                            </span>\n                        </sac-tooltip>\n                    </div>\n                </div>\n            </div>\n\n            <div\n                *ngFor=\"let file of uploads\"\n                style=\"margin-top: 5px\">\n                <div\n                    class=\"input-group upload-component upload-multiple\"\n                    [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                    [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\n                    <div class=\"form-control upload-progress\">\n                        <div class=\"progress\">\n                            <div\n                                class=\"progress-bar\"\n                                [class.progress-bar-success]=\"file.progress === 100\"\n                                role=\"progressbar\"\n                                [attr.aria-valuenow]=\"file.progress\"\n                                aria-valuemin=\"0\"\n                                aria-valuemax=\"100\"\n                                [style.width.%]=\"file.progress\">\n                                <span class=\"progress-text text-dark\">{{ file.name }}</span>\n                            </div>\n                        </div>\n                    </div>\n                    <div\n                        class=\"input-group-btn\"\n                        [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\n                        [class.input-group-lg]=\"componentHeight === ControlHeight.Large\">\n                        <!-- image-preview-clear button -->\n                        <a\n                            class=\"btn\"\n                            (click)=\"cancel(file.uploadId)\"\n                            [class.btn-default]=\"!(invalid && (dirty || touched))\"\n                            [class.btn-danger]=\"invalid && (dirty || touched)\">\n                            <span [class]=\"IconDelete\"></span>\n                        </a>\n                        <a\n                            *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && file.status !== 'paused')\"\n                            class=\"btn\"\n                            (click)=\"pause(file.uploadId)\"\n                            [attr.disabled]=\"file.status !== 'uploading' ? 'disabled' : null\"\n                            [class.btn-default]=\"!(invalid && (dirty || touched))\"\n                            [class.btn-danger]=\"invalid && (dirty || touched)\">\n                            <span [class]=\"IconPause\"></span>\n                        </a>\n                        <a\n                            *ngIf=\"autoupload && enablepause && file.status === 'paused'\"\n                            class=\"btn\"\n                            (click)=\"upload(file.uploadId)\"\n                            [class.btn-default]=\"!(invalid && (dirty || touched))\"\n                            [class.btn-danger]=\"invalid && (dirty || touched)\">\n                            <span [class]=\"IconContinue\"></span>\n                        </a>\n                        <a\n                            *ngIf=\"autoupload === false\"\n                            class=\"btn\"\n                            (click)=\"upload(file.uploadId)\"\n                            [attr.disabled]=\"file.status !== 'added' && file.status !== 'paused' ? 'disabled' : null\"\n                            [class.btn-default]=\"!(invalid && (dirty || touched))\"\n                            [class.btn-danger]=\"invalid && (dirty || touched)\">\n                            <span [class]=\"IconUpload\"></span> {{ buttonupload ? buttonupload : (lngResourceService.GetString(validationKeyService.UploadButtonUpload) | async) }}\n                        </a>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <p\n            *ngIf=\"helptextmode === 'text' && helptext\"\n            class=\"help-block\">\n            {{ helptext }}\n        </p>\n        <div\n            class=\"help-block help-block-error\"\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\">\n            {{ GetErrorMessage() | async }}\n        </div>\n    </div>\n</div>\n",
+                providers: [
+                    {
+                        provide: NG_VALUE_ACCESSOR,
+                        multi: true,
+                        useExisting: SacUploadMultipleComponent,
+                    },
+                    {
+                        provide: NG_VALIDATORS,
+                        multi: true,
+                        useExisting: forwardRef(() => SacUploadMultipleComponent),
+                    },
+                ],
+                styles: [".upload-component .upload-input{position:relative}.upload-component .custom-file>i{margin-right:15px}.upload-component .custom-file .custom-file-input{bottom:0;display:inline-block;left:0;margin:0;opacity:0;overflow:hidden;position:absolute;right:0;top:0;width:100%;z-index:2}.upload-component.upload-multiple .upload-progress .progress{border-bottom-right-radius:0;border-top-right-radius:0}.upload-component.upload-single .upload-progress .progress{border-radius:0}.upload-component .upload-progress{padding:0}.upload-component .upload-progress .progress{height:100%}.upload-component .upload-progress .progress .progress-text{color:#000;display:table-cell;height:34px;left:0;line-height:34px;position:absolute;right:0;top:50%;transform:translateY(-50%)}.dropzone{border-style:dashed;border-width:2px;min-height:120px;padding-bottom:50px;padding-top:50px;position:relative;text-align:center;width:100%}.dropzone.active{background-color:#add8e6}.dropzone .progress{border-radius:0}.dropzone .progress .progress-bar{border-bottom-right-radius:0;border-top-right-radius:0;display:flex;flex-direction:column;justify-content:center;text-align:center}.dropzone .progress .progress-bar .progress-text{color:#000;display:table-cell;height:34px;left:0;line-height:34px;position:absolute;right:0;top:50%;transform:translateY(-50%)}.dropzone input[type=file]{bottom:0;left:0;opacity:0;position:absolute;right:0;top:0;width:100%}.dropzone .dropzone-uploadstates{margin-left:auto;margin-right:auto;margin-top:6px;max-width:450px;width:80%}"]
+            },] }
+];
+SacUploadMultipleComponent.ctorParameters = () => [
+    { type: SacFormLayoutDirective, decorators: [{ type: Host }, { type: Optional }] },
+    { type: Injector },
+    { type: Renderer2 },
+    { type: NgZone }
+];
+
+class SACBootstrap3UploadModule {
+}
+SACBootstrap3UploadModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [
+                    SacUploadComponent,
+                    SacUploadMultipleComponent,
+                    SacDropzoneSingleComponent,
+                    SacDropzoneMultipleComponent,
+                ],
+                imports: [CommonModule, FormsModule, SACBootstrap3LayoutModule, SACBootstrap3TooltipModule],
+                exports: [SacUploadComponent, SacUploadMultipleComponent, SacDropzoneSingleComponent, SacDropzoneMultipleComponent],
+            },] }
+];
+
+/**
+ * Erweiterung / Hooking für automatismen in Formular. Wird als Container für alle Controls benötigt.
+ *
+ * @example Beispiel über Div Container
+ *
+ * <div ngForm></div>
+ *
+ * @example Beispiel über Form Tag
+ *
+ * <form></form>
+ */
+/* eslint @angular-eslint/directive-selector: 0 */
+class SacFormDirective extends SacFormCommon {
+    // #endregion Properties
+    // #region Constructors
+    /**
+     * Konstruktor
+     * @param form Instanz von NgForm für eigene automatische Formular Logik
+     */
+    constructor(form) {
+        super(form);
+        // #region Properties
+        /**
+         * Sets the standard CSS class for forms on the form container
+         */
+        this.cssClassForm = true;
+        /**
+         * Sets the default CSS class for horizontal forms on the form container
+         */
+        this.cssClassHorizontal = true;
+    }
+}
+SacFormDirective.decorators = [
+    { type: Directive, args: [{
+                selector: 'form:not([ngNoForm]):not([formGroup]),[ngForm]',
+                exportAs: 'sacform',
+            },] }
+];
+SacFormDirective.ctorParameters = () => [
+    { type: NgForm }
+];
+SacFormDirective.propDecorators = {
+    cssClassForm: [{ type: HostBinding, args: ['class.form',] }],
+    cssClassHorizontal: [{ type: HostBinding, args: ['class.form-horizontal',] }]
 };
 
-class SacValidationSummaryComponent extends SacValidationSummaryCommon {
-    // #region Constructors
-    /**
-     * Constructor
-     * @param formControl Instance of Form Component to receive invalid form controls
-     * @param injector Injector for injecting services
-     */
-    constructor(formControl, injector) {
-        super(formControl, injector);
-    }
-}
-SacValidationSummaryComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'sac-validationsummary',
-                template: "<div class=\"alert alert-danger\" role=\"alert\" *ngIf=\"hasErrors\" [id]=\"name\">\r\n  <ul>\r\n    <li *ngFor=\"let error of formErrors\">\r\n      {{error | async}}\r\n    </li>\r\n  </ul>\r\n</div>\r\n",
-                // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
-                providers: [
-                    {
-                        provide: NG_VALUE_ACCESSOR,
-                        multi: true,
-                        useExisting: SacValidationSummaryComponent,
-                    },
-                ]
-            },] }
-];
-SacValidationSummaryComponent.ctorParameters = () => [
-    { type: SacFormDirective, decorators: [{ type: Host }, { type: Optional }] },
-    { type: Injector }
-];
-
-class SACBootstrap3ValidationSummaryModule {
-}
-SACBootstrap3ValidationSummaryModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [SacValidationSummaryComponent],
-                imports: [
-                    CommonModule
-                ],
-                exports: [SacValidationSummaryComponent]
-            },] }
-];
-
-class SacWizardItemComponent extends SacWizardItemCommon {
-}
-SacWizardItemComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'sac-wizarditem',
-                template: ""
-            },] }
-];
-
-class SacWizardComponent extends SacWizardCommon {
-    wizardItems() {
-        return this._wizardItems;
-    }
-}
-SacWizardComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'sac-wizard',
-                template: "<ul [id]=\"name\" class=\"nav nav-wizard\" role=\"tablist\">\r\n  <li *ngFor=\"let item of _wizardItems\" class=\"nav-item\" [ngClass]=\"{ 'active': item._active, 'disabled': item._disabled, 'success': item._iscomplete }\"\r\n      [ngStyle]=\"{'cursor': item._disabled ? 'not-allowed' : 'pointer'}\">\r\n    <a role=\"tab\" (click)=\"selectStep(item)\">\r\n      <div class=\"circle\">\r\n        <span class=\"step\"></span>\r\n      </div>\r\n    </a>\r\n    <div class=\"info\">\r\n      <a (click)=\"selectStep(item)\">{{item.label}}</a>\r\n    </div>\r\n  </li>\r\n</ul>\r\n",
-                // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
-                providers: [
-                    { provide: NG_VALUE_ACCESSOR, multi: true, useExisting: SacWizardComponent }
-                ]
-            },] }
-];
-SacWizardComponent.propDecorators = {
-    _wizardItems: [{ type: ContentChildren, args: [SacWizardItemComponent,] }]
+class SacValidationSummaryComponent extends SacValidationSummaryCommon {
+    // #region Constructors
+    /**
+     * Constructor
+     * @param formControl Instance of Form Component to receive invalid form controls
+     * @param injector Injector for injecting services
+     */
+    constructor(formControl, injector) {
+        super(formControl, injector);
+    }
+}
+SacValidationSummaryComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'sac-validationsummary',
+                template: "<div class=\"alert alert-danger\" role=\"alert\" *ngIf=\"hasErrors\" [id]=\"name\">\n  <ul>\n    <li *ngFor=\"let error of formErrors\">\n      {{error | async}}\n    </li>\n  </ul>\n</div>\n",
+                // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
+                providers: [
+                    {
+                        provide: NG_VALUE_ACCESSOR,
+                        multi: true,
+                        useExisting: SacValidationSummaryComponent,
+                    },
+                ]
+            },] }
+];
+SacValidationSummaryComponent.ctorParameters = () => [
+    { type: SacFormDirective, decorators: [{ type: Host }, { type: Optional }] },
+    { type: Injector }
+];
+
+class SACBootstrap3ValidationSummaryModule {
+}
+SACBootstrap3ValidationSummaryModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [SacValidationSummaryComponent],
+                imports: [
+                    CommonModule
+                ],
+                exports: [SacValidationSummaryComponent]
+            },] }
+];
+
+class SacWizardItemComponent extends SacWizardItemCommon {
+}
+SacWizardItemComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'sac-wizarditem',
+                template: ""
+            },] }
+];
+
+class SacWizardComponent extends SacWizardCommon {
+    wizardItems() {
+        return this._wizardItems;
+    }
+}
+SacWizardComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'sac-wizard',
+                template: "<ul [id]=\"name\" class=\"nav nav-wizard\" role=\"tablist\">\n  <li *ngFor=\"let item of _wizardItems\" class=\"nav-item\" [ngClass]=\"{ 'active': item._active, 'disabled': item._disabled, 'success': item._iscomplete }\"\n      [ngStyle]=\"{'cursor': item._disabled ? 'not-allowed' : 'pointer'}\">\n    <a role=\"tab\" (click)=\"selectStep(item)\">\n      <div class=\"circle\">\n        <span class=\"step\"></span>\n      </div>\n    </a>\n    <div class=\"info\">\n      <a (click)=\"selectStep(item)\">{{item.label}}</a>\n    </div>\n  </li>\n</ul>\n",
+                // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
+                providers: [
+                    { provide: NG_VALUE_ACCESSOR, multi: true, useExisting: SacWizardComponent }
+                ]
+            },] }
+];
+SacWizardComponent.propDecorators = {
+    _wizardItems: [{ type: ContentChildren, args: [SacWizardItemComponent,] }]
 };
 
-class SACBootstrap3WizardModule {
-}
-SACBootstrap3WizardModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [SacWizardComponent, SacWizardItemComponent],
-                imports: [
-                    CommonModule
-                ],
-                exports: [SacWizardComponent, SacWizardItemComponent]
-            },] }
-];
-
-// #region Classes
-/**
- * Directive to inherit an NgForm/NgForm from a parent component
- */
-class SacInheritFormDirective extends SacFormCommon {
-    // #region Constructors
-    /**
-     * Construtor
-     * @param injector: injector to receive the NgForm instance
-     */
-    constructor(injector) {
-        super(injector.get(NgForm));
-    }
-}
-SacInheritFormDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[sacInheritForm]',
-                exportAs: 'sacinheritform',
-                providers: [
-                    {
-                        provide: SacFormDirective,
-                        useFactory: SACFORM_FACTORY,
-                        deps: [[new SkipSelf(), SacFormDirective]],
-                    },
-                    {
-                        provide: ControlContainer,
-                        useFactory: NGFORM_FACTORY,
-                        deps: [NgForm],
-                    },
-                ],
-            },] }
-];
-SacInheritFormDirective.ctorParameters = () => [
-    { type: Injector }
-];
-// #endregion Classes
-// #region Functions
-/**
- * Factory Methode für NgForm
- * @param form NgForm
- */
-function NGFORM_FACTORY(form) {
-    return form;
-}
-/**
- * Factory Methode für SacForm
- * @param form NgFormular
- */
-function SACFORM_FACTORY(form) {
-    return form;
-}
+class SACBootstrap3WizardModule {
+}
+SACBootstrap3WizardModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [SacWizardComponent, SacWizardItemComponent],
+                imports: [
+                    CommonModule
+                ],
+                exports: [SacWizardComponent, SacWizardItemComponent]
+            },] }
+];
+
+// #region Classes
+/**
+ * Directive to inherit an NgForm/NgForm from a parent component
+ */
+class SacInheritFormDirective extends SacFormCommon {
+    // #region Constructors
+    /**
+     * Construtor
+     * @param injector: injector to receive the NgForm instance
+     */
+    constructor(injector) {
+        super(injector.get(NgForm));
+    }
+}
+SacInheritFormDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[sacInheritForm]',
+                exportAs: 'sacinheritform',
+                providers: [
+                    {
+                        provide: SacFormDirective,
+                        useFactory: SACFORM_FACTORY,
+                        deps: [[new SkipSelf(), SacFormDirective]],
+                    },
+                    {
+                        provide: ControlContainer,
+                        useFactory: NGFORM_FACTORY,
+                        deps: [NgForm],
+                    },
+                ],
+            },] }
+];
+SacInheritFormDirective.ctorParameters = () => [
+    { type: 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
 
-class SACBootstrap3FormModule {
-}
-SACBootstrap3FormModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [SacFormDirective, SacInheritFormDirective],
-                imports: [CommonModule, FormsModule],
-                exports: [SacFormDirective, SacInheritFormDirective],
-            },] }
+class SACBootstrap3FormModule {
+}
+SACBootstrap3FormModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [SacFormDirective, SacInheritFormDirective],
+                imports: [CommonModule, FormsModule],
+                exports: [SacFormDirective, SacInheritFormDirective],
+            },] }
 ];
 
-/*
- * Public API Surface of sac-bootstrap3
+/*
+ * Public API Surface of sac-bootstrap3
  */
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
 export { NGFORM_FACTORY, SACBootstrap3ButtonModule, SACBootstrap3CheckboxModule, SACBootstrap3ConfirmModule, SACBootstrap3ContextmenuModule, SACBootstrap3DateTimeModule, SACBootstrap3DialogModule, SACBootstrap3FormModule, SACBootstrap3GridModule, SACBootstrap3InputModule, SACBootstrap3LayoutModule, SACBootstrap3ListModule, SACBootstrap3StaticLabelModule, SACBootstrap3TabsModule, SACBootstrap3TinyMceModule, SACBootstrap3TooltipModule, SACBootstrap3TreeviewModule, SACBootstrap3UploadModule, SACBootstrap3ValidationSummaryModule, SACBootstrap3WizardModule, SACFORM_FACTORY, SacButtonComponent, SacCheckboxComponent, SacConfirmComponent, SacContextmenuAnchorDirective, SacContextmenuComponent, SacContextmenuItemButtonComponent, SacContextmenuItemSplitterComponent, SacDateComponent, SacDateSelectorComponent, SacDateTimeComponent, SacDialogComponent, SacDropdownComponent, SacDropdownOptionDirective, SacDropzoneMultipleComponent, SacDropzoneSingleComponent, SacFormDirective, SacFormLayoutDirective, SacGridButtonComponent, SacGridColumnActionComponent, SacGridColumnComponent, SacGridComponent, SacGridImageComponent, SacInheritFormDirective, SacInputAreaComponent, SacInputComponent, SacInputCurrencyComponent, SacInputDecimalComponent, SacInputEmailComponent, SacInputIntegerComponent, SacInputPasswordComponent, SacInputSearchComponent, SacListboxComponent, SacPagingComponent, SacRadiobuttonComponent, SacRadiobuttonsComponent, SacStaticFormContainerComponent, SacStaticLabelComponent, SacTabComponent, SacTabItemComponent, SacTimeComponent, SacTinyMceComponent, SacToControlHeightPipe, SacToControlWidthCssPipe, SacToLabelHeightPipe, SacToLabelWidthCssPipe, SacTooltipComponent, SacTreeviewComponent, SacUploadComponent, SacUploadMultipleComponent, SacValidationSummaryComponent, SacWizardComponent, SacWizardItemComponent, ServiceConfirm, SacContextmenuContainerDirective as ɵa };