@simpleangularcontrols/sac-bootstrap4 10.0.0-rc.8 → 13.0.0-rc.10

package/fesm2015/simpleangularcontrols-sac-bootstrap4.js

@@ -1,2562 +0,0 @@
-import { CommonModule, DOCUMENT } from '@angular/common';
-import { HttpClient, HttpClientModule } from '@angular/common/http';
-import { Component, NgModule, ElementRef, ChangeDetectorRef, Injectable, ComponentFactoryResolver, Inject, ApplicationRef, Injector, forwardRef, NgZone, Renderer2, Directive, HostBinding, SkipSelf, Pipe, Host, Optional, ViewChild, ContentChild, TemplateRef, ContentChildren } from '@angular/core';
-import { NgForm, ControlContainer, FormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
-import { SacButtonCommon, SacDialogCommon, SacConfirmCommon, ServiceConfirmCommon, isDefined, SacConfirmButton, SacContextmenuCommon, SacContextmenuItemButtonCommon, SacContextmenuItemCommon, SacContextmenuAnchorCommon, SacContextMenuContrainerCommon, SacFormCommon, SacFormLayoutCommon, ControlHeight, SacTooltipCommon, SacDropzoneMultipleCommon, SacDropzoneSingleCommon, SacUploadSingleCommon, SacUploadMultipleCommon, SacFileBrowserCommon, SacCheckboxCommon, SacRadiobuttonsCommon, SacRadiobuttonCommon, SacDateCommon, SacDateSelectorCommon, SacDateTimeCommon, SacTimeCommon, SacGridCommon, SacGridButtonCommon, SacGridColumnCommon, SacGridColumnBaseCommon, SacGridColumnActionCommon, SacGridImageCommon, SacPagingCommon, SacInputCommon, SacInputAreaCommon, SacInputCurrencyCommon, SacInputDecimalCommon, SacInputEmailCommon, SacInputIntegerCommon, SacInputPasswordCommon, SacInputSearchCommon, SacDropdownCommon, SacDropdownOptionCommon, SacListboxCommon, SacListboxOptionCommon, SacMultilanguageInputCommon, IconType, SacMultilanguageInputAreaCommon, SacStaticFormContainerCommon, SacStaticLabelCommon, SacTabItemCommon, SacTabCommon, SacTinyMceCommon, SacValidationSummaryCommon, SacWizardItemCommon, SacWizardCommon } from '@simpleangularcontrols/sac-common';
-import { forkJoin, Observable } from 'rxjs';
-import { take } from 'rxjs/operators';
-import { IMaskModule } from 'angular-imask';
-import moment_ from 'moment';
-import { EditorModule } from '@tinymce/tinymce-angular';
-
-/**
- * Button Component
- *
- * <example-url>http://localhost/demo/mysample.component.html</example-url>
- */
-class SacButtonComponent extends SacButtonCommon {
-}
-SacButtonComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'sac-button',
-                template: "<button\r\n  [id]=\"name\"\r\n  type=\"button\"\r\n  class=\"btn d-flex justify-content-center align-items-center\"\r\n  [attr.disabled]=\"_isdisabled || isloading ? 'disabled' : null\"\r\n  (click)=\"buttonClick()\"\r\n  [class.btn-primary]=\"role === 'primary'\"\r\n  [class.btn-secondary]=\"role === 'secondary' || role === 'default'\"\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-link]=\"role === 'link'\"\r\n>\r\n  <span\r\n    *ngIf=\"isloading\"\r\n    class=\"spinner-border spinner-border-sm mr-2\"\r\n    role=\"status\"\r\n    aria-hidden=\"true\"\r\n  ></span>\r\n  <i *ngIf=\"!isloading && icon !== ''\" [ngClass]=\"icon\" [class.mr-2]=\"text\"></i\r\n  >{{text}}\r\n</button>\r\n"
-            },] }
-];
-
-class SACBootstrap4ButtonModule {
-}
-SACBootstrap4ButtonModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [SacButtonComponent],
-                imports: [
-                    CommonModule
-                ],
-                exports: [SacButtonComponent]
-            },] }
-];
-
-/**
- * Dialog Komponente
- */
-class SacDialogComponent extends SacDialogCommon {
-    /**
-     * Konstruktor
-     * @param el DOM Element Referenz
-     * @param cdRef Change Detection Service
-     */
-    constructor(el, cdRef) {
-        super(cdRef);
-        this.element = el.nativeElement;
-    }
-    /**
-     * Event wenn Komponente initialisiert wird
-     */
-    ngOnInit() {
-        // Element an Body für korrektes Styling unter Bootstrap 3 verschieben
-        document.body.appendChild(this.element);
-    }
-    /**
-     * Event wenn Element entfernt wird
-     */
-    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 #dialog class=\"modal show\" style=\"display: block\" tabindex=\"-1\" role=\"dialog\" *ngIf=\"_show\">\r\n  <div class=\"modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable\" role=\"document\"\r\n       [class.modal-xl]=\"_size === 'extralarge'\"\r\n       [class.modal-lg]=\"_size === 'large'\"\r\n       [class.modal-sm]=\"_size === 'small'\">\r\n    <div class=\"modal-content\">\r\n      <div class=\"modal-header\">\r\n        <h5 class=\"modal-title\">{{title}}</h5>\r\n        <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\" (click)=\"hide()\" *ngIf=\"closebutton\"><span aria-hidden=\"true\">&times;</span></button>\r\n      </div>\r\n      <div class=\"modal-body\" [style.height]=\"height\">\r\n        <ng-content select=\"[dialogbody]\"></ng-content>\r\n      </div>\r\n      <div class=\"modal-footer\">\r\n        <ng-content select=\"[dialogfooter]\"></ng-content>\r\n      </div>\r\n    </div><!-- /.modal-content -->\r\n  </div><!-- /.modal-dialog -->\r\n</div><!-- /.modal -->\r\n<div class=\"modal-backdrop show\" *ngIf=\"_show && backdrop\" #backdrop></div>\r\n"
-            },] }
-];
-SacDialogComponent.ctorParameters = () => [
-    { type: ElementRef },
-    { type: ChangeDetectorRef }
-];
-
-class SACBootstrap4DialogModule {
-}
-SACBootstrap4DialogModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [SacDialogComponent],
-                imports: [
-                    CommonModule
-                ],
-                exports: [SacDialogComponent]
-            },] }
-];
-
-/**
- * Confirm Komponente
- */
-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  dialogsize=\"small\"\r\n>\r\n  <div dialogbody>\r\n    <div class=\"media\">\r\n      <img\r\n        [attr.src]=\"image\"\r\n        class=\"align-self-center mr-3\"\r\n        *ngIf=\"hasImage()\"\r\n      />\r\n      <div class=\"media-body\">{{message}}</div>\r\n    </div>\r\n  </div>\r\n  <ng-container 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  </ng-container>\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: ExanicBootstrap4ConfirmModule.forRoot()
- *
- */
-class SACBootstrap4ConfirmModule {
-    // #region Public Static Methods
-    static forRoot() {
-        return {
-            ngModule: SACBootstrap4ConfirmModule,
-            providers: [ServiceConfirm],
-        };
-    }
-}
-SACBootstrap4ConfirmModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [SacConfirmComponent],
-                imports: [CommonModule, SACBootstrap4DialogModule, SACBootstrap4ButtonModule],
-                exports: [SacConfirmComponent],
-                entryComponents: [SacConfirmComponent],
-            },] }
-];
-
-/**
- * Component für Contextmenü
- */
-class SacContextmenuComponent extends SacContextmenuCommon {
-    // #region Constructors
-    /**
-     * Constructor
-     * @param document Referenz auf HTML Document
-     * @param ngZone Angular Zone Service
-     * @param elementRef Referenz auf HTML Element der aktuellen Komponente
-     * @param renderer Render Service von 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 class=\"dropdown\" [ngClass]=\"cssclass\">\r\n  <ng-container\r\n    [ngTemplateOutlet]=\"buttontemplate || defaultButtonTemplate\"\r\n  ></ng-container>\r\n\r\n  <div\r\n    class=\"dropdown-menu dropdown-menu-right\"\r\n    sacContextMenuContainer\r\n    [class.show]=\"isopen\"\r\n  >\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #defaultButtonTemplate>\r\n  <button\r\n    sacContextMenuAnchor\r\n    class=\"btn btn-sm btn-link text-secondary text-decoration-none\"\r\n    type=\"button\"\r\n    (click)=\"toggle()\"\r\n  >\r\n    <i [class]=\"IconContextMenu\"></i>\r\n  </button>\r\n</ng-template>\r\n",
-                providers: [
-                    {
-                        provide: SacContextmenuCommon,
-                        useExisting: forwardRef(() => SacContextmenuComponent),
-                    },
-                ]
-            },] }
-];
-SacContextmenuComponent.ctorParameters = () => [
-    { type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] },
-    { type: NgZone },
-    { type: ElementRef },
-    { type: Renderer2 },
-    { type: Injector }
-];
-
-/**
- * Component für Menü Eintrag in Context Menü
- */
-class SacContextmenuItemButtonComponent extends SacContextmenuItemButtonCommon {
-    /**
-     * Constructor
-     * @param contextmenu Instance von Context Menü
-     */
-    constructor(contextmenu) {
-        super(contextmenu);
-    }
-}
-SacContextmenuItemButtonComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'sac-contextmenubutton',
-                template: "<button\r\n  type=\"button\"\r\n  class=\"dropdown-item\"\r\n  (click)=\"callaction($event)\"\r\n  [class.disabled]=\"isdisabled\"\r\n  [ngClass]=\"cssclass\"\r\n  [attr.disabled]=\"isdisabled ? 'disabled' : null\"\r\n>\r\n  <div class=\"d-flex\">\r\n    <div *ngIf=\"!isicondisabled\" style=\"min-width: 1.5rem\">\r\n      <img *ngIf=\"image\" [src]=\"image\" class=\"align-baseline\" />\r\n      <i *ngIf=\"icon\" [class]=\"iconstyle + ' ' + icon\"></i>\r\n    </div>\r\n    <div class=\"flex-grow-1\">{{ text }}</div>\r\n  </div>\r\n</button>\r\n"
-            },] }
-];
-SacContextmenuItemButtonComponent.ctorParameters = () => [
-    { type: SacContextmenuCommon }
-];
-
-/**
- * Splitter Komponente in Context Menü
- */
-class SacContextmenuItemSplitterComponent extends SacContextmenuItemCommon {
-}
-SacContextmenuItemSplitterComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'sac-contextmenusplitter',
-                template: "<div class=\"dropdown-divider\"></div>"
-            },] }
-];
-
-/**
- * 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 }
-];
-
-class SACBootstrap4ContextmenuModule {
-}
-SACBootstrap4ContextmenuModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [
-                    SacContextmenuComponent,
-                    SacContextmenuItemButtonComponent,
-                    SacContextmenuItemSplitterComponent,
-                    SacContextmenuAnchorDirective,
-                    SacContextmenuContainerDirective,
-                ],
-                imports: [CommonModule],
-                exports: [
-                    SacContextmenuComponent,
-                    SacContextmenuItemButtonComponent,
-                    SacContextmenuItemSplitterComponent,
-                    SacContextmenuAnchorDirective,
-                ],
-            },] }
-];
-
-/**
- * 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>
- *
- */
-class SacFormDirective extends SacFormCommon {
-    /**
-     * Konstruktor
-     * @param form Instanz von NgForm für eigene automatische Formular Logik
-     */
-    constructor(form) {
-        super(form);
-        /**
-         * Setzt die Standard CSS Klasse für auf dem Form Container
-         */
-        this.cssClassForm = 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',] }]
-};
-
-// #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 SacFormular
- */
-function SACFORM_FACTORY(form) {
-    return form;
-}
-// #endregion Functions
-
-class SACBootstrap4FormModule {
-}
-SACBootstrap4FormModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [SacFormDirective, SacInheritFormDirective],
-                imports: [CommonModule, FormsModule],
-                exports: [SacFormDirective, SacInheritFormDirective],
-            },] }
-];
-
-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 'form-control-sm';
-            case ControlHeight.Large:
-                return 'form-control-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-' + 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));
-        }
-        if (value.labelSizeXl) {
-            classes.push('col-xl-' + this.calcControlSize(value.labelSizeXl));
-        }
-        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 'col-form-label-sm';
-            case ControlHeight.Large:
-                return 'col-form-label-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-' + 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);
-        }
-        if (value.labelSizeXl) {
-            classes.push('col-xl-' + value.labelSizeXl);
-        }
-        return classes.join(' ');
-    }
-}
-SacToLabelWidthCssPipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'toLabelWidthCss',
-            },] }
-];
-
-class SACBootstrap4LayoutModule {
-}
-SACBootstrap4LayoutModule.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 Value for Bootstrap5 Tooltip Padding
-     * @returns Static Padding Value for BS5
-     */
-    getTooltipOffset() {
-        return 2;
-    }
-}
-SacTooltipComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'sac-tooltip',
-                template: "<div [style.display]=\"inlinemode ? 'inline' : null\">\r\n  <div\r\n    #container\r\n    (mouseenter)=\"ShowTooltip()\"\r\n    (mouseleave)=\"HideTooltip()\"\r\n    [style.display]=\"inlinemode ? 'inline' : null\"\r\n  >\r\n    <ng-content></ng-content>\r\n  </div>\r\n  <div #tooltip *ngIf=\"IsTooltipVisible()\">\r\n    <div\r\n      [class.show]=\"IsTooltipContentVisible\"\r\n      class=\"tooltip bs-tooltip-auto fade\"\r\n      style=\"position: absolute\"\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      [attr.x-placement]=\"GetTooltipPosition() == TooltipPosition.right ? 'right' : GetTooltipPosition() == TooltipPosition.left ? 'left' :  GetTooltipPosition() == TooltipPosition.top ? 'top' :GetTooltipPosition() == TooltipPosition.bottom ? 'bottom' : null\"\r\n    >\r\n      <div\r\n        class=\"arrow\"\r\n        style=\"position: absolute\"\r\n        [style.top.px]=\"GetTooltipPosition() === TooltipPosition.left || GetTooltipPosition() === TooltipPosition.right ? (getToolTipHeight() / 2) - 6.5 : null\"\r\n        [style.left.px]=\"GetTooltipPosition() === TooltipPosition.bottom || GetTooltipPosition() === TooltipPosition.top ? (getToolTipWidth() / 2) - 6.5 : null\"\r\n      ></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 SACBootstrap4TooltipModule {
-}
-SACBootstrap4TooltipModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [SacTooltipComponent],
-                imports: [CommonModule],
-                exports: [SacTooltipComponent],
-            },] }
-];
-
-/**
- * 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 class=\"row form-group\" [class.no-gutters]=\"disablelabel\">\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}_label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    >{{label}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" class=\"ml-1\"></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"dropzone d-flex justify-content-center position-relative\"\r\n      (drop)=\"dropHandler($event)\"\r\n      (dragover)=\"onDragOver($event)\"\r\n      (dragleave)=\"onDragLeave($event)\"\r\n      [class.active]=\"active\"\r\n      [style.min-height]=\"uploadheight\"\r\n      [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n    >\r\n      <div\r\n        class=\"content d-flex justify-content-center\"\r\n        *ngIf=\"uploads.length === 0\"\r\n      >\r\n        <div class=\"align-self-center text-center\">\r\n          <div\r\n            [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n          >\r\n            <ng-content></ng-content>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div\r\n        class=\"content d-flex justify-content-center\"\r\n        *ngIf=\"uploads.length > 0\"\r\n      >\r\n        <div class=\"align-self-center progress-container\">\r\n          <div\r\n            class=\"dropzone-uploadstates\"\r\n            [class.mt-1]=\"i > 0\"\r\n            *ngFor=\"let file of uploads; let i = index\"\r\n          >\r\n            <div\r\n              class=\"input-group upload-component upload-component-multiple\"\r\n              [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n              [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n            >\r\n              <div class=\"form-control upload-progress border-secondary\">\r\n                <div class=\"progress\">\r\n                  <div\r\n                    class=\"progress-bar\"\r\n                    [class.progress-bar-success]=\"file.progress===100\"\r\n                    role=\"progressbar\"\r\n                    [attr.aria-valuenow]=\"file.progress\"\r\n                    aria-valuemin=\"0\"\r\n                    aria-valuemax=\"100\"\r\n                    [style.width.%]=\"file.progress\"\r\n                  >\r\n                    <span class=\"progress-text text-dark\">{{ file.name }}</span>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"input-group-append\">\r\n                <!-- image-preview-clear button -->\r\n                <a\r\n                  class=\"btn\"\r\n                  (click)=\"cancel(file.uploadId)\"\r\n                  [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                  [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n                >\r\n                  <span [class]=\"IconDelete\"></span>\r\n                </a>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <input\r\n        #files\r\n        multiple\r\n        id=\"{{ name }}_uploadinput\"\r\n        type=\"file\"\r\n        class=\"custom-file-input\"\r\n        (click)=\"files.value = ''\"\r\n        (uploadxState)=\"onUpload($event)\"\r\n        [disabled]=\"HasQueueItem()\"\r\n      />\r\n    </div>\r\n    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n",
-                providers: [
-                    {
-                        provide: NG_VALUE_ACCESSOR,
-                        multi: true,
-                        useExisting: SacDropzoneMultipleComponent,
-                    },
-                    {
-                        provide: NG_VALIDATORS,
-                        multi: true,
-                        useExisting: forwardRef(() => SacDropzoneMultipleComponent),
-                    },
-                ],
-                styles: [".dropzone{background:transparent;border:.125rem dashed #d3d3d3;border-radius:.5rem;min-height:9.75rem}.dropzone.is-invalid{border-color:var(--red)}.dropzone .content{bottom:0;left:0;position:absolute;right:0;top:0}.dropzone .content .is-invalid{color:var(--red)}.dropzone .content .progress-container{min-width:50%;z-index:100}.dropzone .content .dropzone-uploadstates .upload-progress{padding:0}.dropzone .content .dropzone-uploadstates .upload-progress .progress{border-bottom-right-radius:0;border-top-right-radius:0;height:100%}.dropzone .content .dropzone-uploadstates .upload-progress .progress .progress-text{left:0;position:absolute;right:0}.dropzone .custom-file-input{height:unset;min-height:100%}"]
-            },] }
-];
-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 class=\"row form-group\" [class.no-gutters]=\"disablelabel\">\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}_label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    >{{label}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" class=\"ml-1\"></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"dropzone d-flex justify-content-center position-relative\"\r\n      (drop)=\"dropHandler($event)\"\r\n      (dragover)=\"onDragOver($event)\"\r\n      (dragleave)=\"onDragLeave($event)\"\r\n      [style.min-height]=\"uploadheight\"\r\n      [class.active]=\"active\"\r\n      [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n    >\r\n      <div\r\n        class=\"content d-flex justify-content-center\"\r\n        *ngIf=\"uploads.length === 0\"\r\n      >\r\n        <div class=\"align-self-center text-center\">\r\n          <div\r\n            [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n          >\r\n            <ng-content></ng-content>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div\r\n        class=\"content d-flex justify-content-center\"\r\n        *ngIf=\"uploads.length > 0\"\r\n      >\r\n        <div class=\"align-self-center progress-container\">\r\n          <div class=\"dropzone-uploadstates\" *ngFor=\"let file of uploads\">\r\n            <div\r\n              class=\"input-group upload-component upload-component-multiple\"\r\n              [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n              [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n            >\r\n              <div class=\"form-control upload-progress border-secondary\">\r\n                <div class=\"progress\">\r\n                  <div\r\n                    class=\"progress-bar\"\r\n                    [class.progress-bar-success]=\"file.progress===100\"\r\n                    role=\"progressbar\"\r\n                    [attr.aria-valuenow]=\"file.progress\"\r\n                    aria-valuemin=\"0\"\r\n                    aria-valuemax=\"100\"\r\n                    [style.width.%]=\"file.progress\"\r\n                  >\r\n                    <span class=\"progress-text text-dark\">{{ file.name }}</span>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"input-group-append\">\r\n                <!-- image-preview-clear button -->\r\n                <a\r\n                  class=\"btn\"\r\n                  (click)=\"cancel(file.uploadId)\"\r\n                  [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                  [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n                >\r\n                  <span [class]=\"IconDelete\"></span>\r\n                </a>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <input\r\n        #files\r\n        id=\"{{ name }}_uploadinput\"\r\n        type=\"file\"\r\n        class=\"custom-file-input\"\r\n        (click)=\"files.value = ''\"\r\n        (uploadxState)=\"onUpload($event)\"\r\n        [disabled]=\"HasQueueItem()\"\r\n      />\r\n    </div>\r\n    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n",
-                providers: [
-                    {
-                        provide: NG_VALUE_ACCESSOR,
-                        multi: true,
-                        useExisting: SacDropzoneSingleComponent,
-                    },
-                    {
-                        provide: NG_VALIDATORS,
-                        multi: true,
-                        useExisting: forwardRef(() => SacDropzoneSingleComponent),
-                    },
-                ],
-                styles: [".dropzone{background:transparent;border:.125rem dashed #d3d3d3;border-radius:.5rem;min-height:9.75rem}.dropzone.is-invalid{border-color:var(--red)}.dropzone .content{bottom:0;left:0;position:absolute;right:0;top:0}.dropzone .content .is-invalid{color:var(--red)}.dropzone .content .progress-container{min-width:50%;z-index:100}.dropzone .content .dropzone-uploadstates .upload-progress{padding:0}.dropzone .content .dropzone-uploadstates .upload-progress .progress{border-bottom-right-radius:0;border-top-right-radius:0;height:100%}.dropzone .content .dropzone-uploadstates .upload-progress .progress .progress-text{left:0;position:absolute;right:0}.dropzone .custom-file-input{height:unset;min-height:100%}"]
-            },] }
-];
-SacDropzoneSingleComponent.ctorParameters = () => [
-    { type: SacFormLayoutDirective, decorators: [{ type: Host }, { type: Optional }] },
-    { type: Injector },
-    { type: Renderer2 },
-    { type: NgZone }
-];
-
-/**
- * Upload Komponten
- * @see 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 class=\"row form-group\" [class.no-gutters]=\"disablelabel\">\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}_label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    >{{label}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" class=\"ml-1\"></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group upload-component upload-single\"\r\n      [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n      [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      <div class=\"input-group-prepend\">\r\n        <!-- image-preview-input -->\r\n        <div\r\n          class=\"btn upload-input custom-file\"\r\n          [class.disabled]=\"HasQueueItem()\"\r\n          [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n          [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n        >\r\n          <i class=\"pr-2\" [class]=\"IconBrowse\"></i>\r\n          <span class=\"upload-browse\"\r\n            >{{\r\n            lngResourceService.GetString(validationKeyService.UploadButtonBrowse)\r\n            | async }}</span\r\n          >\r\n          <input\r\n            type=\"file\"\r\n            class=\"custom-file-input\"\r\n            #files\r\n            (click)=\"files.value = ''\"\r\n            (uploadxState)=\"onUpload($event)\"\r\n            multiple\r\n            [disabled]=\"HasQueueItem()\"\r\n          />\r\n        </div>\r\n      </div>\r\n      <div\r\n        class=\"form-control upload-progress\"\r\n        [ngClass]=\"[componentHeight | toControlHeight]\"\r\n        [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n      >\r\n        <div class=\"progress\">\r\n          <div\r\n            class=\"progress-bar\"\r\n            [class.progress-bar-success]=\"Progress()===100\"\r\n            role=\"progressbar\"\r\n            [attr.aria-valuenow]=\"Progress()\"\r\n            aria-valuemin=\"0\"\r\n            aria-valuemax=\"100\"\r\n            [style.width.%]=\"Progress()\"\r\n          >\r\n            <span class=\"progress-text text-dark\"\r\n              >{{ Filename() | async }}</span\r\n            >\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <!-- <input type=\"textimage-preview-filename\" class=\"form-control image-preview-filename\" disabled=\"disabled\"> --><!-- don't give a name === doesn't send on POST/GET -->\r\n      <div class=\"input-group-append\">\r\n        <!-- image-preview-clear button -->\r\n        <button\r\n          class=\"btn\"\r\n          (click)=\"cancelAll()\"\r\n          [attr.disabled]=\"HasQueueItem() === false ? 'disabled' : null\"\r\n          [class.disabled]=\"HasQueueItem() === false ? 'disabled' : null\"\r\n          [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n          [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n        >\r\n          <span [class]=\"IconDelete\"></span>\r\n        </button>\r\n        <button\r\n          *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && IsPaused() === false)\"\r\n          class=\"btn\"\r\n          (click)=\"pauseAll()\"\r\n          [attr.disabled]=\"IsUploading() === false ? 'disabled' : null\"\r\n          [class.disabled]=\"IsUploading() === false ? 'disabled' : null\"\r\n          [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n          [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n        >\r\n          <span [class]=\"IconPause\"></span>\r\n        </button>\r\n        <button\r\n          *ngIf=\"autoupload && enablepause && IsPaused()\"\r\n          class=\"btn\"\r\n          (click)=\"uploadAll()\"\r\n          [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n          [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n        >\r\n          <span [class]=\"IconContinue\"></span>\r\n        </button>\r\n        <button\r\n          *ngIf=\"autoupload === false\"\r\n          class=\"btn text-nowrap\"\r\n          (click)=\"uploadAll()\"\r\n          [attr.disabled]=\"IsStateToUpload() === false ?  'disabled' : null\"\r\n          [class.disabled]=\"IsStateToUpload() === false ?  'disabled' : null\"\r\n          [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n          [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n        >\r\n          <span [class]=\"IconUpload\" class=\"pr-2\"></span>{{\r\n          lngResourceService.GetString(validationKeyService.UploadButtonUpload)\r\n          | async }}\r\n        </button>\r\n      </div>\r\n    </div>\r\n    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n",
-                providers: [
-                    {
-                        provide: NG_VALUE_ACCESSOR,
-                        multi: true,
-                        useExisting: SacUploadComponent,
-                    },
-                    {
-                        provide: NG_VALIDATORS,
-                        multi: true,
-                        useExisting: forwardRef(() => SacUploadComponent),
-                    },
-                ],
-                styles: [".upload-component .custom-file{height:100%}.upload-component .custom-file .custom-file-input{bottom:0;left:0;position:absolute;right:0;top:0}.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{border:0;padding:0}.upload-component .upload-progress .progress{height:100%}.upload-component .upload-progress .progress .progress-text{left:0;position:absolute;right:0}"]
-            },] }
-];
-SacUploadComponent.ctorParameters = () => [
-    { type: SacFormLayoutDirective, decorators: [{ type: Host }, { type: Optional }] },
-    { type: Injector },
-    { type: Renderer2 },
-    { type: NgZone }
-];
-
-/**
- * Upload Komponente für den Upload mehrer Files
- * @see 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 class=\"row form-group\" [class.no-gutters]=\"disablelabel\">\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}_label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    >{{label}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" class=\"ml-1\"></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div class=\"upload-component\">\r\n      <div class=\"row\">\r\n        <div class=\"col-12\">\r\n          <div\r\n            class=\"btn-group\"\r\n            [class.btn-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n            [class.btn-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n            [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n          >\r\n            <div\r\n              class=\"btn upload-input custom-file\"\r\n              [class.disabled]=\"maxfiles > 0 &&  uploads.length >= maxfiles\"\r\n              [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n              [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n            >\r\n              <i [class]=\"IconBrowse\" class=\"pr-2\"></i>\r\n              <span class=\"upload-browse\">Browse</span>\r\n              <input\r\n                type=\"file\"\r\n                class=\"custom-file-input\"\r\n                #files\r\n                (click)=\"files.value = ''\"\r\n                (uploadxState)=\"onUpload($event)\"\r\n                multiple\r\n                [disabled]=\"maxfiles > 0 &&  uploads.length >= maxfiles\"\r\n              />\r\n            </div>\r\n\r\n            <div\r\n              class=\"btn-group\"\r\n              [class.btn-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n              [class.btn-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n            >\r\n              <!-- image-preview-clear button -->\r\n              <button\r\n                class=\"btn\"\r\n                (click)=\"cancelAll()\"\r\n                [attr.disabled]=\"HasQueueItem() === false ? 'disabled' : null\"\r\n                [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n              >\r\n                <span [class]=\"IconDelete\"></span>\r\n              </button>\r\n              <button\r\n                *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && IsPaused() === false)\"\r\n                class=\"btn\"\r\n                (click)=\"pauseAll()\"\r\n                [attr.disabled]=\"IsUploading() === false ? 'disabled' : null\"\r\n                [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n              >\r\n                <span [class]=\"IconPause\"></span>\r\n              </button>\r\n              <button\r\n                *ngIf=\"autoupload && enablepause && IsPaused() === true\"\r\n                class=\"btn\"\r\n                (click)=\"uploadAll()\"\r\n                [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n              >\r\n                <span [class]=\"IconContinue\"></span>\r\n              </button>\r\n              <button\r\n                *ngIf=\"autoupload === false\"\r\n                class=\"btn text-nowrap\"\r\n                (click)=\"uploadAll()\"\r\n                [attr.disabled]=\"IsStateToUpload() === false ?  'disabled' : null\"\r\n                [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n              >\r\n                <span [class]=\"IconUpload\" class=\"pr-2\"></span> {{\r\n                lngResourceService.GetString(validationKeyService.UploadButtonUpload)\r\n                | async }}\r\n              </button>\r\n            </div>\r\n          </div>\r\n          <div\r\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n            class=\"invalid-feedback\"\r\n          >\r\n            {{ GetErrorMessage() | async }}\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngFor=\"let file of uploads\" style=\"margin-top: 5px\">\r\n        <div\r\n          class=\"input-group upload-component upload-multiple\"\r\n          [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n          [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n        >\r\n          <div\r\n            class=\"form-control upload-progress\"\r\n            [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n          >\r\n            <div class=\"progress\">\r\n              <div\r\n                class=\"progress-bar\"\r\n                [class.progress-bar-success]=\"file.progress===100\"\r\n                role=\"progressbar\"\r\n                [attr.aria-valuenow]=\"file.progress\"\r\n                aria-valuemin=\"0\"\r\n                aria-valuemax=\"100\"\r\n                [style.width.%]=\"file.progress\"\r\n              >\r\n                <span class=\"progress-text text-dark\">{{ file.name }}</span>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"input-group-append\">\r\n            <!-- image-preview-clear button -->\r\n            <button\r\n              class=\"btn\"\r\n              (click)=\"cancel(file.uploadId)\"\r\n              [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n              [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n            >\r\n              <span [class]=\"IconDelete\"></span>\r\n            </button>\r\n            <button\r\n              *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && file.status !== 'paused')\"\r\n              class=\"btn\"\r\n              (click)=\"pause(file.uploadId)\"\r\n              [attr.disabled]=\"file.status !== 'uploading' ? 'disabled' : null\"\r\n              [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n              [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n            >\r\n              <span [class]=\"IconPause\"></span>\r\n            </button>\r\n            <button\r\n              *ngIf=\"autoupload && enablepause && file.status === 'paused'\"\r\n              class=\"btn\"\r\n              (click)=\"upload(file.uploadId)\"\r\n              [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n              [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n            >\r\n              <span [class]=\"IconContinue\"></span>\r\n            </button>\r\n            <button\r\n              *ngIf=\"autoupload === false\"\r\n              class=\"btn text-nowrap\"\r\n              (click)=\"upload(file.uploadId)\"\r\n              [attr.disabled]=\"file.status !== 'added' && file.status !== 'paused' ?  'disabled' : null\"\r\n              [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n              [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n            >\r\n              <span [class]=\"IconUpload\" class=\"pr-2\"></span>{{\r\n              lngResourceService.GetString(validationKeyService.UploadButtonUpload)\r\n              | async }}\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\r\n  </div>\r\n</div>\r\n",
-                providers: [
-                    {
-                        provide: NG_VALUE_ACCESSOR,
-                        multi: true,
-                        useExisting: SacUploadMultipleComponent,
-                    },
-                    {
-                        provide: NG_VALIDATORS,
-                        multi: true,
-                        useExisting: forwardRef(() => SacUploadMultipleComponent),
-                    },
-                ],
-                styles: [".upload-component .custom-file{height:100%}.upload-component .custom-file .custom-file-input{bottom:0;left:0;position:absolute;right:0;top:0}.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{border:0;padding:0}.upload-component .upload-progress .progress{height:100%}.upload-component .upload-progress .progress .progress-text{left:0;position:absolute;right:0}"]
-            },] }
-];
-SacUploadMultipleComponent.ctorParameters = () => [
-    { type: SacFormLayoutDirective, decorators: [{ type: Host }, { type: Optional }] },
-    { type: Injector },
-    { type: Renderer2 },
-    { type: NgZone }
-];
-
-class SACBootstrap4UploadModule {
-}
-SACBootstrap4UploadModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [
-                    SacUploadComponent,
-                    SacUploadMultipleComponent,
-                    SacDropzoneSingleComponent,
-                    SacDropzoneMultipleComponent,
-                ],
-                imports: [
-                    CommonModule,
-                    FormsModule,
-                    SACBootstrap4LayoutModule,
-                    SACBootstrap4TooltipModule,
-                ],
-                exports: [
-                    SacUploadComponent,
-                    SacUploadMultipleComponent,
-                    SacDropzoneSingleComponent,
-                    SacDropzoneMultipleComponent,
-                ],
-            },] }
-];
-
-/**
- * Server File Browser Komponente
- */
-class SacBrowserComponent extends SacFileBrowserCommon {
-    // #endregion Properties
-    // #region Constructors
-    /**
-     * Konstruktor
-     * @param httpClient HTTP Client
-     * @param injector Angular Dependency Injection Service
-     * @param confirmService Confirm Service
-     */
-    constructor(httpClient, injector, confirmService) {
-        super(httpClient, injector);
-        this.confirmService = confirmService;
-    }
-    // #endregion Constructors
-    // #region Public Methods
-    /**
-     * Confirm Action wenn ein File gelöscht werden soll
-     * @param file File das gelöscht werden soll.
-     * @returns Observable ob File gelöscht werden kann.
-     */
-    confirmDeleteFile(file) {
-        return new Observable((observer) => {
-            forkJoin({
-                title: this.lngResourceService.GetString(this.validationKeyService.FilebrowserButtonDelete),
-                message: this.lngResourceService.GetString(this.validationKeyService.FilebrowserConfirmTextDeleteFile),
-            }).subscribe((text) => {
-                this.confirmService
-                    .ConfirmMessage(text.title, text.message)
-                    .subscribe((result) => {
-                    if (result === 'yes') {
-                        observer.next(true);
-                    }
-                    else {
-                        observer.next(false);
-                    }
-                    observer.complete();
-                });
-            });
-        });
-    }
-    /**
-     * Confirm Action wenn ein Ordner gelöscht werden soll
-     * @param node Ordner der gelöscht werden soll
-     * @returns Observable ob Ordner gelöscht kann.
-     */
-    confirmDeleteNode(node) {
-        return new Observable((observer) => {
-            forkJoin({
-                title: this.lngResourceService.GetString(this.validationKeyService.FilebrowserButtonDelete),
-                message: this.lngResourceService.GetString(this.validationKeyService.FilebrowserConfirmTextDeleteFolder),
-            }).subscribe((text) => {
-                this.confirmService
-                    .ConfirmMessage(text.title, text.message)
-                    .subscribe((result) => {
-                    if (result === 'yes') {
-                        observer.next(true);
-                    }
-                    else {
-                        observer.next(false);
-                    }
-                    observer.complete();
-                });
-            });
-        });
-    }
-    /**
-     * Erzeugt ein Array von einer bestimmten grösse
-     * @param anzahl Grösse des Array
-     * @returns Array
-     */
-    count(anzahl) {
-        return new Array(anzahl);
-    }
-    /**
-     * Methode wird aufgerufen, wenn eine Datei verschoben wird
-     * @param uploadid Upload ID
-     */
-    uploadedFileMoved(uploadid) {
-        const item = this.uploadComponent.uploads.find((itm) => itm.documentid === uploadid);
-        if (item) {
-            this.uploadComponent.cancel(item.uploadId);
-        }
-    }
-}
-SacBrowserComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'sac-filebrowser',
-                template: "<div class=\"row\">\r\n  <div class=\"col-12 col-md-5 col-lg-4\">\r\n    <ul class=\"list-group list-group-flush\">\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"treeItem\"\r\n        [ngTemplateOutletContext]=\"{node: rootNode, deep: 0}\"\r\n      ></ng-template>\r\n    </ul>\r\n\r\n    <ng-template #treeItem let-node=\"node\" let-deep=\"deep\">\r\n      <li\r\n        class=\"list-group-item py-1 px-2 d-flex align-items-center\"\r\n        [class.list-group-item-secondary]=\"node === selectedNode\"\r\n        (click)=\"selectNode(node)\"\r\n        style=\"cursor: pointer\"\r\n      >\r\n        <div class=\"mx-3\" *ngFor=\"let i of count(deep)\"></div>\r\n        <div\r\n          (click)=\"switchExpandNode(node);$event.stopPropagation();\"\r\n          class=\"mr-2\"\r\n          [ngClass]=\"node.ChildNodes.length === 0 ? iconFolderEmpty: (!node.IsExpanded && node.ChildNodes.length > 0 ? iconFolderCollabsed : (node.IsExpanded && node.ChildNodes.length > 0 ? iconFolderOpen : ''))\"\r\n        ></div>\r\n        <ng-container *ngIf=\"!node.IsEditMode\">\r\n          <div class=\"flex-grow-1\">{{ node.Name }}</div>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"node.IsEditMode\">\r\n          <div class=\"flex-grow-1\" ngForm>\r\n            <input\r\n              name=\"editFolder\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"node.Name\"\r\n              [ngModelOptions]=\"{updateOn: 'blur'}\"\r\n              (ngModelChange)=\"renameNode(node, $event)\"\r\n              (keydown.enter)=\"$event.target.blur();false;\"\r\n              (blur)=\"renameNode(node, null)\"\r\n              (click)=\"$event.stopPropagation()\"\r\n            />\r\n          </div>\r\n        </ng-container>\r\n        <div class=\"flex-shrink-0\">\r\n          <a\r\n            *ngIf=\"node.Path !== '/' && allowfolderrename\"\r\n            class=\"btn btn-sm btn-link text-secondary\"\r\n            (click)=\"editNode(node);$event.stopPropagation();\"\r\n          >\r\n            <i [class]=\"iconEdit\"></i>\r\n          </a>\r\n          <sac-contextmenu cssclass=\"d-inline-block\">\r\n            <sac-contextmenubutton\r\n              *ngIf=\"allowfoldercreate\"\r\n              text=\"{{ lngResourceService.GetString(validationKeyService.FilebrowserButtonNewFolder) | async }}\"\r\n              [icon]=\"iconFolderNew\"\r\n              (clicked)=\"newNode(node)\"\r\n            ></sac-contextmenubutton>\r\n            <sac-contextmenubutton\r\n              *ngIf=\"node.Path !== '/' && allowfolderdelete\"\r\n              text=\"{{ lngResourceService.GetString(validationKeyService.FilebrowserButtonDelete) | async }}\"\r\n              [icon]=\"iconDelete\"\r\n              (clicked)=\"deleteNode(node)\"\r\n            ></sac-contextmenubutton>\r\n            <sac-contextmenusplitter\r\n              *ngIf=\"allowfoldercreate || (node.Path !== '/' && allowfolderdelete)\"\r\n            ></sac-contextmenusplitter>\r\n            <sac-contextmenubutton\r\n              text=\"{{ lngResourceService.GetString(validationKeyService.FilebrowserButtonRefresh) | async }}\"\r\n              [icon]=\"iconRefresh\"\r\n              (clicked)=\"refreshNode(node)\"\r\n            ></sac-contextmenubutton>\r\n          </sac-contextmenu>\r\n        </div>\r\n      </li>\r\n\r\n      <ng-container *ngIf=\"node.IsExpanded\">\r\n        <ng-template\r\n          *ngFor=\"let child of node.ChildNodes\"\r\n          [ngTemplateOutlet]=\"treeItem\"\r\n          [ngTemplateOutletContext]=\"{node: child, deep: deep + 1}\"\r\n        ></ng-template>\r\n      </ng-container>\r\n    </ng-template>\r\n  </div>\r\n  <div class=\"col-12 col-md-7 col-lg-8\">\r\n    <ng-container *ngIf=\"selectedNode && selectedNode.Files\">\r\n      <div *ngIf=\"allowfileupload\" ngForm>\r\n        <sac-dropzonemultiple\r\n          [disablelabel]=\"true\"\r\n          [endpoint]=\"apiurl + '/uploadregister'\"\r\n          name=\"upload\"\r\n          uploadheight=\"5rem\"\r\n          [ngModel]=\"uploads\"\r\n          (ngModelChange)=\"uploadComplete(selectedNode,$event)\"\r\n          [allowedtypes]=\"allowedtypes\"\r\n          >{{\r\n          lngResourceService.GetString(validationKeyService.FilebrowserButtonUpload)\r\n          | async }}</sac-dropzonemultiple\r\n        >\r\n      </div>\r\n      <div class=\"table-responsive\">\r\n        <table class=\"table table-striped table-hover align-middle\">\r\n          <thead>\r\n            <th>\r\n              {{\r\n              lngResourceService.GetString(validationKeyService.FilebrowserGridFilename)\r\n              | async }}\r\n            </th>\r\n            <th>\r\n              {{\r\n              lngResourceService.GetString(validationKeyService.FilebrowserGridSize)\r\n              | async }}\r\n            </th>\r\n            <th style=\"width: 80px\"></th>\r\n          </thead>\r\n          <tbody>\r\n            <ng-container *ngIf=\"selectedNode.Files.length === 0\">\r\n              <tr>\r\n                <td colspan=\"3\">\r\n                  {{\r\n                  lngResourceService.GetString(validationKeyService.FilebrowserGridNoFiles)\r\n                  | async }}\r\n                </td>\r\n              </tr>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"selectedNode.Files.length > 0\">\r\n              <tr\r\n                *ngFor=\"let item of selectedNode.Files\"\r\n                (click)=\"selectFile(item)\"\r\n                [class.table-primary]=\"selectedFileItem === item\"\r\n              >\r\n                <td [class.p-2]=\"item.IsEditMode\">\r\n                  <ng-container *ngIf=\"!item.IsEditMode\">\r\n                    {{ item.Filename }}\r\n                  </ng-container>\r\n                  <ng-container *ngIf=\"item.IsEditMode\">\r\n                    <div>\r\n                      <input\r\n                        name=\"editFolder\"\r\n                        class=\"form-control form-control-sm\"\r\n                        [ngModel]=\"item.Filename\"\r\n                        [ngModelOptions]=\"{updateOn: 'blur'}\"\r\n                        (ngModelChange)=\"renameFile(item, $event)\"\r\n                        (keydown.enter)=\"$event.target.blur();false\"\r\n                        (blur)=\"renameFile(item, null)\"\r\n                        (click)=\"$event.stopPropagation();\"\r\n                      />\r\n                    </div>\r\n                  </ng-container>\r\n                </td>\r\n                <td>{{ item.Size}}</td>\r\n                <td class=\"p-2\">\r\n                  <div class=\"btn-toolbar\" role=\"toolbar\">\r\n                    <div class=\"btn-group ml-auto\" role=\"group\">\r\n                      <a\r\n                        *ngIf=\"allowfilerename\"\r\n                        class=\"btn btn-sm btn-link text-secondary\"\r\n                        (click)=\"editFile(item);$event.stopPropagation();\"\r\n                        ><i [class]=\"iconEdit\"></i\r\n                      ></a>\r\n                    </div>\r\n                    <div class=\"btn-group\" role=\"group\">\r\n                      <a\r\n                        *ngIf=\"allowfiledelete\"\r\n                        class=\"btn btn-sm btn-link text-secondary\"\r\n                        (click)=\"deleteFile(item);$event.stopPropagation();\"\r\n                        ><i [class]=\"iconDelete\"></i\r\n                      ></a>\r\n                    </div>\r\n                  </div>\r\n                </td>\r\n              </tr>\r\n            </ng-container>\r\n          </tbody>\r\n        </table>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</div>\r\n",
-                providers: [ServiceConfirm]
-            },] }
-];
-SacBrowserComponent.ctorParameters = () => [
-    { type: HttpClient },
-    { type: Injector },
-    { type: ServiceConfirm }
-];
-SacBrowserComponent.propDecorators = {
-    uploadComponent: [{ type: ViewChild, args: [SacDropzoneMultipleComponent, { static: false },] }]
-};
-
-class SACBootstrap4BrowserModule {
-}
-SACBootstrap4BrowserModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [SacBrowserComponent],
-                imports: [
-                    CommonModule,
-                    HttpClientModule,
-                    SACBootstrap4ConfirmModule,
-                    SACBootstrap4ContextmenuModule,
-                    SACBootstrap4UploadModule,
-                    SACBootstrap4FormModule,
-                    FormsModule,
-                ],
-                exports: [SacBrowserComponent],
-                bootstrap: [SacBrowserComponent],
-            },] }
-];
-
-/**
- * Checkbox Kompontente
- */
-class SacCheckboxComponent extends SacCheckboxCommon {
-    // #region Constructors
-    /**
-     *
-     * @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.no-gutters]=\"disablelabel\"\r\n  [class.form-group]=\"!stacked\"\r\n>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\r\n  >\r\n    <label\r\n      *ngIf=\"!disablelabel && !stacked\"\r\n      for=\"{{name}}\"\r\n      class=\"col-form-label\"\r\n      [ngClass]=\"componentHeight | toLabelHeight\"\r\n      >{{label}}<sac-tooltip\r\n        *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n        [tooltiptext]=\"helptext\"\r\n        [inlinemode]=\"true\"\r\n        ><span\r\n          [ngClass]=\"HelptextTooltipIcon\"\r\n          class=\"ml-1\"\r\n        ></span> </sac-tooltip\r\n    ></label>\r\n  </div>\r\n  <div\r\n    class=\"align-self-center col-12\"\r\n    [ngClass]=\"[!disablelabel && !stacked ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"form-check\"\r\n      [class.form-check-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.form-check-lg]=\"componentHeight === ControlHeight.Large\"\r\n    >\r\n      <input\r\n        class=\"form-check-input\"\r\n        [class.form-check-input-sm]=\"componentHeight === ControlHeight.Small\"\r\n        [class.form-check-input-lg]=\"componentHeight === ControlHeight.Large\"\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"checkbox\"\r\n        [checked]=\"value\"\r\n        (blur)=\"onTouch()\"\r\n        (change)=\"setValue($event.target.checked)\"\r\n        [disabled]=\"isdisabled\"\r\n      />\r\n      <label\r\n        for=\"{{name}}\"\r\n        class=\"form-check-label\"\r\n        [class.form-check-label-sm]=\"componentHeight === ControlHeight.Small\"\r\n        [class.form-check-label-lg]=\"componentHeight === ControlHeight.Large\"\r\n      >\r\n        <ng-container *ngIf=\"checkboxtext\">{{checkboxtext}}</ng-container>\r\n      </label>\r\n    </div>\r\n    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\r\n  </div>\r\n</div>\r\n",
-                // 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: [".form-check-lg{padding-left:1.75rem}.form-check-input{height:1rem;width:1rem}.form-check-input-sm{height:.875rem;margin-top:.4rem;width:.875rem}.form-check-input-lg{height:1.25rem;margin-left:-1.75rem;width:1.25rem}.form-check-label-sm{font-size:.875rem}.form-check-label-lg{font-size:1.25rem}"]
-            },] }
-];
-SacCheckboxComponent.ctorParameters = () => [
-    { type: SacFormLayoutDirective, decorators: [{ type: Host }, { type: Optional }] },
-    { type: Injector }
-];
-
-/**
- * Radiobuttons Group Komponente
- */
-class SacRadiobuttonsComponent extends SacRadiobuttonsCommon {
-    // #region Constructors
-    /**
-     *
-     * @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 class=\"row form-group\">\r\n  <div\r\n    *ngIf=\"disablelabel === false\"\r\n    class=\"col-12 pt-0\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\r\n  >\r\n    <label\r\n      class=\"col-form-label\"\r\n      [ngClass]=\"componentHeight | toLabelHeight\"\r\n      *ngIf=\"!disablelabel\"\r\n      >{{label}}<sac-tooltip\r\n        *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n        [tooltiptext]=\"helptext\"\r\n        [inlinemode]=\"true\"\r\n        ><span\r\n          [ngClass]=\"HelptextTooltipIcon\"\r\n          class=\"ml-1\"\r\n        ></span> </sac-tooltip\r\n    ></label>\r\n  </div>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n    [class.pt-1]=\"componentHeight === ControlHeight.Small\"\r\n    [class.pt-2]=\"componentHeight !== ControlHeight.Small\"\r\n  >\r\n    <ng-content></ng-content>\r\n    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\r\n  </div>\r\n</div>\r\n",
-                // 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 }
-];
-
-/**
- * Radiobutton Komponente
- */
-class SacRadiobuttonComponent extends SacRadiobuttonCommon {
-    /**
-     * Konstruktor
-     * @param SacRadioButtons Radio Buttons Group Komponente
-     */
-    constructor(sacRadioButtons) {
-        super(sacRadioButtons);
-    }
-}
-SacRadiobuttonComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'sac-radiobutton',
-                template: "<div\r\n  class=\"form-check\"\r\n  [class.form-check-sm]=\"componentHeight === ControlHeight.Small\"\r\n  [class.form-check-lg]=\"componentHeight === ControlHeight.Large\"\r\n  *ngIf=\"hidden===false\"\r\n>\r\n  <input\r\n    id=\"{{getName}}_{{getIndex}}\"\r\n    name=\"{{getName}}\"\r\n    type=\"radio\"\r\n    class=\"form-check-input\"\r\n    [class.form-check-input-sm]=\"componentHeight === ControlHeight.Small\"\r\n    [class.form-check-input-lg]=\"componentHeight === ControlHeight.Large\"\r\n    [value]=\"value\"\r\n    [checked]=\"checked\"\r\n    (change)=\"ChangeEvent()\"\r\n    [disabled]=\"isDisabled\"\r\n  />\r\n  <label\r\n    for=\"{{getName}}_{{getIndex}}\"\r\n    class=\"form-check-label\"\r\n    [class.form-check-label-sm]=\"componentHeight === ControlHeight.Small\"\r\n    [class.form-check-label-lg]=\"componentHeight === ControlHeight.Large\"\r\n  >\r\n    <ng-template\r\n      *ngTemplateOutlet=\"labeltemplate || defaultItemLabelTemplate;context:{ label: label }\"\r\n    >\r\n    </ng-template>\r\n  </label>\r\n</div>\r\n\r\n<ng-template #defaultItemLabelTemplate let-label=\"label\">{{label}}</ng-template>\r\n",
-                styles: [".form-check-lg{padding-left:1.75rem}.form-check-input{height:1rem;width:1rem}.form-check-input-sm{height:.875rem;margin-top:.4rem;width:.875rem}.form-check-input-lg{height:1.25rem;margin-left:-1.75rem;margin-top:.4rem;width:1.25rem}.form-check-label-sm{font-size:.875rem}.form-check-label-lg{font-size:1.25rem}"]
-            },] }
-];
-SacRadiobuttonComponent.ctorParameters = () => [
-    { type: SacRadiobuttonsComponent, decorators: [{ type: Host }] }
-];
-
-class SACBootstrap4CheckboxModule {
-}
-SACBootstrap4CheckboxModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [
-                    SacCheckboxComponent,
-                    SacRadiobuttonComponent,
-                    SacRadiobuttonsComponent,
-                ],
-                imports: [
-                    CommonModule,
-                    SACBootstrap4LayoutModule,
-                    SACBootstrap4TooltipModule,
-                ],
-                exports: [
-                    SacCheckboxComponent,
-                    SacRadiobuttonComponent,
-                    SacRadiobuttonsComponent,
-                ],
-            },] }
-];
-
-/**
- * Referenz auf Moment.JS
- */
-const moment = moment_;
-/**
- * Komponente für Datumauswahl
- */
-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
-     */
-    constructor(formLayout, injector, elementRef) {
-        super(formLayout, injector, elementRef);
-    }
-}
-SacDateComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'sac-date',
-                template: "<div class=\"row form-group\" [class.no-gutters]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    >{{label}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" class=\"ml-1\"></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group\"\r\n      [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n      [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      <input\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        [imask]=\"imaskDate\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        [value]=\"valuestring\"\r\n        [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n        [ngClass]=\"[componentHeight | toControlHeight]\"\r\n        (blur)=\"onTouch()\"\r\n        (accept)=\"setValueString($event)\"\r\n        [disabled]=\"isdisabled\"\r\n      />\r\n      <div class=\"input-group-append\">\r\n        <button\r\n          class=\"btn btn-secondary\"\r\n          type=\"button\"\r\n          (click)=\"showDateSelector()\"\r\n          [disabled]=\"isdisabled\"\r\n        >\r\n          <i [class]=\"IconSelector\"></i>\r\n        </button>\r\n      </div>\r\n      <div\r\n        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n        class=\"invalid-feedback\"\r\n      >\r\n        {{ GetErrorMessage() | async }}\r\n      </div>\r\n    </div>\r\n    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\r\n    <div\r\n      class=\"popover fade bs-popover-bottom show\"\r\n      role=\"tooltip\"\r\n      *ngIf=\"_showselector\"\r\n      style=\"\r\n        display: block;\r\n        left: unset;\r\n        right: 0px;\r\n        top: unset;\r\n        max-width: 325px;\r\n      \"\r\n    >\r\n      <div\r\n        class=\"arrow\"\r\n        style=\"left: unset\"\r\n        [style.right.rem]=\"componentHeight === ControlHeight.Small ? 1.1 : componentHeight === ControlHeight.Large ? 1.8 : 1.4\"\r\n      ></div>\r\n      <h3 class=\"popover-header\" style=\"display: none\"></h3>\r\n      <div class=\"popover-body\">\r\n        <sac-dateselector\r\n          [initialvalue]=\"value\"\r\n          (selectdate)=\"dateselect($event)\"\r\n          dateselection=\"true\"\r\n        ></sac-dateselector>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
-                // 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 }
-];
-
-/**
- * DateTime Selektor Komponente
- */
-class SacDateSelectorComponent extends SacDateSelectorCommon {
-}
-SacDateSelectorComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'sac-dateselector',
-                template: "<div class=\"calendar-selector\">\r\n  <div *ngIf=\"dateselection\">\r\n    <div class=\"container\">\r\n      <div class=\"row\">\r\n        <div class=\"col text-left\">\r\n          <a (click)=\"monthBack()\"><span [class]=\"iconMonthPrev\"></span></a>\r\n        </div>\r\n        <div class=\"col text-center\">{{month+1}}/{{year}}</div>\r\n        <div class=\"col text-right\">\r\n          <a (click)=\"monthNext()\"><span [class]=\"iconMonthNext\"></span></a>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div></div>\r\n    <div class=\"container\">\r\n      <div class=\"row\">\r\n        <ng-container *ngFor=\"let week of dates; let i=index\">\r\n          <ng-container *ngFor=\"let item of week\">\r\n            <div\r\n              class=\"p-2 col text-center\"\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            </div>\r\n          </ng-container>\r\n          <div class=\"w-100\"></div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"d-flex flex-row justify-content-start\" *ngIf=\"timeselection\">\r\n    <div class=\"p-2\">\r\n      <div class=\"form-group\">\r\n        <label>Stunde</label>\r\n        <input\r\n          type=\"number\"\r\n          class=\"form-control form-control-sm\"\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=\"p-2\">\r\n      <div class=\"form-group\">\r\n        <label>Minute</label>\r\n        <input\r\n          type=\"number\"\r\n          class=\"form-control form-control-sm\"\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 class=\"d-flex flex-row\">\r\n    <div class=\"mr-auto p-2\">\r\n      <button type=\"button\" class=\"btn btn-secondary\" (click)=\"setToday()\">\r\n        Heute\r\n      </button>\r\n    </div>\r\n    <div class=\"p-2\">\r\n      <button\r\n        type=\"button\"\r\n        class=\"btn btn-secondary\"\r\n        (click)=\"resetSelection()\"\r\n      >\r\n        Reset\r\n      </button>\r\n    </div>\r\n    <div class=\"p-2\">\r\n      <button type=\"button\" class=\"btn btn-primary\" (click)=\"applySelection()\">\r\n        Apply\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n"
-            },] }
-];
-
-/**
- * Date und Time Komponente
- */
-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
-     */
-    constructor(formLayout, injector, elementRef) {
-        super(formLayout, injector, elementRef);
-    }
-}
-SacDateTimeComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'sac-datetime',
-                template: "<div class=\"row form-group\" [class.no-gutters]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    >{{label}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" class=\"ml-1\"></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group\"\r\n      [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n      [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      <input\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        [imask]=\"imaskDate\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        [value]=\"valuestring\"\r\n        [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n        [ngClass]=\"[componentHeight | toControlHeight]\"\r\n        (blur)=\"onTouch()\"\r\n        (accept)=\"setValueString($event)\"\r\n        [disabled]=\"isdisabled\"\r\n      />\r\n      <div class=\"input-group-append\">\r\n        <button\r\n          class=\"btn btn-secondary\"\r\n          type=\"button\"\r\n          (click)=\"showDateSelector()\"\r\n          [disabled]=\"isdisabled\"\r\n        >\r\n          <i [class]=\"IconSelector\"></i>\r\n        </button>\r\n      </div>\r\n      <div\r\n        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n        class=\"invalid-feedback\"\r\n      >\r\n        {{ GetErrorMessage() | async }}\r\n      </div>\r\n    </div>\r\n    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\r\n    <div\r\n      class=\"popover fade bs-popover-bottom show\"\r\n      role=\"tooltip\"\r\n      *ngIf=\"_showselector\"\r\n      style=\"\r\n        display: block;\r\n        left: unset;\r\n        right: 0px;\r\n        top: unset;\r\n        max-width: 325px;\r\n      \"\r\n    >\r\n      <div\r\n        class=\"arrow\"\r\n        style=\"left: unset\"\r\n        [style.right.rem]=\"componentHeight === ControlHeight.Small ? 1.1 : componentHeight === ControlHeight.Large ? 1.8 : 1.4\"\r\n      ></div>\r\n      <h3 class=\"popover-header\" style=\"display: none\"></h3>\r\n      <div class=\"popover-body\">\r\n        <sac-dateselector\r\n          [initialvalue]=\"value\"\r\n          (selectdate)=\"dateselect($event)\"\r\n          dateselection=\"true\"\r\n          timeselection=\"true\"\r\n        ></sac-dateselector>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
-                // 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 }
-];
-
-/**
- * Time Auswahl Komponente
- */
-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
-     */
-    constructor(formLayout, injector, elementRef) {
-        super(formLayout, injector, elementRef);
-    }
-}
-SacTimeComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'sac-time',
-                template: "<div class=\"row form-group\" [class.no-gutters]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    >{{label}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" class=\"ml-1\"></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group\"\r\n      [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n      [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      <input\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        [imask]=\"imaskDate\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        [value]=\"valuestring\"\r\n        [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n        [ngClass]=\"[componentHeight | toControlHeight]\"\r\n        (blur)=\"onTouch()\"\r\n        (accept)=\"setValueString($event)\"\r\n        [disabled]=\"isdisabled\"\r\n      />\r\n      <div class=\"input-group-append\">\r\n        <button\r\n          class=\"btn btn-secondary\"\r\n          type=\"button\"\r\n          (click)=\"showTimeSelector()\"\r\n          [disabled]=\"isdisabled\"\r\n        >\r\n          <i [class]=\"IconSelector\"></i>\r\n        </button>\r\n      </div>\r\n      <div\r\n        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n        class=\"invalid-feedback\"\r\n      >\r\n        {{ GetErrorMessage() | async }}\r\n      </div>\r\n    </div>\r\n    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\r\n    <div\r\n      class=\"popover fade bs-popover-bottom show\"\r\n      role=\"tooltip\"\r\n      *ngIf=\"_showselector\"\r\n      style=\"\r\n        display: block;\r\n        left: unset;\r\n        right: 0px;\r\n        top: unset;\r\n        max-width: 325px;\r\n      \"\r\n    >\r\n      <div\r\n        class=\"arrow\"\r\n        style=\"left: unset\"\r\n        [style.right.rem]=\"componentHeight === ControlHeight.Small ? 1.1 : componentHeight === ControlHeight.Large ? 1.8 : 1.4\"\r\n      ></div>\r\n      <h3 class=\"popover-header\" style=\"display: none\"></h3>\r\n      <div class=\"popover-body\">\r\n        <sac-dateselector\r\n          [initialvalue]=\"value\"\r\n          (selectdate)=\"timeselect($event)\"\r\n          timeselection=\"true\"\r\n        ></sac-dateselector>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
-                // 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 }
-];
-
-class SACBootstrap4DateTimeModule {
-}
-SACBootstrap4DateTimeModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [
-                    SacDateComponent,
-                    SacDateTimeComponent,
-                    SacTimeComponent,
-                    SacDateSelectorComponent,
-                ],
-                imports: [
-                    CommonModule,
-                    IMaskModule,
-                    SACBootstrap4LayoutModule,
-                    SACBootstrap4TooltipModule,
-                ],
-                exports: [
-                    SacDateComponent,
-                    SacDateTimeComponent,
-                    SacTimeComponent,
-                    SacDateSelectorComponent,
-                ],
-            },] }
-];
-
-/**
- * Grid Komponente
- */
-class SacGridComponent extends SacGridCommon {
-    // #endregion Properties
-    // #region Constructors
-    /**
-     * Konstrukor
-     * @param cdRef Change Detection Reference
-     */
-    constructor(cdRef, injector) {
-        super(cdRef, injector);
-        /**
-         * Setzt die Ellipsis Funktion auf der Column
-         */
-        this.ellipsis = false;
-    }
-}
-SacGridComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'sac-grid',
-                template: "<div class=\"table-responsive\">\r\n  <table class=\"table table-striped table-hover\" id=\"{{name}}\">\r\n    <thead class=\"thead-light\">\r\n      <tr>\r\n        <ng-container\r\n          *ngTemplateOutlet=\"template; context { row: {}, type: 'header'}\"\r\n        >\r\n        </ng-container>\r\n      </tr>\r\n    </thead>\r\n    <tbody>\r\n      <ng-container *ngFor=\"let item of value; let i=index\">\r\n        <tr>\r\n          <ng-container\r\n            *ngTemplateOutlet=\"template; context { row: item, type: 'body'}\"\r\n          >\r\n          </ng-container>\r\n        </tr>\r\n      </ng-container>\r\n      <tr *ngIf=\"value === undefined || value === null || value.length===0\">\r\n        <td [attr.colspan]=\"ColumnCount\">{{emptytext}}</td>\r\n      </tr>\r\n      <tr *ngIf=\"pagerdata\">\r\n        <td [attr.colspan]=\"ColumnCount\">\r\n          <div class=\"container-fluid\">\r\n            <sac-paging\r\n              name=\"{{name}}Paging\"\r\n              (paging)=\"pageChange($event)\"\r\n              [pagerdata]=\"pagerdata\"\r\n              [pagesizes]=\"pagesizes\"\r\n              [pagingtext]=\"pagingtext\"\r\n              [pagesizetext]=\"pagesizetext\"\r\n              [pagesizedisabled]=\"pagesizedisabled\"\r\n            ></sac-paging>\r\n          </div>\r\n        </td>\r\n      </tr>\r\n    </tbody>\r\n  </table>\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: SacGridComponent },
-                    {
-                        provide: NG_VALIDATORS,
-                        multi: true,
-                        useExisting: forwardRef(() => SacGridComponent),
-                    },
-                ]
-            },] }
-];
-SacGridComponent.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: Injector }
-];
-SacGridComponent.propDecorators = {
-    template: [{ type: ContentChild, args: [TemplateRef, { static: false },] }]
-};
-
-/**
- * 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"
-            },] }
-];
-
-/**
- * Grid Column Komponente
- */
-class SacGridColumnComponent extends SacGridColumnCommon {
-    /**
-     * Konstruktor
-     * @param grid Grid Referenz
-     * @param el HTML DOM Element
-     */
-    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>\r\n  <span>{{header}}</span>\r\n  <span\r\n    class=\"pl-2\"\r\n    [class]=\"IconSortUp\"\r\n    *ngIf=\"IsSortedColumn() && GetSortDirection() ==='asc'\"\r\n  ></span>\r\n  <span\r\n    class=\"pl-2\"\r\n    [class]=\"IconSortDown\"\r\n    *ngIf=\"IsSortedColumn() && GetSortDirection() ==='desc'\"\r\n  ></span>\r\n</th>\r\n<td\r\n  scope=\"col\"\r\n  *ngIf=\"IsBody()\"\r\n  [style.width]=\"width\"\r\n  [class.ellipsis]=\"IsEllipsis()\"\r\n>\r\n  <span [attr.title]=\"IsEllipsis() ? value : null\"> {{value}} </span>\r\n</td>\r\n",
-                providers: [
-                    {
-                        provide: SacGridColumnBaseCommon,
-                        useExisting: forwardRef(() => SacGridColumnComponent),
-                    },
-                ]
-            },] }
-];
-SacGridColumnComponent.ctorParameters = () => [
-    { type: SacGridComponent },
-    { type: Injector },
-    { type: ElementRef }
-];
-
-/**
- * Grid Action Komponent
- */
-class SacGridColumnActionComponent extends SacGridColumnActionCommon {
-    /**
-     * Konstruktor
-     * @param grid Referenz auf Grid
-     * @param el HTML Element Referenz
-     */
-    constructor(grid, injector, el) {
-        super(grid, injector, el);
-        this.width = '60px';
-    }
-}
-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\" class=\"px-2\" *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 }
-];
-
-/**
- * Image Item für Grid
- */
-class SacGridImageComponent extends SacGridImageCommon {
-    /**
-     * Gibt die CSS Klassen für Sprite Images zurück
-     * @returns CSS Klasse
-     */
-    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><span class=\"{{getIconClass()}}\"></span></span>\r\n"
-            },] }
-];
-
-/**
- * Paging Komponente
- */
-class SacPagingComponent extends SacPagingCommon {
-    /**
-     * Konstruktor
-     * @param injector Angular Dependency Injection Service
-     */
-    constructor(injector) {
-        super(injector);
-    }
-}
-SacPagingComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'sac-paging',
-                template: "<div\r\n  class=\"d-flex justify-content-between align-items-center flex-wrap\"\r\n  id=\"{{name}}\"\r\n>\r\n  <div class=\"col-pagination order-2 order-md-1\" id=\"{{name}}_pages\">\r\n    <ul class=\"pagination mb-4 mb-md-0\">\r\n      <li\r\n        class=\"page-item\"\r\n        [ngClass]=\"{'aspNetDisabled disabled': activePageIndex === firstPageIndex}\"\r\n      >\r\n        <a class=\"page-link\" (click)=\"firstPage()\">\u00AB</a>\r\n      </li>\r\n      <li\r\n        class=\"page-item\"\r\n        *ngFor=\"let page of paginators; let i = index\"\r\n        [ngClass]=\"{'active': page === activePageIndex}\"\r\n      >\r\n        <a class=\"page-link\" (click)=\"changePage(page)\">{{page + 1 }}</a>\r\n      </li>\r\n      <li\r\n        class=\"page-item\"\r\n        [ngClass]=\"{'aspNetDisabled disabled': activePageIndex === lastPageIndex}\"\r\n      >\r\n        <a class=\"page-link\" (click)=\"lastPage()\">\u00BB</a>\r\n      </li>\r\n    </ul>\r\n  </div>\r\n  <div class=\"col-summary order-1 order-md-2\">\r\n    <div class=\"mb-4 mb-md-0 mr-4 mb-md-0\">{{ PagingText | async }}</div>\r\n  </div>\r\n  <div class=\"col-pagesize order-3\" *ngIf=\"!pagesizedisabled\">\r\n    <div class=\"d-flex align-items-center\" 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      <div class=\"ml-2\">{{ PageSizeText | async }}</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 SACBootstrap4GridModule {
-}
-SACBootstrap4GridModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [SacGridComponent, SacGridColumnComponent, SacGridColumnActionComponent, SacPagingComponent, SacGridButtonComponent, SacGridImageComponent],
-                imports: [
-                    CommonModule, FormsModule
-                ],
-                exports: [SacGridComponent, SacGridColumnComponent, SacGridColumnActionComponent, SacPagingComponent, SacGridButtonComponent, SacGridImageComponent]
-            },] }
-];
-
-/**
- * Input Komponente
- */
-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 class=\"row form-group\" [class.no-gutters]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    >{{label}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" class=\"ml-1\"></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <input\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      type=\"text\"\r\n      class=\"form-control\"\r\n      [value]=\"value\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      [readonly]=\"readonly\"\r\n      (blur)=\"onTouch()\"\r\n      (input)=\"setValue($event.target.value)\"\r\n      (keypress)=\"onKeyPress($event)\"\r\n      [attr.maxlength]=\"maxlength\"\r\n      [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n      [ngClass]=\"[componentHeight | toControlHeight]\"\r\n      [disabled]=\"isdisabled\"\r\n    />\r\n    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n",
-                // 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 }
-];
-
-/**
- * Input Box für lange Texte
- */
-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 class=\"form-group row\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    >{{label}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" class=\"ml-1\"></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <textarea\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      type=\"\"\r\n      class=\"form-control\"\r\n      [value]=\"value\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      (blur)=\"onTouch()\"\r\n      (input)=\"setValue($event.target.value)\"\r\n      (keypress)=\"onKeyPress($event)\"\r\n      [attr.rows]=\"rows\"\r\n      [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n      [ngClass]=\"[componentHeight | toControlHeight]\"\r\n      [disabled]=\"isdisabled\"\r\n      [attr.maxlength]=\"maxlength\"\r\n      [readonly]=\"readonly\"\r\n    ></textarea>\r\n    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n",
-                // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
-                providers: [
-                    {
-                        provide: NG_VALUE_ACCESSOR,
-                        multi: true,
-                        useExisting: forwardRef(() => SacInputAreaComponent),
-                    },
-                    {
-                        provide: NG_VALIDATORS,
-                        multi: true,
-                        useExisting: forwardRef(() => SacInputAreaComponent),
-                    },
-                ]
-            },] }
-];
-SacInputAreaComponent.ctorParameters = () => [
-    { type: SacFormLayoutDirective, decorators: [{ type: Host }, { type: Optional }] },
-    { type: Injector }
-];
-
-/**
- * Input Control für Währungen
- */
-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 class=\"row form-group\" [class.no-gutters]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    >{{label}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" class=\"ml-1\"></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group\"\r\n      [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n      [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      <input\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        [value]=\"value\"\r\n        (blur)=\"onTouch()\"\r\n        (input)=\"setValue($event.target.value)\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        (keypress)=\"onKeyPress($event)\"\r\n        [disabled]=\"isdisabled\"\r\n        [readonly]=\"readonly\"\r\n        [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n        [ngClass]=\"[componentHeight | toControlHeight]\"\r\n      />\r\n      <div class=\"input-group-append\">\r\n        <span class=\"input-group-text\">{{currency}}</span>\r\n      </div>\r\n\r\n      <div\r\n        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n        class=\"invalid-feedback\"\r\n      >\r\n        {{ GetErrorMessage() | async }}\r\n      </div>\r\n    </div>\r\n    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\r\n  </div>\r\n</div>\r\n",
-                // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
-                providers: [
-                    {
-                        provide: NG_VALUE_ACCESSOR,
-                        multi: true,
-                        useExisting: forwardRef(() => SacInputCurrencyComponent),
-                    },
-                    {
-                        provide: NG_VALIDATORS,
-                        multi: true,
-                        useExisting: forwardRef(() => SacInputCurrencyComponent),
-                    },
-                ]
-            },] }
-];
-SacInputCurrencyComponent.ctorParameters = () => [
-    { type: SacFormLayoutDirective, decorators: [{ type: Host }, { type: Optional }] },
-    { type: Injector }
-];
-
-/**
- * Input Komponente für Zahlen
- */
-class SacInputDecimalComponent extends SacInputDecimalCommon {
-    // #region Constructors
-    /**
-     * Constructor
-     * @param formlayout SacFormLayoutCommon 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 class=\"row form-group\" [class.no-gutters]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    >{{label}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" class=\"ml-1\"></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <input\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      type=\"text\"\r\n      class=\"form-control\"\r\n      [value]=\"value\"\r\n      (blur)=\"onTouch()\"\r\n      (input)=\"setValue($event.target.value)\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      [readonly]=\"readonly\"\r\n      (keypress)=\"onKeyPress($event)\"\r\n      [disabled]=\"isdisabled\"\r\n      [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n      [ngClass]=\"[componentHeight | toControlHeight]\"\r\n    />\r\n    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n",
-                // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
-                providers: [
-                    {
-                        provide: NG_VALUE_ACCESSOR,
-                        multi: true,
-                        useExisting: forwardRef(() => SacInputDecimalComponent),
-                    },
-                    {
-                        provide: NG_VALIDATORS,
-                        multi: true,
-                        useExisting: forwardRef(() => SacInputDecimalComponent),
-                    },
-                ]
-            },] }
-];
-SacInputDecimalComponent.ctorParameters = () => [
-    { type: SacFormLayoutDirective, decorators: [{ type: Host }, { type: Optional }] },
-    { type: Injector }
-];
-
-/**
- * Input Box für E-Mail Adressen
- */
-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 class=\"form-group row\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    >{{label}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" class=\"ml-1\"></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group\"\r\n      [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n      [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      <div class=\"input-group-prepend\">\r\n        <span class=\"input-group-text\">@</span>\r\n      </div>\r\n      <input\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        [value]=\"value\"\r\n        (blur)=\"onTouch()\"\r\n        (input)=\"setValue($event.target.value)\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        autocomplete=\"email\"\r\n        [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n        [ngClass]=\"[componentHeight | toControlHeight]\"\r\n        [disabled]=\"isdisabled\"\r\n        [readonly]=\"readonly\"\r\n      />\r\n      <div\r\n        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n        class=\"invalid-feedback\"\r\n      >\r\n        {{ GetErrorMessage() | async }}\r\n      </div>\r\n    </div>\r\n    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\r\n  </div>\r\n</div>\r\n",
-                // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
-                providers: [
-                    {
-                        provide: NG_VALUE_ACCESSOR,
-                        multi: true,
-                        useExisting: forwardRef(() => SacInputEmailComponent),
-                    },
-                    {
-                        provide: NG_VALIDATORS,
-                        multi: true,
-                        useExisting: forwardRef(() => SacInputEmailComponent),
-                    },
-                ]
-            },] }
-];
-SacInputEmailComponent.ctorParameters = () => [
-    { type: SacFormLayoutDirective, decorators: [{ type: Host }, { type: Optional }] },
-    { type: Injector }
-];
-
-/**
- * Input Komponten für Ganzzahlen
- */
-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 class=\"form-group row\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    >{{label}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" class=\"ml-1\"></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <input\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      type=\"text\"\r\n      class=\"form-control\"\r\n      [value]=\"value\"\r\n      (blur)=\"onTouch()\"\r\n      (input)=\"setValue($event.target.value)\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      (keypress)=\"onKeyPress($event)\"\r\n      [disabled]=\"isdisabled\"\r\n      [readonly]=\"readonly\"\r\n      [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n      [ngClass]=\"[componentHeight | toControlHeight]\"\r\n    />\r\n    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n",
-                // 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 }
-];
-
-/**
- * Input Box für Passwörter
- */
-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 class=\"form-group row\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    >{{label}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" class=\"ml-1\"></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <input\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      type=\"password\"\r\n      class=\"form-control\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      [value]=\"value\"\r\n      (blur)=\"onTouch()\"\r\n      (input)=\"setValue($event.target.value)\"\r\n      [attr.maxlength]=\"maxlength\"\r\n      autocomplete=\"new-password\"\r\n      [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n      [ngClass]=\"[componentHeight | toControlHeight]\"\r\n      [disabled]=\"isdisabled\"\r\n      [readonly]=\"readonly\"\r\n    />\r\n    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n",
-                // 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 }
-];
-
-/**
- * Input Box für Suche
- */
-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 class=\"row form-group\" [class.no-gutters]=\"disablelabel\">\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}_label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" class=\"ml-1\"></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group\"\r\n      [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n    >\r\n      <input\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        [value]=\"value\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        (blur)=\"onTouch()\"\r\n        (input)=\"setValue($event.target.value)\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n        [ngClass]=\"[componentHeight | toControlHeight]\"\r\n        [disabled]=\"isdisabled\"\r\n        [readonly]=\"readonly\"\r\n      />\r\n      <div class=\"input-group-append\">\r\n        <input\r\n          type=\"submit\"\r\n          class=\"btn btn-secondary\"\r\n          id=\"{{name}}_search\"\r\n          (click)=\"searchClick()\"\r\n          [value]=\"buttontext\"\r\n        />\r\n      </div>\r\n    </div>\r\n    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\r\n  </div>\r\n</div>\r\n",
-                // 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 SACBootstrap4InputModule {
-}
-SACBootstrap4InputModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [
-                    SacInputComponent,
-                    SacInputAreaComponent,
-                    SacInputCurrencyComponent,
-                    SacInputDecimalComponent,
-                    SacInputEmailComponent,
-                    SacInputIntegerComponent,
-                    SacInputPasswordComponent,
-                    SacInputSearchComponent,
-                ],
-                imports: [
-                    CommonModule,
-                    SACBootstrap4LayoutModule,
-                    SACBootstrap4TooltipModule,
-                ],
-                exports: [
-                    SacInputComponent,
-                    SacInputAreaComponent,
-                    SacInputCurrencyComponent,
-                    SacInputDecimalComponent,
-                    SacInputEmailComponent,
-                    SacInputIntegerComponent,
-                    SacInputPasswordComponent,
-                    SacInputSearchComponent,
-                ],
-            },] }
-];
-
-// #region Classes
-/**
- * Dropdown Komponente
- */
-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 class=\"row form-group\" [class.no-gutters]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    >{{label}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" class=\"ml-1\"></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <select\r\n      #dropdownitem\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      class=\"form-control\"\r\n      [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n      [ngClass]=\"[componentHeight | toControlHeight]\"\r\n      (blur)=\"onTouch()\"\r\n      (change)=\"setValue(dropdownitem.value)\"\r\n      [disabled]=\"isdisabled\"\r\n    >\r\n      <option *ngIf=\"emptylabel !== ''\" [ngValue]=\"emptyvalue\">\r\n        {{emptylabel}}\r\n      </option>\r\n\r\n      <ng-content></ng-content>\r\n\r\n      <ng-container *ngIf=\"groupitems === ''\">\r\n        <option\r\n          *ngFor=\"let item of options\"\r\n          [ngValue]=\"optionvalue ? item[optionvalue] : item\"\r\n          [disabled]=\"optionenabled !== '' && item[optionenabled] === false\"\r\n        >\r\n          <ng-template\r\n            *ngTemplateOutlet=\"optionlabeltemplate || defaultItemLabelTemplate;context:{ label: item[optionlabel], item: item }\"\r\n          >\r\n          </ng-template>\r\n        </option>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"groupitems !== ''\">\r\n        <optgroup\r\n          *ngFor=\"let group of options\"\r\n          [attr.label]=\"group[grouplabel]\"\r\n        >\r\n          <option\r\n            *ngFor=\"let item of group[groupitems]\"\r\n            [ngValue]=\"optionvalue ? item[optionvalue] : item\"\r\n            [disabled]=\"optionenabled !== '' && item[optionenabled] === false\"\r\n          >\r\n            <ng-template\r\n              *ngTemplateOutlet=\"optionlabeltemplate || defaultItemLabelTemplate;context:{ label: item[optionlabel], item: item }\"\r\n            >\r\n            </ng-template>\r\n          </option>\r\n        </optgroup>\r\n      </ng-container>\r\n    </select>\r\n    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\r\n    <div\r\n      class=\"invalid-feedback\"\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #defaultItemLabelTemplate let-label=\"label\">\r\n  {{label}}\r\n</ng-template>\r\n",
-                // 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 }
-];
-/**
- * Direktive für Dropdown Option List
- */
-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: '[sacOption],option' },] }
-];
-SacDropdownOptionDirective.ctorParameters = () => [
-    { type: ElementRef },
-    { type: Renderer2 },
-    { type: SacDropdownComponent, decorators: [{ type: Optional }, { type: Host }] }
-];
-// #endregion Classes
-
-class SACBootstrap4DropdownModule {
-}
-SACBootstrap4DropdownModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [SacDropdownComponent, SacDropdownOptionDirective],
-                imports: [
-                    CommonModule,
-                    SACBootstrap4LayoutModule,
-                    SACBootstrap4TooltipModule,
-                ],
-                exports: [SacDropdownComponent, SacDropdownOptionDirective],
-            },] }
-];
-
-// #region Classes
-/**
- * Listbox Komponente
- */
-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 class=\"row form-group\" [class.no-gutters]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    >{{label}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" class=\"ml-1\"></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <select\r\n      multiple\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      class=\"form-control\"\r\n      [size]=\"rowsize\"\r\n      [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n      [ngClass]=\"[componentHeight | toControlHeight]\"\r\n      (blur)=\"onTouch()\"\r\n      (change)=\"getSelectedItems($event.target)\"\r\n      [disabled]=\"isdisabled\"\r\n    >\r\n      <ng-content></ng-content>\r\n      <ng-container *ngIf=\"groupitems === ''\">\r\n        <option\r\n          *ngFor=\"let option of options\"\r\n          [value]=\"option[optionvalue]\"\r\n          [disabled]=\"optionenabled !== '' && option[optionenabled] === false\"\r\n        >\r\n          {{option[optionlabel]}}\r\n        </option>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"groupitems !== ''\">\r\n        <optgroup\r\n          *ngFor=\"let option of options\"\r\n          [attr.label]=\"option[grouplabel]\"\r\n        >\r\n          <option\r\n            *ngFor=\"let item of option[groupitems]\"\r\n            [value]=\"item[optionvalue]\"\r\n            [disabled]=\"optionenabled !== '' && item[optionenabled] === false\"\r\n          >\r\n            {{item[optionlabel]}}\r\n          </option>\r\n        </optgroup>\r\n      </ng-container>\r\n    </select>\r\n    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\r\n    <div\r\n      class=\"invalid-feedback\"\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n",
-                // 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 }
-];
-/**
- * Option Item in Listbox
- */
-class SacListboxOptionDirective extends SacListboxOptionCommon {
-    // #region Constructors
-    /**
-     * Konstruktor
-     * @param elementRef Referenz auf DOM Element
-     * @param renderer Angular Rendering Engine
-     * @param listbox Referenz auf Listbox Komponente
-     */
-    constructor(elementRef, renderer, listbox) {
-        super(elementRef, renderer, listbox);
-    }
-}
-SacListboxOptionDirective.decorators = [
-    { type: Directive, args: [{ selector: '[sacOption],option' },] }
-];
-SacListboxOptionDirective.ctorParameters = () => [
-    { type: ElementRef },
-    { type: Renderer2 },
-    { type: SacListboxComponent, decorators: [{ type: Optional }, { type: Host }] }
-];
-// #endregion Classes
-
-class SACBootstrap4ListModule {
-}
-SACBootstrap4ListModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [SacListboxComponent, SacListboxOptionDirective],
-                imports: [
-                    CommonModule,
-                    SACBootstrap4LayoutModule,
-                    SACBootstrap4TooltipModule,
-                ],
-                exports: [SacListboxComponent, SacListboxOptionDirective],
-            },] }
-];
-
-/**
- * Componente für Mehrsprache Texte
- */
-class SacMultilanguageInputComponent extends SacMultilanguageInputCommon {
-    // #endregion Properties
-    // #region Constructors
-    /**
-     * Constructor
-     * @param formLayout SacFormLayout to define scoped layout settings
-     * @param injector Injector for injecting services
-     */
-    constructor(formLayout, injector) {
-        super(formLayout, injector);
-        // #region Properties
-        /**
-         * Enum für IconType in HTML Template
-         */
-        this.IconType = IconType;
-    }
-}
-SacMultilanguageInputComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'sac-multilanguageinput',
-                template: "<div class=\"row form-group\" [class.no-gutters]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    >{{label}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" class=\"ml-1\"></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group\"\r\n      [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n      [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      <input\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        [value]=\"LanguageValue\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        (blur)=\"onTouch()\"\r\n        (input)=\"SetLanguageValue($event.target.value)\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n        [ngClass]=\"[componentHeight | toControlHeight]\"\r\n        [disabled]=\"isdisabled\"\r\n      />\r\n      <div\r\n        placement=\"bottom-right\"\r\n        class=\"input-group-append\"\r\n        sac-multilanguagemenu\r\n        [buttontemplate]=\"menuButton\"\r\n        #contextmenu\r\n      >\r\n        <ng-template #menuButton>\r\n          <button\r\n            sacMultilanguageMenuAnchor\r\n            [id]=\"name + '_dropdownitem'\"\r\n            type=\"button\"\r\n            class=\"btn dropdown-toggle\"\r\n            (click)=\"contextmenu.toggle()\"\r\n            [ngClass]=\"[IsAnyEmpty() ? 'btn-warning' : 'btn-secondary']\"\r\n          >\r\n            <img\r\n              src=\"{{SelectedIcon}}\"\r\n              class=\"align-baseline mr-1 ml-1\"\r\n              *ngIf=\"SelectedIconType === IconType.Image\"\r\n            />\r\n            <span\r\n              [ngClass]=\"SelectedIcon\"\r\n              class=\"align-baseline mr-1 ml-1\"\r\n              *ngIf=\"SelectedIconType === IconType.CssSprite\"\r\n            ></span>\r\n          </button>\r\n        </ng-template>\r\n        <ng-container *ngFor=\"let sprache of Languages\">\r\n          <sac-multilanguagemenubutton\r\n            *ngIf=\"sprache.IconType === IconType.Image\"\r\n            text=\"{{sprache.Text}}\"\r\n            image=\"{{sprache.Icon}}\"\r\n            [cssclass]=\"IsEmpty(sprache) ? 'text-danger border-left border-danger': ''\"\r\n            (clicked)=\"SelectLanguage(sprache)\"\r\n          ></sac-multilanguagemenubutton>\r\n          <sac-multilanguagemenubutton\r\n            *ngIf=\"sprache.IconType === IconType.CssSprite\"\r\n            text=\"{{sprache.Text}}\"\r\n            icon=\"{{sprache.Icon}}\"\r\n            [cssclass]=\"IsEmpty(sprache) ? 'text-danger border-left border-danger': ''\"\r\n            (clicked)=\"SelectLanguage(sprache)\"\r\n          ></sac-multilanguagemenubutton>\r\n        </ng-container>\r\n      </div>\r\n\r\n      <div\r\n        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n        class=\"invalid-feedback\"\r\n      >\r\n        {{ GetErrorMessage() | async }}\r\n      </div>\r\n    </div>\r\n    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\r\n  </div>\r\n</div>\r\n<div class=\"row\">\r\n  <div class=\"col text-right\"></div>\r\n</div>\r\n",
-                // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
-                providers: [
-                    {
-                        provide: NG_VALUE_ACCESSOR,
-                        multi: true,
-                        useExisting: SacMultilanguageInputComponent,
-                    },
-                    {
-                        provide: NG_VALIDATORS,
-                        multi: true,
-                        useExisting: forwardRef(() => SacMultilanguageInputComponent),
-                    },
-                ]
-            },] }
-];
-SacMultilanguageInputComponent.ctorParameters = () => [
-    { type: SacFormLayoutDirective, decorators: [{ type: Host }, { type: Optional }] },
-    { type: Injector }
-];
-
-/**
- * Componente für Mehrsprache Texte als mehrzeiliger Text
- */
-class SacMultilanguageInputAreaComponent extends SacMultilanguageInputAreaCommon {
-    // #endregion Properties
-    // #region Constructors
-    /**
-     * Constructor
-     * @param formLayout SacFormLayout to define scoped layout settings
-     * @param injector Injector for injecting services
-     */
-    constructor(formLayout, injector) {
-        super(formLayout, injector);
-        // #region Properties
-        /**
-         * Enum für IconType in HTML Template
-         */
-        this.IconType = IconType;
-    }
-}
-SacMultilanguageInputAreaComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'sac-multilanguageinputarea',
-                template: "<div class=\"row form-group\" [class.no-gutters]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    >{{label}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" class=\"ml-1\"></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group\"\r\n      [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n      [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      <textarea\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        [value]=\"LanguageValue\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        (blur)=\"onTouch()\"\r\n        style=\"height: auto\"\r\n        (input)=\"SetLanguageValue($event.target.value)\"\r\n        [attr.rows]=\"rows\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n        [ngClass]=\"[componentHeight | toControlHeight]\"\r\n        [disabled]=\"isdisabled\"\r\n      ></textarea>\r\n\r\n      <div\r\n        placement=\"bottom-right\"\r\n        class=\"input-group-append\"\r\n        sac-multilanguagemenu\r\n        [buttontemplate]=\"menuButton\"\r\n        #contextmenu\r\n      >\r\n        <ng-template #menuButton>\r\n          <button\r\n            sacMultilanguageMenuAnchor\r\n            [id]=\"name + '_dropdownitem'\"\r\n            type=\"button\"\r\n            class=\"btn dropdown-toggle\"\r\n            (click)=\"contextmenu.toggle()\"\r\n            [ngClass]=\"[IsAnyEmpty() ? 'btn-warning' : 'btn-secondary']\"\r\n          >\r\n            <img\r\n              src=\"{{SelectedIcon}}\"\r\n              class=\"align-baseline mr-1 ml-1\"\r\n              *ngIf=\"SelectedIconType === IconType.Image\"\r\n            />\r\n            <i\r\n              [ngClass]=\"SelectedIcon\"\r\n              class=\"align-baseline mr-1 ml-1\"\r\n              *ngIf=\"SelectedIconType === IconType.CssSprite\"\r\n            ></i>\r\n          </button>\r\n        </ng-template>\r\n        <ng-container *ngFor=\"let sprache of Languages\">\r\n          <sac-multilanguagemenubutton\r\n            *ngIf=\"sprache.IconType === IconType.Image\"\r\n            text=\"{{sprache.Text}}\"\r\n            image=\"{{sprache.Icon}}\"\r\n            [cssclass]=\"IsEmpty(sprache) ? 'text-danger border-left border-danger': ''\"\r\n            (clicked)=\"SelectLanguage(sprache)\"\r\n          ></sac-multilanguagemenubutton>\r\n          <sac-multilanguagemenubutton\r\n            *ngIf=\"sprache.IconType === IconType.CssSprite\"\r\n            text=\"{{sprache.Text}}\"\r\n            icon=\"{{sprache.Icon}}\"\r\n            [cssclass]=\"IsEmpty(sprache) ? 'text-danger border-left border-danger': ''\"\r\n            (clicked)=\"SelectLanguage(sprache)\"\r\n          ></sac-multilanguagemenubutton>\r\n        </ng-container>\r\n      </div>\r\n\r\n      <div\r\n        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n        class=\"invalid-feedback\"\r\n      >\r\n        {{ GetErrorMessage() | async }}\r\n      </div>\r\n    </div>\r\n    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\r\n  </div>\r\n</div>\r\n<div class=\"row\">\r\n  <div class=\"col text-right\"></div>\r\n</div>\r\n",
-                // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
-                providers: [
-                    {
-                        provide: NG_VALUE_ACCESSOR,
-                        multi: true,
-                        useExisting: SacMultilanguageInputAreaComponent,
-                    },
-                    {
-                        provide: NG_VALIDATORS,
-                        multi: true,
-                        useExisting: forwardRef(() => SacMultilanguageInputAreaComponent),
-                    },
-                ]
-            },] }
-];
-SacMultilanguageInputAreaComponent.ctorParameters = () => [
-    { type: SacFormLayoutDirective, decorators: [{ type: Host }, { type: Optional }] },
-    { type: Injector }
-];
-
-/**
- * Component für Contextmenü
- */
-class SacMultilanguagemenuComponent extends SacContextmenuCommon {
-    // #region Constructors
-    /**
-     * Constructor
-     * @param document Referenz auf HTML Document
-     * @param ngZone Angular Zone Service
-     * @param elementRef Referenz auf HTML Element der aktuellen Komponente
-     * @param renderer Render Service von Angular
-     * @param injector injector to resolve services in base component
-     */
-    constructor(document, ngZone, elementRef, renderer, injector) {
-        super(document, ngZone, elementRef, renderer, injector);
-    }
-}
-SacMultilanguagemenuComponent.decorators = [
-    { type: Component, args: [{
-                selector: '[sac-multilanguagemenu]',
-                template: "<ng-container\r\n  [ngTemplateOutlet]=\"buttontemplate || defaultButtonTemplate\"\r\n></ng-container>\r\n\r\n<div\r\n  class=\"dropdown-menu dropdown-menu-right\"\r\n  sacMultilanguageMenuContainer\r\n  [class.show]=\"isopen\"\r\n>\r\n  <ng-content></ng-content>\r\n</div>\r\n\r\n<ng-template #defaultButtonTemplate>\r\n  <button\r\n    sacMultilanguageMenuAnchor\r\n    class=\"btn btn-secondary dropdown-toggle\"\r\n    type=\"button\"\r\n    (click)=\"toggle()\"\r\n  ></button>\r\n</ng-template>\r\n",
-                providers: [
-                    {
-                        provide: SacContextmenuCommon,
-                        useExisting: forwardRef(() => SacMultilanguagemenuComponent),
-                    },
-                ]
-            },] }
-];
-SacMultilanguagemenuComponent.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 SacMultilanguagemenuAnchorDirective extends SacContextmenuAnchorCommon {
-    // #region Constructors
-    /**
-     * Konstruktor
-     * @param elementRef HTML DOM Referenz
-     */
-    constructor(elementRef) {
-        super(elementRef);
-    }
-}
-SacMultilanguagemenuAnchorDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[sacMultilanguageMenuAnchor]',
-                providers: [
-                    {
-                        provide: SacContextmenuAnchorCommon,
-                        useExisting: forwardRef(() => SacMultilanguagemenuAnchorDirective),
-                    },
-                ],
-            },] }
-];
-SacMultilanguagemenuAnchorDirective.ctorParameters = () => [
-    { type: ElementRef }
-];
-
-/**
- * Marker Komponente für Context Menü
- */
-class SacMultilanguagemenuContainerDirective extends SacContextMenuContrainerCommon {
-    // #region Constructors
-    /**
-     * Konstruktor
-     * @param elementRef Referenz auf DOM Element
-     */
-    constructor(elementRef) {
-        super(elementRef);
-    }
-}
-SacMultilanguagemenuContainerDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[sacMultilanguageMenuContainer]',
-                providers: [
-                    {
-                        provide: SacContextMenuContrainerCommon,
-                        useExisting: forwardRef(() => SacMultilanguagemenuContainerDirective),
-                    },
-                ],
-            },] }
-];
-SacMultilanguagemenuContainerDirective.ctorParameters = () => [
-    { type: ElementRef }
-];
-
-/**
- * Component für Menü Eintrag in Context Menü
- */
-class SacMultilanguagemenuItemButtonComponent extends SacContextmenuItemButtonCommon {
-    /**
-     * Constructor
-     * @param contextmenu Instance von Context Menü
-     */
-    constructor(contextmenu) {
-        super(contextmenu);
-    }
-}
-SacMultilanguagemenuItemButtonComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'sac-multilanguagemenubutton',
-                template: "<button\r\n  type=\"button\"\r\n  class=\"dropdown-item\"\r\n  (click)=\"callaction($event)\"\r\n  [class.disabled]=\"isdisabled\"\r\n  [ngClass]=\"cssclass\"\r\n  [attr.disabled]=\"isdisabled ? 'disabled' : null\"\r\n>\r\n  <div class=\"d-flex\">\r\n    <div *ngIf=\"!isicondisabled\" style=\"min-width: 1.5rem\">\r\n      <img *ngIf=\"image\" [src]=\"image\" class=\"align-baseline\" />\r\n      <i *ngIf=\"icon\" [class]=\"iconstyle + ' ' + icon\"></i>\r\n    </div>\r\n    <div class=\"flex-grow-1\">{{ text }}</div>\r\n  </div>\r\n</button>\r\n"
-            },] }
-];
-SacMultilanguagemenuItemButtonComponent.ctorParameters = () => [
-    { type: SacContextmenuCommon }
-];
-
-class SACBootstrap4MultilanguageModule {
-}
-SACBootstrap4MultilanguageModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [
-                    SacMultilanguageInputComponent,
-                    SacMultilanguageInputAreaComponent,
-                    SacMultilanguagemenuComponent,
-                    SacMultilanguagemenuAnchorDirective,
-                    SacMultilanguagemenuContainerDirective,
-                    SacMultilanguagemenuItemButtonComponent,
-                ],
-                imports: [
-                    CommonModule,
-                    SACBootstrap4LayoutModule,
-                    SACBootstrap4TooltipModule,
-                ],
-                exports: [SacMultilanguageInputComponent, SacMultilanguageInputAreaComponent],
-            },] }
-];
-
-/**
- * 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
-    /**
-     *
-     * @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 class=\"row form-group\" [class.no-gutters]=\"disablelabel\">\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}_label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" class=\"ml-1\"></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <ng-content></ng-content>\r\n    <label\r\n      for=\"{{name}}\"\r\n      class=\"form-label-adaptive form-label-fixed\"\r\n      [ngClass]=\"{ 'required': isrequired }\"\r\n      *ngIf=\"isAdaptiveLabel && !disablelabel\"\r\n      >{{label}}</label\r\n    >\r\n    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\r\n    <div\r\n      class=\"invalid-feedback\"\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n",
-                // 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 }
-];
-
-/**
- * Komponente für statischen Text in einem Formular
- */
-class SacStaticLabelComponent extends SacStaticLabelCommon {
-    // #region Constructors
-    /**
-     *
-     * @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 class=\"row form-group\" [class.no-gutters]=\"disablelabel\">\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}_label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    >{{label}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" class=\"ml-1\"></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      [id]=\"name\"\r\n      class=\"form-control-plaintext\"\r\n      [ngClass]=\"[componentHeight | toControlHeight]\"\r\n      [innerHTML]=\"value\"\r\n    ></div>\r\n    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\r\n    <label\r\n      for=\"{{name}}\"\r\n      class=\"col-left control-label\"\r\n      *ngIf=\"isAdaptiveLabel && !disablelabel\"\r\n      >{{label}}</label\r\n    >\r\n  </div>\r\n</div>\r\n",
-                // 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 SACBootstrap4StaticLabelModule {
-}
-SACBootstrap4StaticLabelModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [SacStaticLabelComponent, SacStaticFormContainerComponent],
-                imports: [
-                    CommonModule,
-                    SACBootstrap4LayoutModule,
-                    SACBootstrap4TooltipModule,
-                ],
-                exports: [SacStaticLabelComponent, SacStaticFormContainerComponent],
-            },] }
-];
-
-/**
- * Tab Item Komponente
- */
-class SacTabItemComponent extends SacTabItemCommon {
-}
-SacTabItemComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'sac-tabitem',
-                template: "<div [id]=\"id\" [hidden]=\"unloadwhenhidden === false && active === false\" *ngIf=\"(unloadwhenhidden === true && active === true) || unloadwhenhidden === false\" class=\"tab-pane\">\r\n  <ng-template [ngTemplateOutlet]=\"templateRef\"></ng-template>\r\n</div>\r\n"
-            },] }
-];
-
-/**
- * Komponente für Tabs
- */
-class SacTabComponent extends SacTabCommon {
-    /**
-     * Gibt die TabItems zurück
-     * @returns Array von TabItems
-     */
-    tabItems() {
-        return this._tabItems.toArray();
-    }
-}
-SacTabComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'sac-tab',
-                template: "<!-- Nav tabs -->\r\n<div class=\"nav nav-tabs\" role=\"tablist\">\r\n  <a\r\n    *ngFor=\"let item of _tabItems\"\r\n    [id]=\"GetTabItemButtonId(item.id)\"\r\n    role=\"tab\"\r\n    class=\"nav-item nav-link active\"\r\n    data-toggle=\"tab\"\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    >{{item.label}}</a\r\n  >\r\n</div>\r\n\r\n<!-- Tab panes -->\r\n<div class=\"tab-content pl-3 pt-2\">\r\n  <ng-content></ng-content>\r\n</div>\r\n"
-            },] }
-];
-SacTabComponent.propDecorators = {
-    _tabItems: [{ type: ContentChildren, args: [SacTabItemComponent,] }]
-};
-
-class SACBootstrap4TabsModule {
-}
-SACBootstrap4TabsModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [SacTabComponent, SacTabItemComponent],
-                imports: [
-                    CommonModule
-                ],
-                exports: [SacTabComponent, SacTabItemComponent]
-            },] }
-];
-
-/**
- * TinyMCE Komponente
- */
-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 boostrap4 has no overwrites
-     */
-    overwriteDefaultSettings() {
-        return {};
-    }
-}
-SacTinyMceComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'sac-tinymce',
-                template: "<div class=\"form-row form-group\">\r\n  <div\r\n    class=\"col\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n  >\r\n    <label for=\"{{name}}\" class=\"form-control-label\"\r\n      >{{label}}<sac-tooltip\r\n        *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n        [tooltiptext]=\"helptext\"\r\n        [inlinemode]=\"true\"\r\n        ><span\r\n          [ngClass]=\"HelptextTooltipIcon\"\r\n          class=\"ml-1\"\r\n        ></span> </sac-tooltip\r\n    ></label>\r\n  </div>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <editor\r\n      [id]=\"name + '_tinymce'\"\r\n      [init]=\"_config\"\r\n      [initialValue]=\"value\"\r\n      ngModel\r\n      [ngModelOptions]=\"{standalone: true}\"\r\n      (ngModelChange)=\"setValue($event)\"\r\n      (onSaveContent)=\"save($event.event.content)\"\r\n      [disabled]=\"disabled\"\r\n      [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    ></editor>\r\n    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<sac-dialog\r\n  *ngIf=\"selectdialogvisible\"\r\n  [allowesc]=\"false\"\r\n  [backdrop]=\"true\"\r\n  [(isvisible)]=\"selectdialogvisible\"\r\n  title=\"{{ lngResourceService.GetString(validationKeyService.TinyMceFileselectDialogtitle) | async }}\"\r\n  size=\"large\"\r\n  height=\"500px\"\r\n>\r\n  <ng-container dialogbody>\r\n    <sac-filebrowser\r\n      [apiurl]=\"filebrowserapiurl\"\r\n      (file)=\"selectDialogSettings.value = $event\"\r\n      [allowfoldercreate]=\"allowfoldercreate\"\r\n      [allowfolderrename]=\"allowfolderrename\"\r\n      [allowfolderdelete]=\"allowfolderdelete\"\r\n      [allowfileupload]=\"allowfileupload\"\r\n      [allowfilerename]=\"allowfilerename\"\r\n      [allowfiledelete]=\"allowfiledelete\"\r\n      [selectedfile]=\"selectDialogSettings.value\"\r\n      [allowedtypes]=\"selectDialogSettings.allowedtypes\"\r\n    ></sac-filebrowser>\r\n  </ng-container>\r\n  <ng-container dialogfooter>\r\n    <sac-button\r\n      role=\"primary\"\r\n      [name]=\"name + '_modalOk'\"\r\n      text=\"{{ lngResourceService.GetString(validationKeyService.TinyMceFileselectOk) | async }}\"\r\n      (clicked)=\"setSelectDialogResult()\"\r\n    ></sac-button>\r\n    <sac-button\r\n      [name]=\"name + '_modalClose'\"\r\n      text=\"{{ lngResourceService.GetString(validationKeyService.TinyMceFileselectCancel) | async }}\"\r\n      (clicked)=\"closeSelectDialog()\"\r\n    ></sac-button>\r\n  </ng-container>\r\n</sac-dialog>\r\n",
-                // 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,
-                    },
-                ],
-                styles: [".is-invalid{border:1px solid var(--red)}"]
-            },] }
-];
-SacTinyMceComponent.ctorParameters = () => [
-    { type: SacFormLayoutDirective, decorators: [{ type: Host }, { type: Optional }] },
-    { type: Injector },
-    { type: NgZone }
-];
-
-class SACBootstrap4TinyMceModule {
-}
-SACBootstrap4TinyMceModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [SacTinyMceComponent],
-                imports: [
-                    CommonModule,
-                    FormsModule,
-                    EditorModule,
-                    SACBootstrap4LayoutModule,
-                    SACBootstrap4ButtonModule,
-                    SACBootstrap4DialogModule,
-                    SACBootstrap4BrowserModule,
-                    SACBootstrap4TooltipModule,
-                ],
-                exports: [SacTinyMceComponent],
-            },] }
-];
-
-/**
- * Validation Summary Kompontente
- */
-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(parentForm, injector) {
-        super(parentForm, injector);
-    }
-}
-SacValidationSummaryComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'sac-validationsummary',
-                template: "<div class=\"alert alert-danger\" role=\"alert\" *ngIf=\"hasErrors\">\r\n  <ul class=\"mb-0\">\r\n    <li *ngFor=\"let error of formErrors\">{{error | async}}</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 SACBootstrap4ValidationSummaryModule {
-}
-SACBootstrap4ValidationSummaryModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [SacValidationSummaryComponent],
-                imports: [
-                    CommonModule
-                ],
-                exports: [SacValidationSummaryComponent]
-            },] }
-];
-
-/**
- * Wizard Komponente Item
- */
-class SacWizardItemComponent extends SacWizardItemCommon {
-}
-SacWizardItemComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'sac-wizarditem',
-                template: ""
-            },] }
-];
-
-/**
- * Wizard Komponente
- */
-class SacWizardComponent extends SacWizardCommon {
-    /**
-     * Gibt die Wizard Items zurück
-     * @returns Collection von WizardItems
-     */
-    wizardItems() {
-        return this._wizardItems;
-    }
-}
-SacWizardComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'sac-wizard',
-                template: "<ul 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 SACBootstrap4WizardModule {
-}
-SACBootstrap4WizardModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [SacWizardComponent, SacWizardItemComponent],
-                imports: [
-                    CommonModule
-                ],
-                exports: [SacWizardComponent, SacWizardItemComponent]
-            },] }
-];
-
-/*
- * Public API Surface of sac-bootstrap4
- */
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { NGFORM_FACTORY, SACBootstrap4BrowserModule, SACBootstrap4ButtonModule, SACBootstrap4CheckboxModule, SACBootstrap4ConfirmModule, SACBootstrap4ContextmenuModule, SACBootstrap4DateTimeModule, SACBootstrap4DialogModule, SACBootstrap4DropdownModule, SACBootstrap4FormModule, SACBootstrap4GridModule, SACBootstrap4InputModule, SACBootstrap4LayoutModule, SACBootstrap4ListModule, SACBootstrap4MultilanguageModule, SACBootstrap4StaticLabelModule, SACBootstrap4TabsModule, SACBootstrap4TinyMceModule, SACBootstrap4TooltipModule, SACBootstrap4UploadModule, SACBootstrap4ValidationSummaryModule, SACBootstrap4WizardModule, SACFORM_FACTORY, SacFormDirective, SacInheritFormDirective, ServiceConfirm, SacBrowserComponent as ɵa, SacDropzoneMultipleComponent as ɵb, SacGridComponent as ɵba, SacGridColumnComponent as ɵbb, SacGridColumnActionComponent as ɵbc, SacPagingComponent as ɵbd, SacGridButtonComponent as ɵbe, SacGridImageComponent as ɵbf, SacInputComponent as ɵbg, SacInputAreaComponent as ɵbh, SacInputCurrencyComponent as ɵbi, SacInputDecimalComponent as ɵbj, SacInputEmailComponent as ɵbk, SacInputIntegerComponent as ɵbl, SacInputPasswordComponent as ɵbm, SacInputSearchComponent as ɵbn, SacDropdownComponent as ɵbo, SacDropdownOptionDirective as ɵbp, SacListboxComponent as ɵbq, SacListboxOptionDirective as ɵbr, SacMultilanguageInputComponent as ɵbs, SacMultilanguageInputAreaComponent as ɵbt, SacMultilanguagemenuComponent as ɵbu, SacMultilanguagemenuAnchorDirective as ɵbv, SacMultilanguagemenuContainerDirective as ɵbw, SacMultilanguagemenuItemButtonComponent as ɵbx, SacStaticLabelComponent as ɵby, SacStaticFormContainerComponent as ɵbz, SacFormLayoutDirective as ɵc, SacTabComponent as ɵca, SacTabItemComponent as ɵcb, SacTinyMceComponent as ɵcc, SacValidationSummaryComponent as ɵcd, SacWizardComponent as ɵce, SacWizardItemComponent as ɵcf, SacConfirmComponent as ɵd, SacDialogComponent as ɵe, SacButtonComponent as ɵf, SacContextmenuComponent as ɵg, SacContextmenuItemButtonComponent as ɵh, SacContextmenuItemSplitterComponent as ɵi, SacContextmenuAnchorDirective as ɵj, SacContextmenuContainerDirective as ɵk, SacUploadComponent as ɵl, SacUploadMultipleComponent as ɵm, SacDropzoneSingleComponent as ɵn, SacToControlHeightPipe as ɵo, SacToControlWidthCssPipe as ɵp, SacToLabelHeightPipe as ɵq, SacToLabelWidthCssPipe as ɵr, SacTooltipComponent as ɵs, SacCheckboxComponent as ɵt, SacRadiobuttonComponent as ɵu, SacRadiobuttonsComponent as ɵv, SacDateComponent as ɵw, SacDateTimeComponent as ɵx, SacTimeComponent as ɵy, SacDateSelectorComponent as ɵz };
-//# sourceMappingURL=simpleangularcontrols-sac-bootstrap4.js.map