@simpleangularcontrols/sac-common 13.0.0-rc.2 → 13.0.0-rc.3

package/fesm2015/simpleangularcontrols-sac-common.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Directive, Input, Output, ViewChild, HostListener, InjectionToken, Injectable, Host, ViewChildren, TemplateRef, ContentChild, Inject, NgModule } from '@angular/core';
+import { EventEmitter, Directive, Input, Output, InjectionToken, Injectable, Host, ViewChild, HostListener, ViewChildren, TemplateRef, ContentChild, Inject, NgModule } from '@angular/core';
 import * as i1 from '@angular/forms';
-import { FormGroup, NgControl, FormControlName, FormGroupDirective, Validators } from '@angular/forms';
+import { NgControl, FormControlName, FormGroupDirective, Validators, FormGroup } from '@angular/forms';
 import { Observable, of } from 'rxjs';
 import * as moment_ from 'moment';
 import moment___default from 'moment';
@@ -151,225 +151,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                 type: Output
             }] } });
 
-/**
- * Base Komponente für Dialog
- */
-class SacDialogCommon {
-    // #endregion
-    // #region Constructor
-    /**
-     * Konstruktor
-     * Inject des Formulars
-     */
-    constructor(cdRef) {
-        this.cdRef = cdRef;
-        this.hasSetBodyTag = false;
-        /**
-         * Boolean Property definiert ob das Dialog angezeigt wird
-         */
-        this._show = false;
-        /**
-         * Das property enthielt (wenn überhaupt gesetzt) entweder keywords für sizing oder custom css Klassen.
-         * Die akzeptabel keywordssind: 'small', 'large', 'extralarge', 'medium', ''.
-         */
-        this._size = '';
-        // #region Properties
-        /**
-         * Input Property. Erhält den Title des Dialog. Default Value: 'Dialog'.
-         */
-        this.title = 'Dialog';
-        /**
-         * Das input property akzeptiert boolen Wert. Definiert ob das Dialog darf durch ESC geschlossen werden. Default ist true.
-         */
-        this.allowesc = true;
-        /**
-         * Das input property akzeptiert boolen Wert. Definiert ob das Dialog darf durch click außerhalb des Dialog-Fenster geschlossen werden. Default ist true.
-         */
-        this.backdrop = true;
-        /**
-         * Input Property. Erhält den Namen des Dialog - benutzt für das ID. Default Value: ''
-         */
-        this.name = '';
-        /**
-         * Steuert ob im Header des Dialogs ein Button angezeigt wird.
-         */
-        this.closebutton = true;
-        /**
-         * Input Property. Erhält die Breite des Dialog
-         */
-        this.width = null;
-        /**
-         * Definiert eine feste Höhe beim Dialog.
-         */
-        this.height = null;
-        /**
-         * Output Emitter. Wird aufgerufen, wenn das Wert des _show property geändert ist - damait das Dialog geöfnet/geschlossen wird.
-         */
-        this.isvisibleChange = new EventEmitter();
-    }
-    /**
-     * Implementation als Setter, da mit ngIf das Element bei Unsichtbarkeit UNDEFINED ist.
-     */
-    set dialogElementSetter(content) {
-        this.dialogElement = content;
-    }
-    /**
-     * Das Input akzeptiert sowohl default size-css-Klassen als auch custom Klassen.
-     * case insensitive.
-     * Die akzeptabel default-size-Klassen sind: 'small', 'large', 'extralarge', 'medium', ''.
-     * Wenn size ist NICHT gesetzt (oder 'medium' oder ''), default ist in medium size: max-width 500px.
-     */
-    set size(v) {
-        v = v.toLowerCase();
-        this._size = v;
-    }
-    /**
-     * Setter. Erhält das boolen Wert des _show property
-     */
-    set isvisible(v) {
-        if (v &&
-            !this.hasSetBodyTag &&
-            !document.body.classList.contains('modal-open')) {
-            document.body.classList.add('modal-open');
-            this.hasSetBodyTag = true;
-        }
-        if (!v &&
-            this.hasSetBodyTag &&
-            document.body.classList.contains('modal-open')) {
-            document.body.classList.remove('modal-open');
-            this.hasSetBodyTag = false;
-        }
-        this._show = v;
-    }
-    /**
-     * Getter. Ergibt das boolen Wert des _show property
-     */
-    get isvisible() {
-        return this._show;
-    }
-    /**
-     * Die Funktion prüft ob es ein default css classe für Size des Dialog durch den size Input gesetzt wurde.
-     */
-    issetdefaultsize() {
-        let result = false;
-        switch (this._size) {
-            case 'small':
-                result = true;
-                break;
-            case 'medium':
-                result = true;
-                break;
-            case 'large':
-                result = true;
-                break;
-            case 'extralarge':
-                result = true;
-                break;
-            case '':
-                result = true;
-                break;
-        }
-        return result;
-    }
-    // #endregion
-    /**
-     * Methode wenn Componente entfernt wird
-     */
-    ngOnDestroy() {
-        if (this.hasSetBodyTag && document.body.classList.contains('modal-open')) {
-            document.body.classList.remove('modal-open');
-            this.hasSetBodyTag = false;
-        }
-    }
-    // #region Methods
-    /**
-     * Die Methode setz den Wert des _show property auf true
-     */
-    show() {
-        this._show = true;
-        if (!this.hasSetBodyTag &&
-            !document.body.classList.contains('modal-open')) {
-            document.body.classList.add('modal-open');
-            this.hasSetBodyTag = true;
-        }
-        this.isvisibleChange.emit(this._show);
-    }
-    /**
-     * Die Methode setz den Wert des _show property auf false
-     */
-    hide() {
-        if (this.hasSetBodyTag && document.body.classList.contains('modal-open')) {
-            document.body.classList.remove('modal-open');
-            this.hasSetBodyTag = false;
-        }
-        this._show = false;
-        this.isvisibleChange.emit(this._show);
-    }
-    /**
-     * Getter for ChangeDetector.
-     */
-    get ChangeDetector() {
-        return this.cdRef;
-    }
-    // #endregion
-    // #region Host Actions
-    /**
-     * Allow Close by Click outside Dialog
-     */
-    onClick(event) {
-        if (this.allowesc === false ||
-            (this.dialogElement !== null &&
-                this.dialogElement !== undefined &&
-                event.target !== this.dialogElement.nativeElement)) {
-            return;
-        }
-        this.hide();
-    }
-    /**
-     * Allow Close by ESC
-     */
-    onKeydownHandler(event) {
-        const ESCAPE_KEYCODE = 'Escape';
-        if (this.allowesc === true && event.key === ESCAPE_KEYCODE) {
-            this.hide();
-        }
-    }
-}
-SacDialogCommon.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacDialogCommon, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
-SacDialogCommon.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: SacDialogCommon, inputs: { title: "title", allowesc: "allowesc", backdrop: "backdrop", name: "name", closebutton: "closebutton", width: "width", height: "height", size: "size", isvisible: "isvisible" }, outputs: { isvisibleChange: "isvisibleChange" }, host: { listeners: { "click": "onClick($event)", "document:keydown": "onKeydownHandler($event)" } }, viewQueries: [{ propertyName: "dialogElementSetter", first: true, predicate: ["dialog"], descendants: true }], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacDialogCommon, decorators: [{
-            type: Directive
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { dialogElementSetter: [{
-                type: ViewChild,
-                args: ['dialog', { static: false }]
-            }], title: [{
-                type: Input
-            }], allowesc: [{
-                type: Input
-            }], backdrop: [{
-                type: Input
-            }], name: [{
-                type: Input
-            }], closebutton: [{
-                type: Input
-            }], width: [{
-                type: Input
-            }], height: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], isvisibleChange: [{
-                type: Output
-            }], isvisible: [{
-                type: Input
-            }], onClick: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }], onKeydownHandler: [{
-                type: HostListener,
-                args: ['document:keydown', ['$event']]
-            }] } });
-
 /**
  * Prüft ob ein Objekt Defined ist
  * @param value Objekt
@@ -889,161 +670,73 @@ function mapToObject(map) {
     return obj;
 }
 
-/**
- * Base Komponente für SacFormular
+/***
+ * base component for form options
  */
-class SacFormCommon {
-    /**
-     * Konstruktor
-     * @param form Instanz von NgForm
-     */
-    constructor(form) {
-        this.form = form;
+class SacFormLayoutCommon {
+    constructor() {
+        // #region Properties
         /**
-         * Inline Errors für das Formular
+         * defines that error messages are displayed under the controls
          */
-        this._inlineerrorenabled = null;
+        this.inlineError = true;
         /**
-         * Default Label Size for Form
+         * defines that the labels are displayed as adaptive labels
          */
-        this.labelsize = 3;
+        this.isAdaptiveLabel = false;
         /**
-         * Kontroliert, ob das Label adaptive ist
+         * default label size for medium devices
          */
-        this.isadaptivelabel = false;
+        this.labelSizeMd = null;
         /**
-         * Type des Forms
+         * default label size for small devices
          */
-        this.orientation = 'horizontal';
+        this.labelSizeSm = null;
         /**
-         * Standardwert wann die Werte via NgModel aktualisiert werden
+         * default label column size
          */
-        this._updateon = 'change';
-        this.form.options = { updateOn: this._updateon };
+        this.labelSizeXs = null;
+        /**
+         * default label size for extra extra large devices
+         */
+        this.labelSizeXxl = null;
+        /**
+         * default labe size for large devices
+         */
+        this.labelSizeLg = null;
+        /**
+         * default label size for extra large devices
+         */
+        this.labelSizeXl = null;
     }
+    // #endregion Properties
+    // #region Public Getters And Setters
     /**
-     * Definiert, wenn das Model geupdatet wird
+     * Returns whether the inline error messages for the form are active.
      */
-    set updateon(v) {
-        this._updateon = v;
-        this.form.options.updateOn = v;
-    }
-    get updateon() {
-        return this._updateon;
-    }
-    /**
-     * Aktiviert oder Deaktiviert die Inline Errors für das Control
-     */
-    set inlineerrorenabled(value) {
-        if (value === null || value === undefined) {
-            this._inlineerrorenabled = null;
-        }
-        else {
-            this._inlineerrorenabled = convertToBoolean(value);
-        }
-    }
-    /**
-     * Aktiviert oder Deaktiviert die Inline Errors für das Control
-     */
-    get inlineerrorenabled() {
-        return this._inlineerrorenabled;
-    }
-    /**
-     * Vertikale oder horizontale Orientierung des Formulars zurück
-     */
-    getOrientation() {
-        switch (this.orientation.toLowerCase()) {
-            case 'horizontal':
-                return 'horizontal';
-            case 'vertical':
-                return 'vertical';
-            case 'none':
-                return 'none';
-            default:
-                throw new Error('Invalid formtype at SacFormCommon. Valid values are horizontal, vertical, none');
-        }
-    }
-    /**
-     * Gibt die NgForm Instanz zurück
-     */
-    getForm() {
-        return this.form;
-    }
-    /**
-     * Markiert alle Controls innerhalb des Formulares als Touched
-     */
-    markAsTouched() {
-        if (this.form && this.form.invalid) {
-            this.markAsTouchedInternal(this.form.controls);
-        }
-    }
-    /**
-     * Aktualisiert die Werte und den Gültigkeitsstatus des Formulars
-     */
-    updateValueAndValidity(markAsTouched = true) {
-        // Update all Controls
-        this.updateValueAndValidityInternal(this.form.controls);
-        // Update Main Form
-        this.getForm().form.updateValueAndValidity();
-        // Mark all Controls as Touched
-        if (markAsTouched) {
-            this.markAsTouched();
-        }
-    }
-    /**
-     * Markiert alle Controls inkl. dem Tree als Touched
-     * @param controls Controls Collection
-     */
-    markAsTouchedInternal(controls) {
-        const keyList = Object.keys(controls);
-        for (const field of keyList) {
-            const control = controls[field];
-            if (control instanceof FormGroup) {
-                this.markAsTouchedInternal(control.controls);
-            }
-            else {
-                control.markAsTouched({ onlySelf: true });
-            }
-        }
-    }
-    /**
-     * Aktualisiert die Werte und die gültigkeit des Formulars
-     * @param controls Controls Collection
-     */
-    updateValueAndValidityInternal(controls) {
-        const keyList = Object.keys(controls);
-        for (const field of keyList) {
-            const control = controls[field];
-            if (control instanceof FormGroup) {
-                this.updateValueAndValidityInternal(control.controls);
-            }
-            else {
-                control.updateValueAndValidity({ onlySelf: true });
-            }
-        }
-    }
-    /**
-     * Gibt zurück, ob die Inline Error Meldungen für das Formular aktiv sind.
-     */
-    get IsInlineErrorEnabled() {
-        return this._inlineerrorenabled !== false;
+    get IsInlineErrorEnabled() {
+        return this.inlineError !== false;
     }
 }
-SacFormCommon.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacFormCommon, deps: [{ token: i1.NgForm }], target: i0.ɵɵFactoryTarget.Directive });
-SacFormCommon.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: SacFormCommon, inputs: { SacFormular: "SacFormular", labelsize: "labelsize", isadaptivelabel: "isadaptivelabel", orientation: "orientation", updateon: "updateon", inlineerrorenabled: "inlineerrorenabled" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacFormCommon, decorators: [{
+SacFormLayoutCommon.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacFormLayoutCommon, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+SacFormLayoutCommon.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: SacFormLayoutCommon, inputs: { inlineError: "inlineError", isAdaptiveLabel: "isAdaptiveLabel", labelSizeMd: "labelSizeMd", labelSizeSm: "labelSizeSm", labelSizeXs: "labelSizeXs", labelSizeXxl: "labelSizeXxl", labelSizeLg: "labelSizeLg", labelSizeXl: "labelSizeXl" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacFormLayoutCommon, decorators: [{
             type: Directive
-        }], ctorParameters: function () { return [{ type: i1.NgForm }]; }, propDecorators: { SacFormular: [{
+        }], propDecorators: { inlineError: [{
                 type: Input
-            }], labelsize: [{
+            }], isAdaptiveLabel: [{
                 type: Input
-            }], isadaptivelabel: [{
+            }], labelSizeMd: [{
                 type: Input
-            }], orientation: [{
+            }], labelSizeSm: [{
                 type: Input
-            }], updateon: [{
+            }], labelSizeXs: [{
                 type: Input
-            }], inlineerrorenabled: [{
+            }], labelSizeXxl: [{
+                type: Input
+            }], labelSizeLg: [{
+                type: Input
+            }], labelSizeXl: [{
                 type: Input
             }] } });
 
@@ -1051,65 +744,85 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
  * Abstract Klasse für SacBaseModelControl. Implements ControlValueAccessor, Validator, OnInit
  */
 class SacBaseModelControl {
-    // #endregion
-    // #region Constructor
+    // #endregion Properties
+    // #region Constructors
     /**
-     * Konstruktor
-     * Inject des Formulars
-     * @parent SacFormCommon
-     * @injector Injector
+     * Constructor
+     * @param formlayout SacFormLayoutCommon to define scoped layout settings
+     * @param injector Injector for injecting services
      */
-    constructor(parent, injector) {
+    constructor(formlayout, injector) {
         this.injector = injector;
+        // #region Properties
+        /**
+         * Inline Errors für das Control
+         */
+        this._inlineerrorenabled = null;
+        this._label = '';
+        /**
+         * Boolean Property dirty; default Wert - false
+         */
+        this._dirty = false;
         /**
          * SacModel Form ist disabled
          */
         this._disabledForm = false;
-        this._label = '';
-        // #endregion
-        // #region Properties
         /**
-         * Name des Controls
+         * Boolean Property touched; default Wert - false
          */
-        this.name = '';
+        this._touched = false;
         /**
-         * Definiert die Labelgröse
+         * Interne Variable, die den Wert des Controls hält
          */
-        this.labelsize = undefined;
+        this._value = null;
         /**
-         * Deaktiviert das Label im Template
+         * Form layout instance if exists
          */
-        this.disablelabel = false;
+        this.formlayout = null;
         /**
          * Deaktiviert das Input Control
          */
         this.disabled = false;
         /**
-         * Kontroliert, ob das Label adaptive ist
+         * Deaktiviert das Label im Template
          */
-        this.isadaptivelabel = undefined;
+        this.disablelabel = false;
         /**
-         * Definiert, ob das Control Sprachspezifisch ist
+         * defines that error messages are displayed under the controls
          */
-        this.islanguagespecific = false;
+        this.inlineError = true;
         /**
-         * Interne Variable, die den Wert des Controls hält
+         * defines that the labels are displayed as adaptive labels
          */
-        this._value = null;
+        this.isAdaptiveLabel = false;
         /**
-         * Boolean Property dirty; default Wert - false
+         * default label size for medium devices
          */
-        this._dirty = false;
+        this.labelSizeMd = null;
         /**
-         * Boolean Property touched; default Wert - false
+         * default label size for small devices
          */
-        this._touched = false;
+        this.labelSizeSm = null;
         /**
-         * Inline Errors für das Control
+         * default label column size
          */
-        this._inlineerrorenabled = null;
-        // #endregion
-        // #region Implementation ControlValueAccessor
+        this.labelSizeXs = null;
+        /**
+         * default label size for extra extra large devices
+         */
+        this.labelSizeXxl = null;
+        /**
+         * default labe size for large devices
+         */
+        this.labelSizeLg = null;
+        /**
+         * default label size for extra large devices
+         */
+        this.labelSizeXl = null;
+        /**
+         * Name des Controls
+         */
+        this.name = '';
         /**
          * Leere Implementation von "propagateChange". Muss gemacht werden, damit kein Fehler entsteht
          */
@@ -1118,21 +831,41 @@ class SacBaseModelControl {
          * Leere Implementation von "propagateTouch". Muss gemacht werden, damit kein Fehler entsteht
          */
         this.propagateTouch = () => { };
-        this.parent = parent;
+        this.formlayout = formlayout;
         this.lngResourceService = injector.get(SACLOCALISATION_SERVICE, new SacDefaultLocalisationService());
     }
+    // #endregion Constructors
+    // #region Public Getters And Setters
     /**
-     * Definiert den Label Text
+     * Methode ergibt Boolean Wert für dirty
      */
-    set label(v) {
-        this._label = v;
-        this.UpdateLabelToControl();
+    get dirty() {
+        if (this.ngControl !== null) {
+            this._dirty = this.ngControl.dirty;
+        }
+        return this._dirty;
+    }
+    get inlineerrorenabled() {
+        return this._inlineerrorenabled;
     }
     /**
-     * Definiert den Label Text
+     * Aktiviert oder Deaktiviert die Inline Errors für das Control
      */
-    get label() {
-        return this._label;
+    set inlineerrorenabled(value) {
+        if (value === null || value === undefined) {
+            this._inlineerrorenabled = null;
+        }
+        else {
+            this._inlineerrorenabled = convertToBoolean(value);
+        }
+    }
+    /**
+     * Methode ergibt boolean Wert wenn Form invalid oder nicht invalid ist
+     */
+    get invalid() {
+        return (this.ngControl !== undefined &&
+            this.ngControl !== null &&
+            this.ngControl.invalid);
     }
     /**
      * Definiert ob das Control disabled ist
@@ -1140,74 +873,59 @@ class SacBaseModelControl {
     get isdisabled() {
         return this._disabledForm || this.disabled;
     }
-    // #endregion
-    // #region Control Events
     /**
-     * Init Event
+     * Returns whether the inline error messages are active for this control.
      */
-    ngOnInit() {
+    get isinlineerrorenabled() {
         var _a, _b;
-        // receive form via formcontrolname or formcontrol instance
-        const formControl = this.injector.get(NgControl, null);
-        if (formControl instanceof FormControlName) {
-            const form = this.injector.get(FormGroupDirective, null);
-            this.ngControl = form.getControl(formControl);
-        }
-        else {
-            this.ngControl = formControl.control;
-        }
-        this.UpdateLabelToControl();
-        /**
-         * Label Size von Formular lesen
-         */
-        if (this.labelsize === undefined) {
-            if (((_a = this.parent) === null || _a === void 0 ? void 0 : _a.labelsize) !== undefined) {
-                this.labelsize = this.parent.labelsize;
-            }
-            else {
-                this.labelsize = 4;
-            }
-        }
-        /**
-         * Adaptive Label from Form
-         */
-        if (this.isadaptivelabel === undefined) {
-            if (((_b = this.parent) === null || _b === void 0 ? void 0 : _b.isadaptivelabel) !== undefined) {
-                this.isadaptivelabel = this.parent.isadaptivelabel;
-            }
-            else {
-                this.isadaptivelabel = false;
-            }
+        if (((_a = this.formlayout) === null || _a === void 0 ? void 0 : _a.IsInlineErrorEnabled) === null ||
+            ((_b = this.formlayout) === null || _b === void 0 ? void 0 : _b.IsInlineErrorEnabled) === undefined) {
+            return this._inlineerrorenabled;
         }
-        this.OnClassInit();
+        return (this.formlayout.IsInlineErrorEnabled !== false &&
+            this._inlineerrorenabled !== false);
     }
     /**
-     * Methode, damit andere Controls änderungen im Control mitbekommen können
-     * Zur Änderungsinfo die Methode propagateChange aufrufen.
+     * Definiert den Label Text
      */
-    registerOnChange(fn) {
-        this.propagateChange = (obj) => fn(obj);
+    get label() {
+        return this._label;
     }
     /**
-     * Methode, damit andere Controls änderungen mitbekommen, wenn das Control aktiviert (Focus) wird.
+     * Definiert den Label Text
      */
-    registerOnTouched(fn) {
-        this.propagateTouch = (obj) => fn(obj);
+    set label(v) {
+        this._label = v;
+        this.UpdateLabelToControl();
     }
     /**
-     * Methode zum schreiben von Werten aus dem Model in das Control
+     * returns an object with all label sizes. These values can then be transferred to corresponding CSS classes using a pipe
      */
-    writeValue(value) {
-        this._value = value;
+    get labelSizes() {
+        return {
+            labelSizeSm: this.labelSizeSm,
+            labelSizeMd: this.labelSizeMd,
+            labelSizeXs: this.labelSizeXs,
+            labelSizeXl: this.labelSizeXl,
+            labelSizeXxl: this.labelSizeXxl,
+            labelSizeLg: this.labelSizeLg,
+        };
     }
     /**
-     * Setzt das Control auf Disabled
+     * Methode ergibt Boolean Wert für touched
      */
-    setDisabledState(isDisabled) {
-        this._disabledForm = isDisabled;
+    get touched() {
+        if (this.ngControl !== null) {
+            this._touched = this.ngControl.touched;
+        }
+        return this._touched;
+    }
+    /**
+     * Get Methode für NgModel Binding in Html Markup
+     */
+    get value() {
+        return this._value;
     }
-    // #endregion
-    // #region Control Value
     /**
      * Set Methode für NgModel Binding in Html Markup
      * Input wird benötigt, damit der Wert auch über das Markup gesetzt werden kann.
@@ -1219,102 +937,10 @@ class SacBaseModelControl {
         this._value = this.ConvertInputValue(v);
         this.propagateChange(this._value);
     }
+    // #endregion Public Getters And Setters
+    // #region Public Methods
     /**
-     * Get Methode für NgModel Binding in Html Markup
-     */
-    get value() {
-        return this._value;
-    }
-    /**
-     * Methode die den Wert des Inputs setzt
-     */
-    setValue(v) {
-        this.value = v;
-    }
-    // #endregion
-    // #region Internal Properties
-    /**
-     * Berechnet die Breite des Labels
-     */
-    get _inputsize() {
-        return 12 - this.labelsize;
-    }
-    // #endregion
-    // #region Protected Helper Methods
-    /**
-     * Method can be used to Set Properties at Class Init
-     */
-    OnClassInit() { }
-    /**
-     * Methode ergibt Decimal Symbol
-     */
-    GetDecimalSymbol() {
-        return '.';
-    }
-    /**
-     * Method can Overwriten in Parent Classes
-     * @param value Wert welcher in den korrekten Typ konvertiert werden soll
-     * @returns Wert im korrekten Typ
-     */
-    ConvertInputValue(value) {
-        return value;
-    }
-    UpdateLabelToControl() {
-        // HACK: Add addition property to FormControl. Can be fixed if solution for ticket: https://github.com/angular/angular/issues/19686
-        if (this.ngControl) {
-            this.ngControl.controllabel = this.label;
-        }
-    }
-    // #endregion
-    //#region Validation Base
-    /**
-     * Validator Methode
-     */
-    validate(c) {
-        const error = this.validateData(c);
-        return error;
-    }
-    /**
-     * Methode registriert Änderungen bei der Validierung
-     */
-    registerOnValidatorChange(fn) {
-        this._onChange = fn;
-    }
-    /**
-     * Methode ergibt Boolean Wert für dirty
-     */
-    get dirty() {
-        if (this.ngControl !== null) {
-            this._dirty = this.ngControl.dirty;
-        }
-        return this._dirty;
-    }
-    /**
-     * Methode ergibt Boolean Wert für touched
-     */
-    get touched() {
-        if (this.ngControl !== null) {
-            this._touched = this.ngControl.touched;
-        }
-        return this._touched;
-    }
-    /**
-     * Methode ergibt boolean Wert wenn Form invalid oder nicht invalid ist
-     */
-    get invalid() {
-        return (this.ngControl !== undefined &&
-            this.ngControl !== null &&
-            this.ngControl.invalid);
-    }
-    /**
-     * Methode ergibt boolean touched = true
-     */
-    onTouch() {
-        this._touched = true;
-        this.propagateTouch();
-    }
-    /**
-     * Methode ergibt Error anhand von gegebenen Kriterien
+     * Methode ergibt Error anhand von gegebenen Kriterien
      */
     GetErrorMessage() {
         if (this.ngControl.errors === undefined || this.ngControl.errors === null) {
@@ -1349,66 +975,213 @@ class SacBaseModelControl {
         return this.lngResourceService.GetString(errorItem.errorMessageKey, parameters);
     }
     /**
-     * Aktualisiert den NgModel Wert und die Gültigkeit des Validators des Controls
+     * Init Event
      */
-    UpdateValueAndValidity() {
-        if (this.ngControl) {
-            this.ngControl.updateValueAndValidity({ onlySelf: true });
+    ngOnInit() {
+        // receive form via formcontrolname or formcontrol instance
+        const formControl = this.injector.get(NgControl, null);
+        if (formControl instanceof FormControlName) {
+            const form = this.injector.get(FormGroupDirective, null);
+            this.ngControl = form.getControl(formControl);
+        }
+        else {
+            if (formControl) {
+                this.ngControl = formControl.control;
+            }
         }
+        this.UpdateLabelToControl();
+        // set label sizes from formlayout directive
+        this.setLabelSizes();
+        // set adaptive label property from formlayout directive
+        this.setIsAdaptiveLabel();
+        this.OnClassInit();
     }
     /**
-     * Aktiviert oder Deaktiviert die Inline Errors für das Control
+     * Set label sizes from property or parent layout control
      */
-    set inlineerrorenabled(value) {
-        if (value === null || value === undefined) {
-            this._inlineerrorenabled = null;
+    setLabelSizes() {
+        var _a, _b, _c, _d, _e, _f;
+        // set size extra small
+        if (!this.labelSizeXs) {
+            if ((_a = this.formlayout) === null || _a === void 0 ? void 0 : _a.labelSizeXs) {
+                this.labelSizeXs = this.formlayout.labelSizeXs;
+            }
+            else {
+                this.labelSizeXs = 12;
+            }
         }
-        else {
-            this._inlineerrorenabled = convertToBoolean(value);
+        // set size small
+        if (!this.labelSizeSm) {
+            if ((_b = this.formlayout) === null || _b === void 0 ? void 0 : _b.labelSizeSm) {
+                this.labelSizeSm = this.formlayout.labelSizeSm;
+            }
+            else {
+                this.labelSizeSm = 4;
+            }
+        }
+        // set size medium
+        if (!this.labelSizeMd) {
+            if ((_c = this.formlayout) === null || _c === void 0 ? void 0 : _c.labelSizeMd) {
+                this.labelSizeMd = this.formlayout.labelSizeMd;
+            }
+        }
+        // set size large
+        if (!this.labelSizeLg) {
+            if ((_d = this.formlayout) === null || _d === void 0 ? void 0 : _d.labelSizeLg) {
+                this.labelSizeLg = this.formlayout.labelSizeLg;
+            }
+        }
+        // set size extra large
+        if (!this.labelSizeXl) {
+            if ((_e = this.formlayout) === null || _e === void 0 ? void 0 : _e.labelSizeXl) {
+                this.labelSizeXl = this.formlayout.labelSizeXl;
+            }
+        }
+        // set size extra extra large
+        if (!this.labelSizeXxl) {
+            if ((_f = this.formlayout) === null || _f === void 0 ? void 0 : _f.labelSizeXxl) {
+                this.labelSizeXxl = this.formlayout.labelSizeXxl;
+            }
         }
     }
-    get inlineerrorenabled() {
-        return this._inlineerrorenabled;
+    /**
+     * Set adaptive label property from parent layout control
+     */
+    setIsAdaptiveLabel() {
+        var _a;
+        if (!this.isAdaptiveLabel) {
+            if (((_a = this.formlayout) === null || _a === void 0 ? void 0 : _a.isAdaptiveLabel) !== undefined) {
+                this.isAdaptiveLabel = this.formlayout.isAdaptiveLabel;
+            }
+            else {
+                this.isAdaptiveLabel = false;
+            }
+        }
     }
     /**
-     * Returns whether the inline error messages are active for this control.
+     * Methode ergibt boolean touched = true
      */
-    get isinlineerrorenabled() {
-        var _a, _b;
-        if (((_a = this.parent) === null || _a === void 0 ? void 0 : _a.IsInlineErrorEnabled) === null ||
-            ((_b = this.parent) === null || _b === void 0 ? void 0 : _b.IsInlineErrorEnabled) === undefined) {
-            return this._inlineerrorenabled;
+    onTouch() {
+        this._touched = true;
+        this.propagateTouch();
+    }
+    /**
+     * Methode, damit andere Controls änderungen im Control mitbekommen können
+     * Zur Änderungsinfo die Methode propagateChange aufrufen.
+     */
+    registerOnChange(fn) {
+        this.propagateChange = (obj) => fn(obj);
+    }
+    /**
+     * Methode, damit andere Controls änderungen mitbekommen, wenn das Control aktiviert (Focus) wird.
+     */
+    registerOnTouched(fn) {
+        this.propagateTouch = (obj) => fn(obj);
+    }
+    /**
+     * Methode registriert Änderungen bei der Validierung
+     */
+    registerOnValidatorChange(fn) {
+        this._onChange = fn;
+    }
+    /**
+     * Setzt das Control auf Disabled
+     */
+    setDisabledState(isDisabled) {
+        this._disabledForm = isDisabled;
+    }
+    /**
+     * Methode die den Wert des Inputs setzt
+     */
+    setValue(v) {
+        this.value = v;
+    }
+    /**
+     * Validator Methode
+     */
+    validate(c) {
+        const error = this.validateData(c);
+        return error;
+    }
+    /**
+     * Methode zum schreiben von Werten aus dem Model in das Control
+     */
+    writeValue(value) {
+        this._value = value;
+    }
+    // #endregion Public Abstract Methods
+    // #region Protected Methods
+    /**
+     * Method can Overwriten in Parent Classes
+     * @param value Wert welcher in den korrekten Typ konvertiert werden soll
+     * @returns Wert im korrekten Typ
+     */
+    ConvertInputValue(value) {
+        return value;
+    }
+    /**
+     * Methode ergibt Decimal Symbol
+     */
+    GetDecimalSymbol() {
+        return '.';
+    }
+    /**
+     * Method can be used to Set Properties at Class Init
+     */
+    OnClassInit() { }
+    /**
+     * Aktualisiert den NgModel Wert und die Gültigkeit des Validators des Controls
+     */
+    UpdateValueAndValidity() {
+        if (this.ngControl) {
+            this.ngControl.updateValueAndValidity({ onlySelf: true });
+        }
+    }
+    // #endregion Protected Methods
+    // #region Private Methods
+    UpdateLabelToControl() {
+        // HACK: Add addition property to FormControl. Can be fixed if solution for ticket: https://github.com/angular/angular/issues/19686
+        if (this.ngControl) {
+            this.ngControl.controllabel = this.label;
         }
-        return (this.parent.IsInlineErrorEnabled !== false &&
-            this._inlineerrorenabled !== false);
     }
 }
-SacBaseModelControl.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacBaseModelControl, deps: [{ token: SacFormCommon, host: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
-SacBaseModelControl.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: SacBaseModelControl, inputs: { name: "name", label: "label", labelsize: "labelsize", disablelabel: "disablelabel", disabled: "disabled", isadaptivelabel: "isadaptivelabel", islanguagespecific: "islanguagespecific", value: "value", inlineerrorenabled: "inlineerrorenabled" }, ngImport: i0 });
+SacBaseModelControl.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacBaseModelControl, deps: [{ token: SacFormLayoutCommon, host: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
+SacBaseModelControl.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: SacBaseModelControl, inputs: { disabled: "disabled", disablelabel: "disablelabel", inlineError: "inlineError", isAdaptiveLabel: "isAdaptiveLabel", labelSizeMd: "labelSizeMd", labelSizeSm: "labelSizeSm", labelSizeXs: "labelSizeXs", labelSizeXxl: "labelSizeXxl", labelSizeLg: "labelSizeLg", labelSizeXl: "labelSizeXl", name: "name", inlineerrorenabled: "inlineerrorenabled", label: "label", value: "value" }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacBaseModelControl, decorators: [{
             type: Directive
         }], ctorParameters: function () {
-        return [{ type: SacFormCommon, decorators: [{
+        return [{ type: SacFormLayoutCommon, decorators: [{
                         type: Host
                     }] }, { type: i0.Injector }];
-    }, propDecorators: { name: [{
+    }, propDecorators: { disabled: [{
                 type: Input
-            }], label: [{
+            }], disablelabel: [{
                 type: Input
-            }], labelsize: [{
+            }], inlineError: [{
                 type: Input
-            }], disablelabel: [{
+            }], isAdaptiveLabel: [{
                 type: Input
-            }], disabled: [{
+            }], labelSizeMd: [{
                 type: Input
-            }], isadaptivelabel: [{
+            }], labelSizeSm: [{
                 type: Input
-            }], islanguagespecific: [{
+            }], labelSizeXs: [{
                 type: Input
-            }], value: [{
+            }], labelSizeXxl: [{
+                type: Input
+            }], labelSizeLg: [{
+                type: Input
+            }], labelSizeXl: [{
+                type: Input
+            }], name: [{
                 type: Input
             }], inlineerrorenabled: [{
                 type: Input
+            }], label: [{
+                type: Input
+            }], value: [{
+                type: Input
             }] } });
 
 /**
@@ -1418,9 +1191,13 @@ class SacCheckboxCommon extends SacBaseModelControl {
     constructor() {
         super(...arguments);
         /**
-        * Text welcher als Tooltip angezeigt wird.
-        */
+         * Text welcher als Tooltip angezeigt wird.
+         */
         this.tooltiptext = '';
+        /**
+         * Defines that the checkbox can be used in a list of checkboxes and is not handled as a single form control
+         */
+        this.stacked = false;
     }
     /**
      * Control hat keinen Validator
@@ -1430,13 +1207,15 @@ class SacCheckboxCommon extends SacBaseModelControl {
     }
 }
 SacCheckboxCommon.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacCheckboxCommon, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-SacCheckboxCommon.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: SacCheckboxCommon, inputs: { tooltiptext: "tooltiptext", checkboxtext: "checkboxtext" }, usesInheritance: true, ngImport: i0 });
+SacCheckboxCommon.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: SacCheckboxCommon, inputs: { tooltiptext: "tooltiptext", checkboxtext: "checkboxtext", stacked: "stacked" }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacCheckboxCommon, decorators: [{
             type: Directive
         }], propDecorators: { tooltiptext: [{
                 type: Input
             }], checkboxtext: [{
                 type: Input
+            }], stacked: [{
+                type: Input
             }] } });
 
 /**
@@ -1894,11 +1673,12 @@ class Validation {
  */
 class SacRadiobuttonsCommon extends SacBaseModelControl {
     /**
-     * Konstruktor
-     * Inject des Formulars
+     * Constructor
+     * @param formlayout SacFormLayoutCommon to define scoped layout settings
+     * @param injector Injector for injecting services
      */
-    constructor(parent, injector) {
-        super(parent, injector);
+    constructor(formlayout, injector) {
+        super(formlayout, injector);
         /**
          * Radio Button Index
          */
@@ -1947,7 +1727,7 @@ class SacRadiobuttonsCommon extends SacBaseModelControl {
     writeValue(value) {
         super.writeValue(value);
         if (value !== null && value !== undefined) {
-            this.contentRadiobuttons.forEach(itm => {
+            this.contentRadiobuttons.forEach((itm) => {
                 itm.checked = itm.value === value;
             });
         }
@@ -1957,7 +1737,7 @@ class SacRadiobuttonsCommon extends SacBaseModelControl {
      * Item selektieren
      */
     SelectItem(value) {
-        this.contentRadiobuttons.forEach(itm => {
+        this.contentRadiobuttons.forEach((itm) => {
             itm.checked = itm.value === value;
         });
         this.value = value;
@@ -1970,7 +1750,7 @@ class SacRadiobuttonsCommon extends SacBaseModelControl {
         if (radioButtons === undefined || radioButtons === null) {
             return false;
         }
-        return this.contentRadiobuttons.some(itm => itm.checked);
+        return this.contentRadiobuttons.some((itm) => itm.checked);
     }
     /**
      * Validator
@@ -1984,12 +1764,12 @@ class SacRadiobuttonsCommon extends SacBaseModelControl {
         }
     }
 }
-SacRadiobuttonsCommon.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacRadiobuttonsCommon, deps: [{ token: SacFormCommon, host: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
+SacRadiobuttonsCommon.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacRadiobuttonsCommon, deps: [{ token: SacFormLayoutCommon, host: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
 SacRadiobuttonsCommon.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: SacRadiobuttonsCommon, inputs: { validationmessagerequired: "validationmessagerequired", validationmessagesummaryrequired: "validationmessagesummaryrequired" }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacRadiobuttonsCommon, decorators: [{
             type: Directive
         }], ctorParameters: function () {
-        return [{ type: SacFormCommon, decorators: [{
+        return [{ type: SacFormLayoutCommon, decorators: [{
                         type: Host
                     }] }, { type: i0.Injector }];
     }, propDecorators: { validationmessagerequired: [{
@@ -2019,88 +1799,412 @@ class SacRadiobuttonCommon {
         /**
          * Unique Index für RadioButton
          */
-        this._index = null;
-        // Registration des Controls in SacRadioButtons Container
-        this.sacRadioButtons.RegisterRadioButton(this);
+        this._index = null;
+        // Registration des Controls in SacRadioButtons Container
+        this.sacRadioButtons.RegisterRadioButton(this);
+    }
+    /**
+     * Methode ergibt Boolean, ob Control disabled ist
+     */
+    get isDisabled() {
+        return this.disabled || this.sacRadioButtons.disabled;
+    }
+    /**
+     * Setter für hidden Property
+     */
+    set hidden(v) {
+        if (v === null || v === undefined || typeof v === 'boolean') {
+            this._hidden = v;
+        }
+        else {
+            this._hidden = v === 'true';
+        }
+        // Model Reset falls RadioButton selektiert war
+        if (this._hidden && this.checked) {
+            this.sacRadioButtons.SelectItem(null);
+        }
+    }
+    get hidden() {
+        return this._hidden;
+    }
+    /**
+     * Getter für Unique Index
+     */
+    get getIndex() {
+        if (this._index === null &&
+            this.sacRadioButtons !== null &&
+            this.sacRadioButtons !== undefined) {
+            this._index = this.sacRadioButtons.GetRadionButtonIndex();
+        }
+        return this._index;
+    }
+    /**
+     * Parent Control Name
+     */
+    get getName() {
+        return this.sacRadioButtons.name;
+    }
+    //#endregion
+    //#region Control Events
+    /**
+     * Event wenn die Komponente zerstört wird
+     */
+    ngOnDestroy() {
+        // De-Registration des Controls in SacRadioButtons Container
+        this.sacRadioButtons.UnregisterRadioButton(this);
+    }
+    //#endregion
+    /**
+     * Event bei Änderungen
+     */
+    ChangeEvent() {
+        if (!this.disabled) {
+            this.sacRadioButtons.SelectItem(this.value);
+            this.onselectitem.emit();
+        }
+    }
+}
+SacRadiobuttonCommon.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacRadiobuttonCommon, deps: [{ token: SacRadiobuttonsCommon }], target: i0.ɵɵFactoryTarget.Directive });
+SacRadiobuttonCommon.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: SacRadiobuttonCommon, inputs: { value: "value", label: "label", checked: "checked", disabled: "disabled", hidden: "hidden", labeltemplate: "labeltemplate" }, outputs: { onselectitem: "onselectitem" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacRadiobuttonCommon, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: SacRadiobuttonsCommon }]; }, propDecorators: { value: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], checked: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], onselectitem: [{
+                type: Output
+            }], hidden: [{
+                type: Input
+            }], labeltemplate: [{
+                type: Input
+            }] } });
+
+/**
+ * Base Komponente für Dialog
+ */
+class SacDialogCommon {
+    // #endregion
+    // #region Constructor
+    /**
+     * Konstruktor
+     * Inject des Formulars
+     */
+    constructor(cdRef) {
+        this.cdRef = cdRef;
+        this.hasSetBodyTag = false;
+        /**
+         * Boolean Property definiert ob das Dialog angezeigt wird
+         */
+        this._show = false;
+        /**
+         * Das property enthielt (wenn überhaupt gesetzt) entweder keywords für sizing oder custom css Klassen.
+         * Die akzeptabel keywordssind: 'small', 'large', 'extralarge', 'medium', ''.
+         */
+        this._size = '';
+        // #region Properties
+        /**
+         * Input Property. Erhält den Title des Dialog. Default Value: 'Dialog'.
+         */
+        this.title = 'Dialog';
+        /**
+         * Das input property akzeptiert boolen Wert. Definiert ob das Dialog darf durch ESC geschlossen werden. Default ist true.
+         */
+        this.allowesc = true;
+        /**
+         * Das input property akzeptiert boolen Wert. Definiert ob das Dialog darf durch click außerhalb des Dialog-Fenster geschlossen werden. Default ist true.
+         */
+        this.backdrop = true;
+        /**
+         * Input Property. Erhält den Namen des Dialog - benutzt für das ID. Default Value: ''
+         */
+        this.name = '';
+        /**
+         * Steuert ob im Header des Dialogs ein Button angezeigt wird.
+         */
+        this.closebutton = true;
+        /**
+         * Input Property. Erhält die Breite des Dialog
+         */
+        this.width = null;
+        /**
+         * Definiert eine feste Höhe beim Dialog.
+         */
+        this.height = null;
+        /**
+         * Output Emitter. Wird aufgerufen, wenn das Wert des _show property geändert ist - damait das Dialog geöfnet/geschlossen wird.
+         */
+        this.isvisibleChange = new EventEmitter();
+    }
+    /**
+     * Implementation als Setter, da mit ngIf das Element bei Unsichtbarkeit UNDEFINED ist.
+     */
+    set dialogElementSetter(content) {
+        this.dialogElement = content;
+    }
+    /**
+     * Das Input akzeptiert sowohl default size-css-Klassen als auch custom Klassen.
+     * case insensitive.
+     * Die akzeptabel default-size-Klassen sind: 'small', 'large', 'extralarge', 'medium', ''.
+     * Wenn size ist NICHT gesetzt (oder 'medium' oder ''), default ist in medium size: max-width 500px.
+     */
+    set size(v) {
+        v = v.toLowerCase();
+        this._size = v;
+    }
+    /**
+     * Setter. Erhält das boolen Wert des _show property
+     */
+    set isvisible(v) {
+        if (v &&
+            !this.hasSetBodyTag &&
+            !document.body.classList.contains('modal-open')) {
+            document.body.classList.add('modal-open');
+            this.hasSetBodyTag = true;
+        }
+        if (!v &&
+            this.hasSetBodyTag &&
+            document.body.classList.contains('modal-open')) {
+            document.body.classList.remove('modal-open');
+            this.hasSetBodyTag = false;
+        }
+        this._show = v;
+    }
+    /**
+     * Getter. Ergibt das boolen Wert des _show property
+     */
+    get isvisible() {
+        return this._show;
+    }
+    /**
+     * Die Funktion prüft ob es ein default css classe für Size des Dialog durch den size Input gesetzt wurde.
+     */
+    issetdefaultsize() {
+        let result = false;
+        switch (this._size) {
+            case 'small':
+                result = true;
+                break;
+            case 'medium':
+                result = true;
+                break;
+            case 'large':
+                result = true;
+                break;
+            case 'extralarge':
+                result = true;
+                break;
+            case '':
+                result = true;
+                break;
+        }
+        return result;
+    }
+    // #endregion
+    /**
+     * Methode wenn Componente entfernt wird
+     */
+    ngOnDestroy() {
+        if (this.hasSetBodyTag && document.body.classList.contains('modal-open')) {
+            document.body.classList.remove('modal-open');
+            this.hasSetBodyTag = false;
+        }
+    }
+    // #region Methods
+    /**
+     * Die Methode setz den Wert des _show property auf true
+     */
+    show() {
+        this._show = true;
+        if (!this.hasSetBodyTag &&
+            !document.body.classList.contains('modal-open')) {
+            document.body.classList.add('modal-open');
+            this.hasSetBodyTag = true;
+        }
+        this.isvisibleChange.emit(this._show);
+    }
+    /**
+     * Die Methode setz den Wert des _show property auf false
+     */
+    hide() {
+        if (this.hasSetBodyTag && document.body.classList.contains('modal-open')) {
+            document.body.classList.remove('modal-open');
+            this.hasSetBodyTag = false;
+        }
+        this._show = false;
+        this.isvisibleChange.emit(this._show);
+    }
+    /**
+     * Getter for ChangeDetector.
+     */
+    get ChangeDetector() {
+        return this.cdRef;
+    }
+    // #endregion
+    // #region Host Actions
+    /**
+     * Allow Close by Click outside Dialog
+     */
+    onClick(event) {
+        if (this.allowesc === false ||
+            (this.dialogElement !== null &&
+                this.dialogElement !== undefined &&
+                event.target !== this.dialogElement.nativeElement)) {
+            return;
+        }
+        this.hide();
+    }
+    /**
+     * Allow Close by ESC
+     */
+    onKeydownHandler(event) {
+        const ESCAPE_KEYCODE = 'Escape';
+        if (this.allowesc === true && event.key === ESCAPE_KEYCODE) {
+            this.hide();
+        }
+    }
+}
+SacDialogCommon.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacDialogCommon, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+SacDialogCommon.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: SacDialogCommon, inputs: { title: "title", allowesc: "allowesc", backdrop: "backdrop", name: "name", closebutton: "closebutton", width: "width", height: "height", size: "size", isvisible: "isvisible" }, outputs: { isvisibleChange: "isvisibleChange" }, host: { listeners: { "click": "onClick($event)", "document:keydown": "onKeydownHandler($event)" } }, viewQueries: [{ propertyName: "dialogElementSetter", first: true, predicate: ["dialog"], descendants: true }], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacDialogCommon, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { dialogElementSetter: [{
+                type: ViewChild,
+                args: ['dialog', { static: false }]
+            }], title: [{
+                type: Input
+            }], allowesc: [{
+                type: Input
+            }], backdrop: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], closebutton: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], isvisibleChange: [{
+                type: Output
+            }], isvisible: [{
+                type: Input
+            }], onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }], onKeydownHandler: [{
+                type: HostListener,
+                args: ['document:keydown', ['$event']]
+            }] } });
+
+// #endregion Type aliases
+// #region Classes
+/**
+ * Base Komponente für SacFormular
+ */
+class SacFormCommon {
+    // #endregion Properties
+    // #region Constructors
+    /**
+     * Konstruktor
+     * @param form Instanz von NgForm
+     */
+    constructor(form) {
+        this.form = form;
+        // #region Properties
+        /**
+         * Standardwert wann die Werte via NgModel aktualisiert werden
+         */
+        this._updateon = 'change';
+        this.form.options = { updateOn: this._updateon };
+    }
+    // #endregion Constructors
+    // #region Public Getters And Setters
+    get updateon() {
+        return this._updateon;
     }
     /**
-     * Methode ergibt Boolean, ob Control disabled ist
+     * Definiert, wenn das Model geupdatet wird
      */
-    get isDisabled() {
-        return this.disabled || this.sacRadioButtons.disabled;
+    set updateon(v) {
+        this._updateon = v;
+        this.form.options.updateOn = v;
     }
+    // #endregion Public Getters And Setters
+    // #region Public Methods
     /**
-     * Setter für hidden Property
+     * Gibt die NgForm Instanz zurück
      */
-    set hidden(v) {
-        if (v === null || v === undefined || typeof v === 'boolean') {
-            this._hidden = v;
-        }
-        else {
-            this._hidden = v === 'true';
-        }
-        // Model Reset falls RadioButton selektiert war
-        if (this._hidden && this.checked) {
-            this.sacRadioButtons.SelectItem(null);
-        }
-    }
-    get hidden() {
-        return this._hidden;
+    getForm() {
+        return this.form;
     }
     /**
-     * Getter für Unique Index
+     * Markiert alle Controls innerhalb des Formulares als Touched
      */
-    get getIndex() {
-        if (this._index === null &&
-            this.sacRadioButtons !== null &&
-            this.sacRadioButtons !== undefined) {
-            this._index = this.sacRadioButtons.GetRadionButtonIndex();
+    markAsTouched() {
+        if (this.form && this.form.invalid) {
+            this.markAsTouchedInternal(this.form.controls);
         }
-        return this._index;
     }
     /**
-     * Parent Control Name
+     * Aktualisiert die Werte und den Gültigkeitsstatus des Formulars
      */
-    get getName() {
-        return this.sacRadioButtons.name;
+    updateValueAndValidity(markAsTouched = true) {
+        // Update all Controls
+        this.updateValueAndValidityInternal(this.form.controls);
+        // Update Main Form
+        this.getForm().form.updateValueAndValidity();
+        // Mark all Controls as Touched
+        if (markAsTouched) {
+            this.markAsTouched();
+        }
     }
-    //#endregion
-    //#region Control Events
+    // #endregion Public Methods
+    // #region Private Methods
     /**
-     * Event wenn die Komponente zerstört wird
+     * Markiert alle Controls inkl. dem Tree als Touched
+     * @param controls Controls Collection
      */
-    ngOnDestroy() {
-        // De-Registration des Controls in SacRadioButtons Container
-        this.sacRadioButtons.UnregisterRadioButton(this);
+    markAsTouchedInternal(controls) {
+        const keyList = Object.keys(controls);
+        for (const field of keyList) {
+            const control = controls[field];
+            if (control instanceof FormGroup) {
+                this.markAsTouchedInternal(control.controls);
+            }
+            else {
+                control.markAsTouched({ onlySelf: true });
+            }
+        }
     }
-    //#endregion
     /**
-     * Event bei Änderungen
+     * Aktualisiert die Werte und die gültigkeit des Formulars
+     * @param controls Controls Collection
      */
-    ChangeEvent() {
-        if (!this.disabled) {
-            this.sacRadioButtons.SelectItem(this.value);
-            this.onselectitem.emit();
+    updateValueAndValidityInternal(controls) {
+        const keyList = Object.keys(controls);
+        for (const field of keyList) {
+            const control = controls[field];
+            if (control instanceof FormGroup) {
+                this.updateValueAndValidityInternal(control.controls);
+            }
+            else {
+                control.updateValueAndValidity({ onlySelf: true });
+            }
         }
     }
 }
-SacRadiobuttonCommon.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacRadiobuttonCommon, deps: [{ token: SacRadiobuttonsCommon }], target: i0.ɵɵFactoryTarget.Directive });
-SacRadiobuttonCommon.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: SacRadiobuttonCommon, inputs: { value: "value", label: "label", checked: "checked", disabled: "disabled", hidden: "hidden", labeltemplate: "labeltemplate" }, outputs: { onselectitem: "onselectitem" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacRadiobuttonCommon, decorators: [{
+SacFormCommon.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacFormCommon, deps: [{ token: i1.NgForm }], target: i0.ɵɵFactoryTarget.Directive });
+SacFormCommon.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: SacFormCommon, inputs: { updateon: "updateon" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacFormCommon, decorators: [{
             type: Directive
-        }], ctorParameters: function () { return [{ type: SacRadiobuttonsCommon }]; }, propDecorators: { value: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], checked: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], onselectitem: [{
-                type: Output
-            }], hidden: [{
-                type: Input
-            }], labeltemplate: [{
+        }], ctorParameters: function () { return [{ type: i1.NgForm }]; }, propDecorators: { updateon: [{
                 type: Input
             }] } });
 
@@ -2190,46 +2294,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                 type: Input
             }] } });
 
-/**
- * Function um ein Key Value Pair für das Dropdown zu erzeugen
- * @param id ID
- * @param value Wert der an das Element gebunden werden soll
- */
-function _buildValueString(id, value) {
-    // Wenn ID null ist Object zurückgeben
-    if (id == null) {
-        return `${value}`;
-    }
-    // Mapping Objekt zu String
-    if (value && typeof value === 'object') {
-        value = 'Object';
-    }
-    // String als ID
-    return `${id}: ${value}`.slice(0, 50);
-}
+// #region Classes
 /**
  * Base Dropdown Komponente
  */
 class SacDropdownCommon extends SacBaseSelectControl {
+    // #endregion Properties
+    // #region Constructors
     /**
-     * Konstruktor
-     * @param parent Übergeordnetes HTML Element
-     * @param injector Injector für Services
-     * @param _renderer Render Engine
-     * @param _elementRef Referenz von HTML Element
+     * Constructor
+     * @param formlayout SacFormLayoutCommon to define scoped layout settings
+     * @param injector Injector for injecting services
+     * @param renderer html rendering engine
+     * @param elementRef reference to html element
      */
-    constructor(parent, injector, _renderer, _elementRef) {
-        super(parent, injector);
-        this._renderer = _renderer;
-        this._elementRef = _elementRef;
-        /**
-         * Counter vom OptionID; default Wert = 0
-         */
-        this._optionIdCounter = 0;
-        /**
-         * OptionMap
-         */
-        this._optionMap = new Map();
+    constructor(formlayout, injector, renderer, elementRef) {
+        super(formlayout, injector);
+        this.renderer = renderer;
+        this.elementRef = elementRef;
+        // #region Properties
         /**
          * compareWith-Funktion
          */
@@ -2250,7 +2333,17 @@ class SacDropdownCommon extends SacBaseSelectControl {
          * Resource Key für Validation Message Required in Validation Summary
          */
         this.validationmessagesummaryrequired = 'VALIDATION_ERROR_SUMMARY_REQUIRED';
+        /**
+         * Counter vom OptionID; default Wert = 0
+         */
+        this._optionIdCounter = 0;
+        /**
+         * OptionMap
+         */
+        this._optionMap = new Map();
     }
+    // #endregion Constructors
+    // #region Public Getters And Setters
     /**
      * compareWith-Funktion
      */
@@ -2260,21 +2353,8 @@ class SacDropdownCommon extends SacBaseSelectControl {
         }
         this._compareWith = fn;
     }
-    /**
-     * Wert einstellen
-     * @param value - Wert
-     */
-    setValue(value) {
-        super.setValue(this.getOptionValue(value));
-    }
-    /**
-     * Wert schreiben
-     * @param value - Wert
-     */
-    writeValue(value) {
-        this.setSelectedValue(value);
-        super.writeValue(value);
-    }
+    // #endregion Public Getters And Setters
+    // #region Public Methods
     /**
      * Registriert das OptionID-Counter als String
      */
@@ -2294,23 +2374,39 @@ class SacDropdownCommon extends SacBaseSelectControl {
         }
     }
     /**
-     * Setzt den Selected Value auf dem Control
-     * @param value Value
+     * Wert einstellen
+     * @param value - Wert
      */
-    setSelectedValue(value) {
-        // Select Item aus Control lesen
-        const selectItem = this._elementRef.nativeElement.getElementsByTagName('select')[0];
-        /**
-         * Id vom Select Item
-         */
-        const id = this.getOptionId(value);
-        /**
-         * Value String
-         */
-        const valueString = _buildValueString(id, value);
-        if (selectItem !== undefined) {
-            this._renderer.setProperty(selectItem, 'value', valueString);
+    setValue(value) {
+        super.setValue(this.getOptionValue(value));
+    }
+    /**
+     * Validator
+     * @param c Control Instanz
+     */
+    validateData(c) {
+        let error = null;
+        if (this.isrequired) {
+            error = Validation.required(this.validationmessagerequired, this.validationmessagesummaryrequired)(c);
         }
+        return error;
+    }
+    /**
+     * Wert schreiben
+     * @param value - Wert
+     */
+    writeValue(value) {
+        this.setSelectedValue(value);
+        super.writeValue(value);
+    }
+    // #endregion Public Methods
+    // #region Private Methods
+    /**
+     * ID extrahieren
+     * @param valueString String bei welchem die ID Extrahiert werden soll
+     */
+    extractId(valueString) {
+        return valueString.split(':')[0];
     }
     /**
      * Nimmt das ID vom Option
@@ -2333,47 +2429,50 @@ class SacDropdownCommon extends SacBaseSelectControl {
         return this._optionMap.has(id) ? this._optionMap.get(id) : valueString;
     }
     /**
-     * ID extrahieren
-     * @param valueString String bei welchem die ID Extrahiert werden soll
-     */
-    extractId(valueString) {
-        return valueString.split(':')[0];
-    }
-    /**
-     * Validator
-     * @param c Control Instanz
+     * Setzt den Selected Value auf dem Control
+     * @param value Value
      */
-    validateData(c) {
-        let error = null;
-        if (this.isrequired) {
-            error = Validation.required(this.validationmessagerequired, this.validationmessagesummaryrequired)(c);
+    setSelectedValue(value) {
+        // Select Item aus Control lesen
+        const selectItem = this.elementRef.nativeElement.getElementsByTagName('select')[0];
+        /**
+         * Id vom Select Item
+         */
+        const id = this.getOptionId(value);
+        /**
+         * Value String
+         */
+        const valueString = _buildValueString(id, value);
+        if (selectItem !== undefined) {
+            this.renderer.setProperty(selectItem, 'value', valueString);
         }
-        return error;
     }
 }
-SacDropdownCommon.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacDropdownCommon, deps: [{ token: SacFormCommon, host: true }, { token: i0.Injector }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-SacDropdownCommon.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: SacDropdownCommon, inputs: { emptylabel: "emptylabel", emptyvalue: "emptyvalue", comparewith: "comparewith", validationmessagerequired: "validationmessagerequired", validationmessagesummaryrequired: "validationmessagesummaryrequired" }, usesInheritance: true, ngImport: i0 });
+SacDropdownCommon.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacDropdownCommon, deps: [{ token: SacFormLayoutCommon, host: true }, { token: i0.Injector }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+SacDropdownCommon.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: SacDropdownCommon, inputs: { emptylabel: "emptylabel", emptyvalue: "emptyvalue", validationmessagerequired: "validationmessagerequired", validationmessagesummaryrequired: "validationmessagesummaryrequired", comparewith: "comparewith" }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacDropdownCommon, decorators: [{
             type: Directive
         }], ctorParameters: function () {
-        return [{ type: SacFormCommon, decorators: [{
+        return [{ type: SacFormLayoutCommon, decorators: [{
                         type: Host
                     }] }, { type: i0.Injector }, { type: i0.Renderer2 }, { type: i0.ElementRef }];
     }, propDecorators: { emptylabel: [{
                 type: Input
             }], emptyvalue: [{
                 type: Input
-            }], comparewith: [{
-                type: Input
             }], validationmessagerequired: [{
                 type: Input
             }], validationmessagesummaryrequired: [{
                 type: Input
+            }], comparewith: [{
+                type: Input
             }] } });
 /**
  * SacDropdownOption-Klasse
  */
 class SacDropdownOptionCommon {
+    // #endregion Properties
+    // #region Constructors
     /**
      * Konstruktor
      * @param _element Referenz auf HTML Element
@@ -2384,6 +2483,7 @@ class SacDropdownOptionCommon {
         this._element = _element;
         this._renderer = _renderer;
         this._dropdown = _dropdown;
+        // #region Properties
         /**
          * ID-String
          */
@@ -2392,6 +2492,8 @@ class SacDropdownOptionCommon {
             this.id = this._dropdown.registerOption();
         }
     }
+    // #endregion Constructors
+    // #region Public Getters And Setters
     /**
      * Option ngValue
      */
@@ -2410,6 +2512,8 @@ class SacDropdownOptionCommon {
     set value(value) {
         this._setElementValue(value);
     }
+    // #endregion Public Getters And Setters
+    // #region Public Methods
     /**
      * Den Wert vom Option-Element einstellen
      * @param value Wert
@@ -2434,7 +2538,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                 type: Input
             }], value: [{
                 type: Input
-            }] } });
+            }] } });
+// #endregion Classes
+// #region Functions
+/**
+ * Function um ein Key Value Pair für das Dropdown zu erzeugen
+ * @param id ID
+ * @param value Wert der an das Element gebunden werden soll
+ */
+function _buildValueString(id, value) {
+    // Wenn ID null ist Object zurückgeben
+    if (id == null) {
+        return `${value}`;
+    }
+    // Mapping Objekt zu String
+    if (value && typeof value === 'object') {
+        value = 'Object';
+    }
+    // String als ID
+    return `${id}: ${value}`.slice(0, 50);
+}
 
 /**
  * Basis Komponente für SacListboxOption
@@ -2607,6 +2730,119 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                 args: [SacListboxOptionCommon]
             }] } });
 
+/**
+ * Base component for SacTab
+ */
+class SacTabCommon {
+    constructor() {
+        /**
+         * control name
+         */
+        this.name = '';
+        /**
+         * dispose tabs when they are hidden
+         */
+        this.unloadtabitemswhenhidden = null;
+        /**
+         * Event when new tab is selected
+         */
+        this.tabselected = new EventEmitter();
+    }
+    // #region Control initialisieren
+    /**
+     * AfterContentInit Event
+     */
+    ngAfterContentInit() {
+        this.initTabs();
+    }
+    /**
+     * Initialisiert die Tabs
+     */
+    initTabs() {
+        const activeTab = this.tabItems().filter((tab) => tab.active);
+        this.tabItems().forEach((itm) => {
+            if (this.unloadtabitemswhenhidden !== null) {
+                itm.unloadwhenhidden = this.unloadtabitemswhenhidden;
+            }
+        });
+        if (activeTab.length === 0) {
+            this.selectTab(this.tabItems()[0]);
+        }
+    }
+    // #endregion
+    /**
+     * select new tab
+     * @param tab tab that should be selected
+     */
+    selectTab(tab) {
+        // Cancel if Selected Tab is disabled
+        if (tab.disabled) {
+            return;
+        }
+        this.tabItems().forEach((item) => (item.active = false));
+        tab.active = true;
+        this.tabselected.emit(tab.id);
+    }
+    /**
+     * get id of tab button
+     * @param tabitemid id of tab
+     */
+    GetTabItemButtonId(tabitemid) {
+        return this.name + '_' + tabitemid;
+    }
+}
+SacTabCommon.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacTabCommon, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+SacTabCommon.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: SacTabCommon, inputs: { name: "name", tablabeltemplate: "tablabeltemplate", unloadtabitemswhenhidden: "unloadtabitemswhenhidden" }, outputs: { tabselected: "tabselected" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacTabCommon, decorators: [{
+            type: Directive
+        }], propDecorators: { name: [{
+                type: Input
+            }], tablabeltemplate: [{
+                type: Input
+            }], unloadtabitemswhenhidden: [{
+                type: Input
+            }], tabselected: [{
+                type: Output
+            }] } });
+
+/**
+ * Die Basis Komponente für SacTabItem
+ */
+class SacTabItemCommon {
+    constructor() {
+        /**
+         * Boolean Property prüft ob das Tab aktiv ist
+         */
+        this.active = false;
+        /**
+         * Boolean Property prüft ob das Tab disabled ist
+         */
+        this.disabled = false;
+        /**
+         * Das Input property ekzeptiert boolen Wert. Default ist true. Definiert, ob die Komponente hidden sein sollte.
+         */
+        this.unloadwhenhidden = true;
+    }
+}
+SacTabItemCommon.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacTabItemCommon, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+SacTabItemCommon.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: SacTabItemCommon, inputs: { active: "active", disabled: "disabled", id: "id", label: "label", unloadwhenhidden: "unloadwhenhidden" }, queries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacTabItemCommon, decorators: [{
+            type: Directive
+        }], propDecorators: { active: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], unloadwhenhidden: [{
+                type: Input
+            }], templateRef: [{
+                type: ContentChild,
+                args: [TemplateRef, { static: true }]
+            }] } });
+
 /**
  * Basis Komponente für SacValidationSummary
  */
@@ -2729,119 +2965,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                 type: Input
             }] } });
 
-/**
- * Base component for SacTab
- */
-class SacTabCommon {
-    constructor() {
-        /**
-         * control name
-         */
-        this.name = '';
-        /**
-         * dispose tabs when they are hidden
-         */
-        this.unloadtabitemswhenhidden = null;
-        /**
-         * Event when new tab is selected
-         */
-        this.tabselected = new EventEmitter();
-    }
-    // #region Control initialisieren
-    /**
-     * AfterContentInit Event
-     */
-    ngAfterContentInit() {
-        this.initTabs();
-    }
-    /**
-     * Initialisiert die Tabs
-     */
-    initTabs() {
-        const activeTab = this.tabItems().filter((tab) => tab.active);
-        this.tabItems().forEach((itm) => {
-            if (this.unloadtabitemswhenhidden !== null) {
-                itm.unloadwhenhidden = this.unloadtabitemswhenhidden;
-            }
-        });
-        if (activeTab.length === 0) {
-            this.selectTab(this.tabItems()[0]);
-        }
-    }
-    // #endregion
-    /**
-     * select new tab
-     * @param tab tab that should be selected
-     */
-    selectTab(tab) {
-        // Cancel if Selected Tab is disabled
-        if (tab.disabled) {
-            return;
-        }
-        this.tabItems().forEach((item) => (item.active = false));
-        tab.active = true;
-        this.tabselected.emit(tab.id);
-    }
-    /**
-     * get id of tab button
-     * @param tabitemid id of tab
-     */
-    GetTabItemButtonId(tabitemid) {
-        return this.name + '_' + tabitemid;
-    }
-}
-SacTabCommon.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacTabCommon, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-SacTabCommon.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: SacTabCommon, inputs: { name: "name", tablabeltemplate: "tablabeltemplate", unloadtabitemswhenhidden: "unloadtabitemswhenhidden" }, outputs: { tabselected: "tabselected" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacTabCommon, decorators: [{
-            type: Directive
-        }], propDecorators: { name: [{
-                type: Input
-            }], tablabeltemplate: [{
-                type: Input
-            }], unloadtabitemswhenhidden: [{
-                type: Input
-            }], tabselected: [{
-                type: Output
-            }] } });
-
-/**
- * Die Basis Komponente für SacTabItem
- */
-class SacTabItemCommon {
-    constructor() {
-        /**
-         * Boolean Property prüft ob das Tab aktiv ist
-         */
-        this.active = false;
-        /**
-         * Boolean Property prüft ob das Tab disabled ist
-         */
-        this.disabled = false;
-        /**
-         * Das Input property ekzeptiert boolen Wert. Default ist true. Definiert, ob die Komponente hidden sein sollte.
-         */
-        this.unloadwhenhidden = true;
-    }
-}
-SacTabItemCommon.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacTabItemCommon, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-SacTabItemCommon.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: SacTabItemCommon, inputs: { active: "active", disabled: "disabled", id: "id", label: "label", unloadwhenhidden: "unloadwhenhidden" }, queries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacTabItemCommon, decorators: [{
-            type: Directive
-        }], propDecorators: { active: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], id: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], unloadwhenhidden: [{
-                type: Input
-            }], templateRef: [{
-                type: ContentChild,
-                args: [TemplateRef, { static: true }]
-            }] } });
-
 /**
  * Abstract Klasse für SacInputBase. Extendes SacBaseModelControl
  */
@@ -2849,6 +2972,14 @@ class SacInputBase extends SacBaseModelControl {
     constructor() {
         super(...arguments);
         // #region Properties
+        /**
+         * Erlaubte Zeichen bei der Eingabe
+         */
+        this.allowedchars = '';
+        /**
+         * Autofill aktivieren oder deaktivieren
+         */
+        this.disableautocomplete = false;
         /**
          * Definiert das Control als Required
          */
@@ -2857,10 +2988,6 @@ class SacInputBase extends SacBaseModelControl {
          * TextBox Placeholder
          */
         this.placeholder = null;
-        /**
-         * Erlaubte Zeichen bei der Eingabe
-         */
-        this.allowedchars = '';
         /**
          * Macht das Input readonly
          */
@@ -2869,13 +2996,9 @@ class SacInputBase extends SacBaseModelControl {
          * Text welcher als Tooltip angezeigt wird.
          */
         this.tooltiptext = '';
-        /**
-         * Autofill aktivieren oder deaktivieren
-         */
-        this.disableautocomplete = false;
     }
-    // #endregion
-    // #region Event Handler
+    // #endregion Properties
+    // #region Public Methods
     /**
      * Methode validiert Input wenn KeyPress-Event passiert
      */
@@ -2895,8 +3018,8 @@ class SacInputBase extends SacBaseModelControl {
             event.preventDefault();
         }
     }
-    // #endregion
-    // #region Protected Virtual Methods
+    // #endregion Public Methods
+    // #region Protected Methods
     /**
      * Methode validiert wenn ein Drück-Event passiert
      */
@@ -2905,14 +3028,16 @@ class SacInputBase extends SacBaseModelControl {
     }
 }
 SacInputBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacInputBase, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-SacInputBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: SacInputBase, inputs: { isrequired: "isrequired", placeholder: "placeholder", allowedchars: "allowedchars", readonly: "readonly", regexvalidation: "regexvalidation", tooltiptext: "tooltiptext", disableautocomplete: "disableautocomplete" }, usesInheritance: true, ngImport: i0 });
+SacInputBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: SacInputBase, inputs: { allowedchars: "allowedchars", disableautocomplete: "disableautocomplete", isrequired: "isrequired", placeholder: "placeholder", readonly: "readonly", regexvalidation: "regexvalidation", tooltiptext: "tooltiptext" }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacInputBase, decorators: [{
             type: Directive
-        }], propDecorators: { isrequired: [{
+        }], propDecorators: { allowedchars: [{
                 type: Input
-            }], placeholder: [{
+            }], disableautocomplete: [{
+                type: Input
+            }], isrequired: [{
                 type: Input
-            }], allowedchars: [{
+            }], placeholder: [{
                 type: Input
             }], readonly: [{
                 type: Input
@@ -2920,8 +3045,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                 type: Input
             }], tooltiptext: [{
                 type: Input
-            }], disableautocomplete: [{
-                type: Input
             }] } });
 
 /**
@@ -3050,56 +3173,71 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
 class SacInputDecimalCommon extends SacInputBase {
     constructor() {
         super(...arguments);
+        // #region Properties
         /**
          * Definiert das Negative Werte erlaubt sind
          */
         this.allownegativ = false;
-        /**
-         * Definiert den minimalen Wert
-         */
-        this.minvalue = undefined;
         /**
          * Definiert den maximalen Wert
          */
         this.maxvalue = undefined;
         /**
-         * Resource Key für Validation Message Required bei Control
+         * Definiert den minimalen Wert
          */
-        this.validationmessagerequired = 'VALIDATION_ERROR_REQUIRED';
+        this.minvalue = undefined;
         /**
-         * Resource Key für Validation Message Required in Validation Summary
+         * Resource Key für Validation Message MaxValue bei Control
          */
-        this.validationmessagesummaryrequired = 'VALIDATION_ERROR_SUMMARY_REQUIRED';
+        this.validationmessagemaxvalue = 'VALIDATION_ERROR_MAXVALUE';
         /**
          * Resource Key für Validation Message MinValue bei Control
          */
         this.validationmessageminvalue = 'VALIDATION_ERROR_MINVALUE';
         /**
-         * Resource Key für Validation Message MinValue in Validation Summary
-         */
-        this.validationmessagesummaryminvalue = 'VALIDATION_ERROR_SUMMARY_MINVALUE';
-        /**
-         * Resource Key für Validation Message MaxValue bei Control
+         * Resource Key für Validation Message Required bei Control
          */
-        this.validationmessagemaxvalue = 'VALIDATION_ERROR_MAXVALUE';
+        this.validationmessagerequired = 'VALIDATION_ERROR_REQUIRED';
         /**
          * Resource Key für Validation Message MaxValue in Validation Summary
          */
         this.validationmessagesummarymaxvalue = 'VALIDATION_ERROR_SUMMARY_MAXVALUE';
+        /**
+         * Resource Key für Validation Message MinValue in Validation Summary
+         */
+        this.validationmessagesummaryminvalue = 'VALIDATION_ERROR_SUMMARY_MINVALUE';
+        /**
+         * Resource Key für Validation Message Required in Validation Summary
+         */
+        this.validationmessagesummaryrequired = 'VALIDATION_ERROR_SUMMARY_REQUIRED';
     }
+    // #endregion Properties
+    // #region Public Methods
     /**
-     * Methode die erzeugt den Control in Abhängigkeit davon, ob negative Were erlaubt sing oder nicht
+     * Methode validiert ob der Wert entspricht den gegebenen Kriterien
      */
-    OnClassInit() {
-        super.OnClassInit();
+    validateData(c) {
         /**
-         * Definiert die Werte die erlaubt sind
+         * Error Meldung, die angezeigt wird, wenn die Kriterien nicht erfüllt sind
          */
-        this.allowedchars = '0123456789' + this.GetDecimalSymbol();
-        if (this.allownegativ) {
-            this.allowedchars = this.allowedchars + '-';
+        let error = null;
+        if (this.isrequired) {
+            error = Validation.required(this.validationmessagerequired, this.validationmessagesummaryrequired)(c);
+        }
+        if (error === null &&
+            this.minvalue !== undefined &&
+            this.minvalue !== null) {
+            error = Validation.minValue(this.minvalue, this.validationmessageminvalue, this.validationmessagesummaryminvalue)(c);
         }
+        if (error === null &&
+            this.maxvalue !== undefined &&
+            this.maxvalue !== null) {
+            error = Validation.maxValue(this.maxvalue, this.validationmessagemaxvalue, this.validationmessagesummarymaxvalue)(c);
+        }
+        return error;
     }
+    // #endregion Public Methods
+    // #region Protected Methods
     /**
      * Konvertiert den Wert des Inputs
      */
@@ -3119,6 +3257,19 @@ class SacInputDecimalCommon extends SacInputBase {
             }
         }
     }
+    /**
+     * Methode die erzeugt den Control in Abhängigkeit davon, ob negative Were erlaubt sing oder nicht
+     */
+    OnClassInit() {
+        super.OnClassInit();
+        /**
+         * Definiert die Werte die erlaubt sind
+         */
+        this.allowedchars = '0123456789' + this.GetDecimalSymbol();
+        if (this.allownegativ) {
+            this.allowedchars = this.allowedchars + '-';
+        }
+    }
     /**
      * Methode validiert ob der Wert entspricht den gegebenen Kriterien wenn ein Key gedrückt wird
      */
@@ -3142,52 +3293,29 @@ class SacInputDecimalCommon extends SacInputBase {
             return true;
         }
     }
-    /**
-     * Methode validiert ob der Wert entspricht den gegebenen Kriterien
-     */
-    validateData(c) {
-        /**
-         * Error Meldung, die angezeigt wird, wenn die Kriterien nicht erfüllt sind
-         */
-        let error = null;
-        if (this.isrequired) {
-            error = Validation.required(this.validationmessagerequired, this.validationmessagesummaryrequired)(c);
-        }
-        if (error === null &&
-            this.minvalue !== undefined &&
-            this.minvalue !== null) {
-            error = Validation.minValue(this.minvalue, this.validationmessageminvalue, this.validationmessagesummaryminvalue)(c);
-        }
-        if (error === null &&
-            this.maxvalue !== undefined &&
-            this.maxvalue !== null) {
-            error = Validation.maxValue(this.maxvalue, this.validationmessagemaxvalue, this.validationmessagesummarymaxvalue)(c);
-        }
-        return error;
-    }
 }
 SacInputDecimalCommon.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacInputDecimalCommon, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-SacInputDecimalCommon.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: SacInputDecimalCommon, inputs: { allownegativ: "allownegativ", minvalue: "minvalue", maxvalue: "maxvalue", validationmessagerequired: "validationmessagerequired", validationmessagesummaryrequired: "validationmessagesummaryrequired", validationmessageminvalue: "validationmessageminvalue", validationmessagesummaryminvalue: "validationmessagesummaryminvalue", validationmessagemaxvalue: "validationmessagemaxvalue", validationmessagesummarymaxvalue: "validationmessagesummarymaxvalue" }, usesInheritance: true, ngImport: i0 });
+SacInputDecimalCommon.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: SacInputDecimalCommon, inputs: { allownegativ: "allownegativ", maxvalue: "maxvalue", minvalue: "minvalue", validationmessagemaxvalue: "validationmessagemaxvalue", validationmessageminvalue: "validationmessageminvalue", validationmessagerequired: "validationmessagerequired", validationmessagesummarymaxvalue: "validationmessagesummarymaxvalue", validationmessagesummaryminvalue: "validationmessagesummaryminvalue", validationmessagesummaryrequired: "validationmessagesummaryrequired" }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacInputDecimalCommon, decorators: [{
             type: Directive
         }], propDecorators: { allownegativ: [{
                 type: Input
-            }], minvalue: [{
-                type: Input
             }], maxvalue: [{
                 type: Input
-            }], validationmessagerequired: [{
+            }], minvalue: [{
                 type: Input
-            }], validationmessagesummaryrequired: [{
+            }], validationmessagemaxvalue: [{
                 type: Input
             }], validationmessageminvalue: [{
                 type: Input
-            }], validationmessagesummaryminvalue: [{
-                type: Input
-            }], validationmessagemaxvalue: [{
+            }], validationmessagerequired: [{
                 type: Input
             }], validationmessagesummarymaxvalue: [{
                 type: Input
+            }], validationmessagesummaryminvalue: [{
+                type: Input
+            }], validationmessagesummaryrequired: [{
+                type: Input
             }] } });
 
 /**
@@ -3679,6 +3807,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                 type: Input
             }] } });
 
+/**
+ * Base Grid Action Button
+ */
+class SacGridButtonCommon {
+    constructor() {
+        /**
+         * Input Property für Styling des Buttons. Deffiniert die Css Klassen des Buttons
+         */
+        this.iconstyle = '';
+        /**
+         * Button ist deaktiviert
+         */
+        this._isdisabledvalue = false;
+        /**
+         * Event wenn auf den Button geklickt wird
+         */
+        this.clicked = new EventEmitter();
+    }
+    /**
+     * Deaktivieren von Buttons
+     * @param v Deaktiviert den Button
+     * @return Definiert ob der Button deaktiviert ist
+     */
+    set isdisabled(v) {
+        if (v === null || v === undefined || typeof v === 'boolean') {
+            this._isdisabledvalue = v;
+        }
+        else {
+            this._isdisabledvalue = v === 'true';
+        }
+    }
+    get isdisabled() {
+        return this._isdisabledvalue;
+    }
+    /**
+     * Die Methode wird das cklickaction Emitter aktivieren
+     */
+    callaction() {
+        if (!this._isdisabledvalue) {
+            this.clicked.emit(this.iconstyle);
+        }
+    }
+}
+SacGridButtonCommon.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacGridButtonCommon, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+SacGridButtonCommon.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: SacGridButtonCommon, inputs: { iconstyle: "iconstyle", icon: "icon", isdisabled: "isdisabled" }, outputs: { clicked: "clicked" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacGridButtonCommon, decorators: [{
+            type: Directive
+        }], propDecorators: { iconstyle: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], isdisabled: [{
+                type: Input
+            }], clicked: [{
+                type: Output
+            }] } });
+
 /**
  * Enum für Icon Types in Componenten
  */
@@ -4356,6 +4541,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
             type: Directive
         }], ctorParameters: function () { return [{ type: SacGridCommon }, { type: i0.Injector }, { type: i0.ElementRef }]; } });
 
+/**
+ * Basis Komponente für SacGridImage
+ */
+class SacGridImageCommon {
+}
+SacGridImageCommon.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacGridImageCommon, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+SacGridImageCommon.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: SacGridImageCommon, inputs: { iconstyle: "iconstyle" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacGridImageCommon, decorators: [{
+            type: Directive
+        }], propDecorators: { iconstyle: [{
+                type: Input
+            }] } });
+
 /**
  * Basiskomponente für Paging
  */
@@ -4565,114 +4763,44 @@ class SacPagingCommon {
     }
     /**
      * Gibt die totale Anzahl Seiten zurück
-     */
-    getTotalPageNumber() {
-        return this.lastPageIndex + 1;
-    }
-    /**
-     * Text mit Aktueller Seite und Total Seiten
-     */
-    get PagingText() {
-        return this.lngResourceService.GetString(this.pagingtext, {
-            CURRENTPAGE: this.getCurrentPageNumber(),
-            TOTALPAGES: this.getTotalPageNumber(),
-        });
-    }
-    /**
-     * Property mit Text für Total Einträge in Seite
-     */
-    get PageSizeText() {
-        return this.lngResourceService.GetString(this.pagesizetext);
-    }
-}
-SacPagingCommon.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacPagingCommon, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
-SacPagingCommon.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: SacPagingCommon, inputs: { pagerdata: "pagerdata", pagingtext: "pagingtext", pagesizetext: "pagesizetext", pagesizes: "pagesizes", pagesizedisabled: "pagesizedisabled", name: "name" }, outputs: { paging: "paging" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacPagingCommon, decorators: [{
-            type: Directive
-        }], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { pagerdata: [{
-                type: Input
-            }], pagingtext: [{
-                type: Input
-            }], pagesizetext: [{
-                type: Input
-            }], pagesizes: [{
-                type: Input
-            }], pagesizedisabled: [{
-                type: Input
-            }], name: [{
-                type: Input
-            }], paging: [{
-                type: Output
-            }] } });
-
-/**
- * Base Grid Action Button
- */
-class SacGridButtonCommon {
-    constructor() {
-        /**
-         * Input Property für Styling des Buttons. Deffiniert die Css Klassen des Buttons
-         */
-        this.iconstyle = '';
-        /**
-         * Button ist deaktiviert
-         */
-        this._isdisabledvalue = false;
-        /**
-         * Event wenn auf den Button geklickt wird
-         */
-        this.clicked = new EventEmitter();
+     */
+    getTotalPageNumber() {
+        return this.lastPageIndex + 1;
     }
     /**
-     * Deaktivieren von Buttons
-     * @param v Deaktiviert den Button
-     * @return Definiert ob der Button deaktiviert ist
+     * Text mit Aktueller Seite und Total Seiten
      */
-    set isdisabled(v) {
-        if (v === null || v === undefined || typeof v === 'boolean') {
-            this._isdisabledvalue = v;
-        }
-        else {
-            this._isdisabledvalue = v === 'true';
-        }
-    }
-    get isdisabled() {
-        return this._isdisabledvalue;
+    get PagingText() {
+        return this.lngResourceService.GetString(this.pagingtext, {
+            CURRENTPAGE: this.getCurrentPageNumber(),
+            TOTALPAGES: this.getTotalPageNumber(),
+        });
     }
     /**
-     * Die Methode wird das cklickaction Emitter aktivieren
+     * Property mit Text für Total Einträge in Seite
      */
-    callaction() {
-        if (!this._isdisabledvalue) {
-            this.clicked.emit(this.iconstyle);
-        }
+    get PageSizeText() {
+        return this.lngResourceService.GetString(this.pagesizetext);
     }
 }
-SacGridButtonCommon.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacGridButtonCommon, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-SacGridButtonCommon.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: SacGridButtonCommon, inputs: { iconstyle: "iconstyle", icon: "icon", isdisabled: "isdisabled" }, outputs: { clicked: "clicked" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacGridButtonCommon, decorators: [{
+SacPagingCommon.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacPagingCommon, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
+SacPagingCommon.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: SacPagingCommon, inputs: { pagerdata: "pagerdata", pagingtext: "pagingtext", pagesizetext: "pagesizetext", pagesizes: "pagesizes", pagesizedisabled: "pagesizedisabled", name: "name" }, outputs: { paging: "paging" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacPagingCommon, decorators: [{
             type: Directive
-        }], propDecorators: { iconstyle: [{
+        }], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { pagerdata: [{
                 type: Input
-            }], icon: [{
+            }], pagingtext: [{
                 type: Input
-            }], isdisabled: [{
+            }], pagesizetext: [{
                 type: Input
-            }], clicked: [{
-                type: Output
-            }] } });
-
-/**
- * Basis Komponente für SacGridImage
- */
-class SacGridImageCommon {
-}
-SacGridImageCommon.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacGridImageCommon, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-SacGridImageCommon.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: SacGridImageCommon, inputs: { iconstyle: "iconstyle" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacGridImageCommon, decorators: [{
-            type: Directive
-        }], propDecorators: { iconstyle: [{
+            }], pagesizes: [{
+                type: Input
+            }], pagesizedisabled: [{
+                type: Input
+            }], name: [{
                 type: Input
+            }], paging: [{
+                type: Output
             }] } });
 
 /**
@@ -4683,17 +4811,18 @@ const moment$4 = moment_['default'];
  * Base Klasse für Date/Time Controls
  */
 class SacBaseDateTimeControl extends SacBaseModelControl {
-    // #region Constructor
+    // #endregion Properties
+    // #region Constructors
     /**
-     * Konstruktor
-     * @param parent typ SacFormCommon
-     * @param injector typ Injector
-     * @param _elementRef typ ElementRef
+     * Constructor
+     * @param formlayout SacFormLayoutCommon to define scoped layout settings
+     * @param injector Injector for injecting services
+     * @param elementRef reference to html element
      */
-    constructor(parent, injector, _elementRef) {
-        super(parent, injector);
-        this._elementRef = _elementRef;
-        //#region Abstract Methods
+    constructor(formlayout, injector, elementRef) {
+        super(formlayout, injector);
+        this.elementRef = elementRef;
+        // #region Properties
         /**
          * das property enthielt das Value als string. Default ist ''
          */
@@ -4706,14 +4835,6 @@ class SacBaseDateTimeControl extends SacBaseModelControl {
          * TextBox Placeholder
          */
         this.placeholder = null;
-        /**
-         * Resource Key für Validation Message Required bei Control
-         */
-        this.validationmessagerequired = 'VALIDATION_ERROR_REQUIRED';
-        /**
-         * Resource Key für Validation Message Required in Validation Summary
-         */
-        this.validationmessagerequiredsummary = 'VALIDATION_ERROR_SUMMARY_REQUIRED';
         /**
          * Resource Key für Validation Message DateTimeFormat bei Control
          */
@@ -4722,51 +4843,17 @@ class SacBaseDateTimeControl extends SacBaseModelControl {
          * Resource Key für Validation Message DateTimeFormat in Validation Summary
          */
         this.validationmessagedatetimeformatsummary = 'VALIDATION_ERROR_SUMMARY_DATETIMEFORMAT';
+        /**
+         * Resource Key für Validation Message Required bei Control
+         */
+        this.validationmessagerequired = 'VALIDATION_ERROR_REQUIRED';
+        /**
+         * Resource Key für Validation Message Required in Validation Summary
+         */
+        this.validationmessagerequiredsummary = 'VALIDATION_ERROR_SUMMARY_REQUIRED';
     }
-    // #endregion
-    /**
-     * Init Event
-     */
-    ngOnInit() {
-        super.ngOnInit();
-        this.SetDateTimeFormat();
-    }
-    //#endregion
-    //#region Variablen
-    //#endregion
-    // #region Properties
-    //#endregion
-    //#region ValueControlAccess
-    /**
-     * Overwrite WriteValue to Set correct Date Object
-     */
-    writeValue(value) {
-        if (value === '' || value === null || value === undefined) {
-            // Reset Value String, damit beim Update des Models auch das Input Feld geleert wird.
-            this._valueAsString = '';
-            // Set Internal Property
-            this._value = null;
-        }
-        else {
-            this._value = this.getDate(value).toDate();
-        }
-        super.writeValue(this._value);
-    }
-    /**
-     * JSON Date String in ein UTC DateTime Object konvertieren, welches vom Control verwendete werden kann
-     */
-    getDate(timestamp) {
-        const date = new Date(timestamp);
-        const year = date.getUTCFullYear();
-        const month = date.getUTCMonth();
-        const day = date.getUTCDate();
-        const hours = date.getUTCHours();
-        const minutes = date.getUTCMinutes();
-        const seconds = date.getUTCSeconds();
-        return moment$4(Date.UTC(year, month, day, hours, minutes, seconds));
-    }
-    //#endregion
-    // #region Value as String
+    // #endregion Constructors
+    // #region Public Getters And Setters
     /**
      * Das Input bekommt das value von typ string
      */
@@ -4793,23 +4880,34 @@ class SacBaseDateTimeControl extends SacBaseModelControl {
             return date.local().format(this.GetDateTimeFormatString());
         }
     }
+    // #endregion Public Getters And Setters
+    // #region Public Methods
+    /**
+     * JSON Date String in ein UTC DateTime Object konvertieren, welches vom Control verwendete werden kann
+     */
+    getDate(timestamp) {
+        const date = new Date(timestamp);
+        const year = date.getUTCFullYear();
+        const month = date.getUTCMonth();
+        const day = date.getUTCDate();
+        const hours = date.getUTCHours();
+        const minutes = date.getUTCMinutes();
+        const seconds = date.getUTCSeconds();
+        return moment$4(Date.UTC(year, month, day, hours, minutes, seconds));
+    }
+    /**
+     * Init Event
+     */
+    ngOnInit() {
+        super.ngOnInit();
+        this.SetDateTimeFormat();
+    }
     /**
      * setzt das value von typ string zu property valuestring
      */
     setValueString(v) {
         this.valuestring = v;
     }
-    // #endregion
-    // #region Private Methods
-    SetDateTimeFormat() {
-        // HACK: Add addition property to FormControl. Can be fixed if solution for ticket: https://github.com/angular/angular/issues/19686
-        if (this.ngControl) {
-            this.ngControl.datetimeformatstring =
-                this.GetDateTimeFormatString();
-        }
-    }
-    // #endregion
-    //#region Validation
     /**
      * Validator
      */
@@ -4821,23 +4919,47 @@ class SacBaseDateTimeControl extends SacBaseModelControl {
         }
         return error;
     }
+    /**
+     * Overwrite WriteValue to Set correct Date Object
+     */
+    writeValue(value) {
+        if (value === '' || value === null || value === undefined) {
+            // Reset Value String, damit beim Update des Models auch das Input Feld geleert wird.
+            this._valueAsString = '';
+            // Set Internal Property
+            this._value = null;
+        }
+        else {
+            this._value = this.getDate(value).toDate();
+        }
+        super.writeValue(this._value);
+    }
+    // #endregion Public Abstract Methods
+    // #region Private Methods
+    SetDateTimeFormat() {
+        // HACK: Add addition property to FormControl. Can be fixed if solution for ticket: https://github.com/angular/angular/issues/19686
+        if (this.ngControl) {
+            this.ngControl.datetimeformatstring =
+                this.GetDateTimeFormatString();
+        }
+    }
 }
-SacBaseDateTimeControl.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacBaseDateTimeControl, deps: [{ token: SacFormCommon }, { token: i0.Injector }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-SacBaseDateTimeControl.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: SacBaseDateTimeControl, inputs: { isrequired: "isrequired", placeholder: "placeholder", validationmessagerequired: "validationmessagerequired", validationmessagerequiredsummary: "validationmessagerequiredsummary", validationmessagedatetimeformat: "validationmessagedatetimeformat", validationmessagedatetimeformatsummary: "validationmessagedatetimeformatsummary", valuestring: "valuestring" }, usesInheritance: true, ngImport: i0 });
+SacBaseDateTimeControl.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacBaseDateTimeControl, deps: [{ token: SacFormLayoutCommon }, { token: i0.Injector }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+SacBaseDateTimeControl.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: SacBaseDateTimeControl, inputs: { isrequired: "isrequired", placeholder: "placeholder", validationmessagedatetimeformat: "validationmessagedatetimeformat", validationmessagedatetimeformatsummary: "validationmessagedatetimeformatsummary", validationmessagerequired: "validationmessagerequired", validationmessagerequiredsummary: "validationmessagerequiredsummary", valuestring: "valuestring" }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacBaseDateTimeControl, decorators: [{
             type: Directive
-        }], ctorParameters: function () { return [{ type: SacFormCommon }, { type: i0.Injector }, { type: i0.ElementRef }]; }, propDecorators: { isrequired: [{
+        }], ctorParameters: function () { return [{ type: SacFormLayoutCommon }, { type: i0.Injector }, { type: i0.ElementRef }]; }, propDecorators: { isrequired: [{
                 type: Input
             }], placeholder: [{
                 type: Input
-            }], validationmessagerequired: [{
-                type: Input
-            }], validationmessagerequiredsummary: [{
-                type: Input
             }], validationmessagedatetimeformat: [{
                 type: Input
             }], validationmessagedatetimeformatsummary: [{
                 type: Input
+            }], validationmessagerequired: [{
+                type: Input
+            }], validationmessagerequiredsummary: [{
+                type: Input
             }], valuestring: [{
                 type: Input
             }] } });
@@ -4852,14 +4974,14 @@ const moment$3 = moment_['default'];
 class SacDateCommon extends SacBaseDateTimeControl {
     // #endregion
     /**
-     * Konstruktor
-     * @param parent typ SacFormCommon
-     * @param injector typ Injector
-     * @param _elementRef typ ElementRef
+     * Constructor
+     * @param formlayout SacFormLayoutCommon to define scoped layout settings
+     * @param injector Injector for injecting services
+     * @param elementRef reference to html element
      */
-    constructor(parent, injector, _elementRef) {
-        super(parent, injector, _elementRef);
-        this._elementRef = _elementRef;
+    constructor(formlayout, injector, elementRef) {
+        super(formlayout, injector, elementRef);
+        this.elementRef = elementRef;
         // #region Constants
         /**
          * Format des Datums
@@ -4988,7 +5110,7 @@ class SacDateCommon extends SacBaseDateTimeControl {
      * HostListener
      */
     onClick(targetElement) {
-        const clickedInside = this._elementRef.nativeElement.contains(targetElement);
+        const clickedInside = this.elementRef.nativeElement.contains(targetElement);
         if (!clickedInside) {
             this._showselector = false;
         }
@@ -5031,11 +5153,11 @@ class SacDateCommon extends SacBaseDateTimeControl {
         return error;
     }
 }
-SacDateCommon.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacDateCommon, deps: [{ token: SacFormCommon }, { token: i0.Injector }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+SacDateCommon.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacDateCommon, deps: [{ token: SacFormLayoutCommon }, { token: i0.Injector }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
 SacDateCommon.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: SacDateCommon, inputs: { mindate: "mindate", maxdate: "maxdate", validationmessagemindate: "validationmessagemindate", validationmessagesummarymindate: "validationmessagesummarymindate", validationmessagemaxdate: "validationmessagemaxdate", validationmessagesummarymaxdate: "validationmessagesummarymaxdate" }, host: { listeners: { "document:click": "onClick($event.target)" } }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacDateCommon, decorators: [{
             type: Directive
-        }], ctorParameters: function () { return [{ type: SacFormCommon }, { type: i0.Injector }, { type: i0.ElementRef }]; }, propDecorators: { mindate: [{
+        }], ctorParameters: function () { return [{ type: SacFormLayoutCommon }, { type: i0.Injector }, { type: i0.ElementRef }]; }, propDecorators: { mindate: [{
                 type: Input
             }], maxdate: [{
                 type: Input
@@ -5520,14 +5642,14 @@ const moment$1 = moment_['default'];
 class SacDateTimeCommon extends SacBaseDateTimeControl {
     // #endregion
     /**
-     * Konstruktor
-     * @param parent typ SacFormCommon
-     * @param injector typ Injector
-     * @param _elementRef typ ElementRef
+     * Constructor
+     * @param formlayout SacFormLayoutCommon to define scoped layout settings
+     * @param injector Injector for injecting services
+     * @param elementRef reference to html element
      */
-    constructor(parent, injector, _elementRef) {
-        super(parent, injector, _elementRef);
-        this._elementRef = _elementRef;
+    constructor(formlayout, injector, elementRef) {
+        super(formlayout, injector, elementRef);
+        this.elementRef = elementRef;
         //#endregion
         // #region Constants
         /**
@@ -5674,7 +5796,7 @@ class SacDateTimeCommon extends SacBaseDateTimeControl {
      * HostListener
      */
     onClick(targetElement) {
-        const clickedInside = this._elementRef.nativeElement.contains(targetElement);
+        const clickedInside = this.elementRef.nativeElement.contains(targetElement);
         if (!clickedInside) {
             this._showselector = false;
         }
@@ -5717,11 +5839,11 @@ class SacDateTimeCommon extends SacBaseDateTimeControl {
         return error;
     }
 }
-SacDateTimeCommon.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacDateTimeCommon, deps: [{ token: SacFormCommon }, { token: i0.Injector }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+SacDateTimeCommon.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacDateTimeCommon, deps: [{ token: SacFormLayoutCommon }, { token: i0.Injector }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
 SacDateTimeCommon.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: SacDateTimeCommon, inputs: { mindate: "mindate", maxdate: "maxdate", validationmessagemindate: "validationmessagemindate", validationmessagesummarymindate: "validationmessagesummarymindate", validationmessagemaxdate: "validationmessagemaxdate", validationmessagesummarymaxdate: "validationmessagesummarymaxdate" }, host: { listeners: { "document:click": "onClick($event.target)" } }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacDateTimeCommon, decorators: [{
             type: Directive
-        }], ctorParameters: function () { return [{ type: SacFormCommon }, { type: i0.Injector }, { type: i0.ElementRef }]; }, propDecorators: { mindate: [{
+        }], ctorParameters: function () { return [{ type: SacFormLayoutCommon }, { type: i0.Injector }, { type: i0.ElementRef }]; }, propDecorators: { mindate: [{
                 type: Input
             }], maxdate: [{
                 type: Input
@@ -5748,14 +5870,14 @@ const moment = moment_['default'];
 class SacTimeCommon extends SacBaseDateTimeControl {
     // #endregion
     /**
-     * Konstruktor
-     * @param parent typ SacFormCommon
-     * @param injector typ Injector
-     * @param _elementRef typ ElementRef
+     * Constructor
+     * @param formlayout SacFormLayoutCommon to define scoped layout settings
+     * @param injector Injector for injecting services
+     * @param elementRef reference to html element
      */
-    constructor(parent, injector, _elementRef) {
-        super(parent, injector, _elementRef);
-        this._elementRef = _elementRef;
+    constructor(formlayout, injector, elementRef) {
+        super(formlayout, injector, elementRef);
+        this.elementRef = elementRef;
         // #region Constants
         /**
          * Format des Datums
@@ -5883,7 +6005,7 @@ class SacTimeCommon extends SacBaseDateTimeControl {
      * HostListener
      */
     onClick(targetElement) {
-        const clickedInside = this._elementRef.nativeElement.contains(targetElement);
+        const clickedInside = this.elementRef.nativeElement.contains(targetElement);
         if (!clickedInside) {
             this._showselector = false;
         }
@@ -5926,11 +6048,11 @@ class SacTimeCommon extends SacBaseDateTimeControl {
         return error;
     }
 }
-SacTimeCommon.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacTimeCommon, deps: [{ token: SacFormCommon }, { token: i0.Injector }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+SacTimeCommon.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacTimeCommon, deps: [{ token: SacFormLayoutCommon }, { token: i0.Injector }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
 SacTimeCommon.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: SacTimeCommon, inputs: { mintime: "mintime", maxtime: "maxtime", validationmessagemintime: "validationmessagemintime", validationmessagesummarymintime: "validationmessagesummarymintime", validationmessagemaxtime: "validationmessagemaxtime", validationmessagesummarymaxtime: "validationmessagesummarymaxtime" }, host: { listeners: { "document:click": "onClick($event.target)" } }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacTimeCommon, decorators: [{
             type: Directive
-        }], ctorParameters: function () { return [{ type: SacFormCommon }, { type: i0.Injector }, { type: i0.ElementRef }]; }, propDecorators: { mintime: [{
+        }], ctorParameters: function () { return [{ type: SacFormLayoutCommon }, { type: i0.Injector }, { type: i0.ElementRef }]; }, propDecorators: { mintime: [{
                 type: Input
             }], maxtime: [{
                 type: Input
@@ -5947,36 +6069,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                 args: ['document:click', ['$event.target']]
             }] } });
 
-/**
- * Common Klasse für Static Label Control
- **/
-class SacStaticLabelCommon extends SacInputBase {
-    constructor() {
-        super(...arguments);
-        /**
-         * Erlaubt HTML Content in der Anzeige des Wertes
-         */
-        this.allowhtml = false;
-    }
-    /**
-     * Validierung des Controls
-     *
-     * @param c Control das Validiert werden soll
-     * @returns Fehlermeldung aus Validation oder NULL
-     */
-    validateData(c) {
-        // Keine Validierung, daher immer NULL
-        return null;
-    }
-}
-SacStaticLabelCommon.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacStaticLabelCommon, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-SacStaticLabelCommon.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: SacStaticLabelCommon, inputs: { allowhtml: "allowhtml" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacStaticLabelCommon, decorators: [{
-            type: Directive
-        }], propDecorators: { allowhtml: [{
-                type: Input
-            }] } });
-
 /**
  * Common Control für Form Item Container.
  **/
@@ -6020,9 +6112,39 @@ SacStaticFormContainerCommon.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0
 SacStaticFormContainerCommon.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: SacStaticFormContainerCommon, inputs: { tooltiptext: "tooltiptext", isrequired: "isrequired" }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacStaticFormContainerCommon, decorators: [{
             type: Directive
-        }], propDecorators: { tooltiptext: [{
-                type: Input
-            }], isrequired: [{
+        }], propDecorators: { tooltiptext: [{
+                type: Input
+            }], isrequired: [{
+                type: Input
+            }] } });
+
+/**
+ * Common Klasse für Static Label Control
+ **/
+class SacStaticLabelCommon extends SacInputBase {
+    constructor() {
+        super(...arguments);
+        /**
+         * Erlaubt HTML Content in der Anzeige des Wertes
+         */
+        this.allowhtml = false;
+    }
+    /**
+     * Validierung des Controls
+     *
+     * @param c Control das Validiert werden soll
+     * @returns Fehlermeldung aus Validation oder NULL
+     */
+    validateData(c) {
+        // Keine Validierung, daher immer NULL
+        return null;
+    }
+}
+SacStaticLabelCommon.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacStaticLabelCommon, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+SacStaticLabelCommon.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: SacStaticLabelCommon, inputs: { allowhtml: "allowhtml" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacStaticLabelCommon, decorators: [{
+            type: Directive
+        }], propDecorators: { allowhtml: [{
                 type: Input
             }] } });
 
@@ -6216,15 +6338,18 @@ class TinyMceDialogSettings {
  * Basis Komponente für TinyMCE Editor
  */
 class SacTinyMceCommon extends SacBaseModelControl {
+    // #endregion Properties
+    // #region Constructors
     /**
-     * Konstruktor
-     * @param parent Instanz vom Formular
-     * @param injector Injector Service
-     * @param ngZone NgZone für Javascript in TinyMCE
+     * Constructor
+     * @param formlayout SacFormLayoutCommon to define scoped layout settings
+     * @param injector Injector for injecting services
+     * @param ngZone ngzone for handling external javascripts
      */
-    constructor(parent, injector, ngZone) {
-        super(parent, injector);
+    constructor(formlayout, injector, ngZone) {
+        super(formlayout, injector);
         this.ngZone = ngZone;
+        // #region Properties
         /**
          * Default Config mit Standardwerten für TinyMCE
          */
@@ -6238,49 +6363,37 @@ class SacTinyMceCommon extends SacBaseModelControl {
             save_onsavecallback: () => { },
         };
         /**
-         * TinyMCE Config
-         */
-        this._config = {};
-        /**
-         * Der Select Dialog wird angezeigt
-         */
-        this.selectdialogvisible = false;
-        /**
-         * Definiert das Control als Required
+         * Erlaubt im Filebrowser das löschen von Dateien
          */
-        this.isrequired = false;
+        this.allowfiledelete = false;
         /**
-         * Höhe des Editors
+         * Erlaubt im Filebrowser das umbennen von Dateien
          */
-        this.height = undefined;
+        this.allowfilerename = false;
         /**
-         * URL zu Filebrowser Backend
+         * Erlaubt im Filebrowser das hochladen von Files
          */
-        this.filebrowserapiurl = null;
+        this.allowfileupload = false;
         /**
          * Erlaubt im Filebrowser das anlegen eines Ordners
          */
         this.allowfoldercreate = false;
-        /**
-         * Erlaubt im Filebrowser das umbennen eines Ordners
-         */
-        this.allowfolderrename = false;
         /**
          * Erlaubt im Filebrowser das löschen eines Ordners
          */
         this.allowfolderdelete = false;
         /**
-         * Erlaubt im Filebrowser das hochladen von Files
+         * Erlaubt im Filebrowser das umbennen eines Ordners
          */
-        this.allowfileupload = false;
+        this.allowfolderrename = false;
         /**
-         * Erlaubt im Filebrowser das umbennen von Dateien
+         * URL zu Filebrowser Backend
          */
-        this.allowfilerename = false;
+        this.filebrowserapiurl = null;
         /**
-         * Erlaubt im Filebrowser das löschen von Dateien
+         * File Extensions für Links (Format: .xxx,.yyy,.eee)
          */
-        this.allowfiledelete = false;
+        this.filetypesfiles = '';
         /**
          * File Extensions für Images (Format: .xxx,.yyy,.eee)
          */
@@ -6290,9 +6403,13 @@ class SacTinyMceCommon extends SacBaseModelControl {
          */
         this.filetypesvideo = '.mp4,.m4v,.ogv,.webm,.mov';
         /**
-         * File Extensions für Links (Format: .xxx,.yyy,.eee)
+         * Höhe des Editors
          */
-        this.filetypesfiles = '';
+        this.height = undefined;
+        /**
+         * Definiert das Control als Required
+         */
+        this.isrequired = false;
         /**
          * Resource Key für Validation Message Required bei Control
          */
@@ -6305,9 +6422,19 @@ class SacTinyMceCommon extends SacBaseModelControl {
          * Event wenn Save Action in TinyMCE ausgelöst wird
          */
         this.onsave = new EventEmitter();
+        /**
+         * TinyMCE Config
+         */
+        this._config = {};
+        /**
+         * Der Select Dialog wird angezeigt
+         */
+        this.selectdialogvisible = false;
         this.lngResourceService = injector.get(SACLOCALISATION_SERVICE, new SacDefaultLocalisationService());
         this.config = {};
     }
+    // #endregion Constructors
+    // #region Public Getters And Setters
     /**
      * TinyMCE Konfiguration
      * @link https://www.tiny.cloud/docs/configure/
@@ -6321,7 +6448,35 @@ class SacTinyMceCommon extends SacBaseModelControl {
     get config() {
         return this._config;
     }
-    //#region Integration Select Dialog für Fileauswahl
+    // #endregion Public Getters And Setters
+    // #region Public Methods
+    /**
+     * Schliesst den Dateiauswahl Dialog
+     */
+    closeSelectDialog() {
+        this.selectdialogvisible = false;
+    }
+    /**
+     * Löst die Speichern Action aus
+     * @param content Content als String
+     */
+    save(content) {
+        this.onsave.emit(content);
+    }
+    /**
+     * Setzt das Resultat aus dem Dateiauswahl Dialog
+     */
+    setSelectDialogResult() {
+        if (this.selectDialogSettings.value) {
+            if (this.selectDialogSettings.value.startsWith('/') ||
+                this.selectDialogSettings.value.startsWith('\\')) {
+                this.selectDialogSettings.value =
+                    this.selectDialogSettings.value.substring(1);
+            }
+            this.selectDialogSettings.callback(this.selectDialogSettings.value);
+        }
+        this.closeSelectDialog();
+    }
     /**
      * Zeigt den Dateiauswahl Dialog an
      * @param callback Callback Methode welche aufgerufen wird, wenn der Dialog geschlossen wird
@@ -6356,34 +6511,6 @@ class SacTinyMceCommon extends SacBaseModelControl {
             });
         });
     }
-    /**
-     * Setzt das Resultat aus dem Dateiauswahl Dialog
-     */
-    setSelectDialogResult() {
-        if (this.selectDialogSettings.value) {
-            if (this.selectDialogSettings.value.startsWith('/') ||
-                this.selectDialogSettings.value.startsWith('\\')) {
-                this.selectDialogSettings.value =
-                    this.selectDialogSettings.value.substring(1);
-            }
-            this.selectDialogSettings.callback(this.selectDialogSettings.value);
-        }
-        this.closeSelectDialog();
-    }
-    /**
-     * Schliesst den Dateiauswahl Dialog
-     */
-    closeSelectDialog() {
-        this.selectdialogvisible = false;
-    }
-    //#endregion
-    /**
-     * Löst die Speichern Action aus
-     * @param content Content als String
-     */
-    save(content) {
-        this.onsave.emit(content);
-    }
     /**
      * Validiert das Control
      * @param c Control Instanz die valdidiert wird
@@ -6396,6 +6523,8 @@ class SacTinyMceCommon extends SacBaseModelControl {
         }
         return error;
     }
+    // #endregion Public Abstract Methods
+    // #region Private Methods
     /**
      * Gibt die TinyMCE Settings zurück, die aus den Properties der Angular Komponenten erzeugt werden
      * @returns Objekt mit Settings
@@ -6408,45 +6537,105 @@ class SacTinyMceCommon extends SacBaseModelControl {
         return settings;
     }
 }
-SacTinyMceCommon.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacTinyMceCommon, deps: [{ token: SacFormCommon, host: true }, { token: i0.Injector }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-SacTinyMceCommon.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: SacTinyMceCommon, inputs: { isrequired: "isrequired", height: "height", filebrowserapiurl: "filebrowserapiurl", allowfoldercreate: "allowfoldercreate", allowfolderrename: "allowfolderrename", allowfolderdelete: "allowfolderdelete", allowfileupload: "allowfileupload", allowfilerename: "allowfilerename", allowfiledelete: "allowfiledelete", filetypesimages: "filetypesimages", filetypesvideo: "filetypesvideo", filetypesfiles: "filetypesfiles", validationmessagerequired: "validationmessagerequired", validationmessagesummaryrequired: "validationmessagesummaryrequired", config: "config" }, outputs: { onsave: "onsave" }, usesInheritance: true, ngImport: i0 });
+SacTinyMceCommon.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacTinyMceCommon, deps: [{ token: SacFormLayoutCommon, host: true }, { token: i0.Injector }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+SacTinyMceCommon.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: SacTinyMceCommon, inputs: { allowfiledelete: "allowfiledelete", allowfilerename: "allowfilerename", allowfileupload: "allowfileupload", allowfoldercreate: "allowfoldercreate", allowfolderdelete: "allowfolderdelete", allowfolderrename: "allowfolderrename", filebrowserapiurl: "filebrowserapiurl", filetypesfiles: "filetypesfiles", filetypesimages: "filetypesimages", filetypesvideo: "filetypesvideo", height: "height", isrequired: "isrequired", validationmessagerequired: "validationmessagerequired", validationmessagesummaryrequired: "validationmessagesummaryrequired", config: "config" }, outputs: { onsave: "onsave" }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacTinyMceCommon, decorators: [{
             type: Directive
         }], ctorParameters: function () {
-        return [{ type: SacFormCommon, decorators: [{
+        return [{ type: SacFormLayoutCommon, decorators: [{
                         type: Host
                     }] }, { type: i0.Injector }, { type: i0.NgZone }];
-    }, propDecorators: { isrequired: [{
+    }, propDecorators: { allowfiledelete: [{
                 type: Input
-            }], height: [{
+            }], allowfilerename: [{
                 type: Input
-            }], filebrowserapiurl: [{
+            }], allowfileupload: [{
                 type: Input
             }], allowfoldercreate: [{
                 type: Input
-            }], allowfolderrename: [{
-                type: Input
             }], allowfolderdelete: [{
                 type: Input
-            }], allowfileupload: [{
+            }], allowfolderrename: [{
                 type: Input
-            }], allowfilerename: [{
+            }], filebrowserapiurl: [{
                 type: Input
-            }], allowfiledelete: [{
+            }], filetypesfiles: [{
                 type: Input
             }], filetypesimages: [{
                 type: Input
             }], filetypesvideo: [{
                 type: Input
-            }], filetypesfiles: [{
+            }], height: [{
+                type: Input
+            }], isrequired: [{
                 type: Input
             }], validationmessagerequired: [{
                 type: Input
             }], validationmessagesummaryrequired: [{
                 type: Input
+            }], onsave: [{
+                type: Output
             }], config: [{
                 type: Input
-            }], onsave: [{
+            }] } });
+
+/**
+ *Basis Komponente für SacTreeItemAction
+ */
+class SacTreeItemActionCommon {
+    /**
+     * Konstruktor
+     * @param el Element Referenz
+     */
+    constructor(el) {
+        this.el = el;
+        /**
+         * Event wenn auf das Icon geclickt wird
+         */
+        this.clicked = new EventEmitter();
+    }
+    /**
+     * lifecycle OnInit hook. Wird aufgeruren sobald das Komponent initialisiert ist.
+     */
+    ngOnInit() {
+        let rootElement = this.el.nativeElement;
+        let parentElement = rootElement.parentElement;
+        while (rootElement.firstChild) {
+            parentElement.insertBefore(rootElement.firstChild, rootElement);
+        }
+        parentElement.removeChild(rootElement);
+    }
+    /**
+     * Die Methode erstellt die CSS Klasse des Icon. Akzeptiert ein Key-word und baut ein vollständige CSS Klasse.
+     */
+    transformClass(initialClass) {
+        switch (initialClass) {
+            case 'add':
+                return 'jstree-icon icon icon-base-add jstree-add';
+            case 'delete':
+                return 'jstree-icon icon icon-base-delete jstree-delete';
+            default:
+                return initialClass;
+        }
+    }
+    /**
+     * Die Methode wird das cklickaction Emitter aktivieren.
+     */
+    iconaction() {
+        this.clicked.emit();
+    }
+}
+SacTreeItemActionCommon.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacTreeItemActionCommon, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+SacTreeItemActionCommon.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: SacTreeItemActionCommon, inputs: { item: "item", title: "title", iconstyle: "iconstyle" }, outputs: { clicked: "clicked" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacTreeItemActionCommon, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { item: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], iconstyle: [{
+                type: Input
+            }], clicked: [{
                 type: Output
             }] } });
 
@@ -6807,67 +6996,7 @@ SacTreeViewChildCommon.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", v
 SacTreeViewChildCommon.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: SacTreeViewChildCommon, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacTreeViewChildCommon, decorators: [{
             type: Directive
-        }] });
-
-/**
- *Basis Komponente für SacTreeItemAction
- */
-class SacTreeItemActionCommon {
-    /**
-     * Konstruktor
-     * @param el Element Referenz
-     */
-    constructor(el) {
-        this.el = el;
-        /**
-         * Event wenn auf das Icon geclickt wird
-         */
-        this.clicked = new EventEmitter();
-    }
-    /**
-     * lifecycle OnInit hook. Wird aufgeruren sobald das Komponent initialisiert ist.
-     */
-    ngOnInit() {
-        let rootElement = this.el.nativeElement;
-        let parentElement = rootElement.parentElement;
-        while (rootElement.firstChild) {
-            parentElement.insertBefore(rootElement.firstChild, rootElement);
-        }
-        parentElement.removeChild(rootElement);
-    }
-    /**
-     * Die Methode erstellt die CSS Klasse des Icon. Akzeptiert ein Key-word und baut ein vollständige CSS Klasse.
-     */
-    transformClass(initialClass) {
-        switch (initialClass) {
-            case 'add':
-                return 'jstree-icon icon icon-base-add jstree-add';
-            case 'delete':
-                return 'jstree-icon icon icon-base-delete jstree-delete';
-            default:
-                return initialClass;
-        }
-    }
-    /**
-     * Die Methode wird das cklickaction Emitter aktivieren.
-     */
-    iconaction() {
-        this.clicked.emit();
-    }
-}
-SacTreeItemActionCommon.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacTreeItemActionCommon, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-SacTreeItemActionCommon.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: SacTreeItemActionCommon, inputs: { item: "item", title: "title", iconstyle: "iconstyle" }, outputs: { clicked: "clicked" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacTreeItemActionCommon, decorators: [{
-            type: Directive
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { item: [{
-                type: Input
-            }], title: [{
-                type: Input
-            }], iconstyle: [{
-                type: Input
-            }], clicked: [{
-                type: Output
-            }] } });
+        }] });
 
 /**
  * Enum für Tooltip Positionen
@@ -7246,41 +7375,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                 args: ['tooltip', { static: true }]
             }] } });
 
-/**
- * Klasse für den Upload einer Datei in der Upload Component
- */
-class SacUploadFile {
-    /**
-     * Konstruktor
-     * @param ufile Upload Status
-     */
-    constructor(ufile) {
-        this.uploadId = ufile.uploadId;
-        this.name = ufile.name;
-        this.progress = ufile.progress;
-        this.status = ufile.status;
-        this.documentid = null;
-    }
-}
+// #region Classes
 /**
  * Base Klasse für Uploader Control
  */
 class SacUploadBase extends SacBaseModelControl {
+    // #endregion Properties
+    // #region Constructors
     /**
      * Constructor
-     * @param parent Formular Component
-     * @param injector Injector für Komponenten Injection
-     * @param renderer Rendering Engine
-     * @param ngZone NgZone
+     * @param formlayout SacFormLayoutCommon to define scoped layout settings
+     * @param injector Injector for injecting services
+     * @param renderer angular rendering engine
+     * @param ngZone ngzone for handling external scripts
      */
-    constructor(parent, injector, renderer, ngZone) {
-        super(parent, injector);
+    constructor(formlayout, injector, renderer, ngZone) {
+        super(formlayout, injector);
         this.renderer = renderer;
         this.ngZone = ngZone;
-        /**
-         * Upload Settings
-         */
-        this.options = {};
         /**
          * Erlaubte Dateitypen
          */
@@ -7297,23 +7409,26 @@ class SacUploadBase extends SacBaseModelControl {
          * API Endpoint
          */
         this._endpoint = null;
-        //#region Properties
         /**
-         * Resource Key für Validation Message Required bei Control
+         * Upload Settings
          */
-        this.validationmessagerequired = 'VALIDATION_ERROR_REQUIRED';
+        this.options = {};
         /**
-         * Resource Key für Validation Message Required in Validation Summary
+         * Definiert das Control als Required
          */
-        this.validationmessagesummaryrequired = 'VALIDATION_ERROR_SUMMARY_REQUIRED';
+        this.isrequired = false;
         /**
          * Max. Dateigrösse für Files die hochgeladen werden können. 0 deaktiviert den Filter
          */
         this.maxfilesize = 0;
         /**
-         * Definiert das Control als Required
+         * Resource Key für Validation Message Required bei Control
          */
-        this.isrequired = false;
+        this.validationmessagerequired = 'VALIDATION_ERROR_REQUIRED';
+        /**
+         * Resource Key für Validation Message Required in Validation Summary
+         */
+        this.validationmessagesummaryrequired = 'VALIDATION_ERROR_SUMMARY_REQUIRED';
         /**
          * Event wenn ein Error in der Komponente ausgelöst wird.
          */
@@ -7344,6 +7459,8 @@ class SacUploadBase extends SacBaseModelControl {
         // Subscripe Event for State changes
         this.uploadService.events.subscribe((ufile) => this.onUpload(ufile));
     }
+    // #endregion Constructors
+    // #region Public Getters And Setters
     /**
      * Erlaubte Dateitypen für den Upload. Format: ".xxx,.yyy,.zzz"
      */
@@ -7351,9 +7468,6 @@ class SacUploadBase extends SacBaseModelControl {
         this._allowedtypes = types;
         this.setAllowedTypes(types);
     }
-    get allowedtypes() {
-        return this._allowedtypes;
-    }
     /**
      * Files nach der Auswahl automatisch hochladen
      */
@@ -7362,19 +7476,12 @@ class SacUploadBase extends SacBaseModelControl {
         this.options.autoUpload = v;
         this.uploadService.connect(this.options);
     }
-    get autoupload() {
-        return this._autoupload;
-    }
     /**
      * Uploads können unterbrochen werden
      */
     set enablepause(v) {
         this._enablepause = v;
     }
-    get enablepause() {
-        return this._enablepause;
-    }
-    //#endregion
     /**
      * Definiert den Registration Endpoint für Uploads.
      */
@@ -7382,110 +7489,50 @@ class SacUploadBase extends SacBaseModelControl {
         this._endpoint = v;
         this.setEndpoint(v);
     }
-    get endpoint() {
-        return this._endpoint;
-    }
-    /**
-     * Initialisiert das Control
-     */
-    ngOnInit() {
-        super.ngOnInit();
-        // Init Event Listener for Input File Control and Handling Files
-        this.listenerFn = this.renderer.listen(this.uploadInput.nativeElement, 'change', this.fileListener);
-        this.setAllowedTypes(this._allowedtypes);
-        this.setEndpoint(this._endpoint);
-        if (this._endpoint === null) {
-            throw new Error('endpoint is not defined!');
-        }
-        this.uploadService.connect(this.options);
-    }
-    /**
-     * Destroy des Controls
-     */
-    ngOnDestroy() {
-        if (this.listenerFn) {
-            this.listenerFn();
-        }
-    }
-    //#region All File Events
-    /**
-     * Cancel all Uploaded files
-     */
-    cancelAll() {
-        if (this.HasQueueItem() === true) {
-            this.uploadService.control({ action: 'cancel' });
-        }
-    }
     /**
-     * Upload all queued Files
+     * Icon for browse button
      */
-    uploadAll() {
-        if (this.IsStateToUpload() === true) {
-            this.uploadService.control({ action: 'upload' });
-        }
+    get IconBrowse() {
+        return this.iconService.UploadComponentBrowseIcon;
     }
     /**
-     * Pause all Uploads
+     * icon for continous buttons
      */
-    pauseAll() {
-        if (this.IsUploading() === true) {
-            this.uploadService.control({ action: 'pause' });
-        }
+    get IconContinue() {
+        return this.iconService.UploadComponentContinueIcon;
     }
-    //#endregion
-    //#region Singel File Events
     /**
-     * Cancel single upload
-     * @param uploadId ID of File to cancel
+     * icon for delete buttons
      */
-    cancel(uploadId) {
-        this.uploadService.control({ action: 'cancel', uploadId: uploadId });
+    get IconDelete() {
+        return this.iconService.UploadComponentDeleteIcon;
     }
     /**
-     * Cancel Single File
-     * @param uploadId ID of File to Cancel
+     * icon for pause buttons
      */
-    pause(uploadId) {
-        this.uploadService.control({ action: 'pause', uploadId });
+    get IconPause() {
+        return this.iconService.UploadComponentPauseIcon;
     }
     /**
-     * Upload Single File
-     *
-     * @param uploadId ID of File to Upload
+     * icon for upload button
      */
-    upload(uploadId) {
-        this.uploadService.control({ action: 'upload', uploadId });
+    get IconUpload() {
+        return this.iconService.UploadComponentUploadIcon;
     }
-    //#endregion
-    //#region UI Property Helper
-    /**
-     * Gibt an ob Queue Elemente beinhaltet
-     * @returns Elemente in der Queue
-     */
-    HasQueueItem() {
-        return this.uploads.length > 0;
+    get allowedtypes() {
+        return this._allowedtypes;
     }
-    /**
-     * Prüft ob in der Queue Elemente die zum Upload bereit sind vorhanden sind.
-     * @returns Elemente für Upload vorhanden
-     */
-    IsStateToUpload() {
-        return (this.uploads.filter((itm) => itm.status === 'added' || itm.status === 'paused').length > 0);
+    get autoupload() {
+        return this._autoupload;
     }
-    /**
-     * Prüft ob ein Upload eines Files am laufen ist
-     * @returns Upload ist am laufen
-     */
-    IsUploading() {
-        return this.uploads.filter((itm) => itm.status === 'uploading').length > 0;
+    get enablepause() {
+        return this._enablepause;
     }
-    /**
-     * Prüft ob ein Upload pausiert
-     * @returns Pausierter Upload ist vorhanden
-     */
-    IsPaused() {
-        return this.uploads.filter((itm) => itm.status === 'paused').length > 0;
+    get endpoint() {
+        return this._endpoint;
     }
+    // #endregion Public Getters And Setters
+    // #region Public Methods
     /**
      * Name der Datei die Hochgeladen wird
      * @returns Observable des Dateinamens.
@@ -7498,6 +7545,13 @@ class SacUploadBase extends SacBaseModelControl {
             return this.lngResourceService.GetString('UPLOAD_NO_FILE_SELECTED');
         }
     }
+    /**
+     * Gibt an ob Queue Elemente beinhaltet
+     * @returns Elemente in der Queue
+     */
+    HasQueueItem() {
+        return this.uploads.length > 0;
+    }
     /**
      * Gibt an ob ein Upload abgeschlossen ist
      * @returns Upload erfolgreich
@@ -7510,6 +7564,27 @@ class SacUploadBase extends SacBaseModelControl {
             return false;
         }
     }
+    /**
+     * Prüft ob ein Upload pausiert
+     * @returns Pausierter Upload ist vorhanden
+     */
+    IsPaused() {
+        return this.uploads.filter((itm) => itm.status === 'paused').length > 0;
+    }
+    /**
+     * Prüft ob in der Queue Elemente die zum Upload bereit sind vorhanden sind.
+     * @returns Elemente für Upload vorhanden
+     */
+    IsStateToUpload() {
+        return (this.uploads.filter((itm) => itm.status === 'added' || itm.status === 'paused').length > 0);
+    }
+    /**
+     * Prüft ob ein Upload eines Files am laufen ist
+     * @returns Upload ist am laufen
+     */
+    IsUploading() {
+        return this.uploads.filter((itm) => itm.status === 'uploading').length > 0;
+    }
     /**
      * Gibt den Uploadfortschritt zurück
      * @returns Upload Fortschritt. Wert von 0-100
@@ -7522,67 +7597,42 @@ class SacUploadBase extends SacBaseModelControl {
             return 0;
         }
     }
-    //#endregion
-    //#region Validation
     /**
-     * Validiert das Upload Control
-     * @param c Control das validiert werden soll
+     * Cancel single upload
+     * @param uploadId ID of File to cancel
      */
-    validateData(c) {
-        let error = null;
-        if (this.isrequired) {
-            error = Validation.required(this.validationmessagerequired, this.validationmessagesummaryrequired)(c);
-        }
-        return error;
+    cancel(uploadId) {
+        this.uploadService.control({ action: 'cancel', uploadId: uploadId });
     }
-    //#endregion
     /**
-     * Setzt die erlaubten Datentypen für den Upload
-     *
-     * @param types Erlaubte File Extensions
+     * Cancel all Uploaded files
      */
-    setAllowedTypes(types) {
-        // Prüfen UploadInput bereits geladen, ist NULL wenn Extension im Markup nach NgModel gesetzt wird.
-        if (this.uploadInput && this.uploadInput.nativeElement) {
-            this.renderer.setAttribute(this.uploadInput.nativeElement, 'accept', types);
+    cancelAll() {
+        if (this.HasQueueItem() === true) {
+            this.uploadService.control({ action: 'cancel' });
         }
-        this.options.allowedTypes = types;
-    }
-    /**
-     * Setzt den Upload Endpoit
-     * @param url Register URI
-     */
-    setEndpoint(url) {
-        this.options.endpoint = url;
     }
     /**
-     * Prüft ob die Dateierweiterung gültig ist
-     *
-     * @param filename Dateiname
+     * Destroy des Controls
      */
-    isExtensionValid(filename) {
-        if (this._allowedtypes === '*') {
-            return true;
+    ngOnDestroy() {
+        if (this.listenerFn) {
+            this.listenerFn();
         }
-        let isValid = false;
-        const extensions = this._allowedtypes.split(',');
-        extensions.forEach((itm) => {
-            if (filename.toLowerCase().endsWith(itm.toLowerCase())) {
-                isValid = true;
-            }
-        });
-        return isValid;
     }
     /**
-     * Prüft ob das File nicht zu gross ist.
-     *
-     * @param filesize Max File Size in Bytes
+     * Initialisiert das Control
      */
-    isFileSizeValid(filesize) {
-        if (this.maxfilesize === 0) {
-            return true;
+    ngOnInit() {
+        super.ngOnInit();
+        // Init Event Listener for Input File Control and Handling Files
+        this.listenerFn = this.renderer.listen(this.uploadInput.nativeElement, 'change', this.fileListener);
+        this.setAllowedTypes(this._allowedtypes);
+        this.setEndpoint(this._endpoint);
+        if (this._endpoint === null) {
+            throw new Error('endpoint is not defined!');
         }
-        return this.maxfilesize >= filesize;
+        this.uploadService.connect(this.options);
     }
     /**
      * Upload Event
@@ -7627,11 +7677,49 @@ class SacUploadBase extends SacBaseModelControl {
         this.UpdateFileCount();
     }
     /**
-     * Returns the number of uploaded files
+     * Cancel Single File
+     * @param uploadId ID of File to Cancel
      */
-    UploadedFileCount() {
-        return this.uploads.filter((itm) => itm.status === 'complete').length;
+    pause(uploadId) {
+        this.uploadService.control({ action: 'pause', uploadId });
+    }
+    /**
+     * Pause all Uploads
+     */
+    pauseAll() {
+        if (this.IsUploading() === true) {
+            this.uploadService.control({ action: 'pause' });
+        }
+    }
+    /**
+     * Upload Single File
+     *
+     * @param uploadId ID of File to Upload
+     */
+    upload(uploadId) {
+        this.uploadService.control({ action: 'upload', uploadId });
     }
+    /**
+     * Upload all queued Files
+     */
+    uploadAll() {
+        if (this.IsStateToUpload() === true) {
+            this.uploadService.control({ action: 'upload' });
+        }
+    }
+    /**
+     * Validiert das Upload Control
+     * @param c Control das validiert werden soll
+     */
+    validateData(c) {
+        let error = null;
+        if (this.isrequired) {
+            error = Validation.required(this.validationmessagerequired, this.validationmessagesummaryrequired)(c);
+        }
+        return error;
+    }
+    // #endregion Public Abstract Methods
+    // #region Private Methods
     UpdateFileCount() {
         // HACK: Add addition property to FormControl. Can be fixed if solution for ticket: https://github.com/angular/angular/issues/19686
         if (this.ngControl) {
@@ -7640,140 +7728,127 @@ class SacUploadBase extends SacBaseModelControl {
         }
     }
     /**
-     * Icon for browse button
+     * Returns the number of uploaded files
      */
-    get IconBrowse() {
-        return this.iconService.UploadComponentBrowseIcon;
+    UploadedFileCount() {
+        return this.uploads.filter((itm) => itm.status === 'complete').length;
     }
     /**
-     * icon for upload button
+     * Prüft ob die Dateierweiterung gültig ist
+     *
+     * @param filename Dateiname
      */
-    get IconUpload() {
-        return this.iconService.UploadComponentUploadIcon;
+    isExtensionValid(filename) {
+        if (this._allowedtypes === '*') {
+            return true;
+        }
+        let isValid = false;
+        const extensions = this._allowedtypes.split(',');
+        extensions.forEach((itm) => {
+            if (filename.toLowerCase().endsWith(itm.toLowerCase())) {
+                isValid = true;
+            }
+        });
+        return isValid;
     }
     /**
-     * icon for delete buttons
+     * Prüft ob das File nicht zu gross ist.
+     *
+     * @param filesize Max File Size in Bytes
      */
-    get IconDelete() {
-        return this.iconService.UploadComponentDeleteIcon;
+    isFileSizeValid(filesize) {
+        if (this.maxfilesize === 0) {
+            return true;
+        }
+        return this.maxfilesize >= filesize;
     }
     /**
-     * icon for pause buttons
+     * Setzt die erlaubten Datentypen für den Upload
+     *
+     * @param types Erlaubte File Extensions
      */
-    get IconPause() {
-        return this.iconService.UploadComponentPauseIcon;
+    setAllowedTypes(types) {
+        // Prüfen UploadInput bereits geladen, ist NULL wenn Extension im Markup nach NgModel gesetzt wird.
+        if (this.uploadInput && this.uploadInput.nativeElement) {
+            this.renderer.setAttribute(this.uploadInput.nativeElement, 'accept', types);
+        }
+        this.options.allowedTypes = types;
     }
     /**
-     * icon for continous buttons
+     * Setzt den Upload Endpoit
+     * @param url Register URI
      */
-    get IconContinue() {
-        return this.iconService.UploadComponentContinueIcon;
+    setEndpoint(url) {
+        this.options.endpoint = url;
     }
 }
-SacUploadBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacUploadBase, deps: [{ token: SacFormCommon }, { token: i0.Injector }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-SacUploadBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: SacUploadBase, inputs: { validationmessagerequired: "validationmessagerequired", validationmessagesummaryrequired: "validationmessagesummaryrequired", allowedtypes: "allowedtypes", autoupload: "autoupload", enablepause: "enablepause", maxfilesize: "maxfilesize", isrequired: "isrequired", endpoint: "endpoint" }, outputs: { onfileerror: "onfileerror" }, viewQueries: [{ propertyName: "uploadInput", first: true, predicate: ["files"], descendants: true, static: true }], usesInheritance: true, ngImport: i0 });
+SacUploadBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacUploadBase, deps: [{ token: SacFormLayoutCommon }, { token: i0.Injector }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+SacUploadBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: SacUploadBase, inputs: { isrequired: "isrequired", maxfilesize: "maxfilesize", validationmessagerequired: "validationmessagerequired", validationmessagesummaryrequired: "validationmessagesummaryrequired", allowedtypes: "allowedtypes", autoupload: "autoupload", enablepause: "enablepause", endpoint: "endpoint" }, outputs: { onfileerror: "onfileerror" }, viewQueries: [{ propertyName: "uploadInput", first: true, predicate: ["files"], descendants: true, static: true }], usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacUploadBase, decorators: [{
             type: Directive
-        }], ctorParameters: function () { return [{ type: SacFormCommon }, { type: i0.Injector }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { validationmessagerequired: [{
+        }], ctorParameters: function () { return [{ type: SacFormLayoutCommon }, { type: i0.Injector }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { uploadInput: [{
+                type: ViewChild,
+                args: ['files', { static: true }]
+            }], isrequired: [{
+                type: Input
+            }], maxfilesize: [{
+                type: Input
+            }], validationmessagerequired: [{
                 type: Input
             }], validationmessagesummaryrequired: [{
                 type: Input
+            }], onfileerror: [{
+                type: Output
             }], allowedtypes: [{
                 type: Input
             }], autoupload: [{
                 type: Input
             }], enablepause: [{
                 type: Input
-            }], maxfilesize: [{
-                type: Input
-            }], isrequired: [{
-                type: Input
             }], endpoint: [{
                 type: Input
-            }], onfileerror: [{
-                type: Output
-            }], uploadInput: [{
-                type: ViewChild,
-                args: ['files', { static: true }]
-            }] } });
-
+            }] } });
 /**
- * Upload Komponente für ein einzelnes File
+ * Klasse für den Upload einer Datei in der Upload Component
  */
-class SacUploadSingleCommon extends SacUploadBase {
-    constructor() {
-        super(...arguments);
-        /**
-         * Label für Browse Button
-         */
-        this.buttonbrowse = 'Browse';
-        /**
-         * Label für Upload Button
-         */
-        this.buttonupload = 'Upload';
-    }
-    /**
-     * Macht keine Validierung in diesem Control
-     *
-     * @param file File das hinzugefügt wurde
-     */
-    CustomAddValidation(file) {
-        return true;
-    }
+class SacUploadFile {
+    // #endregion Properties
+    // #region Constructors
     /**
-     * Setzt die File ID des hochgeladen Files in das Model
-     *
-     * @param file ID des Files
+     * Konstruktor
+     * @param ufile Upload Status
      */
-    SetUploadValue(file) {
-        if (file === null) {
-            super.setValue(null);
-        }
-        else {
-            if (file.response !== undefined &&
-                file.response !== null &&
-                file.response.documentid !== null &&
-                file.response.documentid !== undefined) {
-                super.setValue(file.response.documentid);
-            }
-            else {
-                super.setValue(file.uploadId);
-            }
-        }
+    constructor(ufile) {
+        this.uploadId = ufile.uploadId;
+        this.name = ufile.name;
+        this.progress = ufile.progress;
+        this.status = ufile.status;
+        this.documentid = null;
     }
-}
-SacUploadSingleCommon.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacUploadSingleCommon, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-SacUploadSingleCommon.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: SacUploadSingleCommon, inputs: { buttonbrowse: "buttonbrowse", buttonupload: "buttonupload" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacUploadSingleCommon, decorators: [{
-            type: Directive
-        }], propDecorators: { buttonbrowse: [{
-                type: Input
-            }], buttonupload: [{
-                type: Input
-            }] } });
+}
 
 /**
- * Upload Componente für mehrere Files
+ * Upload Komponente für ein einzelnes File
  */
-class SacUploadMultipleCommon extends SacUploadBase {
+class SacDropzoneMultipleCommon extends SacUploadBase {
     constructor() {
         super(...arguments);
         /**
-         * Max. Files die hochgeladen werden können. 0 deaktiviert das Limit
+         * Property wenn Drag Event aktiv ist (Maus über Zone)
          */
-        this.maxfiles = 0;
+        this.active = false;
         /**
-         * Min. Files die hochgeladen werden müssen. 0 deaktiviert das Limit
+         * Höhe des Upload Controls
          */
-        this.minfiles = 0;
+        this.uploadheight = null;
         /**
-         * Label für Browse Button
+         * Max. Anzahl Files die hochgeladen werden können
          */
-        this.buttonbrowse = 'Browse';
+        this.maxfiles = 0;
         /**
-         * Label für Upload Button
+         * Min. Anzahl Files die hochgeladen werden müssen
          */
-        this.buttonupload = 'Upload';
+        this.minfiles = 0;
         /**
          * Resource Key für Validation Message Required bei Control
          */
@@ -7783,6 +7858,49 @@ class SacUploadMultipleCommon extends SacUploadBase {
          */
         this.validationmessagesummaryminfiles = 'VALIDATION_ERROR_SUMMARY_FILESMIN';
     }
+    /**
+     * Ervent wenn das Control initialisert wird
+     */
+    ngOnInit() {
+        super.ngOnInit();
+        this.autoupload = true;
+    }
+    /**
+     * Methode für Drag and Drop von Files
+     * @param event Drag Event
+     */
+    dropHandler(event) {
+        if (event.dataTransfer &&
+            event.dataTransfer.files &&
+            event.dataTransfer.files.item(0)) {
+            event.stopPropagation();
+            event.preventDefault();
+            this.active = false;
+            this.uploadService.handleFiles(event.dataTransfer.files);
+        }
+    }
+    /**
+     * Methode wenn Drag in die Zone eintritt
+     * @param event DragEnter Event
+     */
+    onDragOver(event) {
+        if (event.dataTransfer &&
+            event.dataTransfer.files &&
+            event.dataTransfer.types.every((itm) => itm === 'Files') &&
+            event.dataTransfer.types.length > 0) {
+            event.dataTransfer.dropEffect = 'copy';
+            event.stopPropagation();
+            event.preventDefault();
+            this.active = true;
+        }
+    }
+    /**
+     * Methode wenn Drag die Zone verlässt
+     * @param event DragLeave Event
+     */
+    onDragLeave(event) {
+        this.active = false;
+    }
     /**
      * Prüft ob die max. Files in der Queue nicht überschritten werden
      *
@@ -7854,17 +7972,15 @@ class SacUploadMultipleCommon extends SacUploadBase {
         return error;
     }
 }
-SacUploadMultipleCommon.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacUploadMultipleCommon, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-SacUploadMultipleCommon.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: SacUploadMultipleCommon, inputs: { maxfiles: "maxfiles", minfiles: "minfiles", buttonbrowse: "buttonbrowse", buttonupload: "buttonupload", validationmessageminfiles: "validationmessageminfiles", validationmessagesummaryminfiles: "validationmessagesummaryminfiles" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacUploadMultipleCommon, decorators: [{
+SacDropzoneMultipleCommon.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacDropzoneMultipleCommon, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+SacDropzoneMultipleCommon.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: SacDropzoneMultipleCommon, inputs: { uploadheight: "uploadheight", maxfiles: "maxfiles", minfiles: "minfiles", validationmessageminfiles: "validationmessageminfiles", validationmessagesummaryminfiles: "validationmessagesummaryminfiles" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacDropzoneMultipleCommon, decorators: [{
             type: Directive
-        }], propDecorators: { maxfiles: [{
-                type: Input
-            }], minfiles: [{
+        }], propDecorators: { uploadheight: [{
                 type: Input
-            }], buttonbrowse: [{
+            }], maxfiles: [{
                 type: Input
-            }], buttonupload: [{
+            }], minfiles: [{
                 type: Input
             }], validationmessageminfiles: [{
                 type: Input
@@ -7976,27 +8092,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
             }] } });
 
 /**
- * Upload Komponente für ein einzelnes File
+ * Upload Componente für mehrere Files
  */
-class SacDropzoneMultipleCommon extends SacUploadBase {
+class SacUploadMultipleCommon extends SacUploadBase {
     constructor() {
         super(...arguments);
         /**
-         * Property wenn Drag Event aktiv ist (Maus über Zone)
+         * Max. Files die hochgeladen werden können. 0 deaktiviert das Limit
          */
-        this.active = false;
+        this.maxfiles = 0;
         /**
-         * Höhe des Upload Controls
+         * Min. Files die hochgeladen werden müssen. 0 deaktiviert das Limit
          */
-        this.uploadheight = null;
+        this.minfiles = 0;
         /**
-         * Max. Anzahl Files die hochgeladen werden können
+         * Label für Browse Button
          */
-        this.maxfiles = 0;
+        this.buttonbrowse = 'Browse';
         /**
-         * Min. Anzahl Files die hochgeladen werden müssen
+         * Label für Upload Button
          */
-        this.minfiles = 0;
+        this.buttonupload = 'Upload';
         /**
          * Resource Key für Validation Message Required bei Control
          */
@@ -8006,49 +8122,6 @@ class SacDropzoneMultipleCommon extends SacUploadBase {
          */
         this.validationmessagesummaryminfiles = 'VALIDATION_ERROR_SUMMARY_FILESMIN';
     }
-    /**
-     * Ervent wenn das Control initialisert wird
-     */
-    ngOnInit() {
-        super.ngOnInit();
-        this.autoupload = true;
-    }
-    /**
-     * Methode für Drag and Drop von Files
-     * @param event Drag Event
-     */
-    dropHandler(event) {
-        if (event.dataTransfer &&
-            event.dataTransfer.files &&
-            event.dataTransfer.files.item(0)) {
-            event.stopPropagation();
-            event.preventDefault();
-            this.active = false;
-            this.uploadService.handleFiles(event.dataTransfer.files);
-        }
-    }
-    /**
-     * Methode wenn Drag in die Zone eintritt
-     * @param event DragEnter Event
-     */
-    onDragOver(event) {
-        if (event.dataTransfer &&
-            event.dataTransfer.files &&
-            event.dataTransfer.types.every((itm) => itm === 'Files') &&
-            event.dataTransfer.types.length > 0) {
-            event.dataTransfer.dropEffect = 'copy';
-            event.stopPropagation();
-            event.preventDefault();
-            this.active = true;
-        }
-    }
-    /**
-     * Methode wenn Drag die Zone verlässt
-     * @param event DragLeave Event
-     */
-    onDragLeave(event) {
-        this.active = false;
-    }
     /**
      * Prüft ob die max. Files in der Queue nicht überschritten werden
      *
@@ -8120,32 +8193,90 @@ class SacDropzoneMultipleCommon extends SacUploadBase {
         return error;
     }
 }
-SacDropzoneMultipleCommon.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacDropzoneMultipleCommon, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-SacDropzoneMultipleCommon.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: SacDropzoneMultipleCommon, inputs: { uploadheight: "uploadheight", maxfiles: "maxfiles", minfiles: "minfiles", validationmessageminfiles: "validationmessageminfiles", validationmessagesummaryminfiles: "validationmessagesummaryminfiles" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacDropzoneMultipleCommon, decorators: [{
+SacUploadMultipleCommon.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacUploadMultipleCommon, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+SacUploadMultipleCommon.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: SacUploadMultipleCommon, inputs: { maxfiles: "maxfiles", minfiles: "minfiles", buttonbrowse: "buttonbrowse", buttonupload: "buttonupload", validationmessageminfiles: "validationmessageminfiles", validationmessagesummaryminfiles: "validationmessagesummaryminfiles" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacUploadMultipleCommon, decorators: [{
             type: Directive
-        }], propDecorators: { uploadheight: [{
-                type: Input
-            }], maxfiles: [{
+        }], propDecorators: { maxfiles: [{
                 type: Input
             }], minfiles: [{
                 type: Input
+            }], buttonbrowse: [{
+                type: Input
+            }], buttonupload: [{
+                type: Input
             }], validationmessageminfiles: [{
                 type: Input
             }], validationmessagesummaryminfiles: [{
                 type: Input
             }] } });
 
+/**
+ * Upload Komponente für ein einzelnes File
+ */
+class SacUploadSingleCommon extends SacUploadBase {
+    constructor() {
+        super(...arguments);
+        /**
+         * Label für Browse Button
+         */
+        this.buttonbrowse = 'Browse';
+        /**
+         * Label für Upload Button
+         */
+        this.buttonupload = 'Upload';
+    }
+    /**
+     * Macht keine Validierung in diesem Control
+     *
+     * @param file File das hinzugefügt wurde
+     */
+    CustomAddValidation(file) {
+        return true;
+    }
+    /**
+     * Setzt die File ID des hochgeladen Files in das Model
+     *
+     * @param file ID des Files
+     */
+    SetUploadValue(file) {
+        if (file === null) {
+            super.setValue(null);
+        }
+        else {
+            if (file.response !== undefined &&
+                file.response !== null &&
+                file.response.documentid !== null &&
+                file.response.documentid !== undefined) {
+                super.setValue(file.response.documentid);
+            }
+            else {
+                super.setValue(file.uploadId);
+            }
+        }
+    }
+}
+SacUploadSingleCommon.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacUploadSingleCommon, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+SacUploadSingleCommon.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: SacUploadSingleCommon, inputs: { buttonbrowse: "buttonbrowse", buttonupload: "buttonupload" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacUploadSingleCommon, decorators: [{
+            type: Directive
+        }], propDecorators: { buttonbrowse: [{
+                type: Input
+            }], buttonupload: [{
+                type: Input
+            }] } });
+
 /**
  * Base Klasse für Multi Language Input Control
  */
 class SacMultilanguageInputCommon extends SacInputBase {
     /**
-     * Konstruktor
-     * Inject des Formulars
+     * Constructor
+     * @param formlayout SacFormLayoutCommon to define scoped layout settings
+     * @param injector Injector for injecting services
      */
-    constructor(parent, injector) {
-        super(parent, injector);
+    constructor(formlayout, injector) {
+        super(formlayout, injector);
         /**
          * Max länge an Zeichen für Eingabefeld
          */
@@ -8335,12 +8466,12 @@ class SacMultilanguageInputCommon extends SacInputBase {
         return error;
     }
 }
-SacMultilanguageInputCommon.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacMultilanguageInputCommon, deps: [{ token: SacFormCommon, host: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
+SacMultilanguageInputCommon.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacMultilanguageInputCommon, deps: [{ token: SacFormLayoutCommon, host: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
 SacMultilanguageInputCommon.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: SacMultilanguageInputCommon, inputs: { maxlength: "maxlength", controlwidth: "controlwidth", requiredany: "requiredany", validationmessagerequired: "validationmessagerequired", validationmessagesummaryrequired: "validationmessagesummaryrequired", validationmessagerequiredany: "validationmessagerequiredany", validationmessagesummaryrequiredany: "validationmessagesummaryrequiredany" }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacMultilanguageInputCommon, decorators: [{
             type: Directive
         }], ctorParameters: function () {
-        return [{ type: SacFormCommon, decorators: [{
+        return [{ type: SacFormLayoutCommon, decorators: [{
                         type: Host
                     }] }, { type: i0.Injector }];
     }, propDecorators: { maxlength: [{
@@ -8364,11 +8495,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
  */
 class SacMultilanguageInputAreaCommon extends SacInputBase {
     /**
-     * Konstruktor
-     * Inject des Formulars
+     * Constructor
+     * @param formlayout SacFormLayoutCommon to define scoped layout settings
+     * @param injector Injector for injecting services
      */
-    constructor(parent, injector) {
-        super(parent, injector);
+    constructor(formlayout, injector) {
+        super(formlayout, injector);
         /**
          * Max länge an Zeichen für Eingabefeld
          */
@@ -8528,141 +8660,61 @@ class SacMultilanguageInputAreaCommon extends SacInputBase {
                     this.value[itm.IsoCode] === null) {
                     found = true;
                     return;
-                }
-            });
-        }
-        return found;
-    }
-    /**
-     * Methode validiert, ob der Wert den gegebenen Kriterien entspricht
-     * @param c Controls das validiert wird
-     */
-    validateData(c) {
-        let error = null;
-        if (error === null &&
-            c.value !== null &&
-            c.value !== undefined &&
-            c.value !== '' &&
-            this.isrequired !== undefined &&
-            this.isrequired === true) {
-            error = Validation.multilanguageRequired(this.languages, this.validationmessagerequired, this.validationmessagesummaryrequired)(c);
-        }
-        if (error === null &&
-            c.value !== null &&
-            c.value !== undefined &&
-            c.value !== '' &&
-            this.requiredany !== undefined &&
-            this.requiredany === true) {
-            error = Validation.multilanguageRequiredAny(this.languages, this.validationmessagerequiredany, this.validationmessagesummaryrequiredany)(c);
-        }
-        return error;
-    }
-}
-SacMultilanguageInputAreaCommon.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacMultilanguageInputAreaCommon, deps: [{ token: SacFormCommon, host: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
-SacMultilanguageInputAreaCommon.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: SacMultilanguageInputAreaCommon, inputs: { maxlength: "maxlength", rows: "rows", controlwidth: "controlwidth", requiredany: "requiredany", validationmessagerequired: "validationmessagerequired", validationmessagesummaryrequired: "validationmessagesummaryrequired", validationmessagerequiredany: "validationmessagerequiredany", validationmessagesummaryrequiredany: "validationmessagesummaryrequiredany" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacMultilanguageInputAreaCommon, decorators: [{
-            type: Directive
-        }], ctorParameters: function () {
-        return [{ type: SacFormCommon, decorators: [{
-                        type: Host
-                    }] }, { type: i0.Injector }];
-    }, propDecorators: { maxlength: [{
-                type: Input
-            }], rows: [{
-                type: Input
-            }], controlwidth: [{
-                type: Input
-            }], requiredany: [{
-                type: Input
-            }], validationmessagerequired: [{
-                type: Input
-            }], validationmessagesummaryrequired: [{
-                type: Input
-            }], validationmessagerequiredany: [{
-                type: Input
-            }], validationmessagesummaryrequiredany: [{
-                type: Input
-            }] } });
-
-/**
- * Basis Klasse für Confirm Service implementation
- */
-class ServiceConfirmCommon {
-    /**
-     * Konstruktor
-     * @param appRef ApplicationRef zum Anhängen des Dialogs an den Content
-     * @param injector Injector um die Instanz zu erzeuge
-     */
-    constructor(appRef, injector) {
-        this.appRef = appRef;
-        this.injector = injector;
-        //#region Properties
-        /**
-         * Referenz auf IConfirm Instanz.
-         */
-        this.component = null;
-        this.localisationService = injector.get(SACLOCALISATION_SERVICE, new SacDefaultLocalisationService());
-        this.iconService = injector.get(SACICON_SERVICE, new SacDefaultIconService());
-    }
-    /**
-     * Erzeugt eine Instanz für den Dialog
-     */
-    CreateInstance() {
-        // ComponentFactory aus Service laden
-        const factory = this.GetComponentFactory();
-        // Instanz der Komponente erzeugen und an die View anhängen
-        this.component = factory.create(this.injector);
-        this.appRef.attachView(this.component.hostView);
-    }
-    /**
-     * Entfernt die Instanz des Dialogs
-     */
-    DestroyInstance() {
-        // Dialog aus View entfernen und Komponenten löschen
-        this.appRef.detachView(this.component.hostView);
-        this.component.destroy();
-    }
-    /**
-     * Zeigt den Dialog an
-     */
-    OpenDialog() {
-        const dialog = this.component.instance;
-        dialog.show();
-        return dialog;
-    }
-    /**
-     * Blendet den Dialog aus
-     */
-    CloseDialog() {
-        const dialog = this.component.instance;
-        dialog.hide();
+                }
+            });
+        }
+        return found;
     }
     /**
-     * Interne Methode für die Implementation des Confirm Dialogs. Steuert die Feedbacks, die Erzeugung und Anzeige des Dialogs
+     * Methode validiert, ob der Wert den gegebenen Kriterien entspricht
+     * @param c Controls das validiert wird
      */
-    Confirm() {
-        // Dialog erzeugen
-        this.CreateInstance();
-        const instance = this.OpenDialog();
-        // Konfiguration der Dialog Instanz durch Service Implementation zulassen
-        this.ConfigureDialog(instance);
-        // Event Emitter für Confirmation im Service. Event Emitter Asynchron initialiseren
-        const confirmTask = new EventEmitter(true);
-        // Callback wenn Dialog bestätigt wurde
-        instance.onconfirm.subscribe((value) => {
-            // Dialog entfernen
-            this.CloseDialog();
-            // Emit auf Service auslösen
-            confirmTask.emit(value);
-        }, (err) => {
-            // Do nothing on Error
-        }, () => {
-            this.DestroyInstance();
-        });
-        // Confirm Emitter für Result zurückgeben
-        return confirmTask;
+    validateData(c) {
+        let error = null;
+        if (error === null &&
+            c.value !== null &&
+            c.value !== undefined &&
+            c.value !== '' &&
+            this.isrequired !== undefined &&
+            this.isrequired === true) {
+            error = Validation.multilanguageRequired(this.languages, this.validationmessagerequired, this.validationmessagesummaryrequired)(c);
+        }
+        if (error === null &&
+            c.value !== null &&
+            c.value !== undefined &&
+            c.value !== '' &&
+            this.requiredany !== undefined &&
+            this.requiredany === true) {
+            error = Validation.multilanguageRequiredAny(this.languages, this.validationmessagerequiredany, this.validationmessagesummaryrequiredany)(c);
+        }
+        return error;
     }
-}
+}
+SacMultilanguageInputAreaCommon.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacMultilanguageInputAreaCommon, deps: [{ token: SacFormLayoutCommon, host: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
+SacMultilanguageInputAreaCommon.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: SacMultilanguageInputAreaCommon, inputs: { maxlength: "maxlength", rows: "rows", controlwidth: "controlwidth", requiredany: "requiredany", validationmessagerequired: "validationmessagerequired", validationmessagesummaryrequired: "validationmessagesummaryrequired", validationmessagerequiredany: "validationmessagerequiredany", validationmessagesummaryrequiredany: "validationmessagesummaryrequiredany" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacMultilanguageInputAreaCommon, decorators: [{
+            type: Directive
+        }], ctorParameters: function () {
+        return [{ type: SacFormLayoutCommon, decorators: [{
+                        type: Host
+                    }] }, { type: i0.Injector }];
+    }, propDecorators: { maxlength: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }], controlwidth: [{
+                type: Input
+            }], requiredany: [{
+                type: Input
+            }], validationmessagerequired: [{
+                type: Input
+            }], validationmessagesummaryrequired: [{
+                type: Input
+            }], validationmessagerequiredany: [{
+                type: Input
+            }], validationmessagesummaryrequiredany: [{
+                type: Input
+            }] } });
 
 /**
  * Basis Klasse für Confirm Dialog
@@ -8765,6 +8817,86 @@ class SacConfirmButton {
     }
 }
 
+/**
+ * Basis Klasse für Confirm Service implementation
+ */
+class ServiceConfirmCommon {
+    /**
+     * Konstruktor
+     * @param appRef ApplicationRef zum Anhängen des Dialogs an den Content
+     * @param injector Injector um die Instanz zu erzeuge
+     */
+    constructor(appRef, injector) {
+        this.appRef = appRef;
+        this.injector = injector;
+        //#region Properties
+        /**
+         * Referenz auf IConfirm Instanz.
+         */
+        this.component = null;
+        this.localisationService = injector.get(SACLOCALISATION_SERVICE, new SacDefaultLocalisationService());
+        this.iconService = injector.get(SACICON_SERVICE, new SacDefaultIconService());
+    }
+    /**
+     * Erzeugt eine Instanz für den Dialog
+     */
+    CreateInstance() {
+        // ComponentFactory aus Service laden
+        const factory = this.GetComponentFactory();
+        // Instanz der Komponente erzeugen und an die View anhängen
+        this.component = factory.create(this.injector);
+        this.appRef.attachView(this.component.hostView);
+    }
+    /**
+     * Entfernt die Instanz des Dialogs
+     */
+    DestroyInstance() {
+        // Dialog aus View entfernen und Komponenten löschen
+        this.appRef.detachView(this.component.hostView);
+        this.component.destroy();
+    }
+    /**
+     * Zeigt den Dialog an
+     */
+    OpenDialog() {
+        const dialog = this.component.instance;
+        dialog.show();
+        return dialog;
+    }
+    /**
+     * Blendet den Dialog aus
+     */
+    CloseDialog() {
+        const dialog = this.component.instance;
+        dialog.hide();
+    }
+    /**
+     * Interne Methode für die Implementation des Confirm Dialogs. Steuert die Feedbacks, die Erzeugung und Anzeige des Dialogs
+     */
+    Confirm() {
+        // Dialog erzeugen
+        this.CreateInstance();
+        const instance = this.OpenDialog();
+        // Konfiguration der Dialog Instanz durch Service Implementation zulassen
+        this.ConfigureDialog(instance);
+        // Event Emitter für Confirmation im Service. Event Emitter Asynchron initialiseren
+        const confirmTask = new EventEmitter(true);
+        // Callback wenn Dialog bestätigt wurde
+        instance.onconfirm.subscribe((value) => {
+            // Dialog entfernen
+            this.CloseDialog();
+            // Emit auf Service auslösen
+            confirmTask.emit(value);
+        }, (err) => {
+            // Do nothing on Error
+        }, () => {
+            this.DestroyInstance();
+        });
+        // Confirm Emitter für Result zurückgeben
+        return confirmTask;
+    }
+}
+
 /**
  * Position Utility Klasse
  * @see https://github.com/ng-bootstrap/ng-bootstrap/blob/master/src/util/positioning.ts
@@ -9070,12 +9202,14 @@ function positionElements(hostElement, targetElement, placement, appendToBody, b
  * Base Context Menu Anchor Component für Open/Close Event
  */
 class SacContextmenuAnchorCommon {
+    // #endregion Properties
+    // #region Constructors
     /**
      * Konstruktor
-     * @param _elementRef Refernz auf das HTML welcher als Anker für das Context Menü verwendet wird
+     * @param elementRef Refernz auf das HTML welcher als Anker für das Context Menü verwendet wird
      */
-    constructor(_elementRef) {
-        this.nativeElement = _elementRef.nativeElement;
+    constructor(elementRef) {
+        this.nativeElement = elementRef.nativeElement;
     }
 }
 SacContextmenuAnchorCommon.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacContextmenuAnchorCommon, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
@@ -9088,12 +9222,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
  * Common Marker Klasse für den Menü Container
  */
 class SacContextMenuContrainerCommon {
+    // #endregion Properties
+    // #region Constructors
     /**
      * Konstruktor
-     * @param _elementRef Referenz auf das HTML Element mit der Marker Direktive
+     * @param elementRef Referenz auf das HTML Element mit der Marker Direktive
      */
-    constructor(_elementRef) {
-        this.nativeElement = _elementRef.nativeElement;
+    constructor(elementRef) {
+        this.nativeElement = elementRef.nativeElement;
     }
 }
 SacContextMenuContrainerCommon.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacContextMenuContrainerCommon, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
@@ -9106,35 +9242,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
  * Base Context Menü Element. Die Logik wurde aus NG-BOOTSTRAP übernommen.
  */
 class SacContextmenuCommon {
+    // #endregion Properties
+    // #region Constructors
     /**
      * Konstruktor
-     * @param _document HTML Document Element
-     * @param _ngZone Angular Zone Service
-     * @param _elementRef HTML Element des aktuellen Controls
-     * @param _renderer Angular Rendering Service
-     * @param _injector injector to resolve the icon service
-     */
-    constructor(_document, _ngZone, _elementRef, _renderer, _injector) {
-        this._document = _document;
-        this._ngZone = _ngZone;
-        this._elementRef = _elementRef;
-        this._renderer = _renderer;
+     * @param document HTML Document Element
+     * @param ngZone Angular Zone Service
+     * @param elementRef HTML Element des aktuellen Controls
+     * @param renderer Angular Rendering Service
+     * @param injector injector to resolve the icon service
+     */
+    constructor(document, ngZone, elementRef, renderer, injector) {
+        this.document = document;
+        this.ngZone = ngZone;
+        this.elementRef = elementRef;
+        this.renderer = renderer;
         /**
          * Body HTML Element
          */
         this.bodyContainer = null;
         /**
-         * Definiert ob das Dropdown offen ist.
+         * Container an welchem die Position ausgerichtet wird. Aktuell wird nun Body Supported
          */
-        this.isopen = false;
+        this.container = 'body';
         /**
          * Extra CSS Klassen für das Control
          */
         this.cssclass = '';
         /**
-         * Container an welchem die Position ausgerichtet wird. Aktuell wird nun Body Supported
+         * Definiert ob das Dropdown offen ist.
          */
-        this.container = 'body';
+        this.isopen = false;
         /**
          * The preferred placement of the dropdown.
          *
@@ -9154,11 +9292,21 @@ class SacContextmenuCommon {
             'top-left',
             'top-right',
         ];
-        this.zoneSubscription = this._ngZone.onStable.subscribe(() => {
+        this.zoneSubscription = this.ngZone.onStable.subscribe(() => {
             this._positionMenu();
         });
-        this.iconService = _injector.get(SACICON_SERVICE, new SacDefaultIconService());
+        this.iconService = injector.get(SACICON_SERVICE, new SacDefaultIconService());
+    }
+    // #endregion Constructors
+    // #region Public Getters And Setters
+    /**
+     * icon for default context menü button
+     */
+    get IconContextMenu() {
+        return this.iconService.ContextMenuOpenIcon;
     }
+    // #endregion Public Getters And Setters
+    // #region Public Methods
     /**
      * HostListener um das Dropdown zu schliessen wenn nicht auf das Element geklickt wird.
      */
@@ -9170,12 +9318,26 @@ class SacContextmenuCommon {
             this.close();
         }
     }
+    /**
+     * Schliesst das Dropdown
+     */
+    close() {
+        this._resetContainer();
+        this.isopen = false;
+    }
     /**
      * Event wenn Component entfernt wird.
      */
     ngOnDestroy() {
         this.zoneSubscription.unsubscribe();
     }
+    /**
+     * Öffnet das Dropdown / Zeigt das Menü an.
+     */
+    open() {
+        this._applyContainer(this.container);
+        this.isopen = true;
+    }
     /**
      * Toggle von Dropdown
      */
@@ -9187,26 +9349,8 @@ class SacContextmenuCommon {
             this.open();
         }
     }
-    /**
-     * Öffnet das Dropdown / Zeigt das Menü an.
-     */
-    open() {
-        this._applyContainer(this.container);
-        this.isopen = true;
-    }
-    /**
-     * Schliesst das Dropdown
-     */
-    close() {
-        this._resetContainer();
-        this.isopen = false;
-    }
-    /**
-     * icon for default context menü button
-     */
-    get IconContextMenu() {
-        return this.iconService.ContextMenuOpenIcon;
-    }
+    // #endregion Public Methods
+    // #region Protected Methods
     /**
      * Setzt die Position des Menüs im Markup
      */
@@ -9216,23 +9360,8 @@ class SacContextmenuCommon {
             positionElements(anchor.nativeElement, this.bodyContainer || this._menu.nativeElement, this.placement, this.container === 'body');
         }
     }
-    /**
-     * Setzt die CSS Klassen auf dem Menü Container auf den Standard zurück
-     */
-    _resetContainer() {
-        const renderer = this._renderer;
-        if (this._menu) {
-            const dropdownElement = this._elementRef.nativeElement;
-            const dropdownMenuElement = this._menu.nativeElement;
-            renderer.appendChild(dropdownElement, dropdownMenuElement);
-            renderer.removeStyle(dropdownMenuElement, 'position');
-            renderer.removeStyle(dropdownMenuElement, 'transform');
-        }
-        if (this.bodyContainer) {
-            renderer.removeChild(this._document.body, this.bodyContainer);
-            this.bodyContainer = null;
-        }
-    }
+    // #endregion Protected Methods
+    // #region Private Methods
     /**
      * Setzt die Position des Menüs innerhalb der Seite. Die Ausrichtung passiert innerhalb der Seite
      * damit das Menü innerhalb eines Dialogs sauber funktionioniert.
@@ -9242,7 +9371,7 @@ class SacContextmenuCommon {
         // Reset Classes on Container
         this._resetContainer();
         if (container === 'body') {
-            const renderer = this._renderer;
+            const renderer = this.renderer;
             const dropdownMenuElement = this._menu.nativeElement;
             const bodyContainer = (this.bodyContainer =
                 this.bodyContainer || renderer.createElement('div'));
@@ -9251,12 +9380,29 @@ class SacContextmenuCommon {
             renderer.setStyle(dropdownMenuElement, 'position', 'static');
             renderer.setStyle(bodyContainer, 'z-index', '1050');
             renderer.appendChild(bodyContainer, dropdownMenuElement);
-            renderer.appendChild(this._document.body, bodyContainer);
+            renderer.appendChild(this.document.body, bodyContainer);
+        }
+    }
+    /**
+     * Setzt die CSS Klassen auf dem Menü Container auf den Standard zurück
+     */
+    _resetContainer() {
+        const renderer = this.renderer;
+        if (this._menu) {
+            const dropdownElement = this.elementRef.nativeElement;
+            const dropdownMenuElement = this._menu.nativeElement;
+            renderer.appendChild(dropdownElement, dropdownMenuElement);
+            renderer.removeStyle(dropdownMenuElement, 'position');
+            renderer.removeStyle(dropdownMenuElement, 'transform');
+        }
+        if (this.bodyContainer) {
+            renderer.removeChild(this.document.body, this.bodyContainer);
+            this.bodyContainer = null;
         }
     }
 }
 SacContextmenuCommon.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacContextmenuCommon, deps: [{ token: DOCUMENT }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
-SacContextmenuCommon.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: SacContextmenuCommon, inputs: { isopen: "isopen", cssclass: "cssclass", buttontemplate: "buttontemplate", container: "container", placement: "placement" }, host: { listeners: { "document:click": "onClick($event.target)" } }, queries: [{ propertyName: "_anchorTemplate", first: true, predicate: SacContextmenuAnchorCommon, descendants: true }], viewQueries: [{ propertyName: "_anchor", first: true, predicate: SacContextmenuAnchorCommon, descendants: true }, { propertyName: "_menu", first: true, predicate: SacContextMenuContrainerCommon, descendants: true }], ngImport: i0 });
+SacContextmenuCommon.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: SacContextmenuCommon, inputs: { buttontemplate: "buttontemplate", container: "container", cssclass: "cssclass", isopen: "isopen", placement: "placement" }, host: { listeners: { "document:click": "onClick($event.target)" } }, queries: [{ propertyName: "_anchorTemplate", first: true, predicate: SacContextmenuAnchorCommon, descendants: true }], viewQueries: [{ propertyName: "_anchor", first: true, predicate: SacContextmenuAnchorCommon, descendants: true }, { propertyName: "_menu", first: true, predicate: SacContextMenuContrainerCommon, descendants: true }], ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SacContextmenuCommon, decorators: [{
             type: Directive
         }], ctorParameters: function () {
@@ -9264,23 +9410,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                         type: Inject,
                         args: [DOCUMENT]
                     }] }, { type: i0.NgZone }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.Injector }];
-    }, propDecorators: { _anchor: [{
-                type: ViewChild,
-                args: [SacContextmenuAnchorCommon, { static: false }]
-            }], _anchorTemplate: [{
+    }, propDecorators: { _anchorTemplate: [{
                 type: ContentChild,
                 args: [SacContextmenuAnchorCommon, { static: false }]
+            }], _anchor: [{
+                type: ViewChild,
+                args: [SacContextmenuAnchorCommon, { static: false }]
             }], _menu: [{
                 type: ViewChild,
                 args: [SacContextMenuContrainerCommon, { static: false }]
-            }], isopen: [{
-                type: Input
-            }], cssclass: [{
-                type: Input
             }], buttontemplate: [{
                 type: Input
             }], container: [{
                 type: Input
+            }], cssclass: [{
+                type: Input
+            }], isopen: [{
+                type: Input
             }], placement: [{
                 type: Input
             }], onClick: [{
@@ -9979,5 +10125,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { GridResponse, IconType, Interpolation, LanguageModel, PagerData, PagerRequest, Positioning, SACCommonListboxOptionModule, SACFILEBROWSER_SERVICE, SACICON_SERVICE, SACLANGUAGE_SERVICE, SACLOCALISATION_SERVICE, SacAbstractFileBrowserService, SacAbstractIconService, SacAbstractLanguageService, SacAbstractLocalisationService, SacButtonCommon, SacCheckboxCommon, SacConfirmButton, SacConfirmCommon, SacContextMenuContrainerCommon, SacContextmenuAnchorCommon, SacContextmenuCommon, SacContextmenuItemButtonCommon, SacContextmenuItemCommon, SacDateCommon, SacDateSelectorCommon, SacDateTimeCommon, SacDialogCommon, SacDropdownCommon, SacDropdownOptionCommon, SacDropzoneMultipleCommon, SacDropzoneSingleCommon, SacFileBrowserCommon, SacFormCommon, SacGridButtonCommon, SacGridColumnActionCommon, SacGridColumnBaseCommon, SacGridColumnCommon, SacGridCommon, SacGridImageCommon, SacInputAreaCommon, SacInputCommon, SacInputCurrencyCommon, SacInputDecimalCommon, SacInputEmailCommon, SacInputIntegerCommon, SacInputPasswordCommon, SacInputSearchCommon, SacListboxCommon, SacListboxOptionCommon, SacMultilanguageInputAreaCommon, SacMultilanguageInputCommon, SacPagingCommon, SacRadiobuttonCommon, SacRadiobuttonsCommon, SacStaticFormContainerCommon, SacStaticLabelCommon, SacTabCommon, SacTabItemCommon, SacTimeCommon, SacTinyMceCommon, SacTooltipCommon, SacTreeItemActionCommon, SacTreeViewChildCommon, SacTreeViewCommon, SacUploadFile, SacUploadMultipleCommon, SacUploadSingleCommon, SacValidationSummaryCommon, SacWizardCommon, SacWizardItemCommon, ServiceConfirmCommon, SortDescriptor, SortOrder, TooltipPosition, Validation, ValidationErrorItem, convertToBoolean, convertToNumber, isDefined, mapToObject, positionElements, positionService };
+export { GridResponse, IconType, Interpolation, LanguageModel, PagerData, PagerRequest, Positioning, SACCommonListboxOptionModule, SACFILEBROWSER_SERVICE, SACICON_SERVICE, SACLANGUAGE_SERVICE, SACLOCALISATION_SERVICE, SacAbstractFileBrowserService, SacAbstractIconService, SacAbstractLanguageService, SacAbstractLocalisationService, SacButtonCommon, SacCheckboxCommon, SacConfirmButton, SacConfirmCommon, SacContextMenuContrainerCommon, SacContextmenuAnchorCommon, SacContextmenuCommon, SacContextmenuItemButtonCommon, SacContextmenuItemCommon, SacDateCommon, SacDateSelectorCommon, SacDateTimeCommon, SacDialogCommon, SacDropdownCommon, SacDropdownOptionCommon, SacDropzoneMultipleCommon, SacDropzoneSingleCommon, SacFileBrowserCommon, SacFormCommon, SacFormLayoutCommon, SacGridButtonCommon, SacGridColumnActionCommon, SacGridColumnBaseCommon, SacGridColumnCommon, SacGridCommon, SacGridImageCommon, SacInputAreaCommon, SacInputCommon, SacInputCurrencyCommon, SacInputDecimalCommon, SacInputEmailCommon, SacInputIntegerCommon, SacInputPasswordCommon, SacInputSearchCommon, SacListboxCommon, SacListboxOptionCommon, SacMultilanguageInputAreaCommon, SacMultilanguageInputCommon, SacPagingCommon, SacRadiobuttonCommon, SacRadiobuttonsCommon, SacStaticFormContainerCommon, SacStaticLabelCommon, SacTabCommon, SacTabItemCommon, SacTimeCommon, SacTinyMceCommon, SacTooltipCommon, SacTreeItemActionCommon, SacTreeViewChildCommon, SacTreeViewCommon, SacUploadFile, SacUploadMultipleCommon, SacUploadSingleCommon, SacValidationSummaryCommon, SacWizardCommon, SacWizardItemCommon, ServiceConfirmCommon, SortDescriptor, SortOrder, TooltipPosition, Validation, ValidationErrorItem, convertToBoolean, convertToNumber, isDefined, mapToObject, positionElements, positionService };
 //# sourceMappingURL=simpleangularcontrols-sac-common.mjs.map