osl-base-extended 2.0.3 → 2.0.4

package/fesm2022/osl-base-extended.mjs

@@ -18,12 +18,15 @@ import * as i2$1 from '@angular/material/form-field';
 import { MatFormFieldModule, MatHint } from '@angular/material/form-field';
 import * as i5 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
+import * as i4 from '@ngxmc/datetime-picker';
+import { NgxMatDatetimepicker, NgxMatDatepickerInput, NgxMatDatepickerToggle } from '@ngxmc/datetime-picker';
 import { MatInputModule } from '@angular/material/input';
 import { debounceTime as debounceTime$1, distinctUntilChanged as distinctUntilChanged$1 } from 'rxjs/operators';
 import { MatMenuModule } from '@angular/material/menu';
 import { ScrollingModule } from '@angular/cdk/scrolling';
 import * as i3$1 from '@angular/cdk/drag-drop';
 import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
+import { NativeDateAdapter, DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
 
 class OslBaseExtended {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslBaseExtended, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -280,10 +283,10 @@ class Httpbase {
         };
     }
     handleError(error) {
-        if (error.status === 401) {
-            // localStorage.clear();
-            window.location.href = '/login';
-        }
+        // if (error.status === 401) {
+        //   // localStorage.clear();
+        //   window.location.href = '/login';
+        // }
         return {
             isSuccessful: false,
             error: this.mapError(error),
@@ -2089,272 +2092,583 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 type: Output
             }] } });
 
-class OslDatetimepicker {
-    label = '';
-    required = false;
-    disabled = false;
-    _model = '';
-    set model(val) {
-        this._model = this._normalize(val);
-    }
-    get model() { return this._model; }
-    placeholder = '';
-    minDatetime = '';
-    maxDatetime = '';
-    skeletonLoading = false;
-    skeletonTheme = 'light';
-    modelChange = new EventEmitter();
-    changeEv = new EventEmitter();
-    onValueChange(val) {
-        if (val === this._model)
-            return;
-        this._model = val ?? '';
-        this.modelChange.emit(this._model);
-        this.changeEv.emit(this._model);
-    }
-    // Trim to YYYY-MM-DDTHH:MM which datetime-local inputs require
-    _normalize(val) {
-        if (!val)
-            return '';
-        const match = val.match(/^(\d{4}-\d{2}-\d{2}T\d{2}:\d{2})/);
-        return match ? match[1] : val;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslDatetimepicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: OslDatetimepicker, isStandalone: false, selector: "osl-datetimepicker", inputs: { label: "label", required: "required", disabled: "disabled", model: "model", placeholder: "placeholder", minDatetime: "minDatetime", maxDatetime: "maxDatetime", skeletonLoading: "skeletonLoading", skeletonTheme: "skeletonTheme" }, outputs: { modelChange: "modelChange", changeEv: "changeEv" }, ngImport: i0, template: "<div class=\"d-flex flex-column\">\n    @if (label) {\n        <div [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\">\n            <label class=\"label\" [class.txt-clr-red]=\"dtField.touched && dtField.invalid\">\n                {{label}} <span class=\"txt-clr-red\">{{required ? '*' : ''}}</span>\n            </label>\n        </div>\n    }\n    <div class=\"input-wrapper\" [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\">\n        <input\n            type=\"datetime-local\"\n            class=\"dt-input\"\n            [ngModel]=\"model\"\n            (ngModelChange)=\"onValueChange($event)\"\n            [required]=\"required\"\n            [disabled]=\"disabled\"\n            [min]=\"minDatetime\"\n            [max]=\"maxDatetime\"\n            [class.error]=\"dtField.touched && dtField.invalid\"\n            #dtField=\"ngModel\"\n        >\n    </div>\n    @if (dtField.touched && dtField.invalid && required) {\n        <mat-hint class=\"hint\">{{label}} is Required!</mat-hint>\n    }\n</div>\n", styles: [".label{font-size:var(--osl-label-font-size);margin-bottom:5px}.txt-clr-red{color:var(--osl-error-color)}.hint{color:var(--osl-error-color);margin-top:2px;font-size:var(--osl-hint-font-size)}.input-wrapper{position:relative;display:flex;align-items:center}.dt-input{height:var(--osl-control-height);width:100%;border-radius:var(--osl-border-radius);outline:none;border:1px solid var(--osl-border-color);padding:0 10px;font-size:var(--osl-text-font-size);font-family:inherit;color:#333;background-color:#fff;transition:border-color .2s,box-shadow .2s;letter-spacing:.01em;box-sizing:border-box}.dt-input::placeholder{color:#bbb}.dt-input:hover:not(:disabled){border-color:var(--osl-focus-border-color)}.dt-input:focus{border-color:var(--osl-focus-border-color);box-shadow:0 0 0 3px var(--osl-focus-shadow, rgba(99, 102, 241, .14))}.dt-input:disabled{background-color:#f5f5f5;cursor:not-allowed;opacity:.7}.dt-input.error{border-color:var(--osl-error-color)}.dt-input.error:focus{box-shadow:0 0 0 3px var(--osl-error-shadow, rgba(220, 38, 38, .14))}.dt-input::-webkit-calendar-picker-indicator{opacity:.45;cursor:pointer;transition:opacity .15s}.dt-input::-webkit-calendar-picker-indicator:hover{opacity:.9}\n"], dependencies: [{ kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { 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"] }] });
+// ─── Date Utilities ───────────────────────────────────────────────────────────
+const MONTH_NAMES_SHORT = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+const MONTH_NAMES_FULL = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+const DAY_NAMES_SHORT = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+const DAY_NAMES_FULL = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+function pad(n) {
+    return String(n).padStart(2, '0');
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslDatetimepicker, decorators: [{
-            type: Component,
-            args: [{ selector: 'osl-datetimepicker', standalone: false, template: "<div class=\"d-flex flex-column\">\n    @if (label) {\n        <div [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\">\n            <label class=\"label\" [class.txt-clr-red]=\"dtField.touched && dtField.invalid\">\n                {{label}} <span class=\"txt-clr-red\">{{required ? '*' : ''}}</span>\n            </label>\n        </div>\n    }\n    <div class=\"input-wrapper\" [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\">\n        <input\n            type=\"datetime-local\"\n            class=\"dt-input\"\n            [ngModel]=\"model\"\n            (ngModelChange)=\"onValueChange($event)\"\n            [required]=\"required\"\n            [disabled]=\"disabled\"\n            [min]=\"minDatetime\"\n            [max]=\"maxDatetime\"\n            [class.error]=\"dtField.touched && dtField.invalid\"\n            #dtField=\"ngModel\"\n        >\n    </div>\n    @if (dtField.touched && dtField.invalid && required) {\n        <mat-hint class=\"hint\">{{label}} is Required!</mat-hint>\n    }\n</div>\n", styles: [".label{font-size:var(--osl-label-font-size);margin-bottom:5px}.txt-clr-red{color:var(--osl-error-color)}.hint{color:var(--osl-error-color);margin-top:2px;font-size:var(--osl-hint-font-size)}.input-wrapper{position:relative;display:flex;align-items:center}.dt-input{height:var(--osl-control-height);width:100%;border-radius:var(--osl-border-radius);outline:none;border:1px solid var(--osl-border-color);padding:0 10px;font-size:var(--osl-text-font-size);font-family:inherit;color:#333;background-color:#fff;transition:border-color .2s,box-shadow .2s;letter-spacing:.01em;box-sizing:border-box}.dt-input::placeholder{color:#bbb}.dt-input:hover:not(:disabled){border-color:var(--osl-focus-border-color)}.dt-input:focus{border-color:var(--osl-focus-border-color);box-shadow:0 0 0 3px var(--osl-focus-shadow, rgba(99, 102, 241, .14))}.dt-input:disabled{background-color:#f5f5f5;cursor:not-allowed;opacity:.7}.dt-input.error{border-color:var(--osl-error-color)}.dt-input.error:focus{box-shadow:0 0 0 3px var(--osl-error-shadow, rgba(220, 38, 38, .14))}.dt-input::-webkit-calendar-picker-indicator{opacity:.45;cursor:pointer;transition:opacity .15s}.dt-input::-webkit-calendar-picker-indicator:hover{opacity:.9}\n"] }]
-        }], propDecorators: { label: [{
-                type: Input,
-                args: ['label']
-            }], required: [{
-                type: Input,
-                args: ['required']
-            }], disabled: [{
-                type: Input,
-                args: ['disabled']
-            }], model: [{
-                type: Input,
-                args: ['model']
-            }], placeholder: [{
-                type: Input,
-                args: ['placeholder']
-            }], minDatetime: [{
-                type: Input,
-                args: ['minDatetime']
-            }], maxDatetime: [{
-                type: Input,
-                args: ['maxDatetime']
-            }], skeletonLoading: [{
-                type: Input,
-                args: ['skeletonLoading']
-            }], skeletonTheme: [{
-                type: Input,
-                args: ['skeletonTheme']
-            }], modelChange: [{
-                type: Output
-            }], changeEv: [{
-                type: Output
-            }] } });
-
-class OslCheckbox {
-    checkboxEl;
-    label = '';
-    disabled = false;
-    required = false;
-    model = false;
-    indeterminate = false;
-    skeletonLoading = false;
-    skeletonTheme = 'light';
-    modelChange = new EventEmitter();
-    changeEv = new EventEmitter();
-    touched = false;
-    get isInvalid() {
-        return this.touched && this.required && !this.model;
-    }
-    ngOnChanges(changes) {
-        if (changes['indeterminate'] && this.checkboxEl) {
-            this.checkboxEl.nativeElement.indeterminate = this.indeterminate;
-        }
-    }
-    ngAfterViewInit() {
-        if (this.checkboxEl) {
-            this.checkboxEl.nativeElement.indeterminate = this.indeterminate;
-        }
-    }
-    onModelChange(event) {
-        this.touched = true;
-        this.model = event;
-        this.modelChange.emit(this.model);
-        this.changeEv.emit(this.model);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: OslCheckbox, isStandalone: false, selector: "osl-checkbox", inputs: { label: "label", disabled: "disabled", required: "required", model: "model", indeterminate: "indeterminate", skeletonLoading: "skeletonLoading", skeletonTheme: "skeletonTheme" }, outputs: { modelChange: "modelChange", changeEv: "changeEv" }, viewQueries: [{ propertyName: "checkboxEl", first: true, predicate: ["checkboxEl"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"d-flex flex-column\">\r\n\r\n    <label class=\"checkbox-wrapper\"  [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\" [class.checkbox-disabled]=\"disabled\" [class.checkbox-invalid]=\"isInvalid\">\r\n        <input\r\n            #checkboxEl\r\n            type=\"checkbox\"\r\n            [ngModel]=\"model\"\r\n            (ngModelChange)=\"onModelChange($event)\"\r\n            [disabled]=\"disabled\"\r\n        >\r\n        <span class=\"checkbox-label\"  [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\">\r\n            {{label}} <span class=\"txt-clr-red\">{{required?'*':''}}</span>\r\n        </span>\r\n    </label>\r\n    @if(isInvalid) {\r\n        <mat-hint class=\"hint\">{{label}} is Required!</mat-hint>\r\n    }\r\n</div>\r\n", styles: [".checkbox-wrapper{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:var(--osl-label-font-size);width:fit-content}.checkbox-wrapper input[type=checkbox]{width:16px;height:16px;cursor:pointer;accent-color:#333;flex-shrink:0}.checkbox-wrapper .checkbox-label{-webkit-user-select:none;user-select:none}.checkbox-wrapper.checkbox-disabled{opacity:.6;cursor:not-allowed}.checkbox-wrapper.checkbox-disabled input[type=checkbox]{cursor:not-allowed}.checkbox-wrapper.checkbox-invalid{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: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { 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"] }] });
+/** Returns the current date and time. */
+function now() {
+    return new Date();
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslCheckbox, decorators: [{
-            type: Component,
-            args: [{ selector: 'osl-checkbox', standalone: false, template: "<div class=\"d-flex flex-column\">\r\n\r\n    <label class=\"checkbox-wrapper\"  [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\" [class.checkbox-disabled]=\"disabled\" [class.checkbox-invalid]=\"isInvalid\">\r\n        <input\r\n            #checkboxEl\r\n            type=\"checkbox\"\r\n            [ngModel]=\"model\"\r\n            (ngModelChange)=\"onModelChange($event)\"\r\n            [disabled]=\"disabled\"\r\n        >\r\n        <span class=\"checkbox-label\"  [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\">\r\n            {{label}} <span class=\"txt-clr-red\">{{required?'*':''}}</span>\r\n        </span>\r\n    </label>\r\n    @if(isInvalid) {\r\n        <mat-hint class=\"hint\">{{label}} is Required!</mat-hint>\r\n    }\r\n</div>\r\n", styles: [".checkbox-wrapper{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:var(--osl-label-font-size);width:fit-content}.checkbox-wrapper input[type=checkbox]{width:16px;height:16px;cursor:pointer;accent-color:#333;flex-shrink:0}.checkbox-wrapper .checkbox-label{-webkit-user-select:none;user-select:none}.checkbox-wrapper.checkbox-disabled{opacity:.6;cursor:not-allowed}.checkbox-wrapper.checkbox-disabled input[type=checkbox]{cursor:not-allowed}.checkbox-wrapper.checkbox-invalid{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"] }]
-        }], propDecorators: { checkboxEl: [{
-                type: ViewChild,
-                args: ['checkboxEl']
-            }], label: [{
-                type: Input,
-                args: ['label']
-            }], disabled: [{
-                type: Input,
-                args: ['disabled']
-            }], required: [{
-                type: Input,
-                args: ['required']
-            }], model: [{
-                type: Input,
-                args: ['model']
-            }], indeterminate: [{
-                type: Input,
-                args: ['indeterminate']
-            }], skeletonLoading: [{
-                type: Input,
-                args: ['skeletonLoading']
-            }], skeletonTheme: [{
-                type: Input,
-                args: ['skeletonTheme']
-            }], modelChange: [{
-                type: Output
-            }], changeEv: [{
-                type: Output
-            }] } });
-
-class OslButton {
-    label = 'Button';
-    icon = '';
-    variant = 'primary';
-    size = 'md';
-    disabled = false;
-    loading = false;
-    type = 'button';
-    fullWidth = false;
-    clickEv = new EventEmitter();
-    get classes() {
-        return [
-            'osl-btn',
-            `osl-btn--${this.variant}`,
-            `osl-btn--${this.size}`,
-            this.fullWidth ? 'osl-btn--full' : '',
-        ]
-            .filter(Boolean)
-            .join(' ');
-    }
-    onClick() {
-        if (!this.disabled && !this.loading) {
-            this.clickEv.emit();
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: OslButton, isStandalone: false, selector: "osl-button", inputs: { label: "label", icon: "icon", variant: "variant", size: "size", disabled: "disabled", loading: "loading", type: "type", fullWidth: "fullWidth" }, outputs: { clickEv: "clickEv" }, ngImport: i0, template: "@if (variant == 'icon' && icon) {\r\n  <button class=\"icon-btn\" [type]=\"type\" [disabled]=\"disabled || loading\" (click)=\"onClick()\">\r\n    @if (loading) {\r\n      <span class=\"osl-btn__spinner\"></span>\r\n    } @else {\r\n      <mat-icon>{{ icon }}</mat-icon>\r\n    }\r\n  </button>\r\n} @else {\r\n  <button [class]=\"classes\" [type]=\"type\" [disabled]=\"disabled || loading\" (click)=\"onClick()\">\r\n    @if (loading) {\r\n      <span class=\"osl-btn__spinner\"></span>\r\n    }\r\n    <span class=\"osl-btn__label\">{{ label }}</span>\r\n    @if (icon) {\r\n      <span class=\"osl-btn__label-icon\"\r\n        ><mat-icon>{{ icon }}</mat-icon></span\r\n      >\r\n    }\r\n  </button>\r\n}\r\n", styles: ["@charset \"UTF-8\";.osl-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:var(--osl-border-radius);cursor:pointer;font-size:var(--osl-label-font-size);font-weight:500;line-height:1;transition:background-color .2s ease,border-color .2s ease,opacity .2s ease;white-space:nowrap;outline:none}.osl-btn--sm{height:28px;padding:0 var(--osl-hint-font-size);font-size:var(--osl-hint-font-size)}.osl-btn--sm mat-icon{font-size:var(--osl-hint-font-size)}.osl-btn--md{height:36px;padding:0 18px;font-size:var(--osl-label-font-size)}.osl-btn--lg{height:44px;padding:0 24px;font-size:16px}.osl-btn--full{width:100%}.osl-btn:disabled{opacity:var(--osl-disabled-opacity);cursor:not-allowed}.osl-btn--primary{background-color:var(--osl-primary);color:var(--osl-primary-text)}.osl-btn--primary:hover:not(:disabled){background-color:var(--osl-primary-hover)}.osl-btn--secondary{background-color:var(--osl-secondary);color:var(--osl-secondary-text)}.osl-btn--secondary:hover:not(:disabled){background-color:var(--osl-secondary-hover)}.osl-btn--success{background-color:var(--osl-success);color:var(--osl-success-text)}.osl-btn--success:hover:not(:disabled){background-color:var(--osl-success-hover)}.osl-btn--danger{background-color:var(--osl-danger);color:var(--osl-danger-text)}.osl-btn--danger:hover:not(:disabled){background-color:var(--osl-danger-hover)}.osl-btn--warning{background-color:var(--osl-warning);color:var(--osl-warning-text)}.osl-btn--warning:hover:not(:disabled){background-color:var(--osl-warning-hover)}.osl-btn--info{background-color:var(--osl-info);color:var(--osl-info-text)}.osl-btn--info:hover:not(:disabled){background-color:var(--osl-info-hover)}.osl-btn--outline-primary{background-color:transparent;border:1.5px solid var(--osl-primary);color:var(--osl-primary)}.osl-btn--outline-primary:hover:not(:disabled){background-color:var(--osl-primary);color:var(--osl-primary-text)}.osl-btn--outline-secondary{background-color:transparent;border:1.5px solid var(--osl-secondary);color:var(--osl-secondary)}.osl-btn--outline-secondary:hover:not(:disabled){background-color:var(--osl-secondary);color:var(--osl-secondary-text)}.osl-btn--outline-success{background-color:transparent;border:1.5px solid var(--osl-success);color:var(--osl-success)}.osl-btn--outline-success:hover:not(:disabled){background-color:var(--osl-success);color:var(--osl-success-text)}.osl-btn--outline-danger{background-color:transparent;border:1.5px solid var(--osl-danger);color:var(--osl-danger)}.osl-btn--outline-danger:hover:not(:disabled){background-color:var(--osl-danger);color:var(--osl-danger-text)}.osl-btn--outline-warning{background-color:transparent;border:1.5px solid var(--osl-warning);color:var(--osl-warning)}.osl-btn--outline-warning:hover:not(:disabled){background-color:var(--osl-warning);color:var(--osl-warning-text)}.osl-btn--outline-info{background-color:transparent;border:1.5px solid var(--osl-info);color:var(--osl-info)}.osl-btn--outline-info:hover:not(:disabled){background-color:var(--osl-info);color:var(--osl-info-text)}.osl-btn__spinner{display:inline-block;width:var(--osl-label-font-size);height:var(--osl-label-font-size);border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:osl-spin .7s linear infinite}@keyframes osl-spin{to{transform:rotate(360deg)}}.osl-btn__label-icon{color:var(--color-white)}.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}.icon-btn mat-icon{font-size:16px;width:16px;height:16px;line-height:16px}.icon-btn:hover{border-color:var(--osl-primary);color:var(--osl-primary);background:#6366f10f}.icon-btn--danger:hover{border-color:#ef4444;color:#ef4444;background:#ef44440f}\n"], dependencies: [{ kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+/** Returns today's date with time set to midnight. */
+function today() {
+    return startOfDay(new Date());
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslButton, decorators: [{
-            type: Component,
-            args: [{ selector: 'osl-button', standalone: false, template: "@if (variant == 'icon' && icon) {\r\n  <button class=\"icon-btn\" [type]=\"type\" [disabled]=\"disabled || loading\" (click)=\"onClick()\">\r\n    @if (loading) {\r\n      <span class=\"osl-btn__spinner\"></span>\r\n    } @else {\r\n      <mat-icon>{{ icon }}</mat-icon>\r\n    }\r\n  </button>\r\n} @else {\r\n  <button [class]=\"classes\" [type]=\"type\" [disabled]=\"disabled || loading\" (click)=\"onClick()\">\r\n    @if (loading) {\r\n      <span class=\"osl-btn__spinner\"></span>\r\n    }\r\n    <span class=\"osl-btn__label\">{{ label }}</span>\r\n    @if (icon) {\r\n      <span class=\"osl-btn__label-icon\"\r\n        ><mat-icon>{{ icon }}</mat-icon></span\r\n      >\r\n    }\r\n  </button>\r\n}\r\n", styles: ["@charset \"UTF-8\";.osl-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:var(--osl-border-radius);cursor:pointer;font-size:var(--osl-label-font-size);font-weight:500;line-height:1;transition:background-color .2s ease,border-color .2s ease,opacity .2s ease;white-space:nowrap;outline:none}.osl-btn--sm{height:28px;padding:0 var(--osl-hint-font-size);font-size:var(--osl-hint-font-size)}.osl-btn--sm mat-icon{font-size:var(--osl-hint-font-size)}.osl-btn--md{height:36px;padding:0 18px;font-size:var(--osl-label-font-size)}.osl-btn--lg{height:44px;padding:0 24px;font-size:16px}.osl-btn--full{width:100%}.osl-btn:disabled{opacity:var(--osl-disabled-opacity);cursor:not-allowed}.osl-btn--primary{background-color:var(--osl-primary);color:var(--osl-primary-text)}.osl-btn--primary:hover:not(:disabled){background-color:var(--osl-primary-hover)}.osl-btn--secondary{background-color:var(--osl-secondary);color:var(--osl-secondary-text)}.osl-btn--secondary:hover:not(:disabled){background-color:var(--osl-secondary-hover)}.osl-btn--success{background-color:var(--osl-success);color:var(--osl-success-text)}.osl-btn--success:hover:not(:disabled){background-color:var(--osl-success-hover)}.osl-btn--danger{background-color:var(--osl-danger);color:var(--osl-danger-text)}.osl-btn--danger:hover:not(:disabled){background-color:var(--osl-danger-hover)}.osl-btn--warning{background-color:var(--osl-warning);color:var(--osl-warning-text)}.osl-btn--warning:hover:not(:disabled){background-color:var(--osl-warning-hover)}.osl-btn--info{background-color:var(--osl-info);color:var(--osl-info-text)}.osl-btn--info:hover:not(:disabled){background-color:var(--osl-info-hover)}.osl-btn--outline-primary{background-color:transparent;border:1.5px solid var(--osl-primary);color:var(--osl-primary)}.osl-btn--outline-primary:hover:not(:disabled){background-color:var(--osl-primary);color:var(--osl-primary-text)}.osl-btn--outline-secondary{background-color:transparent;border:1.5px solid var(--osl-secondary);color:var(--osl-secondary)}.osl-btn--outline-secondary:hover:not(:disabled){background-color:var(--osl-secondary);color:var(--osl-secondary-text)}.osl-btn--outline-success{background-color:transparent;border:1.5px solid var(--osl-success);color:var(--osl-success)}.osl-btn--outline-success:hover:not(:disabled){background-color:var(--osl-success);color:var(--osl-success-text)}.osl-btn--outline-danger{background-color:transparent;border:1.5px solid var(--osl-danger);color:var(--osl-danger)}.osl-btn--outline-danger:hover:not(:disabled){background-color:var(--osl-danger);color:var(--osl-danger-text)}.osl-btn--outline-warning{background-color:transparent;border:1.5px solid var(--osl-warning);color:var(--osl-warning)}.osl-btn--outline-warning:hover:not(:disabled){background-color:var(--osl-warning);color:var(--osl-warning-text)}.osl-btn--outline-info{background-color:transparent;border:1.5px solid var(--osl-info);color:var(--osl-info)}.osl-btn--outline-info:hover:not(:disabled){background-color:var(--osl-info);color:var(--osl-info-text)}.osl-btn__spinner{display:inline-block;width:var(--osl-label-font-size);height:var(--osl-label-font-size);border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:osl-spin .7s linear infinite}@keyframes osl-spin{to{transform:rotate(360deg)}}.osl-btn__label-icon{color:var(--color-white)}.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}.icon-btn mat-icon{font-size:16px;width:16px;height:16px;line-height:16px}.icon-btn:hover{border-color:var(--osl-primary);color:var(--osl-primary);background:#6366f10f}.icon-btn--danger:hover{border-color:#ef4444;color:#ef4444;background:#ef44440f}\n"] }]
-        }], propDecorators: { label: [{
-                type: Input,
-                args: ['label']
-            }], icon: [{
-                type: Input,
-                args: ['icon']
-            }], variant: [{
-                type: Input,
-                args: ['variant']
-            }], size: [{
-                type: Input,
-                args: ['size']
-            }], disabled: [{
-                type: Input,
-                args: ['disabled']
-            }], loading: [{
-                type: Input,
-                args: ['loading']
-            }], type: [{
-                type: Input,
-                args: ['type']
-            }], fullWidth: [{
-                type: Input,
-                args: ['fullWidth']
-            }], clickEv: [{
-                type: Output
-            }] } });
-
-class DynamicForm {
-    cdr;
-    elements = [];
-    _model;
-    set model(val) {
-        this._model = val;
-    }
-    get model() {
-        return this._model;
-    }
-    skeletonLoading = false;
-    skeletonTheme = 'light';
-    modelChange = new EventEmitter();
-    datasourceCache = inject(DatasourceCacheService);
-    constructor(cdr) {
-        this.cdr = cdr;
-    }
-    ngOnInit() {
-        this.loadApiDatasources();
-    }
-    ngOnChanges(changes) {
-        if (changes['elements']) {
-            this.loadApiDatasources();
-        }
-    }
-    loadApiDatasources() {
-        this._loadForList(this.elements);
-    }
-    async _loadForList(list) {
-        for (const elem of list) {
-            if (elem.elementType === 'fieldset' && elem.rows?.length) {
-                this._loadForList(elem.rows);
-            }
-            else if (elem.apiService && elem.apiMethod && (!elem.searchType || elem.searchType == 'Local')) {
-                elem.loadingIf = () => true;
-                const data = await this.datasourceCache.load(elem.apiService, elem.apiMethod, elem.apiBody ? elem.apiBody(this.model) : null);
-                elem.loadingIf = () => false;
-                this.cdr.markForCheck();
-                if (data && data.length > 0) {
-                    elem.datasource = data;
-                }
-            }
-        }
-    }
-    onModelChange(event, key) {
-        this.model[key] = event;
-        this.modelChange.emit(this.model);
-    }
-    onSelectChange(elem, value) {
-        if (!elem.change)
-            return;
-        let selectedObj = undefined;
-        if (elem.datasource) {
-            if (Array.isArray(value)) {
-                selectedObj = value.map(v => elem.datasource.find(item => (elem.valueField ? item[elem.valueField] : item) === v) ?? null);
-            }
-            else if (value !== null && value !== undefined) {
-                selectedObj = elem.datasource.find(item => (elem.valueField ? item[elem.valueField] : item) === (isNaN(Number(value)) ? value : Number(value))) ?? null;
-            }
-            else {
-                selectedObj = null;
-            }
+/** Returns true if the value is a valid Date object. */
+function isValidDate$1(value) {
+    return value instanceof Date && !isNaN(value.getTime());
+}
+/**
+ * Formats a Date using a pattern string.
+ * Tokens: YYYY, YY, MM, M, DD, D, HH, H, mm, m, ss, s,
+ *         MMM (short month), MMMM (full month),
+ *         ddd (short day), dddd (full day).
+ */
+function formatDate(date, pattern) {
+    const d = new Date(date);
+    if (!isValidDate$1(d))
+        return '';
+    const year = d.getFullYear();
+    const month = d.getMonth();
+    const day = d.getDate();
+    const hours = d.getHours();
+    const mins = d.getMinutes();
+    const secs = d.getSeconds();
+    const dayOfWeek = d.getDay();
+    return pattern
+        .replace('YYYY', String(year))
+        .replace('YY', String(year).slice(-2))
+        .replace('MMMM', MONTH_NAMES_FULL[month])
+        .replace('MMM', MONTH_NAMES_SHORT[month])
+        .replace('MM', pad(month + 1))
+        .replace('M', String(month + 1))
+        .replace('dddd', DAY_NAMES_FULL[dayOfWeek])
+        .replace('ddd', DAY_NAMES_SHORT[dayOfWeek])
+        .replace('DD', pad(day))
+        .replace('D', String(day))
+        .replace('HH', pad(hours))
+        .replace('H', String(hours))
+        .replace('mm', pad(mins))
+        .replace('m', String(mins))
+        .replace('ss', pad(secs))
+        .replace('s', String(secs));
+}
+/** Returns date as `YYYY-MM-DD`. */
+function toDateOnly(date) {
+    return formatDate(date, 'YYYY-MM-DD');
+}
+/** Returns the ISO 8601 string for a date. */
+function toISOString(date) {
+    return date.toISOString();
+}
+/** Returns a new date with `days` added. */
+function addDays(date, days) {
+    const result = new Date(date);
+    result.setDate(result.getDate() + days);
+    return result;
+}
+/** Returns a new date with `months` added. */
+function addMonths(date, months) {
+    const result = new Date(date);
+    result.setMonth(result.getMonth() + months);
+    return result;
+}
+/** Returns a new date with `years` added. */
+function addYears(date, years) {
+    const result = new Date(date);
+    result.setFullYear(result.getFullYear() + years);
+    return result;
+}
+/** Returns a new date with `hours` added. */
+function addHours(date, hours) {
+    return new Date(date.getTime() + hours * 3_600_000);
+}
+/** Returns a new date with `minutes` added. */
+function addMinutes(date, minutes) {
+    return new Date(date.getTime() + minutes * 60_000);
+}
+/** Returns a new date with `days` subtracted. */
+function subtractDays(date, days) {
+    return addDays(date, -days);
+}
+/** Returns a new date with `months` subtracted. */
+function subtractMonths(date, months) {
+    return addMonths(date, -months);
+}
+/** Returns a new date with `years` subtracted. */
+function subtractYears(date, years) {
+    return addYears(date, -years);
+}
+/** Returns the absolute difference in whole days between two dates. */
+function diffInDays(date1, date2) {
+    return Math.abs(Math.floor((date1.getTime() - date2.getTime()) / 86_400_000));
+}
+/** Returns the absolute difference in whole months between two dates. */
+function diffInMonths(date1, date2) {
+    return Math.abs((date1.getFullYear() - date2.getFullYear()) * 12 +
+        (date1.getMonth() - date2.getMonth()));
+}
+/** Returns the absolute difference in whole years between two dates. */
+function diffInYears(date1, date2) {
+    return Math.abs(date1.getFullYear() - date2.getFullYear());
+}
+/** Returns the difference in minutes between two dates (date1 - date2). */
+function diffInMinutes(date1, date2) {
+    return Math.floor((date1.getTime() - date2.getTime()) / 60_000);
+}
+/** Returns true if date1 is strictly before date2. */
+function isBefore(date1, date2) {
+    return date1.getTime() < date2.getTime();
+}
+/** Returns true if date1 is strictly after date2. */
+function isAfter(date1, date2) {
+    return date1.getTime() > date2.getTime();
+}
+/** Returns true if both dates fall on the same calendar day. */
+function isSameDay(date1, date2) {
+    return (date1.getFullYear() === date2.getFullYear() &&
+        date1.getMonth() === date2.getMonth() &&
+        date1.getDate() === date2.getDate());
+}
+/** Returns true if the date falls on a Saturday or Sunday. */
+function isWeekend(date) {
+    return date.getDay() === 0 || date.getDay() === 6;
+}
+/** Returns true if the date is today. */
+function isToday(date) {
+    return isSameDay(date, new Date());
+}
+/** Returns true if the date falls in the past (before now). */
+function isPast(date) {
+    return date.getTime() < Date.now();
+}
+/** Returns true if the date falls in the future (after now). */
+function isFuture(date) {
+    return date.getTime() > Date.now();
+}
+/** Returns the date with time set to 00:00:00.000. */
+function startOfDay(date) {
+    const result = new Date(date);
+    result.setHours(0, 0, 0, 0);
+    return result;
+}
+/** Returns the date with time set to 23:59:59.999. */
+function endOfDay(date) {
+    const result = new Date(date);
+    result.setHours(23, 59, 59, 999);
+    return result;
+}
+/** Returns the first day of the month (time 00:00:00.000). */
+function startOfMonth(date) {
+    return new Date(date.getFullYear(), date.getMonth(), 1);
+}
+/** Returns the last day of the month (time 23:59:59.999). */
+function endOfMonth(date) {
+    const result = new Date(date.getFullYear(), date.getMonth() + 1, 0);
+    result.setHours(23, 59, 59, 999);
+    return result;
+}
+/** Returns the first day of the year (Jan 1, 00:00:00.000). */
+function startOfYear(date) {
+    return new Date(date.getFullYear(), 0, 1);
+}
+/** Returns the last day of the year (Dec 31, 23:59:59.999). */
+function endOfYear(date) {
+    const result = new Date(date.getFullYear(), 11, 31);
+    result.setHours(23, 59, 59, 999);
+    return result;
+}
+/** Calculates the age in years from a birth date. */
+function getAge(birthDate) {
+    const n = new Date();
+    let age = n.getFullYear() - birthDate.getFullYear();
+    const monthDiff = n.getMonth() - birthDate.getMonth();
+    if (monthDiff < 0 || (monthDiff === 0 && n.getDate() < birthDate.getDate()))
+        age--;
+    return age;
+}
+/** Returns the number of days in a given month (0-based month). */
+function daysInMonth(year, month) {
+    return new Date(year, month + 1, 0).getDate();
+}
+/** Returns true if the given year is a leap year. */
+function isLeapYear(year) {
+    return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
+}
+/**
+ * Returns a human-friendly relative time string.
+ * @example timeAgo(new Date(Date.now() - 3600_000)) → '1 hour ago'
+ */
+function timeAgo(date) {
+    const seconds = Math.floor((Date.now() - date.getTime()) / 1000);
+    const abs = Math.abs(seconds);
+    const future = seconds < 0;
+    const intervals = [
+        [31_536_000, 'year'],
+        [2_592_000, 'month'],
+        [604_800, 'week'],
+        [86_400, 'day'],
+        [3_600, 'hour'],
+        [60, 'minute'],
+        [1, 'second'],
+    ];
+    for (const [secs, label] of intervals) {
+        const count = Math.floor(abs / secs);
+        if (count >= 1) {
+            const unit = count === 1 ? label : `${label}s`;
+            return future ? `in ${count} ${unit}` : `${count} ${unit} ago`;
+        }
+    }
+    return 'just now';
+}
+/** Returns the ISO week number (1–53) for the given date. */
+function getWeekNumber(date) {
+    const d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
+    d.setUTCDate(d.getUTCDate() + 4 - (d.getUTCDay() || 7));
+    const yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
+    return Math.ceil((((d.getTime() - yearStart.getTime()) / 86_400_000) + 1) / 7);
+}
+/** Returns the next weekday (Mon–Fri) after the given date. */
+function nextWorkday(date) {
+    const result = addDays(date, 1);
+    while (isWeekend(result)) {
+        result.setDate(result.getDate() + 1);
+    }
+    return result;
+}
+/** Returns true if a date falls within the range [start, end] (inclusive). */
+function inRange$2(date, start, end) {
+    return date >= start && date <= end;
+}
+/** Parses a `YYYY-MM-DD` string and returns a local-midnight Date or null. */
+function parseDate(dateStr) {
+    const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(dateStr);
+    if (!match)
+        return null;
+    const [, y, mo, d] = match.map(Number);
+    const result = new Date(y, mo - 1, d);
+    return isValidDate$1(result) ? result : null;
+}
+
+var date_util = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    addDays: addDays,
+    addHours: addHours,
+    addMinutes: addMinutes,
+    addMonths: addMonths,
+    addYears: addYears,
+    daysInMonth: daysInMonth,
+    diffInDays: diffInDays,
+    diffInMinutes: diffInMinutes,
+    diffInMonths: diffInMonths,
+    diffInYears: diffInYears,
+    endOfDay: endOfDay,
+    endOfMonth: endOfMonth,
+    endOfYear: endOfYear,
+    formatDate: formatDate,
+    getAge: getAge,
+    getWeekNumber: getWeekNumber,
+    inRange: inRange$2,
+    isAfter: isAfter,
+    isBefore: isBefore,
+    isFuture: isFuture,
+    isLeapYear: isLeapYear,
+    isPast: isPast,
+    isSameDay: isSameDay,
+    isToday: isToday,
+    isValidDate: isValidDate$1,
+    isWeekend: isWeekend,
+    nextWorkday: nextWorkday,
+    now: now,
+    parseDate: parseDate,
+    startOfDay: startOfDay,
+    startOfMonth: startOfMonth,
+    startOfYear: startOfYear,
+    subtractDays: subtractDays,
+    subtractMonths: subtractMonths,
+    subtractYears: subtractYears,
+    timeAgo: timeAgo,
+    toDateOnly: toDateOnly,
+    toISOString: toISOString,
+    today: today
+});
+
+class OslDatetimepicker {
+    label = '';
+    required = false;
+    disabled = false;
+    dateModel = null;
+    set model(val) {
+        this.dateModel = this._parseToDate(val);
+    }
+    placeholder = '';
+    minDate = null;
+    maxDate = null;
+    set minDatetime(val) {
+        this.minDate = this._parseToDate(val);
+    }
+    set maxDatetime(val) {
+        this.maxDate = this._parseToDate(val);
+    }
+    /** Output format for the emitted string value. Uses date.util tokens: YYYY, MM, DD, HH, mm, ss */
+    format = 'YYYY-MM-DDTHH:mm';
+    showSeconds = false;
+    enableMeridian = false;
+    skeletonLoading = false;
+    skeletonTheme = 'light';
+    modelChange = new EventEmitter();
+    changeEv = new EventEmitter();
+    onDateChange(date) {
+        this.dateModel = date;
+        const str = date ? formatDate(date, this.format) : '';
+        this.modelChange.emit(str);
+        this.changeEv.emit(str);
+    }
+    _parseToDate(val) {
+        if (!val)
+            return null;
+        const d = new Date(val);
+        return isNaN(d.getTime()) ? null : d;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslDatetimepicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: OslDatetimepicker, isStandalone: false, selector: "osl-datetimepicker", inputs: { label: "label", required: "required", disabled: "disabled", model: "model", placeholder: "placeholder", minDatetime: "minDatetime", maxDatetime: "maxDatetime", format: "format", showSeconds: "showSeconds", enableMeridian: "enableMeridian", skeletonLoading: "skeletonLoading", skeletonTheme: "skeletonTheme" }, outputs: { modelChange: "modelChange", changeEv: "changeEv" }, ngImport: i0, template: "<div class=\"d-flex flex-column\">\n    @if (label) {\n        <div [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\">\n            <label class=\"label\" [class.txt-clr-red]=\"dtField.touched && dtField.invalid\">\n                {{label}} <span class=\"txt-clr-red\">{{required ? '*' : ''}}</span>\n            </label>\n        </div>\n    }\n    <div class=\"input-wrapper\" [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\">\n        <input\n            class=\"dt-input\"\n            [ngxMatDatetimePicker]=\"picker\"\n            [ngModel]=\"dateModel\"\n            (ngModelChange)=\"onDateChange($event)\"\n            [required]=\"required\"\n            [disabled]=\"disabled\"\n            [min]=\"minDate\"\n            [max]=\"maxDate\"\n            [placeholder]=\"placeholder\"\n            [class.error]=\"dtField.touched && dtField.invalid\"\n            #dtField=\"ngModel\"\n        />\n        <ngx-mat-datepicker-toggle\n            [for]=\"picker\"\n            [disabled]=\"disabled\"\n            class=\"dt-toggle\">\n        </ngx-mat-datepicker-toggle>\n        <ngx-mat-datetime-picker\n            #picker\n            [showSpinners]=\"true\"\n            [showSeconds]=\"showSeconds\"\n            [enableMeridian]=\"enableMeridian\">\n        </ngx-mat-datetime-picker>\n    </div>\n    @if (dtField.touched && dtField.invalid && required) {\n        <mat-hint class=\"hint\">{{label}} is Required!</mat-hint>\n    }\n</div>\n", styles: [".label{font-size:var(--osl-label-font-size);margin-bottom:5px}.txt-clr-red{color:var(--osl-error-color)}.hint{color:var(--osl-error-color);margin-top:2px;font-size:var(--osl-hint-font-size)}.input-wrapper{position:relative;display:flex;align-items:center}.dt-toggle{position:absolute;right:2px;top:50%;transform:translateY(-50%);display:flex;align-items:center}.dt-toggle ::ng-deep .mat-mdc-icon-button{width:32px;height:32px;padding:4px;color:#666}.dt-toggle ::ng-deep .mat-mdc-icon-button:hover:not([disabled]){color:var(--osl-focus-border-color)}.dt-toggle ::ng-deep .mat-mdc-icon-button[disabled]{opacity:.4;cursor:not-allowed}.dt-input{height:var(--osl-control-height);width:100%;border-radius:var(--osl-border-radius);outline:none;border:1px solid var(--osl-border-color);padding:0 38px 0 10px;font-size:var(--osl-text-font-size);font-family:inherit;color:#333;background-color:#fff;transition:border-color .2s,box-shadow .2s;letter-spacing:.01em;box-sizing:border-box}.dt-input::placeholder{color:#bbb}.dt-input:hover:not(:disabled){border-color:var(--osl-focus-border-color)}.dt-input:focus{border-color:var(--osl-focus-border-color);box-shadow:0 0 0 3px var(--osl-focus-shadow, rgba(99, 102, 241, .14))}.dt-input:disabled{background-color:#f5f5f5;cursor:not-allowed;opacity:.7}.dt-input.error{border-color:var(--osl-error-color)}.dt-input.error:focus{box-shadow:0 0 0 3px var(--osl-error-shadow, rgba(220, 38, 38, .14))}\n"], dependencies: [{ kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { 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: i4.NgxMatDatetimepicker, selector: "ngx-mat-datetime-picker", exportAs: ["ngxMatDatetimePicker"] }, { kind: "directive", type: i4.NgxMatDatepickerInput, selector: "input[ngxMatDatetimePicker]", inputs: ["ngxMatDatetimePicker", "min", "max", "matDatepickerFilter"], exportAs: ["ngxMatDatepickerInput"] }, { kind: "component", type: i4.NgxMatDatepickerToggle, selector: "ngx-mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["ngxMatDatepickerToggle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslDatetimepicker, decorators: [{
+            type: Component,
+            args: [{ selector: 'osl-datetimepicker', standalone: false, template: "<div class=\"d-flex flex-column\">\n    @if (label) {\n        <div [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\">\n            <label class=\"label\" [class.txt-clr-red]=\"dtField.touched && dtField.invalid\">\n                {{label}} <span class=\"txt-clr-red\">{{required ? '*' : ''}}</span>\n            </label>\n        </div>\n    }\n    <div class=\"input-wrapper\" [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\">\n        <input\n            class=\"dt-input\"\n            [ngxMatDatetimePicker]=\"picker\"\n            [ngModel]=\"dateModel\"\n            (ngModelChange)=\"onDateChange($event)\"\n            [required]=\"required\"\n            [disabled]=\"disabled\"\n            [min]=\"minDate\"\n            [max]=\"maxDate\"\n            [placeholder]=\"placeholder\"\n            [class.error]=\"dtField.touched && dtField.invalid\"\n            #dtField=\"ngModel\"\n        />\n        <ngx-mat-datepicker-toggle\n            [for]=\"picker\"\n            [disabled]=\"disabled\"\n            class=\"dt-toggle\">\n        </ngx-mat-datepicker-toggle>\n        <ngx-mat-datetime-picker\n            #picker\n            [showSpinners]=\"true\"\n            [showSeconds]=\"showSeconds\"\n            [enableMeridian]=\"enableMeridian\">\n        </ngx-mat-datetime-picker>\n    </div>\n    @if (dtField.touched && dtField.invalid && required) {\n        <mat-hint class=\"hint\">{{label}} is Required!</mat-hint>\n    }\n</div>\n", styles: [".label{font-size:var(--osl-label-font-size);margin-bottom:5px}.txt-clr-red{color:var(--osl-error-color)}.hint{color:var(--osl-error-color);margin-top:2px;font-size:var(--osl-hint-font-size)}.input-wrapper{position:relative;display:flex;align-items:center}.dt-toggle{position:absolute;right:2px;top:50%;transform:translateY(-50%);display:flex;align-items:center}.dt-toggle ::ng-deep .mat-mdc-icon-button{width:32px;height:32px;padding:4px;color:#666}.dt-toggle ::ng-deep .mat-mdc-icon-button:hover:not([disabled]){color:var(--osl-focus-border-color)}.dt-toggle ::ng-deep .mat-mdc-icon-button[disabled]{opacity:.4;cursor:not-allowed}.dt-input{height:var(--osl-control-height);width:100%;border-radius:var(--osl-border-radius);outline:none;border:1px solid var(--osl-border-color);padding:0 38px 0 10px;font-size:var(--osl-text-font-size);font-family:inherit;color:#333;background-color:#fff;transition:border-color .2s,box-shadow .2s;letter-spacing:.01em;box-sizing:border-box}.dt-input::placeholder{color:#bbb}.dt-input:hover:not(:disabled){border-color:var(--osl-focus-border-color)}.dt-input:focus{border-color:var(--osl-focus-border-color);box-shadow:0 0 0 3px var(--osl-focus-shadow, rgba(99, 102, 241, .14))}.dt-input:disabled{background-color:#f5f5f5;cursor:not-allowed;opacity:.7}.dt-input.error{border-color:var(--osl-error-color)}.dt-input.error:focus{box-shadow:0 0 0 3px var(--osl-error-shadow, rgba(220, 38, 38, .14))}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input,
+                args: ['label']
+            }], required: [{
+                type: Input,
+                args: ['required']
+            }], disabled: [{
+                type: Input,
+                args: ['disabled']
+            }], model: [{
+                type: Input,
+                args: ['model']
+            }], placeholder: [{
+                type: Input,
+                args: ['placeholder']
+            }], minDatetime: [{
+                type: Input,
+                args: ['minDatetime']
+            }], maxDatetime: [{
+                type: Input,
+                args: ['maxDatetime']
+            }], format: [{
+                type: Input,
+                args: ['format']
+            }], showSeconds: [{
+                type: Input,
+                args: ['showSeconds']
+            }], enableMeridian: [{
+                type: Input,
+                args: ['enableMeridian']
+            }], skeletonLoading: [{
+                type: Input,
+                args: ['skeletonLoading']
+            }], skeletonTheme: [{
+                type: Input,
+                args: ['skeletonTheme']
+            }], modelChange: [{
+                type: Output
+            }], changeEv: [{
+                type: Output
+            }] } });
+
+class OslCheckbox {
+    checkboxEl;
+    label = '';
+    disabled = false;
+    required = false;
+    model = false;
+    indeterminate = false;
+    skeletonLoading = false;
+    skeletonTheme = 'light';
+    modelChange = new EventEmitter();
+    changeEv = new EventEmitter();
+    touched = false;
+    get isInvalid() {
+        return this.touched && this.required && !this.model;
+    }
+    ngOnChanges(changes) {
+        if (changes['indeterminate'] && this.checkboxEl) {
+            this.checkboxEl.nativeElement.indeterminate = this.indeterminate;
+        }
+    }
+    ngAfterViewInit() {
+        if (this.checkboxEl) {
+            this.checkboxEl.nativeElement.indeterminate = this.indeterminate;
+        }
+    }
+    onModelChange(event) {
+        this.touched = true;
+        this.model = event;
+        this.modelChange.emit(this.model);
+        this.changeEv.emit(this.model);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: OslCheckbox, isStandalone: false, selector: "osl-checkbox", inputs: { label: "label", disabled: "disabled", required: "required", model: "model", indeterminate: "indeterminate", skeletonLoading: "skeletonLoading", skeletonTheme: "skeletonTheme" }, outputs: { modelChange: "modelChange", changeEv: "changeEv" }, viewQueries: [{ propertyName: "checkboxEl", first: true, predicate: ["checkboxEl"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"d-flex flex-column\">\r\n\r\n    <label class=\"checkbox-wrapper\"  [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\" [class.checkbox-disabled]=\"disabled\" [class.checkbox-invalid]=\"isInvalid\">\r\n        <input\r\n            #checkboxEl\r\n            type=\"checkbox\"\r\n            [ngModel]=\"model\"\r\n            (ngModelChange)=\"onModelChange($event)\"\r\n            [disabled]=\"disabled\"\r\n        >\r\n        <span class=\"checkbox-label\"  [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\">\r\n            {{label}} <span class=\"txt-clr-red\">{{required?'*':''}}</span>\r\n        </span>\r\n    </label>\r\n    @if(isInvalid) {\r\n        <mat-hint class=\"hint\">{{label}} is Required!</mat-hint>\r\n    }\r\n</div>\r\n", styles: [".checkbox-wrapper{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:var(--osl-label-font-size);width:fit-content}.checkbox-wrapper input[type=checkbox]{width:16px;height:16px;cursor:pointer;accent-color:#333;flex-shrink:0}.checkbox-wrapper .checkbox-label{-webkit-user-select:none;user-select:none}.checkbox-wrapper.checkbox-disabled{opacity:.6;cursor:not-allowed}.checkbox-wrapper.checkbox-disabled input[type=checkbox]{cursor:not-allowed}.checkbox-wrapper.checkbox-invalid{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: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { 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: OslCheckbox, decorators: [{
+            type: Component,
+            args: [{ selector: 'osl-checkbox', standalone: false, template: "<div class=\"d-flex flex-column\">\r\n\r\n    <label class=\"checkbox-wrapper\"  [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\" [class.checkbox-disabled]=\"disabled\" [class.checkbox-invalid]=\"isInvalid\">\r\n        <input\r\n            #checkboxEl\r\n            type=\"checkbox\"\r\n            [ngModel]=\"model\"\r\n            (ngModelChange)=\"onModelChange($event)\"\r\n            [disabled]=\"disabled\"\r\n        >\r\n        <span class=\"checkbox-label\"  [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\">\r\n            {{label}} <span class=\"txt-clr-red\">{{required?'*':''}}</span>\r\n        </span>\r\n    </label>\r\n    @if(isInvalid) {\r\n        <mat-hint class=\"hint\">{{label}} is Required!</mat-hint>\r\n    }\r\n</div>\r\n", styles: [".checkbox-wrapper{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:var(--osl-label-font-size);width:fit-content}.checkbox-wrapper input[type=checkbox]{width:16px;height:16px;cursor:pointer;accent-color:#333;flex-shrink:0}.checkbox-wrapper .checkbox-label{-webkit-user-select:none;user-select:none}.checkbox-wrapper.checkbox-disabled{opacity:.6;cursor:not-allowed}.checkbox-wrapper.checkbox-disabled input[type=checkbox]{cursor:not-allowed}.checkbox-wrapper.checkbox-invalid{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"] }]
+        }], propDecorators: { checkboxEl: [{
+                type: ViewChild,
+                args: ['checkboxEl']
+            }], label: [{
+                type: Input,
+                args: ['label']
+            }], disabled: [{
+                type: Input,
+                args: ['disabled']
+            }], required: [{
+                type: Input,
+                args: ['required']
+            }], model: [{
+                type: Input,
+                args: ['model']
+            }], indeterminate: [{
+                type: Input,
+                args: ['indeterminate']
+            }], skeletonLoading: [{
+                type: Input,
+                args: ['skeletonLoading']
+            }], skeletonTheme: [{
+                type: Input,
+                args: ['skeletonTheme']
+            }], modelChange: [{
+                type: Output
+            }], changeEv: [{
+                type: Output
+            }] } });
+
+class OslButton {
+    label = 'Button';
+    icon = '';
+    variant = 'primary';
+    size = 'md';
+    disabled = false;
+    loading = false;
+    type = 'button';
+    fullWidth = false;
+    clickEv = new EventEmitter();
+    get classes() {
+        return [
+            'osl-btn',
+            `osl-btn--${this.variant}`,
+            `osl-btn--${this.size}`,
+            this.fullWidth ? 'osl-btn--full' : '',
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }
+    onClick() {
+        if (!this.disabled && !this.loading) {
+            this.clickEv.emit();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: OslButton, isStandalone: false, selector: "osl-button", inputs: { label: "label", icon: "icon", variant: "variant", size: "size", disabled: "disabled", loading: "loading", type: "type", fullWidth: "fullWidth" }, outputs: { clickEv: "clickEv" }, ngImport: i0, template: "@if (variant == 'icon' && icon) {\r\n  <button class=\"icon-btn\" [type]=\"type\" [disabled]=\"disabled || loading\" (click)=\"onClick()\">\r\n    @if (loading) {\r\n      <span class=\"osl-btn__spinner\"></span>\r\n    } @else {\r\n      <mat-icon>{{ icon }}</mat-icon>\r\n    }\r\n  </button>\r\n} @else {\r\n  <button [class]=\"classes\" [type]=\"type\" [disabled]=\"disabled || loading\" (click)=\"onClick()\">\r\n    @if (loading) {\r\n      <span class=\"osl-btn__spinner\"></span>\r\n    }\r\n    <span class=\"osl-btn__label\">{{ label }}</span>\r\n    @if (icon) {\r\n      <span class=\"osl-btn__label-icon\"\r\n        ><mat-icon>{{ icon }}</mat-icon></span\r\n      >\r\n    }\r\n  </button>\r\n}\r\n", styles: ["@charset \"UTF-8\";.osl-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:var(--osl-border-radius);cursor:pointer;font-size:var(--osl-label-font-size);font-weight:500;line-height:1;transition:background-color .2s ease,border-color .2s ease,opacity .2s ease;white-space:nowrap;outline:none}.osl-btn--sm{height:28px;padding:0 var(--osl-hint-font-size);font-size:var(--osl-hint-font-size)}.osl-btn--sm mat-icon{font-size:var(--osl-hint-font-size)}.osl-btn--md{height:36px;padding:0 18px;font-size:var(--osl-label-font-size)}.osl-btn--lg{height:44px;padding:0 24px;font-size:16px}.osl-btn--full{width:100%}.osl-btn:disabled{opacity:var(--osl-disabled-opacity);cursor:not-allowed}.osl-btn--primary{background-color:var(--osl-primary);color:var(--osl-primary-text)}.osl-btn--primary:hover:not(:disabled){background-color:var(--osl-primary-hover)}.osl-btn--secondary{background-color:var(--osl-secondary);color:var(--osl-secondary-text)}.osl-btn--secondary:hover:not(:disabled){background-color:var(--osl-secondary-hover)}.osl-btn--success{background-color:var(--osl-success);color:var(--osl-success-text)}.osl-btn--success:hover:not(:disabled){background-color:var(--osl-success-hover)}.osl-btn--danger{background-color:var(--osl-danger);color:var(--osl-danger-text)}.osl-btn--danger:hover:not(:disabled){background-color:var(--osl-danger-hover)}.osl-btn--warning{background-color:var(--osl-warning);color:var(--osl-warning-text)}.osl-btn--warning:hover:not(:disabled){background-color:var(--osl-warning-hover)}.osl-btn--info{background-color:var(--osl-info);color:var(--osl-info-text)}.osl-btn--info:hover:not(:disabled){background-color:var(--osl-info-hover)}.osl-btn--outline-primary{background-color:transparent;border:1.5px solid var(--osl-primary);color:var(--osl-primary)}.osl-btn--outline-primary:hover:not(:disabled){background-color:var(--osl-primary);color:var(--osl-primary-text)}.osl-btn--outline-secondary{background-color:transparent;border:1.5px solid var(--osl-secondary);color:var(--osl-secondary)}.osl-btn--outline-secondary:hover:not(:disabled){background-color:var(--osl-secondary);color:var(--osl-secondary-text)}.osl-btn--outline-success{background-color:transparent;border:1.5px solid var(--osl-success);color:var(--osl-success)}.osl-btn--outline-success:hover:not(:disabled){background-color:var(--osl-success);color:var(--osl-success-text)}.osl-btn--outline-danger{background-color:transparent;border:1.5px solid var(--osl-danger);color:var(--osl-danger)}.osl-btn--outline-danger:hover:not(:disabled){background-color:var(--osl-danger);color:var(--osl-danger-text)}.osl-btn--outline-warning{background-color:transparent;border:1.5px solid var(--osl-warning);color:var(--osl-warning)}.osl-btn--outline-warning:hover:not(:disabled){background-color:var(--osl-warning);color:var(--osl-warning-text)}.osl-btn--outline-info{background-color:transparent;border:1.5px solid var(--osl-info);color:var(--osl-info)}.osl-btn--outline-info:hover:not(:disabled){background-color:var(--osl-info);color:var(--osl-info-text)}.osl-btn__spinner{display:inline-block;width:var(--osl-label-font-size);height:var(--osl-label-font-size);border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:osl-spin .7s linear infinite}@keyframes osl-spin{to{transform:rotate(360deg)}}.osl-btn__label-icon{color:var(--color-white)}.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}.icon-btn mat-icon{font-size:16px;width:16px;height:16px;line-height:16px}.icon-btn:hover{border-color:var(--osl-primary);color:var(--osl-primary);background:#6366f10f}.icon-btn--danger:hover{border-color:#ef4444;color:#ef4444;background:#ef44440f}\n"], dependencies: [{ kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslButton, decorators: [{
+            type: Component,
+            args: [{ selector: 'osl-button', standalone: false, template: "@if (variant == 'icon' && icon) {\r\n  <button class=\"icon-btn\" [type]=\"type\" [disabled]=\"disabled || loading\" (click)=\"onClick()\">\r\n    @if (loading) {\r\n      <span class=\"osl-btn__spinner\"></span>\r\n    } @else {\r\n      <mat-icon>{{ icon }}</mat-icon>\r\n    }\r\n  </button>\r\n} @else {\r\n  <button [class]=\"classes\" [type]=\"type\" [disabled]=\"disabled || loading\" (click)=\"onClick()\">\r\n    @if (loading) {\r\n      <span class=\"osl-btn__spinner\"></span>\r\n    }\r\n    <span class=\"osl-btn__label\">{{ label }}</span>\r\n    @if (icon) {\r\n      <span class=\"osl-btn__label-icon\"\r\n        ><mat-icon>{{ icon }}</mat-icon></span\r\n      >\r\n    }\r\n  </button>\r\n}\r\n", styles: ["@charset \"UTF-8\";.osl-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:var(--osl-border-radius);cursor:pointer;font-size:var(--osl-label-font-size);font-weight:500;line-height:1;transition:background-color .2s ease,border-color .2s ease,opacity .2s ease;white-space:nowrap;outline:none}.osl-btn--sm{height:28px;padding:0 var(--osl-hint-font-size);font-size:var(--osl-hint-font-size)}.osl-btn--sm mat-icon{font-size:var(--osl-hint-font-size)}.osl-btn--md{height:36px;padding:0 18px;font-size:var(--osl-label-font-size)}.osl-btn--lg{height:44px;padding:0 24px;font-size:16px}.osl-btn--full{width:100%}.osl-btn:disabled{opacity:var(--osl-disabled-opacity);cursor:not-allowed}.osl-btn--primary{background-color:var(--osl-primary);color:var(--osl-primary-text)}.osl-btn--primary:hover:not(:disabled){background-color:var(--osl-primary-hover)}.osl-btn--secondary{background-color:var(--osl-secondary);color:var(--osl-secondary-text)}.osl-btn--secondary:hover:not(:disabled){background-color:var(--osl-secondary-hover)}.osl-btn--success{background-color:var(--osl-success);color:var(--osl-success-text)}.osl-btn--success:hover:not(:disabled){background-color:var(--osl-success-hover)}.osl-btn--danger{background-color:var(--osl-danger);color:var(--osl-danger-text)}.osl-btn--danger:hover:not(:disabled){background-color:var(--osl-danger-hover)}.osl-btn--warning{background-color:var(--osl-warning);color:var(--osl-warning-text)}.osl-btn--warning:hover:not(:disabled){background-color:var(--osl-warning-hover)}.osl-btn--info{background-color:var(--osl-info);color:var(--osl-info-text)}.osl-btn--info:hover:not(:disabled){background-color:var(--osl-info-hover)}.osl-btn--outline-primary{background-color:transparent;border:1.5px solid var(--osl-primary);color:var(--osl-primary)}.osl-btn--outline-primary:hover:not(:disabled){background-color:var(--osl-primary);color:var(--osl-primary-text)}.osl-btn--outline-secondary{background-color:transparent;border:1.5px solid var(--osl-secondary);color:var(--osl-secondary)}.osl-btn--outline-secondary:hover:not(:disabled){background-color:var(--osl-secondary);color:var(--osl-secondary-text)}.osl-btn--outline-success{background-color:transparent;border:1.5px solid var(--osl-success);color:var(--osl-success)}.osl-btn--outline-success:hover:not(:disabled){background-color:var(--osl-success);color:var(--osl-success-text)}.osl-btn--outline-danger{background-color:transparent;border:1.5px solid var(--osl-danger);color:var(--osl-danger)}.osl-btn--outline-danger:hover:not(:disabled){background-color:var(--osl-danger);color:var(--osl-danger-text)}.osl-btn--outline-warning{background-color:transparent;border:1.5px solid var(--osl-warning);color:var(--osl-warning)}.osl-btn--outline-warning:hover:not(:disabled){background-color:var(--osl-warning);color:var(--osl-warning-text)}.osl-btn--outline-info{background-color:transparent;border:1.5px solid var(--osl-info);color:var(--osl-info)}.osl-btn--outline-info:hover:not(:disabled){background-color:var(--osl-info);color:var(--osl-info-text)}.osl-btn__spinner{display:inline-block;width:var(--osl-label-font-size);height:var(--osl-label-font-size);border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:osl-spin .7s linear infinite}@keyframes osl-spin{to{transform:rotate(360deg)}}.osl-btn__label-icon{color:var(--color-white)}.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}.icon-btn mat-icon{font-size:16px;width:16px;height:16px;line-height:16px}.icon-btn:hover{border-color:var(--osl-primary);color:var(--osl-primary);background:#6366f10f}.icon-btn--danger:hover{border-color:#ef4444;color:#ef4444;background:#ef44440f}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input,
+                args: ['label']
+            }], icon: [{
+                type: Input,
+                args: ['icon']
+            }], variant: [{
+                type: Input,
+                args: ['variant']
+            }], size: [{
+                type: Input,
+                args: ['size']
+            }], disabled: [{
+                type: Input,
+                args: ['disabled']
+            }], loading: [{
+                type: Input,
+                args: ['loading']
+            }], type: [{
+                type: Input,
+                args: ['type']
+            }], fullWidth: [{
+                type: Input,
+                args: ['fullWidth']
+            }], clickEv: [{
+                type: Output
+            }] } });
+
+class DynamicForm {
+    cdr;
+    elements = [];
+    _model;
+    set model(val) {
+        this._model = val;
+    }
+    get model() {
+        return this._model;
+    }
+    skeletonLoading = false;
+    skeletonTheme = 'light';
+    modelChange = new EventEmitter();
+    datasourceCache = inject(DatasourceCacheService);
+    constructor(cdr) {
+        this.cdr = cdr;
+    }
+    ngOnInit() {
+        this.loadApiDatasources();
+    }
+    ngOnChanges(changes) {
+        if (changes['elements']) {
+            this.loadApiDatasources();
+        }
+    }
+    loadApiDatasources() {
+        this._loadForList(this.elements);
+    }
+    async _loadForList(list) {
+        for (const elem of list) {
+            if (elem.elementType === 'fieldset' && elem.rows?.length) {
+                this._loadForList(elem.rows);
+            }
+            else if (elem.apiService && elem.apiMethod && (!elem.searchType || elem.searchType == 'Local')) {
+                elem.loadingIf = () => true;
+                const data = await this.datasourceCache.load(elem.apiService, elem.apiMethod, elem.apiBody ? elem.apiBody(this.model) : null);
+                elem.loadingIf = () => false;
+                this.cdr.markForCheck();
+                if (data && data.length > 0) {
+                    elem.datasource = data;
+                }
+            }
+        }
+    }
+    onModelChange(event, key) {
+        this.model[key] = event;
+        this.modelChange.emit(this.model);
+    }
+    onSelectChange(elem, value) {
+        if (!elem.change)
+            return;
+        let selectedObj = undefined;
+        if (elem.datasource) {
+            if (Array.isArray(value)) {
+                selectedObj = value.map(v => elem.datasource.find(item => (elem.valueField ? item[elem.valueField] : item) === v) ?? null);
+            }
+            else if (value !== null && value !== undefined) {
+                selectedObj = elem.datasource.find(item => (elem.valueField ? item[elem.valueField] : item) === (isNaN(Number(value)) ? value : Number(value))) ?? null;
+            }
+            else {
+                selectedObj = null;
+            }
         }
         elem.change(this.model, undefined, selectedObj);
     }
     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) {\r\n    <div class=\"row align-items-center w-100\">\r\n        @for(elem of elements; track elem) {\r\n            @if(!(elem.hideIf ? elem.hideIf(model) : elem.hide)) {\r\n                <ng-container *ngTemplateOutlet=\"formField; context: { $implicit: elem }\"></ng-container>\r\n            }\r\n        }\r\n    </div>\r\n}\r\n\r\n<ng-template #formField let-elem>\r\n    @if(elem.hideIf ? !elem.hideIf(model) : true) {\r\n        @switch (elem.elementType) {\r\n\r\n            @case (\"textbox\") {\r\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\r\n                    <osl-input\r\n                    [skeletonLoading]=\"skeletonLoading\"\r\n                    [skeletonTheme]=\"skeletonTheme\"\r\n                        [label]=\"elem.label\"\r\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\r\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\r\n                        [type]=\"elem.inputType || 'text'\"\r\n                        [placeholder]=\"elem.placeholder || ''\"\r\n                        [mask]=\"elem.mask || ''\"\r\n                        [min]=\"elem.min ?? ''\"\r\n                        [max]=\"elem.max ?? ''\"\r\n                        [minLength]=\"elem.minLength ?? null\"\r\n                        [maxLength]=\"elem.maxLength ?? null\"\r\n                        [prefixIcon]=\"elem.prefixIcon || ''\"\r\n                        [suffixIcon]=\"elem.suffixIcon || ''\"\r\n                        [onlyChars]=\"!!elem.onlyChars\"\r\n                        [decimalPortion]=\"elem.decimalPortion ?? null\"\r\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\r\n                        [(model)]=\"model[elem.key]\"\r\n                          [isCapitalize]=\"elem.isCapitalize\"\r\n                    ></osl-input>\r\n                </div>\r\n            }\r\n\r\n            @case (\"textarea\") {\r\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\r\n                    <osl-textarea\r\n                        [label]=\"elem.label\"\r\n                    [skeletonLoading]=\"skeletonLoading\"\r\n                    [skeletonTheme]=\"skeletonTheme\"\r\n\r\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\r\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\r\n                        [rows]=\"elem.textareaRows || 3\"\r\n                        [placeholder]=\"elem.placeholder || ''\"\r\n                        [maxLength]=\"elem.maxLength ?? null\"\r\n                        [minLength]=\"elem.minLength ?? null\"\r\n                        [characterCounter]=\"!!elem.characterCounter\"\r\n                        [resize]=\"elem.resize || 'none'\"\r\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\r\n                        [(model)]=\"model[elem.key]\"\r\n                    ></osl-textarea>\r\n                </div>\r\n            }\r\n\r\n            @case (\"select\") {\r\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\r\n                    <osl-select\r\n                        [label]=\"elem.label\"\r\n                    [skeletonLoading]=\"skeletonLoading\"\r\n                    [skeletonTheme]=\"skeletonTheme\"\r\n\r\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\r\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\r\n                        [datasource]=\"elem.datasource || []\"\r\n                        [displayField]=\"elem.displayField || ''\"\r\n                        [valueField]=\"elem.valueField || ''\"\r\n                        [placeholder]=\"elem.selectPlaceholder || 'Select...'\"\r\n                        [loading]=\"elem.loadingIf ? elem.loadingIf(model) : false\"\r\n                        [clearable]=\"!!elem.clearable\"\r\n                        (changeEv)=\"elem.change ? onSelectChange(elem, $event) : null\"\r\n                        [(model)]=\"model[elem.key]\"\r\n                    ></osl-select>\r\n                </div>\r\n            }\r\n\r\n            @case (\"radio\") {\r\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\r\n                    <osl-radio\r\n                        [label]=\"elem.label\"\r\n                    [skeletonLoading]=\"skeletonLoading\"\r\n                    [skeletonTheme]=\"skeletonTheme\"\r\n\r\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\r\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\r\n                        [datasource]=\"elem.datasource || []\"\r\n                        [displayField]=\"elem.displayField || ''\"\r\n                        [valueField]=\"elem.valueField || ''\"\r\n                        [inline]=\"!!elem.inline\"\r\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\r\n                        [(model)]=\"model[elem.key]\"\r\n                    ></osl-radio>\r\n                </div>\r\n            }\r\n\r\n            @case (\"slide-toggle\") {\r\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\r\n                    <osl-slide-toggle\r\n                        [label]=\"elem.label\"\r\n                    [skeletonLoading]=\"skeletonLoading\"\r\n                    [skeletonTheme]=\"skeletonTheme\"\r\n\r\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\r\n                        [labelPosition]=\"elem.labelPosition || 'after'\"\r\n                        [trueLabel]=\"elem.trueLabel || ''\"\r\n                        [falseLabel]=\"elem.falseLabel || ''\"\r\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\r\n                        [(model)]=\"model[elem.key]\"\r\n                    ></osl-slide-toggle>\r\n                </div>\r\n            }\r\n\r\n            @case (\"autocomplete\") {\r\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\r\n                    <osl-autocomplete\r\n                        [label]=\"elem.label\"\r\n                    [skeletonLoading]=\"skeletonLoading\"\r\n                    [skeletonTheme]=\"skeletonTheme\"\r\n\r\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\r\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\r\n                        [(datasource)]=\"elem.datasource\"\r\n                        [displayField]=\"elem.displayField || ''\"\r\n                        [valueField]=\"elem.valueField || ''\"\r\n                        [placeholder]=\"elem.autocompletePlaceholder || 'Type to search...'\"\r\n                        [loading]=\"elem.loadingIf ? elem.loadingIf(model) : false\"\r\n                        (changeEv)=\"elem.change ? onSelectChange(elem, $event) : null\"\r\n                        [(model)]=\"model[elem.key]\"\r\n                        [methodName]=\"elem.apiMethod\"\r\n                        [service]=\"elem.apiService\"\r\n                        [object]=\"model[elem.objectName]\"\r\n                        [searchType]=\"elem.searchType\"\r\n                        [configMethodName]=\"elem.apiConfigMethod\"\r\n                        [isLister]=\"elem.isListerAutocomplete\"\r\n                        \r\n                        \r\n                    ></osl-autocomplete>\r\n                </div>\r\n            }\r\n\r\n            @case (\"file-uploader\") {\r\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\r\n                    <osl-file-upload\r\n                    [skeletonLoading]=\"skeletonLoading\"\r\n                    [skeletonTheme]=\"skeletonTheme\"\r\n\r\n                        [label]=\"elem.label\"\r\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\r\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\r\n                        [accept]=\"elem.accept || ''\"\r\n                        [multiple]=\"!!elem.multiple\"\r\n                        [maxSize]=\"elem.maxFileSize || 0\"\r\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\r\n                        [(model)]=\"model[elem.key]\"\r\n                    ></osl-file-upload>\r\n                </div>\r\n            }\r\n\r\n            @case (\"datepicker\") {\r\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\r\n                    <osl-datepicker\r\n                    [skeletonLoading]=\"skeletonLoading\"\r\n                    [skeletonTheme]=\"skeletonTheme\"\r\n\r\n                        [label]=\"elem.label\"\r\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\r\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\r\n                        [dateType]=\"elem.dateType || 'date'\"\r\n                        [placeholder]=\"elem.placeholder || ''\"\r\n                        [minDate]=\"elem.minDateIf ? elem.minDateIf(model): elem.minDate ? elem.minDate : ''\"\r\n                        [maxDate]=\"elem.maxDateIf ? elem.maxDateIf(model): elem.maxDate ? elem.maxDate : ''\"\r\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\r\n                        [(model)]=\"model[elem.key]\"\r\n                    ></osl-datepicker>\r\n                </div>\r\n            }\r\n\r\n            @case (\"datetimepicker\") {\r\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\r\n                    <osl-datetimepicker\r\n                        [skeletonLoading]=\"skeletonLoading\"\r\n                        [skeletonTheme]=\"skeletonTheme\"\r\n                        [label]=\"elem.label\"\r\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\r\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\r\n                        [placeholder]=\"elem.placeholder || ''\"\r\n                        [minDatetime]=\"elem.minDatetimeIf ? elem.minDatetimeIf(model) : elem.minDatetime || ''\"\r\n                        [maxDatetime]=\"elem.maxDatetimeIf ? elem.maxDatetimeIf(model) : elem.maxDatetime || ''\"\r\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\r\n                        [(model)]=\"model[elem.key]\"\r\n                    ></osl-datetimepicker>\r\n                </div>\r\n            }\r\n\r\n            @case (\"checkbox\") {\r\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\r\n                    <osl-checkbox\r\n                    [skeletonLoading]=\"skeletonLoading\"\r\n                    [skeletonTheme]=\"skeletonTheme\"\r\n\r\n                        [label]=\"elem.label\"\r\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\r\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\r\n                        [indeterminate]=\"!!elem.indeterminate\"\r\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\r\n                        [(model)]=\"model[elem.key]\"\r\n                    ></osl-checkbox>\r\n                </div>\r\n            }\r\n\r\n            @case (\"button\") {\r\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\r\n                    <osl-button\r\n                    \r\n                        [label]=\"elem.label\"\r\n                        [loading]=\"elem.loadingIf ? elem.loadingIf(model) : false\"\r\n                        variant=\"secondary\"\r\n                        (clickEv)=\"elem.change ? elem.change(model) : null\"\r\n                    ></osl-button>\r\n                </div>\r\n            }\r\n\r\n            @case (\"fieldset\") {\r\n                <div [class]=\"'col-md-'+elem.columns+' mt-3'\">\r\n                    <fieldset class=\"osl-fieldset\">\r\n                        @if(elem.label) {\r\n                            <legend class=\"osl-fieldset-legend\" [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\">\r\n                                <span class=\"osl-fieldset-legend__text\">{{ elem.label }}</span>\r\n                            </legend>\r\n                        }\r\n                        <div class=\"row w-100 osl-fieldset-body\">\r\n                            @for(innerElem of elem.rows; track innerElem) {\r\n                                @if(!(innerElem.hideIf ? innerElem.hideIf(model) : innerElem.hide)) {\r\n                                    <ng-container *ngTemplateOutlet=\"formField; context: { $implicit: innerElem }\"></ng-container>\r\n                                }\r\n                            }\r\n                        </div>\r\n                    </fieldset>\r\n                </div>\r\n            }\r\n\r\n            @case (\"templateRef\"){\r\n                 <div [class]=\"'col-md-'+elem.columns+' mt-3'\">\r\n                        <ng-container *ngTemplateOutlet=\"elem.templateRef; context: { $implicit: elem}\"></ng-container>\r\n\r\n                \r\n                </div>\r\n            }\r\n                @case (\"spacer\"){\r\n                 <div [class]=\"'col-md-'+elem.columns+' mt-3'\">\r\n                        <!-- <ng-container *ngTemplateOutlet=\"elem.templateRef; context: { $implicit: elem}\"></ng-container> -->\r\n\r\n                \r\n                </div>\r\n            }\r\n\r\n        }\r\n    }\r\n</ng-template>\r\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"], 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", "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) {\r\n    <div class=\"row align-items-center w-100\">\r\n        @for(elem of elements; track elem) {\r\n            @if(!(elem.hideIf ? elem.hideIf(model) : elem.hide)) {\r\n                <ng-container *ngTemplateOutlet=\"formField; context: { $implicit: elem }\"></ng-container>\r\n            }\r\n        }\r\n    </div>\r\n}\r\n\r\n<ng-template #formField let-elem>\r\n    @if(elem.hideIf ? !elem.hideIf(model) : true) {\r\n        @switch (elem.elementType) {\r\n\r\n            @case (\"textbox\") {\r\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\r\n                    <osl-input\r\n                    [skeletonLoading]=\"skeletonLoading\"\r\n                    [skeletonTheme]=\"skeletonTheme\"\r\n                        [label]=\"elem.label\"\r\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\r\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\r\n                        [type]=\"elem.inputType || 'text'\"\r\n                        [placeholder]=\"elem.placeholder || ''\"\r\n                        [mask]=\"elem.mask || ''\"\r\n                        [min]=\"elem.min ?? ''\"\r\n                        [max]=\"elem.max ?? ''\"\r\n                        [minLength]=\"elem.minLength ?? null\"\r\n                        [maxLength]=\"elem.maxLength ?? null\"\r\n                        [prefixIcon]=\"elem.prefixIcon || ''\"\r\n                        [suffixIcon]=\"elem.suffixIcon || ''\"\r\n                        [onlyChars]=\"!!elem.onlyChars\"\r\n                        [decimalPortion]=\"elem.decimalPortion ?? null\"\r\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\r\n                        [(model)]=\"model[elem.key]\"\r\n                          [isCapitalize]=\"elem.isCapitalize\"\r\n                    ></osl-input>\r\n                </div>\r\n            }\r\n\r\n            @case (\"textarea\") {\r\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\r\n                    <osl-textarea\r\n                        [label]=\"elem.label\"\r\n                    [skeletonLoading]=\"skeletonLoading\"\r\n                    [skeletonTheme]=\"skeletonTheme\"\r\n\r\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\r\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\r\n                        [rows]=\"elem.textareaRows || 3\"\r\n                        [placeholder]=\"elem.placeholder || ''\"\r\n                        [maxLength]=\"elem.maxLength ?? null\"\r\n                        [minLength]=\"elem.minLength ?? null\"\r\n                        [characterCounter]=\"!!elem.characterCounter\"\r\n                        [resize]=\"elem.resize || 'none'\"\r\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\r\n                        [(model)]=\"model[elem.key]\"\r\n                    ></osl-textarea>\r\n                </div>\r\n            }\r\n\r\n            @case (\"select\") {\r\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\r\n                    <osl-select\r\n                        [label]=\"elem.label\"\r\n                    [skeletonLoading]=\"skeletonLoading\"\r\n                    [skeletonTheme]=\"skeletonTheme\"\r\n\r\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\r\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\r\n                        [datasource]=\"elem.datasource || []\"\r\n                        [displayField]=\"elem.displayField || ''\"\r\n                        [valueField]=\"elem.valueField || ''\"\r\n                        [placeholder]=\"elem.selectPlaceholder || 'Select...'\"\r\n                        [loading]=\"elem.loadingIf ? elem.loadingIf(model) : false\"\r\n                        [clearable]=\"!!elem.clearable\"\r\n                        (changeEv)=\"elem.change ? onSelectChange(elem, $event) : null\"\r\n                        [(model)]=\"model[elem.key]\"\r\n                    ></osl-select>\r\n                </div>\r\n            }\r\n\r\n            @case (\"radio\") {\r\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\r\n                    <osl-radio\r\n                        [label]=\"elem.label\"\r\n                    [skeletonLoading]=\"skeletonLoading\"\r\n                    [skeletonTheme]=\"skeletonTheme\"\r\n\r\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\r\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\r\n                        [datasource]=\"elem.datasource || []\"\r\n                        [displayField]=\"elem.displayField || ''\"\r\n                        [valueField]=\"elem.valueField || ''\"\r\n                        [inline]=\"!!elem.inline\"\r\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\r\n                        [(model)]=\"model[elem.key]\"\r\n                    ></osl-radio>\r\n                </div>\r\n            }\r\n\r\n            @case (\"slide-toggle\") {\r\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\r\n                    <osl-slide-toggle\r\n                        [label]=\"elem.label\"\r\n                    [skeletonLoading]=\"skeletonLoading\"\r\n                    [skeletonTheme]=\"skeletonTheme\"\r\n\r\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\r\n                        [labelPosition]=\"elem.labelPosition || 'after'\"\r\n                        [trueLabel]=\"elem.trueLabel || ''\"\r\n                        [falseLabel]=\"elem.falseLabel || ''\"\r\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\r\n                        [(model)]=\"model[elem.key]\"\r\n                    ></osl-slide-toggle>\r\n                </div>\r\n            }\r\n\r\n            @case (\"autocomplete\") {\r\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\r\n                    <osl-autocomplete\r\n                        [label]=\"elem.label\"\r\n                    [skeletonLoading]=\"skeletonLoading\"\r\n                    [skeletonTheme]=\"skeletonTheme\"\r\n\r\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\r\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\r\n                        [(datasource)]=\"elem.datasource\"\r\n                        [displayField]=\"elem.displayField || ''\"\r\n                        [valueField]=\"elem.valueField || ''\"\r\n                        [placeholder]=\"elem.autocompletePlaceholder || 'Type to search...'\"\r\n                        [loading]=\"elem.loadingIf ? elem.loadingIf(model) : false\"\r\n                        (changeEv)=\"elem.change ? onSelectChange(elem, $event) : null\"\r\n                        [(model)]=\"model[elem.key]\"\r\n                        [methodName]=\"elem.apiMethod\"\r\n                        [service]=\"elem.apiService\"\r\n                        [object]=\"model[elem.objectName]\"\r\n                        [searchType]=\"elem.searchType\"\r\n                        [configMethodName]=\"elem.apiConfigMethod\"\r\n                        [isLister]=\"elem.isListerAutocomplete\"\r\n                        \r\n                        \r\n                    ></osl-autocomplete>\r\n                </div>\r\n            }\r\n\r\n            @case (\"file-uploader\") {\r\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\r\n                    <osl-file-upload\r\n                    [skeletonLoading]=\"skeletonLoading\"\r\n                    [skeletonTheme]=\"skeletonTheme\"\r\n\r\n                        [label]=\"elem.label\"\r\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\r\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\r\n                        [accept]=\"elem.accept || ''\"\r\n                        [multiple]=\"!!elem.multiple\"\r\n                        [maxSize]=\"elem.maxFileSize || 0\"\r\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\r\n                        [(model)]=\"model[elem.key]\"\r\n                    ></osl-file-upload>\r\n                </div>\r\n            }\r\n\r\n            @case (\"datepicker\") {\r\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\r\n                    <osl-datepicker\r\n                    [skeletonLoading]=\"skeletonLoading\"\r\n                    [skeletonTheme]=\"skeletonTheme\"\r\n\r\n                        [label]=\"elem.label\"\r\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\r\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\r\n                        [dateType]=\"elem.dateType || 'date'\"\r\n                        [placeholder]=\"elem.placeholder || ''\"\r\n                        [minDate]=\"elem.minDateIf ? elem.minDateIf(model): elem.minDate ? elem.minDate : ''\"\r\n                        [maxDate]=\"elem.maxDateIf ? elem.maxDateIf(model): elem.maxDate ? elem.maxDate : ''\"\r\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\r\n                        [(model)]=\"model[elem.key]\"\r\n                    ></osl-datepicker>\r\n                </div>\r\n            }\r\n\r\n            @case (\"datetimepicker\") {\r\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\r\n                    <osl-datetimepicker\r\n                        [skeletonLoading]=\"skeletonLoading\"\r\n                        [skeletonTheme]=\"skeletonTheme\"\r\n                        [label]=\"elem.label\"\r\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\r\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\r\n                        [placeholder]=\"elem.placeholder || ''\"\r\n                        [minDatetime]=\"elem.minDatetimeIf ? elem.minDatetimeIf(model) : elem.minDatetime || ''\"\r\n                        [maxDatetime]=\"elem.maxDatetimeIf ? elem.maxDatetimeIf(model) : elem.maxDatetime || ''\"\r\n                        [format]=\"elem.datetimepickerFormat || 'YYYY-MM-DDTHH:mm'\"\r\n                        [showSeconds]=\"!!elem.datetimepickerShowSeconds\"\r\n                        [enableMeridian]=\"!!elem.datetimepickerEnableMeridian\"\r\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\r\n                        [(model)]=\"model[elem.key]\"\r\n                    ></osl-datetimepicker>\r\n                </div>\r\n            }\r\n\r\n            @case (\"checkbox\") {\r\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\r\n                    <osl-checkbox\r\n                    [skeletonLoading]=\"skeletonLoading\"\r\n                    [skeletonTheme]=\"skeletonTheme\"\r\n\r\n                        [label]=\"elem.label\"\r\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\r\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\r\n                        [indeterminate]=\"!!elem.indeterminate\"\r\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\r\n                        [(model)]=\"model[elem.key]\"\r\n                    ></osl-checkbox>\r\n                </div>\r\n            }\r\n\r\n            @case (\"button\") {\r\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\r\n                    <osl-button\r\n                    \r\n                        [label]=\"elem.label\"\r\n                        [loading]=\"elem.loadingIf ? elem.loadingIf(model) : false\"\r\n                        variant=\"secondary\"\r\n                        (clickEv)=\"elem.change ? elem.change(model) : null\"\r\n                    ></osl-button>\r\n                </div>\r\n            }\r\n\r\n            @case (\"fieldset\") {\r\n                <div [class]=\"'col-md-'+elem.columns+' mt-3'\">\r\n                    <fieldset class=\"osl-fieldset\">\r\n                        @if(elem.label) {\r\n                            <legend class=\"osl-fieldset-legend\" [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\">\r\n                                <span class=\"osl-fieldset-legend__text\">{{ elem.label }}</span>\r\n                            </legend>\r\n                        }\r\n                        <div class=\"row w-100 osl-fieldset-body\">\r\n                            @for(innerElem of elem.rows; track innerElem) {\r\n                                @if(!(innerElem.hideIf ? innerElem.hideIf(model) : innerElem.hide)) {\r\n                                    <ng-container *ngTemplateOutlet=\"formField; context: { $implicit: innerElem }\"></ng-container>\r\n                                }\r\n                            }\r\n                        </div>\r\n                    </fieldset>\r\n                </div>\r\n            }\r\n\r\n            @case (\"templateRef\"){\r\n                 <div [class]=\"'col-md-'+elem.columns+' mt-3'\">\r\n                        <ng-container *ngTemplateOutlet=\"elem.templateRef; context: { $implicit: elem}\"></ng-container>\r\n\r\n                \r\n                </div>\r\n            }\r\n                @case (\"spacer\"){\r\n                 <div [class]=\"'col-md-'+elem.columns+' mt-3'\">\r\n                        <!-- <ng-container *ngTemplateOutlet=\"elem.templateRef; context: { $implicit: elem}\"></ng-container> -->\r\n\r\n                \r\n                </div>\r\n            }\r\n\r\n        }\r\n    }\r\n</ng-template>\r\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"], 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", "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) {\r\n    <div class=\"row align-items-center w-100\">\r\n        @for(elem of elements; track elem) {\r\n            @if(!(elem.hideIf ? elem.hideIf(model) : elem.hide)) {\r\n                <ng-container *ngTemplateOutlet=\"formField; context: { $implicit: elem }\"></ng-container>\r\n            }\r\n        }\r\n    </div>\r\n}\r\n\r\n<ng-template #formField let-elem>\r\n    @if(elem.hideIf ? !elem.hideIf(model) : true) {\r\n        @switch (elem.elementType) {\r\n\r\n            @case (\"textbox\") {\r\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\r\n                    <osl-input\r\n                    [skeletonLoading]=\"skeletonLoading\"\r\n                    [skeletonTheme]=\"skeletonTheme\"\r\n                        [label]=\"elem.label\"\r\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\r\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\r\n                        [type]=\"elem.inputType || 'text'\"\r\n                        [placeholder]=\"elem.placeholder || ''\"\r\n                        [mask]=\"elem.mask || ''\"\r\n                        [min]=\"elem.min ?? ''\"\r\n                        [max]=\"elem.max ?? ''\"\r\n                        [minLength]=\"elem.minLength ?? null\"\r\n                        [maxLength]=\"elem.maxLength ?? null\"\r\n                        [prefixIcon]=\"elem.prefixIcon || ''\"\r\n                        [suffixIcon]=\"elem.suffixIcon || ''\"\r\n                        [onlyChars]=\"!!elem.onlyChars\"\r\n                        [decimalPortion]=\"elem.decimalPortion ?? null\"\r\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\r\n                        [(model)]=\"model[elem.key]\"\r\n                          [isCapitalize]=\"elem.isCapitalize\"\r\n                    ></osl-input>\r\n                </div>\r\n            }\r\n\r\n            @case (\"textarea\") {\r\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\r\n                    <osl-textarea\r\n                        [label]=\"elem.label\"\r\n                    [skeletonLoading]=\"skeletonLoading\"\r\n                    [skeletonTheme]=\"skeletonTheme\"\r\n\r\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\r\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\r\n                        [rows]=\"elem.textareaRows || 3\"\r\n                        [placeholder]=\"elem.placeholder || ''\"\r\n                        [maxLength]=\"elem.maxLength ?? null\"\r\n                        [minLength]=\"elem.minLength ?? null\"\r\n                        [characterCounter]=\"!!elem.characterCounter\"\r\n                        [resize]=\"elem.resize || 'none'\"\r\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\r\n                        [(model)]=\"model[elem.key]\"\r\n                    ></osl-textarea>\r\n                </div>\r\n            }\r\n\r\n            @case (\"select\") {\r\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\r\n                    <osl-select\r\n                        [label]=\"elem.label\"\r\n                    [skeletonLoading]=\"skeletonLoading\"\r\n                    [skeletonTheme]=\"skeletonTheme\"\r\n\r\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\r\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\r\n                        [datasource]=\"elem.datasource || []\"\r\n                        [displayField]=\"elem.displayField || ''\"\r\n                        [valueField]=\"elem.valueField || ''\"\r\n                        [placeholder]=\"elem.selectPlaceholder || 'Select...'\"\r\n                        [loading]=\"elem.loadingIf ? elem.loadingIf(model) : false\"\r\n                        [clearable]=\"!!elem.clearable\"\r\n                        (changeEv)=\"elem.change ? onSelectChange(elem, $event) : null\"\r\n                        [(model)]=\"model[elem.key]\"\r\n                    ></osl-select>\r\n                </div>\r\n            }\r\n\r\n            @case (\"radio\") {\r\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\r\n                    <osl-radio\r\n                        [label]=\"elem.label\"\r\n                    [skeletonLoading]=\"skeletonLoading\"\r\n                    [skeletonTheme]=\"skeletonTheme\"\r\n\r\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\r\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\r\n                        [datasource]=\"elem.datasource || []\"\r\n                        [displayField]=\"elem.displayField || ''\"\r\n                        [valueField]=\"elem.valueField || ''\"\r\n                        [inline]=\"!!elem.inline\"\r\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\r\n                        [(model)]=\"model[elem.key]\"\r\n                    ></osl-radio>\r\n                </div>\r\n            }\r\n\r\n            @case (\"slide-toggle\") {\r\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\r\n                    <osl-slide-toggle\r\n                        [label]=\"elem.label\"\r\n                    [skeletonLoading]=\"skeletonLoading\"\r\n                    [skeletonTheme]=\"skeletonTheme\"\r\n\r\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\r\n                        [labelPosition]=\"elem.labelPosition || 'after'\"\r\n                        [trueLabel]=\"elem.trueLabel || ''\"\r\n                        [falseLabel]=\"elem.falseLabel || ''\"\r\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\r\n                        [(model)]=\"model[elem.key]\"\r\n                    ></osl-slide-toggle>\r\n                </div>\r\n            }\r\n\r\n            @case (\"autocomplete\") {\r\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\r\n                    <osl-autocomplete\r\n                        [label]=\"elem.label\"\r\n                    [skeletonLoading]=\"skeletonLoading\"\r\n                    [skeletonTheme]=\"skeletonTheme\"\r\n\r\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\r\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\r\n                        [(datasource)]=\"elem.datasource\"\r\n                        [displayField]=\"elem.displayField || ''\"\r\n                        [valueField]=\"elem.valueField || ''\"\r\n                        [placeholder]=\"elem.autocompletePlaceholder || 'Type to search...'\"\r\n                        [loading]=\"elem.loadingIf ? elem.loadingIf(model) : false\"\r\n                        (changeEv)=\"elem.change ? onSelectChange(elem, $event) : null\"\r\n                        [(model)]=\"model[elem.key]\"\r\n                        [methodName]=\"elem.apiMethod\"\r\n                        [service]=\"elem.apiService\"\r\n                        [object]=\"model[elem.objectName]\"\r\n                        [searchType]=\"elem.searchType\"\r\n                        [configMethodName]=\"elem.apiConfigMethod\"\r\n                        [isLister]=\"elem.isListerAutocomplete\"\r\n                        \r\n                        \r\n                    ></osl-autocomplete>\r\n                </div>\r\n            }\r\n\r\n            @case (\"file-uploader\") {\r\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\r\n                    <osl-file-upload\r\n                    [skeletonLoading]=\"skeletonLoading\"\r\n                    [skeletonTheme]=\"skeletonTheme\"\r\n\r\n                        [label]=\"elem.label\"\r\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\r\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\r\n                        [accept]=\"elem.accept || ''\"\r\n                        [multiple]=\"!!elem.multiple\"\r\n                        [maxSize]=\"elem.maxFileSize || 0\"\r\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\r\n                        [(model)]=\"model[elem.key]\"\r\n                    ></osl-file-upload>\r\n                </div>\r\n            }\r\n\r\n            @case (\"datepicker\") {\r\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\r\n                    <osl-datepicker\r\n                    [skeletonLoading]=\"skeletonLoading\"\r\n                    [skeletonTheme]=\"skeletonTheme\"\r\n\r\n                        [label]=\"elem.label\"\r\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\r\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\r\n                        [dateType]=\"elem.dateType || 'date'\"\r\n                        [placeholder]=\"elem.placeholder || ''\"\r\n                        [minDate]=\"elem.minDateIf ? elem.minDateIf(model): elem.minDate ? elem.minDate : ''\"\r\n                        [maxDate]=\"elem.maxDateIf ? elem.maxDateIf(model): elem.maxDate ? elem.maxDate : ''\"\r\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\r\n                        [(model)]=\"model[elem.key]\"\r\n                    ></osl-datepicker>\r\n                </div>\r\n            }\r\n\r\n            @case (\"datetimepicker\") {\r\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\r\n                    <osl-datetimepicker\r\n                        [skeletonLoading]=\"skeletonLoading\"\r\n                        [skeletonTheme]=\"skeletonTheme\"\r\n                        [label]=\"elem.label\"\r\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\r\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\r\n                        [placeholder]=\"elem.placeholder || ''\"\r\n                        [minDatetime]=\"elem.minDatetimeIf ? elem.minDatetimeIf(model) : elem.minDatetime || ''\"\r\n                        [maxDatetime]=\"elem.maxDatetimeIf ? elem.maxDatetimeIf(model) : elem.maxDatetime || ''\"\r\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\r\n                        [(model)]=\"model[elem.key]\"\r\n                    ></osl-datetimepicker>\r\n                </div>\r\n            }\r\n\r\n            @case (\"checkbox\") {\r\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\r\n                    <osl-checkbox\r\n                    [skeletonLoading]=\"skeletonLoading\"\r\n                    [skeletonTheme]=\"skeletonTheme\"\r\n\r\n                        [label]=\"elem.label\"\r\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\r\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\r\n                        [indeterminate]=\"!!elem.indeterminate\"\r\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\r\n                        [(model)]=\"model[elem.key]\"\r\n                    ></osl-checkbox>\r\n                </div>\r\n            }\r\n\r\n            @case (\"button\") {\r\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\r\n                    <osl-button\r\n                    \r\n                        [label]=\"elem.label\"\r\n                        [loading]=\"elem.loadingIf ? elem.loadingIf(model) : false\"\r\n                        variant=\"secondary\"\r\n                        (clickEv)=\"elem.change ? elem.change(model) : null\"\r\n                    ></osl-button>\r\n                </div>\r\n            }\r\n\r\n            @case (\"fieldset\") {\r\n                <div [class]=\"'col-md-'+elem.columns+' mt-3'\">\r\n                    <fieldset class=\"osl-fieldset\">\r\n                        @if(elem.label) {\r\n                            <legend class=\"osl-fieldset-legend\" [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\">\r\n                                <span class=\"osl-fieldset-legend__text\">{{ elem.label }}</span>\r\n                            </legend>\r\n                        }\r\n                        <div class=\"row w-100 osl-fieldset-body\">\r\n                            @for(innerElem of elem.rows; track innerElem) {\r\n                                @if(!(innerElem.hideIf ? innerElem.hideIf(model) : innerElem.hide)) {\r\n                                    <ng-container *ngTemplateOutlet=\"formField; context: { $implicit: innerElem }\"></ng-container>\r\n                                }\r\n                            }\r\n                        </div>\r\n                    </fieldset>\r\n                </div>\r\n            }\r\n\r\n            @case (\"templateRef\"){\r\n                 <div [class]=\"'col-md-'+elem.columns+' mt-3'\">\r\n                        <ng-container *ngTemplateOutlet=\"elem.templateRef; context: { $implicit: elem}\"></ng-container>\r\n\r\n                \r\n                </div>\r\n            }\r\n                @case (\"spacer\"){\r\n                 <div [class]=\"'col-md-'+elem.columns+' mt-3'\">\r\n                        <!-- <ng-container *ngTemplateOutlet=\"elem.templateRef; context: { $implicit: elem}\"></ng-container> -->\r\n\r\n                \r\n                </div>\r\n            }\r\n\r\n        }\r\n    }\r\n</ng-template>\r\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) {\r\n    <div class=\"row align-items-center w-100\">\r\n        @for(elem of elements; track elem) {\r\n            @if(!(elem.hideIf ? elem.hideIf(model) : elem.hide)) {\r\n                <ng-container *ngTemplateOutlet=\"formField; context: { $implicit: elem }\"></ng-container>\r\n            }\r\n        }\r\n    </div>\r\n}\r\n\r\n<ng-template #formField let-elem>\r\n    @if(elem.hideIf ? !elem.hideIf(model) : true) {\r\n        @switch (elem.elementType) {\r\n\r\n            @case (\"textbox\") {\r\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\r\n                    <osl-input\r\n                    [skeletonLoading]=\"skeletonLoading\"\r\n                    [skeletonTheme]=\"skeletonTheme\"\r\n                        [label]=\"elem.label\"\r\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\r\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\r\n                        [type]=\"elem.inputType || 'text'\"\r\n                        [placeholder]=\"elem.placeholder || ''\"\r\n                        [mask]=\"elem.mask || ''\"\r\n                        [min]=\"elem.min ?? ''\"\r\n                        [max]=\"elem.max ?? ''\"\r\n                        [minLength]=\"elem.minLength ?? null\"\r\n                        [maxLength]=\"elem.maxLength ?? null\"\r\n                        [prefixIcon]=\"elem.prefixIcon || ''\"\r\n                        [suffixIcon]=\"elem.suffixIcon || ''\"\r\n                        [onlyChars]=\"!!elem.onlyChars\"\r\n                        [decimalPortion]=\"elem.decimalPortion ?? null\"\r\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\r\n                        [(model)]=\"model[elem.key]\"\r\n                          [isCapitalize]=\"elem.isCapitalize\"\r\n                    ></osl-input>\r\n                </div>\r\n            }\r\n\r\n            @case (\"textarea\") {\r\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\r\n                    <osl-textarea\r\n                        [label]=\"elem.label\"\r\n                    [skeletonLoading]=\"skeletonLoading\"\r\n                    [skeletonTheme]=\"skeletonTheme\"\r\n\r\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\r\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\r\n                        [rows]=\"elem.textareaRows || 3\"\r\n                        [placeholder]=\"elem.placeholder || ''\"\r\n                        [maxLength]=\"elem.maxLength ?? null\"\r\n                        [minLength]=\"elem.minLength ?? null\"\r\n                        [characterCounter]=\"!!elem.characterCounter\"\r\n                        [resize]=\"elem.resize || 'none'\"\r\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\r\n                        [(model)]=\"model[elem.key]\"\r\n                    ></osl-textarea>\r\n                </div>\r\n            }\r\n\r\n            @case (\"select\") {\r\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\r\n                    <osl-select\r\n                        [label]=\"elem.label\"\r\n                    [skeletonLoading]=\"skeletonLoading\"\r\n                    [skeletonTheme]=\"skeletonTheme\"\r\n\r\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\r\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\r\n                        [datasource]=\"elem.datasource || []\"\r\n                        [displayField]=\"elem.displayField || ''\"\r\n                        [valueField]=\"elem.valueField || ''\"\r\n                        [placeholder]=\"elem.selectPlaceholder || 'Select...'\"\r\n                        [loading]=\"elem.loadingIf ? elem.loadingIf(model) : false\"\r\n                        [clearable]=\"!!elem.clearable\"\r\n                        (changeEv)=\"elem.change ? onSelectChange(elem, $event) : null\"\r\n                        [(model)]=\"model[elem.key]\"\r\n                    ></osl-select>\r\n                </div>\r\n            }\r\n\r\n            @case (\"radio\") {\r\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\r\n                    <osl-radio\r\n                        [label]=\"elem.label\"\r\n                    [skeletonLoading]=\"skeletonLoading\"\r\n                    [skeletonTheme]=\"skeletonTheme\"\r\n\r\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\r\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\r\n                        [datasource]=\"elem.datasource || []\"\r\n                        [displayField]=\"elem.displayField || ''\"\r\n                        [valueField]=\"elem.valueField || ''\"\r\n                        [inline]=\"!!elem.inline\"\r\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\r\n                        [(model)]=\"model[elem.key]\"\r\n                    ></osl-radio>\r\n                </div>\r\n            }\r\n\r\n            @case (\"slide-toggle\") {\r\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\r\n                    <osl-slide-toggle\r\n                        [label]=\"elem.label\"\r\n                    [skeletonLoading]=\"skeletonLoading\"\r\n                    [skeletonTheme]=\"skeletonTheme\"\r\n\r\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\r\n                        [labelPosition]=\"elem.labelPosition || 'after'\"\r\n                        [trueLabel]=\"elem.trueLabel || ''\"\r\n                        [falseLabel]=\"elem.falseLabel || ''\"\r\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\r\n                        [(model)]=\"model[elem.key]\"\r\n                    ></osl-slide-toggle>\r\n                </div>\r\n            }\r\n\r\n            @case (\"autocomplete\") {\r\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\r\n                    <osl-autocomplete\r\n                        [label]=\"elem.label\"\r\n                    [skeletonLoading]=\"skeletonLoading\"\r\n                    [skeletonTheme]=\"skeletonTheme\"\r\n\r\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\r\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\r\n                        [(datasource)]=\"elem.datasource\"\r\n                        [displayField]=\"elem.displayField || ''\"\r\n                        [valueField]=\"elem.valueField || ''\"\r\n                        [placeholder]=\"elem.autocompletePlaceholder || 'Type to search...'\"\r\n                        [loading]=\"elem.loadingIf ? elem.loadingIf(model) : false\"\r\n                        (changeEv)=\"elem.change ? onSelectChange(elem, $event) : null\"\r\n                        [(model)]=\"model[elem.key]\"\r\n                        [methodName]=\"elem.apiMethod\"\r\n                        [service]=\"elem.apiService\"\r\n                        [object]=\"model[elem.objectName]\"\r\n                        [searchType]=\"elem.searchType\"\r\n                        [configMethodName]=\"elem.apiConfigMethod\"\r\n                        [isLister]=\"elem.isListerAutocomplete\"\r\n                        \r\n                        \r\n                    ></osl-autocomplete>\r\n                </div>\r\n            }\r\n\r\n            @case (\"file-uploader\") {\r\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\r\n                    <osl-file-upload\r\n                    [skeletonLoading]=\"skeletonLoading\"\r\n                    [skeletonTheme]=\"skeletonTheme\"\r\n\r\n                        [label]=\"elem.label\"\r\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\r\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\r\n                        [accept]=\"elem.accept || ''\"\r\n                        [multiple]=\"!!elem.multiple\"\r\n                        [maxSize]=\"elem.maxFileSize || 0\"\r\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\r\n                        [(model)]=\"model[elem.key]\"\r\n                    ></osl-file-upload>\r\n                </div>\r\n            }\r\n\r\n            @case (\"datepicker\") {\r\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\r\n                    <osl-datepicker\r\n                    [skeletonLoading]=\"skeletonLoading\"\r\n                    [skeletonTheme]=\"skeletonTheme\"\r\n\r\n                        [label]=\"elem.label\"\r\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\r\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\r\n                        [dateType]=\"elem.dateType || 'date'\"\r\n                        [placeholder]=\"elem.placeholder || ''\"\r\n                        [minDate]=\"elem.minDateIf ? elem.minDateIf(model): elem.minDate ? elem.minDate : ''\"\r\n                        [maxDate]=\"elem.maxDateIf ? elem.maxDateIf(model): elem.maxDate ? elem.maxDate : ''\"\r\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\r\n                        [(model)]=\"model[elem.key]\"\r\n                    ></osl-datepicker>\r\n                </div>\r\n            }\r\n\r\n            @case (\"datetimepicker\") {\r\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\r\n                    <osl-datetimepicker\r\n                        [skeletonLoading]=\"skeletonLoading\"\r\n                        [skeletonTheme]=\"skeletonTheme\"\r\n                        [label]=\"elem.label\"\r\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\r\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\r\n                        [placeholder]=\"elem.placeholder || ''\"\r\n                        [minDatetime]=\"elem.minDatetimeIf ? elem.minDatetimeIf(model) : elem.minDatetime || ''\"\r\n                        [maxDatetime]=\"elem.maxDatetimeIf ? elem.maxDatetimeIf(model) : elem.maxDatetime || ''\"\r\n                        [format]=\"elem.datetimepickerFormat || 'YYYY-MM-DDTHH:mm'\"\r\n                        [showSeconds]=\"!!elem.datetimepickerShowSeconds\"\r\n                        [enableMeridian]=\"!!elem.datetimepickerEnableMeridian\"\r\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\r\n                        [(model)]=\"model[elem.key]\"\r\n                    ></osl-datetimepicker>\r\n                </div>\r\n            }\r\n\r\n            @case (\"checkbox\") {\r\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\r\n                    <osl-checkbox\r\n                    [skeletonLoading]=\"skeletonLoading\"\r\n                    [skeletonTheme]=\"skeletonTheme\"\r\n\r\n                        [label]=\"elem.label\"\r\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\r\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\r\n                        [indeterminate]=\"!!elem.indeterminate\"\r\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\r\n                        [(model)]=\"model[elem.key]\"\r\n                    ></osl-checkbox>\r\n                </div>\r\n            }\r\n\r\n            @case (\"button\") {\r\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\r\n                    <osl-button\r\n                    \r\n                        [label]=\"elem.label\"\r\n                        [loading]=\"elem.loadingIf ? elem.loadingIf(model) : false\"\r\n                        variant=\"secondary\"\r\n                        (clickEv)=\"elem.change ? elem.change(model) : null\"\r\n                    ></osl-button>\r\n                </div>\r\n            }\r\n\r\n            @case (\"fieldset\") {\r\n                <div [class]=\"'col-md-'+elem.columns+' mt-3'\">\r\n                    <fieldset class=\"osl-fieldset\">\r\n                        @if(elem.label) {\r\n                            <legend class=\"osl-fieldset-legend\" [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\">\r\n                                <span class=\"osl-fieldset-legend__text\">{{ elem.label }}</span>\r\n                            </legend>\r\n                        }\r\n                        <div class=\"row w-100 osl-fieldset-body\">\r\n                            @for(innerElem of elem.rows; track innerElem) {\r\n                                @if(!(innerElem.hideIf ? innerElem.hideIf(model) : innerElem.hide)) {\r\n                                    <ng-container *ngTemplateOutlet=\"formField; context: { $implicit: innerElem }\"></ng-container>\r\n                                }\r\n                            }\r\n                        </div>\r\n                    </fieldset>\r\n                </div>\r\n            }\r\n\r\n            @case (\"templateRef\"){\r\n                 <div [class]=\"'col-md-'+elem.columns+' mt-3'\">\r\n                        <ng-container *ngTemplateOutlet=\"elem.templateRef; context: { $implicit: elem}\"></ng-container>\r\n\r\n                \r\n                </div>\r\n            }\r\n                @case (\"spacer\"){\r\n                 <div [class]=\"'col-md-'+elem.columns+' mt-3'\">\r\n                        <!-- <ng-container *ngTemplateOutlet=\"elem.templateRef; context: { $implicit: elem}\"></ng-container> -->\r\n\r\n                \r\n                </div>\r\n            }\r\n\r\n        }\r\n    }\r\n</ng-template>\r\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']
@@ -3401,11 +3715,11 @@ 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                            [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"], 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", "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"], 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", "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,
-            args: [{ selector: 'osl-form-grid', standalone: false, 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                            [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"] }]
+            args: [{ selector: 'osl-form-grid', standalone: false, 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"] }]
         }], propDecorators: { columns: [{
                 type: Input,
                 args: ['columns']
@@ -4753,7 +5067,10 @@ class FormStructureModule {
             MatDatepickerModule,
             MatMenuModule,
             ScrollingModule,
-            DragDropModule], exports: [DynamicForm, OslSetup, OslGrid, OslFormGrid, Oslinput,
+            DragDropModule,
+            NgxMatDatetimepicker,
+            NgxMatDatepickerInput,
+            NgxMatDatepickerToggle], exports: [DynamicForm, OslSetup, OslGrid, OslFormGrid, Oslinput,
             Osltextarea,
             OslSelect,
             OslRadio,
@@ -4768,6 +5085,19 @@ class FormStructureModule {
             OslSearchbar, OslAutocompleteLister, OslReportGrid, OslReportForm] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FormStructureModule, providers: [
             { provide: AUTOCOMPLETE_LISTER_COMPONENT, useValue: OslAutocompleteLister },
+            { provide: DateAdapter, useClass: NativeDateAdapter },
+            {
+                provide: MAT_DATE_FORMATS,
+                useValue: {
+                    parse: { dateInput: null },
+                    display: {
+                        dateInput: { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' },
+                        monthYearLabel: { year: 'numeric', month: 'short' },
+                        dateA11yLabel: { year: 'numeric', month: 'long', day: 'numeric' },
+                        monthYearA11yLabel: { year: 'numeric', month: 'long' },
+                    },
+                },
+            },
         ], imports: [FormsModule,
             ReactiveFormsModule,
             MatFormFieldModule,
@@ -4779,7 +5109,9 @@ class FormStructureModule {
             MatDatepickerModule,
             MatMenuModule,
             ScrollingModule,
-            DragDropModule] });
+            DragDropModule,
+            NgxMatDatetimepicker,
+            NgxMatDatepickerToggle] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FormStructureModule, decorators: [{
             type: NgModule,
@@ -4825,6 +5157,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         MatMenuModule,
                         ScrollingModule,
                         DragDropModule,
+                        NgxMatDatetimepicker,
+                        NgxMatDatepickerInput,
+                        NgxMatDatepickerToggle,
                     ],
                     exports: [DynamicForm, OslSetup, OslGrid, OslFormGrid, Oslinput,
                         Osltextarea,
@@ -4841,516 +5176,234 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         OslSearchbar, OslAutocompleteLister, OslReportGrid, OslReportForm],
                     providers: [
                         { provide: AUTOCOMPLETE_LISTER_COMPONENT, useValue: OslAutocompleteLister },
+                        { provide: DateAdapter, useClass: NativeDateAdapter },
+                        {
+                            provide: MAT_DATE_FORMATS,
+                            useValue: {
+                                parse: { dateInput: null },
+                                display: {
+                                    dateInput: { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' },
+                                    monthYearLabel: { year: 'numeric', month: 'short' },
+                                    dateA11yLabel: { year: 'numeric', month: 'long', day: 'numeric' },
+                                    monthYearA11yLabel: { year: 'numeric', month: 'long' },
+                                },
+                            },
+                        },
                     ],
                 }]
         }] });
-
-// ─── Array Utilities ────────────────────────────────────────────────────────
-/** Splits an array into chunks of the given size. */
-function chunk(array, size) {
-    if (size <= 0)
-        return [];
-    const result = [];
-    for (let i = 0; i < array.length; i += size) {
-        result.push(array.slice(i, i + size));
-    }
-    return result;
-}
-/** Removes duplicate primitive values. */
-function unique(array) {
-    return [...new Set(array)];
-}
-/** Removes duplicates by object key. */
-function uniqueBy(array, key) {
-    const seen = new Set();
-    return array.filter(item => {
-        const val = item[key];
-        if (seen.has(val))
-            return false;
-        seen.add(val);
-        return true;
-    });
-}
-/** Flattens one level of nesting. */
-function flatten(array) {
-    return array.flat();
-}
-/** Deeply flattens a nested array. */
-function flattenDeep(array) {
-    return array.reduce((acc, val) => Array.isArray(val) ? acc.concat(flattenDeep(val)) : [...acc, val], []);
-}
-/** Groups array elements by a key. */
-function groupBy(array, key) {
-    return array.reduce((acc, item) => {
-        const group = String(item[key]);
-        acc[group] = acc[group] ?? [];
-        acc[group].push(item);
-        return acc;
-    }, {});
-}
-/** Sorts array by key ascending or descending. */
-function sortBy(array, key, direction = 'asc') {
-    return [...array].sort((a, b) => {
-        const aVal = a[key];
-        const bVal = b[key];
-        if (aVal < bVal)
-            return direction === 'asc' ? -1 : 1;
-        if (aVal > bVal)
-            return direction === 'asc' ? 1 : -1;
-        return 0;
-    });
-}
-/** Filters array where key matches value (strict equality). */
-function filterBy(array, key, value) {
-    return array.filter(item => item[key] === value);
-}
-/** Sums values at the given numeric key. */
-function sumBy(array, key) {
-    return array.reduce((acc, item) => acc + Number(item[key]), 0);
-}
-/** Returns the item with the minimum value at key. */
-function minBy(array, key) {
-    if (!array.length)
-        return undefined;
-    return array.reduce((min, item) => (item[key] < min[key] ? item : min));
-}
-/** Returns the item with the maximum value at key. */
-function maxBy(array, key) {
-    if (!array.length)
-        return undefined;
-    return array.reduce((max, item) => (item[key] > max[key] ? item : max));
-}
-/** Computes the average of an array of numbers. */
-function average$1(numbers) {
-    if (!numbers.length)
-        return 0;
-    return numbers.reduce((a, b) => a + b, 0) / numbers.length;
-}
-/** Returns true if the array is null, undefined, or has no elements. */
-function isEmpty$2(array) {
-    return !array || array.length === 0;
-}
-/** Returns the last element. */
-function last(array) {
-    return array[array.length - 1];
-}
-/** Returns the first element. */
-function first(array) {
-    return array[0];
-}
-/** Returns a slice of the array for the given page (1-based). */
-function paginate(array, page, pageSize) {
-    const start = (page - 1) * pageSize;
-    return array.slice(start, start + pageSize);
-}
-/** Moves an element from one index to another (immutable). */
-function move(array, fromIndex, toIndex) {
-    const result = [...array];
-    const [item] = result.splice(fromIndex, 1);
-    result.splice(toIndex, 0, item);
-    return result;
-}
-/** Adds the item if absent, removes it if present. */
-function toggle(array, item) {
-    return array.includes(item) ? array.filter(i => i !== item) : [...array, item];
-}
-/** Returns elements present in both arrays. */
-function intersection(a, b) {
-    const setB = new Set(b);
-    return a.filter(item => setB.has(item));
-}
-/** Returns elements in `a` not present in `b`. */
-function difference(a, b) {
-    const setB = new Set(b);
-    return a.filter(item => !setB.has(item));
-}
-/** Converts an array to a lookup map keyed by the given property. */
-function toMap(array, key) {
-    return array.reduce((acc, item) => {
-        acc[String(item[key])] = item;
-        return acc;
-    }, {});
-}
-/** Removes falsy values (null, undefined, 0, '', false). */
-function compact(array) {
-    return array.filter(Boolean);
-}
-/** Returns a new randomly shuffled copy. */
-function shuffle(array) {
-    const result = [...array];
-    for (let i = result.length - 1; i > 0; i--) {
-        const j = Math.floor(Math.random() * (i + 1));
-        [result[i], result[j]] = [result[j], result[i]];
+
+// ─── Array Utilities ────────────────────────────────────────────────────────
+/** Splits an array into chunks of the given size. */
+function chunk(array, size) {
+    if (size <= 0)
+        return [];
+    const result = [];
+    for (let i = 0; i < array.length; i += size) {
+        result.push(array.slice(i, i + size));
     }
     return result;
 }
-function sample(array, count) {
-    if (count === undefined)
-        return array[Math.floor(Math.random() * array.length)];
-    return shuffle(array).slice(0, count);
+/** Removes duplicate primitive values. */
+function unique(array) {
+    return [...new Set(array)];
 }
-/** Counts occurrences of each value at the given key. */
-function countBy(array, key) {
+/** Removes duplicates by object key. */
+function uniqueBy(array, key) {
+    const seen = new Set();
+    return array.filter(item => {
+        const val = item[key];
+        if (seen.has(val))
+            return false;
+        seen.add(val);
+        return true;
+    });
+}
+/** Flattens one level of nesting. */
+function flatten(array) {
+    return array.flat();
+}
+/** Deeply flattens a nested array. */
+function flattenDeep(array) {
+    return array.reduce((acc, val) => Array.isArray(val) ? acc.concat(flattenDeep(val)) : [...acc, val], []);
+}
+/** Groups array elements by a key. */
+function groupBy(array, key) {
     return array.reduce((acc, item) => {
         const group = String(item[key]);
-        acc[group] = (acc[group] ?? 0) + 1;
+        acc[group] = acc[group] ?? [];
+        acc[group].push(item);
         return acc;
     }, {});
 }
-/** Returns the union of two arrays (unique values from both). */
-function union(a, b) {
-    return unique([...a, ...b]);
-}
-/** Zips multiple arrays into an array of tuples. */
-function zip(...arrays) {
-    const length = Math.max(...arrays.map(a => a.length));
-    return Array.from({ length }, (_, i) => arrays.map(a => a[i]));
-}
-/** Returns true if predicate holds for all elements. */
-function every(array, predicate) {
-    return array.every(predicate);
-}
-/** Returns true if predicate holds for at least one element. */
-function some(array, predicate) {
-    return array.some(predicate);
-}
-/** Partitions an array into two groups based on predicate. */
-function partition(array, predicate) {
-    const pass = [];
-    const fail = [];
-    for (const item of array) {
-        (predicate(item) ? pass : fail).push(item);
-    }
-    return [pass, fail];
-}
-
-var array_util = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    average: average$1,
-    chunk: chunk,
-    compact: compact,
-    countBy: countBy,
-    difference: difference,
-    every: every,
-    filterBy: filterBy,
-    first: first,
-    flatten: flatten,
-    flattenDeep: flattenDeep,
-    groupBy: groupBy,
-    intersection: intersection,
-    isEmpty: isEmpty$2,
-    last: last,
-    maxBy: maxBy,
-    minBy: minBy,
-    move: move,
-    paginate: paginate,
-    partition: partition,
-    sample: sample,
-    shuffle: shuffle,
-    some: some,
-    sortBy: sortBy,
-    sumBy: sumBy,
-    toMap: toMap,
-    toggle: toggle,
-    union: union,
-    unique: unique,
-    uniqueBy: uniqueBy,
-    zip: zip
-});
-
-// ─── Date Utilities ───────────────────────────────────────────────────────────
-const MONTH_NAMES_SHORT = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
-const MONTH_NAMES_FULL = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
-const DAY_NAMES_SHORT = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
-const DAY_NAMES_FULL = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
-function pad(n) {
-    return String(n).padStart(2, '0');
-}
-/** Returns the current date and time. */
-function now() {
-    return new Date();
-}
-/** Returns today's date with time set to midnight. */
-function today() {
-    return startOfDay(new Date());
-}
-/** Returns true if the value is a valid Date object. */
-function isValidDate$1(value) {
-    return value instanceof Date && !isNaN(value.getTime());
-}
-/**
- * Formats a Date using a pattern string.
- * Tokens: YYYY, YY, MM, M, DD, D, HH, H, mm, m, ss, s,
- *         MMM (short month), MMMM (full month),
- *         ddd (short day), dddd (full day).
- */
-function formatDate(date, pattern) {
-    const d = new Date(date);
-    if (!isValidDate$1(d))
-        return '';
-    const year = d.getFullYear();
-    const month = d.getMonth();
-    const day = d.getDate();
-    const hours = d.getHours();
-    const mins = d.getMinutes();
-    const secs = d.getSeconds();
-    const dayOfWeek = d.getDay();
-    return pattern
-        .replace('YYYY', String(year))
-        .replace('YY', String(year).slice(-2))
-        .replace('MMMM', MONTH_NAMES_FULL[month])
-        .replace('MMM', MONTH_NAMES_SHORT[month])
-        .replace('MM', pad(month + 1))
-        .replace('M', String(month + 1))
-        .replace('dddd', DAY_NAMES_FULL[dayOfWeek])
-        .replace('ddd', DAY_NAMES_SHORT[dayOfWeek])
-        .replace('DD', pad(day))
-        .replace('D', String(day))
-        .replace('HH', pad(hours))
-        .replace('H', String(hours))
-        .replace('mm', pad(mins))
-        .replace('m', String(mins))
-        .replace('ss', pad(secs))
-        .replace('s', String(secs));
-}
-/** Returns date as `YYYY-MM-DD`. */
-function toDateOnly(date) {
-    return formatDate(date, 'YYYY-MM-DD');
-}
-/** Returns the ISO 8601 string for a date. */
-function toISOString(date) {
-    return date.toISOString();
-}
-/** Returns a new date with `days` added. */
-function addDays(date, days) {
-    const result = new Date(date);
-    result.setDate(result.getDate() + days);
-    return result;
-}
-/** Returns a new date with `months` added. */
-function addMonths(date, months) {
-    const result = new Date(date);
-    result.setMonth(result.getMonth() + months);
-    return result;
-}
-/** Returns a new date with `years` added. */
-function addYears(date, years) {
-    const result = new Date(date);
-    result.setFullYear(result.getFullYear() + years);
-    return result;
-}
-/** Returns a new date with `hours` added. */
-function addHours(date, hours) {
-    return new Date(date.getTime() + hours * 3_600_000);
-}
-/** Returns a new date with `minutes` added. */
-function addMinutes(date, minutes) {
-    return new Date(date.getTime() + minutes * 60_000);
-}
-/** Returns a new date with `days` subtracted. */
-function subtractDays(date, days) {
-    return addDays(date, -days);
-}
-/** Returns a new date with `months` subtracted. */
-function subtractMonths(date, months) {
-    return addMonths(date, -months);
-}
-/** Returns a new date with `years` subtracted. */
-function subtractYears(date, years) {
-    return addYears(date, -years);
-}
-/** Returns the absolute difference in whole days between two dates. */
-function diffInDays(date1, date2) {
-    return Math.abs(Math.floor((date1.getTime() - date2.getTime()) / 86_400_000));
-}
-/** Returns the absolute difference in whole months between two dates. */
-function diffInMonths(date1, date2) {
-    return Math.abs((date1.getFullYear() - date2.getFullYear()) * 12 +
-        (date1.getMonth() - date2.getMonth()));
-}
-/** Returns the absolute difference in whole years between two dates. */
-function diffInYears(date1, date2) {
-    return Math.abs(date1.getFullYear() - date2.getFullYear());
+/** Sorts array by key ascending or descending. */
+function sortBy(array, key, direction = 'asc') {
+    return [...array].sort((a, b) => {
+        const aVal = a[key];
+        const bVal = b[key];
+        if (aVal < bVal)
+            return direction === 'asc' ? -1 : 1;
+        if (aVal > bVal)
+            return direction === 'asc' ? 1 : -1;
+        return 0;
+    });
 }
-/** Returns the difference in minutes between two dates (date1 - date2). */
-function diffInMinutes(date1, date2) {
-    return Math.floor((date1.getTime() - date2.getTime()) / 60_000);
+/** Filters array where key matches value (strict equality). */
+function filterBy(array, key, value) {
+    return array.filter(item => item[key] === value);
 }
-/** Returns true if date1 is strictly before date2. */
-function isBefore(date1, date2) {
-    return date1.getTime() < date2.getTime();
+/** Sums values at the given numeric key. */
+function sumBy(array, key) {
+    return array.reduce((acc, item) => acc + Number(item[key]), 0);
 }
-/** Returns true if date1 is strictly after date2. */
-function isAfter(date1, date2) {
-    return date1.getTime() > date2.getTime();
+/** Returns the item with the minimum value at key. */
+function minBy(array, key) {
+    if (!array.length)
+        return undefined;
+    return array.reduce((min, item) => (item[key] < min[key] ? item : min));
 }
-/** Returns true if both dates fall on the same calendar day. */
-function isSameDay(date1, date2) {
-    return (date1.getFullYear() === date2.getFullYear() &&
-        date1.getMonth() === date2.getMonth() &&
-        date1.getDate() === date2.getDate());
+/** Returns the item with the maximum value at key. */
+function maxBy(array, key) {
+    if (!array.length)
+        return undefined;
+    return array.reduce((max, item) => (item[key] > max[key] ? item : max));
 }
-/** Returns true if the date falls on a Saturday or Sunday. */
-function isWeekend(date) {
-    return date.getDay() === 0 || date.getDay() === 6;
+/** Computes the average of an array of numbers. */
+function average$1(numbers) {
+    if (!numbers.length)
+        return 0;
+    return numbers.reduce((a, b) => a + b, 0) / numbers.length;
 }
-/** Returns true if the date is today. */
-function isToday(date) {
-    return isSameDay(date, new Date());
+/** Returns true if the array is null, undefined, or has no elements. */
+function isEmpty$2(array) {
+    return !array || array.length === 0;
 }
-/** Returns true if the date falls in the past (before now). */
-function isPast(date) {
-    return date.getTime() < Date.now();
+/** Returns the last element. */
+function last(array) {
+    return array[array.length - 1];
 }
-/** Returns true if the date falls in the future (after now). */
-function isFuture(date) {
-    return date.getTime() > Date.now();
+/** Returns the first element. */
+function first(array) {
+    return array[0];
 }
-/** Returns the date with time set to 00:00:00.000. */
-function startOfDay(date) {
-    const result = new Date(date);
-    result.setHours(0, 0, 0, 0);
-    return result;
+/** Returns a slice of the array for the given page (1-based). */
+function paginate(array, page, pageSize) {
+    const start = (page - 1) * pageSize;
+    return array.slice(start, start + pageSize);
 }
-/** Returns the date with time set to 23:59:59.999. */
-function endOfDay(date) {
-    const result = new Date(date);
-    result.setHours(23, 59, 59, 999);
+/** Moves an element from one index to another (immutable). */
+function move(array, fromIndex, toIndex) {
+    const result = [...array];
+    const [item] = result.splice(fromIndex, 1);
+    result.splice(toIndex, 0, item);
     return result;
 }
-/** Returns the first day of the month (time 00:00:00.000). */
-function startOfMonth(date) {
-    return new Date(date.getFullYear(), date.getMonth(), 1);
+/** Adds the item if absent, removes it if present. */
+function toggle(array, item) {
+    return array.includes(item) ? array.filter(i => i !== item) : [...array, item];
 }
-/** Returns the last day of the month (time 23:59:59.999). */
-function endOfMonth(date) {
-    const result = new Date(date.getFullYear(), date.getMonth() + 1, 0);
-    result.setHours(23, 59, 59, 999);
-    return result;
+/** Returns elements present in both arrays. */
+function intersection(a, b) {
+    const setB = new Set(b);
+    return a.filter(item => setB.has(item));
 }
-/** Returns the first day of the year (Jan 1, 00:00:00.000). */
-function startOfYear(date) {
-    return new Date(date.getFullYear(), 0, 1);
+/** Returns elements in `a` not present in `b`. */
+function difference(a, b) {
+    const setB = new Set(b);
+    return a.filter(item => !setB.has(item));
 }
-/** Returns the last day of the year (Dec 31, 23:59:59.999). */
-function endOfYear(date) {
-    const result = new Date(date.getFullYear(), 11, 31);
-    result.setHours(23, 59, 59, 999);
-    return result;
+/** Converts an array to a lookup map keyed by the given property. */
+function toMap(array, key) {
+    return array.reduce((acc, item) => {
+        acc[String(item[key])] = item;
+        return acc;
+    }, {});
 }
-/** Calculates the age in years from a birth date. */
-function getAge(birthDate) {
-    const n = new Date();
-    let age = n.getFullYear() - birthDate.getFullYear();
-    const monthDiff = n.getMonth() - birthDate.getMonth();
-    if (monthDiff < 0 || (monthDiff === 0 && n.getDate() < birthDate.getDate()))
-        age--;
-    return age;
+/** Removes falsy values (null, undefined, 0, '', false). */
+function compact(array) {
+    return array.filter(Boolean);
 }
-/** Returns the number of days in a given month (0-based month). */
-function daysInMonth(year, month) {
-    return new Date(year, month + 1, 0).getDate();
+/** Returns a new randomly shuffled copy. */
+function shuffle(array) {
+    const result = [...array];
+    for (let i = result.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [result[i], result[j]] = [result[j], result[i]];
+    }
+    return result;
 }
-/** Returns true if the given year is a leap year. */
-function isLeapYear(year) {
-    return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
+function sample(array, count) {
+    if (count === undefined)
+        return array[Math.floor(Math.random() * array.length)];
+    return shuffle(array).slice(0, count);
 }
-/**
- * Returns a human-friendly relative time string.
- * @example timeAgo(new Date(Date.now() - 3600_000)) → '1 hour ago'
- */
-function timeAgo(date) {
-    const seconds = Math.floor((Date.now() - date.getTime()) / 1000);
-    const abs = Math.abs(seconds);
-    const future = seconds < 0;
-    const intervals = [
-        [31_536_000, 'year'],
-        [2_592_000, 'month'],
-        [604_800, 'week'],
-        [86_400, 'day'],
-        [3_600, 'hour'],
-        [60, 'minute'],
-        [1, 'second'],
-    ];
-    for (const [secs, label] of intervals) {
-        const count = Math.floor(abs / secs);
-        if (count >= 1) {
-            const unit = count === 1 ? label : `${label}s`;
-            return future ? `in ${count} ${unit}` : `${count} ${unit} ago`;
-        }
-    }
-    return 'just now';
+/** Counts occurrences of each value at the given key. */
+function countBy(array, key) {
+    return array.reduce((acc, item) => {
+        const group = String(item[key]);
+        acc[group] = (acc[group] ?? 0) + 1;
+        return acc;
+    }, {});
 }
-/** Returns the ISO week number (1–53) for the given date. */
-function getWeekNumber(date) {
-    const d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
-    d.setUTCDate(d.getUTCDate() + 4 - (d.getUTCDay() || 7));
-    const yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
-    return Math.ceil((((d.getTime() - yearStart.getTime()) / 86_400_000) + 1) / 7);
+/** Returns the union of two arrays (unique values from both). */
+function union(a, b) {
+    return unique([...a, ...b]);
 }
-/** Returns the next weekday (Mon–Fri) after the given date. */
-function nextWorkday(date) {
-    const result = addDays(date, 1);
-    while (isWeekend(result)) {
-        result.setDate(result.getDate() + 1);
-    }
-    return result;
+/** Zips multiple arrays into an array of tuples. */
+function zip(...arrays) {
+    const length = Math.max(...arrays.map(a => a.length));
+    return Array.from({ length }, (_, i) => arrays.map(a => a[i]));
 }
-/** Returns true if a date falls within the range [start, end] (inclusive). */
-function inRange$2(date, start, end) {
-    return date >= start && date <= end;
+/** Returns true if predicate holds for all elements. */
+function every(array, predicate) {
+    return array.every(predicate);
 }
-/** Parses a `YYYY-MM-DD` string and returns a local-midnight Date or null. */
-function parseDate(dateStr) {
-    const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(dateStr);
-    if (!match)
-        return null;
-    const [, y, mo, d] = match.map(Number);
-    const result = new Date(y, mo - 1, d);
-    return isValidDate$1(result) ? result : null;
+/** Returns true if predicate holds for at least one element. */
+function some(array, predicate) {
+    return array.some(predicate);
+}
+/** Partitions an array into two groups based on predicate. */
+function partition(array, predicate) {
+    const pass = [];
+    const fail = [];
+    for (const item of array) {
+        (predicate(item) ? pass : fail).push(item);
+    }
+    return [pass, fail];
 }
 
-var date_util = /*#__PURE__*/Object.freeze({
+var array_util = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    addDays: addDays,
-    addHours: addHours,
-    addMinutes: addMinutes,
-    addMonths: addMonths,
-    addYears: addYears,
-    daysInMonth: daysInMonth,
-    diffInDays: diffInDays,
-    diffInMinutes: diffInMinutes,
-    diffInMonths: diffInMonths,
-    diffInYears: diffInYears,
-    endOfDay: endOfDay,
-    endOfMonth: endOfMonth,
-    endOfYear: endOfYear,
-    formatDate: formatDate,
-    getAge: getAge,
-    getWeekNumber: getWeekNumber,
-    inRange: inRange$2,
-    isAfter: isAfter,
-    isBefore: isBefore,
-    isFuture: isFuture,
-    isLeapYear: isLeapYear,
-    isPast: isPast,
-    isSameDay: isSameDay,
-    isToday: isToday,
-    isValidDate: isValidDate$1,
-    isWeekend: isWeekend,
-    nextWorkday: nextWorkday,
-    now: now,
-    parseDate: parseDate,
-    startOfDay: startOfDay,
-    startOfMonth: startOfMonth,
-    startOfYear: startOfYear,
-    subtractDays: subtractDays,
-    subtractMonths: subtractMonths,
-    subtractYears: subtractYears,
-    timeAgo: timeAgo,
-    toDateOnly: toDateOnly,
-    toISOString: toISOString,
-    today: today
+    average: average$1,
+    chunk: chunk,
+    compact: compact,
+    countBy: countBy,
+    difference: difference,
+    every: every,
+    filterBy: filterBy,
+    first: first,
+    flatten: flatten,
+    flattenDeep: flattenDeep,
+    groupBy: groupBy,
+    intersection: intersection,
+    isEmpty: isEmpty$2,
+    last: last,
+    maxBy: maxBy,
+    minBy: minBy,
+    move: move,
+    paginate: paginate,
+    partition: partition,
+    sample: sample,
+    shuffle: shuffle,
+    some: some,
+    sortBy: sortBy,
+    sumBy: sumBy,
+    toMap: toMap,
+    toggle: toggle,
+    union: union,
+    unique: unique,
+    uniqueBy: uniqueBy,
+    zip: zip
 });
 
 // ─── Number Utilities ────────────────────────────────────────────────────────