@simpleangularcontrols/sac-bootstrap5 16.0.0-rc.3 → 16.0.0-rc.5

package/fesm2022/simpleangularcontrols-sac-bootstrap5.mjs

@@ -6,8 +6,9 @@ import { HttpClientModule } from '@angular/common/http';
 import * as i1$2 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule, ControlContainer, NgForm } from '@angular/forms';
 import * as i1 from '@simpleangularcontrols/sac-common';
-import { SacButtonCommon, SacDialogCommon, SacConfirmCommon, ServiceConfirmCommon, isDefined, SacConfirmButton, SacContextmenuAnchorCommon, SacContextMenuContrainerCommon, SacContextmenuCommon, SacContextmenuItemButtonCommon, SacContextmenuItemCommon, SacFormLayoutCommon, SacDropzoneMultipleCommon, SacFileBrowserCommon, SacCheckboxCommon, SacRadiobuttonsCommon, SacRadiobuttonCommon, SacDateSelectorCommon, SacDateCommon, SacDateTimeCommon, SacTimeCommon, SacFormCommon, SacPagingCommon, SacGridCommon, SacGridButtonCommon, SacGridColumnCommon, SacGridColumnBaseCommon, SacGridColumnActionCommon, SacGridImageCommon, SacInputCommon, SacInputEmailCommon, SacInputAreaCommon, SacInputCurrencyCommon, SacInputDecimalCommon, SacInputIntegerCommon, SacInputPasswordCommon, SacInputSearchCommon, SacDropdownCommon, SacDropdownOptionCommon, SacListboxCommon, SacListboxOptionCommon, SacMultilanguageInputCommon, IconType, SacMultilanguageInputAreaCommon, SacStaticLabelCommon, SacStaticFormContainerCommon, SacTabItemCommon, SacTabCommon, SacTinyMceCommon, SacDropzoneSingleCommon, SacUploadSingleCommon, SacUploadMultipleCommon, SacValidationSummaryCommon, SacWizardItemCommon, SacWizardCommon } from '@simpleangularcontrols/sac-common';
-import { Observable, forkJoin } from 'rxjs';
+import { SacButtonCommon, SacDialogCommon, SacConfirmCommon, ServiceConfirmCommon, isDefined, SacConfirmButton, SacContextmenuAnchorCommon, SacContextMenuContrainerCommon, SacContextmenuCommon, SacContextmenuItemButtonCommon, SacContextmenuItemCommon, ControlHeight, SacFormLayoutCommon, SacDropzoneMultipleCommon, SacFileBrowserCommon, SacCheckboxCommon, SacRadiobuttonsCommon, SacRadiobuttonCommon, SacDateSelectorCommon, SacDateCommon, SacDateTimeCommon, SacTimeCommon, SacFormCommon, SacPagingCommon, SacGridCommon, SacGridButtonCommon, SacGridColumnCommon, SacGridColumnBaseCommon, SacGridColumnActionCommon, SacGridImageCommon, SacInputCommon, SacInputEmailCommon, SacInputAreaCommon, SacInputCurrencyCommon, SacInputDecimalCommon, SacInputIntegerCommon, SacInputPasswordCommon, SacInputSearchCommon, SacDropdownCommon, SacDropdownOptionCommon, SacListboxCommon, SacListboxOptionCommon, SacMultilanguageInputCommon, IconType, SacMultilanguageInputAreaCommon, SacStaticLabelCommon, SacStaticFormContainerCommon, SacTabItemCommon, SacTabCommon, SacTinyMceCommon, SacDropzoneSingleCommon, SacUploadSingleCommon, SacUploadMultipleCommon, SacValidationSummaryCommon, SacWizardItemCommon, SacWizardCommon } from '@simpleangularcontrols/sac-common';
+import { forkJoin, Observable } from 'rxjs';
+import { take } from 'rxjs/operators';
 import { IMaskDirective, IMaskModule } from 'angular-imask';
 import * as moment_ from 'moment';
 import { EditorComponent } from '@tinymce/tinymce-angular';
@@ -19,11 +20,11 @@ import { EditorComponent } from '@tinymce/tinymce-angular';
  */
 class SacButtonComponent extends SacButtonCommon {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SacButtonComponent, isStandalone: true, selector: "sac-button", usesInheritance: true, ngImport: i0, template: "<button [id]=\"name\" type=\"button\" class=\"btn d-flex justify-content-center align-items-center\" [attr.disabled]=\"_isdisabled ? 'disabled' : null\" (click)=\"buttonClick()\"\r\n        [class.btn-primary]=\"role === 'primary'\"\r\n        [class.btn-secondary]=\"role === 'secondary' || role === 'default'\"\r\n        [class.btn-success]=\"role === 'success'\"\r\n        [class.btn-danger]=\"role === 'danger'\"\r\n        [class.btn-warning]=\"role === 'warning'\"\r\n        [class.btn-info]=\"role === 'info'\"\r\n        [class.btn-link]=\"role === 'link'\">\r\n  <i *ngIf=\"icon !== ''\" [ngClass]=\"icon\" class=\"me-2\"></i>{{text}}\r\n</button>\r\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SacButtonComponent, isStandalone: true, selector: "sac-button", usesInheritance: true, ngImport: i0, template: "<button\r\n  [id]=\"name\"\r\n  type=\"button\"\r\n  class=\"btn d-flex justify-content-center align-items-center\"\r\n  [attr.disabled]=\"_isdisabled || isloading ? 'disabled' : null\"\r\n  (click)=\"buttonClick()\"\r\n  [class.btn-primary]=\"role === 'primary'\"\r\n  [class.btn-secondary]=\"role === 'secondary' || role === 'default'\"\r\n  [class.btn-success]=\"role === 'success'\"\r\n  [class.btn-danger]=\"role === 'danger'\"\r\n  [class.btn-warning]=\"role === 'warning'\"\r\n  [class.btn-info]=\"role === 'info'\"\r\n  [class.btn-link]=\"role === 'link'\"\r\n>\r\n  <span\r\n    *ngIf=\"isloading\"\r\n    class=\"spinner-border spinner-border-sm me-2\"\r\n    role=\"status\"\r\n    aria-hidden=\"true\"\r\n  ></span>\r\n  <i *ngIf=\"!isloading && icon !== ''\" [ngClass]=\"icon\" [class.me-2]=\"text\"></i\r\n  >{{text}}\r\n</button>\r\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sac-button', standalone: true, imports: [NgIf, NgClass], template: "<button [id]=\"name\" type=\"button\" class=\"btn d-flex justify-content-center align-items-center\" [attr.disabled]=\"_isdisabled ? 'disabled' : null\" (click)=\"buttonClick()\"\r\n        [class.btn-primary]=\"role === 'primary'\"\r\n        [class.btn-secondary]=\"role === 'secondary' || role === 'default'\"\r\n        [class.btn-success]=\"role === 'success'\"\r\n        [class.btn-danger]=\"role === 'danger'\"\r\n        [class.btn-warning]=\"role === 'warning'\"\r\n        [class.btn-info]=\"role === 'info'\"\r\n        [class.btn-link]=\"role === 'link'\">\r\n  <i *ngIf=\"icon !== ''\" [ngClass]=\"icon\" class=\"me-2\"></i>{{text}}\r\n</button>\r\n" }]
+            args: [{ selector: 'sac-button', standalone: true, imports: [NgIf, NgClass], template: "<button\r\n  [id]=\"name\"\r\n  type=\"button\"\r\n  class=\"btn d-flex justify-content-center align-items-center\"\r\n  [attr.disabled]=\"_isdisabled || isloading ? 'disabled' : null\"\r\n  (click)=\"buttonClick()\"\r\n  [class.btn-primary]=\"role === 'primary'\"\r\n  [class.btn-secondary]=\"role === 'secondary' || role === 'default'\"\r\n  [class.btn-success]=\"role === 'success'\"\r\n  [class.btn-danger]=\"role === 'danger'\"\r\n  [class.btn-warning]=\"role === 'warning'\"\r\n  [class.btn-info]=\"role === 'info'\"\r\n  [class.btn-link]=\"role === 'link'\"\r\n>\r\n  <span\r\n    *ngIf=\"isloading\"\r\n    class=\"spinner-border spinner-border-sm me-2\"\r\n    role=\"status\"\r\n    aria-hidden=\"true\"\r\n  ></span>\r\n  <i *ngIf=\"!isloading && icon !== ''\" [ngClass]=\"icon\" [class.me-2]=\"text\"></i\r\n  >{{text}}\r\n</button>\r\n" }]
         }] });
 
 /**
@@ -69,7 +70,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  */
 class SacConfirmComponent extends SacConfirmCommon {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacConfirmComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SacConfirmComponent, isStandalone: true, selector: "sac-confirm", usesInheritance: true, ngImport: i0, template: "<sac-dialog\r\n  [(isvisible)]=\"isvisible\"\r\n  [title]=\"title\"\r\n  [allowesc]=\"false\"\r\n  [closebutton]=\"false\"\r\n  dialogsize=\"small\"\r\n>\r\n  <div dialogbody>\r\n    <div class=\"d-flex align-items-center\">\r\n      <div class=\"me-2\">\r\n        <img\r\n          [attr.src]=\"image\"\r\n          class=\"align-self-center mr-3\"\r\n          *ngIf=\"hasImage()\"\r\n        />\r\n      </div>\r\n      <div class=\"flex-grow-1\">{{message}}</div>\r\n    </div>\r\n  </div>\r\n  <ng-container dialogfooter>\r\n    <ng-container *ngFor=\"let button of buttons\">\r\n      <sac-button\r\n        [name]=\"button.key\"\r\n        [text]=\"button.text\"\r\n        (clicked)=\"confirm(button.key)\"\r\n      ></sac-button>\r\n    </ng-container>\r\n  </ng-container>\r\n</sac-dialog>\r\n", dependencies: [{ kind: "component", type: SacDialogComponent, selector: "sac-dialog" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SacButtonComponent, selector: "sac-button" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SacConfirmComponent, isStandalone: true, selector: "sac-confirm", usesInheritance: true, ngImport: i0, template: "<sac-dialog\r\n  [(isvisible)]=\"isvisible\"\r\n  [title]=\"title\"\r\n  [allowesc]=\"false\"\r\n  [closebutton]=\"false\"\r\n  dialogsize=\"small\"\r\n>\r\n  <div dialogbody>\r\n    <div class=\"d-flex align-items-center\">\r\n      <div class=\"me-2\">\r\n        <img\r\n          [attr.src]=\"image\"\r\n          class=\"align-self-center mr-3\"\r\n          *ngIf=\"hasImage()\"\r\n        />\r\n      </div>\r\n      <div class=\"flex-grow-1\">{{message}}</div>\r\n    </div>\r\n  </div>\r\n  <ng-container dialogfooter>\r\n    <ng-container *ngFor=\"let button of buttons\">\r\n      <sac-button\r\n        [name]=\"button.key\"\r\n        [text]=\"button.text\"\r\n        [role]=\"button.role\"\r\n        (clicked)=\"confirm(button.key)\"\r\n      ></sac-button>\r\n    </ng-container>\r\n  </ng-container>\r\n</sac-dialog>\r\n", dependencies: [{ kind: "component", type: SacDialogComponent, selector: "sac-dialog" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SacButtonComponent, selector: "sac-button" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacConfirmComponent, decorators: [{
             type: Component,
@@ -78,7 +79,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         NgIf,
                         NgFor,
                         SacButtonComponent,
-                    ], template: "<sac-dialog\r\n  [(isvisible)]=\"isvisible\"\r\n  [title]=\"title\"\r\n  [allowesc]=\"false\"\r\n  [closebutton]=\"false\"\r\n  dialogsize=\"small\"\r\n>\r\n  <div dialogbody>\r\n    <div class=\"d-flex align-items-center\">\r\n      <div class=\"me-2\">\r\n        <img\r\n          [attr.src]=\"image\"\r\n          class=\"align-self-center mr-3\"\r\n          *ngIf=\"hasImage()\"\r\n        />\r\n      </div>\r\n      <div class=\"flex-grow-1\">{{message}}</div>\r\n    </div>\r\n  </div>\r\n  <ng-container dialogfooter>\r\n    <ng-container *ngFor=\"let button of buttons\">\r\n      <sac-button\r\n        [name]=\"button.key\"\r\n        [text]=\"button.text\"\r\n        (clicked)=\"confirm(button.key)\"\r\n      ></sac-button>\r\n    </ng-container>\r\n  </ng-container>\r\n</sac-dialog>\r\n" }]
+                    ], template: "<sac-dialog\r\n  [(isvisible)]=\"isvisible\"\r\n  [title]=\"title\"\r\n  [allowesc]=\"false\"\r\n  [closebutton]=\"false\"\r\n  dialogsize=\"small\"\r\n>\r\n  <div dialogbody>\r\n    <div class=\"d-flex align-items-center\">\r\n      <div class=\"me-2\">\r\n        <img\r\n          [attr.src]=\"image\"\r\n          class=\"align-self-center mr-3\"\r\n          *ngIf=\"hasImage()\"\r\n        />\r\n      </div>\r\n      <div class=\"flex-grow-1\">{{message}}</div>\r\n    </div>\r\n  </div>\r\n  <ng-container dialogfooter>\r\n    <ng-container *ngFor=\"let button of buttons\">\r\n      <sac-button\r\n        [name]=\"button.key\"\r\n        [text]=\"button.text\"\r\n        [role]=\"button.role\"\r\n        (clicked)=\"confirm(button.key)\"\r\n      ></sac-button>\r\n    </ng-container>\r\n  </ng-container>\r\n</sac-dialog>\r\n" }]
         }] });
 
 /**
@@ -96,6 +97,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * confirmService.ConfirmMessage('titel', 'frage', buttons).subscribe(action => { // Action Code });
  */
 class ServiceConfirm extends ServiceConfirmCommon {
+    // #endregion Properties
+    // #region Constructors
     /**
      * Konstruktor
      * @param componentFactoryResolver Component Factory Resolver Instanz
@@ -105,25 +108,22 @@ class ServiceConfirm extends ServiceConfirmCommon {
     constructor(componentFactoryResolver, appRef, injector) {
         super(appRef, injector);
         this.componentFactoryResolver = componentFactoryResolver;
+        // #region Properties
         /**
-         * Titel der im Dialog angezeigt werden soll.
+         * Collection von Buttons die angezeigt werden müssen.
          */
-        this.title = '';
+        this.buttons = [];
         /**
          * Message die in Dialog angezeigt werden soll.
          */
         this.message = '';
         /**
-         * Collection von Buttons die angezeigt werden müssen.
+         * Titel der im Dialog angezeigt werden soll.
          */
-        this.buttons = [];
-    }
-    /**
-     * Erzeugen einer Component Factory für einen Dialog
-     */
-    GetComponentFactory() {
-        return this.componentFactoryResolver.resolveComponentFactory(SacConfirmComponent);
+        this.title = '';
     }
+    // #endregion Constructors
+    // #region Public Methods
     /**
      * Confirm Dialog anzeigen
      * @param message Nachricht die angezeigt werden soll.
@@ -134,16 +134,30 @@ class ServiceConfirm extends ServiceConfirmCommon {
         this.message = message;
         // Default Buttons setzen, wenn keine Buttons angegeben sind
         if (!isDefined(buttons)) {
-            // TODO: Text von Localisation Service beziehen
             this.buttons = [];
-            this.buttons.push(new SacConfirmButton('yes', 'Ja'));
-            this.buttons.push(new SacConfirmButton('no', 'Nein'));
+            forkJoin({
+                button_yes: this.localisationService.GetString(this.validationKeyService.ConfirmDefaultButtonYes),
+                button_no: this.localisationService.GetString(this.validationKeyService.ConfirmDefaultButtonNo),
+            })
+                .pipe(take(1))
+                .subscribe((texte) => {
+                this.buttons.push(new SacConfirmButton('yes', texte.button_yes, 'primary'));
+                this.buttons.push(new SacConfirmButton('no', texte.button_no));
+            });
         }
         else {
             this.buttons = buttons;
         }
         return super.Confirm();
     }
+    /**
+     * Erzeugen einer Component Factory für einen Dialog
+     */
+    GetComponentFactory() {
+        return this.componentFactoryResolver.resolveComponentFactory(SacConfirmComponent);
+    }
+    // #endregion Public Methods
+    // #region Protected Methods
     /**
      * Konfiguration des Dialogs
      * @param instance Instanz eines SacConfirm Dialogs
@@ -363,6 +377,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
 
+class SacToLabelHeightPipe {
+    // #region Public Methods
+    /**
+     * Returns the CSS class that defines the height for the control
+     * @param value ControlHeight value or null
+     */
+    transform(value) {
+        // Return default value
+        if (!value) {
+            return '';
+        }
+        switch (value) {
+            case ControlHeight.Small:
+                return 'col-form-label-sm';
+            case ControlHeight.Large:
+                return 'col-form-label-lg';
+            default:
+                return '';
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacToLabelHeightPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SacToLabelHeightPipe, isStandalone: true, name: "toLabelHeight" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacToLabelHeightPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'toLabelHeight',
+                    standalone: true,
+                }]
+        }] });
+
 class SacToLabelWidthCssPipe {
     // #region Public Methods
     /**
@@ -451,7 +496,7 @@ class SacDropzoneMultipleComponent extends SacDropzoneMultipleCommon {
                 multi: true,
                 useExisting: forwardRef(() => SacDropzoneMultipleComponent),
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}_label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"dropzone d-flex justify-content-center position-relative\"\r\n      (drop)=\"dropHandler($event)\"\r\n      (dragover)=\"onDragOver($event)\"\r\n      (dragleave)=\"onDragLeave($event)\"\r\n      [class.active]=\"active\"\r\n      [style.min-height]=\"uploadheight\"\r\n      [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n    >\r\n      <div\r\n        class=\"content d-flex justify-content-center\"\r\n        *ngIf=\"uploads.length === 0\"\r\n      >\r\n        <div class=\"align-self-center text-center\">\r\n          <div\r\n            [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n          >\r\n            <ng-content></ng-content>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div\r\n        class=\"content d-flex justify-content-center align-items-center w-50 my-3\"\r\n        *ngIf=\"uploads.length > 0\"\r\n      >\r\n        <div class=\"flex-fill progress-container\">\r\n          <div\r\n            class=\"dropzone-uploadstates\"\r\n            [class.mt-1]=\"i > 0\"\r\n            *ngFor=\"let file of uploads; let i = index\"\r\n          >\r\n            <div class=\"input-group upload-component upload-component-multiple\">\r\n              <div class=\"form-control upload-progress border-secondary\">\r\n                <div class=\"progress\">\r\n                  <div\r\n                    class=\"progress-bar\"\r\n                    [class.progress-bar-success]=\"file.progress===100\"\r\n                    role=\"progressbar\"\r\n                    [attr.aria-valuenow]=\"file.progress\"\r\n                    aria-valuemin=\"0\"\r\n                    aria-valuemax=\"100\"\r\n                    [style.width.%]=\"file.progress\"\r\n                  >\r\n                    <span class=\"progress-text text-dark\">{{ file.name }}</span>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <a\r\n                class=\"btn\"\r\n                (click)=\"cancel(file.uploadId)\"\r\n                [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n              >\r\n                <span [class]=\"IconDelete\"></span>\r\n              </a>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <input\r\n        #files\r\n        multiple\r\n        id=\"{{ name }}_uploadinput\"\r\n        type=\"file\"\r\n        class=\"custom-file-input\"\r\n        (click)=\"files.value = ''\"\r\n        (uploadxState)=\"onUpload($event)\"\r\n        [disabled]=\"HasQueueItem()\"\r\n      />\r\n    </div>\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".dropzone{min-height:9.75rem;border:.125rem dashed lightgray;border-radius:.5rem;background:transparent}.dropzone.is-invalid{border-color:var(--bs-form-invalid-border-color)}.dropzone .content{position:relative;inset:0}.dropzone .content .is-invalid{color:var(--bs-form-invalid-border-color)}.dropzone .content .progress-container{min-width:50%;z-index:100}.dropzone .content .dropzone-uploadstates .upload-progress{padding:0}.dropzone .content .dropzone-uploadstates .upload-progress .progress{height:100%;border-top-right-radius:0;border-bottom-right-radius:0}.dropzone .content .dropzone-uploadstates .upload-progress .progress .progress-text{left:0;right:0;position:absolute}.dropzone .custom-file-input{min-height:100%;height:unset;width:100%;opacity:0;position:absolute}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}_label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"dropzone d-flex justify-content-center position-relative\"\r\n      (drop)=\"dropHandler($event)\"\r\n      (dragover)=\"onDragOver($event)\"\r\n      (dragleave)=\"onDragLeave($event)\"\r\n      [class.active]=\"active\"\r\n      [style.min-height]=\"uploadheight\"\r\n      [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n    >\r\n      <div\r\n        class=\"content d-flex justify-content-center\"\r\n        *ngIf=\"uploads.length === 0\"\r\n      >\r\n        <div class=\"align-self-center text-center\">\r\n          <div\r\n            [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n          >\r\n            <ng-content></ng-content>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div\r\n        class=\"content d-flex justify-content-center align-items-center w-50 my-3\"\r\n        *ngIf=\"uploads.length > 0\"\r\n      >\r\n        <div class=\"flex-fill progress-container\">\r\n          <div\r\n            class=\"dropzone-uploadstates\"\r\n            [class.mt-1]=\"i > 0\"\r\n            *ngFor=\"let file of uploads; let i = index\"\r\n          >\r\n            <div\r\n              class=\"input-group upload-component upload-component-multiple\"\r\n              [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n              [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n            >\r\n              <div class=\"form-control upload-progress border-secondary\">\r\n                <div class=\"progress\">\r\n                  <div\r\n                    class=\"progress-bar\"\r\n                    [class.progress-bar-success]=\"file.progress===100\"\r\n                    role=\"progressbar\"\r\n                    [attr.aria-valuenow]=\"file.progress\"\r\n                    aria-valuemin=\"0\"\r\n                    aria-valuemax=\"100\"\r\n                    [style.width.%]=\"file.progress\"\r\n                  >\r\n                    <span class=\"progress-text text-dark\">{{ file.name }}</span>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <a\r\n                class=\"btn\"\r\n                (click)=\"cancel(file.uploadId)\"\r\n                [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n              >\r\n                <span [class]=\"IconDelete\"></span>\r\n              </a>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <input\r\n        #files\r\n        multiple\r\n        id=\"{{ name }}_uploadinput\"\r\n        type=\"file\"\r\n        class=\"custom-file-input\"\r\n        (click)=\"files.value = ''\"\r\n        (uploadxState)=\"onUpload($event)\"\r\n        [disabled]=\"HasQueueItem()\"\r\n      />\r\n    </div>\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".dropzone{min-height:9.75rem;border:.125rem dashed lightgray;border-radius:.5rem;background:transparent}.dropzone.is-invalid{border-color:var(--bs-form-invalid-border-color)}.dropzone .content{position:relative;inset:0}.dropzone .content .is-invalid{color:var(--bs-form-invalid-border-color)}.dropzone .content .progress-container{min-width:50%;z-index:100}.dropzone .content .dropzone-uploadstates .upload-progress{padding:0}.dropzone .content .dropzone-uploadstates .upload-progress .progress{height:100%;border-top-right-radius:0;border-bottom-right-radius:0}.dropzone .content .dropzone-uploadstates .upload-progress .progress .progress-text{left:0;right:0;position:absolute}.dropzone .custom-file-input{min-height:100%;height:unset;width:100%;opacity:0;position:absolute}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToLabelHeightPipe, name: "toLabelHeight" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacDropzoneMultipleComponent, decorators: [{
             type: Component,
@@ -473,7 +518,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         AsyncPipe,
                         SacToControlWidthCssPipe,
                         SacToLabelWidthCssPipe,
-                    ], template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}_label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"dropzone d-flex justify-content-center position-relative\"\r\n      (drop)=\"dropHandler($event)\"\r\n      (dragover)=\"onDragOver($event)\"\r\n      (dragleave)=\"onDragLeave($event)\"\r\n      [class.active]=\"active\"\r\n      [style.min-height]=\"uploadheight\"\r\n      [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n    >\r\n      <div\r\n        class=\"content d-flex justify-content-center\"\r\n        *ngIf=\"uploads.length === 0\"\r\n      >\r\n        <div class=\"align-self-center text-center\">\r\n          <div\r\n            [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n          >\r\n            <ng-content></ng-content>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div\r\n        class=\"content d-flex justify-content-center align-items-center w-50 my-3\"\r\n        *ngIf=\"uploads.length > 0\"\r\n      >\r\n        <div class=\"flex-fill progress-container\">\r\n          <div\r\n            class=\"dropzone-uploadstates\"\r\n            [class.mt-1]=\"i > 0\"\r\n            *ngFor=\"let file of uploads; let i = index\"\r\n          >\r\n            <div class=\"input-group upload-component upload-component-multiple\">\r\n              <div class=\"form-control upload-progress border-secondary\">\r\n                <div class=\"progress\">\r\n                  <div\r\n                    class=\"progress-bar\"\r\n                    [class.progress-bar-success]=\"file.progress===100\"\r\n                    role=\"progressbar\"\r\n                    [attr.aria-valuenow]=\"file.progress\"\r\n                    aria-valuemin=\"0\"\r\n                    aria-valuemax=\"100\"\r\n                    [style.width.%]=\"file.progress\"\r\n                  >\r\n                    <span class=\"progress-text text-dark\">{{ file.name }}</span>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <a\r\n                class=\"btn\"\r\n                (click)=\"cancel(file.uploadId)\"\r\n                [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n              >\r\n                <span [class]=\"IconDelete\"></span>\r\n              </a>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <input\r\n        #files\r\n        multiple\r\n        id=\"{{ name }}_uploadinput\"\r\n        type=\"file\"\r\n        class=\"custom-file-input\"\r\n        (click)=\"files.value = ''\"\r\n        (uploadxState)=\"onUpload($event)\"\r\n        [disabled]=\"HasQueueItem()\"\r\n      />\r\n    </div>\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".dropzone{min-height:9.75rem;border:.125rem dashed lightgray;border-radius:.5rem;background:transparent}.dropzone.is-invalid{border-color:var(--bs-form-invalid-border-color)}.dropzone .content{position:relative;inset:0}.dropzone .content .is-invalid{color:var(--bs-form-invalid-border-color)}.dropzone .content .progress-container{min-width:50%;z-index:100}.dropzone .content .dropzone-uploadstates .upload-progress{padding:0}.dropzone .content .dropzone-uploadstates .upload-progress .progress{height:100%;border-top-right-radius:0;border-bottom-right-radius:0}.dropzone .content .dropzone-uploadstates .upload-progress .progress .progress-text{left:0;right:0;position:absolute}.dropzone .custom-file-input{min-height:100%;height:unset;width:100%;opacity:0;position:absolute}\n"] }]
+                        SacToLabelHeightPipe,
+                    ], template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}_label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"dropzone d-flex justify-content-center position-relative\"\r\n      (drop)=\"dropHandler($event)\"\r\n      (dragover)=\"onDragOver($event)\"\r\n      (dragleave)=\"onDragLeave($event)\"\r\n      [class.active]=\"active\"\r\n      [style.min-height]=\"uploadheight\"\r\n      [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n    >\r\n      <div\r\n        class=\"content d-flex justify-content-center\"\r\n        *ngIf=\"uploads.length === 0\"\r\n      >\r\n        <div class=\"align-self-center text-center\">\r\n          <div\r\n            [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n          >\r\n            <ng-content></ng-content>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div\r\n        class=\"content d-flex justify-content-center align-items-center w-50 my-3\"\r\n        *ngIf=\"uploads.length > 0\"\r\n      >\r\n        <div class=\"flex-fill progress-container\">\r\n          <div\r\n            class=\"dropzone-uploadstates\"\r\n            [class.mt-1]=\"i > 0\"\r\n            *ngFor=\"let file of uploads; let i = index\"\r\n          >\r\n            <div\r\n              class=\"input-group upload-component upload-component-multiple\"\r\n              [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n              [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n            >\r\n              <div class=\"form-control upload-progress border-secondary\">\r\n                <div class=\"progress\">\r\n                  <div\r\n                    class=\"progress-bar\"\r\n                    [class.progress-bar-success]=\"file.progress===100\"\r\n                    role=\"progressbar\"\r\n                    [attr.aria-valuenow]=\"file.progress\"\r\n                    aria-valuemin=\"0\"\r\n                    aria-valuemax=\"100\"\r\n                    [style.width.%]=\"file.progress\"\r\n                  >\r\n                    <span class=\"progress-text text-dark\">{{ file.name }}</span>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <a\r\n                class=\"btn\"\r\n                (click)=\"cancel(file.uploadId)\"\r\n                [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n              >\r\n                <span [class]=\"IconDelete\"></span>\r\n              </a>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <input\r\n        #files\r\n        multiple\r\n        id=\"{{ name }}_uploadinput\"\r\n        type=\"file\"\r\n        class=\"custom-file-input\"\r\n        (click)=\"files.value = ''\"\r\n        (uploadxState)=\"onUpload($event)\"\r\n        [disabled]=\"HasQueueItem()\"\r\n      />\r\n    </div>\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".dropzone{min-height:9.75rem;border:.125rem dashed lightgray;border-radius:.5rem;background:transparent}.dropzone.is-invalid{border-color:var(--bs-form-invalid-border-color)}.dropzone .content{position:relative;inset:0}.dropzone .content .is-invalid{color:var(--bs-form-invalid-border-color)}.dropzone .content .progress-container{min-width:50%;z-index:100}.dropzone .content .dropzone-uploadstates .upload-progress{padding:0}.dropzone .content .dropzone-uploadstates .upload-progress .progress{height:100%;border-top-right-radius:0;border-bottom-right-radius:0}.dropzone .content .dropzone-uploadstates .upload-progress .progress .progress-text{left:0;right:0;position:absolute}.dropzone .custom-file-input{min-height:100%;height:unset;width:100%;opacity:0;position:absolute}\n"] }]
         }], ctorParameters: function () { return [{ type: SacFormLayoutDirective, decorators: [{
                     type: Host
                 }, {
@@ -506,8 +552,8 @@ class SacBrowserComponent extends SacFileBrowserCommon {
     confirmDeleteFile(file) {
         return new Observable((observer) => {
             forkJoin({
-                title: this.lngResourceService.GetString('FILEBROWSER_DELETE'),
-                message: this.lngResourceService.GetString('FILEBROWSER_CONFIRM_DELETEFILE'),
+                title: this.lngResourceService.GetString(this.validationKeyService.FilebrowserButtonDelete),
+                message: this.lngResourceService.GetString(this.validationKeyService.FilebrowserButtonDelete),
             }).subscribe((text) => {
                 this.confirmService
                     .ConfirmMessage(text.title, text.message)
@@ -531,8 +577,8 @@ class SacBrowserComponent extends SacFileBrowserCommon {
     confirmDeleteNode(node) {
         return new Observable((observer) => {
             forkJoin({
-                title: this.lngResourceService.GetString('FILEBROWSER_DELETE'),
-                message: this.lngResourceService.GetString('FILEBROWSER_CONFIRM_DELETEFOLDER'),
+                title: this.lngResourceService.GetString(this.validationKeyService.FilebrowserButtonDelete),
+                message: this.lngResourceService.GetString(this.validationKeyService.FilebrowserConfirmTextDeleteFolder),
             }).subscribe((text) => {
                 this.confirmService
                     .ConfirmMessage(text.title, text.message)
@@ -567,7 +613,7 @@ class SacBrowserComponent extends SacFileBrowserCommon {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacBrowserComponent, deps: [{ token: i1$1.HttpClient }, { token: i0.Injector }, { token: ServiceConfirm }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SacBrowserComponent, isStandalone: true, selector: "sac-filebrowser", providers: [ServiceConfirm], viewQueries: [{ propertyName: "uploadComponent", first: true, predicate: SacDropzoneMultipleComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\r\n  <div class=\"col-12 col-md-5 col-lg-4\">\r\n    <ul class=\"list-group list-group-flush\">\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"treeItem\"\r\n        [ngTemplateOutletContext]=\"{node: rootNode, deep: 0}\"\r\n      ></ng-template>\r\n    </ul>\r\n\r\n    <ng-template #treeItem let-node=\"node\" let-deep=\"deep\">\r\n      <li\r\n        class=\"list-group-item py-1 px-2 d-flex align-items-center\"\r\n        [class.list-group-item-secondary]=\"node === selectedNode\"\r\n        (click)=\"selectNode(node)\"\r\n        style=\"cursor: pointer\"\r\n      >\r\n        <div class=\"mx-3\" *ngFor=\"let i of count(deep)\"></div>\r\n        <div\r\n          (click)=\"switchExpandNode(node);$event.stopPropagation();\"\r\n          class=\"me-2\"\r\n          [ngClass]=\"node.ChildNodes.length === 0 ? iconFolderEmpty: (!node.IsExpanded && node.ChildNodes.length > 0 ? iconFolderCollabsed : (node.IsExpanded && node.ChildNodes.length > 0 ? iconFolderOpen : ''))\"\r\n        ></div>\r\n        <ng-container *ngIf=\"!node.IsEditMode\">\r\n          <div class=\"flex-grow-1\">{{ node.Name }}</div>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"node.IsEditMode\">\r\n          <div class=\"flex-grow-1\" ngForm>\r\n            <input\r\n              name=\"editFolder\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"node.Name\"\r\n              [ngModelOptions]=\"{updateOn: 'blur'}\"\r\n              (ngModelChange)=\"renameNode(node, $event)\"\r\n              (keydown.enter)=\"$event.target.blur();false;\"\r\n              (blur)=\"renameNode(node, null)\"\r\n              (click)=\"$event.stopPropagation()\"\r\n            />\r\n          </div>\r\n        </ng-container>\r\n        <div class=\"flex-shrink-0\">\r\n          <a\r\n            *ngIf=\"node.Path !== '/' && allowfolderrename\"\r\n            class=\"btn btn-sm btn-link text-secondary\"\r\n            (click)=\"editNode(node);$event.stopPropagation();\"\r\n          >\r\n            <i [class]=\"iconEdit\"></i>\r\n          </a>\r\n          <sac-contextmenu cssclass=\"d-inline-block\">\r\n            <sac-contextmenubutton\r\n              *ngIf=\"allowfoldercreate\"\r\n              text=\"{{ lngResourceService.GetString('FILEBROWSER_NEWFOLDER') | async }}\"\r\n              [icon]=\"iconFolderNew\"\r\n              (clicked)=\"newNode(node)\"\r\n            ></sac-contextmenubutton>\r\n            <sac-contextmenubutton\r\n              *ngIf=\"node.Path !== '/' && allowfolderdelete\"\r\n              text=\"{{ lngResourceService.GetString('FILEBROWSER_DELETE') | async }}\"\r\n              [icon]=\"iconDelete\"\r\n              (clicked)=\"deleteNode(node)\"\r\n            ></sac-contextmenubutton>\r\n            <sac-contextmenusplitter\r\n              *ngIf=\"allowfoldercreate || (node.Path !== '/' && allowfolderdelete)\"\r\n            ></sac-contextmenusplitter>\r\n            <sac-contextmenubutton\r\n              text=\"{{ lngResourceService.GetString('FILEBROWSER_REFRESH') | async }}\"\r\n              [icon]=\"iconRefresh\"\r\n              (clicked)=\"refreshNode(node)\"\r\n            ></sac-contextmenubutton>\r\n          </sac-contextmenu>\r\n        </div>\r\n      </li>\r\n\r\n      <ng-container *ngIf=\"node.IsExpanded\">\r\n        <ng-template\r\n          *ngFor=\"let child of node.ChildNodes\"\r\n          [ngTemplateOutlet]=\"treeItem\"\r\n          [ngTemplateOutletContext]=\"{node: child, deep: deep + 1}\"\r\n        ></ng-template>\r\n      </ng-container>\r\n    </ng-template>\r\n  </div>\r\n  <div class=\"col-12 col-md-7 col-lg-8\">\r\n    <ng-container *ngIf=\"selectedNode && selectedNode.Files\">\r\n      <div *ngIf=\"allowfileupload\" ngForm>\r\n        <sac-dropzonemultiple\r\n          [disablelabel]=\"true\"\r\n          [endpoint]=\"apiurl + '/uploadregister'\"\r\n          name=\"upload\"\r\n          uploadheight=\"5rem\"\r\n          [ngModel]=\"uploads\"\r\n          (ngModelChange)=\"uploadComplete(selectedNode,$event)\"\r\n          [allowedtypes]=\"allowedtypes\"\r\n          >{{ lngResourceService.GetString('FILEBROWSER_UPLOAD') | async\r\n          }}</sac-dropzonemultiple\r\n        >\r\n      </div>\r\n      <div class=\"table-responsive\">\r\n        <table class=\"table table-striped table-hover align-middle\">\r\n          <thead>\r\n            <th>\r\n              {{ lngResourceService.GetString('FILEBROWSER_GRID_FILE') | async\r\n              }}\r\n            </th>\r\n            <th>\r\n              {{ lngResourceService.GetString('FILEBROWSER_GRID_SIZE') | async\r\n              }}\r\n            </th>\r\n            <th style=\"width: 80px\"></th>\r\n          </thead>\r\n          <tbody>\r\n            <ng-container *ngIf=\"selectedNode.Files.length === 0\">\r\n              <tr>\r\n                <td colspan=\"3\">\r\n                  {{ lngResourceService.GetString('FILEBROWSER_NO_FILES') |\r\n                  async }}\r\n                </td>\r\n              </tr>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"selectedNode.Files.length > 0\">\r\n              <tr\r\n                *ngFor=\"let item of selectedNode.Files\"\r\n                (click)=\"selectFile(item)\"\r\n                [class.table-primary]=\"selectedFileItem === item\"\r\n              >\r\n                <td [class.p-2]=\"item.IsEditMode\">\r\n                  <ng-container *ngIf=\"!item.IsEditMode\">\r\n                    {{ item.Filename }}\r\n                  </ng-container>\r\n                  <ng-container *ngIf=\"item.IsEditMode\">\r\n                    <div>\r\n                      <input\r\n                        name=\"editFolder\"\r\n                        class=\"form-control form-control-sm\"\r\n                        [ngModel]=\"item.Filename\"\r\n                        [ngModelOptions]=\"{updateOn: 'blur'}\"\r\n                        (ngModelChange)=\"renameFile(item, $event)\"\r\n                        (keydown.enter)=\"$event.target.blur();false\"\r\n                        (blur)=\"renameFile(item, null)\"\r\n                        (click)=\"$event.stopPropagation();\"\r\n                      />\r\n                    </div>\r\n                  </ng-container>\r\n                </td>\r\n                <td>{{ item.Size}}</td>\r\n                <td class=\"p-2\">\r\n                  <div class=\"btn-toolbar\" role=\"toolbar\">\r\n                    <div class=\"btn-group ml-auto\" role=\"group\">\r\n                      <a\r\n                        *ngIf=\"allowfilerename\"\r\n                        class=\"btn btn-sm btn-link text-secondary\"\r\n                        (click)=\"editFile(item);$event.stopPropagation();\"\r\n                        ><i [class]=\"iconEdit\"></i\r\n                      ></a>\r\n                    </div>\r\n                    <div class=\"btn-group\" role=\"group\">\r\n                      <a\r\n                        *ngIf=\"allowfiledelete\"\r\n                        class=\"btn btn-sm btn-link text-secondary\"\r\n                        (click)=\"deleteFile(item);$event.stopPropagation();\"\r\n                        ><i [class]=\"iconDelete\"></i\r\n                      ></a>\r\n                    </div>\r\n                  </div>\r\n                </td>\r\n              </tr>\r\n            </ng-container>\r\n          </tbody>\r\n        </table>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: HttpClientModule }, { kind: "component", type: SacContextmenuComponent, selector: "sac-contextmenu" }, { kind: "component", type: SacContextmenuItemButtonComponent, selector: "sac-contextmenubutton" }, { kind: "component", type: SacContextmenuItemSplitterComponent, selector: "sac-contextmenusplitter" }, { kind: "component", type: SacDropzoneMultipleComponent, selector: "sac-dropzonemultiple" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SacBrowserComponent, isStandalone: true, selector: "sac-filebrowser", providers: [ServiceConfirm], viewQueries: [{ propertyName: "uploadComponent", first: true, predicate: SacDropzoneMultipleComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\r\n  <div class=\"col-12 col-md-5 col-lg-4\">\r\n    <ul class=\"list-group list-group-flush\">\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"treeItem\"\r\n        [ngTemplateOutletContext]=\"{node: rootNode, deep: 0}\"\r\n      ></ng-template>\r\n    </ul>\r\n\r\n    <ng-template #treeItem let-node=\"node\" let-deep=\"deep\">\r\n      <li\r\n        class=\"list-group-item py-1 px-2 d-flex align-items-center\"\r\n        [class.list-group-item-secondary]=\"node === selectedNode\"\r\n        (click)=\"selectNode(node)\"\r\n        style=\"cursor: pointer\"\r\n      >\r\n        <div class=\"mx-3\" *ngFor=\"let i of count(deep)\"></div>\r\n        <div\r\n          (click)=\"switchExpandNode(node);$event.stopPropagation();\"\r\n          class=\"me-2\"\r\n          [ngClass]=\"node.ChildNodes.length === 0 ? iconFolderEmpty: (!node.IsExpanded && node.ChildNodes.length > 0 ? iconFolderCollabsed : (node.IsExpanded && node.ChildNodes.length > 0 ? iconFolderOpen : ''))\"\r\n        ></div>\r\n        <ng-container *ngIf=\"!node.IsEditMode\">\r\n          <div class=\"flex-grow-1\">{{ node.Name }}</div>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"node.IsEditMode\">\r\n          <div class=\"flex-grow-1\" ngForm>\r\n            <input\r\n              name=\"editFolder\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"node.Name\"\r\n              [ngModelOptions]=\"{updateOn: 'blur'}\"\r\n              (ngModelChange)=\"renameNode(node, $event)\"\r\n              (keydown.enter)=\"$event.target.blur();false;\"\r\n              (blur)=\"renameNode(node, null)\"\r\n              (click)=\"$event.stopPropagation()\"\r\n            />\r\n          </div>\r\n        </ng-container>\r\n        <div class=\"flex-shrink-0\">\r\n          <a\r\n            *ngIf=\"node.Path !== '/' && allowfolderrename\"\r\n            class=\"btn btn-sm btn-link text-secondary\"\r\n            (click)=\"editNode(node);$event.stopPropagation();\"\r\n          >\r\n            <i [class]=\"iconEdit\"></i>\r\n          </a>\r\n          <sac-contextmenu cssclass=\"d-inline-block\">\r\n            <sac-contextmenubutton\r\n              *ngIf=\"allowfoldercreate\"\r\n              text=\"{{ lngResourceService.GetString(validationKeyService.FilebrowserButtonNewFolder) | async }}\"\r\n              [icon]=\"iconFolderNew\"\r\n              (clicked)=\"newNode(node)\"\r\n            ></sac-contextmenubutton>\r\n            <sac-contextmenubutton\r\n              *ngIf=\"node.Path !== '/' && allowfolderdelete\"\r\n              text=\"{{ lngResourceService.GetString(validationKeyService.FilebrowserButtonDelete) | async }}\"\r\n              [icon]=\"iconDelete\"\r\n              (clicked)=\"deleteNode(node)\"\r\n            ></sac-contextmenubutton>\r\n            <sac-contextmenusplitter\r\n              *ngIf=\"allowfoldercreate || (node.Path !== '/' && allowfolderdelete)\"\r\n            ></sac-contextmenusplitter>\r\n            <sac-contextmenubutton\r\n              text=\"{{ lngResourceService.GetString(validationKeyService.FilebrowserButtonRefresh) | async }}\"\r\n              [icon]=\"iconRefresh\"\r\n              (clicked)=\"refreshNode(node)\"\r\n            ></sac-contextmenubutton>\r\n          </sac-contextmenu>\r\n        </div>\r\n      </li>\r\n\r\n      <ng-container *ngIf=\"node.IsExpanded\">\r\n        <ng-template\r\n          *ngFor=\"let child of node.ChildNodes\"\r\n          [ngTemplateOutlet]=\"treeItem\"\r\n          [ngTemplateOutletContext]=\"{node: child, deep: deep + 1}\"\r\n        ></ng-template>\r\n      </ng-container>\r\n    </ng-template>\r\n  </div>\r\n  <div class=\"col-12 col-md-7 col-lg-8\">\r\n    <ng-container *ngIf=\"selectedNode && selectedNode.Files\">\r\n      <div *ngIf=\"allowfileupload\" ngForm>\r\n        <sac-dropzonemultiple\r\n          [disablelabel]=\"true\"\r\n          [endpoint]=\"apiurl + '/uploadregister'\"\r\n          name=\"upload\"\r\n          uploadheight=\"5rem\"\r\n          [ngModel]=\"uploads\"\r\n          (ngModelChange)=\"uploadComplete(selectedNode,$event)\"\r\n          [allowedtypes]=\"allowedtypes\"\r\n          >{{\r\n          lngResourceService.GetString(validationKeyService.FilebrowserButtonUpload)\r\n          | async }}</sac-dropzonemultiple\r\n        >\r\n      </div>\r\n      <div class=\"table-responsive\">\r\n        <table class=\"table table-striped table-hover align-middle\">\r\n          <thead>\r\n            <th>\r\n              {{\r\n              lngResourceService.GetString(validationKeyService.FilebrowserGridFilename)\r\n              | async }}\r\n            </th>\r\n            <th>\r\n              {{\r\n              lngResourceService.GetString(validationKeyService.FilebrowserGridSize)\r\n              | async }}\r\n            </th>\r\n            <th style=\"width: 80px\"></th>\r\n          </thead>\r\n          <tbody>\r\n            <ng-container *ngIf=\"selectedNode.Files.length === 0\">\r\n              <tr>\r\n                <td colspan=\"3\">\r\n                  {{\r\n                  lngResourceService.GetString(validationKeyService.FilebrowserGridNoFiles)\r\n                  | async }}\r\n                </td>\r\n              </tr>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"selectedNode.Files.length > 0\">\r\n              <tr\r\n                *ngFor=\"let item of selectedNode.Files\"\r\n                (click)=\"selectFile(item)\"\r\n                [class.table-primary]=\"selectedFileItem === item\"\r\n              >\r\n                <td [class.p-2]=\"item.IsEditMode\">\r\n                  <ng-container *ngIf=\"!item.IsEditMode\">\r\n                    {{ item.Filename }}\r\n                  </ng-container>\r\n                  <ng-container *ngIf=\"item.IsEditMode\">\r\n                    <div>\r\n                      <input\r\n                        name=\"editFolder\"\r\n                        class=\"form-control form-control-sm\"\r\n                        [ngModel]=\"item.Filename\"\r\n                        [ngModelOptions]=\"{updateOn: 'blur'}\"\r\n                        (ngModelChange)=\"renameFile(item, $event)\"\r\n                        (keydown.enter)=\"$event.target.blur();false\"\r\n                        (blur)=\"renameFile(item, null)\"\r\n                        (click)=\"$event.stopPropagation();\"\r\n                      />\r\n                    </div>\r\n                  </ng-container>\r\n                </td>\r\n                <td>{{ item.Size}}</td>\r\n                <td class=\"p-2\">\r\n                  <div class=\"btn-toolbar\" role=\"toolbar\">\r\n                    <div class=\"btn-group ml-auto\" role=\"group\">\r\n                      <a\r\n                        *ngIf=\"allowfilerename\"\r\n                        class=\"btn btn-sm btn-link text-secondary\"\r\n                        (click)=\"editFile(item);$event.stopPropagation();\"\r\n                        ><i [class]=\"iconEdit\"></i\r\n                      ></a>\r\n                    </div>\r\n                    <div class=\"btn-group\" role=\"group\">\r\n                      <a\r\n                        *ngIf=\"allowfiledelete\"\r\n                        class=\"btn btn-sm btn-link text-secondary\"\r\n                        (click)=\"deleteFile(item);$event.stopPropagation();\"\r\n                        ><i [class]=\"iconDelete\"></i\r\n                      ></a>\r\n                    </div>\r\n                  </div>\r\n                </td>\r\n              </tr>\r\n            </ng-container>\r\n          </tbody>\r\n        </table>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: HttpClientModule }, { kind: "component", type: SacContextmenuComponent, selector: "sac-contextmenu" }, { kind: "component", type: SacContextmenuItemButtonComponent, selector: "sac-contextmenubutton" }, { kind: "component", type: SacContextmenuItemSplitterComponent, selector: "sac-contextmenusplitter" }, { kind: "component", type: SacDropzoneMultipleComponent, selector: "sac-dropzonemultiple" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacBrowserComponent, decorators: [{
             type: Component,
@@ -583,7 +629,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         SacContextmenuItemButtonComponent,
                         SacContextmenuItemSplitterComponent,
                         SacDropzoneMultipleComponent,
-                    ], providers: [ServiceConfirm], template: "<div class=\"row\">\r\n  <div class=\"col-12 col-md-5 col-lg-4\">\r\n    <ul class=\"list-group list-group-flush\">\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"treeItem\"\r\n        [ngTemplateOutletContext]=\"{node: rootNode, deep: 0}\"\r\n      ></ng-template>\r\n    </ul>\r\n\r\n    <ng-template #treeItem let-node=\"node\" let-deep=\"deep\">\r\n      <li\r\n        class=\"list-group-item py-1 px-2 d-flex align-items-center\"\r\n        [class.list-group-item-secondary]=\"node === selectedNode\"\r\n        (click)=\"selectNode(node)\"\r\n        style=\"cursor: pointer\"\r\n      >\r\n        <div class=\"mx-3\" *ngFor=\"let i of count(deep)\"></div>\r\n        <div\r\n          (click)=\"switchExpandNode(node);$event.stopPropagation();\"\r\n          class=\"me-2\"\r\n          [ngClass]=\"node.ChildNodes.length === 0 ? iconFolderEmpty: (!node.IsExpanded && node.ChildNodes.length > 0 ? iconFolderCollabsed : (node.IsExpanded && node.ChildNodes.length > 0 ? iconFolderOpen : ''))\"\r\n        ></div>\r\n        <ng-container *ngIf=\"!node.IsEditMode\">\r\n          <div class=\"flex-grow-1\">{{ node.Name }}</div>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"node.IsEditMode\">\r\n          <div class=\"flex-grow-1\" ngForm>\r\n            <input\r\n              name=\"editFolder\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"node.Name\"\r\n              [ngModelOptions]=\"{updateOn: 'blur'}\"\r\n              (ngModelChange)=\"renameNode(node, $event)\"\r\n              (keydown.enter)=\"$event.target.blur();false;\"\r\n              (blur)=\"renameNode(node, null)\"\r\n              (click)=\"$event.stopPropagation()\"\r\n            />\r\n          </div>\r\n        </ng-container>\r\n        <div class=\"flex-shrink-0\">\r\n          <a\r\n            *ngIf=\"node.Path !== '/' && allowfolderrename\"\r\n            class=\"btn btn-sm btn-link text-secondary\"\r\n            (click)=\"editNode(node);$event.stopPropagation();\"\r\n          >\r\n            <i [class]=\"iconEdit\"></i>\r\n          </a>\r\n          <sac-contextmenu cssclass=\"d-inline-block\">\r\n            <sac-contextmenubutton\r\n              *ngIf=\"allowfoldercreate\"\r\n              text=\"{{ lngResourceService.GetString('FILEBROWSER_NEWFOLDER') | async }}\"\r\n              [icon]=\"iconFolderNew\"\r\n              (clicked)=\"newNode(node)\"\r\n            ></sac-contextmenubutton>\r\n            <sac-contextmenubutton\r\n              *ngIf=\"node.Path !== '/' && allowfolderdelete\"\r\n              text=\"{{ lngResourceService.GetString('FILEBROWSER_DELETE') | async }}\"\r\n              [icon]=\"iconDelete\"\r\n              (clicked)=\"deleteNode(node)\"\r\n            ></sac-contextmenubutton>\r\n            <sac-contextmenusplitter\r\n              *ngIf=\"allowfoldercreate || (node.Path !== '/' && allowfolderdelete)\"\r\n            ></sac-contextmenusplitter>\r\n            <sac-contextmenubutton\r\n              text=\"{{ lngResourceService.GetString('FILEBROWSER_REFRESH') | async }}\"\r\n              [icon]=\"iconRefresh\"\r\n              (clicked)=\"refreshNode(node)\"\r\n            ></sac-contextmenubutton>\r\n          </sac-contextmenu>\r\n        </div>\r\n      </li>\r\n\r\n      <ng-container *ngIf=\"node.IsExpanded\">\r\n        <ng-template\r\n          *ngFor=\"let child of node.ChildNodes\"\r\n          [ngTemplateOutlet]=\"treeItem\"\r\n          [ngTemplateOutletContext]=\"{node: child, deep: deep + 1}\"\r\n        ></ng-template>\r\n      </ng-container>\r\n    </ng-template>\r\n  </div>\r\n  <div class=\"col-12 col-md-7 col-lg-8\">\r\n    <ng-container *ngIf=\"selectedNode && selectedNode.Files\">\r\n      <div *ngIf=\"allowfileupload\" ngForm>\r\n        <sac-dropzonemultiple\r\n          [disablelabel]=\"true\"\r\n          [endpoint]=\"apiurl + '/uploadregister'\"\r\n          name=\"upload\"\r\n          uploadheight=\"5rem\"\r\n          [ngModel]=\"uploads\"\r\n          (ngModelChange)=\"uploadComplete(selectedNode,$event)\"\r\n          [allowedtypes]=\"allowedtypes\"\r\n          >{{ lngResourceService.GetString('FILEBROWSER_UPLOAD') | async\r\n          }}</sac-dropzonemultiple\r\n        >\r\n      </div>\r\n      <div class=\"table-responsive\">\r\n        <table class=\"table table-striped table-hover align-middle\">\r\n          <thead>\r\n            <th>\r\n              {{ lngResourceService.GetString('FILEBROWSER_GRID_FILE') | async\r\n              }}\r\n            </th>\r\n            <th>\r\n              {{ lngResourceService.GetString('FILEBROWSER_GRID_SIZE') | async\r\n              }}\r\n            </th>\r\n            <th style=\"width: 80px\"></th>\r\n          </thead>\r\n          <tbody>\r\n            <ng-container *ngIf=\"selectedNode.Files.length === 0\">\r\n              <tr>\r\n                <td colspan=\"3\">\r\n                  {{ lngResourceService.GetString('FILEBROWSER_NO_FILES') |\r\n                  async }}\r\n                </td>\r\n              </tr>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"selectedNode.Files.length > 0\">\r\n              <tr\r\n                *ngFor=\"let item of selectedNode.Files\"\r\n                (click)=\"selectFile(item)\"\r\n                [class.table-primary]=\"selectedFileItem === item\"\r\n              >\r\n                <td [class.p-2]=\"item.IsEditMode\">\r\n                  <ng-container *ngIf=\"!item.IsEditMode\">\r\n                    {{ item.Filename }}\r\n                  </ng-container>\r\n                  <ng-container *ngIf=\"item.IsEditMode\">\r\n                    <div>\r\n                      <input\r\n                        name=\"editFolder\"\r\n                        class=\"form-control form-control-sm\"\r\n                        [ngModel]=\"item.Filename\"\r\n                        [ngModelOptions]=\"{updateOn: 'blur'}\"\r\n                        (ngModelChange)=\"renameFile(item, $event)\"\r\n                        (keydown.enter)=\"$event.target.blur();false\"\r\n                        (blur)=\"renameFile(item, null)\"\r\n                        (click)=\"$event.stopPropagation();\"\r\n                      />\r\n                    </div>\r\n                  </ng-container>\r\n                </td>\r\n                <td>{{ item.Size}}</td>\r\n                <td class=\"p-2\">\r\n                  <div class=\"btn-toolbar\" role=\"toolbar\">\r\n                    <div class=\"btn-group ml-auto\" role=\"group\">\r\n                      <a\r\n                        *ngIf=\"allowfilerename\"\r\n                        class=\"btn btn-sm btn-link text-secondary\"\r\n                        (click)=\"editFile(item);$event.stopPropagation();\"\r\n                        ><i [class]=\"iconEdit\"></i\r\n                      ></a>\r\n                    </div>\r\n                    <div class=\"btn-group\" role=\"group\">\r\n                      <a\r\n                        *ngIf=\"allowfiledelete\"\r\n                        class=\"btn btn-sm btn-link text-secondary\"\r\n                        (click)=\"deleteFile(item);$event.stopPropagation();\"\r\n                        ><i [class]=\"iconDelete\"></i\r\n                      ></a>\r\n                    </div>\r\n                  </div>\r\n                </td>\r\n              </tr>\r\n            </ng-container>\r\n          </tbody>\r\n        </table>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</div>\r\n" }]
+                    ], providers: [ServiceConfirm], template: "<div class=\"row\">\r\n  <div class=\"col-12 col-md-5 col-lg-4\">\r\n    <ul class=\"list-group list-group-flush\">\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"treeItem\"\r\n        [ngTemplateOutletContext]=\"{node: rootNode, deep: 0}\"\r\n      ></ng-template>\r\n    </ul>\r\n\r\n    <ng-template #treeItem let-node=\"node\" let-deep=\"deep\">\r\n      <li\r\n        class=\"list-group-item py-1 px-2 d-flex align-items-center\"\r\n        [class.list-group-item-secondary]=\"node === selectedNode\"\r\n        (click)=\"selectNode(node)\"\r\n        style=\"cursor: pointer\"\r\n      >\r\n        <div class=\"mx-3\" *ngFor=\"let i of count(deep)\"></div>\r\n        <div\r\n          (click)=\"switchExpandNode(node);$event.stopPropagation();\"\r\n          class=\"me-2\"\r\n          [ngClass]=\"node.ChildNodes.length === 0 ? iconFolderEmpty: (!node.IsExpanded && node.ChildNodes.length > 0 ? iconFolderCollabsed : (node.IsExpanded && node.ChildNodes.length > 0 ? iconFolderOpen : ''))\"\r\n        ></div>\r\n        <ng-container *ngIf=\"!node.IsEditMode\">\r\n          <div class=\"flex-grow-1\">{{ node.Name }}</div>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"node.IsEditMode\">\r\n          <div class=\"flex-grow-1\" ngForm>\r\n            <input\r\n              name=\"editFolder\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"node.Name\"\r\n              [ngModelOptions]=\"{updateOn: 'blur'}\"\r\n              (ngModelChange)=\"renameNode(node, $event)\"\r\n              (keydown.enter)=\"$event.target.blur();false;\"\r\n              (blur)=\"renameNode(node, null)\"\r\n              (click)=\"$event.stopPropagation()\"\r\n            />\r\n          </div>\r\n        </ng-container>\r\n        <div class=\"flex-shrink-0\">\r\n          <a\r\n            *ngIf=\"node.Path !== '/' && allowfolderrename\"\r\n            class=\"btn btn-sm btn-link text-secondary\"\r\n            (click)=\"editNode(node);$event.stopPropagation();\"\r\n          >\r\n            <i [class]=\"iconEdit\"></i>\r\n          </a>\r\n          <sac-contextmenu cssclass=\"d-inline-block\">\r\n            <sac-contextmenubutton\r\n              *ngIf=\"allowfoldercreate\"\r\n              text=\"{{ lngResourceService.GetString(validationKeyService.FilebrowserButtonNewFolder) | async }}\"\r\n              [icon]=\"iconFolderNew\"\r\n              (clicked)=\"newNode(node)\"\r\n            ></sac-contextmenubutton>\r\n            <sac-contextmenubutton\r\n              *ngIf=\"node.Path !== '/' && allowfolderdelete\"\r\n              text=\"{{ lngResourceService.GetString(validationKeyService.FilebrowserButtonDelete) | async }}\"\r\n              [icon]=\"iconDelete\"\r\n              (clicked)=\"deleteNode(node)\"\r\n            ></sac-contextmenubutton>\r\n            <sac-contextmenusplitter\r\n              *ngIf=\"allowfoldercreate || (node.Path !== '/' && allowfolderdelete)\"\r\n            ></sac-contextmenusplitter>\r\n            <sac-contextmenubutton\r\n              text=\"{{ lngResourceService.GetString(validationKeyService.FilebrowserButtonRefresh) | async }}\"\r\n              [icon]=\"iconRefresh\"\r\n              (clicked)=\"refreshNode(node)\"\r\n            ></sac-contextmenubutton>\r\n          </sac-contextmenu>\r\n        </div>\r\n      </li>\r\n\r\n      <ng-container *ngIf=\"node.IsExpanded\">\r\n        <ng-template\r\n          *ngFor=\"let child of node.ChildNodes\"\r\n          [ngTemplateOutlet]=\"treeItem\"\r\n          [ngTemplateOutletContext]=\"{node: child, deep: deep + 1}\"\r\n        ></ng-template>\r\n      </ng-container>\r\n    </ng-template>\r\n  </div>\r\n  <div class=\"col-12 col-md-7 col-lg-8\">\r\n    <ng-container *ngIf=\"selectedNode && selectedNode.Files\">\r\n      <div *ngIf=\"allowfileupload\" ngForm>\r\n        <sac-dropzonemultiple\r\n          [disablelabel]=\"true\"\r\n          [endpoint]=\"apiurl + '/uploadregister'\"\r\n          name=\"upload\"\r\n          uploadheight=\"5rem\"\r\n          [ngModel]=\"uploads\"\r\n          (ngModelChange)=\"uploadComplete(selectedNode,$event)\"\r\n          [allowedtypes]=\"allowedtypes\"\r\n          >{{\r\n          lngResourceService.GetString(validationKeyService.FilebrowserButtonUpload)\r\n          | async }}</sac-dropzonemultiple\r\n        >\r\n      </div>\r\n      <div class=\"table-responsive\">\r\n        <table class=\"table table-striped table-hover align-middle\">\r\n          <thead>\r\n            <th>\r\n              {{\r\n              lngResourceService.GetString(validationKeyService.FilebrowserGridFilename)\r\n              | async }}\r\n            </th>\r\n            <th>\r\n              {{\r\n              lngResourceService.GetString(validationKeyService.FilebrowserGridSize)\r\n              | async }}\r\n            </th>\r\n            <th style=\"width: 80px\"></th>\r\n          </thead>\r\n          <tbody>\r\n            <ng-container *ngIf=\"selectedNode.Files.length === 0\">\r\n              <tr>\r\n                <td colspan=\"3\">\r\n                  {{\r\n                  lngResourceService.GetString(validationKeyService.FilebrowserGridNoFiles)\r\n                  | async }}\r\n                </td>\r\n              </tr>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"selectedNode.Files.length > 0\">\r\n              <tr\r\n                *ngFor=\"let item of selectedNode.Files\"\r\n                (click)=\"selectFile(item)\"\r\n                [class.table-primary]=\"selectedFileItem === item\"\r\n              >\r\n                <td [class.p-2]=\"item.IsEditMode\">\r\n                  <ng-container *ngIf=\"!item.IsEditMode\">\r\n                    {{ item.Filename }}\r\n                  </ng-container>\r\n                  <ng-container *ngIf=\"item.IsEditMode\">\r\n                    <div>\r\n                      <input\r\n                        name=\"editFolder\"\r\n                        class=\"form-control form-control-sm\"\r\n                        [ngModel]=\"item.Filename\"\r\n                        [ngModelOptions]=\"{updateOn: 'blur'}\"\r\n                        (ngModelChange)=\"renameFile(item, $event)\"\r\n                        (keydown.enter)=\"$event.target.blur();false\"\r\n                        (blur)=\"renameFile(item, null)\"\r\n                        (click)=\"$event.stopPropagation();\"\r\n                      />\r\n                    </div>\r\n                  </ng-container>\r\n                </td>\r\n                <td>{{ item.Size}}</td>\r\n                <td class=\"p-2\">\r\n                  <div class=\"btn-toolbar\" role=\"toolbar\">\r\n                    <div class=\"btn-group ml-auto\" role=\"group\">\r\n                      <a\r\n                        *ngIf=\"allowfilerename\"\r\n                        class=\"btn btn-sm btn-link text-secondary\"\r\n                        (click)=\"editFile(item);$event.stopPropagation();\"\r\n                        ><i [class]=\"iconEdit\"></i\r\n                      ></a>\r\n                    </div>\r\n                    <div class=\"btn-group\" role=\"group\">\r\n                      <a\r\n                        *ngIf=\"allowfiledelete\"\r\n                        class=\"btn btn-sm btn-link text-secondary\"\r\n                        (click)=\"deleteFile(item);$event.stopPropagation();\"\r\n                        ><i [class]=\"iconDelete\"></i\r\n                      ></a>\r\n                    </div>\r\n                  </div>\r\n                </td>\r\n              </tr>\r\n            </ng-container>\r\n          </tbody>\r\n        </table>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</div>\r\n" }]
         }], ctorParameters: function () { return [{ type: i1$1.HttpClient }, { type: i0.Injector }, { type: ServiceConfirm }]; }, propDecorators: { uploadComponent: [{
                 type: ViewChild,
                 args: [SacDropzoneMultipleComponent, { static: false }]
@@ -645,7 +691,7 @@ class SacCheckboxComponent extends SacCheckboxCommon {
                 useExisting: forwardRef(() => SacCheckboxComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"row align-items-center\"\r\n  [class.g-0]=\"disablelabel\"\r\n  [class.mb-3]=\"!stacked\"\r\n>\r\n  <div\r\n    class=\"col-12 col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[!disablelabel && !stacked ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n  >\r\n    <label *ngIf=\"!disablelabel && !stacked\" for=\"{{name}}\">{{label}}</label>\r\n  </div>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[!disablelabel && !stacked ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div class=\"form-check\">\r\n      <input\r\n        class=\"form-check-input form-check-input-sm\"\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"checkbox\"\r\n        [checked]=\"value\"\r\n        (blur)=\"onTouch()\"\r\n        (change)=\"setValue($event.target.checked)\"\r\n        [disabled]=\"isdisabled\"\r\n      />\r\n      <label for=\"{{name}}\" class=\"form-check-label\">\r\n        <ng-container *ngIf=\"checkboxtext\">{{checkboxtext}}</ng-container>\r\n      </label>\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"row\" [class.g-0]=\"disablelabel\" [class.mb-3]=\"!stacked\">\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[!disablelabel && !stacked ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden' ]\"\r\n  >\r\n    <label\r\n      *ngIf=\"!disablelabel && !stacked\"\r\n      for=\"{{name}}\"\r\n      class=\"col-form-label\"\r\n      [ngClass]=\"componentHeight | toLabelHeight\"\r\n      >{{label}}</label\r\n    >\r\n  </div>\r\n  <div\r\n    class=\"align-self-center col-12\"\r\n    [ngClass]=\"[!disablelabel && !stacked ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"form-check\"\r\n      [class.form-check-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.form-check-lg]=\"componentHeight === ControlHeight.Large\"\r\n    >\r\n      <input\r\n        class=\"form-check-input\"\r\n        [class.form-check-input-sm]=\"componentHeight === ControlHeight.Small\"\r\n        [class.form-check-input-lg]=\"componentHeight === ControlHeight.Large\"\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"checkbox\"\r\n        [checked]=\"value\"\r\n        (blur)=\"onTouch()\"\r\n        (change)=\"setValue($event.target.checked)\"\r\n        [disabled]=\"isdisabled\"\r\n      />\r\n      <label\r\n        for=\"{{name}}\"\r\n        class=\"form-check-label\"\r\n        [class.form-check-label-sm]=\"componentHeight === ControlHeight.Small\"\r\n        [class.form-check-label-lg]=\"componentHeight === ControlHeight.Large\"\r\n      >\r\n        <ng-container *ngIf=\"checkboxtext\">{{checkboxtext}}</ng-container>\r\n      </label>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".form-check-lg{padding-left:1.75rem}.form-check-input{width:1rem;height:1rem}.form-check-input-sm{width:.875rem;height:.875rem;margin-top:.4rem}.form-check-input-lg{width:1.25rem;height:1.25rem;margin-left:-1.75rem}.form-check-label-sm{font-size:.875rem}.form-check-label-lg{font-size:1.25rem}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToLabelHeightPipe, name: "toLabelHeight" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacCheckboxComponent, decorators: [{
             type: Component,
@@ -660,7 +706,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             useExisting: forwardRef(() => SacCheckboxComponent),
                             multi: true,
                         },
-                    ], standalone: true, imports: [NgClass, NgIf, SacToControlWidthCssPipe, SacToLabelWidthCssPipe], template: "<div\r\n  class=\"row align-items-center\"\r\n  [class.g-0]=\"disablelabel\"\r\n  [class.mb-3]=\"!stacked\"\r\n>\r\n  <div\r\n    class=\"col-12 col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[!disablelabel && !stacked ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n  >\r\n    <label *ngIf=\"!disablelabel && !stacked\" for=\"{{name}}\">{{label}}</label>\r\n  </div>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[!disablelabel && !stacked ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div class=\"form-check\">\r\n      <input\r\n        class=\"form-check-input form-check-input-sm\"\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"checkbox\"\r\n        [checked]=\"value\"\r\n        (blur)=\"onTouch()\"\r\n        (change)=\"setValue($event.target.checked)\"\r\n        [disabled]=\"isdisabled\"\r\n      />\r\n      <label for=\"{{name}}\" class=\"form-check-label\">\r\n        <ng-container *ngIf=\"checkboxtext\">{{checkboxtext}}</ng-container>\r\n      </label>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+                    ], standalone: true, imports: [
+                        NgClass,
+                        NgIf,
+                        SacToControlWidthCssPipe,
+                        SacToLabelWidthCssPipe,
+                        SacToLabelHeightPipe,
+                    ], template: "<div class=\"row\" [class.g-0]=\"disablelabel\" [class.mb-3]=\"!stacked\">\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[!disablelabel && !stacked ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden' ]\"\r\n  >\r\n    <label\r\n      *ngIf=\"!disablelabel && !stacked\"\r\n      for=\"{{name}}\"\r\n      class=\"col-form-label\"\r\n      [ngClass]=\"componentHeight | toLabelHeight\"\r\n      >{{label}}</label\r\n    >\r\n  </div>\r\n  <div\r\n    class=\"align-self-center col-12\"\r\n    [ngClass]=\"[!disablelabel && !stacked ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"form-check\"\r\n      [class.form-check-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.form-check-lg]=\"componentHeight === ControlHeight.Large\"\r\n    >\r\n      <input\r\n        class=\"form-check-input\"\r\n        [class.form-check-input-sm]=\"componentHeight === ControlHeight.Small\"\r\n        [class.form-check-input-lg]=\"componentHeight === ControlHeight.Large\"\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"checkbox\"\r\n        [checked]=\"value\"\r\n        (blur)=\"onTouch()\"\r\n        (change)=\"setValue($event.target.checked)\"\r\n        [disabled]=\"isdisabled\"\r\n      />\r\n      <label\r\n        for=\"{{name}}\"\r\n        class=\"form-check-label\"\r\n        [class.form-check-label-sm]=\"componentHeight === ControlHeight.Small\"\r\n        [class.form-check-label-lg]=\"componentHeight === ControlHeight.Large\"\r\n      >\r\n        <ng-container *ngIf=\"checkboxtext\">{{checkboxtext}}</ng-container>\r\n      </label>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".form-check-lg{padding-left:1.75rem}.form-check-input{width:1rem;height:1rem}.form-check-input-sm{width:.875rem;height:.875rem;margin-top:.4rem}.form-check-input-lg{width:1.25rem;height:1.25rem;margin-left:-1.75rem}.form-check-label-sm{font-size:.875rem}.form-check-label-lg{font-size:1.25rem}\n"] }]
         }], ctorParameters: function () { return [{ type: SacFormLayoutDirective, decorators: [{
                     type: Host
                 }, {
@@ -692,7 +744,7 @@ class SacRadiobuttonsComponent extends SacRadiobuttonsCommon {
                 useExisting: forwardRef(() => SacRadiobuttonsComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <div\r\n    *ngIf=\"disablelabel === false\"\r\n    class=\"col-12 col-form-label col-form-label-sm pt-0\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n  >\r\n    <ng-container *ngIf=\"!disablelabel\">{{label}}</ng-container>\r\n  </div>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <div\r\n    *ngIf=\"disablelabel === false\"\r\n    class=\"col-12 pt-0\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden' ]\"\r\n  >\r\n    <label\r\n      class=\"col-form-label\"\r\n      [ngClass]=\"componentHeight | toLabelHeight\"\r\n      *ngIf=\"!disablelabel\"\r\n      >{{label}}</label\r\n    >\r\n  </div>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n    [class.pt-1]=\"componentHeight === ControlHeight.Small\"\r\n    [class.pt-2]=\"componentHeight !== ControlHeight.Small\"\r\n  >\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToLabelHeightPipe, name: "toLabelHeight" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacRadiobuttonsComponent, decorators: [{
             type: Component,
@@ -707,7 +759,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             useExisting: forwardRef(() => SacRadiobuttonsComponent),
                             multi: true,
                         },
-                    ], standalone: true, imports: [NgIf, NgClass, SacToControlWidthCssPipe, SacToLabelWidthCssPipe], template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <div\r\n    *ngIf=\"disablelabel === false\"\r\n    class=\"col-12 col-form-label col-form-label-sm pt-0\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n  >\r\n    <ng-container *ngIf=\"!disablelabel\">{{label}}</ng-container>\r\n  </div>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n" }]
+                    ], standalone: true, imports: [
+                        NgIf,
+                        NgClass,
+                        SacToControlWidthCssPipe,
+                        SacToLabelWidthCssPipe,
+                        SacToLabelHeightPipe,
+                    ], template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <div\r\n    *ngIf=\"disablelabel === false\"\r\n    class=\"col-12 pt-0\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden' ]\"\r\n  >\r\n    <label\r\n      class=\"col-form-label\"\r\n      [ngClass]=\"componentHeight | toLabelHeight\"\r\n      *ngIf=\"!disablelabel\"\r\n      >{{label}}</label\r\n    >\r\n  </div>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n    [class.pt-1]=\"componentHeight === ControlHeight.Small\"\r\n    [class.pt-2]=\"componentHeight !== ControlHeight.Small\"\r\n  >\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n" }]
         }], ctorParameters: function () { return [{ type: SacFormLayoutDirective, decorators: [{
                     type: Host
                 }, {
@@ -726,11 +784,11 @@ class SacRadiobuttonComponent extends SacRadiobuttonCommon {
         super(sacRadioButtons);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacRadiobuttonComponent, deps: [{ token: SacRadiobuttonsComponent, host: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SacRadiobuttonComponent, isStandalone: true, selector: "sac-radiobutton", usesInheritance: true, ngImport: i0, template: "<div class=\"form-check\" *ngIf=\"hidden===false\">\r\n  <input id=\"{{getName}}_{{getIndex}}\" name=\"{{getName}}\" type=\"radio\" class=\"form-check-input\" [value]=\"value\"\r\n    [checked]=\"checked\" (change)=\"ChangeEvent()\" [disabled]=\"isDisabled\" />\r\n  <label for=\"{{getName}}_{{getIndex}}\" class=\"form-check-label\">\r\n    <ng-template *ngTemplateOutlet=\"labeltemplate || defaultItemLabelTemplate;context:{ label: label }\">\r\n    </ng-template>\r\n  </label>\r\n</div>\r\n\r\n<ng-template #defaultItemLabelTemplate let-label=\"label\">{{label}}</ng-template>", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SacRadiobuttonComponent, isStandalone: true, selector: "sac-radiobutton", usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"form-check\"\r\n  [class.form-check-sm]=\"componentHeight === ControlHeight.Small\"\r\n  [class.form-check-lg]=\"componentHeight === ControlHeight.Large\"\r\n  *ngIf=\"hidden===false\"\r\n>\r\n  <input\r\n    id=\"{{getName}}_{{getIndex}}\"\r\n    name=\"{{getName}}\"\r\n    type=\"radio\"\r\n    class=\"form-check-input\"\r\n    [class.form-check-input-sm]=\"componentHeight === ControlHeight.Small\"\r\n    [class.form-check-input-lg]=\"componentHeight === ControlHeight.Large\"\r\n    [value]=\"value\"\r\n    [checked]=\"checked\"\r\n    (change)=\"ChangeEvent()\"\r\n    [disabled]=\"isDisabled\"\r\n  />\r\n  <label\r\n    for=\"{{getName}}_{{getIndex}}\"\r\n    class=\"form-check-label\"\r\n    [class.form-check-label-sm]=\"componentHeight === ControlHeight.Small\"\r\n    [class.form-check-label-lg]=\"componentHeight === ControlHeight.Large\"\r\n  >\r\n    <ng-template\r\n      *ngTemplateOutlet=\"labeltemplate || defaultItemLabelTemplate;context:{ label: label }\"\r\n    >\r\n    </ng-template>\r\n  </label>\r\n</div>\r\n\r\n<ng-template #defaultItemLabelTemplate let-label=\"label\">{{label}}</ng-template>\r\n", styles: [".form-check-lg{padding-left:1.75rem}.form-check-input{width:1rem;height:1rem}.form-check-input-sm{width:.875rem;height:.875rem;margin-top:.4rem}.form-check-input-lg{width:1.25rem;height:1.25rem;margin-left:-1.75rem;margin-top:.4rem}.form-check-label-sm{font-size:.875rem}.form-check-label-lg{font-size:1.25rem}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacRadiobuttonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sac-radiobutton', standalone: true, imports: [NgIf, NgTemplateOutlet], template: "<div class=\"form-check\" *ngIf=\"hidden===false\">\r\n  <input id=\"{{getName}}_{{getIndex}}\" name=\"{{getName}}\" type=\"radio\" class=\"form-check-input\" [value]=\"value\"\r\n    [checked]=\"checked\" (change)=\"ChangeEvent()\" [disabled]=\"isDisabled\" />\r\n  <label for=\"{{getName}}_{{getIndex}}\" class=\"form-check-label\">\r\n    <ng-template *ngTemplateOutlet=\"labeltemplate || defaultItemLabelTemplate;context:{ label: label }\">\r\n    </ng-template>\r\n  </label>\r\n</div>\r\n\r\n<ng-template #defaultItemLabelTemplate let-label=\"label\">{{label}}</ng-template>" }]
+            args: [{ selector: 'sac-radiobutton', standalone: true, imports: [NgIf, NgTemplateOutlet], template: "<div\r\n  class=\"form-check\"\r\n  [class.form-check-sm]=\"componentHeight === ControlHeight.Small\"\r\n  [class.form-check-lg]=\"componentHeight === ControlHeight.Large\"\r\n  *ngIf=\"hidden===false\"\r\n>\r\n  <input\r\n    id=\"{{getName}}_{{getIndex}}\"\r\n    name=\"{{getName}}\"\r\n    type=\"radio\"\r\n    class=\"form-check-input\"\r\n    [class.form-check-input-sm]=\"componentHeight === ControlHeight.Small\"\r\n    [class.form-check-input-lg]=\"componentHeight === ControlHeight.Large\"\r\n    [value]=\"value\"\r\n    [checked]=\"checked\"\r\n    (change)=\"ChangeEvent()\"\r\n    [disabled]=\"isDisabled\"\r\n  />\r\n  <label\r\n    for=\"{{getName}}_{{getIndex}}\"\r\n    class=\"form-check-label\"\r\n    [class.form-check-label-sm]=\"componentHeight === ControlHeight.Small\"\r\n    [class.form-check-label-lg]=\"componentHeight === ControlHeight.Large\"\r\n  >\r\n    <ng-template\r\n      *ngTemplateOutlet=\"labeltemplate || defaultItemLabelTemplate;context:{ label: label }\"\r\n    >\r\n    </ng-template>\r\n  </label>\r\n</div>\r\n\r\n<ng-template #defaultItemLabelTemplate let-label=\"label\">{{label}}</ng-template>\r\n", styles: [".form-check-lg{padding-left:1.75rem}.form-check-input{width:1rem;height:1rem}.form-check-input-sm{width:.875rem;height:.875rem;margin-top:.4rem}.form-check-input-lg{width:1.25rem;height:1.25rem;margin-left:-1.75rem;margin-top:.4rem}.form-check-label-sm{font-size:.875rem}.form-check-label-lg{font-size:1.25rem}\n"] }]
         }], ctorParameters: function () { return [{ type: SacRadiobuttonsComponent, decorators: [{
                     type: Host
                 }] }]; } });
@@ -806,6 +864,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
 
+class SacToControlHeightPipe {
+    // #region Public Methods
+    /**
+     * Returns the CSS class that defines the height for the control
+     * @param value ControlHeight value or null
+     */
+    transform(value) {
+        // Return default value
+        if (!value) {
+            return '';
+        }
+        switch (value) {
+            case ControlHeight.Small:
+                return 'form-control-sm';
+            case ControlHeight.Large:
+                return 'form-control-lg';
+            default:
+                return '';
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacToControlHeightPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SacToControlHeightPipe, isStandalone: true, name: "toControlHeight" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacToControlHeightPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'toControlHeight',
+                    standalone: true,
+                }]
+        }] });
+
 /**
  * DateTime Selektor Komponente
  */
@@ -848,7 +937,7 @@ class SacDateComponent extends SacDateCommon {
                 multi: true,
                 useExisting: forwardRef(() => SacDateComponent),
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12 position-relative\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group input-group-sm\"\r\n      [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      <input\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        [imask]=\"imaskDate\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        [value]=\"valuestring\"\r\n        [ngClass]=\"{'is-invalid': invalid && (dirty || touched) }\"\r\n        (blur)=\"onTouch()\"\r\n        (accept)=\"setValueString($event)\"\r\n        [disabled]=\"isdisabled\"\r\n      />\r\n      <button\r\n        class=\"btn btn-sm btn-secondary\"\r\n        type=\"button\"\r\n        (click)=\"showDateSelector()\"\r\n        [disabled]=\"isdisabled\"\r\n      >\r\n        <i [class]=\"IconSelector\"></i>\r\n      </button>\r\n      <div\r\n        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n        class=\"invalid-feedback\"\r\n      >\r\n        {{ GetErrorMessage() | async }}\r\n      </div>\r\n    </div>\r\n    <div\r\n      class=\"popover fade bs-popover-bottom show position-absolute\"\r\n      role=\"tooltip\"\r\n      *ngIf=\"_showselector\"\r\n      style=\"\r\n        display: block;\r\n        left: unset;\r\n        right: 0px;\r\n        top: 34px;\r\n        max-width: 325px;\r\n      \"\r\n    >\r\n      <div\r\n        class=\"popover-arrow position-absolute\"\r\n        style=\"left: unset; right: 18px\"\r\n      ></div>\r\n      <h3 class=\"popover-header\" style=\"display: none\"></h3>\r\n      <div class=\"popover-body\">\r\n        <sac-dateselector\r\n          [initialvalue]=\"value\"\r\n          (selectdate)=\"dateselect($event)\"\r\n          dateselection=\"true\"\r\n        ></sac-dateselector>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IMaskDirective, selector: "[imask]", inputs: ["imask", "unmask", "imaskElement"], outputs: ["accept", "complete"], exportAs: ["imask"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: SacDateSelectorComponent, selector: "sac-dateselector" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12 position-relative\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group\"\r\n      [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n      [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      <input\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        [imask]=\"imaskDate\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        [value]=\"valuestring\"\r\n        [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n        [ngClass]=\"[componentHeight | toControlHeight]\"\r\n        (blur)=\"onTouch()\"\r\n        (accept)=\"setValueString($event)\"\r\n        [disabled]=\"isdisabled\"\r\n      />\r\n      <button\r\n        class=\"btn btn-secondary\"\r\n        type=\"button\"\r\n        (click)=\"showDateSelector()\"\r\n        [disabled]=\"isdisabled\"\r\n      >\r\n        <i [class]=\"IconSelector\"></i>\r\n      </button>\r\n      <div\r\n        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n        class=\"invalid-feedback\"\r\n      >\r\n        {{ GetErrorMessage() | async }}\r\n      </div>\r\n    </div>\r\n    <div\r\n      class=\"popover fade bs-popover-bottom show position-absolute\"\r\n      role=\"tooltip\"\r\n      *ngIf=\"_showselector\"\r\n      style=\"\r\n        display: block;\r\n        left: unset;\r\n        right: 0px;\r\n        top: unset;\r\n        max-width: 325px;\r\n        margin-top: 7px;\r\n      \"\r\n    >\r\n      <div\r\n        class=\"popover-arrow position-absolute\"\r\n        style=\"left: unset\"\r\n        [style.right.rem]=\"componentHeight === ControlHeight.Small ? 1.1 : componentHeight === ControlHeight.Large ? 1.8 : 1.4\"\r\n      ></div>\r\n      <h3 class=\"popover-header\" style=\"display: none\"></h3>\r\n      <div class=\"popover-body\">\r\n        <sac-dateselector\r\n          [initialvalue]=\"value\"\r\n          (selectdate)=\"dateselect($event)\"\r\n          dateselection=\"true\"\r\n        ></sac-dateselector>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IMaskDirective, selector: "[imask]", inputs: ["imask", "unmask", "imaskElement"], outputs: ["accept", "complete"], exportAs: ["imask"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: SacDateSelectorComponent, selector: "sac-dateselector" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToLabelHeightPipe, name: "toLabelHeight" }, { kind: "pipe", type: SacToControlHeightPipe, name: "toControlHeight" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacDateComponent, decorators: [{
             type: Component,
@@ -871,7 +960,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         SacDateSelectorComponent,
                         SacToControlWidthCssPipe,
                         SacToLabelWidthCssPipe,
-                    ], template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12 position-relative\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group input-group-sm\"\r\n      [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      <input\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        [imask]=\"imaskDate\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        [value]=\"valuestring\"\r\n        [ngClass]=\"{'is-invalid': invalid && (dirty || touched) }\"\r\n        (blur)=\"onTouch()\"\r\n        (accept)=\"setValueString($event)\"\r\n        [disabled]=\"isdisabled\"\r\n      />\r\n      <button\r\n        class=\"btn btn-sm btn-secondary\"\r\n        type=\"button\"\r\n        (click)=\"showDateSelector()\"\r\n        [disabled]=\"isdisabled\"\r\n      >\r\n        <i [class]=\"IconSelector\"></i>\r\n      </button>\r\n      <div\r\n        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n        class=\"invalid-feedback\"\r\n      >\r\n        {{ GetErrorMessage() | async }}\r\n      </div>\r\n    </div>\r\n    <div\r\n      class=\"popover fade bs-popover-bottom show position-absolute\"\r\n      role=\"tooltip\"\r\n      *ngIf=\"_showselector\"\r\n      style=\"\r\n        display: block;\r\n        left: unset;\r\n        right: 0px;\r\n        top: 34px;\r\n        max-width: 325px;\r\n      \"\r\n    >\r\n      <div\r\n        class=\"popover-arrow position-absolute\"\r\n        style=\"left: unset; right: 18px\"\r\n      ></div>\r\n      <h3 class=\"popover-header\" style=\"display: none\"></h3>\r\n      <div class=\"popover-body\">\r\n        <sac-dateselector\r\n          [initialvalue]=\"value\"\r\n          (selectdate)=\"dateselect($event)\"\r\n          dateselection=\"true\"\r\n        ></sac-dateselector>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+                        SacToLabelHeightPipe,
+                        SacToControlHeightPipe,
+                    ], template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12 position-relative\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group\"\r\n      [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n      [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      <input\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        [imask]=\"imaskDate\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        [value]=\"valuestring\"\r\n        [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n        [ngClass]=\"[componentHeight | toControlHeight]\"\r\n        (blur)=\"onTouch()\"\r\n        (accept)=\"setValueString($event)\"\r\n        [disabled]=\"isdisabled\"\r\n      />\r\n      <button\r\n        class=\"btn btn-secondary\"\r\n        type=\"button\"\r\n        (click)=\"showDateSelector()\"\r\n        [disabled]=\"isdisabled\"\r\n      >\r\n        <i [class]=\"IconSelector\"></i>\r\n      </button>\r\n      <div\r\n        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n        class=\"invalid-feedback\"\r\n      >\r\n        {{ GetErrorMessage() | async }}\r\n      </div>\r\n    </div>\r\n    <div\r\n      class=\"popover fade bs-popover-bottom show position-absolute\"\r\n      role=\"tooltip\"\r\n      *ngIf=\"_showselector\"\r\n      style=\"\r\n        display: block;\r\n        left: unset;\r\n        right: 0px;\r\n        top: unset;\r\n        max-width: 325px;\r\n        margin-top: 7px;\r\n      \"\r\n    >\r\n      <div\r\n        class=\"popover-arrow position-absolute\"\r\n        style=\"left: unset\"\r\n        [style.right.rem]=\"componentHeight === ControlHeight.Small ? 1.1 : componentHeight === ControlHeight.Large ? 1.8 : 1.4\"\r\n      ></div>\r\n      <h3 class=\"popover-header\" style=\"display: none\"></h3>\r\n      <div class=\"popover-body\">\r\n        <sac-dateselector\r\n          [initialvalue]=\"value\"\r\n          (selectdate)=\"dateselect($event)\"\r\n          dateselection=\"true\"\r\n        ></sac-dateselector>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
         }], ctorParameters: function () { return [{ type: SacFormLayoutDirective, decorators: [{
                     type: Host
                 }, {
@@ -904,7 +995,7 @@ class SacDateTimeComponent extends SacDateTimeCommon {
                 multi: true,
                 useExisting: forwardRef(() => SacDateTimeComponent),
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12 position-relative\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group input-group-sm\"\r\n      [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      <input\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        [imask]=\"imaskDate\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        [value]=\"valuestring\"\r\n        [ngClass]=\"{'is-invalid': invalid && (dirty || touched) }\"\r\n        (blur)=\"onTouch()\"\r\n        (accept)=\"setValueString($event)\"\r\n        [disabled]=\"isdisabled\"\r\n      />\r\n      <button\r\n        class=\"btn btn-secondary\"\r\n        type=\"button\"\r\n        (click)=\"showDateSelector()\"\r\n        [disabled]=\"isdisabled\"\r\n      >\r\n        <i [class]=\"IconSelector\"></i>\r\n      </button>\r\n      <div\r\n        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n        class=\"invalid-feedback\"\r\n      >\r\n        {{ GetErrorMessage() | async }}\r\n      </div>\r\n    </div>\r\n    <div\r\n      class=\"popover fade bs-popover-bottom show position-absolute\"\r\n      role=\"tooltip\"\r\n      *ngIf=\"_showselector\"\r\n      style=\"\r\n        display: block;\r\n        left: unset;\r\n        right: 0px;\r\n        top: 34px;\r\n        max-width: 325px;\r\n      \"\r\n    >\r\n      <div\r\n        class=\"popover-arrow position-absolute\"\r\n        style=\"left: unset; right: 18px\"\r\n      ></div>\r\n      <h3 class=\"popover-header\" style=\"display: none\"></h3>\r\n      <div class=\"popover-body\">\r\n        <sac-dateselector\r\n          [initialvalue]=\"value\"\r\n          (selectdate)=\"dateselect($event)\"\r\n          dateselection=\"true\"\r\n          timeselection=\"true\"\r\n        ></sac-dateselector>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IMaskDirective, selector: "[imask]", inputs: ["imask", "unmask", "imaskElement"], outputs: ["accept", "complete"], exportAs: ["imask"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: SacDateSelectorComponent, selector: "sac-dateselector" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12 position-relative\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group\"\r\n      [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n      [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      <input\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        [imask]=\"imaskDate\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        [value]=\"valuestring\"\r\n        [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n        [ngClass]=\"[componentHeight | toControlHeight]\"\r\n        (blur)=\"onTouch()\"\r\n        (accept)=\"setValueString($event)\"\r\n        [disabled]=\"isdisabled\"\r\n      />\r\n      <button\r\n        class=\"btn btn-secondary\"\r\n        type=\"button\"\r\n        (click)=\"showDateSelector()\"\r\n        [disabled]=\"isdisabled\"\r\n      >\r\n        <i [class]=\"IconSelector\"></i>\r\n      </button>\r\n      <div\r\n        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n        class=\"invalid-feedback\"\r\n      >\r\n        {{ GetErrorMessage() | async }}\r\n      </div>\r\n    </div>\r\n    <div\r\n      class=\"popover fade bs-popover-bottom show position-absolute\"\r\n      role=\"tooltip\"\r\n      *ngIf=\"_showselector\"\r\n      style=\"\r\n        display: block;\r\n        left: unset;\r\n        right: 0px;\r\n        top: unset;\r\n        max-width: 325px;\r\n        margin-top: 7px;\r\n      \"\r\n    >\r\n      <div\r\n        class=\"popover-arrow position-absolute\"\r\n        style=\"left: unset\"\r\n        [style.right.rem]=\"componentHeight === ControlHeight.Small ? 1.1 : componentHeight === ControlHeight.Large ? 1.8 : 1.4\"\r\n      ></div>\r\n      <h3 class=\"popover-header\" style=\"display: none\"></h3>\r\n      <div class=\"popover-body\">\r\n        <sac-dateselector\r\n          [initialvalue]=\"value\"\r\n          (selectdate)=\"dateselect($event)\"\r\n          dateselection=\"true\"\r\n          timeselection=\"true\"\r\n        ></sac-dateselector>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IMaskDirective, selector: "[imask]", inputs: ["imask", "unmask", "imaskElement"], outputs: ["accept", "complete"], exportAs: ["imask"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: SacDateSelectorComponent, selector: "sac-dateselector" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToLabelHeightPipe, name: "toLabelHeight" }, { kind: "pipe", type: SacToControlHeightPipe, name: "toControlHeight" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacDateTimeComponent, decorators: [{
             type: Component,
@@ -927,7 +1018,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         SacDateSelectorComponent,
                         SacToControlWidthCssPipe,
                         SacToLabelWidthCssPipe,
-                    ], template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12 position-relative\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group input-group-sm\"\r\n      [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      <input\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        [imask]=\"imaskDate\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        [value]=\"valuestring\"\r\n        [ngClass]=\"{'is-invalid': invalid && (dirty || touched) }\"\r\n        (blur)=\"onTouch()\"\r\n        (accept)=\"setValueString($event)\"\r\n        [disabled]=\"isdisabled\"\r\n      />\r\n      <button\r\n        class=\"btn btn-secondary\"\r\n        type=\"button\"\r\n        (click)=\"showDateSelector()\"\r\n        [disabled]=\"isdisabled\"\r\n      >\r\n        <i [class]=\"IconSelector\"></i>\r\n      </button>\r\n      <div\r\n        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n        class=\"invalid-feedback\"\r\n      >\r\n        {{ GetErrorMessage() | async }}\r\n      </div>\r\n    </div>\r\n    <div\r\n      class=\"popover fade bs-popover-bottom show position-absolute\"\r\n      role=\"tooltip\"\r\n      *ngIf=\"_showselector\"\r\n      style=\"\r\n        display: block;\r\n        left: unset;\r\n        right: 0px;\r\n        top: 34px;\r\n        max-width: 325px;\r\n      \"\r\n    >\r\n      <div\r\n        class=\"popover-arrow position-absolute\"\r\n        style=\"left: unset; right: 18px\"\r\n      ></div>\r\n      <h3 class=\"popover-header\" style=\"display: none\"></h3>\r\n      <div class=\"popover-body\">\r\n        <sac-dateselector\r\n          [initialvalue]=\"value\"\r\n          (selectdate)=\"dateselect($event)\"\r\n          dateselection=\"true\"\r\n          timeselection=\"true\"\r\n        ></sac-dateselector>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+                        SacToLabelHeightPipe,
+                        SacToControlHeightPipe,
+                    ], template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12 position-relative\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group\"\r\n      [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n      [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      <input\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        [imask]=\"imaskDate\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        [value]=\"valuestring\"\r\n        [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n        [ngClass]=\"[componentHeight | toControlHeight]\"\r\n        (blur)=\"onTouch()\"\r\n        (accept)=\"setValueString($event)\"\r\n        [disabled]=\"isdisabled\"\r\n      />\r\n      <button\r\n        class=\"btn btn-secondary\"\r\n        type=\"button\"\r\n        (click)=\"showDateSelector()\"\r\n        [disabled]=\"isdisabled\"\r\n      >\r\n        <i [class]=\"IconSelector\"></i>\r\n      </button>\r\n      <div\r\n        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n        class=\"invalid-feedback\"\r\n      >\r\n        {{ GetErrorMessage() | async }}\r\n      </div>\r\n    </div>\r\n    <div\r\n      class=\"popover fade bs-popover-bottom show position-absolute\"\r\n      role=\"tooltip\"\r\n      *ngIf=\"_showselector\"\r\n      style=\"\r\n        display: block;\r\n        left: unset;\r\n        right: 0px;\r\n        top: unset;\r\n        max-width: 325px;\r\n        margin-top: 7px;\r\n      \"\r\n    >\r\n      <div\r\n        class=\"popover-arrow position-absolute\"\r\n        style=\"left: unset\"\r\n        [style.right.rem]=\"componentHeight === ControlHeight.Small ? 1.1 : componentHeight === ControlHeight.Large ? 1.8 : 1.4\"\r\n      ></div>\r\n      <h3 class=\"popover-header\" style=\"display: none\"></h3>\r\n      <div class=\"popover-body\">\r\n        <sac-dateselector\r\n          [initialvalue]=\"value\"\r\n          (selectdate)=\"dateselect($event)\"\r\n          dateselection=\"true\"\r\n          timeselection=\"true\"\r\n        ></sac-dateselector>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
         }], ctorParameters: function () { return [{ type: SacFormLayoutDirective, decorators: [{
                     type: Host
                 }, {
@@ -960,7 +1053,7 @@ class SacTimeComponent extends SacTimeCommon {
                 multi: true,
                 useExisting: forwardRef(() => SacTimeComponent),
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12 position-relative\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group input-group-sm\"\r\n      [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      <input\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        [imask]=\"imaskDate\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        [value]=\"valuestring\"\r\n        [ngClass]=\"{'is-invalid': invalid && (dirty || touched) }\"\r\n        (blur)=\"onTouch()\"\r\n        (accept)=\"setValueString($event)\"\r\n        [disabled]=\"isdisabled\"\r\n      />\r\n      <button\r\n        class=\"btn btn-secondary\"\r\n        type=\"button\"\r\n        (click)=\"showTimeSelector()\"\r\n        [disabled]=\"isdisabled\"\r\n      >\r\n        <i [class]=\"IconSelector\"></i>\r\n      </button>\r\n      <div\r\n        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n        class=\"invalid-feedback\"\r\n      >\r\n        {{ GetErrorMessage() | async }}\r\n      </div>\r\n    </div>\r\n    <div\r\n      class=\"popover fade bs-popover-bottom show position-absolute\"\r\n      role=\"tooltip\"\r\n      *ngIf=\"_showselector\"\r\n      style=\"\r\n        display: block;\r\n        left: unset;\r\n        right: 0px;\r\n        top: 34px;\r\n        max-width: 325px;\r\n      \"\r\n    >\r\n      <div\r\n        class=\"popover-arrow position-absolute\"\r\n        style=\"left: unset; right: 18px\"\r\n      ></div>\r\n      <h3 class=\"popover-header\" style=\"display: none\"></h3>\r\n      <div class=\"popover-body\">\r\n        <sac-dateselector\r\n          [initialvalue]=\"value\"\r\n          (selectdate)=\"timeselect($event)\"\r\n          timeselection=\"true\"\r\n        ></sac-dateselector>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IMaskDirective, selector: "[imask]", inputs: ["imask", "unmask", "imaskElement"], outputs: ["accept", "complete"], exportAs: ["imask"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: SacDateSelectorComponent, selector: "sac-dateselector" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12 position-relative\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group\"\r\n      [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n      [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      <input\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        [imask]=\"imaskDate\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        [value]=\"valuestring\"\r\n        [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n        [ngClass]=\"[componentHeight | toControlHeight]\"\r\n        (blur)=\"onTouch()\"\r\n        (accept)=\"setValueString($event)\"\r\n        [disabled]=\"isdisabled\"\r\n      />\r\n      <button\r\n        class=\"btn btn-secondary\"\r\n        type=\"button\"\r\n        (click)=\"showTimeSelector()\"\r\n        [disabled]=\"isdisabled\"\r\n      >\r\n        <i [class]=\"IconSelector\"></i>\r\n      </button>\r\n      <div\r\n        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n        class=\"invalid-feedback\"\r\n      >\r\n        {{ GetErrorMessage() | async }}\r\n      </div>\r\n    </div>\r\n    <div\r\n      class=\"popover fade bs-popover-bottom show position-absolute\"\r\n      role=\"tooltip\"\r\n      *ngIf=\"_showselector\"\r\n      style=\"\r\n        display: block;\r\n        left: unset;\r\n        right: 0px;\r\n        top: unset;\r\n        max-width: 325px;\r\n        margin-top: 7px;\r\n      \"\r\n    >\r\n      <div\r\n        class=\"popover-arrow position-absolute\"\r\n        style=\"left: unset\"\r\n        [style.right.rem]=\"componentHeight === ControlHeight.Small ? 1.1 : componentHeight === ControlHeight.Large ? 1.8 : 1.4\"\r\n      ></div>\r\n      <h3 class=\"popover-header\" style=\"display: none\"></h3>\r\n      <div class=\"popover-body\">\r\n        <sac-dateselector\r\n          [initialvalue]=\"value\"\r\n          (selectdate)=\"timeselect($event)\"\r\n          timeselection=\"true\"\r\n        ></sac-dateselector>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IMaskDirective, selector: "[imask]", inputs: ["imask", "unmask", "imaskElement"], outputs: ["accept", "complete"], exportAs: ["imask"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: SacDateSelectorComponent, selector: "sac-dateselector" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToLabelHeightPipe, name: "toLabelHeight" }, { kind: "pipe", type: SacToControlHeightPipe, name: "toControlHeight" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacTimeComponent, decorators: [{
             type: Component,
@@ -983,7 +1076,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         SacDateSelectorComponent,
                         SacToControlWidthCssPipe,
                         SacToLabelWidthCssPipe,
-                    ], template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12 position-relative\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group input-group-sm\"\r\n      [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      <input\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        [imask]=\"imaskDate\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        [value]=\"valuestring\"\r\n        [ngClass]=\"{'is-invalid': invalid && (dirty || touched) }\"\r\n        (blur)=\"onTouch()\"\r\n        (accept)=\"setValueString($event)\"\r\n        [disabled]=\"isdisabled\"\r\n      />\r\n      <button\r\n        class=\"btn btn-secondary\"\r\n        type=\"button\"\r\n        (click)=\"showTimeSelector()\"\r\n        [disabled]=\"isdisabled\"\r\n      >\r\n        <i [class]=\"IconSelector\"></i>\r\n      </button>\r\n      <div\r\n        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n        class=\"invalid-feedback\"\r\n      >\r\n        {{ GetErrorMessage() | async }}\r\n      </div>\r\n    </div>\r\n    <div\r\n      class=\"popover fade bs-popover-bottom show position-absolute\"\r\n      role=\"tooltip\"\r\n      *ngIf=\"_showselector\"\r\n      style=\"\r\n        display: block;\r\n        left: unset;\r\n        right: 0px;\r\n        top: 34px;\r\n        max-width: 325px;\r\n      \"\r\n    >\r\n      <div\r\n        class=\"popover-arrow position-absolute\"\r\n        style=\"left: unset; right: 18px\"\r\n      ></div>\r\n      <h3 class=\"popover-header\" style=\"display: none\"></h3>\r\n      <div class=\"popover-body\">\r\n        <sac-dateselector\r\n          [initialvalue]=\"value\"\r\n          (selectdate)=\"timeselect($event)\"\r\n          timeselection=\"true\"\r\n        ></sac-dateselector>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+                        SacToLabelHeightPipe,
+                        SacToControlHeightPipe,
+                    ], template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12 position-relative\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group\"\r\n      [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n      [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      <input\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        [imask]=\"imaskDate\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        [value]=\"valuestring\"\r\n        [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n        [ngClass]=\"[componentHeight | toControlHeight]\"\r\n        (blur)=\"onTouch()\"\r\n        (accept)=\"setValueString($event)\"\r\n        [disabled]=\"isdisabled\"\r\n      />\r\n      <button\r\n        class=\"btn btn-secondary\"\r\n        type=\"button\"\r\n        (click)=\"showTimeSelector()\"\r\n        [disabled]=\"isdisabled\"\r\n      >\r\n        <i [class]=\"IconSelector\"></i>\r\n      </button>\r\n      <div\r\n        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n        class=\"invalid-feedback\"\r\n      >\r\n        {{ GetErrorMessage() | async }}\r\n      </div>\r\n    </div>\r\n    <div\r\n      class=\"popover fade bs-popover-bottom show position-absolute\"\r\n      role=\"tooltip\"\r\n      *ngIf=\"_showselector\"\r\n      style=\"\r\n        display: block;\r\n        left: unset;\r\n        right: 0px;\r\n        top: unset;\r\n        max-width: 325px;\r\n        margin-top: 7px;\r\n      \"\r\n    >\r\n      <div\r\n        class=\"popover-arrow position-absolute\"\r\n        style=\"left: unset\"\r\n        [style.right.rem]=\"componentHeight === ControlHeight.Small ? 1.1 : componentHeight === ControlHeight.Large ? 1.8 : 1.4\"\r\n      ></div>\r\n      <h3 class=\"popover-header\" style=\"display: none\"></h3>\r\n      <div class=\"popover-body\">\r\n        <sac-dateselector\r\n          [initialvalue]=\"value\"\r\n          (selectdate)=\"timeselect($event)\"\r\n          timeselection=\"true\"\r\n        ></sac-dateselector>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
         }], ctorParameters: function () { return [{ type: SacFormLayoutDirective, decorators: [{
                     type: Host
                 }, {
@@ -1219,18 +1314,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Grid Komponente
  */
 class SacGridComponent extends SacGridCommon {
+    // #endregion Properties
+    // #region Constructors
     /**
      * Konstrukor
      * @param cdRef Change Detection Reference
      */
-    constructor(cdRef) {
-        super(cdRef);
+    constructor(cdRef, injector) {
+        super(cdRef, injector);
         /**
          * Setzt die Ellipsis Funktion auf der Column
          */
         this.ellipsis = false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacGridComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacGridComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SacGridComponent, isStandalone: true, selector: "sac-grid", providers: [
             { provide: NG_VALUE_ACCESSOR, multi: true, useExisting: SacGridComponent },
             {
@@ -1255,7 +1352,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         NgIf,
                         SacPagingComponent,
                     ], template: "<div class=\"table-responsive\">\r\n  <table class=\"table table-striped table-hover\" id={{name}}>\r\n    <thead class=\"thead-light\">\r\n      <tr>\r\n        <ng-container *ngTemplateOutlet=\"template; context { row: {}, type: 'header'}\">\r\n        </ng-container>\r\n      </tr>\r\n    </thead>\r\n    <tbody>\r\n      <ng-container *ngFor=\"let item of value; let i=index\">\r\n        <tr>\r\n          <ng-container *ngTemplateOutlet=\"template; context { row: item, type: 'body'}\">\r\n          </ng-container>\r\n        </tr>\r\n      </ng-container>\r\n      <tr *ngIf=\"value === undefined || value === null || value.length===0\">\r\n        <td [attr.colspan]=\"ColumnCount\">{{emptytext}}</td>\r\n      </tr>\r\n      <tr>\r\n        <td [attr.colspan]=\"ColumnCount\">\r\n          <div class=\"container-fluid\">\r\n            <sac-paging name=\"{{name}}Paging\" (paging)=\"pageChange($event)\" [pagerdata]=\"pagerdata\" [pagesizes]=\"pagesizes\" [pagingtext]=\"pagingtext\" [pagesizetext]=\"pagesizetext\" [pagesizedisabled]=\"pagesizedisabled\"></sac-paging>\r\n          </div>\r\n        </td>\r\n      </tr>\r\n    </tbody>\r\n  </table>\r\n</div>\r\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { template: [{
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.Injector }]; }, propDecorators: { template: [{
                 type: ContentChild,
                 args: [TemplateRef, { static: false }]
             }] } });
@@ -1431,7 +1528,7 @@ class SacInputComponent extends SacInputCommon {
                 multi: true,
                 useExisting: forwardRef(() => SacInputComponent),
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <input\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      type=\"text\"\r\n      class=\"form-control form-control-sm\"\r\n      [value]=\"value\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      [readonly]=\"readonly\"\r\n      (blur)=\"onTouch()\"\r\n      (input)=\"setValue($event.target.value)\"\r\n      (keypress)=\"onKeyPress($event)\"\r\n      [attr.maxlength]=\"maxlength\"\r\n      [ngClass]=\"{'is-invalid': invalid && (dirty || touched) }\"\r\n      [disabled]=\"isdisabled\"\r\n    />\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <input\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      type=\"text\"\r\n      class=\"form-control\"\r\n      [value]=\"value\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      [readonly]=\"readonly\"\r\n      (blur)=\"onTouch()\"\r\n      (input)=\"setValue($event.target.value)\"\r\n      (keypress)=\"onKeyPress($event)\"\r\n      [attr.maxlength]=\"maxlength\"\r\n      [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n      [ngClass]=\"[componentHeight | toControlHeight]\"\r\n      [disabled]=\"isdisabled\"\r\n    />\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToLabelHeightPipe, name: "toLabelHeight" }, { kind: "pipe", type: SacToControlHeightPipe, name: "toControlHeight" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacInputComponent, decorators: [{
             type: Component,
@@ -1448,7 +1545,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         AsyncPipe,
                         SacToControlWidthCssPipe,
                         SacToLabelWidthCssPipe,
-                    ], template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <input\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      type=\"text\"\r\n      class=\"form-control form-control-sm\"\r\n      [value]=\"value\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      [readonly]=\"readonly\"\r\n      (blur)=\"onTouch()\"\r\n      (input)=\"setValue($event.target.value)\"\r\n      (keypress)=\"onKeyPress($event)\"\r\n      [attr.maxlength]=\"maxlength\"\r\n      [ngClass]=\"{'is-invalid': invalid && (dirty || touched) }\"\r\n      [disabled]=\"isdisabled\"\r\n    />\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+                        SacToLabelHeightPipe,
+                        SacToControlHeightPipe,
+                    ], template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <input\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      type=\"text\"\r\n      class=\"form-control\"\r\n      [value]=\"value\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      [readonly]=\"readonly\"\r\n      (blur)=\"onTouch()\"\r\n      (input)=\"setValue($event.target.value)\"\r\n      (keypress)=\"onKeyPress($event)\"\r\n      [attr.maxlength]=\"maxlength\"\r\n      [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n      [ngClass]=\"[componentHeight | toControlHeight]\"\r\n      [disabled]=\"isdisabled\"\r\n    />\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
         }], ctorParameters: function () { return [{ type: SacFormLayoutDirective, decorators: [{
                     type: Host
                 }, {
@@ -1480,7 +1579,7 @@ class SacInputEmailComponent extends SacInputEmailCommon {
                 multi: true,
                 useExisting: forwardRef(() => SacInputEmailComponent),
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group input-group-sm\"\r\n      [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      <span class=\"input-group-text\">@</span>\r\n      <input\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        [value]=\"value\"\r\n        (blur)=\"onTouch()\"\r\n        (input)=\"setValue($event.target.value)\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        autocomplete=\"email\"\r\n        [ngClass]=\"{'is-invalid': invalid && (dirty || touched) }\"\r\n        [disabled]=\"isdisabled\"\r\n        [readonly]=\"readonly\"\r\n      />\r\n      <div\r\n        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n        class=\"invalid-feedback\"\r\n      >\r\n        {{ GetErrorMessage() | async }}\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group\"\r\n      [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n      [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      <span class=\"input-group-text\">@</span>\r\n      <input\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        [value]=\"value\"\r\n        (blur)=\"onTouch()\"\r\n        (input)=\"setValue($event.target.value)\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        autocomplete=\"email\"\r\n        [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n        [ngClass]=\"[componentHeight | toControlHeight]\"\r\n        [disabled]=\"isdisabled\"\r\n        [readonly]=\"readonly\"\r\n      />\r\n      <div\r\n        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n        class=\"invalid-feedback\"\r\n      >\r\n        {{ GetErrorMessage() | async }}\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToLabelHeightPipe, name: "toLabelHeight" }, { kind: "pipe", type: SacToControlHeightPipe, name: "toControlHeight" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacInputEmailComponent, decorators: [{
             type: Component,
@@ -1501,7 +1600,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         AsyncPipe,
                         SacToControlWidthCssPipe,
                         SacToLabelWidthCssPipe,
-                    ], template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group input-group-sm\"\r\n      [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      <span class=\"input-group-text\">@</span>\r\n      <input\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        [value]=\"value\"\r\n        (blur)=\"onTouch()\"\r\n        (input)=\"setValue($event.target.value)\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        autocomplete=\"email\"\r\n        [ngClass]=\"{'is-invalid': invalid && (dirty || touched) }\"\r\n        [disabled]=\"isdisabled\"\r\n        [readonly]=\"readonly\"\r\n      />\r\n      <div\r\n        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n        class=\"invalid-feedback\"\r\n      >\r\n        {{ GetErrorMessage() | async }}\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+                        SacToLabelHeightPipe,
+                        SacToControlHeightPipe,
+                    ], template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group\"\r\n      [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n      [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      <span class=\"input-group-text\">@</span>\r\n      <input\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        [value]=\"value\"\r\n        (blur)=\"onTouch()\"\r\n        (input)=\"setValue($event.target.value)\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        autocomplete=\"email\"\r\n        [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n        [ngClass]=\"[componentHeight | toControlHeight]\"\r\n        [disabled]=\"isdisabled\"\r\n        [readonly]=\"readonly\"\r\n      />\r\n      <div\r\n        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n        class=\"invalid-feedback\"\r\n      >\r\n        {{ GetErrorMessage() | async }}\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
         }], ctorParameters: function () { return [{ type: SacFormLayoutDirective, decorators: [{
                     type: Host
                 }, {
@@ -1533,7 +1634,7 @@ class SacInputAreaComponent extends SacInputAreaCommon {
                 multi: true,
                 useExisting: forwardRef(() => SacInputAreaComponent),
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <textarea\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      type=\"\"\r\n      class=\"form-control form-control-sm\"\r\n      [value]=\"value\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      (blur)=\"onTouch()\"\r\n      (input)=\"setValue($event.target.value)\"\r\n      (keypress)=\"onKeyPress($event)\"\r\n      [attr.rows]=\"rows\"\r\n      [ngClass]=\"{'is-invalid': invalid && (dirty || touched) }\"\r\n      [disabled]=\"isdisabled\"\r\n      [attr.maxlength]=\"maxlength\"\r\n      [readonly]=\"readonly\"\r\n    ></textarea>\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <textarea\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      type=\"\"\r\n      class=\"form-control\"\r\n      [value]=\"value\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      (blur)=\"onTouch()\"\r\n      (input)=\"setValue($event.target.value)\"\r\n      (keypress)=\"onKeyPress($event)\"\r\n      [attr.rows]=\"rows\"\r\n      [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n      [ngClass]=\"[componentHeight | toControlHeight]\"\r\n      [disabled]=\"isdisabled\"\r\n      [attr.maxlength]=\"maxlength\"\r\n      [readonly]=\"readonly\"\r\n    ></textarea>\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToLabelHeightPipe, name: "toLabelHeight" }, { kind: "pipe", type: SacToControlHeightPipe, name: "toControlHeight" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacInputAreaComponent, decorators: [{
             type: Component,
@@ -1554,7 +1655,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         AsyncPipe,
                         SacToControlWidthCssPipe,
                         SacToLabelWidthCssPipe,
-                    ], template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <textarea\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      type=\"\"\r\n      class=\"form-control form-control-sm\"\r\n      [value]=\"value\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      (blur)=\"onTouch()\"\r\n      (input)=\"setValue($event.target.value)\"\r\n      (keypress)=\"onKeyPress($event)\"\r\n      [attr.rows]=\"rows\"\r\n      [ngClass]=\"{'is-invalid': invalid && (dirty || touched) }\"\r\n      [disabled]=\"isdisabled\"\r\n      [attr.maxlength]=\"maxlength\"\r\n      [readonly]=\"readonly\"\r\n    ></textarea>\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+                        SacToLabelHeightPipe,
+                        SacToControlHeightPipe,
+                    ], template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <textarea\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      type=\"\"\r\n      class=\"form-control\"\r\n      [value]=\"value\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      (blur)=\"onTouch()\"\r\n      (input)=\"setValue($event.target.value)\"\r\n      (keypress)=\"onKeyPress($event)\"\r\n      [attr.rows]=\"rows\"\r\n      [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n      [ngClass]=\"[componentHeight | toControlHeight]\"\r\n      [disabled]=\"isdisabled\"\r\n      [attr.maxlength]=\"maxlength\"\r\n      [readonly]=\"readonly\"\r\n    ></textarea>\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
         }], ctorParameters: function () { return [{ type: SacFormLayoutDirective, decorators: [{
                     type: Host
                 }, {
@@ -1586,7 +1689,7 @@ class SacInputCurrencyComponent extends SacInputCurrencyCommon {
                 multi: true,
                 useExisting: forwardRef(() => SacInputCurrencyComponent),
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group input-group-sm\"\r\n      [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      <input\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        [value]=\"value\"\r\n        (blur)=\"onTouch()\"\r\n        (input)=\"setValue($event.target.value)\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        (keypress)=\"onKeyPress($event)\"\r\n        [disabled]=\"isdisabled\"\r\n        [readonly]=\"readonly\"\r\n        [ngClass]=\"{'is-invalid': invalid && (dirty || touched) }\"\r\n      />\r\n      <span class=\"input-group-text\">CHF</span>\r\n      <div\r\n        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n        class=\"invalid-feedback\"\r\n      >\r\n        {{ GetErrorMessage() | async }}\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group input-group-sm\"\r\n      [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n      [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      <input\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        [value]=\"value\"\r\n        (blur)=\"onTouch()\"\r\n        (input)=\"setValue($event.target.value)\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        (keypress)=\"onKeyPress($event)\"\r\n        [disabled]=\"isdisabled\"\r\n        [readonly]=\"readonly\"\r\n        [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n        [ngClass]=\"[componentHeight | toControlHeight]\"\r\n      />\r\n      <span class=\"input-group-text\">CHF</span>\r\n      <div\r\n        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n        class=\"invalid-feedback\"\r\n      >\r\n        {{ GetErrorMessage() | async }}\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToLabelHeightPipe, name: "toLabelHeight" }, { kind: "pipe", type: SacToControlHeightPipe, name: "toControlHeight" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacInputCurrencyComponent, decorators: [{
             type: Component,
@@ -1607,7 +1710,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         AsyncPipe,
                         SacToControlWidthCssPipe,
                         SacToLabelWidthCssPipe,
-                    ], template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group input-group-sm\"\r\n      [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      <input\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        [value]=\"value\"\r\n        (blur)=\"onTouch()\"\r\n        (input)=\"setValue($event.target.value)\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        (keypress)=\"onKeyPress($event)\"\r\n        [disabled]=\"isdisabled\"\r\n        [readonly]=\"readonly\"\r\n        [ngClass]=\"{'is-invalid': invalid && (dirty || touched) }\"\r\n      />\r\n      <span class=\"input-group-text\">CHF</span>\r\n      <div\r\n        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n        class=\"invalid-feedback\"\r\n      >\r\n        {{ GetErrorMessage() | async }}\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+                        SacToLabelHeightPipe,
+                        SacToControlHeightPipe,
+                    ], template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group input-group-sm\"\r\n      [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n      [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      <input\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        [value]=\"value\"\r\n        (blur)=\"onTouch()\"\r\n        (input)=\"setValue($event.target.value)\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        (keypress)=\"onKeyPress($event)\"\r\n        [disabled]=\"isdisabled\"\r\n        [readonly]=\"readonly\"\r\n        [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n        [ngClass]=\"[componentHeight | toControlHeight]\"\r\n      />\r\n      <span class=\"input-group-text\">CHF</span>\r\n      <div\r\n        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n        class=\"invalid-feedback\"\r\n      >\r\n        {{ GetErrorMessage() | async }}\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
         }], ctorParameters: function () { return [{ type: SacFormLayoutDirective, decorators: [{
                     type: Host
                 }, {
@@ -1639,7 +1744,7 @@ class SacInputDecimalComponent extends SacInputDecimalCommon {
                 multi: true,
                 useExisting: forwardRef(() => SacInputDecimalComponent),
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <input\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      type=\"text\"\r\n      class=\"form-control form-control-sm\"\r\n      [value]=\"value\"\r\n      (blur)=\"onTouch()\"\r\n      (input)=\"setValue($event.target.value)\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      [readonly]=\"readonly\"\r\n      (keypress)=\"onKeyPress($event)\"\r\n      [disabled]=\"isdisabled\"\r\n      [ngClass]=\"{'is-invalid': invalid && (dirty || touched) }\"\r\n    />\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <input\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      type=\"text\"\r\n      class=\"form-control\"\r\n      [value]=\"value\"\r\n      (blur)=\"onTouch()\"\r\n      (input)=\"setValue($event.target.value)\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      [readonly]=\"readonly\"\r\n      (keypress)=\"onKeyPress($event)\"\r\n      [disabled]=\"isdisabled\"\r\n      [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n      [ngClass]=\"[componentHeight | toControlHeight]\"\r\n    />\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToLabelHeightPipe, name: "toLabelHeight" }, { kind: "pipe", type: SacToControlHeightPipe, name: "toControlHeight" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacInputDecimalComponent, decorators: [{
             type: Component,
@@ -1660,7 +1765,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         AsyncPipe,
                         SacToControlWidthCssPipe,
                         SacToLabelWidthCssPipe,
-                    ], template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <input\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      type=\"text\"\r\n      class=\"form-control form-control-sm\"\r\n      [value]=\"value\"\r\n      (blur)=\"onTouch()\"\r\n      (input)=\"setValue($event.target.value)\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      [readonly]=\"readonly\"\r\n      (keypress)=\"onKeyPress($event)\"\r\n      [disabled]=\"isdisabled\"\r\n      [ngClass]=\"{'is-invalid': invalid && (dirty || touched) }\"\r\n    />\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+                        SacToLabelHeightPipe,
+                        SacToControlHeightPipe,
+                    ], template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <input\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      type=\"text\"\r\n      class=\"form-control\"\r\n      [value]=\"value\"\r\n      (blur)=\"onTouch()\"\r\n      (input)=\"setValue($event.target.value)\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      [readonly]=\"readonly\"\r\n      (keypress)=\"onKeyPress($event)\"\r\n      [disabled]=\"isdisabled\"\r\n      [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n      [ngClass]=\"[componentHeight | toControlHeight]\"\r\n    />\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
         }], ctorParameters: function () { return [{ type: SacFormLayoutDirective, decorators: [{
                     type: Host
                 }, {
@@ -1692,7 +1799,7 @@ class SacInputIntegerComponent extends SacInputIntegerCommon {
                 multi: true,
                 useExisting: forwardRef(() => SacInputIntegerComponent),
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <input\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      type=\"text\"\r\n      class=\"form-control form-control-sm\"\r\n      [value]=\"value\"\r\n      (blur)=\"onTouch()\"\r\n      (input)=\"setValue($event.target.value)\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      (keypress)=\"onKeyPress($event)\"\r\n      [disabled]=\"isdisabled\"\r\n      [readonly]=\"readonly\"\r\n      [ngClass]=\"{'is-invalid': invalid && (dirty || touched) }\"\r\n    />\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <input\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      type=\"text\"\r\n      class=\"form-control\"\r\n      [value]=\"value\"\r\n      (blur)=\"onTouch()\"\r\n      (input)=\"setValue($event.target.value)\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      (keypress)=\"onKeyPress($event)\"\r\n      [disabled]=\"isdisabled\"\r\n      [readonly]=\"readonly\"\r\n      [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n      [ngClass]=\"[componentHeight | toControlHeight]\"\r\n    />\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToLabelHeightPipe, name: "toLabelHeight" }, { kind: "pipe", type: SacToControlHeightPipe, name: "toControlHeight" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacInputIntegerComponent, decorators: [{
             type: Component,
@@ -1713,7 +1820,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         AsyncPipe,
                         SacToControlWidthCssPipe,
                         SacToLabelWidthCssPipe,
-                    ], template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <input\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      type=\"text\"\r\n      class=\"form-control form-control-sm\"\r\n      [value]=\"value\"\r\n      (blur)=\"onTouch()\"\r\n      (input)=\"setValue($event.target.value)\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      (keypress)=\"onKeyPress($event)\"\r\n      [disabled]=\"isdisabled\"\r\n      [readonly]=\"readonly\"\r\n      [ngClass]=\"{'is-invalid': invalid && (dirty || touched) }\"\r\n    />\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+                        SacToLabelHeightPipe,
+                        SacToControlHeightPipe,
+                    ], template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <input\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      type=\"text\"\r\n      class=\"form-control\"\r\n      [value]=\"value\"\r\n      (blur)=\"onTouch()\"\r\n      (input)=\"setValue($event.target.value)\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      (keypress)=\"onKeyPress($event)\"\r\n      [disabled]=\"isdisabled\"\r\n      [readonly]=\"readonly\"\r\n      [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n      [ngClass]=\"[componentHeight | toControlHeight]\"\r\n    />\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
         }], ctorParameters: function () { return [{ type: SacFormLayoutDirective, decorators: [{
                     type: Host
                 }, {
@@ -1745,7 +1854,7 @@ class SacInputPasswordComponent extends SacInputPasswordCommon {
                 multi: true,
                 useExisting: forwardRef(() => SacInputPasswordComponent),
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <input\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      type=\"password\"\r\n      class=\"form-control form-control-sm\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      [value]=\"value\"\r\n      (blur)=\"onTouch()\"\r\n      (input)=\"setValue($event.target.value)\"\r\n      [attr.maxlength]=\"maxlength\"\r\n      autocomplete=\"new-password\"\r\n      [ngClass]=\"{'is-invalid': invalid && (dirty || touched) }\"\r\n      [disabled]=\"isdisabled\"\r\n      [readonly]=\"readonly\"\r\n    />\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <input\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      type=\"password\"\r\n      class=\"form-control\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      [value]=\"value\"\r\n      (blur)=\"onTouch()\"\r\n      (input)=\"setValue($event.target.value)\"\r\n      [attr.maxlength]=\"maxlength\"\r\n      autocomplete=\"new-password\"\r\n      [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n      [ngClass]=\"[componentHeight | toControlHeight]\"\r\n      [disabled]=\"isdisabled\"\r\n      [readonly]=\"readonly\"\r\n    />\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToLabelHeightPipe, name: "toLabelHeight" }, { kind: "pipe", type: SacToControlHeightPipe, name: "toControlHeight" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacInputPasswordComponent, decorators: [{
             type: Component,
@@ -1766,7 +1875,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         AsyncPipe,
                         SacToControlWidthCssPipe,
                         SacToLabelWidthCssPipe,
-                    ], template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <input\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      type=\"password\"\r\n      class=\"form-control form-control-sm\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      [value]=\"value\"\r\n      (blur)=\"onTouch()\"\r\n      (input)=\"setValue($event.target.value)\"\r\n      [attr.maxlength]=\"maxlength\"\r\n      autocomplete=\"new-password\"\r\n      [ngClass]=\"{'is-invalid': invalid && (dirty || touched) }\"\r\n      [disabled]=\"isdisabled\"\r\n      [readonly]=\"readonly\"\r\n    />\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+                        SacToLabelHeightPipe,
+                        SacToControlHeightPipe,
+                    ], template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <input\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      type=\"password\"\r\n      class=\"form-control\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      [value]=\"value\"\r\n      (blur)=\"onTouch()\"\r\n      (input)=\"setValue($event.target.value)\"\r\n      [attr.maxlength]=\"maxlength\"\r\n      autocomplete=\"new-password\"\r\n      [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n      [ngClass]=\"[componentHeight | toControlHeight]\"\r\n      [disabled]=\"isdisabled\"\r\n      [readonly]=\"readonly\"\r\n    />\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
         }], ctorParameters: function () { return [{ type: SacFormLayoutDirective, decorators: [{
                     type: Host
                 }, {
@@ -1798,7 +1909,7 @@ class SacInputSearchComponent extends SacInputSearchCommon {
                 multi: true,
                 useExisting: forwardRef(() => SacInputSearchComponent),
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}_label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div class=\"input-group input-group-sm\">\r\n      <input\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        [value]=\"value\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        (blur)=\"onTouch()\"\r\n        (input)=\"setValue($event.target.value)\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        [ngClass]=\"{'is-invalid': invalid && (dirty || touched) }\"\r\n        [disabled]=\"isdisabled\"\r\n        [readonly]=\"readonly\"\r\n      />\r\n      <input\r\n        type=\"submit\"\r\n        class=\"btn btn-secondary\"\r\n        id=\"{{name}}_search\"\r\n        (click)=\"searchClick()\"\r\n        [value]=\"buttontext\"\r\n      />\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}_label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group\"\r\n      [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n    >\r\n      <input\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        [value]=\"value\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        (blur)=\"onTouch()\"\r\n        (input)=\"setValue($event.target.value)\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n        [ngClass]=\"[componentHeight | toControlHeight]\"\r\n        [disabled]=\"isdisabled\"\r\n        [readonly]=\"readonly\"\r\n      />\r\n      <input\r\n        type=\"submit\"\r\n        class=\"btn btn-secondary\"\r\n        id=\"{{name}}_search\"\r\n        (click)=\"searchClick()\"\r\n        [value]=\"buttontext\"\r\n      />\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToLabelHeightPipe, name: "toLabelHeight" }, { kind: "pipe", type: SacToControlHeightPipe, name: "toControlHeight" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacInputSearchComponent, decorators: [{
             type: Component,
@@ -1813,7 +1924,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             multi: true,
                             useExisting: forwardRef(() => SacInputSearchComponent),
                         },
-                    ], standalone: true, imports: [NgClass, NgIf, SacToControlWidthCssPipe, SacToLabelWidthCssPipe], template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}_label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div class=\"input-group input-group-sm\">\r\n      <input\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        [value]=\"value\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        (blur)=\"onTouch()\"\r\n        (input)=\"setValue($event.target.value)\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        [ngClass]=\"{'is-invalid': invalid && (dirty || touched) }\"\r\n        [disabled]=\"isdisabled\"\r\n        [readonly]=\"readonly\"\r\n      />\r\n      <input\r\n        type=\"submit\"\r\n        class=\"btn btn-secondary\"\r\n        id=\"{{name}}_search\"\r\n        (click)=\"searchClick()\"\r\n        [value]=\"buttontext\"\r\n      />\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+                    ], standalone: true, imports: [
+                        NgClass,
+                        NgIf,
+                        SacToControlWidthCssPipe,
+                        SacToLabelWidthCssPipe,
+                        SacToLabelHeightPipe,
+                        SacToControlHeightPipe,
+                    ], template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}_label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group\"\r\n      [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n    >\r\n      <input\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        [value]=\"value\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        (blur)=\"onTouch()\"\r\n        (input)=\"setValue($event.target.value)\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n        [ngClass]=\"[componentHeight | toControlHeight]\"\r\n        [disabled]=\"isdisabled\"\r\n        [readonly]=\"readonly\"\r\n      />\r\n      <input\r\n        type=\"submit\"\r\n        class=\"btn btn-secondary\"\r\n        id=\"{{name}}_search\"\r\n        (click)=\"searchClick()\"\r\n        [value]=\"buttontext\"\r\n      />\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
         }], ctorParameters: function () { return [{ type: SacFormLayoutDirective, decorators: [{
                     type: Host
                 }, {
@@ -1841,9 +1959,13 @@ class SACBootstrap5LayoutModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SACBootstrap5LayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SACBootstrap5LayoutModule, imports: [CommonModule,
             SacFormLayoutDirective,
+            SacToControlHeightPipe,
             SacToControlWidthCssPipe,
+            SacToLabelHeightPipe,
             SacToLabelWidthCssPipe], exports: [SacFormLayoutDirective,
+            SacToControlHeightPipe,
             SacToControlWidthCssPipe,
+            SacToLabelHeightPipe,
             SacToLabelWidthCssPipe] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SACBootstrap5LayoutModule, imports: [CommonModule] }); }
 }
@@ -1853,12 +1975,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     imports: [
                         CommonModule,
                         SacFormLayoutDirective,
+                        SacToControlHeightPipe,
                         SacToControlWidthCssPipe,
+                        SacToLabelHeightPipe,
                         SacToLabelWidthCssPipe,
                     ],
                     exports: [
                         SacFormLayoutDirective,
+                        SacToControlHeightPipe,
                         SacToControlWidthCssPipe,
+                        SacToLabelHeightPipe,
                         SacToLabelWidthCssPipe,
                     ],
                 }]
@@ -1892,7 +2018,7 @@ class SacDropdownComponent extends SacDropdownCommon {
                 multi: true,
                 useExisting: forwardRef(() => SacDropdownComponent),
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <select\r\n      #dropdownitem\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      class=\"form-select form-select-sm\"\r\n      [ngClass]=\"{'is-invalid': invalid && (dirty || touched) }\"\r\n      (blur)=\"onTouch()\"\r\n      (change)=\"setValue(dropdownitem.value)\"\r\n      [disabled]=\"isdisabled\"\r\n    >\r\n      <option *ngIf=\"emptylabel !== ''\" [ngValue]=\"emptyvalue\">\r\n        {{emptylabel}}\r\n      </option>\r\n\r\n      <ng-content></ng-content>\r\n\r\n      <ng-container *ngIf=\"groupitems === ''\">\r\n        <option\r\n          *ngFor=\"let item of options\"\r\n          [ngValue]=\"optionvalue ? item[optionvalue] : item\"\r\n          [disabled]=\"optionenabled !== '' && item[optionenabled] === false\"\r\n        >\r\n          <ng-template\r\n            *ngTemplateOutlet=\"optionlabeltemplate || defaultItemLabelTemplate;context:{ label: item[optionlabel], item: item }\"\r\n          >\r\n          </ng-template>\r\n        </option>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"groupitems !== ''\">\r\n        <optgroup\r\n          *ngFor=\"let group of options\"\r\n          [attr.label]=\"group[grouplabel]\"\r\n        >\r\n          <option\r\n            *ngFor=\"let item of group[groupitems]\"\r\n            [ngValue]=\"optionvalue ? item[optionvalue] : item\"\r\n            [disabled]=\"optionenabled !== '' && item[optionenabled] === false\"\r\n          >\r\n            <ng-template\r\n              *ngTemplateOutlet=\"optionlabeltemplate || defaultItemLabelTemplate;context:{ label: item[optionlabel], item: item }\"\r\n            >\r\n            </ng-template>\r\n          </option>\r\n        </optgroup>\r\n      </ng-container>\r\n    </select>\r\n    <div\r\n      class=\"invalid-feedback\"\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #defaultItemLabelTemplate let-label=\"label\">\r\n  {{label}}\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(function () { return NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return SacDropdownOptionDirective; }), selector: "[sacOption],option" }, { kind: "directive", type: i0.forwardRef(function () { return NgFor; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return NgTemplateOutlet; }), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i0.forwardRef(function () { return AsyncPipe; }), name: "async" }, { kind: "pipe", type: i0.forwardRef(function () { return SacToControlWidthCssPipe; }), name: "toControlWidthCss" }, { kind: "pipe", type: i0.forwardRef(function () { return SacToLabelWidthCssPipe; }), name: "toLabelWidthCss" }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <select\r\n      #dropdownitem\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      class=\"form-select\"\r\n      [class.form-select-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.form-select-lg]=\"componentHeight === ControlHeight.Large\"\r\n      [ngClass]=\"{'is-invalid': invalid && (dirty || touched) }\"\r\n      (blur)=\"onTouch()\"\r\n      (change)=\"setValue(dropdownitem.value)\"\r\n      [disabled]=\"isdisabled\"\r\n    >\r\n      <option *ngIf=\"emptylabel !== ''\" [ngValue]=\"emptyvalue\">\r\n        {{emptylabel}}\r\n      </option>\r\n\r\n      <ng-content></ng-content>\r\n\r\n      <ng-container *ngIf=\"groupitems === ''\">\r\n        <option\r\n          *ngFor=\"let item of options\"\r\n          [ngValue]=\"optionvalue ? item[optionvalue] : item\"\r\n          [disabled]=\"optionenabled !== '' && item[optionenabled] === false\"\r\n        >\r\n          <ng-template\r\n            *ngTemplateOutlet=\"optionlabeltemplate || defaultItemLabelTemplate;context:{ label: item[optionlabel], item: item }\"\r\n          >\r\n          </ng-template>\r\n        </option>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"groupitems !== ''\">\r\n        <optgroup\r\n          *ngFor=\"let group of options\"\r\n          [attr.label]=\"group[grouplabel]\"\r\n        >\r\n          <option\r\n            *ngFor=\"let item of group[groupitems]\"\r\n            [ngValue]=\"optionvalue ? item[optionvalue] : item\"\r\n            [disabled]=\"optionenabled !== '' && item[optionenabled] === false\"\r\n          >\r\n            <ng-template\r\n              *ngTemplateOutlet=\"optionlabeltemplate || defaultItemLabelTemplate;context:{ label: item[optionlabel], item: item }\"\r\n            >\r\n            </ng-template>\r\n          </option>\r\n        </optgroup>\r\n      </ng-container>\r\n    </select>\r\n    <div\r\n      class=\"invalid-feedback\"\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #defaultItemLabelTemplate let-label=\"label\">\r\n  {{label}}\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(function () { return NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return SacDropdownOptionDirective; }), selector: "[sacOption],option" }, { kind: "directive", type: i0.forwardRef(function () { return NgFor; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return NgTemplateOutlet; }), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i0.forwardRef(function () { return AsyncPipe; }), name: "async" }, { kind: "pipe", type: i0.forwardRef(function () { return SacToControlWidthCssPipe; }), name: "toControlWidthCss" }, { kind: "pipe", type: i0.forwardRef(function () { return SacToLabelWidthCssPipe; }), name: "toLabelWidthCss" }, { kind: "pipe", type: i0.forwardRef(function () { return SacToLabelHeightPipe; }), name: "toLabelHeight" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacDropdownComponent, decorators: [{
             type: Component,
@@ -1916,7 +2042,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         AsyncPipe,
                         SacToControlWidthCssPipe,
                         SacToLabelWidthCssPipe,
-                    ], template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <select\r\n      #dropdownitem\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      class=\"form-select form-select-sm\"\r\n      [ngClass]=\"{'is-invalid': invalid && (dirty || touched) }\"\r\n      (blur)=\"onTouch()\"\r\n      (change)=\"setValue(dropdownitem.value)\"\r\n      [disabled]=\"isdisabled\"\r\n    >\r\n      <option *ngIf=\"emptylabel !== ''\" [ngValue]=\"emptyvalue\">\r\n        {{emptylabel}}\r\n      </option>\r\n\r\n      <ng-content></ng-content>\r\n\r\n      <ng-container *ngIf=\"groupitems === ''\">\r\n        <option\r\n          *ngFor=\"let item of options\"\r\n          [ngValue]=\"optionvalue ? item[optionvalue] : item\"\r\n          [disabled]=\"optionenabled !== '' && item[optionenabled] === false\"\r\n        >\r\n          <ng-template\r\n            *ngTemplateOutlet=\"optionlabeltemplate || defaultItemLabelTemplate;context:{ label: item[optionlabel], item: item }\"\r\n          >\r\n          </ng-template>\r\n        </option>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"groupitems !== ''\">\r\n        <optgroup\r\n          *ngFor=\"let group of options\"\r\n          [attr.label]=\"group[grouplabel]\"\r\n        >\r\n          <option\r\n            *ngFor=\"let item of group[groupitems]\"\r\n            [ngValue]=\"optionvalue ? item[optionvalue] : item\"\r\n            [disabled]=\"optionenabled !== '' && item[optionenabled] === false\"\r\n          >\r\n            <ng-template\r\n              *ngTemplateOutlet=\"optionlabeltemplate || defaultItemLabelTemplate;context:{ label: item[optionlabel], item: item }\"\r\n            >\r\n            </ng-template>\r\n          </option>\r\n        </optgroup>\r\n      </ng-container>\r\n    </select>\r\n    <div\r\n      class=\"invalid-feedback\"\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #defaultItemLabelTemplate let-label=\"label\">\r\n  {{label}}\r\n</ng-template>\r\n" }]
+                        SacToLabelHeightPipe,
+                    ], template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <select\r\n      #dropdownitem\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      class=\"form-select\"\r\n      [class.form-select-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.form-select-lg]=\"componentHeight === ControlHeight.Large\"\r\n      [ngClass]=\"{'is-invalid': invalid && (dirty || touched) }\"\r\n      (blur)=\"onTouch()\"\r\n      (change)=\"setValue(dropdownitem.value)\"\r\n      [disabled]=\"isdisabled\"\r\n    >\r\n      <option *ngIf=\"emptylabel !== ''\" [ngValue]=\"emptyvalue\">\r\n        {{emptylabel}}\r\n      </option>\r\n\r\n      <ng-content></ng-content>\r\n\r\n      <ng-container *ngIf=\"groupitems === ''\">\r\n        <option\r\n          *ngFor=\"let item of options\"\r\n          [ngValue]=\"optionvalue ? item[optionvalue] : item\"\r\n          [disabled]=\"optionenabled !== '' && item[optionenabled] === false\"\r\n        >\r\n          <ng-template\r\n            *ngTemplateOutlet=\"optionlabeltemplate || defaultItemLabelTemplate;context:{ label: item[optionlabel], item: item }\"\r\n          >\r\n          </ng-template>\r\n        </option>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"groupitems !== ''\">\r\n        <optgroup\r\n          *ngFor=\"let group of options\"\r\n          [attr.label]=\"group[grouplabel]\"\r\n        >\r\n          <option\r\n            *ngFor=\"let item of group[groupitems]\"\r\n            [ngValue]=\"optionvalue ? item[optionvalue] : item\"\r\n            [disabled]=\"optionenabled !== '' && item[optionenabled] === false\"\r\n          >\r\n            <ng-template\r\n              *ngTemplateOutlet=\"optionlabeltemplate || defaultItemLabelTemplate;context:{ label: item[optionlabel], item: item }\"\r\n            >\r\n            </ng-template>\r\n          </option>\r\n        </optgroup>\r\n      </ng-container>\r\n    </select>\r\n    <div\r\n      class=\"invalid-feedback\"\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #defaultItemLabelTemplate let-label=\"label\">\r\n  {{label}}\r\n</ng-template>\r\n" }]
         }], ctorParameters: function () { return [{ type: SacFormLayoutDirective, decorators: [{
                     type: Host
                 }, {
@@ -1993,7 +2120,7 @@ class SacListboxComponent extends SacListboxCommon {
                 multi: true,
                 useExisting: forwardRef(() => SacListboxComponent),
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <select\r\n      multiple\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      class=\"form-select form-select-sm\"\r\n      [size]=\"rowsize\"\r\n      [ngClass]=\"{'is-invalid': invalid && (dirty || touched) }\"\r\n      (blur)=\"onTouch()\"\r\n      (change)=\"getSelectedItems($event.target)\"\r\n      [disabled]=\"isdisabled\"\r\n    >\r\n      <ng-content></ng-content>\r\n      <ng-container *ngIf=\"groupitems === ''\">\r\n        <option\r\n          *ngFor=\"let option of options\"\r\n          [value]=\"option[optionvalue]\"\r\n          [disabled]=\"optionenabled !== '' && option[optionenabled] === false\"\r\n        >\r\n          {{option[optionlabel]}}\r\n        </option>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"groupitems !== ''\">\r\n        <optgroup\r\n          *ngFor=\"let option of options\"\r\n          [attr.label]=\"option[grouplabel]\"\r\n        >\r\n          <option\r\n            *ngFor=\"let item of option[groupitems]\"\r\n            [value]=\"item[optionvalue]\"\r\n            [disabled]=\"optionenabled !== '' && item[optionenabled] === false\"\r\n          >\r\n            {{item[optionlabel]}}\r\n          </option>\r\n        </optgroup>\r\n      </ng-container>\r\n    </select>\r\n    <div\r\n      class=\"invalid-feedback\"\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(function () { return NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return NgFor; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i0.forwardRef(function () { return AsyncPipe; }), name: "async" }, { kind: "directive", type: i0.forwardRef(function () { return SacListboxOptionDirective; }), selector: "[sacOption],option" }, { kind: "pipe", type: i0.forwardRef(function () { return SacToControlWidthCssPipe; }), name: "toControlWidthCss" }, { kind: "pipe", type: i0.forwardRef(function () { return SacToLabelWidthCssPipe; }), name: "toLabelWidthCss" }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <select\r\n      multiple\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      class=\"form-select\"\r\n      [class.form-select-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.form-select-lg]=\"componentHeight === ControlHeight.Large\"\r\n      [size]=\"rowsize\"\r\n      [ngClass]=\"{'is-invalid': invalid && (dirty || touched) }\"\r\n      (blur)=\"onTouch()\"\r\n      (change)=\"getSelectedItems($event.target)\"\r\n      [disabled]=\"isdisabled\"\r\n    >\r\n      <ng-content></ng-content>\r\n      <ng-container *ngIf=\"groupitems === ''\">\r\n        <option\r\n          *ngFor=\"let option of options\"\r\n          [value]=\"option[optionvalue]\"\r\n          [disabled]=\"optionenabled !== '' && option[optionenabled] === false\"\r\n        >\r\n          {{option[optionlabel]}}\r\n        </option>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"groupitems !== ''\">\r\n        <optgroup\r\n          *ngFor=\"let option of options\"\r\n          [attr.label]=\"option[grouplabel]\"\r\n        >\r\n          <option\r\n            *ngFor=\"let item of option[groupitems]\"\r\n            [value]=\"item[optionvalue]\"\r\n            [disabled]=\"optionenabled !== '' && item[optionenabled] === false\"\r\n          >\r\n            {{item[optionlabel]}}\r\n          </option>\r\n        </optgroup>\r\n      </ng-container>\r\n    </select>\r\n    <div\r\n      class=\"invalid-feedback\"\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(function () { return NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return NgFor; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i0.forwardRef(function () { return AsyncPipe; }), name: "async" }, { kind: "directive", type: i0.forwardRef(function () { return SacListboxOptionDirective; }), selector: "[sacOption],option" }, { kind: "pipe", type: i0.forwardRef(function () { return SacToControlWidthCssPipe; }), name: "toControlWidthCss" }, { kind: "pipe", type: i0.forwardRef(function () { return SacToLabelWidthCssPipe; }), name: "toLabelWidthCss" }, { kind: "pipe", type: i0.forwardRef(function () { return SacToLabelHeightPipe; }), name: "toLabelHeight" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacListboxComponent, decorators: [{
             type: Component,
@@ -2016,7 +2143,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         forwardRef(() => SacListboxOptionDirective),
                         SacToControlWidthCssPipe,
                         SacToLabelWidthCssPipe,
-                    ], template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <select\r\n      multiple\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      class=\"form-select form-select-sm\"\r\n      [size]=\"rowsize\"\r\n      [ngClass]=\"{'is-invalid': invalid && (dirty || touched) }\"\r\n      (blur)=\"onTouch()\"\r\n      (change)=\"getSelectedItems($event.target)\"\r\n      [disabled]=\"isdisabled\"\r\n    >\r\n      <ng-content></ng-content>\r\n      <ng-container *ngIf=\"groupitems === ''\">\r\n        <option\r\n          *ngFor=\"let option of options\"\r\n          [value]=\"option[optionvalue]\"\r\n          [disabled]=\"optionenabled !== '' && option[optionenabled] === false\"\r\n        >\r\n          {{option[optionlabel]}}\r\n        </option>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"groupitems !== ''\">\r\n        <optgroup\r\n          *ngFor=\"let option of options\"\r\n          [attr.label]=\"option[grouplabel]\"\r\n        >\r\n          <option\r\n            *ngFor=\"let item of option[groupitems]\"\r\n            [value]=\"item[optionvalue]\"\r\n            [disabled]=\"optionenabled !== '' && item[optionenabled] === false\"\r\n          >\r\n            {{item[optionlabel]}}\r\n          </option>\r\n        </optgroup>\r\n      </ng-container>\r\n    </select>\r\n    <div\r\n      class=\"invalid-feedback\"\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+                        SacToLabelHeightPipe,
+                    ], template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <select\r\n      multiple\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      class=\"form-select\"\r\n      [class.form-select-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.form-select-lg]=\"componentHeight === ControlHeight.Large\"\r\n      [size]=\"rowsize\"\r\n      [ngClass]=\"{'is-invalid': invalid && (dirty || touched) }\"\r\n      (blur)=\"onTouch()\"\r\n      (change)=\"getSelectedItems($event.target)\"\r\n      [disabled]=\"isdisabled\"\r\n    >\r\n      <ng-content></ng-content>\r\n      <ng-container *ngIf=\"groupitems === ''\">\r\n        <option\r\n          *ngFor=\"let option of options\"\r\n          [value]=\"option[optionvalue]\"\r\n          [disabled]=\"optionenabled !== '' && option[optionenabled] === false\"\r\n        >\r\n          {{option[optionlabel]}}\r\n        </option>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"groupitems !== ''\">\r\n        <optgroup\r\n          *ngFor=\"let option of options\"\r\n          [attr.label]=\"option[grouplabel]\"\r\n        >\r\n          <option\r\n            *ngFor=\"let item of option[groupitems]\"\r\n            [value]=\"item[optionvalue]\"\r\n            [disabled]=\"optionenabled !== '' && item[optionenabled] === false\"\r\n          >\r\n            {{item[optionlabel]}}\r\n          </option>\r\n        </optgroup>\r\n      </ng-container>\r\n    </select>\r\n    <div\r\n      class=\"invalid-feedback\"\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
         }], ctorParameters: function () { return [{ type: SacFormLayoutDirective, decorators: [{
                     type: Host
                 }, {
@@ -2152,7 +2280,7 @@ class SacMultilanguagemenuComponent extends SacContextmenuCommon {
                 provide: SacContextmenuCommon,
                 useExisting: forwardRef(() => SacMultilanguagemenuComponent),
             },
-        ], usesInheritance: true, ngImport: i0, template: "<ng-container\r\n  [ngTemplateOutlet]=\"inputtemplate || defaultInputTemplate\"\r\n></ng-container>\r\n<ng-container\r\n  [ngTemplateOutlet]=\"buttontemplate || defaultButtonTemplate\"\r\n></ng-container>\r\n<ng-container\r\n  [ngTemplateOutlet]=\"validationtemplate || defaultValidationTemplate\"\r\n></ng-container>\r\n\r\n<ul\r\n  class=\"dropdown-menu dropdown-menu-right\"\r\n  sacMultilanguageMenuContainer\r\n  [class.show]=\"isopen\"\r\n>\r\n  <ng-content></ng-content>\r\n</ul>\r\n\r\n<ng-template #defaultButtonTemplate>\r\n  <button\r\n    sacMultilanguageMenuAnchor\r\n    class=\"btn btn-secondary dropdown-toggle\"\r\n    type=\"button\"\r\n    (click)=\"toggle()\"\r\n  ></button>\r\n</ng-template>\r\n\r\n<ng-template #defaultInputTemplate>\r\n  <input type=\"text\" class=\"form-control form-control-sm\" />\r\n</ng-template>\r\n\r\n<ng-template #defaultValidationTemplate></ng-template>\r\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: SacMultilanguagemenuContainerDirective, selector: "[sacMultilanguageMenuContainer]" }, { kind: "directive", type: SacMultilanguagemenuAnchorDirective, selector: "[sacMultilanguageMenuAnchor]" }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<ng-container\r\n  [ngTemplateOutlet]=\"inputtemplate || defaultInputTemplate\"\r\n></ng-container>\r\n<ng-container\r\n  [ngTemplateOutlet]=\"buttontemplate || defaultButtonTemplate\"\r\n></ng-container>\r\n<ng-container\r\n  [ngTemplateOutlet]=\"validationtemplate || defaultValidationTemplate\"\r\n></ng-container>\r\n\r\n<ul\r\n  class=\"dropdown-menu dropdown-menu-right\"\r\n  sacMultilanguageMenuContainer\r\n  [class.show]=\"isopen\"\r\n>\r\n  <ng-content></ng-content>\r\n</ul>\r\n\r\n<ng-template #defaultButtonTemplate>\r\n  <button\r\n    sacMultilanguageMenuAnchor\r\n    class=\"btn btn-secondary dropdown-toggle\"\r\n    type=\"button\"\r\n    (click)=\"toggle()\"\r\n  ></button>\r\n</ng-template>\r\n\r\n<ng-template #defaultInputTemplate>\r\n  <input type=\"text\" class=\"form-control\" />\r\n</ng-template>\r\n\r\n<ng-template #defaultValidationTemplate></ng-template>\r\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: SacMultilanguagemenuContainerDirective, selector: "[sacMultilanguageMenuContainer]" }, { kind: "directive", type: SacMultilanguagemenuAnchorDirective, selector: "[sacMultilanguageMenuAnchor]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacMultilanguagemenuComponent, decorators: [{
             type: Component,
@@ -2165,7 +2293,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         NgTemplateOutlet,
                         SacMultilanguagemenuContainerDirective,
                         SacMultilanguagemenuAnchorDirective,
-                    ], template: "<ng-container\r\n  [ngTemplateOutlet]=\"inputtemplate || defaultInputTemplate\"\r\n></ng-container>\r\n<ng-container\r\n  [ngTemplateOutlet]=\"buttontemplate || defaultButtonTemplate\"\r\n></ng-container>\r\n<ng-container\r\n  [ngTemplateOutlet]=\"validationtemplate || defaultValidationTemplate\"\r\n></ng-container>\r\n\r\n<ul\r\n  class=\"dropdown-menu dropdown-menu-right\"\r\n  sacMultilanguageMenuContainer\r\n  [class.show]=\"isopen\"\r\n>\r\n  <ng-content></ng-content>\r\n</ul>\r\n\r\n<ng-template #defaultButtonTemplate>\r\n  <button\r\n    sacMultilanguageMenuAnchor\r\n    class=\"btn btn-secondary dropdown-toggle\"\r\n    type=\"button\"\r\n    (click)=\"toggle()\"\r\n  ></button>\r\n</ng-template>\r\n\r\n<ng-template #defaultInputTemplate>\r\n  <input type=\"text\" class=\"form-control form-control-sm\" />\r\n</ng-template>\r\n\r\n<ng-template #defaultValidationTemplate></ng-template>\r\n" }]
+                    ], template: "<ng-container\r\n  [ngTemplateOutlet]=\"inputtemplate || defaultInputTemplate\"\r\n></ng-container>\r\n<ng-container\r\n  [ngTemplateOutlet]=\"buttontemplate || defaultButtonTemplate\"\r\n></ng-container>\r\n<ng-container\r\n  [ngTemplateOutlet]=\"validationtemplate || defaultValidationTemplate\"\r\n></ng-container>\r\n\r\n<ul\r\n  class=\"dropdown-menu dropdown-menu-right\"\r\n  sacMultilanguageMenuContainer\r\n  [class.show]=\"isopen\"\r\n>\r\n  <ng-content></ng-content>\r\n</ul>\r\n\r\n<ng-template #defaultButtonTemplate>\r\n  <button\r\n    sacMultilanguageMenuAnchor\r\n    class=\"btn btn-secondary dropdown-toggle\"\r\n    type=\"button\"\r\n    (click)=\"toggle()\"\r\n  ></button>\r\n</ng-template>\r\n\r\n<ng-template #defaultInputTemplate>\r\n  <input type=\"text\" class=\"form-control\" />\r\n</ng-template>\r\n\r\n<ng-template #defaultValidationTemplate></ng-template>\r\n" }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -2226,7 +2354,7 @@ class SacMultilanguageInputComponent extends SacMultilanguageInputCommon {
                 multi: true,
                 useExisting: forwardRef(() => SacMultilanguageInputComponent),
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group input-group-sm\"\r\n      [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      placement=\"bottom-right\"\r\n      sac-multilanguagemenu\r\n      [buttontemplate]=\"menuButton\"\r\n      [inputtemplate]=\"menuInput\"\r\n      [validationtemplate]=\"validationMessage\"\r\n      #contextmenu\r\n    >\r\n      <ng-template #menuInput>\r\n        <input\r\n          id=\"{{name}}\"\r\n          name=\"{{name}}\"\r\n          type=\"text\"\r\n          class=\"form-control form-control-sm\"\r\n          [value]=\"LanguageValue\"\r\n          [attr.placeholder]=\"placeholder\"\r\n          (blur)=\"onTouch()\"\r\n          (input)=\"SetLanguageValue($event.target.value)\"\r\n          [attr.maxlength]=\"maxlength\"\r\n          [ngClass]=\"{'is-invalid': invalid && (dirty || touched) }\"\r\n          [disabled]=\"isdisabled\"\r\n        />\r\n      </ng-template>\r\n\r\n      <ng-template #menuButton>\r\n        <button\r\n          sacMultilanguageMenuAnchor\r\n          [id]=\"name + '_dropdownitem'\"\r\n          type=\"button\"\r\n          class=\"btn dropdown-toggle\"\r\n          (click)=\"contextmenu.toggle()\"\r\n          [ngClass]=\"[IsAnyEmpty() ? 'btn-warning' : 'btn-secondary']\"\r\n        >\r\n          <img\r\n            src=\"{{SelectedIcon}}\"\r\n            class=\"align-baseline mr-1 ml-1\"\r\n            *ngIf=\"SelectedIconType === IconType.Image\"\r\n          />\r\n          <span\r\n            [ngClass]=\"SelectedIcon\"\r\n            class=\"align-baseline mr-1 ml-1\"\r\n            *ngIf=\"SelectedIconType === IconType.CssSprite\"\r\n          ></span>\r\n        </button>\r\n      </ng-template>\r\n\r\n      <ng-template #validationMessage>\r\n        <div\r\n          *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n          class=\"invalid-feedback\"\r\n        >\r\n          {{ GetErrorMessage() | async }}\r\n        </div></ng-template\r\n      >\r\n\r\n      <ng-container *ngFor=\"let sprache of Languages\">\r\n        <sac-multilanguagemenubutton\r\n          *ngIf=\"sprache.IconType === IconType.Image\"\r\n          text=\"{{sprache.Text}}\"\r\n          image=\"{{sprache.Icon}}\"\r\n          [cssclass]=\"IsEmpty(sprache) ? 'text-danger border-left border-danger': ''\"\r\n          (clicked)=\"SelectLanguage(sprache)\"\r\n        ></sac-multilanguagemenubutton>\r\n        <sac-multilanguagemenubutton\r\n          *ngIf=\"sprache.IconType === IconType.CssSprite\"\r\n          text=\"{{sprache.Text}}\"\r\n          icon=\"{{sprache.Icon}}\"\r\n          [cssclass]=\"IsEmpty(sprache) ? 'text-danger border-left border-danger': ''\"\r\n          (clicked)=\"SelectLanguage(sprache)\"\r\n        ></sac-multilanguagemenubutton>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n<div class=\"row\">\r\n  <div class=\"col text-right\"></div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SacMultilanguagemenuComponent, selector: "[sac-multilanguagemenu]", inputs: ["inputtemplate", "validationtemplate"] }, { kind: "directive", type: SacMultilanguagemenuAnchorDirective, selector: "[sacMultilanguageMenuAnchor]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: SacMultilanguagemenuItemButtonComponent, selector: "sac-multilanguagemenubutton" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group\"\r\n      [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n      [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      placement=\"bottom-right\"\r\n      sac-multilanguagemenu\r\n      [buttontemplate]=\"menuButton\"\r\n      [inputtemplate]=\"menuInput\"\r\n      [validationtemplate]=\"validationMessage\"\r\n      #contextmenu\r\n    >\r\n      <ng-template #menuInput>\r\n        <input\r\n          id=\"{{name}}\"\r\n          name=\"{{name}}\"\r\n          type=\"text\"\r\n          class=\"form-control\"\r\n          [value]=\"LanguageValue\"\r\n          [attr.placeholder]=\"placeholder\"\r\n          (blur)=\"onTouch()\"\r\n          (input)=\"SetLanguageValue($event.target.value)\"\r\n          [attr.maxlength]=\"maxlength\"\r\n          [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n          [ngClass]=\"[componentHeight | toControlHeight]\"\r\n          [disabled]=\"isdisabled\"\r\n        />\r\n      </ng-template>\r\n\r\n      <ng-template #menuButton>\r\n        <button\r\n          sacMultilanguageMenuAnchor\r\n          [id]=\"name + '_dropdownitem'\"\r\n          type=\"button\"\r\n          class=\"btn dropdown-toggle\"\r\n          (click)=\"contextmenu.toggle()\"\r\n          [ngClass]=\"[IsAnyEmpty() ? 'btn-warning' : 'btn-secondary']\"\r\n        >\r\n          <img\r\n            src=\"{{SelectedIcon}}\"\r\n            class=\"align-baseline mr-1 ml-1\"\r\n            *ngIf=\"SelectedIconType === IconType.Image\"\r\n          />\r\n          <span\r\n            [ngClass]=\"SelectedIcon\"\r\n            class=\"align-baseline mr-1 ml-1\"\r\n            *ngIf=\"SelectedIconType === IconType.CssSprite\"\r\n          ></span>\r\n        </button>\r\n      </ng-template>\r\n\r\n      <ng-template #validationMessage>\r\n        <div\r\n          *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n          class=\"invalid-feedback\"\r\n        >\r\n          {{ GetErrorMessage() | async }}\r\n        </div></ng-template\r\n      >\r\n\r\n      <ng-container *ngFor=\"let sprache of Languages\">\r\n        <sac-multilanguagemenubutton\r\n          *ngIf=\"sprache.IconType === IconType.Image\"\r\n          text=\"{{sprache.Text}}\"\r\n          image=\"{{sprache.Icon}}\"\r\n          [cssclass]=\"IsEmpty(sprache) ? 'text-danger border-left border-danger': ''\"\r\n          (clicked)=\"SelectLanguage(sprache)\"\r\n        ></sac-multilanguagemenubutton>\r\n        <sac-multilanguagemenubutton\r\n          *ngIf=\"sprache.IconType === IconType.CssSprite\"\r\n          text=\"{{sprache.Text}}\"\r\n          icon=\"{{sprache.Icon}}\"\r\n          [cssclass]=\"IsEmpty(sprache) ? 'text-danger border-left border-danger': ''\"\r\n          (clicked)=\"SelectLanguage(sprache)\"\r\n        ></sac-multilanguagemenubutton>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n<div class=\"row\">\r\n  <div class=\"col text-right\"></div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SacMultilanguagemenuComponent, selector: "[sac-multilanguagemenu]", inputs: ["inputtemplate", "validationtemplate"] }, { kind: "directive", type: SacMultilanguagemenuAnchorDirective, selector: "[sacMultilanguageMenuAnchor]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: SacMultilanguagemenuItemButtonComponent, selector: "sac-multilanguagemenubutton" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToLabelHeightPipe, name: "toLabelHeight" }, { kind: "pipe", type: SacToControlHeightPipe, name: "toControlHeight" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacMultilanguageInputComponent, decorators: [{
             type: Component,
@@ -2251,7 +2379,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         SacMultilanguagemenuItemButtonComponent,
                         SacToControlWidthCssPipe,
                         SacToLabelWidthCssPipe,
-                    ], template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group input-group-sm\"\r\n      [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      placement=\"bottom-right\"\r\n      sac-multilanguagemenu\r\n      [buttontemplate]=\"menuButton\"\r\n      [inputtemplate]=\"menuInput\"\r\n      [validationtemplate]=\"validationMessage\"\r\n      #contextmenu\r\n    >\r\n      <ng-template #menuInput>\r\n        <input\r\n          id=\"{{name}}\"\r\n          name=\"{{name}}\"\r\n          type=\"text\"\r\n          class=\"form-control form-control-sm\"\r\n          [value]=\"LanguageValue\"\r\n          [attr.placeholder]=\"placeholder\"\r\n          (blur)=\"onTouch()\"\r\n          (input)=\"SetLanguageValue($event.target.value)\"\r\n          [attr.maxlength]=\"maxlength\"\r\n          [ngClass]=\"{'is-invalid': invalid && (dirty || touched) }\"\r\n          [disabled]=\"isdisabled\"\r\n        />\r\n      </ng-template>\r\n\r\n      <ng-template #menuButton>\r\n        <button\r\n          sacMultilanguageMenuAnchor\r\n          [id]=\"name + '_dropdownitem'\"\r\n          type=\"button\"\r\n          class=\"btn dropdown-toggle\"\r\n          (click)=\"contextmenu.toggle()\"\r\n          [ngClass]=\"[IsAnyEmpty() ? 'btn-warning' : 'btn-secondary']\"\r\n        >\r\n          <img\r\n            src=\"{{SelectedIcon}}\"\r\n            class=\"align-baseline mr-1 ml-1\"\r\n            *ngIf=\"SelectedIconType === IconType.Image\"\r\n          />\r\n          <span\r\n            [ngClass]=\"SelectedIcon\"\r\n            class=\"align-baseline mr-1 ml-1\"\r\n            *ngIf=\"SelectedIconType === IconType.CssSprite\"\r\n          ></span>\r\n        </button>\r\n      </ng-template>\r\n\r\n      <ng-template #validationMessage>\r\n        <div\r\n          *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n          class=\"invalid-feedback\"\r\n        >\r\n          {{ GetErrorMessage() | async }}\r\n        </div></ng-template\r\n      >\r\n\r\n      <ng-container *ngFor=\"let sprache of Languages\">\r\n        <sac-multilanguagemenubutton\r\n          *ngIf=\"sprache.IconType === IconType.Image\"\r\n          text=\"{{sprache.Text}}\"\r\n          image=\"{{sprache.Icon}}\"\r\n          [cssclass]=\"IsEmpty(sprache) ? 'text-danger border-left border-danger': ''\"\r\n          (clicked)=\"SelectLanguage(sprache)\"\r\n        ></sac-multilanguagemenubutton>\r\n        <sac-multilanguagemenubutton\r\n          *ngIf=\"sprache.IconType === IconType.CssSprite\"\r\n          text=\"{{sprache.Text}}\"\r\n          icon=\"{{sprache.Icon}}\"\r\n          [cssclass]=\"IsEmpty(sprache) ? 'text-danger border-left border-danger': ''\"\r\n          (clicked)=\"SelectLanguage(sprache)\"\r\n        ></sac-multilanguagemenubutton>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n<div class=\"row\">\r\n  <div class=\"col text-right\"></div>\r\n</div>\r\n" }]
+                        SacToLabelHeightPipe,
+                        SacToControlHeightPipe,
+                    ], template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group\"\r\n      [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n      [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      placement=\"bottom-right\"\r\n      sac-multilanguagemenu\r\n      [buttontemplate]=\"menuButton\"\r\n      [inputtemplate]=\"menuInput\"\r\n      [validationtemplate]=\"validationMessage\"\r\n      #contextmenu\r\n    >\r\n      <ng-template #menuInput>\r\n        <input\r\n          id=\"{{name}}\"\r\n          name=\"{{name}}\"\r\n          type=\"text\"\r\n          class=\"form-control\"\r\n          [value]=\"LanguageValue\"\r\n          [attr.placeholder]=\"placeholder\"\r\n          (blur)=\"onTouch()\"\r\n          (input)=\"SetLanguageValue($event.target.value)\"\r\n          [attr.maxlength]=\"maxlength\"\r\n          [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n          [ngClass]=\"[componentHeight | toControlHeight]\"\r\n          [disabled]=\"isdisabled\"\r\n        />\r\n      </ng-template>\r\n\r\n      <ng-template #menuButton>\r\n        <button\r\n          sacMultilanguageMenuAnchor\r\n          [id]=\"name + '_dropdownitem'\"\r\n          type=\"button\"\r\n          class=\"btn dropdown-toggle\"\r\n          (click)=\"contextmenu.toggle()\"\r\n          [ngClass]=\"[IsAnyEmpty() ? 'btn-warning' : 'btn-secondary']\"\r\n        >\r\n          <img\r\n            src=\"{{SelectedIcon}}\"\r\n            class=\"align-baseline mr-1 ml-1\"\r\n            *ngIf=\"SelectedIconType === IconType.Image\"\r\n          />\r\n          <span\r\n            [ngClass]=\"SelectedIcon\"\r\n            class=\"align-baseline mr-1 ml-1\"\r\n            *ngIf=\"SelectedIconType === IconType.CssSprite\"\r\n          ></span>\r\n        </button>\r\n      </ng-template>\r\n\r\n      <ng-template #validationMessage>\r\n        <div\r\n          *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n          class=\"invalid-feedback\"\r\n        >\r\n          {{ GetErrorMessage() | async }}\r\n        </div></ng-template\r\n      >\r\n\r\n      <ng-container *ngFor=\"let sprache of Languages\">\r\n        <sac-multilanguagemenubutton\r\n          *ngIf=\"sprache.IconType === IconType.Image\"\r\n          text=\"{{sprache.Text}}\"\r\n          image=\"{{sprache.Icon}}\"\r\n          [cssclass]=\"IsEmpty(sprache) ? 'text-danger border-left border-danger': ''\"\r\n          (clicked)=\"SelectLanguage(sprache)\"\r\n        ></sac-multilanguagemenubutton>\r\n        <sac-multilanguagemenubutton\r\n          *ngIf=\"sprache.IconType === IconType.CssSprite\"\r\n          text=\"{{sprache.Text}}\"\r\n          icon=\"{{sprache.Icon}}\"\r\n          [cssclass]=\"IsEmpty(sprache) ? 'text-danger border-left border-danger': ''\"\r\n          (clicked)=\"SelectLanguage(sprache)\"\r\n        ></sac-multilanguagemenubutton>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n<div class=\"row\">\r\n  <div class=\"col text-right\"></div>\r\n</div>\r\n" }]
         }], ctorParameters: function () { return [{ type: SacFormLayoutDirective, decorators: [{
                     type: Host
                 }, {
@@ -2289,7 +2419,7 @@ class SacMultilanguageInputAreaComponent extends SacMultilanguageInputAreaCommon
                 multi: true,
                 useExisting: forwardRef(() => SacMultilanguageInputAreaComponent),
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group input-group-sm\"\r\n      [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      placement=\"bottom-right\"\r\n      sac-multilanguagemenu\r\n      [buttontemplate]=\"menuButton\"\r\n      [inputtemplate]=\"menuInput\"\r\n      [validationtemplate]=\"validationMessage\"\r\n      #contextmenu\r\n    >\r\n      <ng-template #menuInput>\r\n        <textarea\r\n          id=\"{{name}}\"\r\n          name=\"{{name}}\"\r\n          type=\"text\"\r\n          class=\"form-control form-control-sm\"\r\n          [value]=\"LanguageValue\"\r\n          [attr.placeholder]=\"placeholder\"\r\n          (blur)=\"onTouch()\"\r\n          style=\"height: auto\"\r\n          (input)=\"SetLanguageValue($event.target.value)\"\r\n          [attr.rows]=\"rows\"\r\n          [attr.maxlength]=\"maxlength\"\r\n          [ngClass]=\"{'is-invalid': invalid && (dirty || touched) }\"\r\n          [disabled]=\"isdisabled\"\r\n        ></textarea>\r\n      </ng-template>\r\n\r\n      <ng-template #menuButton>\r\n        <button\r\n          sacMultilanguageMenuAnchor\r\n          [id]=\"name + '_dropdownitem'\"\r\n          type=\"button\"\r\n          class=\"btn dropdown-toggle\"\r\n          (click)=\"contextmenu.toggle()\"\r\n          [ngClass]=\"[IsAnyEmpty() ? 'btn-warning' : 'btn-secondary']\"\r\n        >\r\n          <img\r\n            src=\"{{SelectedIcon}}\"\r\n            class=\"align-baseline mr-1 ml-1\"\r\n            *ngIf=\"SelectedIconType === IconType.Image\"\r\n          />\r\n          <i\r\n            [ngClass]=\"SelectedIcon\"\r\n            class=\"align-baseline mr-1 ml-1\"\r\n            *ngIf=\"SelectedIconType === IconType.CssSprite\"\r\n          ></i>\r\n        </button>\r\n      </ng-template>\r\n\r\n      <ng-template #validationMessage>\r\n        <div\r\n          *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n          class=\"invalid-feedback\"\r\n        >\r\n          {{ GetErrorMessage() | async }}\r\n        </div></ng-template\r\n      >\r\n\r\n      <ng-container *ngFor=\"let sprache of Languages\">\r\n        <sac-multilanguagemenubutton\r\n          *ngIf=\"sprache.IconType === IconType.Image\"\r\n          text=\"{{sprache.Text}}\"\r\n          image=\"{{sprache.Icon}}\"\r\n          [cssclass]=\"IsEmpty(sprache) ? 'text-danger border-left border-danger': ''\"\r\n          (clicked)=\"SelectLanguage(sprache)\"\r\n        ></sac-multilanguagemenubutton>\r\n        <sac-multilanguagemenubutton\r\n          *ngIf=\"sprache.IconType === IconType.CssSprite\"\r\n          text=\"{{sprache.Text}}\"\r\n          icon=\"{{sprache.Icon}}\"\r\n          [cssclass]=\"IsEmpty(sprache) ? 'text-danger border-left border-danger': ''\"\r\n          (clicked)=\"SelectLanguage(sprache)\"\r\n        ></sac-multilanguagemenubutton>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n<div class=\"row\">\r\n  <div class=\"col text-right\"></div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SacMultilanguagemenuComponent, selector: "[sac-multilanguagemenu]", inputs: ["inputtemplate", "validationtemplate"] }, { kind: "directive", type: SacMultilanguagemenuAnchorDirective, selector: "[sacMultilanguageMenuAnchor]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: SacMultilanguagemenuItemButtonComponent, selector: "sac-multilanguagemenubutton" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group\"\r\n      [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n      [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      placement=\"bottom-right\"\r\n      sac-multilanguagemenu\r\n      [buttontemplate]=\"menuButton\"\r\n      [inputtemplate]=\"menuInput\"\r\n      [validationtemplate]=\"validationMessage\"\r\n      #contextmenu\r\n    >\r\n      <ng-template #menuInput>\r\n        <textarea\r\n          id=\"{{name}}\"\r\n          name=\"{{name}}\"\r\n          type=\"text\"\r\n          class=\"form-control\"\r\n          [value]=\"LanguageValue\"\r\n          [attr.placeholder]=\"placeholder\"\r\n          (blur)=\"onTouch()\"\r\n          style=\"height: auto\"\r\n          (input)=\"SetLanguageValue($event.target.value)\"\r\n          [attr.rows]=\"rows\"\r\n          [attr.maxlength]=\"maxlength\"\r\n          [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n          [ngClass]=\"[componentHeight | toControlHeight]\"\r\n          [disabled]=\"isdisabled\"\r\n        ></textarea>\r\n      </ng-template>\r\n\r\n      <ng-template #menuButton>\r\n        <button\r\n          sacMultilanguageMenuAnchor\r\n          [id]=\"name + '_dropdownitem'\"\r\n          type=\"button\"\r\n          class=\"btn dropdown-toggle\"\r\n          (click)=\"contextmenu.toggle()\"\r\n          [ngClass]=\"[IsAnyEmpty() ? 'btn-warning' : 'btn-secondary']\"\r\n        >\r\n          <img\r\n            src=\"{{SelectedIcon}}\"\r\n            class=\"align-baseline mr-1 ml-1\"\r\n            *ngIf=\"SelectedIconType === IconType.Image\"\r\n          />\r\n          <i\r\n            [ngClass]=\"SelectedIcon\"\r\n            class=\"align-baseline mr-1 ml-1\"\r\n            *ngIf=\"SelectedIconType === IconType.CssSprite\"\r\n          ></i>\r\n        </button>\r\n      </ng-template>\r\n\r\n      <ng-template #validationMessage>\r\n        <div\r\n          *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n          class=\"invalid-feedback\"\r\n        >\r\n          {{ GetErrorMessage() | async }}\r\n        </div></ng-template\r\n      >\r\n\r\n      <ng-container *ngFor=\"let sprache of Languages\">\r\n        <sac-multilanguagemenubutton\r\n          *ngIf=\"sprache.IconType === IconType.Image\"\r\n          text=\"{{sprache.Text}}\"\r\n          image=\"{{sprache.Icon}}\"\r\n          [cssclass]=\"IsEmpty(sprache) ? 'text-danger border-left border-danger': ''\"\r\n          (clicked)=\"SelectLanguage(sprache)\"\r\n        ></sac-multilanguagemenubutton>\r\n        <sac-multilanguagemenubutton\r\n          *ngIf=\"sprache.IconType === IconType.CssSprite\"\r\n          text=\"{{sprache.Text}}\"\r\n          icon=\"{{sprache.Icon}}\"\r\n          [cssclass]=\"IsEmpty(sprache) ? 'text-danger border-left border-danger': ''\"\r\n          (clicked)=\"SelectLanguage(sprache)\"\r\n        ></sac-multilanguagemenubutton>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n<div class=\"row\">\r\n  <div class=\"col text-right\"></div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SacMultilanguagemenuComponent, selector: "[sac-multilanguagemenu]", inputs: ["inputtemplate", "validationtemplate"] }, { kind: "directive", type: SacMultilanguagemenuAnchorDirective, selector: "[sacMultilanguageMenuAnchor]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: SacMultilanguagemenuItemButtonComponent, selector: "sac-multilanguagemenubutton" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToLabelHeightPipe, name: "toLabelHeight" }, { kind: "pipe", type: SacToControlHeightPipe, name: "toControlHeight" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacMultilanguageInputAreaComponent, decorators: [{
             type: Component,
@@ -2314,7 +2444,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         SacMultilanguagemenuItemButtonComponent,
                         SacToControlWidthCssPipe,
                         SacToLabelWidthCssPipe,
-                    ], template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group input-group-sm\"\r\n      [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      placement=\"bottom-right\"\r\n      sac-multilanguagemenu\r\n      [buttontemplate]=\"menuButton\"\r\n      [inputtemplate]=\"menuInput\"\r\n      [validationtemplate]=\"validationMessage\"\r\n      #contextmenu\r\n    >\r\n      <ng-template #menuInput>\r\n        <textarea\r\n          id=\"{{name}}\"\r\n          name=\"{{name}}\"\r\n          type=\"text\"\r\n          class=\"form-control form-control-sm\"\r\n          [value]=\"LanguageValue\"\r\n          [attr.placeholder]=\"placeholder\"\r\n          (blur)=\"onTouch()\"\r\n          style=\"height: auto\"\r\n          (input)=\"SetLanguageValue($event.target.value)\"\r\n          [attr.rows]=\"rows\"\r\n          [attr.maxlength]=\"maxlength\"\r\n          [ngClass]=\"{'is-invalid': invalid && (dirty || touched) }\"\r\n          [disabled]=\"isdisabled\"\r\n        ></textarea>\r\n      </ng-template>\r\n\r\n      <ng-template #menuButton>\r\n        <button\r\n          sacMultilanguageMenuAnchor\r\n          [id]=\"name + '_dropdownitem'\"\r\n          type=\"button\"\r\n          class=\"btn dropdown-toggle\"\r\n          (click)=\"contextmenu.toggle()\"\r\n          [ngClass]=\"[IsAnyEmpty() ? 'btn-warning' : 'btn-secondary']\"\r\n        >\r\n          <img\r\n            src=\"{{SelectedIcon}}\"\r\n            class=\"align-baseline mr-1 ml-1\"\r\n            *ngIf=\"SelectedIconType === IconType.Image\"\r\n          />\r\n          <i\r\n            [ngClass]=\"SelectedIcon\"\r\n            class=\"align-baseline mr-1 ml-1\"\r\n            *ngIf=\"SelectedIconType === IconType.CssSprite\"\r\n          ></i>\r\n        </button>\r\n      </ng-template>\r\n\r\n      <ng-template #validationMessage>\r\n        <div\r\n          *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n          class=\"invalid-feedback\"\r\n        >\r\n          {{ GetErrorMessage() | async }}\r\n        </div></ng-template\r\n      >\r\n\r\n      <ng-container *ngFor=\"let sprache of Languages\">\r\n        <sac-multilanguagemenubutton\r\n          *ngIf=\"sprache.IconType === IconType.Image\"\r\n          text=\"{{sprache.Text}}\"\r\n          image=\"{{sprache.Icon}}\"\r\n          [cssclass]=\"IsEmpty(sprache) ? 'text-danger border-left border-danger': ''\"\r\n          (clicked)=\"SelectLanguage(sprache)\"\r\n        ></sac-multilanguagemenubutton>\r\n        <sac-multilanguagemenubutton\r\n          *ngIf=\"sprache.IconType === IconType.CssSprite\"\r\n          text=\"{{sprache.Text}}\"\r\n          icon=\"{{sprache.Icon}}\"\r\n          [cssclass]=\"IsEmpty(sprache) ? 'text-danger border-left border-danger': ''\"\r\n          (clicked)=\"SelectLanguage(sprache)\"\r\n        ></sac-multilanguagemenubutton>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n<div class=\"row\">\r\n  <div class=\"col text-right\"></div>\r\n</div>\r\n" }]
+                        SacToLabelHeightPipe,
+                        SacToControlHeightPipe,
+                    ], template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group\"\r\n      [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n      [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      placement=\"bottom-right\"\r\n      sac-multilanguagemenu\r\n      [buttontemplate]=\"menuButton\"\r\n      [inputtemplate]=\"menuInput\"\r\n      [validationtemplate]=\"validationMessage\"\r\n      #contextmenu\r\n    >\r\n      <ng-template #menuInput>\r\n        <textarea\r\n          id=\"{{name}}\"\r\n          name=\"{{name}}\"\r\n          type=\"text\"\r\n          class=\"form-control\"\r\n          [value]=\"LanguageValue\"\r\n          [attr.placeholder]=\"placeholder\"\r\n          (blur)=\"onTouch()\"\r\n          style=\"height: auto\"\r\n          (input)=\"SetLanguageValue($event.target.value)\"\r\n          [attr.rows]=\"rows\"\r\n          [attr.maxlength]=\"maxlength\"\r\n          [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n          [ngClass]=\"[componentHeight | toControlHeight]\"\r\n          [disabled]=\"isdisabled\"\r\n        ></textarea>\r\n      </ng-template>\r\n\r\n      <ng-template #menuButton>\r\n        <button\r\n          sacMultilanguageMenuAnchor\r\n          [id]=\"name + '_dropdownitem'\"\r\n          type=\"button\"\r\n          class=\"btn dropdown-toggle\"\r\n          (click)=\"contextmenu.toggle()\"\r\n          [ngClass]=\"[IsAnyEmpty() ? 'btn-warning' : 'btn-secondary']\"\r\n        >\r\n          <img\r\n            src=\"{{SelectedIcon}}\"\r\n            class=\"align-baseline mr-1 ml-1\"\r\n            *ngIf=\"SelectedIconType === IconType.Image\"\r\n          />\r\n          <i\r\n            [ngClass]=\"SelectedIcon\"\r\n            class=\"align-baseline mr-1 ml-1\"\r\n            *ngIf=\"SelectedIconType === IconType.CssSprite\"\r\n          ></i>\r\n        </button>\r\n      </ng-template>\r\n\r\n      <ng-template #validationMessage>\r\n        <div\r\n          *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n          class=\"invalid-feedback\"\r\n        >\r\n          {{ GetErrorMessage() | async }}\r\n        </div></ng-template\r\n      >\r\n\r\n      <ng-container *ngFor=\"let sprache of Languages\">\r\n        <sac-multilanguagemenubutton\r\n          *ngIf=\"sprache.IconType === IconType.Image\"\r\n          text=\"{{sprache.Text}}\"\r\n          image=\"{{sprache.Icon}}\"\r\n          [cssclass]=\"IsEmpty(sprache) ? 'text-danger border-left border-danger': ''\"\r\n          (clicked)=\"SelectLanguage(sprache)\"\r\n        ></sac-multilanguagemenubutton>\r\n        <sac-multilanguagemenubutton\r\n          *ngIf=\"sprache.IconType === IconType.CssSprite\"\r\n          text=\"{{sprache.Text}}\"\r\n          icon=\"{{sprache.Icon}}\"\r\n          [cssclass]=\"IsEmpty(sprache) ? 'text-danger border-left border-danger': ''\"\r\n          (clicked)=\"SelectLanguage(sprache)\"\r\n        ></sac-multilanguagemenubutton>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n<div class=\"row\">\r\n  <div class=\"col text-right\"></div>\r\n</div>\r\n" }]
         }], ctorParameters: function () { return [{ type: SacFormLayoutDirective, decorators: [{
                     type: Host
                 }, {
@@ -2369,7 +2501,7 @@ class SacStaticLabelComponent extends SacStaticLabelCommon {
                 multi: true,
                 useExisting: forwardRef(() => SacStaticLabelComponent),
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}_label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div class=\"form-control-plaintext\" [innerHTML]=\"value\"></div>\r\n    <label\r\n      for=\"{{name}}\"\r\n      class=\"col-left control-label\"\r\n      *ngIf=\"isAdaptiveLabel && !disablelabel\"\r\n      >{{label}}</label\r\n    >\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}_label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"form-control-plaintext\"\r\n      [ngClass]=\"[componentHeight | toControlHeight]\"\r\n      [innerHTML]=\"value\"\r\n    ></div>\r\n    <label\r\n      for=\"{{name}}\"\r\n      class=\"col-left control-label\"\r\n      *ngIf=\"isAdaptiveLabel && !disablelabel\"\r\n      >{{label}}</label\r\n    >\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToLabelHeightPipe, name: "toLabelHeight" }, { kind: "pipe", type: SacToControlHeightPipe, name: "toControlHeight" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacStaticLabelComponent, decorators: [{
             type: Component,
@@ -2384,7 +2516,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             multi: true,
                             useExisting: forwardRef(() => SacStaticLabelComponent),
                         },
-                    ], standalone: true, imports: [NgIf, NgClass, SacToControlWidthCssPipe, SacToLabelWidthCssPipe], template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}_label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div class=\"form-control-plaintext\" [innerHTML]=\"value\"></div>\r\n    <label\r\n      for=\"{{name}}\"\r\n      class=\"col-left control-label\"\r\n      *ngIf=\"isAdaptiveLabel && !disablelabel\"\r\n      >{{label}}</label\r\n    >\r\n  </div>\r\n</div>\r\n" }]
+                    ], standalone: true, imports: [
+                        NgIf,
+                        NgClass,
+                        SacToControlWidthCssPipe,
+                        SacToLabelWidthCssPipe,
+                        SacToLabelHeightPipe,
+                        SacToControlHeightPipe,
+                    ], template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}_label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"form-control-plaintext\"\r\n      [ngClass]=\"[componentHeight | toControlHeight]\"\r\n      [innerHTML]=\"value\"\r\n    ></div>\r\n    <label\r\n      for=\"{{name}}\"\r\n      class=\"col-left control-label\"\r\n      *ngIf=\"isAdaptiveLabel && !disablelabel\"\r\n      >{{label}}</label\r\n    >\r\n  </div>\r\n</div>\r\n" }]
         }], ctorParameters: function () { return [{ type: SacFormLayoutDirective, decorators: [{
                     type: Host
                 }, {
@@ -2396,12 +2535,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  *
  * @example
  *  <ngStaticFormContainer name='myformcontainer' label="My Custom Form Control" [isrequired]='false'>
- *      <input type="range" class="form-control form-control-sm" />
+ *      <input type="range" class="form-control" />
  *  </ngStaticFormContainer>
  *
  * @example
  * <ngStaticFormContainer name='myformcintainer' label="My Custom Form Control" [isrequired]='false' tooltiptext="Dies ist ein Tooltip Text">
- *     <input type="range" class="form-control form-control-sm" />
+ *     <input type="range" class="form-control" />
  * </ngStaticFormContainer>
  *
  **/
@@ -2427,7 +2566,7 @@ class SacStaticFormContainerComponent extends SacStaticFormContainerCommon {
                 multi: true,
                 useExisting: forwardRef(() => SacStaticFormContainerComponent),
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}_label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <ng-content></ng-content>\r\n    <label\r\n      for=\"{{name}}\"\r\n      class=\"form-label-adaptive form-label-fixed\"\r\n      [ngClass]=\"{ 'required': isrequired }\"\r\n      *ngIf=\"isAdaptiveLabel && !disablelabel\"\r\n      >{{label}}</label\r\n    >\r\n    <div\r\n      class=\"invalid-feedback\"\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}_label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <ng-content></ng-content>\r\n    <label\r\n      for=\"{{name}}\"\r\n      class=\"form-label-adaptive form-label-fixed\"\r\n      [ngClass]=\"{ 'required': isrequired }\"\r\n      *ngIf=\"isAdaptiveLabel && !disablelabel\"\r\n      >{{label}}</label\r\n    >\r\n    <div\r\n      class=\"invalid-feedback\"\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToLabelHeightPipe, name: "toLabelHeight" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacStaticFormContainerComponent, decorators: [{
             type: Component,
@@ -2448,7 +2587,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         AsyncPipe,
                         SacToControlWidthCssPipe,
                         SacToLabelWidthCssPipe,
-                    ], template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}_label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <ng-content></ng-content>\r\n    <label\r\n      for=\"{{name}}\"\r\n      class=\"form-label-adaptive form-label-fixed\"\r\n      [ngClass]=\"{ 'required': isrequired }\"\r\n      *ngIf=\"isAdaptiveLabel && !disablelabel\"\r\n      >{{label}}</label\r\n    >\r\n    <div\r\n      class=\"invalid-feedback\"\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+                        SacToLabelHeightPipe,
+                    ], template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}_label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <ng-content></ng-content>\r\n    <label\r\n      for=\"{{name}}\"\r\n      class=\"form-label-adaptive form-label-fixed\"\r\n      [ngClass]=\"{ 'required': isrequired }\"\r\n      *ngIf=\"isAdaptiveLabel && !disablelabel\"\r\n      >{{label}}</label\r\n    >\r\n    <div\r\n      class=\"invalid-feedback\"\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
         }], ctorParameters: function () { return [{ type: SacFormLayoutDirective, decorators: [{
                     type: Host
                 }, {
@@ -2562,7 +2702,7 @@ class SacTinyMceComponent extends SacTinyMceCommon {
                 useExisting: forwardRef(() => SacTinyMceComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <div\r\n    class=\"col\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n  >\r\n    <label for=\"{{name}}\" class=\"form-control-label col-form-label-sm\"\r\n      >{{label}}</label\r\n    >\r\n  </div>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <editor\r\n      [id]=\"name + '_tinymce'\"\r\n      [init]=\"_config\"\r\n      [initialValue]=\"value\"\r\n      ngModel\r\n      [ngModelOptions]=\"{standalone: true}\"\r\n      (ngModelChange)=\"setValue($event)\"\r\n      (onSaveContent)=\"save($event.event.content)\"\r\n      [disabled]=\"disabled\"\r\n      [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    ></editor>\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<sac-dialog\r\n  *ngIf=\"selectdialogvisible\"\r\n  [allowesc]=\"false\"\r\n  [backdrop]=\"true\"\r\n  [(isvisible)]=\"selectdialogvisible\"\r\n  title=\"{{ lngResourceService.GetString('TINYMCE_FILESELECT_DIALOGTITLE') | async }}\"\r\n  size=\"large\"\r\n  height=\"500px\"\r\n>\r\n  <ng-container dialogbody>\r\n    <sac-filebrowser\r\n      [apiurl]=\"filebrowserapiurl\"\r\n      (file)=\"selectDialogSettings.value = $event\"\r\n      [allowfoldercreate]=\"allowfoldercreate\"\r\n      [allowfolderrename]=\"allowfolderrename\"\r\n      [allowfolderdelete]=\"allowfolderdelete\"\r\n      [allowfileupload]=\"allowfileupload\"\r\n      [allowfilerename]=\"allowfilerename\"\r\n      [allowfiledelete]=\"allowfiledelete\"\r\n      [selectedfile]=\"selectDialogSettings.value\"\r\n      [allowedtypes]=\"selectDialogSettings.allowedtypes\"\r\n    ></sac-filebrowser>\r\n  </ng-container>\r\n  <ng-container dialogfooter>\r\n    <sac-button\r\n      role=\"primary\"\r\n      [name]=\"name + '_modalOk'\"\r\n      text=\"{{ lngResourceService.GetString('TINYMCE_FILESELECT_OK') | async }}\"\r\n      (clicked)=\"setSelectDialogResult()\"\r\n    ></sac-button>\r\n    <sac-button\r\n      [name]=\"name + '_modalClose'\"\r\n      text=\"{{ lngResourceService.GetString('TINYMCE_FILESELECT_CANCEL') | async }}\"\r\n      (clicked)=\"closeSelectDialog()\"\r\n    ></sac-button>\r\n  </ng-container>\r\n</sac-dialog>\r\n", styles: [".is-invalid{border:1px solid var(--bs-form-invalid-border-color)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: EditorComponent, selector: "editor", inputs: ["cloudChannel", "apiKey", "init", "id", "initialValue", "outputFormat", "inline", "tagName", "plugins", "toolbar", "modelEvents", "allowedEvents", "ignoreEvents", "disabled"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SacDialogComponent, selector: "sac-dialog" }, { kind: "component", type: SacButtonComponent, selector: "sac-button" }, { kind: "component", type: SacBrowserComponent, selector: "sac-filebrowser" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <div\r\n    class=\"col\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\r\n  >\r\n    <label for=\"{{name}}\" class=\"form-control-label\">{{label}}</label>\r\n  </div>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <editor\r\n      [id]=\"name + '_tinymce'\"\r\n      [init]=\"_config\"\r\n      [initialValue]=\"value\"\r\n      ngModel\r\n      [ngModelOptions]=\"{standalone: true}\"\r\n      (ngModelChange)=\"setValue($event)\"\r\n      (onSaveContent)=\"save($event.event.content)\"\r\n      [disabled]=\"disabled\"\r\n      [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    ></editor>\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<sac-dialog\r\n  *ngIf=\"selectdialogvisible\"\r\n  [allowesc]=\"false\"\r\n  [backdrop]=\"true\"\r\n  [(isvisible)]=\"selectdialogvisible\"\r\n  title=\"{{ lngResourceService.GetString(validationKeyService.TinyMceFileselectDialogtitle) | async }}\"\r\n  size=\"large\"\r\n  height=\"500px\"\r\n>\r\n  <ng-container dialogbody>\r\n    <sac-filebrowser\r\n      [apiurl]=\"filebrowserapiurl\"\r\n      (file)=\"selectDialogSettings.value = $event\"\r\n      [allowfoldercreate]=\"allowfoldercreate\"\r\n      [allowfolderrename]=\"allowfolderrename\"\r\n      [allowfolderdelete]=\"allowfolderdelete\"\r\n      [allowfileupload]=\"allowfileupload\"\r\n      [allowfilerename]=\"allowfilerename\"\r\n      [allowfiledelete]=\"allowfiledelete\"\r\n      [selectedfile]=\"selectDialogSettings.value\"\r\n      [allowedtypes]=\"selectDialogSettings.allowedtypes\"\r\n    ></sac-filebrowser>\r\n  </ng-container>\r\n  <ng-container dialogfooter>\r\n    <sac-button\r\n      role=\"primary\"\r\n      [name]=\"name + '_modalOk'\"\r\n      text=\"{{ lngResourceService.GetString(validationKeyService.TinyMceFileselectOk) | async }}\"\r\n      (clicked)=\"setSelectDialogResult()\"\r\n    ></sac-button>\r\n    <sac-button\r\n      [name]=\"name + '_modalClose'\"\r\n      text=\"{{ lngResourceService.GetString(validationKeyService.TinyMceFileselectCancel) | async }}\"\r\n      (clicked)=\"closeSelectDialog()\"\r\n    ></sac-button>\r\n  </ng-container>\r\n</sac-dialog>\r\n", styles: [".is-invalid{border:1px solid var(--bs-form-invalid-border-color)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: EditorComponent, selector: "editor", inputs: ["cloudChannel", "apiKey", "init", "id", "initialValue", "outputFormat", "inline", "tagName", "plugins", "toolbar", "modelEvents", "allowedEvents", "ignoreEvents", "disabled"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SacDialogComponent, selector: "sac-dialog" }, { kind: "component", type: SacButtonComponent, selector: "sac-button" }, { kind: "component", type: SacBrowserComponent, selector: "sac-filebrowser" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToLabelHeightPipe, name: "toLabelHeight" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacTinyMceComponent, decorators: [{
             type: Component,
@@ -2588,7 +2728,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         AsyncPipe,
                         SacToControlWidthCssPipe,
                         SacToLabelWidthCssPipe,
-                    ], template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <div\r\n    class=\"col\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n  >\r\n    <label for=\"{{name}}\" class=\"form-control-label col-form-label-sm\"\r\n      >{{label}}</label\r\n    >\r\n  </div>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <editor\r\n      [id]=\"name + '_tinymce'\"\r\n      [init]=\"_config\"\r\n      [initialValue]=\"value\"\r\n      ngModel\r\n      [ngModelOptions]=\"{standalone: true}\"\r\n      (ngModelChange)=\"setValue($event)\"\r\n      (onSaveContent)=\"save($event.event.content)\"\r\n      [disabled]=\"disabled\"\r\n      [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    ></editor>\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<sac-dialog\r\n  *ngIf=\"selectdialogvisible\"\r\n  [allowesc]=\"false\"\r\n  [backdrop]=\"true\"\r\n  [(isvisible)]=\"selectdialogvisible\"\r\n  title=\"{{ lngResourceService.GetString('TINYMCE_FILESELECT_DIALOGTITLE') | async }}\"\r\n  size=\"large\"\r\n  height=\"500px\"\r\n>\r\n  <ng-container dialogbody>\r\n    <sac-filebrowser\r\n      [apiurl]=\"filebrowserapiurl\"\r\n      (file)=\"selectDialogSettings.value = $event\"\r\n      [allowfoldercreate]=\"allowfoldercreate\"\r\n      [allowfolderrename]=\"allowfolderrename\"\r\n      [allowfolderdelete]=\"allowfolderdelete\"\r\n      [allowfileupload]=\"allowfileupload\"\r\n      [allowfilerename]=\"allowfilerename\"\r\n      [allowfiledelete]=\"allowfiledelete\"\r\n      [selectedfile]=\"selectDialogSettings.value\"\r\n      [allowedtypes]=\"selectDialogSettings.allowedtypes\"\r\n    ></sac-filebrowser>\r\n  </ng-container>\r\n  <ng-container dialogfooter>\r\n    <sac-button\r\n      role=\"primary\"\r\n      [name]=\"name + '_modalOk'\"\r\n      text=\"{{ lngResourceService.GetString('TINYMCE_FILESELECT_OK') | async }}\"\r\n      (clicked)=\"setSelectDialogResult()\"\r\n    ></sac-button>\r\n    <sac-button\r\n      [name]=\"name + '_modalClose'\"\r\n      text=\"{{ lngResourceService.GetString('TINYMCE_FILESELECT_CANCEL') | async }}\"\r\n      (clicked)=\"closeSelectDialog()\"\r\n    ></sac-button>\r\n  </ng-container>\r\n</sac-dialog>\r\n", styles: [".is-invalid{border:1px solid var(--bs-form-invalid-border-color)}\n"] }]
+                        SacToLabelHeightPipe,
+                    ], template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <div\r\n    class=\"col\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\r\n  >\r\n    <label for=\"{{name}}\" class=\"form-control-label\">{{label}}</label>\r\n  </div>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <editor\r\n      [id]=\"name + '_tinymce'\"\r\n      [init]=\"_config\"\r\n      [initialValue]=\"value\"\r\n      ngModel\r\n      [ngModelOptions]=\"{standalone: true}\"\r\n      (ngModelChange)=\"setValue($event)\"\r\n      (onSaveContent)=\"save($event.event.content)\"\r\n      [disabled]=\"disabled\"\r\n      [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    ></editor>\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<sac-dialog\r\n  *ngIf=\"selectdialogvisible\"\r\n  [allowesc]=\"false\"\r\n  [backdrop]=\"true\"\r\n  [(isvisible)]=\"selectdialogvisible\"\r\n  title=\"{{ lngResourceService.GetString(validationKeyService.TinyMceFileselectDialogtitle) | async }}\"\r\n  size=\"large\"\r\n  height=\"500px\"\r\n>\r\n  <ng-container dialogbody>\r\n    <sac-filebrowser\r\n      [apiurl]=\"filebrowserapiurl\"\r\n      (file)=\"selectDialogSettings.value = $event\"\r\n      [allowfoldercreate]=\"allowfoldercreate\"\r\n      [allowfolderrename]=\"allowfolderrename\"\r\n      [allowfolderdelete]=\"allowfolderdelete\"\r\n      [allowfileupload]=\"allowfileupload\"\r\n      [allowfilerename]=\"allowfilerename\"\r\n      [allowfiledelete]=\"allowfiledelete\"\r\n      [selectedfile]=\"selectDialogSettings.value\"\r\n      [allowedtypes]=\"selectDialogSettings.allowedtypes\"\r\n    ></sac-filebrowser>\r\n  </ng-container>\r\n  <ng-container dialogfooter>\r\n    <sac-button\r\n      role=\"primary\"\r\n      [name]=\"name + '_modalOk'\"\r\n      text=\"{{ lngResourceService.GetString(validationKeyService.TinyMceFileselectOk) | async }}\"\r\n      (clicked)=\"setSelectDialogResult()\"\r\n    ></sac-button>\r\n    <sac-button\r\n      [name]=\"name + '_modalClose'\"\r\n      text=\"{{ lngResourceService.GetString(validationKeyService.TinyMceFileselectCancel) | async }}\"\r\n      (clicked)=\"closeSelectDialog()\"\r\n    ></sac-button>\r\n  </ng-container>\r\n</sac-dialog>\r\n", styles: [".is-invalid{border:1px solid var(--bs-form-invalid-border-color)}\n"] }]
         }], ctorParameters: function () { return [{ type: SacFormLayoutDirective, decorators: [{
                     type: Host
                 }, {
@@ -2644,7 +2785,7 @@ class SacDropzoneSingleComponent extends SacDropzoneSingleCommon {
                 multi: true,
                 useExisting: forwardRef(() => SacDropzoneSingleComponent),
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}_label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"dropzone d-flex justify-content-center position-relative\"\r\n      (drop)=\"dropHandler($event)\"\r\n      (dragover)=\"onDragOver($event)\"\r\n      (dragleave)=\"onDragLeave($event)\"\r\n      [style.min-height]=\"uploadheight\"\r\n      [class.active]=\"active\"\r\n      [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n    >\r\n      <div\r\n        class=\"content d-flex justify-content-center position-relative\"\r\n        *ngIf=\"uploads.length === 0\"\r\n      >\r\n        <div class=\"align-self-center text-center\">\r\n          <div\r\n            [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n          >\r\n            <ng-content></ng-content>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div\r\n        class=\"content d-flex justify-content-center align-items-center w-50 my-3\"\r\n        *ngIf=\"uploads.length > 0\"\r\n      >\r\n        <div class=\"flex-fill progress-container\">\r\n          <div class=\"dropzone-uploadstates\" *ngFor=\"let file of uploads\">\r\n            <div class=\"input-group upload-component upload-component-multiple\">\r\n              <div class=\"form-control upload-progress border-secondary\">\r\n                <div class=\"progress\">\r\n                  <div\r\n                    class=\"progress-bar\"\r\n                    [class.progress-bar-success]=\"file.progress===100\"\r\n                    role=\"progressbar\"\r\n                    [attr.aria-valuenow]=\"file.progress\"\r\n                    aria-valuemin=\"0\"\r\n                    aria-valuemax=\"100\"\r\n                    [style.width.%]=\"file.progress\"\r\n                  >\r\n                    <span class=\"progress-text text-dark\">{{ file.name }}</span>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <a\r\n                class=\"btn\"\r\n                (click)=\"cancel(file.uploadId)\"\r\n                [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n              >\r\n                <span [class]=\"IconDelete\"></span>\r\n              </a>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <input\r\n        #files\r\n        id=\"{{ name }}_uploadinput\"\r\n        type=\"file\"\r\n        class=\"custom-file-input\"\r\n        (click)=\"files.value = ''\"\r\n        (uploadxState)=\"onUpload($event)\"\r\n        [disabled]=\"HasQueueItem()\"\r\n      />\r\n    </div>\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".dropzone{min-height:9.75rem;border:.125rem dashed lightgray;border-radius:.5rem;background:transparent}.dropzone.is-invalid{border-color:var(--bs-form-invalid-border-color)}.dropzone .content{position:relative;inset:0}.dropzone .content .is-invalid{color:var(--bs-form-invalid-border-color)}.dropzone .content .progress-container{min-width:50%;z-index:100}.dropzone .content .dropzone-uploadstates .upload-progress{padding:0}.dropzone .content .dropzone-uploadstates .upload-progress .progress{height:100%;border-top-right-radius:0;border-bottom-right-radius:0}.dropzone .content .dropzone-uploadstates .upload-progress .progress .progress-text{left:0;right:0;position:absolute}.dropzone .custom-file-input{min-height:100%;height:unset;width:100%;opacity:0;position:absolute}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}_label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"dropzone d-flex justify-content-center position-relative\"\r\n      (drop)=\"dropHandler($event)\"\r\n      (dragover)=\"onDragOver($event)\"\r\n      (dragleave)=\"onDragLeave($event)\"\r\n      [style.min-height]=\"uploadheight\"\r\n      [class.active]=\"active\"\r\n      [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n    >\r\n      <div\r\n        class=\"content d-flex justify-content-center position-relative\"\r\n        *ngIf=\"uploads.length === 0\"\r\n      >\r\n        <div class=\"align-self-center text-center\">\r\n          <div\r\n            [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n          >\r\n            <ng-content></ng-content>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div\r\n        class=\"content d-flex justify-content-center align-items-center w-50 my-3\"\r\n        *ngIf=\"uploads.length > 0\"\r\n      >\r\n        <div class=\"flex-fill progress-container\">\r\n          <div class=\"dropzone-uploadstates\" *ngFor=\"let file of uploads\">\r\n            <div\r\n              class=\"input-group upload-component upload-component-multiple\"\r\n              [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n              [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n            >\r\n              <div class=\"form-control upload-progress border-secondary\">\r\n                <div class=\"progress\">\r\n                  <div\r\n                    class=\"progress-bar\"\r\n                    [class.progress-bar-success]=\"file.progress===100\"\r\n                    role=\"progressbar\"\r\n                    [attr.aria-valuenow]=\"file.progress\"\r\n                    aria-valuemin=\"0\"\r\n                    aria-valuemax=\"100\"\r\n                    [style.width.%]=\"file.progress\"\r\n                  >\r\n                    <span class=\"progress-text text-dark\">{{ file.name }}</span>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <a\r\n                class=\"btn\"\r\n                (click)=\"cancel(file.uploadId)\"\r\n                [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n              >\r\n                <span [class]=\"IconDelete\"></span>\r\n              </a>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <input\r\n        #files\r\n        id=\"{{ name }}_uploadinput\"\r\n        type=\"file\"\r\n        class=\"custom-file-input\"\r\n        (click)=\"files.value = ''\"\r\n        (uploadxState)=\"onUpload($event)\"\r\n        [disabled]=\"HasQueueItem()\"\r\n      />\r\n    </div>\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".dropzone{min-height:9.75rem;border:.125rem dashed lightgray;border-radius:.5rem;background:transparent}.dropzone.is-invalid{border-color:var(--bs-form-invalid-border-color)}.dropzone .content{position:relative;inset:0}.dropzone .content .is-invalid{color:var(--bs-form-invalid-border-color)}.dropzone .content .progress-container{min-width:50%;z-index:100}.dropzone .content .dropzone-uploadstates .upload-progress{padding:0}.dropzone .content .dropzone-uploadstates .upload-progress .progress{height:100%;border-top-right-radius:0;border-bottom-right-radius:0}.dropzone .content .dropzone-uploadstates .upload-progress .progress .progress-text{left:0;right:0;position:absolute}.dropzone .custom-file-input{min-height:100%;height:unset;width:100%;opacity:0;position:absolute}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToLabelHeightPipe, name: "toLabelHeight" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacDropzoneSingleComponent, decorators: [{
             type: Component,
@@ -2666,7 +2807,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         AsyncPipe,
                         SacToControlWidthCssPipe,
                         SacToLabelWidthCssPipe,
-                    ], template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}_label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"dropzone d-flex justify-content-center position-relative\"\r\n      (drop)=\"dropHandler($event)\"\r\n      (dragover)=\"onDragOver($event)\"\r\n      (dragleave)=\"onDragLeave($event)\"\r\n      [style.min-height]=\"uploadheight\"\r\n      [class.active]=\"active\"\r\n      [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n    >\r\n      <div\r\n        class=\"content d-flex justify-content-center position-relative\"\r\n        *ngIf=\"uploads.length === 0\"\r\n      >\r\n        <div class=\"align-self-center text-center\">\r\n          <div\r\n            [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n          >\r\n            <ng-content></ng-content>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div\r\n        class=\"content d-flex justify-content-center align-items-center w-50 my-3\"\r\n        *ngIf=\"uploads.length > 0\"\r\n      >\r\n        <div class=\"flex-fill progress-container\">\r\n          <div class=\"dropzone-uploadstates\" *ngFor=\"let file of uploads\">\r\n            <div class=\"input-group upload-component upload-component-multiple\">\r\n              <div class=\"form-control upload-progress border-secondary\">\r\n                <div class=\"progress\">\r\n                  <div\r\n                    class=\"progress-bar\"\r\n                    [class.progress-bar-success]=\"file.progress===100\"\r\n                    role=\"progressbar\"\r\n                    [attr.aria-valuenow]=\"file.progress\"\r\n                    aria-valuemin=\"0\"\r\n                    aria-valuemax=\"100\"\r\n                    [style.width.%]=\"file.progress\"\r\n                  >\r\n                    <span class=\"progress-text text-dark\">{{ file.name }}</span>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <a\r\n                class=\"btn\"\r\n                (click)=\"cancel(file.uploadId)\"\r\n                [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n              >\r\n                <span [class]=\"IconDelete\"></span>\r\n              </a>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <input\r\n        #files\r\n        id=\"{{ name }}_uploadinput\"\r\n        type=\"file\"\r\n        class=\"custom-file-input\"\r\n        (click)=\"files.value = ''\"\r\n        (uploadxState)=\"onUpload($event)\"\r\n        [disabled]=\"HasQueueItem()\"\r\n      />\r\n    </div>\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".dropzone{min-height:9.75rem;border:.125rem dashed lightgray;border-radius:.5rem;background:transparent}.dropzone.is-invalid{border-color:var(--bs-form-invalid-border-color)}.dropzone .content{position:relative;inset:0}.dropzone .content .is-invalid{color:var(--bs-form-invalid-border-color)}.dropzone .content .progress-container{min-width:50%;z-index:100}.dropzone .content .dropzone-uploadstates .upload-progress{padding:0}.dropzone .content .dropzone-uploadstates .upload-progress .progress{height:100%;border-top-right-radius:0;border-bottom-right-radius:0}.dropzone .content .dropzone-uploadstates .upload-progress .progress .progress-text{left:0;right:0;position:absolute}.dropzone .custom-file-input{min-height:100%;height:unset;width:100%;opacity:0;position:absolute}\n"] }]
+                        SacToLabelHeightPipe,
+                    ], template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}_label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"dropzone d-flex justify-content-center position-relative\"\r\n      (drop)=\"dropHandler($event)\"\r\n      (dragover)=\"onDragOver($event)\"\r\n      (dragleave)=\"onDragLeave($event)\"\r\n      [style.min-height]=\"uploadheight\"\r\n      [class.active]=\"active\"\r\n      [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n    >\r\n      <div\r\n        class=\"content d-flex justify-content-center position-relative\"\r\n        *ngIf=\"uploads.length === 0\"\r\n      >\r\n        <div class=\"align-self-center text-center\">\r\n          <div\r\n            [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n          >\r\n            <ng-content></ng-content>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div\r\n        class=\"content d-flex justify-content-center align-items-center w-50 my-3\"\r\n        *ngIf=\"uploads.length > 0\"\r\n      >\r\n        <div class=\"flex-fill progress-container\">\r\n          <div class=\"dropzone-uploadstates\" *ngFor=\"let file of uploads\">\r\n            <div\r\n              class=\"input-group upload-component upload-component-multiple\"\r\n              [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n              [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n            >\r\n              <div class=\"form-control upload-progress border-secondary\">\r\n                <div class=\"progress\">\r\n                  <div\r\n                    class=\"progress-bar\"\r\n                    [class.progress-bar-success]=\"file.progress===100\"\r\n                    role=\"progressbar\"\r\n                    [attr.aria-valuenow]=\"file.progress\"\r\n                    aria-valuemin=\"0\"\r\n                    aria-valuemax=\"100\"\r\n                    [style.width.%]=\"file.progress\"\r\n                  >\r\n                    <span class=\"progress-text text-dark\">{{ file.name }}</span>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <a\r\n                class=\"btn\"\r\n                (click)=\"cancel(file.uploadId)\"\r\n                [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n              >\r\n                <span [class]=\"IconDelete\"></span>\r\n              </a>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <input\r\n        #files\r\n        id=\"{{ name }}_uploadinput\"\r\n        type=\"file\"\r\n        class=\"custom-file-input\"\r\n        (click)=\"files.value = ''\"\r\n        (uploadxState)=\"onUpload($event)\"\r\n        [disabled]=\"HasQueueItem()\"\r\n      />\r\n    </div>\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".dropzone{min-height:9.75rem;border:.125rem dashed lightgray;border-radius:.5rem;background:transparent}.dropzone.is-invalid{border-color:var(--bs-form-invalid-border-color)}.dropzone .content{position:relative;inset:0}.dropzone .content .is-invalid{color:var(--bs-form-invalid-border-color)}.dropzone .content .progress-container{min-width:50%;z-index:100}.dropzone .content .dropzone-uploadstates .upload-progress{padding:0}.dropzone .content .dropzone-uploadstates .upload-progress .progress{height:100%;border-top-right-radius:0;border-bottom-right-radius:0}.dropzone .content .dropzone-uploadstates .upload-progress .progress .progress-text{left:0;right:0;position:absolute}.dropzone .custom-file-input{min-height:100%;height:unset;width:100%;opacity:0;position:absolute}\n"] }]
         }], ctorParameters: function () { return [{ type: SacFormLayoutDirective, decorators: [{
                     type: Host
                 }, {
@@ -2701,7 +2843,7 @@ class SacUploadComponent extends SacUploadSingleCommon {
                 multi: true,
                 useExisting: forwardRef(() => SacUploadComponent),
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}_label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group upload-component upload-single\"\r\n      [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      <!-- image-preview-input -->\r\n      <div\r\n        class=\"btn upload-input custom-file\"\r\n        [class.disabled]=\"HasQueueItem()\"\r\n        [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n        [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n      >\r\n        <i class=\"pe-2\" [class]=\"IconBrowse\"></i>\r\n        <span class=\"upload-browse\"\r\n          >{{ lngResourceService.GetString('UPLOAD_BUTTON_BROWSE') | async\r\n          }}</span\r\n        >\r\n        <input\r\n          type=\"file\"\r\n          class=\"custom-file-input\"\r\n          #files\r\n          (click)=\"files.value = ''\"\r\n          (uploadxState)=\"onUpload($event)\"\r\n          multiple\r\n          [disabled]=\"HasQueueItem()\"\r\n        />\r\n      </div>\r\n      <div\r\n        class=\"form-control upload-progress\"\r\n        [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n      >\r\n        <div class=\"progress\">\r\n          <div\r\n            class=\"progress-bar\"\r\n            [class.progress-bar-success]=\"Progress()===100\"\r\n            role=\"progressbar\"\r\n            [attr.aria-valuenow]=\"Progress()\"\r\n            aria-valuemin=\"0\"\r\n            aria-valuemax=\"100\"\r\n            [style.width.%]=\"Progress()\"\r\n          >\r\n            <span class=\"progress-text text-dark\"\r\n              >{{ Filename() | async }}</span\r\n            >\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <button\r\n        class=\"btn\"\r\n        (click)=\"cancelAll()\"\r\n        [attr.disabled]=\"HasQueueItem() === false ? 'disabled' : null\"\r\n        [class.disabled]=\"HasQueueItem() === false ? 'disabled' : null\"\r\n        [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n        [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n      >\r\n        <span [class]=\"IconDelete\"></span>\r\n      </button>\r\n      <button\r\n        *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && IsPaused() === false)\"\r\n        class=\"btn\"\r\n        (click)=\"pauseAll()\"\r\n        [attr.disabled]=\"IsUploading() === false ? 'disabled' : null\"\r\n        [class.disabled]=\"IsUploading() === false ? 'disabled' : null\"\r\n        [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n        [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n      >\r\n        <span [class]=\"IconPause\"></span>\r\n      </button>\r\n      <button\r\n        *ngIf=\"autoupload && enablepause && IsPaused()\"\r\n        class=\"btn\"\r\n        (click)=\"uploadAll()\"\r\n        [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n        [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n      >\r\n        <span [class]=\"IconContinue\"></span>\r\n      </button>\r\n      <button\r\n        *ngIf=\"autoupload === false\"\r\n        class=\"btn text-nowrap\"\r\n        (click)=\"uploadAll()\"\r\n        [attr.disabled]=\"IsStateToUpload() === false ?  'disabled' : null\"\r\n        [class.disabled]=\"IsStateToUpload() === false ?  'disabled' : null\"\r\n        [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n        [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n      >\r\n        <span [class]=\"IconUpload\" class=\"pe-2\"></span>{{\r\n        lngResourceService.GetString('UPLOAD_BUTTON_UPLOAD') | async }}\r\n      </button>\r\n    </div>\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".upload-component .custom-file .custom-file-input{inset:0;position:absolute;opacity:0}.upload-component.upload-multiple .upload-progress .progress{border-top-right-radius:0;border-bottom-right-radius:0}.upload-component.upload-single .upload-progress .progress{border-radius:0}.upload-component .upload-progress{padding:0;border:0}.upload-component .upload-progress .progress{height:calc(2.25rem + 2px)}.upload-component .upload-progress .progress .progress-text{position:absolute;left:0;right:0}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}_label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group upload-component upload-single\"\r\n      [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n      [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      <!-- image-preview-input -->\r\n      <div\r\n        class=\"btn upload-input custom-file\"\r\n        [class.disabled]=\"HasQueueItem()\"\r\n        [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n        [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n      >\r\n        <i class=\"pe-2\" [class]=\"IconBrowse\"></i>\r\n        <span class=\"upload-browse\"\r\n          >{{\r\n          lngResourceService.GetString(validationKeyService.UploadButtonBrowse)\r\n          | async }}</span\r\n        >\r\n        <input\r\n          type=\"file\"\r\n          class=\"custom-file-input\"\r\n          #files\r\n          (click)=\"files.value = ''\"\r\n          (uploadxState)=\"onUpload($event)\"\r\n          multiple\r\n          [disabled]=\"HasQueueItem()\"\r\n        />\r\n      </div>\r\n      <div\r\n        class=\"form-control upload-progress\"\r\n        [ngClass]=\"[componentHeight | toControlHeight]\"\r\n        [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n      >\r\n        <div class=\"progress\">\r\n          <div\r\n            class=\"progress-bar\"\r\n            [class.progress-bar-success]=\"Progress()===100\"\r\n            role=\"progressbar\"\r\n            [attr.aria-valuenow]=\"Progress()\"\r\n            aria-valuemin=\"0\"\r\n            aria-valuemax=\"100\"\r\n            [style.width.%]=\"Progress()\"\r\n          >\r\n            <span class=\"progress-text text-dark\"\r\n              >{{ Filename() | async }}</span\r\n            >\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <button\r\n        class=\"btn\"\r\n        (click)=\"cancelAll()\"\r\n        [attr.disabled]=\"HasQueueItem() === false ? 'disabled' : null\"\r\n        [class.disabled]=\"HasQueueItem() === false ? 'disabled' : null\"\r\n        [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n        [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n      >\r\n        <span [class]=\"IconDelete\"></span>\r\n      </button>\r\n      <button\r\n        *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && IsPaused() === false)\"\r\n        class=\"btn\"\r\n        (click)=\"pauseAll()\"\r\n        [attr.disabled]=\"IsUploading() === false ? 'disabled' : null\"\r\n        [class.disabled]=\"IsUploading() === false ? 'disabled' : null\"\r\n        [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n        [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n      >\r\n        <span [class]=\"IconPause\"></span>\r\n      </button>\r\n      <button\r\n        *ngIf=\"autoupload && enablepause && IsPaused()\"\r\n        class=\"btn\"\r\n        (click)=\"uploadAll()\"\r\n        [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n        [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n      >\r\n        <span [class]=\"IconContinue\"></span>\r\n      </button>\r\n      <button\r\n        *ngIf=\"autoupload === false\"\r\n        class=\"btn text-nowrap\"\r\n        (click)=\"uploadAll()\"\r\n        [attr.disabled]=\"IsStateToUpload() === false ?  'disabled' : null\"\r\n        [class.disabled]=\"IsStateToUpload() === false ?  'disabled' : null\"\r\n        [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n        [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n      >\r\n        <span [class]=\"IconUpload\" class=\"pe-2\"></span>{{\r\n        lngResourceService.GetString(validationKeyService.UploadButtonUpload) |\r\n        async }}\r\n      </button>\r\n    </div>\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".upload-component .custom-file{height:100%}.upload-component .custom-file .custom-file-input{inset:0;position:absolute;opacity:0}.upload-component.upload-multiple .upload-progress .progress{border-top-right-radius:0;border-bottom-right-radius:0}.upload-component.upload-single .upload-progress .progress{border-radius:0}.upload-component .upload-progress{padding:0;border:0}.upload-component .upload-progress .progress{height:100%}.upload-component .upload-progress .progress .progress-text{position:absolute;left:0;right:0}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToLabelHeightPipe, name: "toLabelHeight" }, { kind: "pipe", type: SacToControlHeightPipe, name: "toControlHeight" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacUploadComponent, decorators: [{
             type: Component,
@@ -2722,7 +2864,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         AsyncPipe,
                         SacToControlWidthCssPipe,
                         SacToLabelWidthCssPipe,
-                    ], template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}_label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group upload-component upload-single\"\r\n      [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      <!-- image-preview-input -->\r\n      <div\r\n        class=\"btn upload-input custom-file\"\r\n        [class.disabled]=\"HasQueueItem()\"\r\n        [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n        [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n      >\r\n        <i class=\"pe-2\" [class]=\"IconBrowse\"></i>\r\n        <span class=\"upload-browse\"\r\n          >{{ lngResourceService.GetString('UPLOAD_BUTTON_BROWSE') | async\r\n          }}</span\r\n        >\r\n        <input\r\n          type=\"file\"\r\n          class=\"custom-file-input\"\r\n          #files\r\n          (click)=\"files.value = ''\"\r\n          (uploadxState)=\"onUpload($event)\"\r\n          multiple\r\n          [disabled]=\"HasQueueItem()\"\r\n        />\r\n      </div>\r\n      <div\r\n        class=\"form-control upload-progress\"\r\n        [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n      >\r\n        <div class=\"progress\">\r\n          <div\r\n            class=\"progress-bar\"\r\n            [class.progress-bar-success]=\"Progress()===100\"\r\n            role=\"progressbar\"\r\n            [attr.aria-valuenow]=\"Progress()\"\r\n            aria-valuemin=\"0\"\r\n            aria-valuemax=\"100\"\r\n            [style.width.%]=\"Progress()\"\r\n          >\r\n            <span class=\"progress-text text-dark\"\r\n              >{{ Filename() | async }}</span\r\n            >\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <button\r\n        class=\"btn\"\r\n        (click)=\"cancelAll()\"\r\n        [attr.disabled]=\"HasQueueItem() === false ? 'disabled' : null\"\r\n        [class.disabled]=\"HasQueueItem() === false ? 'disabled' : null\"\r\n        [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n        [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n      >\r\n        <span [class]=\"IconDelete\"></span>\r\n      </button>\r\n      <button\r\n        *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && IsPaused() === false)\"\r\n        class=\"btn\"\r\n        (click)=\"pauseAll()\"\r\n        [attr.disabled]=\"IsUploading() === false ? 'disabled' : null\"\r\n        [class.disabled]=\"IsUploading() === false ? 'disabled' : null\"\r\n        [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n        [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n      >\r\n        <span [class]=\"IconPause\"></span>\r\n      </button>\r\n      <button\r\n        *ngIf=\"autoupload && enablepause && IsPaused()\"\r\n        class=\"btn\"\r\n        (click)=\"uploadAll()\"\r\n        [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n        [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n      >\r\n        <span [class]=\"IconContinue\"></span>\r\n      </button>\r\n      <button\r\n        *ngIf=\"autoupload === false\"\r\n        class=\"btn text-nowrap\"\r\n        (click)=\"uploadAll()\"\r\n        [attr.disabled]=\"IsStateToUpload() === false ?  'disabled' : null\"\r\n        [class.disabled]=\"IsStateToUpload() === false ?  'disabled' : null\"\r\n        [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n        [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n      >\r\n        <span [class]=\"IconUpload\" class=\"pe-2\"></span>{{\r\n        lngResourceService.GetString('UPLOAD_BUTTON_UPLOAD') | async }}\r\n      </button>\r\n    </div>\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".upload-component .custom-file .custom-file-input{inset:0;position:absolute;opacity:0}.upload-component.upload-multiple .upload-progress .progress{border-top-right-radius:0;border-bottom-right-radius:0}.upload-component.upload-single .upload-progress .progress{border-radius:0}.upload-component .upload-progress{padding:0;border:0}.upload-component .upload-progress .progress{height:calc(2.25rem + 2px)}.upload-component .upload-progress .progress .progress-text{position:absolute;left:0;right:0}\n"] }]
+                        SacToLabelHeightPipe,
+                        SacToControlHeightPipe,
+                    ], template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}_label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group upload-component upload-single\"\r\n      [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n      [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      <!-- image-preview-input -->\r\n      <div\r\n        class=\"btn upload-input custom-file\"\r\n        [class.disabled]=\"HasQueueItem()\"\r\n        [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n        [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n      >\r\n        <i class=\"pe-2\" [class]=\"IconBrowse\"></i>\r\n        <span class=\"upload-browse\"\r\n          >{{\r\n          lngResourceService.GetString(validationKeyService.UploadButtonBrowse)\r\n          | async }}</span\r\n        >\r\n        <input\r\n          type=\"file\"\r\n          class=\"custom-file-input\"\r\n          #files\r\n          (click)=\"files.value = ''\"\r\n          (uploadxState)=\"onUpload($event)\"\r\n          multiple\r\n          [disabled]=\"HasQueueItem()\"\r\n        />\r\n      </div>\r\n      <div\r\n        class=\"form-control upload-progress\"\r\n        [ngClass]=\"[componentHeight | toControlHeight]\"\r\n        [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n      >\r\n        <div class=\"progress\">\r\n          <div\r\n            class=\"progress-bar\"\r\n            [class.progress-bar-success]=\"Progress()===100\"\r\n            role=\"progressbar\"\r\n            [attr.aria-valuenow]=\"Progress()\"\r\n            aria-valuemin=\"0\"\r\n            aria-valuemax=\"100\"\r\n            [style.width.%]=\"Progress()\"\r\n          >\r\n            <span class=\"progress-text text-dark\"\r\n              >{{ Filename() | async }}</span\r\n            >\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <button\r\n        class=\"btn\"\r\n        (click)=\"cancelAll()\"\r\n        [attr.disabled]=\"HasQueueItem() === false ? 'disabled' : null\"\r\n        [class.disabled]=\"HasQueueItem() === false ? 'disabled' : null\"\r\n        [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n        [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n      >\r\n        <span [class]=\"IconDelete\"></span>\r\n      </button>\r\n      <button\r\n        *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && IsPaused() === false)\"\r\n        class=\"btn\"\r\n        (click)=\"pauseAll()\"\r\n        [attr.disabled]=\"IsUploading() === false ? 'disabled' : null\"\r\n        [class.disabled]=\"IsUploading() === false ? 'disabled' : null\"\r\n        [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n        [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n      >\r\n        <span [class]=\"IconPause\"></span>\r\n      </button>\r\n      <button\r\n        *ngIf=\"autoupload && enablepause && IsPaused()\"\r\n        class=\"btn\"\r\n        (click)=\"uploadAll()\"\r\n        [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n        [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n      >\r\n        <span [class]=\"IconContinue\"></span>\r\n      </button>\r\n      <button\r\n        *ngIf=\"autoupload === false\"\r\n        class=\"btn text-nowrap\"\r\n        (click)=\"uploadAll()\"\r\n        [attr.disabled]=\"IsStateToUpload() === false ?  'disabled' : null\"\r\n        [class.disabled]=\"IsStateToUpload() === false ?  'disabled' : null\"\r\n        [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n        [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n      >\r\n        <span [class]=\"IconUpload\" class=\"pe-2\"></span>{{\r\n        lngResourceService.GetString(validationKeyService.UploadButtonUpload) |\r\n        async }}\r\n      </button>\r\n    </div>\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".upload-component .custom-file{height:100%}.upload-component .custom-file .custom-file-input{inset:0;position:absolute;opacity:0}.upload-component.upload-multiple .upload-progress .progress{border-top-right-radius:0;border-bottom-right-radius:0}.upload-component.upload-single .upload-progress .progress{border-radius:0}.upload-component .upload-progress{padding:0;border:0}.upload-component .upload-progress .progress{height:100%}.upload-component .upload-progress .progress .progress-text{position:absolute;left:0;right:0}\n"] }]
         }], ctorParameters: function () { return [{ type: SacFormLayoutDirective, decorators: [{
                     type: Host
                 }, {
@@ -2757,7 +2901,7 @@ class SacUploadMultipleComponent extends SacUploadMultipleCommon {
                 multi: true,
                 useExisting: forwardRef(() => SacUploadMultipleComponent),
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}_label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div class=\"upload-component\">\r\n      <div class=\"row\">\r\n        <div class=\"col-12\">\r\n          <div\r\n            class=\"btn-group\"\r\n            [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n          >\r\n            <div\r\n              class=\"btn upload-input custom-file\"\r\n              [class.disabled]=\"maxfiles > 0 &&  uploads.length >= maxfiles\"\r\n              [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n              [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n            >\r\n              <i [class]=\"IconBrowse\" class=\"pe-2\"></i>\r\n              <span class=\"upload-browse\">Browse</span>\r\n              <input\r\n                type=\"file\"\r\n                class=\"custom-file-input\"\r\n                #files\r\n                (click)=\"files.value = ''\"\r\n                (uploadxState)=\"onUpload($event)\"\r\n                multiple\r\n                [disabled]=\"maxfiles > 0 &&  uploads.length >= maxfiles\"\r\n              />\r\n            </div>\r\n\r\n            <div class=\"btn-group\">\r\n              <!-- image-preview-clear button -->\r\n              <button\r\n                class=\"btn\"\r\n                (click)=\"cancelAll()\"\r\n                [attr.disabled]=\"HasQueueItem() === false ? 'disabled' : null\"\r\n                [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n              >\r\n                <span [class]=\"IconDelete\"></span>\r\n              </button>\r\n              <button\r\n                *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && IsPaused() === false)\"\r\n                class=\"btn\"\r\n                (click)=\"pauseAll()\"\r\n                [attr.disabled]=\"IsUploading() === false ? 'disabled' : null\"\r\n                [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n              >\r\n                <span [class]=\"IconPause\"></span>\r\n              </button>\r\n              <button\r\n                *ngIf=\"autoupload && enablepause && IsPaused() === true\"\r\n                class=\"btn\"\r\n                (click)=\"uploadAll()\"\r\n                [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n              >\r\n                <span [class]=\"IconContinue\"></span>\r\n              </button>\r\n              <button\r\n                *ngIf=\"autoupload === false\"\r\n                class=\"btn text-nowrap\"\r\n                (click)=\"uploadAll()\"\r\n                [attr.disabled]=\"IsStateToUpload() === false ?  'disabled' : null\"\r\n                [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n              >\r\n                <span [class]=\"IconUpload\" class=\"pe-2\"></span> {{\r\n                lngResourceService.GetString('UPLOAD_BUTTON_UPLOAD') | async }}\r\n              </button>\r\n            </div>\r\n          </div>\r\n          <div\r\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n            class=\"invalid-feedback\"\r\n          >\r\n            {{ GetErrorMessage() | async }}\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngFor=\"let file of uploads\" style=\"margin-top: 5px\">\r\n        <div class=\"input-group upload-component upload-multiple\">\r\n          <div\r\n            class=\"form-control upload-progress\"\r\n            [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n          >\r\n            <div class=\"progress\">\r\n              <div\r\n                class=\"progress-bar\"\r\n                [class.progress-bar-success]=\"file.progress===100\"\r\n                role=\"progressbar\"\r\n                [attr.aria-valuenow]=\"file.progress\"\r\n                aria-valuemin=\"0\"\r\n                aria-valuemax=\"100\"\r\n                [style.width.%]=\"file.progress\"\r\n              >\r\n                <span class=\"progress-text text-dark\">{{ file.name }}</span>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <button\r\n            class=\"btn\"\r\n            (click)=\"cancel(file.uploadId)\"\r\n            [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n            [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n          >\r\n            <span [class]=\"IconDelete\"></span>\r\n          </button>\r\n          <button\r\n            *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && file.status !== 'paused')\"\r\n            class=\"btn\"\r\n            (click)=\"pause(file.uploadId)\"\r\n            [attr.disabled]=\"file.status !== 'uploading' ? 'disabled' : null\"\r\n            [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n            [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n          >\r\n            <span [class]=\"IconPause\"></span>\r\n          </button>\r\n          <button\r\n            *ngIf=\"autoupload && enablepause && file.status === 'paused'\"\r\n            class=\"btn\"\r\n            (click)=\"upload(file.uploadId)\"\r\n            [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n            [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n          >\r\n            <span [class]=\"IconContinue\"></span>\r\n          </button>\r\n          <button\r\n            *ngIf=\"autoupload === false\"\r\n            class=\"btn text-nowrap\"\r\n            (click)=\"upload(file.uploadId)\"\r\n            [attr.disabled]=\"file.status !== 'added' && file.status !== 'paused' ?  'disabled' : null\"\r\n            [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n            [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n          >\r\n            <span [class]=\"IconUpload\" class=\"pe-2\"></span>{{\r\n            lngResourceService.GetString('UPLOAD_BUTTON_UPLOAD') | async }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".upload-component .custom-file .custom-file-input{inset:0;position:absolute;opacity:0}.upload-component.upload-multiple .upload-progress .progress{border-top-right-radius:0;border-bottom-right-radius:0}.upload-component.upload-single .upload-progress .progress{border-radius:0}.upload-component .upload-progress{padding:0;border:0}.upload-component .upload-progress .progress{height:calc(2.25rem + 2px)}.upload-component .upload-progress .progress .progress-text{position:absolute;left:0;right:0}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}_label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div class=\"upload-component\">\r\n      <div class=\"row\">\r\n        <div class=\"col-12\">\r\n          <div\r\n            class=\"btn-group\"\r\n            [class.btn-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n            [class.btn-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n            [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n          >\r\n            <div\r\n              class=\"btn upload-input custom-file\"\r\n              [class.disabled]=\"maxfiles > 0 &&  uploads.length >= maxfiles\"\r\n              [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n              [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n            >\r\n              <i [class]=\"IconBrowse\" class=\"pe-2\"></i>\r\n              <span class=\"upload-browse\">Browse</span>\r\n              <input\r\n                type=\"file\"\r\n                class=\"custom-file-input\"\r\n                #files\r\n                (click)=\"files.value = ''\"\r\n                (uploadxState)=\"onUpload($event)\"\r\n                multiple\r\n                [disabled]=\"maxfiles > 0 &&  uploads.length >= maxfiles\"\r\n              />\r\n            </div>\r\n\r\n            <div\r\n              class=\"btn-group\"\r\n              [class.btn-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n              [class.btn-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n            >\r\n              <!-- image-preview-clear button -->\r\n              <button\r\n                class=\"btn\"\r\n                (click)=\"cancelAll()\"\r\n                [attr.disabled]=\"HasQueueItem() === false ? 'disabled' : null\"\r\n                [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n              >\r\n                <span [class]=\"IconDelete\"></span>\r\n              </button>\r\n              <button\r\n                *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && IsPaused() === false)\"\r\n                class=\"btn\"\r\n                (click)=\"pauseAll()\"\r\n                [attr.disabled]=\"IsUploading() === false ? 'disabled' : null\"\r\n                [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n              >\r\n                <span [class]=\"IconPause\"></span>\r\n              </button>\r\n              <button\r\n                *ngIf=\"autoupload && enablepause && IsPaused() === true\"\r\n                class=\"btn\"\r\n                (click)=\"uploadAll()\"\r\n                [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n              >\r\n                <span [class]=\"IconContinue\"></span>\r\n              </button>\r\n              <button\r\n                *ngIf=\"autoupload === false\"\r\n                class=\"btn text-nowrap\"\r\n                (click)=\"uploadAll()\"\r\n                [attr.disabled]=\"IsStateToUpload() === false ?  'disabled' : null\"\r\n                [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n              >\r\n                <span [class]=\"IconUpload\" class=\"pe-2\"></span> {{\r\n                lngResourceService.GetString(validationKeyService.UploadButtonUpload)\r\n                | async }}\r\n              </button>\r\n            </div>\r\n          </div>\r\n          <div\r\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n            class=\"invalid-feedback\"\r\n          >\r\n            {{ GetErrorMessage() | async }}\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngFor=\"let file of uploads\" style=\"margin-top: 5px\">\r\n        <div\r\n          class=\"input-group upload-component upload-multiple\"\r\n          [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n          [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n        >\r\n          <div\r\n            class=\"form-control upload-progress\"\r\n            [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n          >\r\n            <div class=\"progress\">\r\n              <div\r\n                class=\"progress-bar\"\r\n                [class.progress-bar-success]=\"file.progress===100\"\r\n                role=\"progressbar\"\r\n                [attr.aria-valuenow]=\"file.progress\"\r\n                aria-valuemin=\"0\"\r\n                aria-valuemax=\"100\"\r\n                [style.width.%]=\"file.progress\"\r\n              >\r\n                <span class=\"progress-text text-dark\">{{ file.name }}</span>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <button\r\n            class=\"btn\"\r\n            (click)=\"cancel(file.uploadId)\"\r\n            [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n            [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n          >\r\n            <span [class]=\"IconDelete\"></span>\r\n          </button>\r\n          <button\r\n            *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && file.status !== 'paused')\"\r\n            class=\"btn\"\r\n            (click)=\"pause(file.uploadId)\"\r\n            [attr.disabled]=\"file.status !== 'uploading' ? 'disabled' : null\"\r\n            [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n            [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n          >\r\n            <span [class]=\"IconPause\"></span>\r\n          </button>\r\n          <button\r\n            *ngIf=\"autoupload && enablepause && file.status === 'paused'\"\r\n            class=\"btn\"\r\n            (click)=\"upload(file.uploadId)\"\r\n            [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n            [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n          >\r\n            <span [class]=\"IconContinue\"></span>\r\n          </button>\r\n          <button\r\n            *ngIf=\"autoupload === false\"\r\n            class=\"btn text-nowrap\"\r\n            (click)=\"upload(file.uploadId)\"\r\n            [attr.disabled]=\"file.status !== 'added' && file.status !== 'paused' ?  'disabled' : null\"\r\n            [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n            [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n          >\r\n            <span [class]=\"IconUpload\" class=\"pe-2\"></span>{{\r\n            lngResourceService.GetString(validationKeyService.UploadButtonUpload)\r\n            | async }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".upload-component .custom-file{height:100%}.upload-component .custom-file .custom-file-input{inset:0;position:absolute;opacity:0}.upload-component.upload-multiple .upload-progress .progress{border-top-right-radius:0;border-bottom-right-radius:0}.upload-component.upload-single .upload-progress .progress{border-radius:0}.upload-component .upload-progress{padding:0;border:0}.upload-component .upload-progress .progress{height:100%}.upload-component .upload-progress .progress .progress-text{position:absolute;left:0;right:0}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: SacToControlWidthCssPipe, name: "toControlWidthCss" }, { kind: "pipe", type: SacToLabelWidthCssPipe, name: "toLabelWidthCss" }, { kind: "pipe", type: SacToLabelHeightPipe, name: "toLabelHeight" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SacUploadMultipleComponent, decorators: [{
             type: Component,
@@ -2779,7 +2923,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         AsyncPipe,
                         SacToControlWidthCssPipe,
                         SacToLabelWidthCssPipe,
-                    ], template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}_label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label col-form-label-sm\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only' ]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div class=\"upload-component\">\r\n      <div class=\"row\">\r\n        <div class=\"col-12\">\r\n          <div\r\n            class=\"btn-group\"\r\n            [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n          >\r\n            <div\r\n              class=\"btn upload-input custom-file\"\r\n              [class.disabled]=\"maxfiles > 0 &&  uploads.length >= maxfiles\"\r\n              [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n              [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n            >\r\n              <i [class]=\"IconBrowse\" class=\"pe-2\"></i>\r\n              <span class=\"upload-browse\">Browse</span>\r\n              <input\r\n                type=\"file\"\r\n                class=\"custom-file-input\"\r\n                #files\r\n                (click)=\"files.value = ''\"\r\n                (uploadxState)=\"onUpload($event)\"\r\n                multiple\r\n                [disabled]=\"maxfiles > 0 &&  uploads.length >= maxfiles\"\r\n              />\r\n            </div>\r\n\r\n            <div class=\"btn-group\">\r\n              <!-- image-preview-clear button -->\r\n              <button\r\n                class=\"btn\"\r\n                (click)=\"cancelAll()\"\r\n                [attr.disabled]=\"HasQueueItem() === false ? 'disabled' : null\"\r\n                [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n              >\r\n                <span [class]=\"IconDelete\"></span>\r\n              </button>\r\n              <button\r\n                *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && IsPaused() === false)\"\r\n                class=\"btn\"\r\n                (click)=\"pauseAll()\"\r\n                [attr.disabled]=\"IsUploading() === false ? 'disabled' : null\"\r\n                [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n              >\r\n                <span [class]=\"IconPause\"></span>\r\n              </button>\r\n              <button\r\n                *ngIf=\"autoupload && enablepause && IsPaused() === true\"\r\n                class=\"btn\"\r\n                (click)=\"uploadAll()\"\r\n                [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n              >\r\n                <span [class]=\"IconContinue\"></span>\r\n              </button>\r\n              <button\r\n                *ngIf=\"autoupload === false\"\r\n                class=\"btn text-nowrap\"\r\n                (click)=\"uploadAll()\"\r\n                [attr.disabled]=\"IsStateToUpload() === false ?  'disabled' : null\"\r\n                [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n              >\r\n                <span [class]=\"IconUpload\" class=\"pe-2\"></span> {{\r\n                lngResourceService.GetString('UPLOAD_BUTTON_UPLOAD') | async }}\r\n              </button>\r\n            </div>\r\n          </div>\r\n          <div\r\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n            class=\"invalid-feedback\"\r\n          >\r\n            {{ GetErrorMessage() | async }}\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngFor=\"let file of uploads\" style=\"margin-top: 5px\">\r\n        <div class=\"input-group upload-component upload-multiple\">\r\n          <div\r\n            class=\"form-control upload-progress\"\r\n            [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n          >\r\n            <div class=\"progress\">\r\n              <div\r\n                class=\"progress-bar\"\r\n                [class.progress-bar-success]=\"file.progress===100\"\r\n                role=\"progressbar\"\r\n                [attr.aria-valuenow]=\"file.progress\"\r\n                aria-valuemin=\"0\"\r\n                aria-valuemax=\"100\"\r\n                [style.width.%]=\"file.progress\"\r\n              >\r\n                <span class=\"progress-text text-dark\">{{ file.name }}</span>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <button\r\n            class=\"btn\"\r\n            (click)=\"cancel(file.uploadId)\"\r\n            [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n            [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n          >\r\n            <span [class]=\"IconDelete\"></span>\r\n          </button>\r\n          <button\r\n            *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && file.status !== 'paused')\"\r\n            class=\"btn\"\r\n            (click)=\"pause(file.uploadId)\"\r\n            [attr.disabled]=\"file.status !== 'uploading' ? 'disabled' : null\"\r\n            [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n            [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n          >\r\n            <span [class]=\"IconPause\"></span>\r\n          </button>\r\n          <button\r\n            *ngIf=\"autoupload && enablepause && file.status === 'paused'\"\r\n            class=\"btn\"\r\n            (click)=\"upload(file.uploadId)\"\r\n            [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n            [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n          >\r\n            <span [class]=\"IconContinue\"></span>\r\n          </button>\r\n          <button\r\n            *ngIf=\"autoupload === false\"\r\n            class=\"btn text-nowrap\"\r\n            (click)=\"upload(file.uploadId)\"\r\n            [attr.disabled]=\"file.status !== 'added' && file.status !== 'paused' ?  'disabled' : null\"\r\n            [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n            [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n          >\r\n            <span [class]=\"IconUpload\" class=\"pe-2\"></span>{{\r\n            lngResourceService.GetString('UPLOAD_BUTTON_UPLOAD') | async }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".upload-component .custom-file .custom-file-input{inset:0;position:absolute;opacity:0}.upload-component.upload-multiple .upload-progress .progress{border-top-right-radius:0;border-bottom-right-radius:0}.upload-component.upload-single .upload-progress .progress{border-radius:0}.upload-component .upload-progress{padding:0;border:0}.upload-component .upload-progress .progress{height:calc(2.25rem + 2px)}.upload-component .upload-progress .progress .progress-text{position:absolute;left:0;right:0}\n"] }]
+                        SacToLabelHeightPipe,
+                    ], template: "<div class=\"row mb-3\" [class.g-0]=\"disablelabel\">\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}_label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'visually-hidden', componentHeight | toLabelHeight]\"\r\n    >{{label}}</label\r\n  >\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div class=\"upload-component\">\r\n      <div class=\"row\">\r\n        <div class=\"col-12\">\r\n          <div\r\n            class=\"btn-group\"\r\n            [class.btn-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n            [class.btn-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n            [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n          >\r\n            <div\r\n              class=\"btn upload-input custom-file\"\r\n              [class.disabled]=\"maxfiles > 0 &&  uploads.length >= maxfiles\"\r\n              [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n              [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n            >\r\n              <i [class]=\"IconBrowse\" class=\"pe-2\"></i>\r\n              <span class=\"upload-browse\">Browse</span>\r\n              <input\r\n                type=\"file\"\r\n                class=\"custom-file-input\"\r\n                #files\r\n                (click)=\"files.value = ''\"\r\n                (uploadxState)=\"onUpload($event)\"\r\n                multiple\r\n                [disabled]=\"maxfiles > 0 &&  uploads.length >= maxfiles\"\r\n              />\r\n            </div>\r\n\r\n            <div\r\n              class=\"btn-group\"\r\n              [class.btn-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n              [class.btn-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n            >\r\n              <!-- image-preview-clear button -->\r\n              <button\r\n                class=\"btn\"\r\n                (click)=\"cancelAll()\"\r\n                [attr.disabled]=\"HasQueueItem() === false ? 'disabled' : null\"\r\n                [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n              >\r\n                <span [class]=\"IconDelete\"></span>\r\n              </button>\r\n              <button\r\n                *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && IsPaused() === false)\"\r\n                class=\"btn\"\r\n                (click)=\"pauseAll()\"\r\n                [attr.disabled]=\"IsUploading() === false ? 'disabled' : null\"\r\n                [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n              >\r\n                <span [class]=\"IconPause\"></span>\r\n              </button>\r\n              <button\r\n                *ngIf=\"autoupload && enablepause && IsPaused() === true\"\r\n                class=\"btn\"\r\n                (click)=\"uploadAll()\"\r\n                [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n              >\r\n                <span [class]=\"IconContinue\"></span>\r\n              </button>\r\n              <button\r\n                *ngIf=\"autoupload === false\"\r\n                class=\"btn text-nowrap\"\r\n                (click)=\"uploadAll()\"\r\n                [attr.disabled]=\"IsStateToUpload() === false ?  'disabled' : null\"\r\n                [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n              >\r\n                <span [class]=\"IconUpload\" class=\"pe-2\"></span> {{\r\n                lngResourceService.GetString(validationKeyService.UploadButtonUpload)\r\n                | async }}\r\n              </button>\r\n            </div>\r\n          </div>\r\n          <div\r\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n            class=\"invalid-feedback\"\r\n          >\r\n            {{ GetErrorMessage() | async }}\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngFor=\"let file of uploads\" style=\"margin-top: 5px\">\r\n        <div\r\n          class=\"input-group upload-component upload-multiple\"\r\n          [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n          [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n        >\r\n          <div\r\n            class=\"form-control upload-progress\"\r\n            [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n          >\r\n            <div class=\"progress\">\r\n              <div\r\n                class=\"progress-bar\"\r\n                [class.progress-bar-success]=\"file.progress===100\"\r\n                role=\"progressbar\"\r\n                [attr.aria-valuenow]=\"file.progress\"\r\n                aria-valuemin=\"0\"\r\n                aria-valuemax=\"100\"\r\n                [style.width.%]=\"file.progress\"\r\n              >\r\n                <span class=\"progress-text text-dark\">{{ file.name }}</span>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <button\r\n            class=\"btn\"\r\n            (click)=\"cancel(file.uploadId)\"\r\n            [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n            [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n          >\r\n            <span [class]=\"IconDelete\"></span>\r\n          </button>\r\n          <button\r\n            *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && file.status !== 'paused')\"\r\n            class=\"btn\"\r\n            (click)=\"pause(file.uploadId)\"\r\n            [attr.disabled]=\"file.status !== 'uploading' ? 'disabled' : null\"\r\n            [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n            [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n          >\r\n            <span [class]=\"IconPause\"></span>\r\n          </button>\r\n          <button\r\n            *ngIf=\"autoupload && enablepause && file.status === 'paused'\"\r\n            class=\"btn\"\r\n            (click)=\"upload(file.uploadId)\"\r\n            [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n            [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n          >\r\n            <span [class]=\"IconContinue\"></span>\r\n          </button>\r\n          <button\r\n            *ngIf=\"autoupload === false\"\r\n            class=\"btn text-nowrap\"\r\n            (click)=\"upload(file.uploadId)\"\r\n            [attr.disabled]=\"file.status !== 'added' && file.status !== 'paused' ?  'disabled' : null\"\r\n            [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n            [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n          >\r\n            <span [class]=\"IconUpload\" class=\"pe-2\"></span>{{\r\n            lngResourceService.GetString(validationKeyService.UploadButtonUpload)\r\n            | async }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".upload-component .custom-file{height:100%}.upload-component .custom-file .custom-file-input{inset:0;position:absolute;opacity:0}.upload-component.upload-multiple .upload-progress .progress{border-top-right-radius:0;border-bottom-right-radius:0}.upload-component.upload-single .upload-progress .progress{border-radius:0}.upload-component .upload-progress{padding:0;border:0}.upload-component .upload-progress .progress{height:100%}.upload-component .upload-progress .progress .progress-text{position:absolute;left:0;right:0}\n"] }]
         }], ctorParameters: function () { return [{ type: SacFormLayoutDirective, decorators: [{
                     type: Host
                 }, {
@@ -2934,5 +3079,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { NGFORM_FACTORY, SACBootstrap5BrowserModule, SACBootstrap5ButtonModule, SACBootstrap5CheckboxModule, SACBootstrap5ConfirmModule, SACBootstrap5ContextmenuModule, SACBootstrap5DateTimeModule, SACBootstrap5DialogModule, SACBootstrap5DropdownModule, SACBootstrap5FormModule, SACBootstrap5GridModule, SACBootstrap5InputModule, SACBootstrap5LayoutModule, SACBootstrap5ListModule, SACBootstrap5MultilanguageModule, SACBootstrap5StaticLabelModule, SACBootstrap5TabsModule, SACBootstrap5TinyMceModule, SACBootstrap5UploadModule, SACBootstrap5ValidationSummaryModule, SACBootstrap5WizardModule, SACFORM_FACTORY, SacBrowserComponent, SacButtonComponent, SacCheckboxComponent, SacConfirmComponent, SacContextmenuAnchorDirective, SacContextmenuComponent, SacContextmenuItemButtonComponent, SacContextmenuItemSplitterComponent, SacDateComponent, SacDateSelectorComponent, SacDateTimeComponent, SacDialogComponent, SacDropdownComponent, SacDropdownOptionDirective, SacDropzoneMultipleComponent, SacDropzoneSingleComponent, SacFormDirective, SacFormLayoutDirective, SacGridButtonComponent, SacGridColumnActionComponent, SacGridColumnComponent, SacGridComponent, SacGridImageComponent, SacInheritFormDirective, SacInputAreaComponent, SacInputComponent, SacInputCurrencyComponent, SacInputDecimalComponent, SacInputEmailComponent, SacInputIntegerComponent, SacInputPasswordComponent, SacInputSearchComponent, SacListboxComponent, SacListboxOptionDirective, SacMultilanguageInputAreaComponent, SacMultilanguageInputComponent, SacPagingComponent, SacRadiobuttonComponent, SacRadiobuttonsComponent, SacStaticFormContainerComponent, SacStaticLabelComponent, SacTabComponent, SacTabItemComponent, SacTimeComponent, SacTinyMceComponent, SacToControlWidthCssPipe, SacToLabelWidthCssPipe, SacUploadComponent, SacUploadMultipleComponent, SacValidationSummaryComponent, SacWizardComponent, SacWizardItemComponent, ServiceConfirm };
+export { NGFORM_FACTORY, SACBootstrap5BrowserModule, SACBootstrap5ButtonModule, SACBootstrap5CheckboxModule, SACBootstrap5ConfirmModule, SACBootstrap5ContextmenuModule, SACBootstrap5DateTimeModule, SACBootstrap5DialogModule, SACBootstrap5DropdownModule, SACBootstrap5FormModule, SACBootstrap5GridModule, SACBootstrap5InputModule, SACBootstrap5LayoutModule, SACBootstrap5ListModule, SACBootstrap5MultilanguageModule, SACBootstrap5StaticLabelModule, SACBootstrap5TabsModule, SACBootstrap5TinyMceModule, SACBootstrap5UploadModule, SACBootstrap5ValidationSummaryModule, SACBootstrap5WizardModule, SACFORM_FACTORY, SacBrowserComponent, SacButtonComponent, SacCheckboxComponent, SacConfirmComponent, SacContextmenuAnchorDirective, SacContextmenuComponent, SacContextmenuItemButtonComponent, SacContextmenuItemSplitterComponent, SacDateComponent, SacDateSelectorComponent, SacDateTimeComponent, SacDialogComponent, SacDropdownComponent, SacDropdownOptionDirective, SacDropzoneMultipleComponent, SacDropzoneSingleComponent, SacFormDirective, SacFormLayoutDirective, SacGridButtonComponent, SacGridColumnActionComponent, SacGridColumnComponent, SacGridComponent, SacGridImageComponent, SacInheritFormDirective, SacInputAreaComponent, SacInputComponent, SacInputCurrencyComponent, SacInputDecimalComponent, SacInputEmailComponent, SacInputIntegerComponent, SacInputPasswordComponent, SacInputSearchComponent, SacListboxComponent, SacListboxOptionDirective, SacMultilanguageInputAreaComponent, SacMultilanguageInputComponent, SacPagingComponent, SacRadiobuttonComponent, SacRadiobuttonsComponent, SacStaticFormContainerComponent, SacStaticLabelComponent, SacTabComponent, SacTabItemComponent, SacTimeComponent, SacTinyMceComponent, SacToControlHeightPipe, SacToControlWidthCssPipe, SacToLabelHeightPipe, SacToLabelWidthCssPipe, SacUploadComponent, SacUploadMultipleComponent, SacValidationSummaryComponent, SacWizardComponent, SacWizardItemComponent, ServiceConfirm };
 //# sourceMappingURL=simpleangularcontrols-sac-bootstrap5.mjs.map