@simpleangularcontrols/sac-bootstrap5 10.0.0-rc.1

package/fesm2015/simpleangularcontrols-sac-bootstrap5.js

@@ -0,0 +1,2495 @@
+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, Input, 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, 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 me-2\"\r\n    role=\"status\"\r\n    aria-hidden=\"true\"\r\n  ></span>\r\n  <i *ngIf=\"!isloading && icon !== ''\" [ngClass]=\"icon\" [class.me-2]=\"text\"></i\r\n  >{{text}}\r\n</button>\r\n"
+            },] }
+];
+
+class SACBootstrap5ButtonModule {
+}
+SACBootstrap5ButtonModule.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\r\n  #dialog\r\n  class=\"modal show\"\r\n  style=\"display: block\"\r\n  tabindex=\"-1\"\r\n  role=\"dialog\"\r\n  *ngIf=\"_show\"\r\n>\r\n  <div\r\n    class=\"modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable\"\r\n    role=\"document\"\r\n    [class.modal-xl]=\"_size === 'extralarge'\"\r\n    [class.modal-lg]=\"_size === 'large'\"\r\n    [class.modal-sm]=\"_size === 'small'\"\r\n  >\r\n    <div class=\"modal-content\">\r\n      <div class=\"modal-header\">\r\n        <h5 class=\"modal-title\">{{title}}</h5>\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn-close\"\r\n          data-dismiss=\"modal\"\r\n          aria-label=\"Close\"\r\n          (click)=\"hide()\"\r\n          *ngIf=\"closebutton\"\r\n        ></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>\r\n    <!-- /.modal-content -->\r\n  </div>\r\n  <!-- /.modal-dialog -->\r\n</div>\r\n<!-- /.modal -->\r\n<div class=\"modal-backdrop show\" *ngIf=\"_show && backdrop\" #backdrop></div>\r\n"
+            },] }
+];
+SacDialogComponent.ctorParameters = () => [
+    { type: ElementRef },
+    { type: ChangeDetectorRef }
+];
+
+class SACBootstrap5DialogModule {
+}
+SACBootstrap5DialogModule.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  [(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=\"d-flex align-items-center\">\r\n      <div class=\"me-2\">\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>\r\n      <div class=\"flex-grow-1\">{{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: SACBootstrap5ConfirmModule.forRoot()
+ *
+ */
+class SACBootstrap5ConfirmModule {
+    // #region Public Static Methods
+    static forRoot() {
+        return {
+            ngModule: SACBootstrap5ConfirmModule,
+            providers: [ServiceConfirm],
+        };
+    }
+}
+SACBootstrap5ConfirmModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [SacConfirmComponent],
+                imports: [CommonModule, SACBootstrap5DialogModule, SACBootstrap5ButtonModule],
+                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  <ul\r\n    class=\"dropdown-menu dropdown-menu-end\"\r\n    sacContextMenuContainer\r\n    [class.show]=\"isopen\"\r\n  >\r\n    <ng-content></ng-content>\r\n  </ul>\r\n</div>\r\n\r\n<ng-template #defaultButtonTemplate>\r\n  <button\r\n    sacContextMenuAnchor\r\n    class=\"btn btn-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: "<li>\r\n  <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</li>\r\n"
+            },] }
+];
+SacContextmenuItemButtonComponent.ctorParameters = () => [
+    { type: SacContextmenuCommon }
+];
+
+/**
+ * Splitter Komponente in Context Menü
+ */
+class SacContextmenuItemSplitterComponent extends SacContextmenuItemCommon {
+}
+SacContextmenuItemSplitterComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'sac-contextmenusplitter',
+                template: "<li><div class=\"dropdown-divider\"></div></li>\r\n"
+            },] }
+];
+
+/**
+ * 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 SACBootstrap5ContextmenuModule {
+}
+SACBootstrap5ContextmenuModule.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',] }]
+};
+
+/**
+ * Factory Methode für SacForm
+ * @param form SacFormular
+ */
+function SACFORM_FACTORY(form) {
+    return form;
+}
+/**
+ * Factory Methode für NgForm
+ * @param form NgForm
+ */
+function NGFORM_FACTORY(form) {
+    return form;
+}
+/**
+ * Directive zum erben eines NgForm/NgFormular einer übergeordneten Komponente
+ *
+ * @example Implementation in Markup
+ *
+ * <div sacInheritForm>
+ * </div>
+ *
+ * @example Model an Sub-Komponente übergeben
+ *
+ * <div sacInheritForm>
+ * <div>SubForm</div>
+ * <div>
+ *  <ngInput [(ngModel)]="mymodel.fieldarea2" name="subformField3" label="field 3" [isrequired]="true"></ngInput>
+ * </div>
+ * </div>
+ *
+ *
+ * (at)Component({
+ * selector: 'sacInheritForm',
+ * templateUrl: './subform.component.html'
+ * })
+ * export class SubFormComponent implements DoCheck {
+ *
+ * (at)Input() mymodel;
+ * (at)Output() mymodelChange = new EventEmitter();
+ *
+ * ngDoCheck() {
+ *   this.mymodelChange.next(this.mymodel);
+ * }
+ *}
+ *
+ */
+class SacInheritFormDirective {
+}
+SacInheritFormDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[sacInheritForm]',
+                providers: [
+                    {
+                        provide: SacFormDirective,
+                        useFactory: SACFORM_FACTORY,
+                        deps: [[new SkipSelf(), SacFormDirective]]
+                    }, {
+                        provide: ControlContainer,
+                        useFactory: NGFORM_FACTORY,
+                        deps: [NgForm]
+                    }
+                ]
+            },] }
+];
+
+class SACBootstrap5FormModule {
+}
+SACBootstrap5FormModule.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));
+        }
+        if (value.labelSizeXxl) {
+            classes.push('col-xxl-' + this.calcControlSize(value.labelSizeXxl));
+        }
+        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);
+        }
+        if (value.labelSizeXxl) {
+            classes.push('col-xxl-' + value.labelSizeXxl);
+        }
+        return classes.join(' ');
+    }
+}
+SacToLabelWidthCssPipe.decorators = [
+    { type: Pipe, args: [{
+                name: 'toLabelWidthCss',
+            },] }
+];
+
+class SACBootstrap5LayoutModule {
+}
+SACBootstrap5LayoutModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [
+                    SacFormLayoutDirective,
+                    SacToControlHeightPipe,
+                    SacToControlWidthCssPipe,
+                    SacToLabelHeightPipe,
+                    SacToLabelWidthCssPipe,
+                ],
+                imports: [CommonModule],
+                exports: [
+                    SacFormLayoutDirective,
+                    SacToControlHeightPipe,
+                    SacToControlWidthCssPipe,
+                    SacToLabelHeightPipe,
+                    SacToLabelWidthCssPipe,
+                ],
+            },] }
+];
+
+/**
+ * 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 mb-3\" [class.g-0]=\"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) : 'visually-hidden', componentHeight | toLabelHeight]\"\r\n    >{{label}}</label\r\n  >\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 align-items-center w-50 my-3\"\r\n        *ngIf=\"uploads.length > 0\"\r\n      >\r\n        <div class=\"flex-fill 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              <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      <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    <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(--bs-form-invalid-border-color)}.dropzone .content{bottom:0;left:0;position:relative;right:0;top:0}.dropzone .content .is-invalid{color:var(--bs-form-invalid-border-color)}.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%;opacity:0;position:absolute;width: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 mb-3\" [class.g-0]=\"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) : 'visually-hidden', componentHeight | toLabelHeight]\"\r\n    >{{label}}</label\r\n  >\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 position-relative\"\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 align-items-center w-50 my-3\"\r\n        *ngIf=\"uploads.length > 0\"\r\n      >\r\n        <div class=\"flex-fill 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              <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      <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    <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(--bs-form-invalid-border-color)}.dropzone .content{bottom:0;left:0;position:relative;right:0;top:0}.dropzone .content .is-invalid{color:var(--bs-form-invalid-border-color)}.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%;opacity:0;position:absolute;width: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 mb-3\" [class.g-0]=\"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) : 'visually-hidden', componentHeight | toLabelHeight]\"\r\n    >{{label}}</label\r\n  >\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      <!-- 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=\"pe-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        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\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=\"pe-2\"></span>{{\r\n        lngResourceService.GetString(validationKeyService.UploadButtonUpload) |\r\n        async }}\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</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;opacity: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 mb-3\" [class.g-0]=\"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) : 'visually-hidden', componentHeight | toLabelHeight]\"\r\n    >{{label}}</label\r\n  >\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=\"pe-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=\"pe-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\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=\"pe-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</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;opacity: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 SACBootstrap5UploadModule {
+}
+SACBootstrap5UploadModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [
+                    SacUploadComponent,
+                    SacUploadMultipleComponent,
+                    SacDropzoneSingleComponent,
+                    SacDropzoneMultipleComponent,
+                ],
+                imports: [CommonModule, FormsModule, SACBootstrap5LayoutModule],
+                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.FilebrowserButtonDelete),
+            }).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=\"me-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 SACBootstrap5BrowserModule {
+}
+SACBootstrap5BrowserModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [SacBrowserComponent],
+                imports: [
+                    CommonModule,
+                    HttpClientModule,
+                    SACBootstrap5ConfirmModule,
+                    SACBootstrap5ContextmenuModule,
+                    SACBootstrap5UploadModule,
+                    SACBootstrap5FormModule,
+                    FormsModule,
+                ],
+                exports: [SacBrowserComponent],
+                bootstrap: [SacBrowserComponent],
+            },] }
+];
+
+/**
+ * Checkbox Kompontente
+ */
+class SacCheckboxComponent extends SacCheckboxCommon {
+    // #region Constructors
+    /**
+     * Constructor
+     * @param formLayout SacFormLayout to define scoped layout settings
+     * @param injector Injector for injecting services
+     */
+    constructor(formLayout, injector) {
+        super(formLayout, injector);
+    }
+}
+SacCheckboxComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'sac-checkbox',
+                template: "<div class=\"row\" [class.g-0]=\"disablelabel\" [class.mb-3]=\"!stacked\">\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[!disablelabel && !stacked ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden' ]\"\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}}</label\r\n    >\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  </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
+    /**
+     * Constructor
+     * @param formLayout SacFormLayout to define scoped layout settings
+     * @param injector Injector for injecting services
+     */
+    constructor(formLayout, injector) {
+        super(formLayout, injector);
+    }
+}
+SacRadiobuttonsComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'sac-radiobuttons',
+                template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <div\r\n    *ngIf=\"disablelabel === false\"\r\n    class=\"col-12 pt-0\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden' ]\"\r\n  >\r\n    <label\r\n      class=\"col-form-label\"\r\n      [ngClass]=\"componentHeight | toLabelHeight\"\r\n      *ngIf=\"!disablelabel\"\r\n      >{{label}}</label\r\n    >\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  </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 SACBootstrap5CheckboxModule {
+}
+SACBootstrap5CheckboxModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [
+                    SacCheckboxComponent,
+                    SacRadiobuttonComponent,
+                    SacRadiobuttonsComponent,
+                ],
+                imports: [CommonModule, SACBootstrap5LayoutModule],
+                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 mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12 position-relative\"\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      <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        *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      class=\"popover fade bs-popover-bottom show position-absolute\"\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        margin-top: 7px;\r\n      \"\r\n    >\r\n      <div\r\n        class=\"popover-arrow position-absolute\"\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-start\">\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-end\">\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 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=\"flex-grow-1 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 mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12 position-relative\"\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      <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        *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      class=\"popover fade bs-popover-bottom show position-absolute\"\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        margin-top: 7px;\r\n      \"\r\n    >\r\n      <div\r\n        class=\"popover-arrow position-absolute\"\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 mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12 position-relative\"\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      <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        *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      class=\"popover fade bs-popover-bottom show position-absolute\"\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        margin-top: 7px;\r\n      \"\r\n    >\r\n      <div\r\n        class=\"popover-arrow position-absolute\"\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 SACBootstrap5DateTimeModule {
+}
+SACBootstrap5DateTimeModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [
+                    SacDateComponent,
+                    SacDateTimeComponent,
+                    SacTimeComponent,
+                    SacDateSelectorComponent,
+                ],
+                imports: [CommonModule, IMaskModule, SACBootstrap5LayoutModule],
+                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 *ngTemplateOutlet=\"template; context { row: {}, type: 'header'}\">\r\n        </ng-container>\r\n      </tr>\r\n    </thead>\r\n    <tbody>\r\n      <ng-container *ngFor=\"let item of value; let i=index\">\r\n        <tr>\r\n          <ng-container *ngTemplateOutlet=\"template; context { row: item, type: 'body'}\">\r\n          </ng-container>\r\n        </tr>\r\n      </ng-container>\r\n      <tr *ngIf=\"value === undefined || value === null || value.length===0\">\r\n        <td [attr.colspan]=\"ColumnCount\">{{emptytext}}</td>\r\n      </tr>\r\n      <tr>\r\n        <td [attr.colspan]=\"ColumnCount\">\r\n          <div class=\"container-fluid\">\r\n            <sac-paging name=\"{{name}}Paging\" (paging)=\"pageChange($event)\" [pagerdata]=\"pagerdata\" [pagesizes]=\"pagesizes\" [pagingtext]=\"pagingtext\" [pagesizetext]=\"pagesizetext\" [pagesizedisabled]=\"pagesizedisabled\"></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
+ *
+ * @example Standard Action
+ *
+ * <ngGridButton icon="edit" (clicked)="action('edit')" [isdisabled]="true"></ngGridButton>
+ *
+ * @example Custom Action
+ *
+ * <ngGridButton iconstyle="sprite" icon="icon-sprite-base-main_info" (clicked)="action("info")"></ngGridButton>
+ *
+ */
+class SacGridButtonComponent extends SacGridButtonCommon {
+    /**
+     * Gibt das Icon für den Button zurück
+     */
+    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=\"ps-2\"\r\n    [class]=\"IconSortUp\"\r\n    *ngIf=\"IsSortedColumn() && GetSortDirection() ==='asc'\"\r\n  ></span>\r\n  <span\r\n    class=\"ps-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-select form-select-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=\"ms-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 SACBootstrap5GridModule {
+}
+SACBootstrap5GridModule.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 mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\r\n    >{{label}}</label\r\n  >\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    <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=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\r\n    >{{label}}</label\r\n  >\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    <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 mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\r\n    >{{label}}</label\r\n  >\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 input-group-sm\"\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      <span class=\"input-group-text\">{{currency}}</span>\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</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 SacFormLayout to define scoped layout settings
+     * @param injector Injector for injecting services
+     */
+    constructor(formLayout, injector) {
+        super(formLayout, injector);
+    }
+}
+SacInputDecimalComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'sac-inputdecimal',
+                template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\r\n    >{{label}}</label\r\n  >\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    <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=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\r\n    >{{label}}</label\r\n  >\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      <span class=\"input-group-text\">@</span>\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  </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=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\r\n    >{{label}}</label\r\n  >\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    <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=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\r\n    >{{label}}</label\r\n  >\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    <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 mb-3\" [class.g-0]=\"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) : 'visually-hidden', componentHeight | toLabelHeight]\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}</label\r\n  >\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      <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</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 SACBootstrap5InputModule {
+}
+SACBootstrap5InputModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [
+                    SacInputComponent,
+                    SacInputAreaComponent,
+                    SacInputCurrencyComponent,
+                    SacInputDecimalComponent,
+                    SacInputEmailComponent,
+                    SacInputIntegerComponent,
+                    SacInputPasswordComponent,
+                    SacInputSearchComponent,
+                ],
+                imports: [CommonModule, SACBootstrap5LayoutModule],
+                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 mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\r\n    >{{label}}</label\r\n  >\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-select\"\r\n      [class.form-select-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.form-select-lg]=\"componentHeight === ControlHeight.Large\"\r\n      [ngClass]=\"{'is-invalid': invalid && (dirty || touched) }\"\r\n      (blur)=\"onTouch()\"\r\n      (change)=\"setValue(dropdownitem.value)\"\r\n      [disabled]=\"isdisabled\"\r\n    >\r\n      <option *ngIf=\"emptylabel !== ''\" [ngValue]=\"emptyvalue\">\r\n        {{emptylabel}}\r\n      </option>\r\n\r\n      <ng-content></ng-content>\r\n\r\n      <ng-container *ngIf=\"groupitems === ''\">\r\n        <option\r\n          *ngFor=\"let item of options\"\r\n          [ngValue]=\"optionvalue ? item[optionvalue] : item\"\r\n          [disabled]=\"optionenabled !== '' && item[optionenabled] === false\"\r\n        >\r\n          <ng-template\r\n            *ngTemplateOutlet=\"optionlabeltemplate || defaultItemLabelTemplate;context:{ label: item[optionlabel], item: item }\"\r\n          >\r\n          </ng-template>\r\n        </option>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"groupitems !== ''\">\r\n        <optgroup\r\n          *ngFor=\"let group of options\"\r\n          [attr.label]=\"group[grouplabel]\"\r\n        >\r\n          <option\r\n            *ngFor=\"let item of group[groupitems]\"\r\n            [ngValue]=\"optionvalue ? item[optionvalue] : item\"\r\n            [disabled]=\"optionenabled !== '' && item[optionenabled] === false\"\r\n          >\r\n            <ng-template\r\n              *ngTemplateOutlet=\"optionlabeltemplate || defaultItemLabelTemplate;context:{ label: item[optionlabel], item: item }\"\r\n            >\r\n            </ng-template>\r\n          </option>\r\n        </optgroup>\r\n      </ng-container>\r\n    </select>\r\n    <div\r\n      class=\"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 SACBootstrap5DropdownModule {
+}
+SACBootstrap5DropdownModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [SacDropdownComponent, SacDropdownOptionDirective],
+                imports: [CommonModule, SACBootstrap5LayoutModule],
+                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 mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\r\n    >{{label}}</label\r\n  >\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-select\"\r\n      [class.form-select-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.form-select-lg]=\"componentHeight === ControlHeight.Large\"\r\n      [size]=\"rowsize\"\r\n      [ngClass]=\"{'is-invalid': invalid && (dirty || touched) }\"\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    <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 SACBootstrap5ListModule {
+}
+SACBootstrap5ListModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [SacListboxComponent, SacListboxOptionDirective],
+                imports: [CommonModule, SACBootstrap5LayoutModule],
+                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 mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\r\n    >{{label}}</label\r\n  >\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      placement=\"bottom-right\"\r\n      sac-multilanguagemenu\r\n      [buttontemplate]=\"menuButton\"\r\n      [inputtemplate]=\"menuInput\"\r\n      [validationtemplate]=\"validationMessage\"\r\n      #contextmenu\r\n    >\r\n      <ng-template #menuInput>\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      </ng-template>\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\r\n      <ng-template #validationMessage>\r\n        <div\r\n          *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n          class=\"invalid-feedback\"\r\n        >\r\n          {{ GetErrorMessage() | async }}\r\n        </div></ng-template\r\n      >\r\n\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  </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 mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\r\n    >{{label}}</label\r\n  >\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      placement=\"bottom-right\"\r\n      sac-multilanguagemenu\r\n      [buttontemplate]=\"menuButton\"\r\n      [inputtemplate]=\"menuInput\"\r\n      [validationtemplate]=\"validationMessage\"\r\n      #contextmenu\r\n    >\r\n      <ng-template #menuInput>\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      </ng-template>\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\r\n      <ng-template #validationMessage>\r\n        <div\r\n          *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n          class=\"invalid-feedback\"\r\n        >\r\n          {{ GetErrorMessage() | async }}\r\n        </div></ng-template\r\n      >\r\n\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  </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 {
+    // #endregion Properties
+    // #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]=\"inputtemplate || defaultInputTemplate\"\r\n></ng-container>\r\n<ng-container\r\n  [ngTemplateOutlet]=\"buttontemplate || defaultButtonTemplate\"\r\n></ng-container>\r\n<ng-container\r\n  [ngTemplateOutlet]=\"validationtemplate || defaultValidationTemplate\"\r\n></ng-container>\r\n\r\n<ul\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</ul>\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\r\n<ng-template #defaultInputTemplate>\r\n  <input type=\"text\" class=\"form-control\" />\r\n</ng-template>\r\n\r\n<ng-template #defaultValidationTemplate></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 }
+];
+SacMultilanguagemenuComponent.propDecorators = {
+    inputtemplate: [{ type: Input }],
+    validationtemplate: [{ type: Input }]
+};
+
+/**
+ * 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: "<li>\r\n  <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</li>\r\n"
+            },] }
+];
+SacMultilanguagemenuItemButtonComponent.ctorParameters = () => [
+    { type: SacContextmenuCommon }
+];
+
+class SACBootstrap5MultilanguageModule {
+}
+SACBootstrap5MultilanguageModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [
+                    SacMultilanguageInputComponent,
+                    SacMultilanguageInputAreaComponent,
+                    SacMultilanguagemenuComponent,
+                    SacMultilanguagemenuAnchorDirective,
+                    SacMultilanguagemenuContainerDirective,
+                    SacMultilanguagemenuItemButtonComponent,
+                ],
+                imports: [CommonModule, SACBootstrap5LayoutModule],
+                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
+    /**
+     * Constructor
+     * @param formLayout SacFormLayout to define scoped layout settings
+     * @param injector Injector for injecting services
+     */
+    constructor(formLayout, injector) {
+        super(formLayout, injector);
+    }
+}
+SacStaticFormContainerComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'sac-staticformcontainer',
+                template: "<div class=\"row mb-3\" [class.g-0]=\"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) : 'visually-hidden', componentHeight | toLabelHeight]\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}</label\r\n  >\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    <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
+    /**
+     * Constructor
+     * @param formLayout SacFormLayout to define scoped layout settings
+     * @param injector Injector for injecting services
+     */
+    constructor(formLayout, injector) {
+        super(formLayout, injector);
+    }
+}
+SacStaticLabelComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'sac-staticlabel',
+                template: "<div class=\"row mb-3\" [class.g-0]=\"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) : 'visually-hidden', componentHeight | toLabelHeight]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"form-control-plaintext\"\r\n      [ngClass]=\"[componentHeight | toControlHeight]\"\r\n      [innerHTML]=\"value\"\r\n    ></div>\r\n    <label\r\n      for=\"{{name}}\"\r\n      class=\"col-left control-label\"\r\n      *ngIf=\"isAdaptiveLabel && !disablelabel\"\r\n      >{{label}}</label\r\n    >\r\n  </div>\r\n</div>\r\n",
+                // 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 SACBootstrap5StaticLabelModule {
+}
+SACBootstrap5StaticLabelModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [SacStaticLabelComponent, SacStaticFormContainerComponent],
+                imports: [CommonModule, SACBootstrap5LayoutModule],
+                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<ul class=\"nav nav-tabs\" role=\"tablist\">\r\n  <li class=\"nav-item\" *ngFor=\"let item of _tabItems\">\r\n    <a\r\n      role=\"tab\"\r\n      class=\"nav-link\"\r\n      data-toggle=\"tab\"\r\n      [ngClass]=\"{ 'active': 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  </li>\r\n</ul>\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 SACBootstrap5TabsModule {
+}
+SACBootstrap5TabsModule.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=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <div\r\n    class=\"col\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\r\n  >\r\n    <label for=\"{{name}}\" class=\"form-control-label\">{{label}}</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    <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(--bs-form-invalid-border-color)}"]
+            },] }
+];
+SacTinyMceComponent.ctorParameters = () => [
+    { type: SacFormLayoutDirective, decorators: [{ type: Host }, { type: Optional }] },
+    { type: Injector },
+    { type: NgZone }
+];
+
+class SACBootstrap5TinyMceModule {
+}
+SACBootstrap5TinyMceModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [SacTinyMceComponent],
+                imports: [
+                    CommonModule,
+                    FormsModule,
+                    EditorModule,
+                    SACBootstrap5ButtonModule,
+                    SACBootstrap5DialogModule,
+                    SACBootstrap5BrowserModule,
+                    SACBootstrap5LayoutModule,
+                ],
+                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(formControl, injector) {
+        super(formControl, 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 SACBootstrap5ValidationSummaryModule {
+}
+SACBootstrap5ValidationSummaryModule.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 SACBootstrap5WizardModule {
+}
+SACBootstrap5WizardModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [SacWizardComponent, SacWizardItemComponent],
+                imports: [CommonModule, SACBootstrap5LayoutModule],
+                exports: [SacWizardComponent, SacWizardItemComponent],
+            },] }
+];
+
+/*
+ * Public API Surface of sac-bootstrap5
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SACBootstrap5BrowserModule, SACBootstrap5ButtonModule, SACBootstrap5CheckboxModule, SACBootstrap5ConfirmModule, SACBootstrap5ContextmenuModule, SACBootstrap5DateTimeModule, SACBootstrap5DialogModule, SACBootstrap5DropdownModule, SACBootstrap5FormModule, SACBootstrap5GridModule, SACBootstrap5InputModule, SACBootstrap5LayoutModule, SACBootstrap5ListModule, SACBootstrap5MultilanguageModule, SACBootstrap5StaticLabelModule, SACBootstrap5TabsModule, SACBootstrap5TinyMceModule, SACBootstrap5UploadModule, SACBootstrap5ValidationSummaryModule, SACBootstrap5WizardModule, SacFormDirective, ServiceConfirm, SacBrowserComponent as ɵa, SacDropzoneMultipleComponent as ɵb, SacTimeComponent as ɵba, SacDateSelectorComponent as ɵbb, SacGridComponent as ɵbc, SacGridColumnComponent as ɵbd, SacGridColumnActionComponent as ɵbe, SacPagingComponent as ɵbf, SacGridButtonComponent as ɵbg, SacGridImageComponent as ɵbh, SacInputComponent as ɵbi, SacInputAreaComponent as ɵbj, SacInputCurrencyComponent as ɵbk, SacInputDecimalComponent as ɵbl, SacInputEmailComponent as ɵbm, SacInputIntegerComponent as ɵbn, SacInputPasswordComponent as ɵbo, SacInputSearchComponent as ɵbp, SacDropdownComponent as ɵbq, SacDropdownOptionDirective as ɵbr, SacListboxComponent as ɵbs, SacListboxOptionDirective as ɵbt, SacMultilanguageInputComponent as ɵbu, SacMultilanguageInputAreaComponent as ɵbv, SacMultilanguagemenuComponent as ɵbw, SacMultilanguagemenuAnchorDirective as ɵbx, SacMultilanguagemenuContainerDirective as ɵby, SacMultilanguagemenuItemButtonComponent as ɵbz, SacFormLayoutDirective as ɵc, SacStaticLabelComponent as ɵca, SacStaticFormContainerComponent as ɵcb, SacTabComponent as ɵcc, SacTabItemComponent as ɵcd, SacTinyMceComponent as ɵce, SacValidationSummaryComponent as ɵcf, SacWizardComponent as ɵcg, SacWizardItemComponent as ɵch, 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, SACFORM_FACTORY as ɵs, NGFORM_FACTORY as ɵt, SacInheritFormDirective as ɵu, SacCheckboxComponent as ɵv, SacRadiobuttonComponent as ɵw, SacRadiobuttonsComponent as ɵx, SacDateComponent as ɵy, SacDateTimeComponent as ɵz };
+//# sourceMappingURL=simpleangularcontrols-sac-bootstrap5.js.map