osl-base-extended 5.0.0 → 6.0.0

package/fesm2022/osl-base-extended.mjs

@@ -108,6 +108,27 @@ class DeleteConfirmationData {
     data;
 }
 
+class ErrorDialog {
+    dialogRef;
+    data;
+    constructor(dialogRef, data) {
+        this.dialogRef = dialogRef;
+        this.data = data;
+    }
+    close() {
+        this.dialogRef.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ErrorDialog, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ErrorDialog, isStandalone: true, selector: "error-dialog", ngImport: i0, template: "<div class=\"ed-container\">\n\n  <!-- Header -->\n  <div class=\"ed-header\">\n    <div class=\"ed-icon-wrapper\">\n      <div class=\"ed-icon-ring\">\n        <svg class=\"ed-icon-svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n          <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\"/>\n        </svg>\n      </div>\n    </div>\n    <button mat-icon-button class=\"ed-close-btn\" (click)=\"close()\" aria-label=\"Close\">\n      <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"20\" height=\"20\">\n        <path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"/>\n      </svg>\n    </button>\n  </div>\n\n  <!-- Body -->\n  <mat-dialog-content class=\"ed-body\">\n    <h2 class=\"ed-title\">{{ data.title }}</h2>\n    <p class=\"ed-subtitle\">\n      Please fix the following\n      <strong>{{ data.errors.length }}</strong>\n      {{ data.errors.length === 1 ? 'issue' : 'issues' }} before proceeding.\n    </p>\n    <ul class=\"ed-list\">\n      @for (err of data.errors; track $index) {\n        <li class=\"ed-item\" [style.animation-delay]=\"($index * 60) + 'ms'\">\n          <span class=\"ed-item-dot\"></span>\n          <span class=\"ed-item-text\">{{ err }}</span>\n        </li>\n      }\n    </ul>\n  </mat-dialog-content>\n\n  <!-- Actions -->\n  <mat-dialog-actions class=\"ed-actions\">\n    <button mat-flat-button class=\"ed-confirm-btn\" (click)=\"close()\">\n      <svg class=\"ed-btn-icon\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n        <path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"/>\n      </svg>\n      Got it\n    </button>\n  </mat-dialog-actions>\n\n</div>\n", styles: ["@charset \"UTF-8\";.ed-container{padding:8px 4px}.ed-header{display:flex;justify-content:space-between;align-items:flex-start;padding:8px 8px 0}.ed-icon-wrapper{display:flex;align-items:center;justify-content:center;flex:1;padding-left:40px}.ed-icon-ring{width:72px;height:72px;border-radius:50%;background:#dc262614;border:2px solid rgba(220,38,38,.2);display:flex;align-items:center;justify-content:center;animation:ed-pulse 2.4s ease-in-out infinite}.ed-icon-svg{width:36px;height:36px;color:var(--osl-danger, #dc2626);animation:ed-bounce 2.4s ease-in-out infinite}.ed-close-btn{color:var(--osl-secondary, #6b7280);flex-shrink:0}.ed-close-btn:hover{color:var(--osl-black, #111827)}.ed-body{padding:16px 24px 4px!important;max-height:320px!important;overflow-y:auto!important;text-align:center}.ed-title{font-size:20px;font-weight:600;color:var(--osl-black, #111827);margin:0 0 8px;line-height:1.3}.ed-subtitle{font-size:13.5px;color:var(--osl-secondary, #6b7280);margin:0 0 16px;line-height:1.5}.ed-list{list-style:none;margin:0;padding:0;text-align:left;display:flex;flex-direction:column;gap:8px}.ed-item{display:flex;align-items:flex-start;gap:10px;background:#dc26260a;border:1px solid rgba(220,38,38,.14);border-left:3px solid var(--osl-danger, #dc2626);border-radius:6px;padding:8px 12px;font-size:13.5px;color:var(--osl-black, #111827);line-height:1.5;opacity:0;animation:ed-slide-in .35s ease forwards}.ed-item-dot{flex-shrink:0;width:6px;height:6px;border-radius:50%;background:var(--osl-danger, #dc2626);margin-top:6px}.ed-item-text{flex:1}.ed-actions{display:flex!important;justify-content:center;padding:16px 24px 20px!important}.ed-confirm-btn{background:var(--osl-danger, #dc2626);color:#fff;border-radius:var(--osl-border-radius, 4px);height:38px;font-size:14px;font-weight:500;display:flex;align-items:center;gap:6px;padding:0 24px;transition:background .2s ease,box-shadow .2s ease;min-width:120px;justify-content:center}.ed-confirm-btn .ed-btn-icon{width:17px;height:17px;flex-shrink:0;color:#fff}.ed-confirm-btn:hover{background:var(--osl-danger-hover, #b91c1c);box-shadow:0 4px 14px #dc262659}.ed-body::-webkit-scrollbar{width:4px}.ed-body::-webkit-scrollbar-track{background:transparent}.ed-body::-webkit-scrollbar-thumb{background:#dc262640;border-radius:4px}@keyframes ed-pulse{0%,to{box-shadow:0 0 #dc262626}50%{box-shadow:0 0 0 10px #dc262600}}@keyframes ed-bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-3px)}}@keyframes ed-slide-in{0%{opacity:0;transform:translate(-12px)}to{opacity:1;transform:translate(0)}}\n"], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ErrorDialog, decorators: [{
+            type: Component,
+            args: [{ selector: 'error-dialog', standalone: true, imports: [MatDialogModule, MatButtonModule], template: "<div class=\"ed-container\">\n\n  <!-- Header -->\n  <div class=\"ed-header\">\n    <div class=\"ed-icon-wrapper\">\n      <div class=\"ed-icon-ring\">\n        <svg class=\"ed-icon-svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n          <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\"/>\n        </svg>\n      </div>\n    </div>\n    <button mat-icon-button class=\"ed-close-btn\" (click)=\"close()\" aria-label=\"Close\">\n      <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"20\" height=\"20\">\n        <path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"/>\n      </svg>\n    </button>\n  </div>\n\n  <!-- Body -->\n  <mat-dialog-content class=\"ed-body\">\n    <h2 class=\"ed-title\">{{ data.title }}</h2>\n    <p class=\"ed-subtitle\">\n      Please fix the following\n      <strong>{{ data.errors.length }}</strong>\n      {{ data.errors.length === 1 ? 'issue' : 'issues' }} before proceeding.\n    </p>\n    <ul class=\"ed-list\">\n      @for (err of data.errors; track $index) {\n        <li class=\"ed-item\" [style.animation-delay]=\"($index * 60) + 'ms'\">\n          <span class=\"ed-item-dot\"></span>\n          <span class=\"ed-item-text\">{{ err }}</span>\n        </li>\n      }\n    </ul>\n  </mat-dialog-content>\n\n  <!-- Actions -->\n  <mat-dialog-actions class=\"ed-actions\">\n    <button mat-flat-button class=\"ed-confirm-btn\" (click)=\"close()\">\n      <svg class=\"ed-btn-icon\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n        <path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"/>\n      </svg>\n      Got it\n    </button>\n  </mat-dialog-actions>\n\n</div>\n", styles: ["@charset \"UTF-8\";.ed-container{padding:8px 4px}.ed-header{display:flex;justify-content:space-between;align-items:flex-start;padding:8px 8px 0}.ed-icon-wrapper{display:flex;align-items:center;justify-content:center;flex:1;padding-left:40px}.ed-icon-ring{width:72px;height:72px;border-radius:50%;background:#dc262614;border:2px solid rgba(220,38,38,.2);display:flex;align-items:center;justify-content:center;animation:ed-pulse 2.4s ease-in-out infinite}.ed-icon-svg{width:36px;height:36px;color:var(--osl-danger, #dc2626);animation:ed-bounce 2.4s ease-in-out infinite}.ed-close-btn{color:var(--osl-secondary, #6b7280);flex-shrink:0}.ed-close-btn:hover{color:var(--osl-black, #111827)}.ed-body{padding:16px 24px 4px!important;max-height:320px!important;overflow-y:auto!important;text-align:center}.ed-title{font-size:20px;font-weight:600;color:var(--osl-black, #111827);margin:0 0 8px;line-height:1.3}.ed-subtitle{font-size:13.5px;color:var(--osl-secondary, #6b7280);margin:0 0 16px;line-height:1.5}.ed-list{list-style:none;margin:0;padding:0;text-align:left;display:flex;flex-direction:column;gap:8px}.ed-item{display:flex;align-items:flex-start;gap:10px;background:#dc26260a;border:1px solid rgba(220,38,38,.14);border-left:3px solid var(--osl-danger, #dc2626);border-radius:6px;padding:8px 12px;font-size:13.5px;color:var(--osl-black, #111827);line-height:1.5;opacity:0;animation:ed-slide-in .35s ease forwards}.ed-item-dot{flex-shrink:0;width:6px;height:6px;border-radius:50%;background:var(--osl-danger, #dc2626);margin-top:6px}.ed-item-text{flex:1}.ed-actions{display:flex!important;justify-content:center;padding:16px 24px 20px!important}.ed-confirm-btn{background:var(--osl-danger, #dc2626);color:#fff;border-radius:var(--osl-border-radius, 4px);height:38px;font-size:14px;font-weight:500;display:flex;align-items:center;gap:6px;padding:0 24px;transition:background .2s ease,box-shadow .2s ease;min-width:120px;justify-content:center}.ed-confirm-btn .ed-btn-icon{width:17px;height:17px;flex-shrink:0;color:#fff}.ed-confirm-btn:hover{background:var(--osl-danger-hover, #b91c1c);box-shadow:0 4px 14px #dc262659}.ed-body::-webkit-scrollbar{width:4px}.ed-body::-webkit-scrollbar-track{background:transparent}.ed-body::-webkit-scrollbar-thumb{background:#dc262640;border-radius:4px}@keyframes ed-pulse{0%,to{box-shadow:0 0 #dc262626}50%{box-shadow:0 0 0 10px #dc262600}}@keyframes ed-bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-3px)}}@keyframes ed-slide-in{0%{opacity:0;transform:translate(-12px)}to{opacity:1;transform:translate(0)}}\n"] }]
+        }], ctorParameters: () => [{ type: i1.MatDialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }] });
+
 class DirtyStateService {
     _isDirty = false;
     _saveCallback;
@@ -143,11 +164,18 @@ class baseComponent {
         }
         this.showSnack(message);
     }
-    showError(error) {
-        if (Array.isArray(error)) {
-            error = error.join(',');
+    showError(error, title = 'Validation Failed') {
+        if (Array.isArray(error) && error.length > 4) {
+            const dialogData = { title, errors: error };
+            this._injector.get(MatDialog).open(ErrorDialog, {
+                width: '460px',
+                data: dialogData,
+                disableClose: false,
+            });
+            return;
         }
-        this.showSnack(error);
+        const message = Array.isArray(error) ? error.join(', ') : error;
+        this.showSnack(message);
     }
     navigate(url) {
         this._injector.get(Router).navigate([url]);
@@ -2028,11 +2056,26 @@ class OslFileUpload {
     maxSize = 0;
     skeletonLoading = false;
     skeletonTheme = 'light';
+    /** When 'base64', emits OslFileValue instead of File objects. */
+    fileMode = 'raw';
+    /** Called when user clicks download on a saved file that has no base64 content. */
+    downloadFn = null;
     modelChange = new EventEmitter();
     changeEv = new EventEmitter();
     touched = false;
     isDragOver = false;
     sizeError = false;
+    get isBase64Mode() {
+        return this.fileMode === 'base64';
+    }
+    get savedFileName() {
+        if (!this.isBase64Mode)
+            return null;
+        return this.model?.fileName ?? null;
+    }
+    get hasSavedContent() {
+        return !!this.model?.fileContent;
+    }
     get fileNames() {
         if (!this.model)
             return '';
@@ -2041,6 +2084,8 @@ class OslFileUpload {
         return this.model.name;
     }
     get isInvalid() {
+        if (this.isBase64Mode)
+            return this.touched && this.required && !this.savedFileName;
         return this.touched && this.required && !this.model;
     }
     onFileChange(event) {
@@ -2079,6 +2124,18 @@ class OslFileUpload {
                 }
             }
         }
+        if (this.isBase64Mode) {
+            const file = files[0];
+            const reader = new FileReader();
+            reader.onload = () => {
+                const value = { fileName: file.name, fileContent: reader.result };
+                this.model = value;
+                this.modelChange.emit(value);
+                this.changeEv.emit(value);
+            };
+            reader.readAsDataURL(file);
+            return;
+        }
         if (this.multiple) {
             this.model = Array.from(files);
         }
@@ -2099,6 +2156,18 @@ class OslFileUpload {
         this.modelChange.emit(null);
         this.changeEv.emit(null);
     }
+    onDownload() {
+        const val = this.model;
+        if (val?.fileContent) {
+            const a = document.createElement('a');
+            a.href = val.fileContent;
+            a.download = val.fileName;
+            a.click();
+        }
+        else if (this.downloadFn) {
+            this.downloadFn();
+        }
+    }
     get maxSizeLabel() {
         if (!this.maxSize)
             return '';
@@ -2109,11 +2178,11 @@ class OslFileUpload {
         return `Max ${this.maxSize} B`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslFileUpload, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: OslFileUpload, isStandalone: false, selector: "osl-file-upload", inputs: { label: "label", required: "required", disabled: "disabled", model: "model", accept: "accept", multiple: "multiple", maxSize: "maxSize", skeletonLoading: "skeletonLoading", skeletonTheme: "skeletonTheme" }, outputs: { modelChange: "modelChange", changeEv: "changeEv" }, ngImport: i0, template: "<div class=\"d-flex flex-column\">\r\n    <div  [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\">\r\n    <label class=\"label\" [class.txt-clr-red]=\"isInvalid\">\r\n        <span class=\"label-text\" [title]=\"label\">{{label}}</span><span class=\"txt-clr-red label-required\">{{required?'*':''}}</span>\r\n    </label>\r\n    </div>\r\n\r\n    <input\r\n        type=\"file\"\r\n        [accept]=\"accept\"\r\n        [multiple]=\"multiple\"\r\n        [disabled]=\"disabled\"\r\n        (change)=\"onFileChange($event)\"\r\n        #fileInput\r\n        class=\"file-input\"\r\n    >\r\n\r\n    <div\r\n     [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\"\r\n        class=\"drop-zone\"\r\n        [class.error]=\"isInvalid || sizeError\"\r\n        [class.file-disabled]=\"disabled\"\r\n        [class.drag-over]=\"isDragOver\"\r\n        [class.has-file]=\"!!model\"\r\n        (click)=\"triggerInput(fileInput)\"\r\n        (dragover)=\"onDragOver($event)\"\r\n        (dragleave)=\"onDragLeave()\"\r\n        (drop)=\"onDrop($event)\"\r\n    >\r\n        @if(!model) {\r\n            <div class=\"drop-content\">\r\n                <mat-icon class=\"upload-icon\">upload_file</mat-icon>\r\n                <div class=\"drop-text\">\r\n                    <span class=\"browse-link\">Browse</span> or drag &amp; drop\r\n                </div>\r\n                @if(accept) { <div class=\"drop-meta\">{{accept}}</div> }\r\n                @if(maxSize) { <div class=\"drop-meta\">{{maxSizeLabel}}</div> }\r\n            </div>\r\n        } @else {\r\n            <div class=\"file-list\">\r\n                <mat-icon class=\"file-icon\">insert_drive_file</mat-icon>\r\n                <span class=\"file-name\">{{fileNames}}</span>\r\n                <button type=\"button\" class=\"clear-btn\" (click)=\"clearFiles($event)\" title=\"Remove\">\r\n                    <mat-icon>close</mat-icon>\r\n                </button>\r\n            </div>\r\n        }\r\n    </div>\r\n\r\n    @if(sizeError) {\r\n        <mat-hint class=\"hint\">File exceeds the {{maxSizeLabel}} limit.</mat-hint>\r\n    } @else if(isInvalid) {\r\n        <mat-hint class=\"hint\">{{label}} is Required!</mat-hint>\r\n    }\r\n</div>\r\n", styles: [".label{font-size:var(--osl-label-font-size);margin-bottom:5px;display:flex;align-items:center;overflow:hidden}.label-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.label-required{flex-shrink:0}.file-input{display:none}.drop-zone{width:100%;min-height:var(--osl-control-height);border-radius:var(--osl-border-radius);border:1.5px dashed var(--osl-border-color);cursor:pointer;transition:border-color .3s,background .3s;display:flex;align-items:center;justify-content:center;padding:8px}.drop-zone:hover:not(.file-disabled){border-color:var(--osl-focus-border-color);background:#00000003}.drop-zone.drag-over{border-color:var(--osl-focus-border-color);background:#00000008}.drop-zone.has-file{border-style:solid;border-color:var(--osl-border-color)}.drop-zone.error{border-color:var(--osl-error-color)}.drop-zone.file-disabled{opacity:.6;cursor:not-allowed;background:#f5f5f5}.drop-content{display:flex;flex-direction:column;align-items:center;gap:4px;color:#888;pointer-events:none}.upload-icon{font-size:28px;width:28px;height:28px;color:#bbb}.drop-text{font-size:var(--osl-label-font-size)}.browse-link{color:var(--osl-focus-border-color);font-weight:500}.drop-meta{font-size:var(--osl-hint-font-size);color:#bbb}.file-list{display:flex;align-items:center;gap:8px;width:100%;pointer-events:none}.file-icon{font-size:20px;width:20px;height:20px;color:#888;flex-shrink:0}.file-name{flex:1;font-size:var(--osl-text-font-size);color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.clear-btn{pointer-events:all;display:flex;align-items:center;background:none;border:none;cursor:pointer;color:#aaa;padding:0;flex-shrink:0}.clear-btn mat-icon{font-size:16px;width:16px;height:16px}.clear-btn:hover{color:var(--osl-error-color)}.hint{color:var(--osl-error-color);margin-top:2px;font-size:var(--osl-hint-font-size)}.txt-clr-red{color:var(--osl-error-color)}\n"], dependencies: [{ kind: "directive", type: i2$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: OslSkeletonDirective, selector: "[oslSkeleton]", inputs: ["oslSkeleton", "oslSkeletonType", "oslSkeletonAnimation", "oslSkeletonTheme", "oslSkeletonColor", "oslSkeletonHighlight", "oslSkeletonRadius", "oslSkeletonRows", "oslSkeletonRowGap", "oslSkeletonZIndex", "oslSkeletonDelay", "oslSkeletonDuration", "oslSkeletonMinHeight", "oslSkeletonForceReread", "oslSkeletonCircleSize", "oslSkeletonListItems", "oslSkeletonTableRows", "oslSkeletonTableCols", "oslSkeletonCardLines", "oslSkeletonBgColor"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: OslFileUpload, isStandalone: false, selector: "osl-file-upload", inputs: { label: "label", required: "required", disabled: "disabled", model: "model", accept: "accept", multiple: "multiple", maxSize: "maxSize", skeletonLoading: "skeletonLoading", skeletonTheme: "skeletonTheme", fileMode: "fileMode", downloadFn: "downloadFn" }, outputs: { modelChange: "modelChange", changeEv: "changeEv" }, ngImport: i0, template: "<div class=\"d-flex flex-column\">\r\n    <div  [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\">\r\n    <label class=\"label\" [class.txt-clr-red]=\"isInvalid\">\r\n        <span class=\"label-text\" [title]=\"label\">{{label}}</span><span class=\"txt-clr-red label-required\">{{required?'*':''}}</span>\r\n    </label>\r\n    </div>\r\n\r\n    <input\r\n        type=\"file\"\r\n        [accept]=\"accept\"\r\n        [multiple]=\"multiple\"\r\n        [disabled]=\"disabled\"\r\n        (change)=\"onFileChange($event)\"\r\n        #fileInput\r\n        class=\"file-input\"\r\n    >\r\n\r\n    <div\r\n     [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\"\r\n        class=\"drop-zone\"\r\n        [class.error]=\"isInvalid || sizeError\"\r\n        [class.file-disabled]=\"disabled\"\r\n        [class.drag-over]=\"isDragOver\"\r\n        [class.has-file]=\"isBase64Mode ? !!savedFileName : !!model\"\r\n        (click)=\"isBase64Mode && savedFileName ? null : triggerInput(fileInput)\"\r\n        (dragover)=\"onDragOver($event)\"\r\n        (dragleave)=\"onDragLeave()\"\r\n        (drop)=\"onDrop($event)\"\r\n    >\r\n        @if(isBase64Mode) {\r\n            @if(savedFileName) {\r\n                <div class=\"file-list\">\r\n                    <mat-icon class=\"file-icon\">insert_drive_file</mat-icon>\r\n                    <span class=\"file-name\">{{ savedFileName }}</span>\r\n                    <button type=\"button\" class=\"download-btn\" (click)=\"onDownload()\" title=\"Download\">\r\n                        <mat-icon>download</mat-icon>\r\n                    </button>\r\n                    @if(!disabled) {\r\n                        <button type=\"button\" class=\"clear-btn\" (click)=\"clearFiles($event)\" title=\"Remove\">\r\n                            <mat-icon>close</mat-icon>\r\n                        </button>\r\n                    }\r\n                </div>\r\n            } @else {\r\n                <div class=\"drop-content\">\r\n                    <mat-icon class=\"upload-icon\">upload_file</mat-icon>\r\n                    <div class=\"drop-text\">\r\n                        <span class=\"browse-link\">Browse</span> or drag &amp; drop\r\n                    </div>\r\n                    @if(accept) { <div class=\"drop-meta\">{{accept}}</div> }\r\n                    @if(maxSize) { <div class=\"drop-meta\">{{maxSizeLabel}}</div> }\r\n                </div>\r\n            }\r\n        } @else {\r\n            @if(!model) {\r\n                <div class=\"drop-content\">\r\n                    <mat-icon class=\"upload-icon\">upload_file</mat-icon>\r\n                    <div class=\"drop-text\">\r\n                        <span class=\"browse-link\">Browse</span> or drag &amp; drop\r\n                    </div>\r\n                    @if(accept) { <div class=\"drop-meta\">{{accept}}</div> }\r\n                    @if(maxSize) { <div class=\"drop-meta\">{{maxSizeLabel}}</div> }\r\n                </div>\r\n            } @else {\r\n                <div class=\"file-list\">\r\n                    <mat-icon class=\"file-icon\">insert_drive_file</mat-icon>\r\n                    <span class=\"file-name\">{{fileNames}}</span>\r\n                    <button type=\"button\" class=\"clear-btn\" (click)=\"clearFiles($event)\" title=\"Remove\">\r\n                        <mat-icon>close</mat-icon>\r\n                    </button>\r\n                </div>\r\n            }\r\n        }\r\n    </div>\r\n\r\n    @if(sizeError) {\r\n        <mat-hint class=\"hint\">File exceeds the {{maxSizeLabel}} limit.</mat-hint>\r\n    } @else if(isInvalid) {\r\n        <mat-hint class=\"hint\">{{label}} is Required!</mat-hint>\r\n    }\r\n</div>\r\n", styles: [".label{font-size:var(--osl-label-font-size);margin-bottom:5px;display:flex;align-items:center;overflow:hidden}.label-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.label-required{flex-shrink:0}.file-input{display:none}.drop-zone{width:100%;min-height:var(--osl-control-height);border-radius:var(--osl-border-radius);border:1.5px dashed var(--osl-border-color);cursor:pointer;transition:border-color .3s,background .3s;display:flex;align-items:center;justify-content:center;padding:8px}.drop-zone:hover:not(.file-disabled){border-color:var(--osl-focus-border-color);background:#00000003}.drop-zone.drag-over{border-color:var(--osl-focus-border-color);background:#00000008}.drop-zone.has-file{border-style:solid;border-color:var(--osl-border-color)}.drop-zone.error{border-color:var(--osl-error-color)}.drop-zone.file-disabled{opacity:.6;cursor:not-allowed;background:#f5f5f5}.drop-content{display:flex;flex-direction:column;align-items:center;gap:4px;color:#888;pointer-events:none}.upload-icon{font-size:28px;width:28px;height:28px;color:#bbb}.drop-text{font-size:var(--osl-label-font-size)}.browse-link{color:var(--osl-focus-border-color);font-weight:500}.drop-meta{font-size:var(--osl-hint-font-size);color:#bbb}.file-list{display:flex;align-items:center;gap:8px;width:100%;pointer-events:none}.file-icon{font-size:20px;width:20px;height:20px;color:#888;flex-shrink:0}.file-name{flex:1;font-size:var(--osl-text-font-size);color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.clear-btn,.download-btn{pointer-events:all;display:flex;align-items:center;background:none;border:none;cursor:pointer;color:#aaa;padding:0;flex-shrink:0}.clear-btn mat-icon,.download-btn mat-icon{font-size:16px;width:16px;height:16px}.clear-btn:hover{color:var(--osl-error-color)}.download-btn:hover{color:var(--osl-focus-border-color)}.hint{color:var(--osl-error-color);margin-top:2px;font-size:var(--osl-hint-font-size)}.txt-clr-red{color:var(--osl-error-color)}\n"], dependencies: [{ kind: "directive", type: i2$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: OslSkeletonDirective, selector: "[oslSkeleton]", inputs: ["oslSkeleton", "oslSkeletonType", "oslSkeletonAnimation", "oslSkeletonTheme", "oslSkeletonColor", "oslSkeletonHighlight", "oslSkeletonRadius", "oslSkeletonRows", "oslSkeletonRowGap", "oslSkeletonZIndex", "oslSkeletonDelay", "oslSkeletonDuration", "oslSkeletonMinHeight", "oslSkeletonForceReread", "oslSkeletonCircleSize", "oslSkeletonListItems", "oslSkeletonTableRows", "oslSkeletonTableCols", "oslSkeletonCardLines", "oslSkeletonBgColor"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslFileUpload, decorators: [{
             type: Component,
-            args: [{ selector: 'osl-file-upload', standalone: false, template: "<div class=\"d-flex flex-column\">\r\n    <div  [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\">\r\n    <label class=\"label\" [class.txt-clr-red]=\"isInvalid\">\r\n        <span class=\"label-text\" [title]=\"label\">{{label}}</span><span class=\"txt-clr-red label-required\">{{required?'*':''}}</span>\r\n    </label>\r\n    </div>\r\n\r\n    <input\r\n        type=\"file\"\r\n        [accept]=\"accept\"\r\n        [multiple]=\"multiple\"\r\n        [disabled]=\"disabled\"\r\n        (change)=\"onFileChange($event)\"\r\n        #fileInput\r\n        class=\"file-input\"\r\n    >\r\n\r\n    <div\r\n     [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\"\r\n        class=\"drop-zone\"\r\n        [class.error]=\"isInvalid || sizeError\"\r\n        [class.file-disabled]=\"disabled\"\r\n        [class.drag-over]=\"isDragOver\"\r\n        [class.has-file]=\"!!model\"\r\n        (click)=\"triggerInput(fileInput)\"\r\n        (dragover)=\"onDragOver($event)\"\r\n        (dragleave)=\"onDragLeave()\"\r\n        (drop)=\"onDrop($event)\"\r\n    >\r\n        @if(!model) {\r\n            <div class=\"drop-content\">\r\n                <mat-icon class=\"upload-icon\">upload_file</mat-icon>\r\n                <div class=\"drop-text\">\r\n                    <span class=\"browse-link\">Browse</span> or drag &amp; drop\r\n                </div>\r\n                @if(accept) { <div class=\"drop-meta\">{{accept}}</div> }\r\n                @if(maxSize) { <div class=\"drop-meta\">{{maxSizeLabel}}</div> }\r\n            </div>\r\n        } @else {\r\n            <div class=\"file-list\">\r\n                <mat-icon class=\"file-icon\">insert_drive_file</mat-icon>\r\n                <span class=\"file-name\">{{fileNames}}</span>\r\n                <button type=\"button\" class=\"clear-btn\" (click)=\"clearFiles($event)\" title=\"Remove\">\r\n                    <mat-icon>close</mat-icon>\r\n                </button>\r\n            </div>\r\n        }\r\n    </div>\r\n\r\n    @if(sizeError) {\r\n        <mat-hint class=\"hint\">File exceeds the {{maxSizeLabel}} limit.</mat-hint>\r\n    } @else if(isInvalid) {\r\n        <mat-hint class=\"hint\">{{label}} is Required!</mat-hint>\r\n    }\r\n</div>\r\n", styles: [".label{font-size:var(--osl-label-font-size);margin-bottom:5px;display:flex;align-items:center;overflow:hidden}.label-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.label-required{flex-shrink:0}.file-input{display:none}.drop-zone{width:100%;min-height:var(--osl-control-height);border-radius:var(--osl-border-radius);border:1.5px dashed var(--osl-border-color);cursor:pointer;transition:border-color .3s,background .3s;display:flex;align-items:center;justify-content:center;padding:8px}.drop-zone:hover:not(.file-disabled){border-color:var(--osl-focus-border-color);background:#00000003}.drop-zone.drag-over{border-color:var(--osl-focus-border-color);background:#00000008}.drop-zone.has-file{border-style:solid;border-color:var(--osl-border-color)}.drop-zone.error{border-color:var(--osl-error-color)}.drop-zone.file-disabled{opacity:.6;cursor:not-allowed;background:#f5f5f5}.drop-content{display:flex;flex-direction:column;align-items:center;gap:4px;color:#888;pointer-events:none}.upload-icon{font-size:28px;width:28px;height:28px;color:#bbb}.drop-text{font-size:var(--osl-label-font-size)}.browse-link{color:var(--osl-focus-border-color);font-weight:500}.drop-meta{font-size:var(--osl-hint-font-size);color:#bbb}.file-list{display:flex;align-items:center;gap:8px;width:100%;pointer-events:none}.file-icon{font-size:20px;width:20px;height:20px;color:#888;flex-shrink:0}.file-name{flex:1;font-size:var(--osl-text-font-size);color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.clear-btn{pointer-events:all;display:flex;align-items:center;background:none;border:none;cursor:pointer;color:#aaa;padding:0;flex-shrink:0}.clear-btn mat-icon{font-size:16px;width:16px;height:16px}.clear-btn:hover{color:var(--osl-error-color)}.hint{color:var(--osl-error-color);margin-top:2px;font-size:var(--osl-hint-font-size)}.txt-clr-red{color:var(--osl-error-color)}\n"] }]
+            args: [{ selector: 'osl-file-upload', standalone: false, template: "<div class=\"d-flex flex-column\">\r\n    <div  [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\">\r\n    <label class=\"label\" [class.txt-clr-red]=\"isInvalid\">\r\n        <span class=\"label-text\" [title]=\"label\">{{label}}</span><span class=\"txt-clr-red label-required\">{{required?'*':''}}</span>\r\n    </label>\r\n    </div>\r\n\r\n    <input\r\n        type=\"file\"\r\n        [accept]=\"accept\"\r\n        [multiple]=\"multiple\"\r\n        [disabled]=\"disabled\"\r\n        (change)=\"onFileChange($event)\"\r\n        #fileInput\r\n        class=\"file-input\"\r\n    >\r\n\r\n    <div\r\n     [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\"\r\n        class=\"drop-zone\"\r\n        [class.error]=\"isInvalid || sizeError\"\r\n        [class.file-disabled]=\"disabled\"\r\n        [class.drag-over]=\"isDragOver\"\r\n        [class.has-file]=\"isBase64Mode ? !!savedFileName : !!model\"\r\n        (click)=\"isBase64Mode && savedFileName ? null : triggerInput(fileInput)\"\r\n        (dragover)=\"onDragOver($event)\"\r\n        (dragleave)=\"onDragLeave()\"\r\n        (drop)=\"onDrop($event)\"\r\n    >\r\n        @if(isBase64Mode) {\r\n            @if(savedFileName) {\r\n                <div class=\"file-list\">\r\n                    <mat-icon class=\"file-icon\">insert_drive_file</mat-icon>\r\n                    <span class=\"file-name\">{{ savedFileName }}</span>\r\n                    <button type=\"button\" class=\"download-btn\" (click)=\"onDownload()\" title=\"Download\">\r\n                        <mat-icon>download</mat-icon>\r\n                    </button>\r\n                    @if(!disabled) {\r\n                        <button type=\"button\" class=\"clear-btn\" (click)=\"clearFiles($event)\" title=\"Remove\">\r\n                            <mat-icon>close</mat-icon>\r\n                        </button>\r\n                    }\r\n                </div>\r\n            } @else {\r\n                <div class=\"drop-content\">\r\n                    <mat-icon class=\"upload-icon\">upload_file</mat-icon>\r\n                    <div class=\"drop-text\">\r\n                        <span class=\"browse-link\">Browse</span> or drag &amp; drop\r\n                    </div>\r\n                    @if(accept) { <div class=\"drop-meta\">{{accept}}</div> }\r\n                    @if(maxSize) { <div class=\"drop-meta\">{{maxSizeLabel}}</div> }\r\n                </div>\r\n            }\r\n        } @else {\r\n            @if(!model) {\r\n                <div class=\"drop-content\">\r\n                    <mat-icon class=\"upload-icon\">upload_file</mat-icon>\r\n                    <div class=\"drop-text\">\r\n                        <span class=\"browse-link\">Browse</span> or drag &amp; drop\r\n                    </div>\r\n                    @if(accept) { <div class=\"drop-meta\">{{accept}}</div> }\r\n                    @if(maxSize) { <div class=\"drop-meta\">{{maxSizeLabel}}</div> }\r\n                </div>\r\n            } @else {\r\n                <div class=\"file-list\">\r\n                    <mat-icon class=\"file-icon\">insert_drive_file</mat-icon>\r\n                    <span class=\"file-name\">{{fileNames}}</span>\r\n                    <button type=\"button\" class=\"clear-btn\" (click)=\"clearFiles($event)\" title=\"Remove\">\r\n                        <mat-icon>close</mat-icon>\r\n                    </button>\r\n                </div>\r\n            }\r\n        }\r\n    </div>\r\n\r\n    @if(sizeError) {\r\n        <mat-hint class=\"hint\">File exceeds the {{maxSizeLabel}} limit.</mat-hint>\r\n    } @else if(isInvalid) {\r\n        <mat-hint class=\"hint\">{{label}} is Required!</mat-hint>\r\n    }\r\n</div>\r\n", styles: [".label{font-size:var(--osl-label-font-size);margin-bottom:5px;display:flex;align-items:center;overflow:hidden}.label-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.label-required{flex-shrink:0}.file-input{display:none}.drop-zone{width:100%;min-height:var(--osl-control-height);border-radius:var(--osl-border-radius);border:1.5px dashed var(--osl-border-color);cursor:pointer;transition:border-color .3s,background .3s;display:flex;align-items:center;justify-content:center;padding:8px}.drop-zone:hover:not(.file-disabled){border-color:var(--osl-focus-border-color);background:#00000003}.drop-zone.drag-over{border-color:var(--osl-focus-border-color);background:#00000008}.drop-zone.has-file{border-style:solid;border-color:var(--osl-border-color)}.drop-zone.error{border-color:var(--osl-error-color)}.drop-zone.file-disabled{opacity:.6;cursor:not-allowed;background:#f5f5f5}.drop-content{display:flex;flex-direction:column;align-items:center;gap:4px;color:#888;pointer-events:none}.upload-icon{font-size:28px;width:28px;height:28px;color:#bbb}.drop-text{font-size:var(--osl-label-font-size)}.browse-link{color:var(--osl-focus-border-color);font-weight:500}.drop-meta{font-size:var(--osl-hint-font-size);color:#bbb}.file-list{display:flex;align-items:center;gap:8px;width:100%;pointer-events:none}.file-icon{font-size:20px;width:20px;height:20px;color:#888;flex-shrink:0}.file-name{flex:1;font-size:var(--osl-text-font-size);color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.clear-btn,.download-btn{pointer-events:all;display:flex;align-items:center;background:none;border:none;cursor:pointer;color:#aaa;padding:0;flex-shrink:0}.clear-btn mat-icon,.download-btn mat-icon{font-size:16px;width:16px;height:16px}.clear-btn:hover{color:var(--osl-error-color)}.download-btn:hover{color:var(--osl-focus-border-color)}.hint{color:var(--osl-error-color);margin-top:2px;font-size:var(--osl-hint-font-size)}.txt-clr-red{color:var(--osl-error-color)}\n"] }]
         }], propDecorators: { label: [{
                 type: Input,
                 args: ['label']
@@ -2141,6 +2210,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             }], skeletonTheme: [{
                 type: Input,
                 args: ['skeletonTheme']
+            }], fileMode: [{
+                type: Input,
+                args: ['fileMode']
+            }], downloadFn: [{
+                type: Input,
+                args: ['downloadFn']
             }], modelChange: [{
                 type: Output
             }], changeEv: [{
@@ -2941,11 +3016,11 @@ class DynamicForm {
         return list.flatMap(e => e.rows?.length ? [e, ...this._flatElements(e.rows)] : [e]);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DynamicForm, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DynamicForm, isStandalone: false, selector: "osl-dynamic-form", inputs: { elements: "elements", model: "model", skeletonLoading: "skeletonLoading", skeletonTheme: "skeletonTheme" }, outputs: { modelChange: "modelChange" }, usesOnChanges: true, ngImport: i0, template: "@if(elements && elements.length > 0) {\n    <div class=\"row align-items-center w-100\">\n        @for(elem of elements; track elem) {\n            @if(!(elem.hideIf ? elem.hideIf(model) : elem.hide)) {\n                <ng-container *ngTemplateOutlet=\"formField; context: { $implicit: elem }\"></ng-container>\n            }\n        }\n    </div>\n}\n\n<ng-template #formField let-elem>\n    @if(elem.hideIf ? !elem.hideIf(model) : true) {\n        @switch (elem.elementType) {\n\n            @case (\"textbox\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-input\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [type]=\"elem.inputType || 'text'\"\n                        [placeholder]=\"elem.placeholder || ''\"\n                        [mask]=\"elem.mask || ''\"\n                        [min]=\"elem.min ?? ''\"\n                        [max]=\"elem.max ?? ''\"\n                        [minLength]=\"elem.minLength ?? null\"\n                        [maxLength]=\"elem.maxLength ?? null\"\n                        [prefixIcon]=\"elem.prefixIcon || ''\"\n                        [suffixIcon]=\"elem.suffixIcon || ''\"\n                        [onlyChars]=\"!!elem.onlyChars\"\n                        [decimalPortion]=\"elem.decimalPortion ?? null\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                        [isCapitalize]=\"elem.isCapitalize\"\n                    ></osl-input>\n                </div>\n            }\n\n            @case (\"textarea\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-textarea\n                        [label]=\"elem.label\"\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [rows]=\"elem.textareaRows || 3\"\n                        [placeholder]=\"elem.placeholder || ''\"\n                        [maxLength]=\"elem.maxLength ?? null\"\n                        [minLength]=\"elem.minLength ?? null\"\n                        [characterCounter]=\"!!elem.characterCounter\"\n                        [resize]=\"elem.resize || 'none'\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-textarea>\n                </div>\n            }\n\n            @case (\"select\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-select\n                        [label]=\"elem.label\"\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [datasource]=\"elem.datasource || []\"\n                        [displayField]=\"elem.displayField || ''\"\n                        [valueField]=\"elem.valueField || ''\"\n                        [placeholder]=\"elem.selectPlaceholder || 'Select...'\"\n                        [loading]=\"elem.loadingIf ? elem.loadingIf(model) : false\"\n                        [clearable]=\"!!elem.clearable\"\n                        (changeEv)=\"elem.change ? onSelectChange(elem, $event) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-select>\n                </div>\n            }\n\n            @case (\"radio\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-radio\n                        [label]=\"elem.label\"\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [datasource]=\"elem.datasource || []\"\n                        [displayField]=\"elem.displayField || ''\"\n                        [valueField]=\"elem.valueField || ''\"\n                        [inline]=\"!!elem.inline\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-radio>\n                </div>\n            }\n\n            @case (\"slide-toggle\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-slide-toggle\n                        [label]=\"elem.label\"\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [labelPosition]=\"elem.labelPosition || 'after'\"\n                        [trueLabel]=\"elem.trueLabel || ''\"\n                        [falseLabel]=\"elem.falseLabel || ''\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-slide-toggle>\n                </div>\n            }\n\n            @case (\"autocomplete\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-autocomplete\n                        [label]=\"elem.label\"\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [datasource]=\"elem.datasource || []\"\n                        [displayField]=\"elem.displayField || ''\"\n                        [valueField]=\"elem.valueField || ''\"\n                        [placeholder]=\"elem.autocompletePlaceholder || 'Type to search...'\"\n                        [loading]=\"elem.loadingIf ? elem.loadingIf(model) : false\"\n                        (changeEv)=\"onFieldChange(elem, $event)\"\n                        [(model)]=\"model[elem.key]\"\n                        [methodName]=\"elem.apiMethod\"\n                        [service]=\"elem.apiService\"\n                        [object]=\"model[elem.objectName]\"\n                        [searchType]=\"elem.searchType\"\n                        [configMethodName]=\"elem.apiConfigMethod\"\n                        [isLister]=\"elem.isListerAutocomplete\"\n                        [apiBody]=\"elem.apiBody\"\n                    ></osl-autocomplete>\n                </div>\n            }\n\n            @case (\"file-uploader\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-file-upload\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [accept]=\"elem.accept || ''\"\n                        [multiple]=\"!!elem.multiple\"\n                        [maxSize]=\"elem.maxFileSize || 0\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-file-upload>\n                </div>\n            }\n\n            @case (\"datepicker\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-datepicker\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [dateType]=\"elem.dateType || 'date'\"\n                        [placeholder]=\"elem.placeholder || ''\"\n                        [minDate]=\"elem.minDateIf ? elem.minDateIf(model) : elem.minDate || ''\"\n                        [maxDate]=\"elem.maxDateIf ? elem.maxDateIf(model) : elem.maxDate || ''\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-datepicker>\n                </div>\n            }\n\n             @case (\"datetimepicker\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-datetimepicker\n                        [skeletonLoading]=\"skeletonLoading\"\n                        [skeletonTheme]=\"skeletonTheme\"\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [placeholder]=\"elem.placeholder || ''\"\n                        [minDatetime]=\"elem.minDatetimeIf ? elem.minDatetimeIf(model) : elem.minDatetime || ''\"\n                        [maxDatetime]=\"elem.maxDatetimeIf ? elem.maxDatetimeIf(model) : elem.maxDatetime || ''\"\n                        [format]=\"elem.datetimepickerFormat || 'YYYY-MM-DDTHH:mm'\"\n                        [showSeconds]=\"!!elem.datetimepickerShowSeconds\"\n                        [enableMeridian]=\"!!elem.datetimepickerEnableMeridian\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                           (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-datetimepicker>\n                </div>\n            }\n\n            @case (\"checkbox\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-checkbox\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [indeterminate]=\"!!elem.indeterminate\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-checkbox>\n                </div>\n            }\n\n            @case (\"button\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-button\n                        [label]=\"elem.label\"\n                        [loading]=\"elem.loadingIf ? elem.loadingIf(model) : false\"\n                        variant=\"secondary\"\n                        (clickEv)=\"elem.change ? elem.change(model) : null\"\n                    ></osl-button>\n                </div>\n            }\n\n            @case (\"fieldset\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-3'\">\n                    <fieldset class=\"osl-fieldset\">\n                        @if(elem.label) {\n                            <legend class=\"osl-fieldset-legend\" [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\">\n                                <span class=\"osl-fieldset-legend__text\">{{ elem.label }}</span>\n                            </legend>\n                        }\n                        <div class=\"row w-100 osl-fieldset-body\">\n                            @for(innerElem of elem.rows; track innerElem) {\n                                @if(!(innerElem.hideIf ? innerElem.hideIf(model) : innerElem.hide)) {\n                                    <ng-container *ngTemplateOutlet=\"formField; context: { $implicit: innerElem }\"></ng-container>\n                                }\n                            }\n                        </div>\n                    </fieldset>\n                </div>\n            }\n\n            @case (\"templateRef\"){\n                 <div [class]=\"'col-md-'+elem.columns+' mt-3'\">\n                        <ng-container *ngTemplateOutlet=\"elem.templateRef; context: { $implicit: elem}\"></ng-container>\n                </div>\n            }\n\n             @case (\"spacer\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                </div>\n            }\n\n        }\n    }\n</ng-template>\n", styles: [".osl-fieldset{border:1.5px solid var(--osl-border-color, #e5e7eb);border-radius:10px;padding:0 16px 16px;margin:0;background:linear-gradient(135deg,#f9fafb,#fff);box-shadow:0 1px 4px #0000000d;position:relative;transition:box-shadow .2s}.osl-fieldset:focus-within{box-shadow:0 0 0 3px #6366f114,0 2px 8px #0000000f;border-color:var(--osl-primary, #6366f1)}.osl-fieldset-legend{padding:0 6px;margin-left:8px;line-height:1;float:none;width:auto}.osl-fieldset-legend__text{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;background:#fff;padding:2px 10px;border:1.5px solid var(--osl-border-color, #e5e7eb);box-shadow:0 1px 3px #6366f11a}.osl-fieldset-body{margin-top:4px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: OslSkeletonDirective, selector: "[oslSkeleton]", inputs: ["oslSkeleton", "oslSkeletonType", "oslSkeletonAnimation", "oslSkeletonTheme", "oslSkeletonColor", "oslSkeletonHighlight", "oslSkeletonRadius", "oslSkeletonRows", "oslSkeletonRowGap", "oslSkeletonZIndex", "oslSkeletonDelay", "oslSkeletonDuration", "oslSkeletonMinHeight", "oslSkeletonForceReread", "oslSkeletonCircleSize", "oslSkeletonListItems", "oslSkeletonTableRows", "oslSkeletonTableCols", "oslSkeletonCardLines", "oslSkeletonBgColor"] }, { kind: "component", type: Oslinput, selector: "osl-input", inputs: ["label", "required", "disabled", "model", "type", "placeholder", "mask", "min", "max", "minLength", "maxLength", "prefixIcon", "suffixIcon", "skeletonLoading", "skeletonTheme", "onlyChars", "isCapitalize", "decimalPortion"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: Osltextarea, selector: "osl-textarea", inputs: ["label", "rows", "required", "disabled", "model", "placeholder", "maxLength", "minLength", "characterCounter", "resize", "skeletonLoading", "skeletonTheme"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslSelect, selector: "osl-select", inputs: ["label", "required", "disabled", "model", "datasource", "displayField", "valueField", "placeholder", "loading", "clearable", "skeletonLoading", "skeletonTheme"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslRadio, selector: "osl-radio", inputs: ["label", "required", "disabled", "model", "datasource", "displayField", "valueField", "inline", "skeletonLoading", "skeletonTheme"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslSlideToggle, selector: "osl-slide-toggle", inputs: ["label", "disabled", "model", "labelPosition", "trueLabel", "falseLabel", "skeletonLoading", "skeletonTheme"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslAutocomplete, selector: "osl-autocomplete", inputs: ["label", "required", "disabled", "model", "datasource", "displayField", "valueField", "placeholder", "loading", "searchType", "methodName", "configMethodName", "service", "object", "skeletonLoading", "skeletonTheme", "isLister", "apiBody"], outputs: ["datasourceChange", "modelChange", "changeEv"] }, { kind: "component", type: OslFileUpload, selector: "osl-file-upload", inputs: ["label", "required", "disabled", "model", "accept", "multiple", "maxSize", "skeletonLoading", "skeletonTheme"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslDatepicker, selector: "osl-datepicker", inputs: ["label", "required", "disabled", "model", "dateType", "placeholder", "minDate", "maxDate", "skeletonLoading", "skeletonTheme"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslDatetimepicker, selector: "osl-datetimepicker", inputs: ["label", "required", "disabled", "model", "placeholder", "minDatetime", "maxDatetime", "format", "displayFormat", "showSeconds", "enableMeridian", "skeletonLoading", "skeletonTheme"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslCheckbox, selector: "osl-checkbox", inputs: ["label", "disabled", "required", "model", "indeterminate", "skeletonLoading", "skeletonTheme"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslButton, selector: "osl-button", inputs: ["label", "icon", "variant", "size", "disabled", "loading", "type", "fullWidth"], outputs: ["clickEv"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DynamicForm, isStandalone: false, selector: "osl-dynamic-form", inputs: { elements: "elements", model: "model", skeletonLoading: "skeletonLoading", skeletonTheme: "skeletonTheme" }, outputs: { modelChange: "modelChange" }, usesOnChanges: true, ngImport: i0, template: "@if(elements && elements.length > 0) {\n    <div class=\"row align-items-center w-100\">\n        @for(elem of elements; track elem) {\n            @if(!(elem.hideIf ? elem.hideIf(model) : elem.hide)) {\n                <ng-container *ngTemplateOutlet=\"formField; context: { $implicit: elem }\"></ng-container>\n            }\n        }\n    </div>\n}\n\n<ng-template #formField let-elem>\n    @if(elem.hideIf ? !elem.hideIf(model) : true) {\n        @switch (elem.elementType) {\n\n            @case (\"textbox\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-input\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [type]=\"elem.inputType || 'text'\"\n                        [placeholder]=\"elem.placeholder || ''\"\n                        [mask]=\"elem.mask || ''\"\n                        [min]=\"elem.min ?? ''\"\n                        [max]=\"elem.max ?? ''\"\n                        [minLength]=\"elem.minLength ?? null\"\n                        [maxLength]=\"elem.maxLength ?? null\"\n                        [prefixIcon]=\"elem.prefixIcon || ''\"\n                        [suffixIcon]=\"elem.suffixIcon || ''\"\n                        [onlyChars]=\"!!elem.onlyChars\"\n                        [decimalPortion]=\"elem.decimalPortion ?? null\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                        [isCapitalize]=\"elem.isCapitalize\"\n                    ></osl-input>\n                </div>\n            }\n\n            @case (\"textarea\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-textarea\n                        [label]=\"elem.label\"\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [rows]=\"elem.textareaRows || 3\"\n                        [placeholder]=\"elem.placeholder || ''\"\n                        [maxLength]=\"elem.maxLength ?? null\"\n                        [minLength]=\"elem.minLength ?? null\"\n                        [characterCounter]=\"!!elem.characterCounter\"\n                        [resize]=\"elem.resize || 'none'\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-textarea>\n                </div>\n            }\n\n            @case (\"select\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-select\n                        [label]=\"elem.label\"\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [datasource]=\"elem.datasource || []\"\n                        [displayField]=\"elem.displayField || ''\"\n                        [valueField]=\"elem.valueField || ''\"\n                        [placeholder]=\"elem.selectPlaceholder || 'Select...'\"\n                        [loading]=\"elem.loadingIf ? elem.loadingIf(model) : false\"\n                        [clearable]=\"!!elem.clearable\"\n                        (changeEv)=\"elem.change ? onSelectChange(elem, $event) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-select>\n                </div>\n            }\n\n            @case (\"radio\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-radio\n                        [label]=\"elem.label\"\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [datasource]=\"elem.datasource || []\"\n                        [displayField]=\"elem.displayField || ''\"\n                        [valueField]=\"elem.valueField || ''\"\n                        [inline]=\"!!elem.inline\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-radio>\n                </div>\n            }\n\n            @case (\"slide-toggle\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-slide-toggle\n                        [label]=\"elem.label\"\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [labelPosition]=\"elem.labelPosition || 'after'\"\n                        [trueLabel]=\"elem.trueLabel || ''\"\n                        [falseLabel]=\"elem.falseLabel || ''\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-slide-toggle>\n                </div>\n            }\n\n            @case (\"autocomplete\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-autocomplete\n                        [label]=\"elem.label\"\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [datasource]=\"elem.datasource || []\"\n                        [displayField]=\"elem.displayField || ''\"\n                        [valueField]=\"elem.valueField || ''\"\n                        [placeholder]=\"elem.autocompletePlaceholder || 'Type to search...'\"\n                        [loading]=\"elem.loadingIf ? elem.loadingIf(model) : false\"\n                        (changeEv)=\"onFieldChange(elem, $event)\"\n                        [(model)]=\"model[elem.key]\"\n                        [methodName]=\"elem.apiMethod\"\n                        [service]=\"elem.apiService\"\n                        [object]=\"model[elem.objectName]\"\n                        [searchType]=\"elem.searchType\"\n                        [configMethodName]=\"elem.apiConfigMethod\"\n                        [isLister]=\"elem.isListerAutocomplete\"\n                        [apiBody]=\"elem.apiBody\"\n                    ></osl-autocomplete>\n                </div>\n            }\n\n            @case (\"file-uploader\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-file-upload\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [accept]=\"elem.accept || ''\"\n                        [multiple]=\"!!elem.multiple\"\n                        [maxSize]=\"elem.maxFileSize || 0\"\n                        [fileMode]=\"elem.fileMode || 'raw'\"\n                        [downloadFn]=\"elem.fileDownloadFn ? elem.fileDownloadFn.bind(null, model) : null\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-file-upload>\n                </div>\n            }\n\n            @case (\"datepicker\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-datepicker\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [dateType]=\"elem.dateType || 'date'\"\n                        [placeholder]=\"elem.placeholder || ''\"\n                        [minDate]=\"elem.minDateIf ? elem.minDateIf(model) : elem.minDate || ''\"\n                        [maxDate]=\"elem.maxDateIf ? elem.maxDateIf(model) : elem.maxDate || ''\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-datepicker>\n                </div>\n            }\n\n             @case (\"datetimepicker\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-datetimepicker\n                        [skeletonLoading]=\"skeletonLoading\"\n                        [skeletonTheme]=\"skeletonTheme\"\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [placeholder]=\"elem.placeholder || ''\"\n                        [minDatetime]=\"elem.minDatetimeIf ? elem.minDatetimeIf(model) : elem.minDatetime || ''\"\n                        [maxDatetime]=\"elem.maxDatetimeIf ? elem.maxDatetimeIf(model) : elem.maxDatetime || ''\"\n                        [format]=\"elem.datetimepickerFormat || 'YYYY-MM-DDTHH:mm'\"\n                        [showSeconds]=\"!!elem.datetimepickerShowSeconds\"\n                        [enableMeridian]=\"!!elem.datetimepickerEnableMeridian\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                           (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-datetimepicker>\n                </div>\n            }\n\n            @case (\"checkbox\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-checkbox\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [indeterminate]=\"!!elem.indeterminate\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-checkbox>\n                </div>\n            }\n\n            @case (\"button\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-button\n                        [label]=\"elem.label\"\n                        [loading]=\"elem.loadingIf ? elem.loadingIf(model) : false\"\n                        variant=\"secondary\"\n                        (clickEv)=\"elem.change ? elem.change(model) : null\"\n                    ></osl-button>\n                </div>\n            }\n\n            @case (\"fieldset\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-3'\">\n                    <fieldset class=\"osl-fieldset\">\n                        @if(elem.label) {\n                            <legend class=\"osl-fieldset-legend\" [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\">\n                                <span class=\"osl-fieldset-legend__text\">{{ elem.label }}</span>\n                            </legend>\n                        }\n                        <div class=\"row w-100 osl-fieldset-body\">\n                            @for(innerElem of elem.rows; track innerElem) {\n                                @if(!(innerElem.hideIf ? innerElem.hideIf(model) : innerElem.hide)) {\n                                    <ng-container *ngTemplateOutlet=\"formField; context: { $implicit: innerElem }\"></ng-container>\n                                }\n                            }\n                        </div>\n                    </fieldset>\n                </div>\n            }\n\n            @case (\"templateRef\"){\n                 <div [class]=\"'col-md-'+elem.columns+' mt-3'\">\n                        <ng-container *ngTemplateOutlet=\"elem.templateRef; context: { $implicit: elem}\"></ng-container>\n                </div>\n            }\n\n             @case (\"spacer\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                </div>\n            }\n\n        }\n    }\n</ng-template>\n", styles: [".osl-fieldset{border:1.5px solid var(--osl-border-color, #e5e7eb);border-radius:10px;padding:0 16px 16px;margin:0;background:linear-gradient(135deg,#f9fafb,#fff);box-shadow:0 1px 4px #0000000d;position:relative;transition:box-shadow .2s}.osl-fieldset:focus-within{box-shadow:0 0 0 3px #6366f114,0 2px 8px #0000000f;border-color:var(--osl-primary, #6366f1)}.osl-fieldset-legend{padding:0 6px;margin-left:8px;line-height:1;float:none;width:auto}.osl-fieldset-legend__text{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;background:#fff;padding:2px 10px;border:1.5px solid var(--osl-border-color, #e5e7eb);box-shadow:0 1px 3px #6366f11a}.osl-fieldset-body{margin-top:4px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: OslSkeletonDirective, selector: "[oslSkeleton]", inputs: ["oslSkeleton", "oslSkeletonType", "oslSkeletonAnimation", "oslSkeletonTheme", "oslSkeletonColor", "oslSkeletonHighlight", "oslSkeletonRadius", "oslSkeletonRows", "oslSkeletonRowGap", "oslSkeletonZIndex", "oslSkeletonDelay", "oslSkeletonDuration", "oslSkeletonMinHeight", "oslSkeletonForceReread", "oslSkeletonCircleSize", "oslSkeletonListItems", "oslSkeletonTableRows", "oslSkeletonTableCols", "oslSkeletonCardLines", "oslSkeletonBgColor"] }, { kind: "component", type: Oslinput, selector: "osl-input", inputs: ["label", "required", "disabled", "model", "type", "placeholder", "mask", "min", "max", "minLength", "maxLength", "prefixIcon", "suffixIcon", "skeletonLoading", "skeletonTheme", "onlyChars", "isCapitalize", "decimalPortion"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: Osltextarea, selector: "osl-textarea", inputs: ["label", "rows", "required", "disabled", "model", "placeholder", "maxLength", "minLength", "characterCounter", "resize", "skeletonLoading", "skeletonTheme"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslSelect, selector: "osl-select", inputs: ["label", "required", "disabled", "model", "datasource", "displayField", "valueField", "placeholder", "loading", "clearable", "skeletonLoading", "skeletonTheme"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslRadio, selector: "osl-radio", inputs: ["label", "required", "disabled", "model", "datasource", "displayField", "valueField", "inline", "skeletonLoading", "skeletonTheme"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslSlideToggle, selector: "osl-slide-toggle", inputs: ["label", "disabled", "model", "labelPosition", "trueLabel", "falseLabel", "skeletonLoading", "skeletonTheme"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslAutocomplete, selector: "osl-autocomplete", inputs: ["label", "required", "disabled", "model", "datasource", "displayField", "valueField", "placeholder", "loading", "searchType", "methodName", "configMethodName", "service", "object", "skeletonLoading", "skeletonTheme", "isLister", "apiBody"], outputs: ["datasourceChange", "modelChange", "changeEv"] }, { kind: "component", type: OslFileUpload, selector: "osl-file-upload", inputs: ["label", "required", "disabled", "model", "accept", "multiple", "maxSize", "skeletonLoading", "skeletonTheme", "fileMode", "downloadFn"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslDatepicker, selector: "osl-datepicker", inputs: ["label", "required", "disabled", "model", "dateType", "placeholder", "minDate", "maxDate", "skeletonLoading", "skeletonTheme"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslDatetimepicker, selector: "osl-datetimepicker", inputs: ["label", "required", "disabled", "model", "placeholder", "minDatetime", "maxDatetime", "format", "displayFormat", "showSeconds", "enableMeridian", "skeletonLoading", "skeletonTheme"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslCheckbox, selector: "osl-checkbox", inputs: ["label", "disabled", "required", "model", "indeterminate", "skeletonLoading", "skeletonTheme"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslButton, selector: "osl-button", inputs: ["label", "icon", "variant", "size", "disabled", "loading", "type", "fullWidth"], outputs: ["clickEv"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DynamicForm, decorators: [{
             type: Component,
-            args: [{ selector: 'osl-dynamic-form', standalone: false, template: "@if(elements && elements.length > 0) {\n    <div class=\"row align-items-center w-100\">\n        @for(elem of elements; track elem) {\n            @if(!(elem.hideIf ? elem.hideIf(model) : elem.hide)) {\n                <ng-container *ngTemplateOutlet=\"formField; context: { $implicit: elem }\"></ng-container>\n            }\n        }\n    </div>\n}\n\n<ng-template #formField let-elem>\n    @if(elem.hideIf ? !elem.hideIf(model) : true) {\n        @switch (elem.elementType) {\n\n            @case (\"textbox\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-input\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [type]=\"elem.inputType || 'text'\"\n                        [placeholder]=\"elem.placeholder || ''\"\n                        [mask]=\"elem.mask || ''\"\n                        [min]=\"elem.min ?? ''\"\n                        [max]=\"elem.max ?? ''\"\n                        [minLength]=\"elem.minLength ?? null\"\n                        [maxLength]=\"elem.maxLength ?? null\"\n                        [prefixIcon]=\"elem.prefixIcon || ''\"\n                        [suffixIcon]=\"elem.suffixIcon || ''\"\n                        [onlyChars]=\"!!elem.onlyChars\"\n                        [decimalPortion]=\"elem.decimalPortion ?? null\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                        [isCapitalize]=\"elem.isCapitalize\"\n                    ></osl-input>\n                </div>\n            }\n\n            @case (\"textarea\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-textarea\n                        [label]=\"elem.label\"\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [rows]=\"elem.textareaRows || 3\"\n                        [placeholder]=\"elem.placeholder || ''\"\n                        [maxLength]=\"elem.maxLength ?? null\"\n                        [minLength]=\"elem.minLength ?? null\"\n                        [characterCounter]=\"!!elem.characterCounter\"\n                        [resize]=\"elem.resize || 'none'\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-textarea>\n                </div>\n            }\n\n            @case (\"select\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-select\n                        [label]=\"elem.label\"\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [datasource]=\"elem.datasource || []\"\n                        [displayField]=\"elem.displayField || ''\"\n                        [valueField]=\"elem.valueField || ''\"\n                        [placeholder]=\"elem.selectPlaceholder || 'Select...'\"\n                        [loading]=\"elem.loadingIf ? elem.loadingIf(model) : false\"\n                        [clearable]=\"!!elem.clearable\"\n                        (changeEv)=\"elem.change ? onSelectChange(elem, $event) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-select>\n                </div>\n            }\n\n            @case (\"radio\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-radio\n                        [label]=\"elem.label\"\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [datasource]=\"elem.datasource || []\"\n                        [displayField]=\"elem.displayField || ''\"\n                        [valueField]=\"elem.valueField || ''\"\n                        [inline]=\"!!elem.inline\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-radio>\n                </div>\n            }\n\n            @case (\"slide-toggle\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-slide-toggle\n                        [label]=\"elem.label\"\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [labelPosition]=\"elem.labelPosition || 'after'\"\n                        [trueLabel]=\"elem.trueLabel || ''\"\n                        [falseLabel]=\"elem.falseLabel || ''\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-slide-toggle>\n                </div>\n            }\n\n            @case (\"autocomplete\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-autocomplete\n                        [label]=\"elem.label\"\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [datasource]=\"elem.datasource || []\"\n                        [displayField]=\"elem.displayField || ''\"\n                        [valueField]=\"elem.valueField || ''\"\n                        [placeholder]=\"elem.autocompletePlaceholder || 'Type to search...'\"\n                        [loading]=\"elem.loadingIf ? elem.loadingIf(model) : false\"\n                        (changeEv)=\"onFieldChange(elem, $event)\"\n                        [(model)]=\"model[elem.key]\"\n                        [methodName]=\"elem.apiMethod\"\n                        [service]=\"elem.apiService\"\n                        [object]=\"model[elem.objectName]\"\n                        [searchType]=\"elem.searchType\"\n                        [configMethodName]=\"elem.apiConfigMethod\"\n                        [isLister]=\"elem.isListerAutocomplete\"\n                        [apiBody]=\"elem.apiBody\"\n                    ></osl-autocomplete>\n                </div>\n            }\n\n            @case (\"file-uploader\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-file-upload\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [accept]=\"elem.accept || ''\"\n                        [multiple]=\"!!elem.multiple\"\n                        [maxSize]=\"elem.maxFileSize || 0\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-file-upload>\n                </div>\n            }\n\n            @case (\"datepicker\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-datepicker\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [dateType]=\"elem.dateType || 'date'\"\n                        [placeholder]=\"elem.placeholder || ''\"\n                        [minDate]=\"elem.minDateIf ? elem.minDateIf(model) : elem.minDate || ''\"\n                        [maxDate]=\"elem.maxDateIf ? elem.maxDateIf(model) : elem.maxDate || ''\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-datepicker>\n                </div>\n            }\n\n             @case (\"datetimepicker\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-datetimepicker\n                        [skeletonLoading]=\"skeletonLoading\"\n                        [skeletonTheme]=\"skeletonTheme\"\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [placeholder]=\"elem.placeholder || ''\"\n                        [minDatetime]=\"elem.minDatetimeIf ? elem.minDatetimeIf(model) : elem.minDatetime || ''\"\n                        [maxDatetime]=\"elem.maxDatetimeIf ? elem.maxDatetimeIf(model) : elem.maxDatetime || ''\"\n                        [format]=\"elem.datetimepickerFormat || 'YYYY-MM-DDTHH:mm'\"\n                        [showSeconds]=\"!!elem.datetimepickerShowSeconds\"\n                        [enableMeridian]=\"!!elem.datetimepickerEnableMeridian\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                           (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-datetimepicker>\n                </div>\n            }\n\n            @case (\"checkbox\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-checkbox\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [indeterminate]=\"!!elem.indeterminate\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-checkbox>\n                </div>\n            }\n\n            @case (\"button\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-button\n                        [label]=\"elem.label\"\n                        [loading]=\"elem.loadingIf ? elem.loadingIf(model) : false\"\n                        variant=\"secondary\"\n                        (clickEv)=\"elem.change ? elem.change(model) : null\"\n                    ></osl-button>\n                </div>\n            }\n\n            @case (\"fieldset\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-3'\">\n                    <fieldset class=\"osl-fieldset\">\n                        @if(elem.label) {\n                            <legend class=\"osl-fieldset-legend\" [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\">\n                                <span class=\"osl-fieldset-legend__text\">{{ elem.label }}</span>\n                            </legend>\n                        }\n                        <div class=\"row w-100 osl-fieldset-body\">\n                            @for(innerElem of elem.rows; track innerElem) {\n                                @if(!(innerElem.hideIf ? innerElem.hideIf(model) : innerElem.hide)) {\n                                    <ng-container *ngTemplateOutlet=\"formField; context: { $implicit: innerElem }\"></ng-container>\n                                }\n                            }\n                        </div>\n                    </fieldset>\n                </div>\n            }\n\n            @case (\"templateRef\"){\n                 <div [class]=\"'col-md-'+elem.columns+' mt-3'\">\n                        <ng-container *ngTemplateOutlet=\"elem.templateRef; context: { $implicit: elem}\"></ng-container>\n                </div>\n            }\n\n             @case (\"spacer\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                </div>\n            }\n\n        }\n    }\n</ng-template>\n", styles: [".osl-fieldset{border:1.5px solid var(--osl-border-color, #e5e7eb);border-radius:10px;padding:0 16px 16px;margin:0;background:linear-gradient(135deg,#f9fafb,#fff);box-shadow:0 1px 4px #0000000d;position:relative;transition:box-shadow .2s}.osl-fieldset:focus-within{box-shadow:0 0 0 3px #6366f114,0 2px 8px #0000000f;border-color:var(--osl-primary, #6366f1)}.osl-fieldset-legend{padding:0 6px;margin-left:8px;line-height:1;float:none;width:auto}.osl-fieldset-legend__text{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;background:#fff;padding:2px 10px;border:1.5px solid var(--osl-border-color, #e5e7eb);box-shadow:0 1px 3px #6366f11a}.osl-fieldset-body{margin-top:4px}\n"] }]
+            args: [{ selector: 'osl-dynamic-form', standalone: false, template: "@if(elements && elements.length > 0) {\n    <div class=\"row align-items-center w-100\">\n        @for(elem of elements; track elem) {\n            @if(!(elem.hideIf ? elem.hideIf(model) : elem.hide)) {\n                <ng-container *ngTemplateOutlet=\"formField; context: { $implicit: elem }\"></ng-container>\n            }\n        }\n    </div>\n}\n\n<ng-template #formField let-elem>\n    @if(elem.hideIf ? !elem.hideIf(model) : true) {\n        @switch (elem.elementType) {\n\n            @case (\"textbox\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-input\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [type]=\"elem.inputType || 'text'\"\n                        [placeholder]=\"elem.placeholder || ''\"\n                        [mask]=\"elem.mask || ''\"\n                        [min]=\"elem.min ?? ''\"\n                        [max]=\"elem.max ?? ''\"\n                        [minLength]=\"elem.minLength ?? null\"\n                        [maxLength]=\"elem.maxLength ?? null\"\n                        [prefixIcon]=\"elem.prefixIcon || ''\"\n                        [suffixIcon]=\"elem.suffixIcon || ''\"\n                        [onlyChars]=\"!!elem.onlyChars\"\n                        [decimalPortion]=\"elem.decimalPortion ?? null\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                        [isCapitalize]=\"elem.isCapitalize\"\n                    ></osl-input>\n                </div>\n            }\n\n            @case (\"textarea\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-textarea\n                        [label]=\"elem.label\"\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [rows]=\"elem.textareaRows || 3\"\n                        [placeholder]=\"elem.placeholder || ''\"\n                        [maxLength]=\"elem.maxLength ?? null\"\n                        [minLength]=\"elem.minLength ?? null\"\n                        [characterCounter]=\"!!elem.characterCounter\"\n                        [resize]=\"elem.resize || 'none'\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-textarea>\n                </div>\n            }\n\n            @case (\"select\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-select\n                        [label]=\"elem.label\"\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [datasource]=\"elem.datasource || []\"\n                        [displayField]=\"elem.displayField || ''\"\n                        [valueField]=\"elem.valueField || ''\"\n                        [placeholder]=\"elem.selectPlaceholder || 'Select...'\"\n                        [loading]=\"elem.loadingIf ? elem.loadingIf(model) : false\"\n                        [clearable]=\"!!elem.clearable\"\n                        (changeEv)=\"elem.change ? onSelectChange(elem, $event) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-select>\n                </div>\n            }\n\n            @case (\"radio\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-radio\n                        [label]=\"elem.label\"\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [datasource]=\"elem.datasource || []\"\n                        [displayField]=\"elem.displayField || ''\"\n                        [valueField]=\"elem.valueField || ''\"\n                        [inline]=\"!!elem.inline\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-radio>\n                </div>\n            }\n\n            @case (\"slide-toggle\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-slide-toggle\n                        [label]=\"elem.label\"\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [labelPosition]=\"elem.labelPosition || 'after'\"\n                        [trueLabel]=\"elem.trueLabel || ''\"\n                        [falseLabel]=\"elem.falseLabel || ''\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-slide-toggle>\n                </div>\n            }\n\n            @case (\"autocomplete\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-autocomplete\n                        [label]=\"elem.label\"\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [datasource]=\"elem.datasource || []\"\n                        [displayField]=\"elem.displayField || ''\"\n                        [valueField]=\"elem.valueField || ''\"\n                        [placeholder]=\"elem.autocompletePlaceholder || 'Type to search...'\"\n                        [loading]=\"elem.loadingIf ? elem.loadingIf(model) : false\"\n                        (changeEv)=\"onFieldChange(elem, $event)\"\n                        [(model)]=\"model[elem.key]\"\n                        [methodName]=\"elem.apiMethod\"\n                        [service]=\"elem.apiService\"\n                        [object]=\"model[elem.objectName]\"\n                        [searchType]=\"elem.searchType\"\n                        [configMethodName]=\"elem.apiConfigMethod\"\n                        [isLister]=\"elem.isListerAutocomplete\"\n                        [apiBody]=\"elem.apiBody\"\n                    ></osl-autocomplete>\n                </div>\n            }\n\n            @case (\"file-uploader\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-file-upload\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [accept]=\"elem.accept || ''\"\n                        [multiple]=\"!!elem.multiple\"\n                        [maxSize]=\"elem.maxFileSize || 0\"\n                        [fileMode]=\"elem.fileMode || 'raw'\"\n                        [downloadFn]=\"elem.fileDownloadFn ? elem.fileDownloadFn.bind(null, model) : null\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-file-upload>\n                </div>\n            }\n\n            @case (\"datepicker\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-datepicker\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [dateType]=\"elem.dateType || 'date'\"\n                        [placeholder]=\"elem.placeholder || ''\"\n                        [minDate]=\"elem.minDateIf ? elem.minDateIf(model) : elem.minDate || ''\"\n                        [maxDate]=\"elem.maxDateIf ? elem.maxDateIf(model) : elem.maxDate || ''\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-datepicker>\n                </div>\n            }\n\n             @case (\"datetimepicker\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-datetimepicker\n                        [skeletonLoading]=\"skeletonLoading\"\n                        [skeletonTheme]=\"skeletonTheme\"\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [placeholder]=\"elem.placeholder || ''\"\n                        [minDatetime]=\"elem.minDatetimeIf ? elem.minDatetimeIf(model) : elem.minDatetime || ''\"\n                        [maxDatetime]=\"elem.maxDatetimeIf ? elem.maxDatetimeIf(model) : elem.maxDatetime || ''\"\n                        [format]=\"elem.datetimepickerFormat || 'YYYY-MM-DDTHH:mm'\"\n                        [showSeconds]=\"!!elem.datetimepickerShowSeconds\"\n                        [enableMeridian]=\"!!elem.datetimepickerEnableMeridian\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                           (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-datetimepicker>\n                </div>\n            }\n\n            @case (\"checkbox\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-checkbox\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [indeterminate]=\"!!elem.indeterminate\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-checkbox>\n                </div>\n            }\n\n            @case (\"button\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-button\n                        [label]=\"elem.label\"\n                        [loading]=\"elem.loadingIf ? elem.loadingIf(model) : false\"\n                        variant=\"secondary\"\n                        (clickEv)=\"elem.change ? elem.change(model) : null\"\n                    ></osl-button>\n                </div>\n            }\n\n            @case (\"fieldset\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-3'\">\n                    <fieldset class=\"osl-fieldset\">\n                        @if(elem.label) {\n                            <legend class=\"osl-fieldset-legend\" [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\">\n                                <span class=\"osl-fieldset-legend__text\">{{ elem.label }}</span>\n                            </legend>\n                        }\n                        <div class=\"row w-100 osl-fieldset-body\">\n                            @for(innerElem of elem.rows; track innerElem) {\n                                @if(!(innerElem.hideIf ? innerElem.hideIf(model) : innerElem.hide)) {\n                                    <ng-container *ngTemplateOutlet=\"formField; context: { $implicit: innerElem }\"></ng-container>\n                                }\n                            }\n                        </div>\n                    </fieldset>\n                </div>\n            }\n\n            @case (\"templateRef\"){\n                 <div [class]=\"'col-md-'+elem.columns+' mt-3'\">\n                        <ng-container *ngTemplateOutlet=\"elem.templateRef; context: { $implicit: elem}\"></ng-container>\n                </div>\n            }\n\n             @case (\"spacer\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                </div>\n            }\n\n        }\n    }\n</ng-template>\n", styles: [".osl-fieldset{border:1.5px solid var(--osl-border-color, #e5e7eb);border-radius:10px;padding:0 16px 16px;margin:0;background:linear-gradient(135deg,#f9fafb,#fff);box-shadow:0 1px 4px #0000000d;position:relative;transition:box-shadow .2s}.osl-fieldset:focus-within{box-shadow:0 0 0 3px #6366f114,0 2px 8px #0000000f;border-color:var(--osl-primary, #6366f1)}.osl-fieldset-legend{padding:0 6px;margin-left:8px;line-height:1;float:none;width:auto}.osl-fieldset-legend__text{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;background:#fff;padding:2px 10px;border:1.5px solid var(--osl-border-color, #e5e7eb);box-shadow:0 1px 3px #6366f11a}.osl-fieldset-body{margin-top:4px}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { elements: [{
                 type: Input,
                 args: ['elements']
@@ -4015,7 +4090,7 @@ class OslFormGrid {
         elem.change(row, i, selectedObj);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslFormGrid, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: OslFormGrid, isStandalone: false, selector: "osl-form-grid", inputs: { columns: "columns", datasource: "datasource", isPaginated: "isPaginated", pageSize: "pageSize", canAdd: "canAdd", canDelete: "canDelete", loading: "loading", tableHeight: "tableHeight", footerColumns: "footerColumns" }, outputs: { datasourceChange: "datasourceChange", rowAdd: "rowAdd", rowDelete: "rowDelete" }, ngImport: i0, template: "<div class=\"osl-fg-wrapper\">\r\n\r\n  <div class=\"osl-fg-table-container\" [style.height]=\"tableHeight\">\r\n    <table class=\"osl-fg-table\">\r\n\r\n      <thead class=\"osl-fg-thead\">\r\n        <tr>\r\n          <!-- Actions column: + add button in header -->\r\n          @if (hasActions) {\r\n            <th class=\"osl-fg-th osl-fg-th--actions\">\r\n              @if (canAdd) {\r\n                <button class=\"osl-grid-icon-btn\" (click)=\"addRow()\" [disabled]=\"loading\" title=\"Add row\">\r\n                  <mat-icon>add</mat-icon>\r\n                </button>\r\n              }\r\n            </th>\r\n          }\r\n          @for (col of columns; track col.key) {\r\n            <th class=\"osl-fg-th\" [style.width]=\"col.width\">\r\n              {{ col.displayName }}\r\n              @if (colRequired(col)) {\r\n                <span class=\"osl-fg-th-required\">*</span>\r\n              }\r\n            </th>\r\n          }\r\n        </tr>\r\n      </thead>\r\n\r\n      <tbody>\r\n\r\n        @if (loading) {\r\n          @for (sk of skeletonRows; track $index) {\r\n            <tr class=\"osl-fg-row osl-fg-row--skeleton\">\r\n              @if (hasActions) {\r\n                <td class=\"osl-fg-td osl-fg-td--actions\">\r\n                  <div class=\"osl-fg-skeleton osl-fg-skeleton--sm\"></div>\r\n                </td>\r\n              }\r\n              @for (col of columns; track col.key) {\r\n                <td class=\"osl-fg-td\"><div class=\"osl-fg-skeleton\"></div></td>\r\n              }\r\n            </tr>\r\n          }\r\n\r\n        } @else if (pagedData.length === 0) {\r\n          <tr>\r\n            <td [attr.colspan]=\"columns.length + (hasActions ? 1 : 0)\" class=\"osl-fg-empty\">\r\n              <div class=\"osl-fg-empty-inner\">\r\n                <svg width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\r\n                  <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"/>\r\n                  <line x1=\"3\" y1=\"9\" x2=\"21\" y2=\"9\"/>\r\n                  <line x1=\"9\" y1=\"9\" x2=\"9\" y2=\"21\"/>\r\n                </svg>\r\n                <p>No rows yet.{{ canAdd ? ' Use + to get started.' : '' }}</p>\r\n              </div>\r\n            </td>\r\n          </tr>\r\n\r\n        } @else {\r\n          @for (row of pagedData; track $index; let i = $index) {\r\n            <tr class=\"osl-fg-row\">\r\n\r\n              <!-- Delete button first -->\r\n              @if (hasActions) {\r\n                <td class=\"osl-fg-td osl-fg-td--actions\">\r\n                  @if (canDelete) {\r\n                    <button class=\"osl-grid-icon-btn osl-grid-icon-btn--danger\" (click)=\"deleteRow(i)\" title=\"Delete\">\r\n                      <mat-icon>delete_outline</mat-icon>\r\n                    </button>\r\n                  }\r\n                </td>\r\n              }\r\n\r\n              @for (col of columns; track col.key) {\r\n                <td class=\"osl-fg-td\" [style.width]=\"col.width\">\r\n                  @if (col.formElem) {\r\n                    <div class=\"osl-fg-cell-form\" [style.width]=\"col.width\">\r\n                      @switch (col.formElem.elementType) {\r\n\r\n                        @case ('textbox') {\r\n                          <osl-input\r\n                            [label]=\"''\"\r\n                            [required]=\"false\"\r\n                            [disabled]=\"isDisabled(col.formElem,row,i)\"\r\n                            [type]=\"col.formElem.inputType || 'text'\"\r\n                            [placeholder]=\"col.formElem.placeholder || col.displayName\"\r\n                            [mask]=\"col.formElem.mask || ''\"\r\n                            [min]=\"col.formElem.min ?? ''\"\r\n                            [max]=\"col.formElem.max ?? ''\"\r\n                            [minLength]=\"col.formElem.minLength ?? null\"\r\n                            [maxLength]=\"col.formElem.maxLength ?? null\"\r\n                            [prefixIcon]=\"col.formElem.prefixIcon || ''\"\r\n                            [suffixIcon]=\"col.formElem.suffixIcon || ''\"\r\n                            [decimalPortion]=\"col.formElem.decimalPortion ?? null\"\r\n                            [model]=\"row[col.key]\"\r\n                            (modelChange)=\"onCellChange(row, col, $event)\"\r\n                            (changeEv)=\"col.formElem.change ? col.formElem.change(row,i) : null\">\r\n                          </osl-input>\r\n                        }\r\n\r\n                        @case ('textarea') {\r\n                          <osl-textarea\r\n                            [label]=\"''\"\r\n                            [required]=\"false\"\r\n                            [disabled]=\"isDisabled(col.formElem,row,i)\"\r\n                            [rows]=\"col.formElem.textareaRows || 3\"\r\n                            [placeholder]=\"col.formElem.placeholder || col.displayName\"\r\n                            [maxLength]=\"col.formElem.maxLength ?? null\"\r\n                            [minLength]=\"col.formElem.minLength ?? null\"\r\n                            [characterCounter]=\"!!col.formElem.characterCounter\"\r\n                            [resize]=\"col.formElem.resize || 'none'\"\r\n                            [model]=\"row[col.key]\"\r\n                            (modelChange)=\"onCellChange(row, col, $event)\"\r\n                            (changeEv)=\"col.formElem.change ? col.formElem.change(row,i) : null\">\r\n                          </osl-textarea>\r\n                        }\r\n\r\n                        @case ('select') {\r\n                          <osl-select\r\n                            [label]=\"''\"\r\n                            [required]=\"false\"\r\n                            [disabled]=\"isDisabled(col.formElem,row,i)\"\r\n                            [datasource]=\"col.formElem.datasource || []\"\r\n                            [displayField]=\"col.formElem.displayField || ''\"\r\n                            [valueField]=\"col.formElem.valueField || ''\"\r\n                            [placeholder]=\"col.formElem.selectPlaceholder || col.displayName\"\r\n                            [loading]=\"isLoading(row, col.formElem)\"\r\n                            [clearable]=\"!!col.formElem.clearable\"\r\n                            [model]=\"row[col.key]\"\r\n                            (modelChange)=\"onCellChange(row, col, $event)\"\r\n                            (changeEv)=\"col.formElem.change ? onSelectChange(col, row, i, $event) : null\">\r\n                          </osl-select>\r\n                        }\r\n\r\n                        @case ('autocomplete') {\r\n                          <osl-autocomplete\r\n                            [label]=\"''\"\r\n                            [required]=\"false\"\r\n                             [disabled]=\"isDisabled(col.formElem,row,i)\"\r\n                            [datasource]=\"col.formElem.datasource || []\"\r\n                            [displayField]=\"col.formElem.displayField || ''\"\r\n                            [valueField]=\"col.formElem.valueField || ''\"\r\n                            [placeholder]=\"col.formElem.autocompletePlaceholder || col.displayName\"\r\n                            [loading]=\"isLoading(row, col.formElem)\"\r\n                            [searchType]=\"col.formElem.searchType ? col.formElem.searchType : 'Local'\"\r\n                            [methodName]=\"col.formElem.apiMethod || ''\"\r\n                            [configMethodName]=\"col.formElem.apiConfigMethod || ''\"\r\n                            [service]=\"col.formElem.apiService\"\r\n                            [object]=\"col.formElem.objectName ? row[col.formElem.objectName] : null\"\r\n                            [isLister]=\"!!col.formElem.isListerAutocomplete\"\r\n                            [model]=\"row[col.key]\"\r\n                            (modelChange)=\"onCellChange(row, col, $event)\"\r\n                            (changeEv)=\"col.formElem.change ? onSelectChange(col, row, i, $event) : null\">\r\n                          </osl-autocomplete>\r\n                        }\r\n\r\n                        @case ('radio') {\r\n                          <osl-radio\r\n                            [label]=\"''\"\r\n                            [required]=\"false\"\r\n                           [disabled]=\"isDisabled(col.formElem,row,i)\"\r\n                            [datasource]=\"col.formElem.datasource || []\"\r\n                            [displayField]=\"col.formElem.displayField || ''\"\r\n                            [valueField]=\"col.formElem.valueField || ''\"\r\n                            [inline]=\"!!col.formElem.inline\"\r\n                            [model]=\"row[col.key]\"\r\n                            (modelChange)=\"onCellChange(row, col, $event)\"\r\n                            (changeEv)=\"col.formElem.change ? col.formElem.change(row,i) : null\">\r\n                          </osl-radio>\r\n                        }\r\n\r\n                        @case ('checkbox') {\r\n                          <osl-checkbox\r\n                            [label]=\"''\"\r\n                            [required]=\"false\"\r\n                             [disabled]=\"isDisabled(col.formElem,row,i)\"\r\n                            [indeterminate]=\"!!col.formElem.indeterminate\"\r\n                            [model]=\"row[col.key]\"\r\n                            (modelChange)=\"onCellChange(row, col, $event)\"\r\n                            (changeEv)=\"col.formElem.change ? col.formElem.change(row,i) : null\">\r\n                          </osl-checkbox>\r\n                        }\r\n\r\n                        @case ('slide-toggle') {\r\n                          <osl-slide-toggle\r\n                            [label]=\"''\"\r\n                          [disabled]=\"isDisabled(col.formElem,row,i)\"\r\n                            [labelPosition]=\"col.formElem.labelPosition || 'after'\"\r\n                            [trueLabel]=\"col.formElem.trueLabel || ''\"\r\n                            [falseLabel]=\"col.formElem.falseLabel || ''\"\r\n                            [model]=\"row[col.key]\"\r\n                            (modelChange)=\"onCellChange(row, col, $event)\"\r\n                            (changeEv)=\"col.formElem.change ? col.formElem.change(row,i) : null\">\r\n                          </osl-slide-toggle>\r\n                        }\r\n\r\n                        @case ('datepicker') {\r\n                          <osl-datepicker\r\n                            [label]=\"''\"\r\n                            [required]=\"false\"\r\n                             [disabled]=\"isDisabled(col.formElem,row,i)\"\r\n                            [dateType]=\"col.formElem.dateType || 'date'\"\r\n                            [placeholder]=\"col.formElem.placeholder || col.displayName\"\r\n                            [minDate]=\"col.formElem.minDate || ''\"\r\n                            [maxDate]=\"col.formElem.maxDate || ''\"\r\n                            [model]=\"row[col.key]\"\r\n                            (modelChange)=\"onCellChange(row, col, $event)\"\r\n                            (changeEv)=\"col.formElem.change ? col.formElem.change(row,i) : null\">\r\n                          </osl-datepicker>\r\n                        }\r\n\r\n                        @case ('datetimepicker') {\r\n                          <osl-datetimepicker\r\n                            [label]=\"''\"\r\n                            [required]=\"false\"\r\n                            [disabled]=\"isDisabled(col.formElem,row,i)\"\r\n                            [placeholder]=\"col.formElem.placeholder || col.displayName\"\r\n                            [minDatetime]=\"col.formElem.minDatetime || ''\"\r\n                            [maxDatetime]=\"col.formElem.maxDatetime || ''\"\r\n                            [format]=\"col.formElem.datetimepickerFormat || 'YYYY-MM-DDTHH:mm'\"\r\n                            [showSeconds]=\"!!col.formElem.datetimepickerShowSeconds\"\r\n                            [enableMeridian]=\"!!col.formElem.datetimepickerEnableMeridian\"\r\n                            [model]=\"row[col.key]\"\r\n                            (modelChange)=\"onCellChange(row, col, $event)\"\r\n                            (changeEv)=\"col.formElem.change ? col.formElem.change(row,i) : null\">\r\n                          </osl-datetimepicker>\r\n                        }\r\n\r\n                        @case ('file-uploader') {\r\n                          <osl-file-upload\r\n                            [label]=\"''\"\r\n                            [required]=\"false\"\r\n                             [disabled]=\"isDisabled(col.formElem,row,i)\"\r\n                            [accept]=\"col.formElem.accept || ''\"\r\n                            [multiple]=\"!!col.formElem.multiple\"\r\n                            [maxSize]=\"col.formElem.maxFileSize || 0\"\r\n                            [model]=\"row[col.key]\"\r\n                            (modelChange)=\"onCellChange(row, col, $event)\"\r\n                            (changeEv)=\"col.formElem.change ? col.formElem.change(row,i) : null\">\r\n                          </osl-file-upload>\r\n                        }\r\n\r\n                      }\r\n                    </div>\r\n                  } @else {\r\n                    <span class=\"osl-fg-cell-text\">{{ row[col.key] ?? '--' }}</span>\r\n                  }\r\n                </td>\r\n              }\r\n\r\n            </tr>\r\n          }\r\n        }\r\n\r\n      </tbody>\r\n\r\n      @if (footerColumns && footerColumns.length > 0 && datasource && datasource.length > 0) {\r\n        <tfoot class=\"osl-fg-tfoot\">\r\n          <tr class=\"osl-fg-footer-row\">\r\n            @for (fcol of footerColumns; track $index) {\r\n              <td\r\n                [class]=\"'osl-fg-footer-td ' + (fcol.class || '')\"\r\n                [attr.colspan]=\"fcol.colspan || 1\">\r\n                {{ fcol.displayFn ? fcol.displayFn(datasource) : (fcol.display || '') }}\r\n              </td>\r\n            }\r\n          </tr>\r\n        </tfoot>\r\n      }\r\n\r\n    </table>\r\n  </div>\r\n\r\n  @if (isPaginated) {\r\n    <div class=\"osl-fg-pagination\">\r\n\r\n      <span class=\"osl-fg-pagination__info\">\r\n        @if (loading) {\r\n          Loading...\r\n        } @else if (_total > 0) {\r\n          {{ startRecord }}\u2013{{ endRecord }} of {{ _total }} rows\r\n        } @else {\r\n          No rows\r\n        }\r\n      </span>\r\n\r\n      <div class=\"osl-fg-pagination__controls\">\r\n        <button class=\"osl-fg-page-btn osl-fg-page-btn--nav\" (click)=\"goToPage(1)\" [disabled]=\"currentPage === 1 || loading\">\u00AB</button>\r\n        <button class=\"osl-fg-page-btn osl-fg-page-btn--nav\" (click)=\"goToPage(currentPage - 1)\" [disabled]=\"currentPage === 1 || loading\">\u2039 Prev</button>\r\n\r\n        @for (page of pageNumbers; track $index) {\r\n          @if (page === -1) {\r\n            <span class=\"osl-fg-page-ellipsis\">\u2026</span>\r\n          } @else {\r\n            <button\r\n              class=\"osl-fg-page-btn osl-fg-page-btn--num\"\r\n              [class.osl-fg-page-btn--active]=\"page === currentPage\"\r\n              [disabled]=\"loading\"\r\n              (click)=\"goToPage(page)\">\r\n              {{ page }}\r\n            </button>\r\n          }\r\n        }\r\n\r\n        <button class=\"osl-fg-page-btn osl-fg-page-btn--nav\" (click)=\"goToPage(currentPage + 1)\" [disabled]=\"currentPage === totalPages || loading\">Next \u203A</button>\r\n        <button class=\"osl-fg-page-btn osl-fg-page-btn--nav\" (click)=\"goToPage(totalPages)\" [disabled]=\"currentPage === totalPages || loading\">\u00BB</button>\r\n      </div>\r\n\r\n      <div class=\"osl-fg-pagination__size\">\r\n        <select class=\"osl-fg-page-size\" [ngModel]=\"pageSize\" (ngModelChange)=\"onPageSizeChange($event)\" [disabled]=\"loading\">\r\n          @for (opt of pageSizeOptions; track opt) {\r\n            <option [value]=\"opt\">{{ opt }} per page</option>\r\n          }\r\n        </select>\r\n      </div>\r\n\r\n    </div>\r\n  }\r\n\r\n</div>\r\n", styles: [".osl-fg-wrapper{display:flex;flex-direction:column;width:100%;font-size:var(--osl-text-font-size);font-family:inherit;border:1px solid var(--osl-border-color, #e5e7eb);border-radius:var(--osl-border-radius, 8px);overflow:hidden;background:#fff}.osl-fg-table-container{overflow-x:auto;overflow-y:auto;min-height:120px}.osl-fg-table{width:100%;border-collapse:collapse;table-layout:auto}.osl-fg-thead{position:sticky;top:0;z-index:2}.osl-fg-th{background:#f3f4f6;color:#4b5563;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.04em;padding:10px 12px;text-align:left;border-bottom:2px solid var(--osl-border-color, #e5e7eb);border-right:1px solid var(--osl-border-color, #e5e7eb);white-space:nowrap;vertical-align:middle}.osl-fg-th:last-child{border-right:none}.osl-fg-th--actions{width:44px;min-width:44px;text-align:center;padding:6px}.osl-fg-th-required{color:#ef4444;margin-left:2px;font-size:14px;line-height:1;vertical-align:middle}.osl-fg-row{border-bottom:1px solid #f0f0f0;transition:background .1s}.osl-fg-row:nth-child(odd){background:#f8fafc}.osl-fg-row:nth-child(2n){background:#fff}.osl-fg-row:hover{background:#eef2ff!important}.osl-fg-row:last-child{border-bottom:none}.osl-fg-row--skeleton{pointer-events:none}.osl-fg-td{padding:4px 10px;vertical-align:middle;border-right:1px solid #f0f0f0}.osl-fg-td:last-child{border-right:none}.osl-fg-td--actions{width:44px;min-width:44px;text-align:center;padding:4px 6px}.osl-fg-cell-form{min-width:100px}.osl-fg-cell-form ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none!important}.osl-fg-cell-form ::ng-deep .mat-mdc-form-field,.osl-fg-cell-form ::ng-deep mat-form-field{width:100%}.osl-fg-cell-form ::ng-deep .mat-mdc-text-field-wrapper{padding-top:0}.osl-fg-cell-text{color:#111827;font-size:var(--osl-text-font-size)}.osl-fg-add-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:none;border-radius:6px;background:var(--osl-primary, #6366f1);color:#fff;cursor:pointer;padding:0;box-shadow:0 1px 4px #6366f159;transition:background .15s,box-shadow .15s,transform .1s}.osl-fg-add-btn mat-icon{font-size:18px;width:18px;height:18px;line-height:18px}.osl-fg-add-btn:hover:not(:disabled){background:var(--osl-primary-hover, #4f46e5);box-shadow:0 2px 8px #6366f173;transform:scale(1.05)}.osl-fg-add-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}.osl-fg-delete-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:1.5px solid transparent;border-radius:6px;background:transparent;color:#d1d5db;cursor:pointer;padding:0;transition:border-color .15s,color .15s,background .15s}.osl-fg-delete-btn mat-icon{font-size:16px;width:16px;height:16px;line-height:16px}.osl-fg-delete-btn:hover{border-color:#fca5a5;color:#ef4444;background:#fef2f2}.osl-fg-empty{padding:40px 16px;text-align:center}.osl-fg-empty-inner{display:flex;flex-direction:column;align-items:center;gap:10px;color:#9ca3af}.osl-fg-empty-inner svg{opacity:.4}.osl-fg-empty-inner p{margin:0;font-size:13px}@keyframes osl-fg-pulse{0%,to{opacity:1}50%{opacity:.4}}.osl-fg-skeleton{height:36px;border-radius:6px;background:#e5e7eb;animation:osl-fg-pulse 1.4s ease-in-out infinite}.osl-fg-skeleton--sm{height:28px;width:28px;border-radius:4px;margin:0 auto}.osl-fg-tfoot{position:sticky;bottom:0;z-index:2}.osl-fg-footer-td{background:#f3f4f6;color:#4b5563;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.04em;padding:10px 12px;text-align:left;border-top:2px solid var(--osl-border-color, #e5e7eb);border-right:1px solid var(--osl-border-color, #e5e7eb);white-space:nowrap;vertical-align:middle}.osl-fg-footer-td:last-child{border-right:none}.osl-fg-pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;border-top:1px solid var(--osl-border-color, #e5e7eb);background:#f9fafb;flex-shrink:0;flex-wrap:wrap}.osl-fg-pagination__info{font-size:12px;color:#6b7280;white-space:nowrap;min-width:120px}.osl-fg-pagination__controls{display:flex;align-items:center;gap:3px;flex-wrap:nowrap}.osl-fg-pagination__size{display:flex;align-items:center;justify-content:flex-end;min-width:120px}.osl-fg-page-btn{display:inline-flex;align-items:center;justify-content:center;height:30px;padding:0 10px;border:1px solid var(--osl-border-color, #e5e7eb);border-radius:var(--osl-border-radius, 6px);background:#fff;color:#374151;font-size:13px;font-family:inherit;cursor:pointer;transition:background .12s,border-color .12s,color .12s;white-space:nowrap}.osl-fg-page-btn:hover:not(:disabled){background:#f3f4f6;border-color:#9ca3af}.osl-fg-page-btn:disabled{opacity:.35;cursor:not-allowed}.osl-fg-page-btn--nav{font-size:12px;color:#6b7280}.osl-fg-page-btn--num{min-width:30px;padding:0;font-size:13px}.osl-fg-page-btn--active{background:var(--osl-primary, #6366f1);border-color:var(--osl-primary, #6366f1);color:#fff;font-weight:600}.osl-fg-page-btn--active:hover:not(:disabled){background:var(--osl-primary-hover, #4f46e5);border-color:var(--osl-primary-hover, #4f46e5)}.osl-fg-page-ellipsis{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;color:#9ca3af;font-size:13px;pointer-events:none}.osl-fg-page-size{height:30px;padding:0 8px;border:1px solid var(--osl-border-color, #e5e7eb);border-radius:var(--osl-border-radius, 6px);background:#fff;color:#374151;font-size:12px;font-family:inherit;cursor:pointer;outline:none}.osl-fg-page-size:focus{border-color:var(--osl-primary, #6366f1)}.osl-fg-page-size:disabled{opacity:.4;cursor:not-allowed}.osl-grid-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:1.5px solid var(--osl-border-color);border-radius:var(--osl-border-radius);background:transparent;color:#6b7280;cursor:pointer;padding:0;transition:border-color .15s,color .15s,background .15s;margin:0 2px}.osl-grid-icon-btn mat-icon{font-size:16px;width:16px;height:16px;line-height:16px}.osl-grid-icon-btn:hover{border-color:var(--osl-primary);color:var(--osl-primary);background:#6366f10f}.osl-grid-icon-btn--danger:hover{border-color:#ef4444;color:#ef4444;background:#ef44440f}\n"], dependencies: [{ kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: Oslinput, selector: "osl-input", inputs: ["label", "required", "disabled", "model", "type", "placeholder", "mask", "min", "max", "minLength", "maxLength", "prefixIcon", "suffixIcon", "skeletonLoading", "skeletonTheme", "onlyChars", "isCapitalize", "decimalPortion"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: Osltextarea, selector: "osl-textarea", inputs: ["label", "rows", "required", "disabled", "model", "placeholder", "maxLength", "minLength", "characterCounter", "resize", "skeletonLoading", "skeletonTheme"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslSelect, selector: "osl-select", inputs: ["label", "required", "disabled", "model", "datasource", "displayField", "valueField", "placeholder", "loading", "clearable", "skeletonLoading", "skeletonTheme"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslRadio, selector: "osl-radio", inputs: ["label", "required", "disabled", "model", "datasource", "displayField", "valueField", "inline", "skeletonLoading", "skeletonTheme"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslSlideToggle, selector: "osl-slide-toggle", inputs: ["label", "disabled", "model", "labelPosition", "trueLabel", "falseLabel", "skeletonLoading", "skeletonTheme"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslAutocomplete, selector: "osl-autocomplete", inputs: ["label", "required", "disabled", "model", "datasource", "displayField", "valueField", "placeholder", "loading", "searchType", "methodName", "configMethodName", "service", "object", "skeletonLoading", "skeletonTheme", "isLister", "apiBody"], outputs: ["datasourceChange", "modelChange", "changeEv"] }, { kind: "component", type: OslFileUpload, selector: "osl-file-upload", inputs: ["label", "required", "disabled", "model", "accept", "multiple", "maxSize", "skeletonLoading", "skeletonTheme"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslDatepicker, selector: "osl-datepicker", inputs: ["label", "required", "disabled", "model", "dateType", "placeholder", "minDate", "maxDate", "skeletonLoading", "skeletonTheme"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslDatetimepicker, selector: "osl-datetimepicker", inputs: ["label", "required", "disabled", "model", "placeholder", "minDatetime", "maxDatetime", "format", "displayFormat", "showSeconds", "enableMeridian", "skeletonLoading", "skeletonTheme"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslCheckbox, selector: "osl-checkbox", inputs: ["label", "disabled", "required", "model", "indeterminate", "skeletonLoading", "skeletonTheme"], outputs: ["modelChange", "changeEv"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: OslFormGrid, isStandalone: false, selector: "osl-form-grid", inputs: { columns: "columns", datasource: "datasource", isPaginated: "isPaginated", pageSize: "pageSize", canAdd: "canAdd", canDelete: "canDelete", loading: "loading", tableHeight: "tableHeight", footerColumns: "footerColumns" }, outputs: { datasourceChange: "datasourceChange", rowAdd: "rowAdd", rowDelete: "rowDelete" }, ngImport: i0, template: "<div class=\"osl-fg-wrapper\">\r\n\r\n  <div class=\"osl-fg-table-container\" [style.height]=\"tableHeight\">\r\n    <table class=\"osl-fg-table\">\r\n\r\n      <thead class=\"osl-fg-thead\">\r\n        <tr>\r\n          <!-- Actions column: + add button in header -->\r\n          @if (hasActions) {\r\n            <th class=\"osl-fg-th osl-fg-th--actions\">\r\n              @if (canAdd) {\r\n                <button class=\"osl-grid-icon-btn\" (click)=\"addRow()\" [disabled]=\"loading\" title=\"Add row\">\r\n                  <mat-icon>add</mat-icon>\r\n                </button>\r\n              }\r\n            </th>\r\n          }\r\n          @for (col of columns; track col.key) {\r\n            <th class=\"osl-fg-th\" [style.width]=\"col.width\">\r\n              {{ col.displayName }}\r\n              @if (colRequired(col)) {\r\n                <span class=\"osl-fg-th-required\">*</span>\r\n              }\r\n            </th>\r\n          }\r\n        </tr>\r\n      </thead>\r\n\r\n      <tbody>\r\n\r\n        @if (loading) {\r\n          @for (sk of skeletonRows; track $index) {\r\n            <tr class=\"osl-fg-row osl-fg-row--skeleton\">\r\n              @if (hasActions) {\r\n                <td class=\"osl-fg-td osl-fg-td--actions\">\r\n                  <div class=\"osl-fg-skeleton osl-fg-skeleton--sm\"></div>\r\n                </td>\r\n              }\r\n              @for (col of columns; track col.key) {\r\n                <td class=\"osl-fg-td\"><div class=\"osl-fg-skeleton\"></div></td>\r\n              }\r\n            </tr>\r\n          }\r\n\r\n        } @else if (pagedData.length === 0) {\r\n          <tr>\r\n            <td [attr.colspan]=\"columns.length + (hasActions ? 1 : 0)\" class=\"osl-fg-empty\">\r\n              <div class=\"osl-fg-empty-inner\">\r\n                <svg width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\r\n                  <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"/>\r\n                  <line x1=\"3\" y1=\"9\" x2=\"21\" y2=\"9\"/>\r\n                  <line x1=\"9\" y1=\"9\" x2=\"9\" y2=\"21\"/>\r\n                </svg>\r\n                <p>No rows yet.{{ canAdd ? ' Use + to get started.' : '' }}</p>\r\n              </div>\r\n            </td>\r\n          </tr>\r\n\r\n        } @else {\r\n          @for (row of pagedData; track $index; let i = $index) {\r\n            <tr class=\"osl-fg-row\">\r\n\r\n              <!-- Delete button first -->\r\n              @if (hasActions) {\r\n                <td class=\"osl-fg-td osl-fg-td--actions\">\r\n                  @if (canDelete) {\r\n                    <button class=\"osl-grid-icon-btn osl-grid-icon-btn--danger\" (click)=\"deleteRow(i)\" title=\"Delete\">\r\n                      <mat-icon>delete_outline</mat-icon>\r\n                    </button>\r\n                  }\r\n                </td>\r\n              }\r\n\r\n              @for (col of columns; track col.key) {\r\n                <td class=\"osl-fg-td\" [style.width]=\"col.width\">\r\n                  @if (col.formElem) {\r\n                    <div class=\"osl-fg-cell-form\" [style.width]=\"col.width\">\r\n                      @switch (col.formElem.elementType) {\r\n\r\n                        @case ('textbox') {\r\n                          <osl-input\r\n                            [label]=\"''\"\r\n                            [required]=\"false\"\r\n                            [disabled]=\"isDisabled(col.formElem,row,i)\"\r\n                            [type]=\"col.formElem.inputType || 'text'\"\r\n                            [placeholder]=\"col.formElem.placeholder || col.displayName\"\r\n                            [mask]=\"col.formElem.mask || ''\"\r\n                            [min]=\"col.formElem.min ?? ''\"\r\n                            [max]=\"col.formElem.max ?? ''\"\r\n                            [minLength]=\"col.formElem.minLength ?? null\"\r\n                            [maxLength]=\"col.formElem.maxLength ?? null\"\r\n                            [prefixIcon]=\"col.formElem.prefixIcon || ''\"\r\n                            [suffixIcon]=\"col.formElem.suffixIcon || ''\"\r\n                            [decimalPortion]=\"col.formElem.decimalPortion ?? null\"\r\n                            [model]=\"row[col.key]\"\r\n                            (modelChange)=\"onCellChange(row, col, $event)\"\r\n                            (changeEv)=\"col.formElem.change ? col.formElem.change(row,i) : null\">\r\n                          </osl-input>\r\n                        }\r\n\r\n                        @case ('textarea') {\r\n                          <osl-textarea\r\n                            [label]=\"''\"\r\n                            [required]=\"false\"\r\n                            [disabled]=\"isDisabled(col.formElem,row,i)\"\r\n                            [rows]=\"col.formElem.textareaRows || 3\"\r\n                            [placeholder]=\"col.formElem.placeholder || col.displayName\"\r\n                            [maxLength]=\"col.formElem.maxLength ?? null\"\r\n                            [minLength]=\"col.formElem.minLength ?? null\"\r\n                            [characterCounter]=\"!!col.formElem.characterCounter\"\r\n                            [resize]=\"col.formElem.resize || 'none'\"\r\n                            [model]=\"row[col.key]\"\r\n                            (modelChange)=\"onCellChange(row, col, $event)\"\r\n                            (changeEv)=\"col.formElem.change ? col.formElem.change(row,i) : null\">\r\n                          </osl-textarea>\r\n                        }\r\n\r\n                        @case ('select') {\r\n                          <osl-select\r\n                            [label]=\"''\"\r\n                            [required]=\"false\"\r\n                            [disabled]=\"isDisabled(col.formElem,row,i)\"\r\n                            [datasource]=\"col.formElem.datasource || []\"\r\n                            [displayField]=\"col.formElem.displayField || ''\"\r\n                            [valueField]=\"col.formElem.valueField || ''\"\r\n                            [placeholder]=\"col.formElem.selectPlaceholder || col.displayName\"\r\n                            [loading]=\"isLoading(row, col.formElem)\"\r\n                            [clearable]=\"!!col.formElem.clearable\"\r\n                            [model]=\"row[col.key]\"\r\n                            (modelChange)=\"onCellChange(row, col, $event)\"\r\n                            (changeEv)=\"col.formElem.change ? onSelectChange(col, row, i, $event) : null\">\r\n                          </osl-select>\r\n                        }\r\n\r\n                        @case ('autocomplete') {\r\n                          <osl-autocomplete\r\n                            [label]=\"''\"\r\n                            [required]=\"false\"\r\n                             [disabled]=\"isDisabled(col.formElem,row,i)\"\r\n                            [datasource]=\"col.formElem.datasource || []\"\r\n                            [displayField]=\"col.formElem.displayField || ''\"\r\n                            [valueField]=\"col.formElem.valueField || ''\"\r\n                            [placeholder]=\"col.formElem.autocompletePlaceholder || col.displayName\"\r\n                            [loading]=\"isLoading(row, col.formElem)\"\r\n                            [searchType]=\"col.formElem.searchType ? col.formElem.searchType : 'Local'\"\r\n                            [methodName]=\"col.formElem.apiMethod || ''\"\r\n                            [configMethodName]=\"col.formElem.apiConfigMethod || ''\"\r\n                            [service]=\"col.formElem.apiService\"\r\n                            [object]=\"col.formElem.objectName ? row[col.formElem.objectName] : null\"\r\n                            [isLister]=\"!!col.formElem.isListerAutocomplete\"\r\n                            [model]=\"row[col.key]\"\r\n                            (modelChange)=\"onCellChange(row, col, $event)\"\r\n                            (changeEv)=\"col.formElem.change ? onSelectChange(col, row, i, $event) : null\">\r\n                          </osl-autocomplete>\r\n                        }\r\n\r\n                        @case ('radio') {\r\n                          <osl-radio\r\n                            [label]=\"''\"\r\n                            [required]=\"false\"\r\n                           [disabled]=\"isDisabled(col.formElem,row,i)\"\r\n                            [datasource]=\"col.formElem.datasource || []\"\r\n                            [displayField]=\"col.formElem.displayField || ''\"\r\n                            [valueField]=\"col.formElem.valueField || ''\"\r\n                            [inline]=\"!!col.formElem.inline\"\r\n                            [model]=\"row[col.key]\"\r\n                            (modelChange)=\"onCellChange(row, col, $event)\"\r\n                            (changeEv)=\"col.formElem.change ? col.formElem.change(row,i) : null\">\r\n                          </osl-radio>\r\n                        }\r\n\r\n                        @case ('checkbox') {\r\n                          <osl-checkbox\r\n                            [label]=\"''\"\r\n                            [required]=\"false\"\r\n                             [disabled]=\"isDisabled(col.formElem,row,i)\"\r\n                            [indeterminate]=\"!!col.formElem.indeterminate\"\r\n                            [model]=\"row[col.key]\"\r\n                            (modelChange)=\"onCellChange(row, col, $event)\"\r\n                            (changeEv)=\"col.formElem.change ? col.formElem.change(row,i) : null\">\r\n                          </osl-checkbox>\r\n                        }\r\n\r\n                        @case ('slide-toggle') {\r\n                          <osl-slide-toggle\r\n                            [label]=\"''\"\r\n                          [disabled]=\"isDisabled(col.formElem,row,i)\"\r\n                            [labelPosition]=\"col.formElem.labelPosition || 'after'\"\r\n                            [trueLabel]=\"col.formElem.trueLabel || ''\"\r\n                            [falseLabel]=\"col.formElem.falseLabel || ''\"\r\n                            [model]=\"row[col.key]\"\r\n                            (modelChange)=\"onCellChange(row, col, $event)\"\r\n                            (changeEv)=\"col.formElem.change ? col.formElem.change(row,i) : null\">\r\n                          </osl-slide-toggle>\r\n                        }\r\n\r\n                        @case ('datepicker') {\r\n                          <osl-datepicker\r\n                            [label]=\"''\"\r\n                            [required]=\"false\"\r\n                             [disabled]=\"isDisabled(col.formElem,row,i)\"\r\n                            [dateType]=\"col.formElem.dateType || 'date'\"\r\n                            [placeholder]=\"col.formElem.placeholder || col.displayName\"\r\n                            [minDate]=\"col.formElem.minDate || ''\"\r\n                            [maxDate]=\"col.formElem.maxDate || ''\"\r\n                            [model]=\"row[col.key]\"\r\n                            (modelChange)=\"onCellChange(row, col, $event)\"\r\n                            (changeEv)=\"col.formElem.change ? col.formElem.change(row,i) : null\">\r\n                          </osl-datepicker>\r\n                        }\r\n\r\n                        @case ('datetimepicker') {\r\n                          <osl-datetimepicker\r\n                            [label]=\"''\"\r\n                            [required]=\"false\"\r\n                            [disabled]=\"isDisabled(col.formElem,row,i)\"\r\n                            [placeholder]=\"col.formElem.placeholder || col.displayName\"\r\n                            [minDatetime]=\"col.formElem.minDatetime || ''\"\r\n                            [maxDatetime]=\"col.formElem.maxDatetime || ''\"\r\n                            [format]=\"col.formElem.datetimepickerFormat || 'YYYY-MM-DDTHH:mm'\"\r\n                            [showSeconds]=\"!!col.formElem.datetimepickerShowSeconds\"\r\n                            [enableMeridian]=\"!!col.formElem.datetimepickerEnableMeridian\"\r\n                            [model]=\"row[col.key]\"\r\n                            (modelChange)=\"onCellChange(row, col, $event)\"\r\n                            (changeEv)=\"col.formElem.change ? col.formElem.change(row,i) : null\">\r\n                          </osl-datetimepicker>\r\n                        }\r\n\r\n                        @case ('file-uploader') {\r\n                          <osl-file-upload\r\n                            [label]=\"''\"\r\n                            [required]=\"false\"\r\n                             [disabled]=\"isDisabled(col.formElem,row,i)\"\r\n                            [accept]=\"col.formElem.accept || ''\"\r\n                            [multiple]=\"!!col.formElem.multiple\"\r\n                            [maxSize]=\"col.formElem.maxFileSize || 0\"\r\n                            [model]=\"row[col.key]\"\r\n                            (modelChange)=\"onCellChange(row, col, $event)\"\r\n                            (changeEv)=\"col.formElem.change ? col.formElem.change(row,i) : null\">\r\n                          </osl-file-upload>\r\n                        }\r\n\r\n                      }\r\n                    </div>\r\n                  } @else {\r\n                    <span class=\"osl-fg-cell-text\">{{ row[col.key] ?? '--' }}</span>\r\n                  }\r\n                </td>\r\n              }\r\n\r\n            </tr>\r\n          }\r\n        }\r\n\r\n      </tbody>\r\n\r\n      @if (footerColumns && footerColumns.length > 0 && datasource && datasource.length > 0) {\r\n        <tfoot class=\"osl-fg-tfoot\">\r\n          <tr class=\"osl-fg-footer-row\">\r\n            @for (fcol of footerColumns; track $index) {\r\n              <td\r\n                [class]=\"'osl-fg-footer-td ' + (fcol.class || '')\"\r\n                [attr.colspan]=\"fcol.colspan || 1\">\r\n                {{ fcol.displayFn ? fcol.displayFn(datasource) : (fcol.display || '') }}\r\n              </td>\r\n            }\r\n          </tr>\r\n        </tfoot>\r\n      }\r\n\r\n    </table>\r\n  </div>\r\n\r\n  @if (isPaginated) {\r\n    <div class=\"osl-fg-pagination\">\r\n\r\n      <span class=\"osl-fg-pagination__info\">\r\n        @if (loading) {\r\n          Loading...\r\n        } @else if (_total > 0) {\r\n          {{ startRecord }}\u2013{{ endRecord }} of {{ _total }} rows\r\n        } @else {\r\n          No rows\r\n        }\r\n      </span>\r\n\r\n      <div class=\"osl-fg-pagination__controls\">\r\n        <button class=\"osl-fg-page-btn osl-fg-page-btn--nav\" (click)=\"goToPage(1)\" [disabled]=\"currentPage === 1 || loading\">\u00AB</button>\r\n        <button class=\"osl-fg-page-btn osl-fg-page-btn--nav\" (click)=\"goToPage(currentPage - 1)\" [disabled]=\"currentPage === 1 || loading\">\u2039 Prev</button>\r\n\r\n        @for (page of pageNumbers; track $index) {\r\n          @if (page === -1) {\r\n            <span class=\"osl-fg-page-ellipsis\">\u2026</span>\r\n          } @else {\r\n            <button\r\n              class=\"osl-fg-page-btn osl-fg-page-btn--num\"\r\n              [class.osl-fg-page-btn--active]=\"page === currentPage\"\r\n              [disabled]=\"loading\"\r\n              (click)=\"goToPage(page)\">\r\n              {{ page }}\r\n            </button>\r\n          }\r\n        }\r\n\r\n        <button class=\"osl-fg-page-btn osl-fg-page-btn--nav\" (click)=\"goToPage(currentPage + 1)\" [disabled]=\"currentPage === totalPages || loading\">Next \u203A</button>\r\n        <button class=\"osl-fg-page-btn osl-fg-page-btn--nav\" (click)=\"goToPage(totalPages)\" [disabled]=\"currentPage === totalPages || loading\">\u00BB</button>\r\n      </div>\r\n\r\n      <div class=\"osl-fg-pagination__size\">\r\n        <select class=\"osl-fg-page-size\" [ngModel]=\"pageSize\" (ngModelChange)=\"onPageSizeChange($event)\" [disabled]=\"loading\">\r\n          @for (opt of pageSizeOptions; track opt) {\r\n            <option [value]=\"opt\">{{ opt }} per page</option>\r\n          }\r\n        </select>\r\n      </div>\r\n\r\n    </div>\r\n  }\r\n\r\n</div>\r\n", styles: [".osl-fg-wrapper{display:flex;flex-direction:column;width:100%;font-size:var(--osl-text-font-size);font-family:inherit;border:1px solid var(--osl-border-color, #e5e7eb);border-radius:var(--osl-border-radius, 8px);overflow:hidden;background:#fff}.osl-fg-table-container{overflow-x:auto;overflow-y:auto;min-height:120px}.osl-fg-table{width:100%;border-collapse:collapse;table-layout:auto}.osl-fg-thead{position:sticky;top:0;z-index:2}.osl-fg-th{background:#f3f4f6;color:#4b5563;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.04em;padding:10px 12px;text-align:left;border-bottom:2px solid var(--osl-border-color, #e5e7eb);border-right:1px solid var(--osl-border-color, #e5e7eb);white-space:nowrap;vertical-align:middle}.osl-fg-th:last-child{border-right:none}.osl-fg-th--actions{width:44px;min-width:44px;text-align:center;padding:6px}.osl-fg-th-required{color:#ef4444;margin-left:2px;font-size:14px;line-height:1;vertical-align:middle}.osl-fg-row{border-bottom:1px solid #f0f0f0;transition:background .1s}.osl-fg-row:nth-child(odd){background:#f8fafc}.osl-fg-row:nth-child(2n){background:#fff}.osl-fg-row:hover{background:#eef2ff!important}.osl-fg-row:last-child{border-bottom:none}.osl-fg-row--skeleton{pointer-events:none}.osl-fg-td{padding:4px 10px;vertical-align:middle;border-right:1px solid #f0f0f0}.osl-fg-td:last-child{border-right:none}.osl-fg-td--actions{width:44px;min-width:44px;text-align:center;padding:4px 6px}.osl-fg-cell-form{min-width:100px}.osl-fg-cell-form ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none!important}.osl-fg-cell-form ::ng-deep .mat-mdc-form-field,.osl-fg-cell-form ::ng-deep mat-form-field{width:100%}.osl-fg-cell-form ::ng-deep .mat-mdc-text-field-wrapper{padding-top:0}.osl-fg-cell-text{color:#111827;font-size:var(--osl-text-font-size)}.osl-fg-add-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:none;border-radius:6px;background:var(--osl-primary, #6366f1);color:#fff;cursor:pointer;padding:0;box-shadow:0 1px 4px #6366f159;transition:background .15s,box-shadow .15s,transform .1s}.osl-fg-add-btn mat-icon{font-size:18px;width:18px;height:18px;line-height:18px}.osl-fg-add-btn:hover:not(:disabled){background:var(--osl-primary-hover, #4f46e5);box-shadow:0 2px 8px #6366f173;transform:scale(1.05)}.osl-fg-add-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}.osl-fg-delete-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:1.5px solid transparent;border-radius:6px;background:transparent;color:#d1d5db;cursor:pointer;padding:0;transition:border-color .15s,color .15s,background .15s}.osl-fg-delete-btn mat-icon{font-size:16px;width:16px;height:16px;line-height:16px}.osl-fg-delete-btn:hover{border-color:#fca5a5;color:#ef4444;background:#fef2f2}.osl-fg-empty{padding:40px 16px;text-align:center}.osl-fg-empty-inner{display:flex;flex-direction:column;align-items:center;gap:10px;color:#9ca3af}.osl-fg-empty-inner svg{opacity:.4}.osl-fg-empty-inner p{margin:0;font-size:13px}@keyframes osl-fg-pulse{0%,to{opacity:1}50%{opacity:.4}}.osl-fg-skeleton{height:36px;border-radius:6px;background:#e5e7eb;animation:osl-fg-pulse 1.4s ease-in-out infinite}.osl-fg-skeleton--sm{height:28px;width:28px;border-radius:4px;margin:0 auto}.osl-fg-tfoot{position:sticky;bottom:0;z-index:2}.osl-fg-footer-td{background:#f3f4f6;color:#4b5563;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.04em;padding:10px 12px;text-align:left;border-top:2px solid var(--osl-border-color, #e5e7eb);border-right:1px solid var(--osl-border-color, #e5e7eb);white-space:nowrap;vertical-align:middle}.osl-fg-footer-td:last-child{border-right:none}.osl-fg-pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;border-top:1px solid var(--osl-border-color, #e5e7eb);background:#f9fafb;flex-shrink:0;flex-wrap:wrap}.osl-fg-pagination__info{font-size:12px;color:#6b7280;white-space:nowrap;min-width:120px}.osl-fg-pagination__controls{display:flex;align-items:center;gap:3px;flex-wrap:nowrap}.osl-fg-pagination__size{display:flex;align-items:center;justify-content:flex-end;min-width:120px}.osl-fg-page-btn{display:inline-flex;align-items:center;justify-content:center;height:30px;padding:0 10px;border:1px solid var(--osl-border-color, #e5e7eb);border-radius:var(--osl-border-radius, 6px);background:#fff;color:#374151;font-size:13px;font-family:inherit;cursor:pointer;transition:background .12s,border-color .12s,color .12s;white-space:nowrap}.osl-fg-page-btn:hover:not(:disabled){background:#f3f4f6;border-color:#9ca3af}.osl-fg-page-btn:disabled{opacity:.35;cursor:not-allowed}.osl-fg-page-btn--nav{font-size:12px;color:#6b7280}.osl-fg-page-btn--num{min-width:30px;padding:0;font-size:13px}.osl-fg-page-btn--active{background:var(--osl-primary, #6366f1);border-color:var(--osl-primary, #6366f1);color:#fff;font-weight:600}.osl-fg-page-btn--active:hover:not(:disabled){background:var(--osl-primary-hover, #4f46e5);border-color:var(--osl-primary-hover, #4f46e5)}.osl-fg-page-ellipsis{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;color:#9ca3af;font-size:13px;pointer-events:none}.osl-fg-page-size{height:30px;padding:0 8px;border:1px solid var(--osl-border-color, #e5e7eb);border-radius:var(--osl-border-radius, 6px);background:#fff;color:#374151;font-size:12px;font-family:inherit;cursor:pointer;outline:none}.osl-fg-page-size:focus{border-color:var(--osl-primary, #6366f1)}.osl-fg-page-size:disabled{opacity:.4;cursor:not-allowed}.osl-grid-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:1.5px solid var(--osl-border-color);border-radius:var(--osl-border-radius);background:transparent;color:#6b7280;cursor:pointer;padding:0;transition:border-color .15s,color .15s,background .15s;margin:0 2px}.osl-grid-icon-btn mat-icon{font-size:16px;width:16px;height:16px;line-height:16px}.osl-grid-icon-btn:hover{border-color:var(--osl-primary);color:var(--osl-primary);background:#6366f10f}.osl-grid-icon-btn--danger:hover{border-color:#ef4444;color:#ef4444;background:#ef44440f}\n"], dependencies: [{ kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: Oslinput, selector: "osl-input", inputs: ["label", "required", "disabled", "model", "type", "placeholder", "mask", "min", "max", "minLength", "maxLength", "prefixIcon", "suffixIcon", "skeletonLoading", "skeletonTheme", "onlyChars", "isCapitalize", "decimalPortion"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: Osltextarea, selector: "osl-textarea", inputs: ["label", "rows", "required", "disabled", "model", "placeholder", "maxLength", "minLength", "characterCounter", "resize", "skeletonLoading", "skeletonTheme"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslSelect, selector: "osl-select", inputs: ["label", "required", "disabled", "model", "datasource", "displayField", "valueField", "placeholder", "loading", "clearable", "skeletonLoading", "skeletonTheme"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslRadio, selector: "osl-radio", inputs: ["label", "required", "disabled", "model", "datasource", "displayField", "valueField", "inline", "skeletonLoading", "skeletonTheme"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslSlideToggle, selector: "osl-slide-toggle", inputs: ["label", "disabled", "model", "labelPosition", "trueLabel", "falseLabel", "skeletonLoading", "skeletonTheme"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslAutocomplete, selector: "osl-autocomplete", inputs: ["label", "required", "disabled", "model", "datasource", "displayField", "valueField", "placeholder", "loading", "searchType", "methodName", "configMethodName", "service", "object", "skeletonLoading", "skeletonTheme", "isLister", "apiBody"], outputs: ["datasourceChange", "modelChange", "changeEv"] }, { kind: "component", type: OslFileUpload, selector: "osl-file-upload", inputs: ["label", "required", "disabled", "model", "accept", "multiple", "maxSize", "skeletonLoading", "skeletonTheme", "fileMode", "downloadFn"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslDatepicker, selector: "osl-datepicker", inputs: ["label", "required", "disabled", "model", "dateType", "placeholder", "minDate", "maxDate", "skeletonLoading", "skeletonTheme"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslDatetimepicker, selector: "osl-datetimepicker", inputs: ["label", "required", "disabled", "model", "placeholder", "minDatetime", "maxDatetime", "format", "displayFormat", "showSeconds", "enableMeridian", "skeletonLoading", "skeletonTheme"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslCheckbox, selector: "osl-checkbox", inputs: ["label", "disabled", "required", "model", "indeterminate", "skeletonLoading", "skeletonTheme"], outputs: ["modelChange", "changeEv"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslFormGrid, decorators: [{
             type: Component,
@@ -7368,5 +7443,5 @@ const unsavedChangesGuard = () => {
  * Generated bundle index. Do not edit.
  */
 
-export { array_util as ArrayUtil, date_util as DateUtil, DeleteConfirmation, DeleteConfirmationData, Dialog, DialogWrapper, DirtyStateService, DynamicForm, FormStructureModule, Httpbase, number_util as NumberUtil, object_util as ObjectUtil, OslAutocomplete, OslAutocompleteLister, OslBaseExtended, OslButton, OslCheckbox, OslDatepicker, OslDatetimepicker, OslDocumentUploader, OslFileUpload, OslFormGrid, OslGrid, OslMenu, OslMenuTriggerFor, OslRadio, OslReportForm, OslReportGrid, OslSearchbar, OslSelect, OslSetup, OslSkeletonDirective, OslSkeletonModule, OslSkeletonThemeService, OslSlideToggle, OslTooltipDirective, OslUserLog, Oslinput, Osltextarea, storage_util as StorageUtil, string_util as StringUtil, UnsavedChangesDialog, validation_util as ValidationUtil, baseComponent, unsavedChangesGuard };
+export { array_util as ArrayUtil, date_util as DateUtil, DeleteConfirmation, DeleteConfirmationData, Dialog, DialogWrapper, DirtyStateService, DynamicForm, ErrorDialog, FormStructureModule, Httpbase, number_util as NumberUtil, object_util as ObjectUtil, OslAutocomplete, OslAutocompleteLister, OslBaseExtended, OslButton, OslCheckbox, OslDatepicker, OslDatetimepicker, OslDocumentUploader, OslFileUpload, OslFormGrid, OslGrid, OslMenu, OslMenuTriggerFor, OslRadio, OslReportForm, OslReportGrid, OslSearchbar, OslSelect, OslSetup, OslSkeletonDirective, OslSkeletonModule, OslSkeletonThemeService, OslSlideToggle, OslTooltipDirective, OslUserLog, Oslinput, Osltextarea, storage_util as StorageUtil, string_util as StringUtil, UnsavedChangesDialog, validation_util as ValidationUtil, baseComponent, unsavedChangesGuard };
 //# sourceMappingURL=osl-base-extended.mjs.map