npm - osl-base-extended - Versions diffs - 6.7.0 → 6.10.0 - Mend

osl-base-extended 6.7.0 → 6.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/fesm2022/osl-base-extended.mjs +30 -24
package/fesm2022/osl-base-extended.mjs.map +1 -1
package/package.json +1 -1
package/types/osl-base-extended.d.ts +4 -1

package/fesm2022/osl-base-extended.mjs CHANGED Viewed

@@ -6,15 +6,15 @@ import * as i1 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule, MatDialog } from '@angular/material/dialog';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { Router, ActivatedRoute } from '@angular/router';
-import * as i2$1 from '@angular/material/button';
+import * as i2 from '@angular/material/button';
 import { MatIconButton, MatButtonModule } from '@angular/material/button';
-import * as i2 from '@angular/material/icon';
+import * as i3 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import { HttpHeaders, HttpParams, HttpClient } from '@angular/common/http';
 import { firstValueFrom, timeout, BehaviorSubject, debounceTime, distinctUntilChanged, from, of } from 'rxjs';
 import * as i1$1 from '@angular/forms';
 import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import * as i2$2 from '@angular/material/form-field';
+import * as i2$1 from '@angular/material/form-field';
 import { MatFormFieldModule, MatHint } from '@angular/material/form-field';
 import * as i6 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
@@ -27,7 +27,7 @@ import { MatInputModule } from '@angular/material/input';
 import { debounceTime as debounceTime$1, distinctUntilChanged as distinctUntilChanged$1, switchMap, tap } from 'rxjs/operators';
 import { MatMenuModule } from '@angular/material/menu';
 import { ScrollingModule } from '@angular/cdk/scrolling';
-import * as i3 from '@angular/cdk/drag-drop';
+import * as i3$1 from '@angular/cdk/drag-drop';
 import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
 import { TemplatePortal, PortalModule } from '@angular/cdk/portal';
 import * as i1$3 from '@angular/cdk/overlay';
@@ -58,7 +58,7 @@ class DialogWrapper {
         this.dialogData.component = data.component;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DialogWrapper, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DialogWrapper, isStandalone: true, selector: "dialog-wrapper", ngImport: i0, template: "\r\n@if(dialogData.component){\r\n    <ng-container [ngComponentOutlet]=\"dialogData.component\"  [ngComponentOutletInputs]=\"{ data: dialogData }\"></ng-container>\r\n}\r\n@else{\r\n  <div class=\"dialog-container\">\r\n  \r\n    <!-- Header -->\r\n    @if(typeof dialogData.header == 'string') {\r\n      <div class=\"dialog-header\" mat-dialog-title>\r\n        <div class=\"dialog-header-left\">\r\n          <div class=\"dialog-icon-ring\">\r\n            <mat-icon class=\"dialog-icon\">\r\n              {{ dialogData.header.startsWith('Add') ? 'add_circle' : dialogData.header.startsWith('Edit') ? 'edit' : 'info' }}\r\n            </mat-icon>\r\n          </div>\r\n          <div class=\"dialog-title-group\">\r\n            <span class=\"dialog-mode-label\">\r\n              {{ dialogData.header.startsWith('Add') ? 'Creating New' : dialogData.header.startsWith('Edit') ? 'Edit' : '' }}\r\n            </span>\r\n            <span class=\"dialog-heading\"> {{ dialogData.header.startsWith('Add') ? dialogData.header.replace('Add','') : dialogData.header.startsWith('Edit') ? dialogData.header.replace('Edit','') : '' }}</span>\r\n          </div>\r\n        </div>\r\n        @if(dialogData.partialHeader) {\r\n       \r\n          <ng-container *ngTemplateOutlet=\"dialogData.partialHeader; context: { $implicit: dialogData }\"></ng-container>\r\n        }\r\n        <button mat-icon-button class=\"dialog-close-btn\" mat-dialog-close>\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n        \r\n      </div>\r\n    } @else {\r\n      <ng-container *ngTemplateOutlet=\"dialogData.header; context: { $implicit: dialogData }\"></ng-container>\r\n    }\r\n  \r\n    <!-- Body -->\r\n    <mat-dialog-content class=\"dialog-content\">\r\n      @if(dialogData.formBody) {\r\n        <div class=\"dialog-body\">\r\n          <ng-container *ngTemplateOutlet=\"dialogData.formBody; context: { $implicit: dialogData }\"></ng-container>\r\n        </div>\r\n      }\r\n    </mat-dialog-content>\r\n  \r\n    <!-- Footer -->\r\n    @if(dialogData.formFooter) {\r\n      <mat-dialog-actions class=\"dialog-actions\">\r\n        <div class=\"dialog-footer\">\r\n          <ng-container *ngTemplateOutlet=\"dialogData.formFooter; context: { $implicit: dialogData }\"></ng-container>\r\n        </div>\r\n      </mat-dialog-actions>\r\n    }\r\n  \r\n  </div>\r\n\r\n}\r\n", styles: [".dialog-container{display:flex;flex-direction:column;overflow:hidden}.dialog-header{display:flex;align-items:center;justify-content:space-between;padding:20px 20px 16px;background:linear-gradient(135deg,#f0f6ff,#e8f0fe);border-bottom:1px solid rgba(37,99,235,.12);gap:12px}.dialog-header:before{display:none}.dialog-header-left{display:flex;align-items:center;gap:14px;flex:1;min-width:0}.dialog-icon-ring{flex-shrink:0;width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,var(--osl-primary, #2563eb),#3b82f6);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px #2563eb4d;animation:icon-pop .25s cubic-bezier(.34,1.56,.64,1)}.dialog-icon{color:#fff;font-size:24px;width:24px;height:24px}.dialog-title-group{display:flex;flex-direction:column;min-width:0}.dialog-mode-label{font-size:11px;font-weight:500;color:var(--osl-primary, #2563eb);text-transform:uppercase;letter-spacing:.6px;line-height:1.2}.dialog-heading{font-size:18px;font-weight:600;color:#111827;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dialog-close-btn{flex-shrink:0;color:#6b7280;transition:color .15s ease,background .15s ease}.dialog-close-btn:hover{color:#111827;background:#0000000f}.dialog-close-btn .mat-icon{font-size:20px;width:20px;height:20px}.dialog-content{padding:0!important;max-height:65vh;overflow-y:auto}.dialog-content::-webkit-scrollbar{width:5px}.dialog-content::-webkit-scrollbar-track{background:transparent}.dialog-content::-webkit-scrollbar-thumb{background:#2563eb33;border-radius:4px}.dialog-body{padding:20px 24px}.dialog-actions{padding:0!important;min-height:unset!important;border-top:1px solid #e5e7eb;background:#fafafa}.dialog-footer{width:100%;padding:14px 24px}@keyframes icon-pop{0%{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}.mat-mdc-dialog-title:before{display:none}\n"], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DialogWrapper, isStandalone: true, selector: "dialog-wrapper", ngImport: i0, template: "\r\n@if(dialogData.component){\r\n    <ng-container [ngComponentOutlet]=\"dialogData.component\"  [ngComponentOutletInputs]=\"{ data: dialogData }\"></ng-container>\r\n}\r\n@else{\r\n  <div class=\"dialog-container\">\r\n  \r\n    <!-- Header -->\r\n    @if(typeof dialogData.header == 'string') {\r\n      <div class=\"dialog-header\" mat-dialog-title>\r\n        <div class=\"dialog-header-left\">\r\n          <div class=\"dialog-icon-ring\">\r\n            <mat-icon class=\"dialog-icon\">\r\n              {{ dialogData.header.startsWith('Add') ? 'add_circle' : dialogData.header.startsWith('Edit') ? 'edit' : 'info' }}\r\n            </mat-icon>\r\n          </div>\r\n          <div class=\"dialog-title-group\">\r\n            <span class=\"dialog-mode-label\">\r\n              {{ dialogData.header.startsWith('Add') ? 'Creating New' : dialogData.header.startsWith('Edit') ? 'Edit' : '' }}\r\n            </span>\r\n            <span class=\"dialog-heading\"> {{ dialogData.header.startsWith('Add') ? dialogData.header.replace('Add','') : dialogData.header.startsWith('Edit') ? dialogData.header.replace('Edit','') : '' }}</span>\r\n          </div>\r\n        </div>\r\n        @if(dialogData.partialHeader) {\r\n       \r\n          <ng-container *ngTemplateOutlet=\"dialogData.partialHeader; context: { $implicit: dialogData }\"></ng-container>\r\n        }\r\n        <button mat-icon-button class=\"dialog-close-btn\" mat-dialog-close>\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n        \r\n      </div>\r\n    } @else {\r\n      <ng-container *ngTemplateOutlet=\"dialogData.header; context: { $implicit: dialogData }\"></ng-container>\r\n    }\r\n  \r\n    <!-- Body -->\r\n    <mat-dialog-content class=\"dialog-content\">\r\n      @if(dialogData.formBody) {\r\n        <div class=\"dialog-body\">\r\n          <ng-container *ngTemplateOutlet=\"dialogData.formBody; context: { $implicit: dialogData }\"></ng-container>\r\n        </div>\r\n      }\r\n    </mat-dialog-content>\r\n  \r\n    <!-- Footer -->\r\n    @if(dialogData.formFooter) {\r\n      <mat-dialog-actions class=\"dialog-actions\">\r\n        <div class=\"dialog-footer\">\r\n          <ng-container *ngTemplateOutlet=\"dialogData.formFooter; context: { $implicit: dialogData }\"></ng-container>\r\n        </div>\r\n      </mat-dialog-actions>\r\n    }\r\n  \r\n  </div>\r\n\r\n}\r\n", styles: [".dialog-container{display:flex;flex-direction:column;overflow:hidden}.dialog-header{display:flex;align-items:center;justify-content:space-between;padding:20px 20px 16px;background:linear-gradient(135deg,#f0f6ff,#e8f0fe);border-bottom:1px solid rgba(37,99,235,.12);gap:12px}.dialog-header:before{display:none}.dialog-header-left{display:flex;align-items:center;gap:14px;flex:1;min-width:0}.dialog-icon-ring{flex-shrink:0;width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,var(--osl-primary, #2563eb),#3b82f6);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px #2563eb4d;animation:icon-pop .25s cubic-bezier(.34,1.56,.64,1)}.dialog-icon{color:#fff;font-size:24px;width:24px;height:24px}.dialog-title-group{display:flex;flex-direction:column;min-width:0}.dialog-mode-label{font-size:11px;font-weight:500;color:var(--osl-primary, #2563eb);text-transform:uppercase;letter-spacing:.6px;line-height:1.2}.dialog-heading{font-size:18px;font-weight:600;color:#111827;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dialog-close-btn{flex-shrink:0;color:#6b7280;transition:color .15s ease,background .15s ease}.dialog-close-btn:hover{color:#111827;background:#0000000f}.dialog-close-btn .mat-icon{font-size:20px;width:20px;height:20px}.dialog-content{padding:0!important;max-height:65vh;overflow-y:auto}.dialog-content::-webkit-scrollbar{width:5px}.dialog-content::-webkit-scrollbar-track{background:transparent}.dialog-content::-webkit-scrollbar-thumb{background:#2563eb33;border-radius:4px}.dialog-body{padding:20px 24px}.dialog-actions{padding:0!important;min-height:unset!important;border-top:1px solid #e5e7eb;background:#fafafa}.dialog-footer{width:100%;padding:14px 24px}@keyframes icon-pop{0%{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}.mat-mdc-dialog-title:before{display:none}\n"], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DialogWrapper, decorators: [{
             type: Component,
@@ -91,7 +91,7 @@ class DeleteConfirmation {
         this.dialogRef.close(false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DeleteConfirmation, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: DeleteConfirmation, isStandalone: true, selector: "delete-confirmation", ngImport: i0, template: "<div class=\"delete-dialog-container\">\n\n  <!-- Header: centered icon + top-right close -->\n  <div class=\"delete-dialog-header\">\n    <div class=\"delete-icon-wrapper\">\n      <div class=\"delete-icon-ring\">\n        <svg class=\"delete-icon\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n          <path d=\"M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zm2.46-7.12 1.41-1.41L12 12.59l2.12-2.12 1.41 1.41L13.41 14l2.12 2.12-1.41 1.41L12 15.41l-2.12 2.12-1.41-1.41L10.59 14l-2.13-2.12zM15.5 4l-1-1h-5l-1 1H5v2h14V4z\"/>\n        </svg>\n      </div>\n    </div>\n    <button mat-icon-button class=\"close-btn\" (click)=\"cancel()\">\n      <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"20\" height=\"20\">\n        <path d=\"M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"/>\n      </svg>\n    </button>\n  </div>\n\n  <!-- Body -->\n  <mat-dialog-content class=\"delete-dialog-content\">\n    <h2 class=\"delete-title\">{{ data.title }}</h2>\n    <p class=\"delete-message\">{{ data.message }}</p>\n  </mat-dialog-content>\n\n  <!-- Actions -->\n  <mat-dialog-actions class=\"delete-dialog-actions\">\n    <button mat-stroked-button class=\"cancel-btn\" (click)=\"cancel()\">\n      <svg class=\"btn-icon\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n        <path d=\"M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"/>\n      </svg>\n      {{ data.cancelText }}\n    </button>\n    <button mat-flat-button class=\"confirm-btn\" (click)=\"confirm()\">\n      <svg class=\"btn-icon\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n        <path d=\"M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zm2.46-7.12 1.41-1.41L12 12.59l2.12-2.12 1.41 1.41L13.41 14l2.12 2.12-1.41 1.41L12 15.41l-2.12 2.12-1.41-1.41L10.59 14l-2.13-2.12zM15.5 4l-1-1h-5l-1 1H5v2h14V4z\"/>\n      </svg>\n      {{ data.confirmText }}\n    </button>\n  </mat-dialog-actions>\n\n</div>\n", styles: [".delete-dialog-container{padding:8px 4px}.delete-dialog-header{display:flex;justify-content:space-between;align-items:flex-start;padding:8px 8px 0}.delete-icon-wrapper{display:flex;align-items:center;justify-content:center;flex:1;padding-left:40px}.delete-icon-ring{width:72px;height:72px;border-radius:50%;background:#dc262614;border:2px solid rgba(220,38,38,.2);display:flex;align-items:center;justify-content:center;animation:pulse-ring 2s ease-in-out infinite}.delete-icon{width:36px;height:36px;color:var(--osl-danger, #dc2626)}.close-btn{color:var(--osl-secondary, #6b7280);flex-shrink:0}.close-btn:hover{color:var(--osl-black, #000)}.delete-dialog-content{text-align:center;padding:16px 24px 8px!important;max-height:unset!important;overflow:visible!important}.delete-title{font-size:20px;font-weight:600;color:var(--osl-black, #111827);margin:0 0 10px;line-height:1.3}.delete-message{font-size:14px;color:var(--osl-secondary, #6b7280);margin:0;line-height:1.6}.delete-dialog-actions{display:flex!important;justify-content:center;gap:12px;padding:16px 24px 20px!important}.delete-dialog-actions .btn-icon{width:17px;height:17px;flex-shrink:0}.delete-dialog-actions .cancel-btn{border-color:var(--osl-border-color, #d1d5db);color:var(--osl-secondary, #6b7280);border-radius:var(--osl-border-radius, 4px);height:38px;font-size:14px;font-weight:500;display:flex;align-items:center;gap:4px;padding:0 18px;transition:all .2s ease}.delete-dialog-actions .cancel-btn:hover{border-color:var(--osl-secondary, #6b7280);background:#f9fafb}.delete-dialog-actions .confirm-btn{background:var(--osl-danger, #dc2626);color:var(--osl-danger-text, #ffffff);border-radius:var(--osl-border-radius, 4px);height:38px;font-size:14px;font-weight:500;display:flex;align-items:center;gap:4px;padding:0 18px;transition:all .2s ease}.delete-dialog-actions .confirm-btn .btn-icon{color:#fff}.delete-dialog-actions .confirm-btn:hover{background:var(--osl-danger-hover, #b91c1c);box-shadow:0 4px 12px #dc262659}@keyframes pulse-ring{0%,to{box-shadow:0 0 #dc262626}50%{box-shadow:0 0 0 8px #dc262600}}\n"], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: DeleteConfirmation, isStandalone: true, selector: "delete-confirmation", ngImport: i0, template: "<div class=\"delete-dialog-container\">\n\n  <!-- Header: centered icon + top-right close -->\n  <div class=\"delete-dialog-header\">\n    <div class=\"delete-icon-wrapper\">\n      <div class=\"delete-icon-ring\">\n        <svg class=\"delete-icon\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n          <path d=\"M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zm2.46-7.12 1.41-1.41L12 12.59l2.12-2.12 1.41 1.41L13.41 14l2.12 2.12-1.41 1.41L12 15.41l-2.12 2.12-1.41-1.41L10.59 14l-2.13-2.12zM15.5 4l-1-1h-5l-1 1H5v2h14V4z\"/>\n        </svg>\n      </div>\n    </div>\n    <button mat-icon-button class=\"close-btn\" (click)=\"cancel()\">\n      <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"20\" height=\"20\">\n        <path d=\"M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"/>\n      </svg>\n    </button>\n  </div>\n\n  <!-- Body -->\n  <mat-dialog-content class=\"delete-dialog-content\">\n    <h2 class=\"delete-title\">{{ data.title }}</h2>\n    <p class=\"delete-message\">{{ data.message }}</p>\n  </mat-dialog-content>\n\n  <!-- Actions -->\n  <mat-dialog-actions class=\"delete-dialog-actions\">\n    <button mat-stroked-button class=\"cancel-btn\" (click)=\"cancel()\">\n      <svg class=\"btn-icon\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n        <path d=\"M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"/>\n      </svg>\n      {{ data.cancelText }}\n    </button>\n    <button mat-flat-button class=\"confirm-btn\" (click)=\"confirm()\">\n      <svg class=\"btn-icon\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n        <path d=\"M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zm2.46-7.12 1.41-1.41L12 12.59l2.12-2.12 1.41 1.41L13.41 14l2.12 2.12-1.41 1.41L12 15.41l-2.12 2.12-1.41-1.41L10.59 14l-2.13-2.12zM15.5 4l-1-1h-5l-1 1H5v2h14V4z\"/>\n      </svg>\n      {{ data.confirmText }}\n    </button>\n  </mat-dialog-actions>\n\n</div>\n", styles: [".delete-dialog-container{padding:8px 4px}.delete-dialog-header{display:flex;justify-content:space-between;align-items:flex-start;padding:8px 8px 0}.delete-icon-wrapper{display:flex;align-items:center;justify-content:center;flex:1;padding-left:40px}.delete-icon-ring{width:72px;height:72px;border-radius:50%;background:#dc262614;border:2px solid rgba(220,38,38,.2);display:flex;align-items:center;justify-content:center;animation:pulse-ring 2s ease-in-out infinite}.delete-icon{width:36px;height:36px;color:var(--osl-danger, #dc2626)}.close-btn{color:var(--osl-secondary, #6b7280);flex-shrink:0}.close-btn:hover{color:var(--osl-black, #000)}.delete-dialog-content{text-align:center;padding:16px 24px 8px!important;max-height:unset!important;overflow:visible!important}.delete-title{font-size:20px;font-weight:600;color:var(--osl-black, #111827);margin:0 0 10px;line-height:1.3}.delete-message{font-size:14px;color:var(--osl-secondary, #6b7280);margin:0;line-height:1.6}.delete-dialog-actions{display:flex!important;justify-content:center;gap:12px;padding:16px 24px 20px!important}.delete-dialog-actions .btn-icon{width:17px;height:17px;flex-shrink:0}.delete-dialog-actions .cancel-btn{border-color:var(--osl-border-color, #d1d5db);color:var(--osl-secondary, #6b7280);border-radius:var(--osl-border-radius, 4px);height:38px;font-size:14px;font-weight:500;display:flex;align-items:center;gap:4px;padding:0 18px;transition:all .2s ease}.delete-dialog-actions .cancel-btn:hover{border-color:var(--osl-secondary, #6b7280);background:#f9fafb}.delete-dialog-actions .confirm-btn{background:var(--osl-danger, #dc2626);color:var(--osl-danger-text, #ffffff);border-radius:var(--osl-border-radius, 4px);height:38px;font-size:14px;font-weight:500;display:flex;align-items:center;gap:4px;padding:0 18px;transition:all .2s ease}.delete-dialog-actions .confirm-btn .btn-icon{color:#fff}.delete-dialog-actions .confirm-btn:hover{background:var(--osl-danger-hover, #b91c1c);box-shadow:0 4px 12px #dc262659}@keyframes pulse-ring{0%,to{box-shadow:0 0 #dc262626}50%{box-shadow:0 0 0 8px #dc262600}}\n"], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DeleteConfirmation, decorators: [{
             type: Component,
@@ -119,7 +119,7 @@ class ErrorDialog {
         this.dialogRef.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ErrorDialog, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ErrorDialog, isStandalone: true, selector: "error-dialog", ngImport: i0, template: "<div class=\"ed-container\">\n\n  <!-- Header -->\n  <div class=\"ed-header\">\n    <div class=\"ed-icon-wrapper\">\n      <div class=\"ed-icon-ring\">\n        <svg class=\"ed-icon-svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n          <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\"/>\n        </svg>\n      </div>\n    </div>\n    <button mat-icon-button class=\"ed-close-btn\" (click)=\"close()\" aria-label=\"Close\">\n      <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"20\" height=\"20\">\n        <path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"/>\n      </svg>\n    </button>\n  </div>\n\n  <!-- Body -->\n  <mat-dialog-content class=\"ed-body\">\n    <h2 class=\"ed-title\">{{ data.title }}</h2>\n    <p class=\"ed-subtitle\">\n      Please fix the following\n      <strong>{{ data.errors.length }}</strong>\n      {{ data.errors.length === 1 ? 'issue' : 'issues' }} before proceeding.\n    </p>\n    <ul class=\"ed-list\">\n      @for (err of data.errors; track $index) {\n        <li class=\"ed-item\" [style.animation-delay]=\"($index * 60) + 'ms'\">\n          <span class=\"ed-item-dot\"></span>\n          <span class=\"ed-item-text\">{{ err }}</span>\n        </li>\n      }\n    </ul>\n  </mat-dialog-content>\n\n  <!-- Actions -->\n  <mat-dialog-actions class=\"ed-actions\">\n    <button mat-flat-button class=\"ed-confirm-btn\" (click)=\"close()\">\n      <svg class=\"ed-btn-icon\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n        <path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"/>\n      </svg>\n      Got it\n    </button>\n  </mat-dialog-actions>\n\n</div>\n", styles: ["@charset \"UTF-8\";.ed-container{padding:8px 4px}.ed-header{display:flex;justify-content:space-between;align-items:flex-start;padding:8px 8px 0}.ed-icon-wrapper{display:flex;align-items:center;justify-content:center;flex:1;padding-left:40px}.ed-icon-ring{width:72px;height:72px;border-radius:50%;background:#dc262614;border:2px solid rgba(220,38,38,.2);display:flex;align-items:center;justify-content:center;animation:ed-pulse 2.4s ease-in-out infinite}.ed-icon-svg{width:36px;height:36px;color:var(--osl-danger, #dc2626);animation:ed-bounce 2.4s ease-in-out infinite}.ed-close-btn{color:var(--osl-secondary, #6b7280);flex-shrink:0}.ed-close-btn:hover{color:var(--osl-black, #111827)}.ed-body{padding:16px 24px 4px!important;max-height:320px!important;overflow-y:auto!important;text-align:center}.ed-title{font-size:20px;font-weight:600;color:var(--osl-black, #111827);margin:0 0 8px;line-height:1.3}.ed-subtitle{font-size:13.5px;color:var(--osl-secondary, #6b7280);margin:0 0 16px;line-height:1.5}.ed-list{list-style:none;margin:0;padding:0;text-align:left;display:flex;flex-direction:column;gap:8px}.ed-item{display:flex;align-items:flex-start;gap:10px;background:#dc26260a;border:1px solid rgba(220,38,38,.14);border-left:3px solid var(--osl-danger, #dc2626);border-radius:6px;padding:8px 12px;font-size:13.5px;color:var(--osl-black, #111827);line-height:1.5;opacity:0;animation:ed-slide-in .35s ease forwards}.ed-item-dot{flex-shrink:0;width:6px;height:6px;border-radius:50%;background:var(--osl-danger, #dc2626);margin-top:6px}.ed-item-text{flex:1}.ed-actions{display:flex!important;justify-content:center;padding:16px 24px 20px!important}.ed-confirm-btn{background:var(--osl-danger, #dc2626);color:#fff;border-radius:var(--osl-border-radius, 4px);height:38px;font-size:14px;font-weight:500;display:flex;align-items:center;gap:6px;padding:0 24px;transition:background .2s ease,box-shadow .2s ease;min-width:120px;justify-content:center}.ed-confirm-btn .ed-btn-icon{width:17px;height:17px;flex-shrink:0;color:#fff}.ed-confirm-btn:hover{background:var(--osl-danger-hover, #b91c1c);box-shadow:0 4px 14px #dc262659}.ed-body::-webkit-scrollbar{width:4px}.ed-body::-webkit-scrollbar-track{background:transparent}.ed-body::-webkit-scrollbar-thumb{background:#dc262640;border-radius:4px}@keyframes ed-pulse{0%,to{box-shadow:0 0 #dc262626}50%{box-shadow:0 0 0 10px #dc262600}}@keyframes ed-bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-3px)}}@keyframes ed-slide-in{0%{opacity:0;transform:translate(-12px)}to{opacity:1;transform:translate(0)}}\n"], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ErrorDialog, isStandalone: true, selector: "error-dialog", ngImport: i0, template: "<div class=\"ed-container\">\n\n  <!-- Header -->\n  <div class=\"ed-header\">\n    <div class=\"ed-icon-wrapper\">\n      <div class=\"ed-icon-ring\">\n        <svg class=\"ed-icon-svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n          <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\"/>\n        </svg>\n      </div>\n    </div>\n    <button mat-icon-button class=\"ed-close-btn\" (click)=\"close()\" aria-label=\"Close\">\n      <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"20\" height=\"20\">\n        <path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"/>\n      </svg>\n    </button>\n  </div>\n\n  <!-- Body -->\n  <mat-dialog-content class=\"ed-body\">\n    <h2 class=\"ed-title\">{{ data.title }}</h2>\n    <p class=\"ed-subtitle\">\n      Please fix the following\n      <strong>{{ data.errors.length }}</strong>\n      {{ data.errors.length === 1 ? 'issue' : 'issues' }} before proceeding.\n    </p>\n    <ul class=\"ed-list\">\n      @for (err of data.errors; track $index) {\n        <li class=\"ed-item\" [style.animation-delay]=\"($index * 60) + 'ms'\">\n          <span class=\"ed-item-dot\"></span>\n          <span class=\"ed-item-text\">{{ err }}</span>\n        </li>\n      }\n    </ul>\n  </mat-dialog-content>\n\n  <!-- Actions -->\n  <mat-dialog-actions class=\"ed-actions\">\n    <button mat-flat-button class=\"ed-confirm-btn\" (click)=\"close()\">\n      <svg class=\"ed-btn-icon\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n        <path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"/>\n      </svg>\n      Got it\n    </button>\n  </mat-dialog-actions>\n\n</div>\n", styles: ["@charset \"UTF-8\";.ed-container{padding:8px 4px}.ed-header{display:flex;justify-content:space-between;align-items:flex-start;padding:8px 8px 0}.ed-icon-wrapper{display:flex;align-items:center;justify-content:center;flex:1;padding-left:40px}.ed-icon-ring{width:72px;height:72px;border-radius:50%;background:#dc262614;border:2px solid rgba(220,38,38,.2);display:flex;align-items:center;justify-content:center;animation:ed-pulse 2.4s ease-in-out infinite}.ed-icon-svg{width:36px;height:36px;color:var(--osl-danger, #dc2626);animation:ed-bounce 2.4s ease-in-out infinite}.ed-close-btn{color:var(--osl-secondary, #6b7280);flex-shrink:0}.ed-close-btn:hover{color:var(--osl-black, #111827)}.ed-body{padding:16px 24px 4px!important;max-height:320px!important;overflow-y:auto!important;text-align:center}.ed-title{font-size:20px;font-weight:600;color:var(--osl-black, #111827);margin:0 0 8px;line-height:1.3}.ed-subtitle{font-size:13.5px;color:var(--osl-secondary, #6b7280);margin:0 0 16px;line-height:1.5}.ed-list{list-style:none;margin:0;padding:0;text-align:left;display:flex;flex-direction:column;gap:8px}.ed-item{display:flex;align-items:flex-start;gap:10px;background:#dc26260a;border:1px solid rgba(220,38,38,.14);border-left:3px solid var(--osl-danger, #dc2626);border-radius:6px;padding:8px 12px;font-size:13.5px;color:var(--osl-black, #111827);line-height:1.5;opacity:0;animation:ed-slide-in .35s ease forwards}.ed-item-dot{flex-shrink:0;width:6px;height:6px;border-radius:50%;background:var(--osl-danger, #dc2626);margin-top:6px}.ed-item-text{flex:1}.ed-actions{display:flex!important;justify-content:center;padding:16px 24px 20px!important}.ed-confirm-btn{background:var(--osl-danger, #dc2626);color:#fff;border-radius:var(--osl-border-radius, 4px);height:38px;font-size:14px;font-weight:500;display:flex;align-items:center;gap:6px;padding:0 24px;transition:background .2s ease,box-shadow .2s ease;min-width:120px;justify-content:center}.ed-confirm-btn .ed-btn-icon{width:17px;height:17px;flex-shrink:0;color:#fff}.ed-confirm-btn:hover{background:var(--osl-danger-hover, #b91c1c);box-shadow:0 4px 14px #dc262659}.ed-body::-webkit-scrollbar{width:4px}.ed-body::-webkit-scrollbar-track{background:transparent}.ed-body::-webkit-scrollbar-thumb{background:#dc262640;border-radius:4px}@keyframes ed-pulse{0%,to{box-shadow:0 0 #dc262626}50%{box-shadow:0 0 0 10px #dc262600}}@keyframes ed-bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-3px)}}@keyframes ed-slide-in{0%{opacity:0;transform:translate(-12px)}to{opacity:1;transform:translate(0)}}\n"], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ErrorDialog, decorators: [{
             type: Component,
@@ -436,7 +436,7 @@ class Httpbase {
     }
     mapError(error) {
         switch (error.status) {
-            case 0: return 'Connection Error! Please Contact Administration';
+            case 0: return 'An error has occurred, Please contact support';
             case 400: return error.error?.errors ? this.flatObject(error.error?.errors) : error.error?.error || error.error?.message || 'Bad Request';
             case 401: return 'Unauthorized Access';
             case 403: return "You don't have rights to perform this action";
@@ -1359,7 +1359,7 @@ class Oslinput {
         return result;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: Oslinput, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: Oslinput, isStandalone: false, selector: "osl-input", inputs: { label: "label", required: "required", disabled: "disabled", model: "model", type: "type", placeholder: "placeholder", mask: "mask", min: "min", max: "max", minLength: "minLength", maxLength: "maxLength", prefixIcon: "prefixIcon", suffixIcon: "suffixIcon", skeletonLoading: "skeletonLoading", skeletonTheme: "skeletonTheme", onlyChars: "onlyChars", isCapitalize: "isCapitalize", decimalPortion: "decimalPortion" }, outputs: { modelChange: "modelChange", changeEv: "changeEv" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"d-flex flex-column\">\r\n    @if(label){\r\n    <div [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\">\r\n    <label class=\"label\" [class.txt-clr-red]=\"myField.touched && myField.invalid\">\r\n        <span class=\"label-text\" [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\" [title]=\"label\">{{label}}</span><span class=\"txt-clr-red label-required\">{{required?'*':''}}</span>\r\n    </label>\r\n    </div>\r\n}\r\n\r\n    <div class=\"input-wrapper\" [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\" [class.plain]=\"!hasWrapper\" [class.error]=\"myField.touched && myField.invalid\" [class.input-disabled]=\"disabled\">\r\n        @if(prefixIcon) {\r\n            <mat-icon class=\"input-icon prefix-icon\">{{prefixIcon}}</mat-icon>\r\n        }\r\n        <input\r\n\r\n            [type]=\"inputType\"\r\n            [ngModel]=\"model\"\r\n            (ngModelChange)=\"onModelChange($event)\"\r\n            (keydown)=\"onKeyDown($event)\"\r\n            (focus)=\"onFocusIn($event)\"\r\n            (blur)=\"onFocusOut()\"\r\n            (change)=\"onChange()\"\r\n            [required]=\"required\"\r\n            [disabled]=\"disabled\"\r\n            [placeholder]=\"placeholder\"\r\n            [attr.min]=\"min || null\"\r\n            [attr.max]=\"max || null\"\r\n            [attr.minlength]=\"minLength\"\r\n            [attr.maxlength]=\"maxLength\"\r\n            [email]=\"type === 'email'\"\r\n            #myField=\"ngModel\"\r\n            class=\"inner-input\"\r\n        >\r\n        @if(type === 'password') {\r\n            <button type=\"button\" class=\"password-toggle\" (click)=\"togglePassword()\" tabindex=\"-1\">\r\n                <mat-icon>{{showPassword ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n            </button>\r\n        }\r\n        @if(suffixIcon && type !== 'password') {\r\n            <mat-icon class=\"input-icon suffix-icon\">{{suffixIcon}}</mat-icon>\r\n        }\r\n    </div>\r\n\r\n    @if(myField.touched && myField.invalid) {\r\n        @if(myField.errors?.['required']) {\r\n            <mat-hint class=\"hint\">{{label}} is Required!</mat-hint>\r\n        } @else if(myField.errors?.['email']) {\r\n            <mat-hint class=\"hint\">Please enter a valid email address.</mat-hint>\r\n        } @else if(myField.errors?.['minlength']) {\r\n            <mat-hint class=\"hint\">Minimum {{minLength}} characters required.</mat-hint>\r\n        } @else if(myField.errors?.['maxlength']) {\r\n            <mat-hint class=\"hint\">Maximum {{maxLength}} characters allowed.</mat-hint>\r\n        } @else if(myField.errors?.['min']) {\r\n            <mat-hint class=\"hint\">Value must be at least {{min}}.</mat-hint>\r\n        } @else if(myField.errors?.['max']) {\r\n            <mat-hint class=\"hint\">Value must be at most {{max}}.</mat-hint>\r\n        }\r\n    }\r\n</div>\r\n", styles: [".label{font-size:var(--osl-label-font-size);margin-bottom:5px;display:flex;align-items:center;overflow:hidden}.label-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.label-required{flex-shrink:0}.input-wrapper{display:flex;align-items:center;height:var(--osl-control-height);width:100%;border-radius:var(--osl-border-radius);border:1px solid var(--osl-border-color);padding:0 8px;gap:6px;transition:border-color .5s}.input-wrapper:focus-within{border-color:var(--osl-focus-border-color)}.input-wrapper.error{border-color:var(--osl-error-color)}.input-wrapper.input-disabled{background:#f5f5f5;opacity:.7;cursor:not-allowed}.input-wrapper.plain{padding:0;border:none;height:auto;gap:0}.input-wrapper.plain .inner-input{border:1px solid var(--osl-border-color);border-radius:var(--osl-border-radius);padding:5px;height:var(--osl-control-height)}.input-wrapper.plain .inner-input:focus{border-color:var(--osl-focus-border-color)}.input-wrapper.plain .inner-input.error{border-color:var(--osl-error-color)}.inner-input{flex:1;min-width:0;height:100%;border:none;outline:none;font-size:var(--osl-text-font-size);background:transparent;width:100%}.inner-input:disabled{cursor:not-allowed;background:transparent}.inner-input::placeholder{font-size:var(--osl-label-font-size);color:#aaa}.input-icon{font-size:18px;width:18px;height:18px;color:#888;flex-shrink:0;-webkit-user-select:none;user-select:none}.password-toggle{display:flex;align-items:center;justify-content:center;background:none;border:none;padding:0;cursor:pointer;color:#888;flex-shrink:0}.password-toggle mat-icon{font-size:18px;width:18px;height:18px}.password-toggle:hover{color:#333}.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.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.EmailValidator, selector: "[email][formControlName],[email][formControl],[email][ngModel]", inputs: ["email"] }, { 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$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: OslSkeletonDirective, selector: "[oslSkeleton]", inputs: ["oslSkeleton", "oslSkeletonType", "oslSkeletonAnimation", "oslSkeletonTheme", "oslSkeletonColor", "oslSkeletonHighlight", "oslSkeletonRadius", "oslSkeletonRows", "oslSkeletonRowGap", "oslSkeletonZIndex", "oslSkeletonDelay", "oslSkeletonDuration", "oslSkeletonMinHeight", "oslSkeletonForceReread", "oslSkeletonCircleSize", "oslSkeletonListItems", "oslSkeletonTableRows", "oslSkeletonTableCols", "oslSkeletonCardLines", "oslSkeletonBgColor"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: Oslinput, isStandalone: false, selector: "osl-input", inputs: { label: "label", required: "required", disabled: "disabled", model: "model", type: "type", placeholder: "placeholder", mask: "mask", min: "min", max: "max", minLength: "minLength", maxLength: "maxLength", prefixIcon: "prefixIcon", suffixIcon: "suffixIcon", skeletonLoading: "skeletonLoading", skeletonTheme: "skeletonTheme", onlyChars: "onlyChars", isCapitalize: "isCapitalize", decimalPortion: "decimalPortion" }, outputs: { modelChange: "modelChange", changeEv: "changeEv" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"d-flex flex-column\">\r\n    @if(label){\r\n    <div [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\">\r\n    <label class=\"label\" [class.txt-clr-red]=\"myField.touched && myField.invalid\">\r\n        <span class=\"label-text\" [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\" [title]=\"label\">{{label}}</span><span class=\"txt-clr-red label-required\">{{required?'*':''}}</span>\r\n    </label>\r\n    </div>\r\n}\r\n\r\n    <div class=\"input-wrapper\" [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\" [class.plain]=\"!hasWrapper\" [class.error]=\"myField.touched && myField.invalid\" [class.input-disabled]=\"disabled\">\r\n        @if(prefixIcon) {\r\n            <mat-icon class=\"input-icon prefix-icon\">{{prefixIcon}}</mat-icon>\r\n        }\r\n        <input\r\n\r\n            [type]=\"inputType\"\r\n            [ngModel]=\"model\"\r\n            (ngModelChange)=\"onModelChange($event)\"\r\n            (keydown)=\"onKeyDown($event)\"\r\n            (focus)=\"onFocusIn($event)\"\r\n            (blur)=\"onFocusOut()\"\r\n            (change)=\"onChange()\"\r\n            [required]=\"required\"\r\n            [disabled]=\"disabled\"\r\n            [placeholder]=\"placeholder\"\r\n            [attr.min]=\"min || null\"\r\n            [attr.max]=\"max || null\"\r\n            [attr.minlength]=\"minLength\"\r\n            [attr.maxlength]=\"maxLength\"\r\n            [email]=\"type === 'email'\"\r\n            #myField=\"ngModel\"\r\n            class=\"inner-input\"\r\n        >\r\n        @if(type === 'password') {\r\n            <button type=\"button\" class=\"password-toggle\" (click)=\"togglePassword()\" tabindex=\"-1\">\r\n                <mat-icon>{{showPassword ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n            </button>\r\n        }\r\n        @if(suffixIcon && type !== 'password') {\r\n            <mat-icon class=\"input-icon suffix-icon\">{{suffixIcon}}</mat-icon>\r\n        }\r\n    </div>\r\n\r\n    @if(myField.touched && myField.invalid) {\r\n        @if(myField.errors?.['required']) {\r\n            <mat-hint class=\"hint\">{{label}} is Required!</mat-hint>\r\n        } @else if(myField.errors?.['email']) {\r\n            <mat-hint class=\"hint\">Please enter a valid email address.</mat-hint>\r\n        } @else if(myField.errors?.['minlength']) {\r\n            <mat-hint class=\"hint\">Minimum {{minLength}} characters required.</mat-hint>\r\n        } @else if(myField.errors?.['maxlength']) {\r\n            <mat-hint class=\"hint\">Maximum {{maxLength}} characters allowed.</mat-hint>\r\n        } @else if(myField.errors?.['min']) {\r\n            <mat-hint class=\"hint\">Value must be at least {{min}}.</mat-hint>\r\n        } @else if(myField.errors?.['max']) {\r\n            <mat-hint class=\"hint\">Value must be at most {{max}}.</mat-hint>\r\n        }\r\n    }\r\n</div>\r\n", styles: [".label{font-size:var(--osl-label-font-size);margin-bottom:5px;display:flex;align-items:center;overflow:hidden}.label-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.label-required{flex-shrink:0}.input-wrapper{display:flex;align-items:center;height:var(--osl-control-height);width:100%;border-radius:var(--osl-border-radius);border:1px solid var(--osl-border-color);padding:0 8px;gap:6px;transition:border-color .5s}.input-wrapper:focus-within{border-color:var(--osl-focus-border-color)}.input-wrapper.error{border-color:var(--osl-error-color)}.input-wrapper.input-disabled{background:#f5f5f5;opacity:.7;cursor:not-allowed}.input-wrapper.plain{padding:0;border:none;height:auto;gap:0}.input-wrapper.plain .inner-input{border:1px solid var(--osl-border-color);border-radius:var(--osl-border-radius);padding:5px;height:var(--osl-control-height)}.input-wrapper.plain .inner-input:focus{border-color:var(--osl-focus-border-color)}.input-wrapper.plain .inner-input.error{border-color:var(--osl-error-color)}.inner-input{flex:1;min-width:0;height:100%;border:none;outline:none;font-size:var(--osl-text-font-size);background:transparent;width:100%}.inner-input:disabled{cursor:not-allowed;background:transparent}.inner-input::placeholder{font-size:var(--osl-label-font-size);color:#aaa}.input-icon{font-size:18px;width:18px;height:18px;color:#888;flex-shrink:0;-webkit-user-select:none;user-select:none}.password-toggle{display:flex;align-items:center;justify-content:center;background:none;border:none;padding:0;cursor:pointer;color:#888;flex-shrink:0}.password-toggle mat-icon{font-size:18px;width:18px;height:18px}.password-toggle:hover{color:#333}.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.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.EmailValidator, selector: "[email][formControlName],[email][formControl],[email][ngModel]", inputs: ["email"] }, { 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: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: OslSkeletonDirective, selector: "[oslSkeleton]", inputs: ["oslSkeleton", "oslSkeletonType", "oslSkeletonAnimation", "oslSkeletonTheme", "oslSkeletonColor", "oslSkeletonHighlight", "oslSkeletonRadius", "oslSkeletonRows", "oslSkeletonRowGap", "oslSkeletonZIndex", "oslSkeletonDelay", "oslSkeletonDuration", "oslSkeletonMinHeight", "oslSkeletonForceReread", "oslSkeletonCircleSize", "oslSkeletonListItems", "oslSkeletonTableRows", "oslSkeletonTableCols", "oslSkeletonCardLines", "oslSkeletonBgColor"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: Oslinput, decorators: [{
             type: Component,
@@ -1455,7 +1455,7 @@ class Osltextarea {
         this.modelChange.emit(this.model);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: Osltextarea, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: Osltextarea, isStandalone: false, selector: "osl-textarea", inputs: { label: "label", rows: "rows", required: "required", disabled: "disabled", model: "model", placeholder: "placeholder", maxLength: "maxLength", minLength: "minLength", characterCounter: "characterCounter", resize: "resize", skeletonLoading: "skeletonLoading", skeletonTheme: "skeletonTheme" }, outputs: { modelChange: "modelChange", changeEv: "changeEv" }, ngImport: i0, template: "<div class=\"d-flex flex-column\">\r\n    @if(label){\r\n        <div  [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\">\r\n            <label class=\"label\" [class.txt-clr-red]=\"myField.touched && myField.invalid\">\r\n                <span class=\"label-text\" [title]=\"label\">{{label}}</span><span class=\"txt-clr-red label-required\">{{required?'*':''}}</span>\r\n            </label>\r\n    \r\n        </div>\r\n    }\r\n        \r\n    <div [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\">\r\n    <textarea\r\n        [rows]=\"rows\"\r\n        [ngModel]=\"model\"\r\n        (ngModelChange)=\"onModelChange($event)\"\r\n        (change)=\"changeEv.emit(model)\"\r\n        [required]=\"required\"\r\n        [disabled]=\"disabled\"\r\n        [placeholder]=\"placeholder\"\r\n        [attr.maxlength]=\"maxLength\"\r\n        [attr.minlength]=\"minLength\"\r\n        [style.resize]=\"resize\"\r\n        #myField=\"ngModel\"\r\n        [class.error]=\"myField.touched && myField.invalid\"\r\n    ></textarea>\r\n    </div>\r\n    <div class=\"textarea-footer\">\r\n        @if(myField.touched && myField.invalid) {\r\n            @if(myField.errors?.['required']) {\r\n                <mat-hint class=\"hint\">{{label}} is Required!</mat-hint>\r\n            } @else if(myField.errors?.['minlength']) {\r\n                <mat-hint class=\"hint\">Minimum {{minLength}} characters required.</mat-hint>\r\n            } @else if(myField.errors?.['maxlength']) {\r\n                <mat-hint class=\"hint\">Maximum {{maxLength}} characters allowed.</mat-hint>\r\n            }\r\n        } @else {\r\n            <span></span>\r\n        }\r\n        @if(showCounter) {\r\n            <span class=\"char-counter\" [class.counter-limit]=\"currentLength >= maxLength!\">\r\n                {{currentLength}}/{{maxLength}}\r\n            </span>\r\n        }\r\n    </div>\r\n</div>\r\n", styles: [".label{font-size:var(--osl-label-font-size);margin-bottom:5px;display:flex;align-items:center;overflow:hidden}.label-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.label-required{flex-shrink:0}textarea{width:100%;border-radius:var(--osl-border-radius);outline:none;padding:6px 8px;font-size:var(--osl-text-font-size);border:1px solid var(--osl-border-color);resize:none;font-family:inherit;transition:border-color .5s}textarea:focus{border-color:var(--osl-focus-border-color)}textarea:disabled{background:#f5f5f5;cursor:not-allowed;opacity:.7}textarea::placeholder{font-size:var(--osl-label-font-size);color:#aaa}textarea.error{border-color:var(--osl-error-color)}.textarea-footer{display:flex;justify-content:space-between;align-items:center;margin-top:2px}.hint{color:var(--osl-error-color);font-size:var(--osl-hint-font-size)}.char-counter{font-size:var(--osl-hint-font-size);color:#888;margin-left:auto}.char-counter.counter-limit{color:var(--osl-error-color);font-weight:500}.txt-clr-red{color:var(--osl-error-color)}\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$2.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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: Osltextarea, isStandalone: false, selector: "osl-textarea", inputs: { label: "label", rows: "rows", required: "required", disabled: "disabled", model: "model", placeholder: "placeholder", maxLength: "maxLength", minLength: "minLength", characterCounter: "characterCounter", resize: "resize", skeletonLoading: "skeletonLoading", skeletonTheme: "skeletonTheme" }, outputs: { modelChange: "modelChange", changeEv: "changeEv" }, ngImport: i0, template: "<div class=\"d-flex flex-column\">\r\n    @if(label){\r\n        <div  [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\">\r\n            <label class=\"label\" [class.txt-clr-red]=\"myField.touched && myField.invalid\">\r\n                <span class=\"label-text\" [title]=\"label\">{{label}}</span><span class=\"txt-clr-red label-required\">{{required?'*':''}}</span>\r\n            </label>\r\n    \r\n        </div>\r\n    }\r\n        \r\n    <div [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\">\r\n    <textarea\r\n        [rows]=\"rows\"\r\n        [ngModel]=\"model\"\r\n        (ngModelChange)=\"onModelChange($event)\"\r\n        (change)=\"changeEv.emit(model)\"\r\n        [required]=\"required\"\r\n        [disabled]=\"disabled\"\r\n        [placeholder]=\"placeholder\"\r\n        [attr.maxlength]=\"maxLength\"\r\n        [attr.minlength]=\"minLength\"\r\n        [style.resize]=\"resize\"\r\n        #myField=\"ngModel\"\r\n        [class.error]=\"myField.touched && myField.invalid\"\r\n    ></textarea>\r\n    </div>\r\n    <div class=\"textarea-footer\">\r\n        @if(myField.touched && myField.invalid) {\r\n            @if(myField.errors?.['required']) {\r\n                <mat-hint class=\"hint\">{{label}} is Required!</mat-hint>\r\n            } @else if(myField.errors?.['minlength']) {\r\n                <mat-hint class=\"hint\">Minimum {{minLength}} characters required.</mat-hint>\r\n            } @else if(myField.errors?.['maxlength']) {\r\n                <mat-hint class=\"hint\">Maximum {{maxLength}} characters allowed.</mat-hint>\r\n            }\r\n        } @else {\r\n            <span></span>\r\n        }\r\n        @if(showCounter) {\r\n            <span class=\"char-counter\" [class.counter-limit]=\"currentLength >= maxLength!\">\r\n                {{currentLength}}/{{maxLength}}\r\n            </span>\r\n        }\r\n    </div>\r\n</div>\r\n", styles: [".label{font-size:var(--osl-label-font-size);margin-bottom:5px;display:flex;align-items:center;overflow:hidden}.label-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.label-required{flex-shrink:0}textarea{width:100%;border-radius:var(--osl-border-radius);outline:none;padding:6px 8px;font-size:var(--osl-text-font-size);border:1px solid var(--osl-border-color);resize:none;font-family:inherit;transition:border-color .5s}textarea:focus{border-color:var(--osl-focus-border-color)}textarea:disabled{background:#f5f5f5;cursor:not-allowed;opacity:.7}textarea::placeholder{font-size:var(--osl-label-font-size);color:#aaa}textarea.error{border-color:var(--osl-error-color)}.textarea-footer{display:flex;justify-content:space-between;align-items:center;margin-top:2px}.hint{color:var(--osl-error-color);font-size:var(--osl-hint-font-size)}.char-counter{font-size:var(--osl-hint-font-size);color:#888;margin-left:auto}.char-counter.counter-limit{color:var(--osl-error-color);font-weight:500}.txt-clr-red{color:var(--osl-error-color)}\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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: Osltextarea, decorators: [{
             type: Component,
@@ -1540,7 +1540,7 @@ class OslSelect {
         return this.model !== null && this.model !== undefined && this.model !== '';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: OslSelect, isStandalone: false, selector: "osl-select", inputs: { label: "label", required: "required", disabled: "disabled", model: "model", datasource: "datasource", displayField: "displayField", valueField: "valueField", placeholder: "placeholder", loading: "loading", clearable: "clearable", skeletonLoading: "skeletonLoading", skeletonTheme: "skeletonTheme" }, outputs: { modelChange: "modelChange", changeEv: "changeEv" }, ngImport: i0, template: "<div class=\"d-flex flex-column\">\r\n    @if (label) {\r\n        <div [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\">\r\n            <label class=\"label\" [class.txt-clr-red]=\"myField.touched && myField.invalid\">\r\n                <span class=\"label-text\" [title]=\"label\">{{label}}</span><span class=\"txt-clr-red label-required\">{{required?'*':''}}</span>\r\n            </label>\r\n    \r\n        </div>\r\n\r\n    }\r\n\r\n    <div class=\"select-wrapper\" [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\" [class.error]=\"myField.touched && myField.invalid\" [class.select-disabled]=\"disabled || loading\">\r\n        @if(loading) {\r\n            <span class=\"select-spinner\"></span>\r\n        }\r\n        <select\r\n            [ngModel]=\"model\"\r\n            (ngModelChange)=\"onModelChange($event)\"\r\n            (change)=\"onChange()\"\r\n            [required]=\"required\"\r\n            [disabled]=\"disabled || loading\"\r\n            #myField=\"ngModel\"\r\n        >\r\n            <option value=\"\" [disabled]=\"required\" [hidden]=\"required\" selected>{{placeholder}}</option>\r\n            @for(item of datasource; track item) {\r\n                <option [value]=\"getValue(item)\">{{getDisplay(item)}}</option>\r\n            }\r\n        </select>\r\n        @if(clearable && hasValue && !disabled && !loading) {\r\n            <button type=\"button\" class=\"select-clear\" (click)=\"onClear($event)\" title=\"Clear\">\r\n                <mat-icon>close</mat-icon>\r\n            </button>\r\n        }\r\n        <mat-icon class=\"select-arrow\">expand_more</mat-icon>\r\n    </div>\r\n\r\n    @if(myField.touched && myField.invalid && required) {\r\n        <mat-hint class=\"hint\">{{label}} is Required!</mat-hint>\r\n    }\r\n</div>\r\n", styles: [".label{font-size:var(--osl-label-font-size);margin-bottom:5px;display:flex;align-items:center;overflow:hidden}.label-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.label-required{flex-shrink:0}.select-wrapper{position:relative;display:flex;align-items:center;height:var(--osl-control-height);width:100%;border-radius:var(--osl-border-radius);border:1px solid var(--osl-border-color);transition:border-color .5s}.select-wrapper:focus-within{border-color:var(--osl-focus-border-color)}.select-wrapper.error{border-color:var(--osl-error-color)}.select-wrapper.select-disabled{background:#f5f5f5;opacity:.7;cursor:not-allowed}.select-wrapper select{flex:1;height:100%;width:100%;font-size:var(--osl-text-font-size);border:none;outline:none;background:transparent;padding:0 32px 0 8px;cursor:pointer;appearance:none;-webkit-appearance:none}.select-wrapper select:disabled{cursor:not-allowed}.select-arrow{position:absolute;right:6px;font-size:18px;width:18px;height:18px;color:#888;pointer-events:none;-webkit-user-select:none;user-select:none}.select-clear{display:flex;align-items:center;justify-content:center;position:absolute;right:28px;background:none;border:none;padding:0;cursor:pointer;color:#aaa;z-index:1}.select-clear mat-icon{font-size:16px;width:16px;height:16px}.select-clear:hover{color:#333}.select-spinner{position:absolute;left:8px;width:14px;height:14px;border:2px solid var(--osl-border-color);border-top-color:var(--osl-focus-border-color);border-radius:50%;animation:select-spin .7s linear infinite;pointer-events:none}@keyframes select-spin{to{transform:rotate(360deg)}}.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.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.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$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: OslSkeletonDirective, selector: "[oslSkeleton]", inputs: ["oslSkeleton", "oslSkeletonType", "oslSkeletonAnimation", "oslSkeletonTheme", "oslSkeletonColor", "oslSkeletonHighlight", "oslSkeletonRadius", "oslSkeletonRows", "oslSkeletonRowGap", "oslSkeletonZIndex", "oslSkeletonDelay", "oslSkeletonDuration", "oslSkeletonMinHeight", "oslSkeletonForceReread", "oslSkeletonCircleSize", "oslSkeletonListItems", "oslSkeletonTableRows", "oslSkeletonTableCols", "oslSkeletonCardLines", "oslSkeletonBgColor"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: OslSelect, isStandalone: false, selector: "osl-select", inputs: { label: "label", required: "required", disabled: "disabled", model: "model", datasource: "datasource", displayField: "displayField", valueField: "valueField", placeholder: "placeholder", loading: "loading", clearable: "clearable", skeletonLoading: "skeletonLoading", skeletonTheme: "skeletonTheme" }, outputs: { modelChange: "modelChange", changeEv: "changeEv" }, ngImport: i0, template: "<div class=\"d-flex flex-column\">\r\n    @if (label) {\r\n        <div [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\">\r\n            <label class=\"label\" [class.txt-clr-red]=\"myField.touched && myField.invalid\">\r\n                <span class=\"label-text\" [title]=\"label\">{{label}}</span><span class=\"txt-clr-red label-required\">{{required?'*':''}}</span>\r\n            </label>\r\n    \r\n        </div>\r\n\r\n    }\r\n\r\n    <div class=\"select-wrapper\" [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\" [class.error]=\"myField.touched && myField.invalid\" [class.select-disabled]=\"disabled || loading\">\r\n        @if(loading) {\r\n            <span class=\"select-spinner\"></span>\r\n        }\r\n        <select\r\n            [ngModel]=\"model\"\r\n            (ngModelChange)=\"onModelChange($event)\"\r\n            (change)=\"onChange()\"\r\n            [required]=\"required\"\r\n            [disabled]=\"disabled || loading\"\r\n            #myField=\"ngModel\"\r\n        >\r\n            <option value=\"\" [disabled]=\"required\" [hidden]=\"required\" selected>{{placeholder}}</option>\r\n            @for(item of datasource; track item) {\r\n                <option [value]=\"getValue(item)\">{{getDisplay(item)}}</option>\r\n            }\r\n        </select>\r\n        @if(clearable && hasValue && !disabled && !loading) {\r\n            <button type=\"button\" class=\"select-clear\" (click)=\"onClear($event)\" title=\"Clear\">\r\n                <mat-icon>close</mat-icon>\r\n            </button>\r\n        }\r\n        <mat-icon class=\"select-arrow\">expand_more</mat-icon>\r\n    </div>\r\n\r\n    @if(myField.touched && myField.invalid && required) {\r\n        <mat-hint class=\"hint\">{{label}} is Required!</mat-hint>\r\n    }\r\n</div>\r\n", styles: [".label{font-size:var(--osl-label-font-size);margin-bottom:5px;display:flex;align-items:center;overflow:hidden}.label-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.label-required{flex-shrink:0}.select-wrapper{position:relative;display:flex;align-items:center;height:var(--osl-control-height);width:100%;border-radius:var(--osl-border-radius);border:1px solid var(--osl-border-color);transition:border-color .5s}.select-wrapper:focus-within{border-color:var(--osl-focus-border-color)}.select-wrapper.error{border-color:var(--osl-error-color)}.select-wrapper.select-disabled{background:#f5f5f5;opacity:.7;cursor:not-allowed}.select-wrapper select{flex:1;height:100%;width:100%;font-size:var(--osl-text-font-size);border:none;outline:none;background:transparent;padding:0 32px 0 8px;cursor:pointer;appearance:none;-webkit-appearance:none}.select-wrapper select:disabled{cursor:not-allowed}.select-arrow{position:absolute;right:6px;font-size:18px;width:18px;height:18px;color:#888;pointer-events:none;-webkit-user-select:none;user-select:none}.select-clear{display:flex;align-items:center;justify-content:center;position:absolute;right:28px;background:none;border:none;padding:0;cursor:pointer;color:#aaa;z-index:1}.select-clear mat-icon{font-size:16px;width:16px;height:16px}.select-clear:hover{color:#333}.select-spinner{position:absolute;left:8px;width:14px;height:14px;border:2px solid var(--osl-border-color);border-top-color:var(--osl-focus-border-color);border-radius:50%;animation:select-spin .7s linear infinite;pointer-events:none}@keyframes select-spin{to{transform:rotate(360deg)}}.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.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.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: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: OslSkeletonDirective, selector: "[oslSkeleton]", inputs: ["oslSkeleton", "oslSkeletonType", "oslSkeletonAnimation", "oslSkeletonTheme", "oslSkeletonColor", "oslSkeletonHighlight", "oslSkeletonRadius", "oslSkeletonRows", "oslSkeletonRowGap", "oslSkeletonZIndex", "oslSkeletonDelay", "oslSkeletonDuration", "oslSkeletonMinHeight", "oslSkeletonForceReread", "oslSkeletonCircleSize", "oslSkeletonListItems", "oslSkeletonTableRows", "oslSkeletonTableCols", "oslSkeletonCardLines", "oslSkeletonBgColor"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslSelect, decorators: [{
             type: Component,
@@ -1763,6 +1763,7 @@ class OslAutocomplete extends baseComponent {
     skeletonTheme = 'light';
     isLister = false;
     apiBody;
+    displayFn = null;
     modelChange = new EventEmitter();
     changeEv = new EventEmitter();
     listerComponent = inject(AUTOCOMPLETE_LISTER_COMPONENT);
@@ -1882,6 +1883,8 @@ class OslAutocomplete extends baseComponent {
         this.cdr.markForCheck();
     }
     getDisplay(item) {
+        if (this.displayFn)
+            return this.displayFn(item);
         return item && this.displayField ? item[this.displayField] : String(item);
     }
     getValue(item) {
@@ -1975,7 +1978,7 @@ class OslAutocomplete extends baseComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslAutocomplete, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: OslAutocomplete, isStandalone: false, selector: "osl-autocomplete", inputs: { label: "label", required: "required", disabled: "disabled", model: "model", datasource: "datasource", displayField: "displayField", valueField: "valueField", placeholder: "placeholder", loading: "loading", searchType: "searchType", methodName: "methodName", configMethodName: "configMethodName", service: "service", object: "object", skeletonLoading: "skeletonLoading", skeletonTheme: "skeletonTheme", isLister: "isLister", apiBody: "apiBody" }, outputs: { datasourceChange: "datasourceChange", modelChange: "modelChange", changeEv: "changeEv" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, usesInheritance: true, usesOnChanges: true, 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]=\"isInvalid\">\n                <span class=\"label-text\" [title]=\"label\">{{label}}</span><span class=\"txt-clr-red label-required\">{{required?'*':''}}</span>\n                @if(service?.route && !disabled) {\n                    <svg class=\"ac-hint-icon\"\n                        [matTooltip]=\"model ? 'Edit ' + label : 'Add New'\"\n                        matTooltipPosition=\"above\"\n                        (click)=\"onHintClick($event)\"\n                        xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                        <path d=\"M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z\"/>\n                    </svg>\n                }\n            </label>\n        </div>\n    }\n    <div class=\"autocomplete-wrapper\" [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\" [class.error]=\"isInvalid\" [class.autocomplete-wrapper--api]=\"searchType == 'Api'\">\n        <input\n            (input)=\"onInput($any($event.target).value)\"\n            (focus)=\"onFocus()\"\n            (focusout)=\"onFocusOut()\"\n            [disabled]=\"disabled || loading\"\n            [formControl]=\"inputControl\"\n            [class.error]=\"isInvalid\"\n            [placeholder]=\"loading ? 'Loading...' : placeholder\"\n            autocomplete=\"off\"\n            (keyup.enter)=\"isLister ? openLister() : null\"\n        >\n        @if(loading) {\n            <span class=\"ac-spinner\"></span>\n        } @else {\n            @if(inputControl.value && !disabled) {\n                <button type=\"button\" class=\"ac-clear\" [class.ac-clear--shifted]=\"searchType == 'Api'\" (mousedown)=\"clearValue($event)\" tabindex=\"-1\" title=\"Clear\">\n                    <mat-icon>close</mat-icon>\n                </button>\n            }\n            @if(searchType == 'Api' && isLister && !disabled) {\n                <button  type=\"button\" class=\"ac-lister-btn\" (mousedown)=\"$event.preventDefault(); openLister()\" tabindex=\"-1\" title=\"Browse list or press Enter\">\n                     <mat-icon>manage_search</mat-icon>\n                </button>\n            }\n        }\n        @if(showDropdown && !loading) {\n            <div class=\"dropdown\" [ngStyle]=\"dropdownStyle\">\n                @if(filteredItems.length > 0) {\n                    @for(item of filteredItems; track item) {\n                        <div class=\"dropdown-item\" (mousedown)=\"selectItem(item)\">{{getDisplay(item)}}</div>\n                    }\n                } @else {\n                    @if(searchType == 'Local'){\n                        <div class=\"no-results\">No results found</div>\n                    }\n                }\n            </div>\n        }\n    </div>\n    @if(isInvalid) {\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;display:flex;align-items:center;overflow:hidden}.label-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.label-required{flex-shrink:0}.autocomplete-wrapper{position:relative;display:flex;align-items:center}.autocomplete-wrapper 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 30px 0 8px;font-size:var(--osl-text-font-size);transition:border-color .5s}.autocomplete-wrapper input:focus{border-color:var(--osl-focus-border-color)}.autocomplete-wrapper input:disabled{background:#f5f5f5;cursor:not-allowed;opacity:.7}.autocomplete-wrapper input::placeholder{font-size:var(--osl-label-font-size);color:#aaa;font-size:12px}.autocomplete-wrapper input.error{border-color:var(--osl-error-color)}.ac-spinner{position:absolute;right:8px;width:14px;height:14px;border:2px solid var(--osl-border-color);border-top-color:var(--osl-focus-border-color);border-radius:50%;animation:ac-spin .7s linear infinite;pointer-events:none}@keyframes ac-spin{to{transform:rotate(360deg)}}.ac-clear{position:absolute;right:6px;display:flex;align-items:center;background:none;border:none;padding:0;cursor:pointer;color:#aaa}.ac-clear mat-icon{font-size:16px;width:16px;height:16px}.ac-clear:hover{color:#333}.ac-clear--shifted{right:40px}.ac-lister-btn{position:absolute;right:5px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:2px;cursor:pointer;border-radius:4px;color:#aaa;opacity:.75;transition:opacity .15s,transform .1s}.ac-lister-btn:hover{opacity:1}.ac-lister-btn:active{transform:translateY(calc(-50% + 1px))}.ac-lister-img{width:24px;height:24px;display:block;pointer-events:none}.autocomplete-wrapper--api input{padding-right:64px}.dropdown{z-index:9999;background:#fff;border:1px solid var(--osl-border-color);border-top:none;border-radius:0 0 var(--osl-border-radius) var(--osl-border-radius);max-height:200px;overflow-y:auto;box-shadow:0 4px 8px #00000014}.dropdown-item{padding:8px 10px;font-size:var(--osl-label-font-size);cursor:pointer}.dropdown-item:hover{background:#f5f5f5}.no-results{padding:8px 10px;font-size:var(--osl-label-font-size);color:#aaa;font-style:italic}.hint{color:var(--osl-error-color);margin-top:2px;font-size:var(--osl-hint-font-size)}.txt-clr-red{color:var(--osl-error-color)}.ac-hint-icon{width:12px;height:12px;vertical-align:middle;margin-left:4px;color:var(--osl-focus-border-color, #1976d2);cursor:pointer;opacity:.6;transition:opacity .15s}.ac-hint-icon:hover{opacity:1}\n"], dependencies: [{ kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: OslSkeletonDirective, selector: "[oslSkeleton]", inputs: ["oslSkeleton", "oslSkeletonType", "oslSkeletonAnimation", "oslSkeletonTheme", "oslSkeletonColor", "oslSkeletonHighlight", "oslSkeletonRadius", "oslSkeletonRows", "oslSkeletonRowGap", "oslSkeletonZIndex", "oslSkeletonDelay", "oslSkeletonDuration", "oslSkeletonMinHeight", "oslSkeletonForceReread", "oslSkeletonCircleSize", "oslSkeletonListItems", "oslSkeletonTableRows", "oslSkeletonTableCols", "oslSkeletonCardLines", "oslSkeletonBgColor"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: OslAutocomplete, isStandalone: false, selector: "osl-autocomplete", inputs: { label: "label", required: "required", disabled: "disabled", model: "model", datasource: "datasource", displayField: "displayField", valueField: "valueField", placeholder: "placeholder", loading: "loading", searchType: "searchType", methodName: "methodName", configMethodName: "configMethodName", service: "service", object: "object", skeletonLoading: "skeletonLoading", skeletonTheme: "skeletonTheme", isLister: "isLister", apiBody: "apiBody", displayFn: "displayFn" }, outputs: { datasourceChange: "datasourceChange", modelChange: "modelChange", changeEv: "changeEv" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, usesInheritance: true, usesOnChanges: true, 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]=\"isInvalid\">\n                <span class=\"label-text\" [title]=\"label\">{{label}}</span><span class=\"txt-clr-red label-required\">{{required?'*':''}}</span>\n                @if(service?.route && !disabled) {\n                    <svg class=\"ac-hint-icon\"\n                        [matTooltip]=\"model ? 'Edit ' + label : 'Add New'\"\n                        matTooltipPosition=\"above\"\n                        (click)=\"onHintClick($event)\"\n                        xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                        <path d=\"M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z\"/>\n                    </svg>\n                }\n            </label>\n        </div>\n    }\n    <div class=\"autocomplete-wrapper\" [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\" [class.error]=\"isInvalid\" [class.autocomplete-wrapper--api]=\"searchType == 'Api'\">\n        <input\n            (input)=\"onInput($any($event.target).value)\"\n            (focus)=\"onFocus()\"\n            (focusout)=\"onFocusOut()\"\n            [disabled]=\"disabled || loading\"\n            [formControl]=\"inputControl\"\n            [class.error]=\"isInvalid\"\n            [placeholder]=\"loading ? 'Loading...' : placeholder\"\n            autocomplete=\"off\"\n            (keyup.enter)=\"isLister ? openLister() : null\"\n        >\n        @if(loading) {\n            <span class=\"ac-spinner\"></span>\n        } @else {\n            @if(inputControl.value && !disabled) {\n                <button type=\"button\" class=\"ac-clear\" [class.ac-clear--shifted]=\"searchType == 'Api'\" (mousedown)=\"clearValue($event)\" tabindex=\"-1\" title=\"Clear\">\n                    <mat-icon>close</mat-icon>\n                </button>\n            }\n            @if(searchType == 'Api' && isLister && !disabled) {\n                <button  type=\"button\" class=\"ac-lister-btn\" (mousedown)=\"$event.preventDefault(); openLister()\" tabindex=\"-1\" title=\"Browse list or press Enter\">\n                     <mat-icon>manage_search</mat-icon>\n                </button>\n            }\n        }\n        @if(showDropdown && !loading) {\n            <div class=\"dropdown\" [ngStyle]=\"dropdownStyle\">\n                @if(filteredItems.length > 0) {\n                    @for(item of filteredItems; track item) {\n                        <div class=\"dropdown-item\" (mousedown)=\"selectItem(item)\">{{getDisplay(item)}}</div>\n                    }\n                } @else {\n                    @if(searchType == 'Local'){\n                        <div class=\"no-results\">No results found</div>\n                    }\n                }\n            </div>\n        }\n    </div>\n    @if(isInvalid) {\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;display:flex;align-items:center;overflow:hidden}.label-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.label-required{flex-shrink:0}.autocomplete-wrapper{position:relative;display:flex;align-items:center}.autocomplete-wrapper 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 30px 0 8px;font-size:var(--osl-text-font-size);transition:border-color .5s}.autocomplete-wrapper input:focus{border-color:var(--osl-focus-border-color)}.autocomplete-wrapper input:disabled{background:#f5f5f5;cursor:not-allowed;opacity:.7}.autocomplete-wrapper input::placeholder{font-size:var(--osl-label-font-size);color:#aaa;font-size:12px}.autocomplete-wrapper input.error{border-color:var(--osl-error-color)}.ac-spinner{position:absolute;right:8px;width:14px;height:14px;border:2px solid var(--osl-border-color);border-top-color:var(--osl-focus-border-color);border-radius:50%;animation:ac-spin .7s linear infinite;pointer-events:none}@keyframes ac-spin{to{transform:rotate(360deg)}}.ac-clear{position:absolute;right:6px;display:flex;align-items:center;background:none;border:none;padding:0;cursor:pointer;color:#aaa}.ac-clear mat-icon{font-size:16px;width:16px;height:16px}.ac-clear:hover{color:#333}.ac-clear--shifted{right:40px}.ac-lister-btn{position:absolute;right:5px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:2px;cursor:pointer;border-radius:4px;color:#aaa;opacity:.75;transition:opacity .15s,transform .1s}.ac-lister-btn:hover{opacity:1}.ac-lister-btn:active{transform:translateY(calc(-50% + 1px))}.ac-lister-img{width:24px;height:24px;display:block;pointer-events:none}.autocomplete-wrapper--api input{padding-right:64px}.dropdown{z-index:9999;background:#fff;border:1px solid var(--osl-border-color);border-top:none;border-radius:0 0 var(--osl-border-radius) var(--osl-border-radius);max-height:200px;overflow-y:auto;box-shadow:0 4px 8px #00000014}.dropdown-item{padding:8px 10px;font-size:var(--osl-label-font-size);cursor:pointer}.dropdown-item:hover{background:#f5f5f5}.no-results{padding:8px 10px;font-size:var(--osl-label-font-size);color:#aaa;font-style:italic}.hint{color:var(--osl-error-color);margin-top:2px;font-size:var(--osl-hint-font-size)}.txt-clr-red{color:var(--osl-error-color)}.ac-hint-icon{width:12px;height:12px;vertical-align:middle;margin-left:4px;color:var(--osl-focus-border-color, #1976d2);cursor:pointer;opacity:.6;transition:opacity .15s}.ac-hint-icon:hover{opacity:1}\n"], dependencies: [{ kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: OslSkeletonDirective, selector: "[oslSkeleton]", inputs: ["oslSkeleton", "oslSkeletonType", "oslSkeletonAnimation", "oslSkeletonTheme", "oslSkeletonColor", "oslSkeletonHighlight", "oslSkeletonRadius", "oslSkeletonRows", "oslSkeletonRowGap", "oslSkeletonZIndex", "oslSkeletonDelay", "oslSkeletonDuration", "oslSkeletonMinHeight", "oslSkeletonForceReread", "oslSkeletonCircleSize", "oslSkeletonListItems", "oslSkeletonTableRows", "oslSkeletonTableCols", "oslSkeletonCardLines", "oslSkeletonBgColor"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslAutocomplete, decorators: [{
             type: Component,
@@ -2036,6 +2039,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             }], apiBody: [{
                 type: Input,
                 args: ['apiBody']
+            }], displayFn: [{
+                type: Input,
+                args: ['displayFn']
             }], modelChange: [{
                 type: Output
             }], changeEv: [{
@@ -2178,7 +2184,7 @@ class OslFileUpload {
         return `Max ${this.maxSize} B`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslFileUpload, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: OslFileUpload, isStandalone: false, selector: "osl-file-upload", inputs: { label: "label", required: "required", disabled: "disabled", model: "model", accept: "accept", multiple: "multiple", maxSize: "maxSize", skeletonLoading: "skeletonLoading", skeletonTheme: "skeletonTheme", fileMode: "fileMode", downloadFn: "downloadFn" }, outputs: { modelChange: "modelChange", changeEv: "changeEv" }, ngImport: i0, template: "<div class=\"d-flex flex-column\">\r\n    <div  [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\">\r\n    <label class=\"label\" [class.txt-clr-red]=\"isInvalid\">\r\n        <span class=\"label-text\" [title]=\"label\">{{label}}</span><span class=\"txt-clr-red label-required\">{{required?'*':''}}</span>\r\n    </label>\r\n    </div>\r\n\r\n    <input\r\n        type=\"file\"\r\n        [accept]=\"accept\"\r\n        [multiple]=\"multiple\"\r\n        [disabled]=\"disabled\"\r\n        (change)=\"onFileChange($event)\"\r\n        #fileInput\r\n        class=\"file-input\"\r\n    >\r\n\r\n    <div\r\n     [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\"\r\n        class=\"drop-zone\"\r\n        [class.error]=\"isInvalid || sizeError\"\r\n        [class.file-disabled]=\"disabled\"\r\n        [class.drag-over]=\"isDragOver\"\r\n        [class.has-file]=\"isBase64Mode ? !!savedFileName : !!model\"\r\n        (click)=\"isBase64Mode && savedFileName ? null : triggerInput(fileInput)\"\r\n        (dragover)=\"onDragOver($event)\"\r\n        (dragleave)=\"onDragLeave()\"\r\n        (drop)=\"onDrop($event)\"\r\n    >\r\n        @if(isBase64Mode) {\r\n            @if(savedFileName) {\r\n                <div class=\"file-list\">\r\n                    <mat-icon class=\"file-icon\">insert_drive_file</mat-icon>\r\n                    <span class=\"file-name\">{{ savedFileName }}</span>\r\n                    <button type=\"button\" class=\"download-btn\" (click)=\"onDownload()\" title=\"Download\">\r\n                        <mat-icon>download</mat-icon>\r\n                    </button>\r\n                    @if(!disabled) {\r\n                        <button type=\"button\" class=\"clear-btn\" (click)=\"clearFiles($event)\" title=\"Remove\">\r\n                            <mat-icon>close</mat-icon>\r\n                        </button>\r\n                    }\r\n                </div>\r\n            } @else {\r\n                <div class=\"drop-content\">\r\n                    <mat-icon class=\"upload-icon\">upload_file</mat-icon>\r\n                    <div class=\"drop-text\">\r\n                        <span class=\"browse-link\">Browse</span> or drag &amp; drop\r\n                    </div>\r\n                    @if(accept) { <div class=\"drop-meta\">{{accept}}</div> }\r\n                    @if(maxSize) { <div class=\"drop-meta\">{{maxSizeLabel}}</div> }\r\n                </div>\r\n            }\r\n        } @else {\r\n            @if(!model) {\r\n                <div class=\"drop-content\">\r\n                    <mat-icon class=\"upload-icon\">upload_file</mat-icon>\r\n                    <div class=\"drop-text\">\r\n                        <span class=\"browse-link\">Browse</span> or drag &amp; drop\r\n                    </div>\r\n                    @if(accept) { <div class=\"drop-meta\">{{accept}}</div> }\r\n                    @if(maxSize) { <div class=\"drop-meta\">{{maxSizeLabel}}</div> }\r\n                </div>\r\n            } @else {\r\n                <div class=\"file-list\">\r\n                    <mat-icon class=\"file-icon\">insert_drive_file</mat-icon>\r\n                    <span class=\"file-name\">{{fileNames}}</span>\r\n                    <button type=\"button\" class=\"clear-btn\" (click)=\"clearFiles($event)\" title=\"Remove\">\r\n                        <mat-icon>close</mat-icon>\r\n                    </button>\r\n                </div>\r\n            }\r\n        }\r\n    </div>\r\n\r\n    @if(sizeError) {\r\n        <mat-hint class=\"hint\">File exceeds the {{maxSizeLabel}} limit.</mat-hint>\r\n    } @else if(isInvalid) {\r\n        <mat-hint class=\"hint\">{{label}} is Required!</mat-hint>\r\n    }\r\n</div>\r\n", styles: [".label{font-size:var(--osl-label-font-size);margin-bottom:5px;display:flex;align-items:center;overflow:hidden}.label-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.label-required{flex-shrink:0}.file-input{display:none}.drop-zone{width:100%;min-height:var(--osl-control-height);border-radius:var(--osl-border-radius);border:1.5px dashed var(--osl-border-color);cursor:pointer;transition:border-color .3s,background .3s;display:flex;align-items:center;justify-content:center;padding:8px}.drop-zone:hover:not(.file-disabled){border-color:var(--osl-focus-border-color);background:#00000003}.drop-zone.drag-over{border-color:var(--osl-focus-border-color);background:#00000008}.drop-zone.has-file{border-style:solid;border-color:var(--osl-border-color)}.drop-zone.error{border-color:var(--osl-error-color)}.drop-zone.file-disabled{opacity:.6;cursor:not-allowed;background:#f5f5f5}.drop-content{display:flex;flex-direction:column;align-items:center;gap:4px;color:#888;pointer-events:none}.upload-icon{font-size:28px;width:28px;height:28px;color:#bbb}.drop-text{font-size:var(--osl-label-font-size)}.browse-link{color:var(--osl-focus-border-color);font-weight:500}.drop-meta{font-size:var(--osl-hint-font-size);color:#bbb}.file-list{display:flex;align-items:center;gap:8px;width:100%;pointer-events:none}.file-icon{font-size:20px;width:20px;height:20px;color:#888;flex-shrink:0}.file-name{flex:1;font-size:var(--osl-text-font-size);color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.clear-btn,.download-btn{pointer-events:all;display:flex;align-items:center;background:none;border:none;cursor:pointer;color:#aaa;padding:0;flex-shrink:0}.clear-btn mat-icon,.download-btn mat-icon{font-size:16px;width:16px;height:16px}.clear-btn:hover{color:var(--osl-error-color)}.download-btn:hover{color:var(--osl-focus-border-color)}.hint{color:var(--osl-error-color);margin-top:2px;font-size:var(--osl-hint-font-size)}.txt-clr-red{color:var(--osl-error-color)}\n"], dependencies: [{ kind: "directive", type: i2$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: OslSkeletonDirective, selector: "[oslSkeleton]", inputs: ["oslSkeleton", "oslSkeletonType", "oslSkeletonAnimation", "oslSkeletonTheme", "oslSkeletonColor", "oslSkeletonHighlight", "oslSkeletonRadius", "oslSkeletonRows", "oslSkeletonRowGap", "oslSkeletonZIndex", "oslSkeletonDelay", "oslSkeletonDuration", "oslSkeletonMinHeight", "oslSkeletonForceReread", "oslSkeletonCircleSize", "oslSkeletonListItems", "oslSkeletonTableRows", "oslSkeletonTableCols", "oslSkeletonCardLines", "oslSkeletonBgColor"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: OslFileUpload, isStandalone: false, selector: "osl-file-upload", inputs: { label: "label", required: "required", disabled: "disabled", model: "model", accept: "accept", multiple: "multiple", maxSize: "maxSize", skeletonLoading: "skeletonLoading", skeletonTheme: "skeletonTheme", fileMode: "fileMode", downloadFn: "downloadFn" }, outputs: { modelChange: "modelChange", changeEv: "changeEv" }, ngImport: i0, template: "<div class=\"d-flex flex-column\">\r\n    <div  [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\">\r\n    <label class=\"label\" [class.txt-clr-red]=\"isInvalid\">\r\n        <span class=\"label-text\" [title]=\"label\">{{label}}</span><span class=\"txt-clr-red label-required\">{{required?'*':''}}</span>\r\n    </label>\r\n    </div>\r\n\r\n    <input\r\n        type=\"file\"\r\n        [accept]=\"accept\"\r\n        [multiple]=\"multiple\"\r\n        [disabled]=\"disabled\"\r\n        (change)=\"onFileChange($event)\"\r\n        #fileInput\r\n        class=\"file-input\"\r\n    >\r\n\r\n    <div\r\n     [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\"\r\n        class=\"drop-zone\"\r\n        [class.error]=\"isInvalid || sizeError\"\r\n        [class.file-disabled]=\"disabled\"\r\n        [class.drag-over]=\"isDragOver\"\r\n        [class.has-file]=\"isBase64Mode ? !!savedFileName : !!model\"\r\n        (click)=\"isBase64Mode && savedFileName ? null : triggerInput(fileInput)\"\r\n        (dragover)=\"onDragOver($event)\"\r\n        (dragleave)=\"onDragLeave()\"\r\n        (drop)=\"onDrop($event)\"\r\n    >\r\n        @if(isBase64Mode) {\r\n            @if(savedFileName) {\r\n                <div class=\"file-list\">\r\n                    <mat-icon class=\"file-icon\">insert_drive_file</mat-icon>\r\n                    <span class=\"file-name\">{{ savedFileName }}</span>\r\n                    <button type=\"button\" class=\"download-btn\" (click)=\"onDownload()\" title=\"Download\">\r\n                        <mat-icon>download</mat-icon>\r\n                    </button>\r\n                    @if(!disabled) {\r\n                        <button type=\"button\" class=\"clear-btn\" (click)=\"clearFiles($event)\" title=\"Remove\">\r\n                            <mat-icon>close</mat-icon>\r\n                        </button>\r\n                    }\r\n                </div>\r\n            } @else {\r\n                <div class=\"drop-content\">\r\n                    <mat-icon class=\"upload-icon\">upload_file</mat-icon>\r\n                    <div class=\"drop-text\">\r\n                        <span class=\"browse-link\">Browse</span> or drag &amp; drop\r\n                    </div>\r\n                    @if(accept) { <div class=\"drop-meta\">{{accept}}</div> }\r\n                    @if(maxSize) { <div class=\"drop-meta\">{{maxSizeLabel}}</div> }\r\n                </div>\r\n            }\r\n        } @else {\r\n            @if(!model) {\r\n                <div class=\"drop-content\">\r\n                    <mat-icon class=\"upload-icon\">upload_file</mat-icon>\r\n                    <div class=\"drop-text\">\r\n                        <span class=\"browse-link\">Browse</span> or drag &amp; drop\r\n                    </div>\r\n                    @if(accept) { <div class=\"drop-meta\">{{accept}}</div> }\r\n                    @if(maxSize) { <div class=\"drop-meta\">{{maxSizeLabel}}</div> }\r\n                </div>\r\n            } @else {\r\n                <div class=\"file-list\">\r\n                    <mat-icon class=\"file-icon\">insert_drive_file</mat-icon>\r\n                    <span class=\"file-name\">{{fileNames}}</span>\r\n                    <button type=\"button\" class=\"clear-btn\" (click)=\"clearFiles($event)\" title=\"Remove\">\r\n                        <mat-icon>close</mat-icon>\r\n                    </button>\r\n                </div>\r\n            }\r\n        }\r\n    </div>\r\n\r\n    @if(sizeError) {\r\n        <mat-hint class=\"hint\">File exceeds the {{maxSizeLabel}} limit.</mat-hint>\r\n    } @else if(isInvalid) {\r\n        <mat-hint class=\"hint\">{{label}} is Required!</mat-hint>\r\n    }\r\n</div>\r\n", styles: [".label{font-size:var(--osl-label-font-size);margin-bottom:5px;display:flex;align-items:center;overflow:hidden}.label-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.label-required{flex-shrink:0}.file-input{display:none}.drop-zone{width:100%;min-height:var(--osl-control-height);border-radius:var(--osl-border-radius);border:1.5px dashed var(--osl-border-color);cursor:pointer;transition:border-color .3s,background .3s;display:flex;align-items:center;justify-content:center;padding:8px}.drop-zone:hover:not(.file-disabled){border-color:var(--osl-focus-border-color);background:#00000003}.drop-zone.drag-over{border-color:var(--osl-focus-border-color);background:#00000008}.drop-zone.has-file{border-style:solid;border-color:var(--osl-border-color)}.drop-zone.error{border-color:var(--osl-error-color)}.drop-zone.file-disabled{opacity:.6;cursor:not-allowed;background:#f5f5f5}.drop-content{display:flex;flex-direction:column;align-items:center;gap:4px;color:#888;pointer-events:none}.upload-icon{font-size:28px;width:28px;height:28px;color:#bbb}.drop-text{font-size:var(--osl-label-font-size)}.browse-link{color:var(--osl-focus-border-color);font-weight:500}.drop-meta{font-size:var(--osl-hint-font-size);color:#bbb}.file-list{display:flex;align-items:center;gap:8px;width:100%;pointer-events:none}.file-icon{font-size:20px;width:20px;height:20px;color:#888;flex-shrink:0}.file-name{flex:1;font-size:var(--osl-text-font-size);color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.clear-btn,.download-btn{pointer-events:all;display:flex;align-items:center;background:none;border:none;cursor:pointer;color:#aaa;padding:0;flex-shrink:0}.clear-btn mat-icon,.download-btn mat-icon{font-size:16px;width:16px;height:16px}.clear-btn:hover{color:var(--osl-error-color)}.download-btn:hover{color:var(--osl-focus-border-color)}.hint{color:var(--osl-error-color);margin-top:2px;font-size:var(--osl-hint-font-size)}.txt-clr-red{color:var(--osl-error-color)}\n"], dependencies: [{ kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: OslSkeletonDirective, selector: "[oslSkeleton]", inputs: ["oslSkeleton", "oslSkeletonType", "oslSkeletonAnimation", "oslSkeletonTheme", "oslSkeletonColor", "oslSkeletonHighlight", "oslSkeletonRadius", "oslSkeletonRows", "oslSkeletonRowGap", "oslSkeletonZIndex", "oslSkeletonDelay", "oslSkeletonDuration", "oslSkeletonMinHeight", "oslSkeletonForceReread", "oslSkeletonCircleSize", "oslSkeletonListItems", "oslSkeletonTableRows", "oslSkeletonTableCols", "oslSkeletonCardLines", "oslSkeletonBgColor"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslFileUpload, decorators: [{
             type: Component,
@@ -2280,7 +2286,7 @@ class OslDatepicker {
         return localISO;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslDatepicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: OslDatepicker, isStandalone: false, selector: "osl-datepicker", inputs: { label: "label", required: "required", disabled: "disabled", model: "model", dateType: "dateType", placeholder: "placeholder", minDate: "minDate", maxDate: "maxDate", skeletonLoading: "skeletonLoading", skeletonTheme: "skeletonTheme" }, outputs: { modelChange: "modelChange", changeEv: "changeEv" }, ngImport: i0, template: "<div class=\"d-flex flex-column\">\r\n    @if (label) {\r\n        <div [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\">\r\n            <label class=\"label\" [class.txt-clr-red]=\"myField.touched && myField.invalid\">\r\n                <span class=\"label-text\" [title]=\"label\">{{label}}</span><span class=\"txt-clr-red label-required\">{{required ? '*' : ''}}</span>\r\n            </label>\r\n        </div>\r\n    }\r\n    <div class=\"input-wrapper\" [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\">\r\n        <input\r\n            class=\"date-input\"\r\n            [matDatepicker]=\"picker\"\r\n            [ngModel]=\"model\"\r\n     \r\n            (dateChange)=\"onDateChange($event.value)\"\r\n            [required]=\"required\"\r\n            [disabled]=\"disabled\"\r\n            [min]=\"minDateObj\"\r\n            [max]=\"maxDateObj\"\r\n            [placeholder]=\"placeholder || 'DD/MMM/YYYY'\"\r\n            [class.error]=\"myField.touched && myField.invalid\"\r\n            #myField=\"ngModel\"\r\n        >\r\n        <mat-datepicker-toggle class=\"picker-toggle\" [for]=\"picker\" [disabled]=\"disabled\">\r\n            <mat-icon matDatepickerToggleIcon>calendar_today</mat-icon>\r\n        </mat-datepicker-toggle>\r\n        <mat-datepicker #picker></mat-datepicker>\r\n    </div>\r\n    @if (myField.touched && myField.invalid && required) {\r\n        <mat-hint class=\"hint\">{{label}} is Required!</mat-hint>\r\n    }\r\n</div>\r\n", styles: [".label{font-size:var(--osl-label-font-size);margin-bottom:5px;display:flex;align-items:center;overflow:hidden}.label-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.label-required{flex-shrink:0}.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}.date-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 36px 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}.date-input::placeholder{color:#bbb}.date-input:hover:not(:disabled){border-color:var(--osl-focus-border-color)}.date-input:focus{border-color:var(--osl-focus-border-color);box-shadow:0 0 0 3px var(--osl-focus-shadow, rgba(99, 102, 241, .14))}.date-input:disabled{background-color:#f5f5f5;cursor:not-allowed;opacity:.7}.date-input.error{border-color:var(--osl-error-color)}.date-input.error:focus{box-shadow:0 0 0 3px var(--osl-error-shadow, rgba(220, 38, 38, .14))}.picker-toggle{position:absolute;right:4px;display:flex;align-items:center}.picker-toggle ::ng-deep .mat-mdc-icon-button{width:28px;height:28px;padding:4px;line-height:1;display:flex;align-items:center;justify-content:center}.picker-toggle ::ng-deep .mat-mdc-icon-button:hover .mat-mdc-button-persistent-ripple:before{opacity:0}.picker-toggle ::ng-deep .mat-mdc-icon-button .mat-icon{font-size:16px;width:16px;height:16px;color:#333;opacity:.45;transition:opacity .15s,background-color .15s;border-radius:4px;padding:3px;box-sizing:content-box}.picker-toggle ::ng-deep .mat-mdc-icon-button:hover:not([disabled]) .mat-icon{opacity:.9;background-color:#00000012}.picker-toggle ::ng-deep .mat-mdc-icon-button[disabled]{pointer-events:none;opacity:.4}\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$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: OslSkeletonDirective, selector: "[oslSkeleton]", inputs: ["oslSkeleton", "oslSkeletonType", "oslSkeletonAnimation", "oslSkeletonTheme", "oslSkeletonColor", "oslSkeletonHighlight", "oslSkeletonRadius", "oslSkeletonRows", "oslSkeletonRowGap", "oslSkeletonZIndex", "oslSkeletonDelay", "oslSkeletonDuration", "oslSkeletonMinHeight", "oslSkeletonForceReread", "oslSkeletonCircleSize", "oslSkeletonListItems", "oslSkeletonTableRows", "oslSkeletonTableCols", "oslSkeletonCardLines", "oslSkeletonBgColor"] }, { kind: "component", type: i5.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i5.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: OslDatepicker, isStandalone: false, selector: "osl-datepicker", inputs: { label: "label", required: "required", disabled: "disabled", model: "model", dateType: "dateType", placeholder: "placeholder", minDate: "minDate", maxDate: "maxDate", skeletonLoading: "skeletonLoading", skeletonTheme: "skeletonTheme" }, outputs: { modelChange: "modelChange", changeEv: "changeEv" }, ngImport: i0, template: "<div class=\"d-flex flex-column\">\r\n    @if (label) {\r\n        <div [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\">\r\n            <label class=\"label\" [class.txt-clr-red]=\"myField.touched && myField.invalid\">\r\n                <span class=\"label-text\" [title]=\"label\">{{label}}</span><span class=\"txt-clr-red label-required\">{{required ? '*' : ''}}</span>\r\n            </label>\r\n        </div>\r\n    }\r\n    <div class=\"input-wrapper\" [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\">\r\n        <input\r\n            class=\"date-input\"\r\n            [matDatepicker]=\"picker\"\r\n            [ngModel]=\"model\"\r\n     \r\n            (dateChange)=\"onDateChange($event.value)\"\r\n            [required]=\"required\"\r\n            [disabled]=\"disabled\"\r\n            [min]=\"minDateObj\"\r\n            [max]=\"maxDateObj\"\r\n            [placeholder]=\"placeholder || 'DD/MMM/YYYY'\"\r\n            [class.error]=\"myField.touched && myField.invalid\"\r\n            #myField=\"ngModel\"\r\n        >\r\n        <mat-datepicker-toggle class=\"picker-toggle\" [for]=\"picker\" [disabled]=\"disabled\">\r\n            <mat-icon matDatepickerToggleIcon>calendar_today</mat-icon>\r\n        </mat-datepicker-toggle>\r\n        <mat-datepicker #picker></mat-datepicker>\r\n    </div>\r\n    @if (myField.touched && myField.invalid && required) {\r\n        <mat-hint class=\"hint\">{{label}} is Required!</mat-hint>\r\n    }\r\n</div>\r\n", styles: [".label{font-size:var(--osl-label-font-size);margin-bottom:5px;display:flex;align-items:center;overflow:hidden}.label-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.label-required{flex-shrink:0}.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}.date-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 36px 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}.date-input::placeholder{color:#bbb}.date-input:hover:not(:disabled){border-color:var(--osl-focus-border-color)}.date-input:focus{border-color:var(--osl-focus-border-color);box-shadow:0 0 0 3px var(--osl-focus-shadow, rgba(99, 102, 241, .14))}.date-input:disabled{background-color:#f5f5f5;cursor:not-allowed;opacity:.7}.date-input.error{border-color:var(--osl-error-color)}.date-input.error:focus{box-shadow:0 0 0 3px var(--osl-error-shadow, rgba(220, 38, 38, .14))}.picker-toggle{position:absolute;right:4px;display:flex;align-items:center}.picker-toggle ::ng-deep .mat-mdc-icon-button{width:28px;height:28px;padding:4px;line-height:1;display:flex;align-items:center;justify-content:center}.picker-toggle ::ng-deep .mat-mdc-icon-button:hover .mat-mdc-button-persistent-ripple:before{opacity:0}.picker-toggle ::ng-deep .mat-mdc-icon-button .mat-icon{font-size:16px;width:16px;height:16px;color:#333;opacity:.45;transition:opacity .15s,background-color .15s;border-radius:4px;padding:3px;box-sizing:content-box}.picker-toggle ::ng-deep .mat-mdc-icon-button:hover:not([disabled]) .mat-icon{opacity:.9;background-color:#00000012}.picker-toggle ::ng-deep .mat-mdc-icon-button[disabled]{pointer-events:none;opacity:.4}\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: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: OslSkeletonDirective, selector: "[oslSkeleton]", inputs: ["oslSkeleton", "oslSkeletonType", "oslSkeletonAnimation", "oslSkeletonTheme", "oslSkeletonColor", "oslSkeletonHighlight", "oslSkeletonRadius", "oslSkeletonRows", "oslSkeletonRowGap", "oslSkeletonZIndex", "oslSkeletonDelay", "oslSkeletonDuration", "oslSkeletonMinHeight", "oslSkeletonForceReread", "oslSkeletonCircleSize", "oslSkeletonListItems", "oslSkeletonTableRows", "oslSkeletonTableCols", "oslSkeletonCardLines", "oslSkeletonBgColor"] }, { kind: "component", type: i5.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i5.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslDatepicker, decorators: [{
             type: Component,
@@ -2693,7 +2699,7 @@ class OslDatetimepicker {
                     }
                 }
             }
-        ], viewQueries: [{ propertyName: "dtNativeInput", first: true, predicate: ["dtNativeInput"], descendants: true }], 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            readonly\n        />\n        <button\n            type=\"button\"\n            class=\"dt-icon-btn\"\n            (click)=\"picker.open()\"\n            [disabled]=\"disabled\"\n            tabindex=\"-1\">\n            <svg viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <rect x=\"3\" y=\"4\" width=\"14\" height=\"14\" rx=\"2\"/>\n                <line x1=\"3\" y1=\"8\" x2=\"17\" y2=\"8\"/>\n                <line x1=\"7\" y1=\"2\" x2=\"7\" y2=\"6\"/>\n                <line x1=\"13\" y1=\"2\" x2=\"13\" y2=\"6\"/>\n            </svg>\n        </button>\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-icon-btn{position:absolute;right:7px;top:50%;transform:translateY(-50%);width:22px;height:22px;padding:0;border:none;background:transparent;cursor:pointer;color:#9ca3af;display:flex;align-items:center;justify-content:center;transition:color .15s;border-radius:4px}.dt-icon-btn svg{width:16px;height:16px;display:block}.dt-icon-btn:hover:not(:disabled){color:var(--osl-focus-border-color)}.dt-icon-btn:disabled{opacity:.35;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$2.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"] }] });
+        ], viewQueries: [{ propertyName: "dtNativeInput", first: true, predicate: ["dtNativeInput"], descendants: true }], 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            readonly\n        />\n        <button\n            type=\"button\"\n            class=\"dt-icon-btn\"\n            (click)=\"picker.open()\"\n            [disabled]=\"disabled\"\n            tabindex=\"-1\">\n            <svg viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <rect x=\"3\" y=\"4\" width=\"14\" height=\"14\" rx=\"2\"/>\n                <line x1=\"3\" y1=\"8\" x2=\"17\" y2=\"8\"/>\n                <line x1=\"7\" y1=\"2\" x2=\"7\" y2=\"6\"/>\n                <line x1=\"13\" y1=\"2\" x2=\"13\" y2=\"6\"/>\n            </svg>\n        </button>\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-icon-btn{position:absolute;right:7px;top:50%;transform:translateY(-50%);width:22px;height:22px;padding:0;border:none;background:transparent;cursor:pointer;color:#9ca3af;display:flex;align-items:center;justify-content:center;transition:color .15s;border-radius:4px}.dt-icon-btn svg{width:16px;height:16px;display:block}.dt-icon-btn:hover:not(:disabled){color:var(--osl-focus-border-color)}.dt-icon-btn:disabled{opacity:.35;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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslDatetimepicker, decorators: [{
             type: Component,
@@ -2791,7 +2797,7 @@ class OslCheckbox {
         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            <span class=\"label-text\" [title]=\"label\">{{label}}</span><span class=\"txt-clr-red label-required\">{{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;max-width:100%}.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;display:flex;align-items:center;overflow:hidden;min-width:0}.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)}.label-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.label-required{flex-shrink:0}.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$2.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"] }] });
+    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            <span class=\"label-text\" [title]=\"label\">{{label}}</span><span class=\"txt-clr-red label-required\">{{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;max-width:100%}.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;display:flex;align-items:center;overflow:hidden;min-width:0}.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)}.label-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.label-required{flex-shrink:0}.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,
@@ -2852,7 +2858,7 @@ class OslButton {
         }
     }
     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"] }] });
+    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: i3.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,
@@ -3016,11 +3022,11 @@ class DynamicForm {
         return list.flatMap(e => e.rows?.length ? [e, ...this._flatElements(e.rows)] : [e]);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DynamicForm, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DynamicForm, isStandalone: false, selector: "osl-dynamic-form", inputs: { elements: "elements", model: "model", skeletonLoading: "skeletonLoading", skeletonTheme: "skeletonTheme" }, outputs: { modelChange: "modelChange" }, usesOnChanges: true, ngImport: i0, template: "@if(elements && elements.length > 0) {\n    <div class=\"row align-items-center w-100\">\n        @for(elem of elements; track elem) {\n            @if(!(elem.hideIf ? elem.hideIf(model) : elem.hide)) {\n                <ng-container *ngTemplateOutlet=\"formField; context: { $implicit: elem }\"></ng-container>\n            }\n        }\n    </div>\n}\n\n<ng-template #formField let-elem>\n    @if(elem.hideIf ? !elem.hideIf(model) : true) {\n        @switch (elem.elementType) {\n\n            @case (\"textbox\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-input\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [type]=\"elem.inputType || 'text'\"\n                        [placeholder]=\"elem.placeholder || ''\"\n                        [mask]=\"elem.mask || ''\"\n                        [min]=\"elem.min ?? ''\"\n                        [max]=\"elem.max ?? ''\"\n                        [minLength]=\"elem.minLength ?? null\"\n                        [maxLength]=\"elem.maxLength ?? null\"\n                        [prefixIcon]=\"elem.prefixIcon || ''\"\n                        [suffixIcon]=\"elem.suffixIcon || ''\"\n                        [onlyChars]=\"!!elem.onlyChars\"\n                        [decimalPortion]=\"elem.decimalPortion ?? null\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                        [isCapitalize]=\"elem.isCapitalize\"\n                    ></osl-input>\n                </div>\n            }\n\n            @case (\"textarea\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-textarea\n                        [label]=\"elem.label\"\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [rows]=\"elem.textareaRows || 3\"\n                        [placeholder]=\"elem.placeholder || ''\"\n                        [maxLength]=\"elem.maxLength ?? null\"\n                        [minLength]=\"elem.minLength ?? null\"\n                        [characterCounter]=\"!!elem.characterCounter\"\n                        [resize]=\"elem.resize || 'none'\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-textarea>\n                </div>\n            }\n\n            @case (\"select\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-select\n                        [label]=\"elem.label\"\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [datasource]=\"elem.datasource || []\"\n                        [displayField]=\"elem.displayField || ''\"\n                        [valueField]=\"elem.valueField || ''\"\n                        [placeholder]=\"elem.selectPlaceholder || 'Select...'\"\n                        [loading]=\"elem.loadingIf ? elem.loadingIf(model) : false\"\n                        [clearable]=\"!!elem.clearable\"\n                        (changeEv)=\"elem.change ? onSelectChange(elem, $event) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-select>\n                </div>\n            }\n\n            @case (\"radio\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-radio\n                        [label]=\"elem.label\"\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [datasource]=\"elem.datasource || []\"\n                        [displayField]=\"elem.displayField || ''\"\n                        [valueField]=\"elem.valueField || ''\"\n                        [inline]=\"!!elem.inline\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-radio>\n                </div>\n            }\n\n            @case (\"slide-toggle\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-slide-toggle\n                        [label]=\"elem.label\"\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [labelPosition]=\"elem.labelPosition || 'after'\"\n                        [trueLabel]=\"elem.trueLabel || ''\"\n                        [falseLabel]=\"elem.falseLabel || ''\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-slide-toggle>\n                </div>\n            }\n\n            @case (\"autocomplete\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-autocomplete\n                        [label]=\"elem.label\"\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [(datasource)]=\"elem.datasource\"\n                        [displayField]=\"elem.displayField || ''\"\n                        [valueField]=\"elem.valueField || ''\"\n                        [placeholder]=\"elem.autocompletePlaceholder || 'Type to search...'\"\n                        [loading]=\"elem.loadingIf ? elem.loadingIf(model) : false\"\n                        (changeEv)=\"onFieldChange(elem, $event)\"\n                        [(model)]=\"model[elem.key]\"\n                        [methodName]=\"elem.apiMethod\"\n                        [service]=\"elem.apiService\"\n                        [object]=\"model[elem.objectName]\"\n                        [searchType]=\"elem.searchType\"\n                        [configMethodName]=\"elem.apiConfigMethod\"\n                        [isLister]=\"elem.isListerAutocomplete\"\n                        [apiBody]=\"elem.apiBody\"\n                    ></osl-autocomplete>\n                </div>\n            }\n\n            @case (\"file-uploader\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-file-upload\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [accept]=\"elem.accept || ''\"\n                        [multiple]=\"!!elem.multiple\"\n                        [maxSize]=\"elem.maxFileSize || 0\"\n                        [fileMode]=\"elem.fileMode || 'raw'\"\n                        [downloadFn]=\"elem.fileDownloadFn ? elem.fileDownloadFn.bind(null, model) : null\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-file-upload>\n                </div>\n            }\n\n            @case (\"datepicker\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-datepicker\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [dateType]=\"elem.dateType || 'date'\"\n                        [placeholder]=\"elem.placeholder || ''\"\n                        [minDate]=\"elem.minDateIf ? elem.minDateIf(model) : elem.minDate || ''\"\n                        [maxDate]=\"elem.maxDateIf ? elem.maxDateIf(model) : elem.maxDate || ''\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-datepicker>\n                </div>\n            }\n\n             @case (\"datetimepicker\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-datetimepicker\n                        [skeletonLoading]=\"skeletonLoading\"\n                        [skeletonTheme]=\"skeletonTheme\"\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [placeholder]=\"elem.placeholder || ''\"\n                        [minDatetime]=\"elem.minDatetimeIf ? elem.minDatetimeIf(model) : elem.minDatetime || ''\"\n                        [maxDatetime]=\"elem.maxDatetimeIf ? elem.maxDatetimeIf(model) : elem.maxDatetime || ''\"\n                        [format]=\"elem.datetimepickerFormat || 'YYYY-MM-DDTHH:mm'\"\n                        [showSeconds]=\"!!elem.datetimepickerShowSeconds\"\n                        [enableMeridian]=\"!!elem.datetimepickerEnableMeridian\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                           (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-datetimepicker>\n                </div>\n            }\n\n            @case (\"checkbox\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-checkbox\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [indeterminate]=\"!!elem.indeterminate\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-checkbox>\n                </div>\n            }\n\n            @case (\"button\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-button\n                        [label]=\"elem.label\"\n                        [loading]=\"elem.loadingIf ? elem.loadingIf(model) : false\"\n                        variant=\"secondary\"\n                        (clickEv)=\"elem.change ? elem.change(model) : null\"\n                    ></osl-button>\n                </div>\n            }\n\n            @case (\"fieldset\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-3'\">\n                    <fieldset class=\"osl-fieldset\">\n                        @if(elem.label) {\n                            <legend class=\"osl-fieldset-legend\" [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\">\n                                <span class=\"osl-fieldset-legend__text\">{{ elem.label }}</span>\n                            </legend>\n                        }\n                        <div class=\"row w-100 osl-fieldset-body\">\n                            @for(innerElem of elem.rows; track innerElem) {\n                                @if(!(innerElem.hideIf ? innerElem.hideIf(model) : innerElem.hide)) {\n                                    <ng-container *ngTemplateOutlet=\"formField; context: { $implicit: innerElem }\"></ng-container>\n                                }\n                            }\n                        </div>\n                    </fieldset>\n                </div>\n            }\n\n            @case (\"templateRef\"){\n                 <div [class]=\"'col-md-'+elem.columns+' mt-3'\">\n                        <ng-container *ngTemplateOutlet=\"elem.templateRef; context: { $implicit: elem}\"></ng-container>\n                </div>\n            }\n\n             @case (\"spacer\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                </div>\n            }\n\n        }\n    }\n</ng-template>\n", styles: [".osl-fieldset{border:1.5px solid var(--osl-border-color, #e5e7eb);border-radius:10px;padding:0 16px 16px;margin:0;background:linear-gradient(135deg,#f9fafb,#fff);box-shadow:0 1px 4px #0000000d;position:relative;transition:box-shadow .2s}.osl-fieldset:focus-within{box-shadow:0 0 0 3px #6366f114,0 2px 8px #0000000f;border-color:var(--osl-primary, #6366f1)}.osl-fieldset-legend{padding:0 6px;margin-left:8px;line-height:1;float:none;width:auto}.osl-fieldset-legend__text{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;background:#fff;padding:2px 10px;border:1.5px solid var(--osl-border-color, #e5e7eb);box-shadow:0 1px 3px #6366f11a}.osl-fieldset-body{margin-top:4px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: OslSkeletonDirective, selector: "[oslSkeleton]", inputs: ["oslSkeleton", "oslSkeletonType", "oslSkeletonAnimation", "oslSkeletonTheme", "oslSkeletonColor", "oslSkeletonHighlight", "oslSkeletonRadius", "oslSkeletonRows", "oslSkeletonRowGap", "oslSkeletonZIndex", "oslSkeletonDelay", "oslSkeletonDuration", "oslSkeletonMinHeight", "oslSkeletonForceReread", "oslSkeletonCircleSize", "oslSkeletonListItems", "oslSkeletonTableRows", "oslSkeletonTableCols", "oslSkeletonCardLines", "oslSkeletonBgColor"] }, { kind: "component", type: Oslinput, selector: "osl-input", inputs: ["label", "required", "disabled", "model", "type", "placeholder", "mask", "min", "max", "minLength", "maxLength", "prefixIcon", "suffixIcon", "skeletonLoading", "skeletonTheme", "onlyChars", "isCapitalize", "decimalPortion"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: Osltextarea, selector: "osl-textarea", inputs: ["label", "rows", "required", "disabled", "model", "placeholder", "maxLength", "minLength", "characterCounter", "resize", "skeletonLoading", "skeletonTheme"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslSelect, selector: "osl-select", inputs: ["label", "required", "disabled", "model", "datasource", "displayField", "valueField", "placeholder", "loading", "clearable", "skeletonLoading", "skeletonTheme"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslRadio, selector: "osl-radio", inputs: ["label", "required", "disabled", "model", "datasource", "displayField", "valueField", "inline", "skeletonLoading", "skeletonTheme"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslSlideToggle, selector: "osl-slide-toggle", inputs: ["label", "disabled", "model", "labelPosition", "trueLabel", "falseLabel", "skeletonLoading", "skeletonTheme"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslAutocomplete, selector: "osl-autocomplete", inputs: ["label", "required", "disabled", "model", "datasource", "displayField", "valueField", "placeholder", "loading", "searchType", "methodName", "configMethodName", "service", "object", "skeletonLoading", "skeletonTheme", "isLister", "apiBody"], outputs: ["datasourceChange", "modelChange", "changeEv"] }, { kind: "component", type: OslFileUpload, selector: "osl-file-upload", inputs: ["label", "required", "disabled", "model", "accept", "multiple", "maxSize", "skeletonLoading", "skeletonTheme", "fileMode", "downloadFn"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslDatepicker, selector: "osl-datepicker", inputs: ["label", "required", "disabled", "model", "dateType", "placeholder", "minDate", "maxDate", "skeletonLoading", "skeletonTheme"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslDatetimepicker, selector: "osl-datetimepicker", inputs: ["label", "required", "disabled", "model", "placeholder", "minDatetime", "maxDatetime", "format", "displayFormat", "showSeconds", "enableMeridian", "skeletonLoading", "skeletonTheme"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslCheckbox, selector: "osl-checkbox", inputs: ["label", "disabled", "required", "model", "indeterminate", "skeletonLoading", "skeletonTheme"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslButton, selector: "osl-button", inputs: ["label", "icon", "variant", "size", "disabled", "loading", "type", "fullWidth"], outputs: ["clickEv"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DynamicForm, isStandalone: false, selector: "osl-dynamic-form", inputs: { elements: "elements", model: "model", skeletonLoading: "skeletonLoading", skeletonTheme: "skeletonTheme" }, outputs: { modelChange: "modelChange" }, usesOnChanges: true, ngImport: i0, template: "@if(elements && elements.length > 0) {\n    <div class=\"row align-items-center w-100\">\n        @for(elem of elements; track elem) {\n            @if(!(elem.hideIf ? elem.hideIf(model) : elem.hide)) {\n                <ng-container *ngTemplateOutlet=\"formField; context: { $implicit: elem }\"></ng-container>\n            }\n        }\n    </div>\n}\n\n<ng-template #formField let-elem>\n    @if(elem.hideIf ? !elem.hideIf(model) : true) {\n        @switch (elem.elementType) {\n\n            @case (\"textbox\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-input\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [type]=\"elem.inputType || 'text'\"\n                        [placeholder]=\"elem.placeholder || ''\"\n                        [mask]=\"elem.mask || ''\"\n                        [min]=\"elem.min ?? ''\"\n                        [max]=\"elem.max ?? ''\"\n                        [minLength]=\"elem.minLength ?? null\"\n                        [maxLength]=\"elem.maxLength ?? null\"\n                        [prefixIcon]=\"elem.prefixIcon || ''\"\n                        [suffixIcon]=\"elem.suffixIcon || ''\"\n                        [onlyChars]=\"!!elem.onlyChars\"\n                        [decimalPortion]=\"elem.decimalPortion ?? null\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                        [isCapitalize]=\"elem.isCapitalize\"\n                    ></osl-input>\n                </div>\n            }\n\n            @case (\"textarea\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-textarea\n                        [label]=\"elem.label\"\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [rows]=\"elem.textareaRows || 3\"\n                        [placeholder]=\"elem.placeholder || ''\"\n                        [maxLength]=\"elem.maxLength ?? null\"\n                        [minLength]=\"elem.minLength ?? null\"\n                        [characterCounter]=\"!!elem.characterCounter\"\n                        [resize]=\"elem.resize || 'none'\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-textarea>\n                </div>\n            }\n\n            @case (\"select\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-select\n                        [label]=\"elem.label\"\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [datasource]=\"elem.datasource || []\"\n                        [displayField]=\"elem.displayField || ''\"\n                        [valueField]=\"elem.valueField || ''\"\n                        [placeholder]=\"elem.selectPlaceholder || 'Select...'\"\n                        [loading]=\"elem.loadingIf ? elem.loadingIf(model) : false\"\n                        [clearable]=\"!!elem.clearable\"\n                        (changeEv)=\"elem.change ? onSelectChange(elem, $event) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-select>\n                </div>\n            }\n\n            @case (\"radio\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-radio\n                        [label]=\"elem.label\"\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [datasource]=\"elem.datasource || []\"\n                        [displayField]=\"elem.displayField || ''\"\n                        [valueField]=\"elem.valueField || ''\"\n                        [inline]=\"!!elem.inline\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-radio>\n                </div>\n            }\n\n            @case (\"slide-toggle\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-slide-toggle\n                        [label]=\"elem.label\"\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [labelPosition]=\"elem.labelPosition || 'after'\"\n                        [trueLabel]=\"elem.trueLabel || ''\"\n                        [falseLabel]=\"elem.falseLabel || ''\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-slide-toggle>\n                </div>\n            }\n\n            @case (\"autocomplete\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-autocomplete\n                        [label]=\"elem.label\"\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [(datasource)]=\"elem.datasource\"\n                        [displayField]=\"elem.displayField || ''\"\n                        [valueField]=\"elem.valueField || ''\"\n                        [placeholder]=\"elem.autocompletePlaceholder || 'Type to search...'\"\n                        [loading]=\"elem.loadingIf ? elem.loadingIf(model) : false\"\n                        (changeEv)=\"onFieldChange(elem, $event)\"\n                        [(model)]=\"model[elem.key]\"\n                        [methodName]=\"elem.apiMethod\"\n                        [service]=\"elem.apiService\"\n                        [object]=\"model[elem.objectName]\"\n                        [searchType]=\"elem.searchType\"\n                        [configMethodName]=\"elem.apiConfigMethod\"\n                        [isLister]=\"elem.isListerAutocomplete\"\n                        [apiBody]=\"elem.apiBody\"\n                        [displayFn]=\"elem.displayFn || null\"\n                    ></osl-autocomplete>\n                </div>\n            }\n\n            @case (\"file-uploader\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-file-upload\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [accept]=\"elem.accept || ''\"\n                        [multiple]=\"!!elem.multiple\"\n                        [maxSize]=\"elem.maxFileSize || 0\"\n                        [fileMode]=\"elem.fileMode || 'raw'\"\n                        [downloadFn]=\"elem.fileDownloadFn ? elem.fileDownloadFn.bind(null, model) : null\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-file-upload>\n                </div>\n            }\n\n            @case (\"datepicker\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-datepicker\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [dateType]=\"elem.dateType || 'date'\"\n                        [placeholder]=\"elem.placeholder || ''\"\n                        [minDate]=\"elem.minDateIf ? elem.minDateIf(model) : elem.minDate || ''\"\n                        [maxDate]=\"elem.maxDateIf ? elem.maxDateIf(model) : elem.maxDate || ''\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-datepicker>\n                </div>\n            }\n\n             @case (\"datetimepicker\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-datetimepicker\n                        [skeletonLoading]=\"skeletonLoading\"\n                        [skeletonTheme]=\"skeletonTheme\"\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [placeholder]=\"elem.placeholder || ''\"\n                        [minDatetime]=\"elem.minDatetimeIf ? elem.minDatetimeIf(model) : elem.minDatetime || ''\"\n                        [maxDatetime]=\"elem.maxDatetimeIf ? elem.maxDatetimeIf(model) : elem.maxDatetime || ''\"\n                        [format]=\"elem.datetimepickerFormat || 'YYYY-MM-DDTHH:mm'\"\n                        [showSeconds]=\"!!elem.datetimepickerShowSeconds\"\n                        [enableMeridian]=\"!!elem.datetimepickerEnableMeridian\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                           (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-datetimepicker>\n                </div>\n            }\n\n            @case (\"checkbox\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-checkbox\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [indeterminate]=\"!!elem.indeterminate\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-checkbox>\n                </div>\n            }\n\n            @case (\"button\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-button\n                        [label]=\"elem.label\"\n                        [loading]=\"elem.loadingIf ? elem.loadingIf(model) : false\"\n                        variant=\"secondary\"\n                        (clickEv)=\"elem.change ? elem.change(model) : null\"\n                    ></osl-button>\n                </div>\n            }\n\n            @case (\"fieldset\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-3'\">\n                    <fieldset class=\"osl-fieldset\">\n                        @if(elem.label) {\n                            <legend class=\"osl-fieldset-legend\" [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\">\n                                <span class=\"osl-fieldset-legend__text\">{{ elem.label }}</span>\n                            </legend>\n                        }\n                        <div class=\"row w-100 osl-fieldset-body\">\n                            @for(innerElem of elem.rows; track innerElem) {\n                                @if(!(innerElem.hideIf ? innerElem.hideIf(model) : innerElem.hide)) {\n                                    <ng-container *ngTemplateOutlet=\"formField; context: { $implicit: innerElem }\"></ng-container>\n                                }\n                            }\n                        </div>\n                    </fieldset>\n                </div>\n            }\n\n            @case (\"templateRef\"){\n                 <div [class]=\"'col-md-'+elem.columns+' mt-3'\">\n                        <ng-container *ngTemplateOutlet=\"elem.templateRef; context: { $implicit: elem}\"></ng-container>\n                </div>\n            }\n\n             @case (\"spacer\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                </div>\n            }\n\n        }\n    }\n</ng-template>\n", styles: [".osl-fieldset{border:1.5px solid var(--osl-border-color, #e5e7eb);border-radius:10px;padding:0 16px 16px;margin:0;background:linear-gradient(135deg,#f9fafb,#fff);box-shadow:0 1px 4px #0000000d;position:relative;transition:box-shadow .2s}.osl-fieldset:focus-within{box-shadow:0 0 0 3px #6366f114,0 2px 8px #0000000f;border-color:var(--osl-primary, #6366f1)}.osl-fieldset-legend{padding:0 6px;margin-left:8px;line-height:1;float:none;width:auto}.osl-fieldset-legend__text{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;background:#fff;padding:2px 10px;border:1.5px solid var(--osl-border-color, #e5e7eb);box-shadow:0 1px 3px #6366f11a}.osl-fieldset-body{margin-top:4px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: OslSkeletonDirective, selector: "[oslSkeleton]", inputs: ["oslSkeleton", "oslSkeletonType", "oslSkeletonAnimation", "oslSkeletonTheme", "oslSkeletonColor", "oslSkeletonHighlight", "oslSkeletonRadius", "oslSkeletonRows", "oslSkeletonRowGap", "oslSkeletonZIndex", "oslSkeletonDelay", "oslSkeletonDuration", "oslSkeletonMinHeight", "oslSkeletonForceReread", "oslSkeletonCircleSize", "oslSkeletonListItems", "oslSkeletonTableRows", "oslSkeletonTableCols", "oslSkeletonCardLines", "oslSkeletonBgColor"] }, { kind: "component", type: Oslinput, selector: "osl-input", inputs: ["label", "required", "disabled", "model", "type", "placeholder", "mask", "min", "max", "minLength", "maxLength", "prefixIcon", "suffixIcon", "skeletonLoading", "skeletonTheme", "onlyChars", "isCapitalize", "decimalPortion"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: Osltextarea, selector: "osl-textarea", inputs: ["label", "rows", "required", "disabled", "model", "placeholder", "maxLength", "minLength", "characterCounter", "resize", "skeletonLoading", "skeletonTheme"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslSelect, selector: "osl-select", inputs: ["label", "required", "disabled", "model", "datasource", "displayField", "valueField", "placeholder", "loading", "clearable", "skeletonLoading", "skeletonTheme"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslRadio, selector: "osl-radio", inputs: ["label", "required", "disabled", "model", "datasource", "displayField", "valueField", "inline", "skeletonLoading", "skeletonTheme"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslSlideToggle, selector: "osl-slide-toggle", inputs: ["label", "disabled", "model", "labelPosition", "trueLabel", "falseLabel", "skeletonLoading", "skeletonTheme"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslAutocomplete, selector: "osl-autocomplete", inputs: ["label", "required", "disabled", "model", "datasource", "displayField", "valueField", "placeholder", "loading", "searchType", "methodName", "configMethodName", "service", "object", "skeletonLoading", "skeletonTheme", "isLister", "apiBody", "displayFn"], outputs: ["datasourceChange", "modelChange", "changeEv"] }, { kind: "component", type: OslFileUpload, selector: "osl-file-upload", inputs: ["label", "required", "disabled", "model", "accept", "multiple", "maxSize", "skeletonLoading", "skeletonTheme", "fileMode", "downloadFn"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslDatepicker, selector: "osl-datepicker", inputs: ["label", "required", "disabled", "model", "dateType", "placeholder", "minDate", "maxDate", "skeletonLoading", "skeletonTheme"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslDatetimepicker, selector: "osl-datetimepicker", inputs: ["label", "required", "disabled", "model", "placeholder", "minDatetime", "maxDatetime", "format", "displayFormat", "showSeconds", "enableMeridian", "skeletonLoading", "skeletonTheme"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslCheckbox, selector: "osl-checkbox", inputs: ["label", "disabled", "required", "model", "indeterminate", "skeletonLoading", "skeletonTheme"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslButton, selector: "osl-button", inputs: ["label", "icon", "variant", "size", "disabled", "loading", "type", "fullWidth"], outputs: ["clickEv"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DynamicForm, decorators: [{
             type: Component,
-            args: [{ selector: 'osl-dynamic-form', standalone: false, template: "@if(elements && elements.length > 0) {\n    <div class=\"row align-items-center w-100\">\n        @for(elem of elements; track elem) {\n            @if(!(elem.hideIf ? elem.hideIf(model) : elem.hide)) {\n                <ng-container *ngTemplateOutlet=\"formField; context: { $implicit: elem }\"></ng-container>\n            }\n        }\n    </div>\n}\n\n<ng-template #formField let-elem>\n    @if(elem.hideIf ? !elem.hideIf(model) : true) {\n        @switch (elem.elementType) {\n\n            @case (\"textbox\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-input\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [type]=\"elem.inputType || 'text'\"\n                        [placeholder]=\"elem.placeholder || ''\"\n                        [mask]=\"elem.mask || ''\"\n                        [min]=\"elem.min ?? ''\"\n                        [max]=\"elem.max ?? ''\"\n                        [minLength]=\"elem.minLength ?? null\"\n                        [maxLength]=\"elem.maxLength ?? null\"\n                        [prefixIcon]=\"elem.prefixIcon || ''\"\n                        [suffixIcon]=\"elem.suffixIcon || ''\"\n                        [onlyChars]=\"!!elem.onlyChars\"\n                        [decimalPortion]=\"elem.decimalPortion ?? null\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                        [isCapitalize]=\"elem.isCapitalize\"\n                    ></osl-input>\n                </div>\n            }\n\n            @case (\"textarea\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-textarea\n                        [label]=\"elem.label\"\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [rows]=\"elem.textareaRows || 3\"\n                        [placeholder]=\"elem.placeholder || ''\"\n                        [maxLength]=\"elem.maxLength ?? null\"\n                        [minLength]=\"elem.minLength ?? null\"\n                        [characterCounter]=\"!!elem.characterCounter\"\n                        [resize]=\"elem.resize || 'none'\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-textarea>\n                </div>\n            }\n\n            @case (\"select\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-select\n                        [label]=\"elem.label\"\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [datasource]=\"elem.datasource || []\"\n                        [displayField]=\"elem.displayField || ''\"\n                        [valueField]=\"elem.valueField || ''\"\n                        [placeholder]=\"elem.selectPlaceholder || 'Select...'\"\n                        [loading]=\"elem.loadingIf ? elem.loadingIf(model) : false\"\n                        [clearable]=\"!!elem.clearable\"\n                        (changeEv)=\"elem.change ? onSelectChange(elem, $event) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-select>\n                </div>\n            }\n\n            @case (\"radio\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-radio\n                        [label]=\"elem.label\"\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [datasource]=\"elem.datasource || []\"\n                        [displayField]=\"elem.displayField || ''\"\n                        [valueField]=\"elem.valueField || ''\"\n                        [inline]=\"!!elem.inline\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-radio>\n                </div>\n            }\n\n            @case (\"slide-toggle\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-slide-toggle\n                        [label]=\"elem.label\"\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [labelPosition]=\"elem.labelPosition || 'after'\"\n                        [trueLabel]=\"elem.trueLabel || ''\"\n                        [falseLabel]=\"elem.falseLabel || ''\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-slide-toggle>\n                </div>\n            }\n\n            @case (\"autocomplete\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-autocomplete\n                        [label]=\"elem.label\"\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [(datasource)]=\"elem.datasource\"\n                        [displayField]=\"elem.displayField || ''\"\n                        [valueField]=\"elem.valueField || ''\"\n                        [placeholder]=\"elem.autocompletePlaceholder || 'Type to search...'\"\n                        [loading]=\"elem.loadingIf ? elem.loadingIf(model) : false\"\n                        (changeEv)=\"onFieldChange(elem, $event)\"\n                        [(model)]=\"model[elem.key]\"\n                        [methodName]=\"elem.apiMethod\"\n                        [service]=\"elem.apiService\"\n                        [object]=\"model[elem.objectName]\"\n                        [searchType]=\"elem.searchType\"\n                        [configMethodName]=\"elem.apiConfigMethod\"\n                        [isLister]=\"elem.isListerAutocomplete\"\n                        [apiBody]=\"elem.apiBody\"\n                    ></osl-autocomplete>\n                </div>\n            }\n\n            @case (\"file-uploader\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-file-upload\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [accept]=\"elem.accept || ''\"\n                        [multiple]=\"!!elem.multiple\"\n                        [maxSize]=\"elem.maxFileSize || 0\"\n                        [fileMode]=\"elem.fileMode || 'raw'\"\n                        [downloadFn]=\"elem.fileDownloadFn ? elem.fileDownloadFn.bind(null, model) : null\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-file-upload>\n                </div>\n            }\n\n            @case (\"datepicker\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-datepicker\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [dateType]=\"elem.dateType || 'date'\"\n                        [placeholder]=\"elem.placeholder || ''\"\n                        [minDate]=\"elem.minDateIf ? elem.minDateIf(model) : elem.minDate || ''\"\n                        [maxDate]=\"elem.maxDateIf ? elem.maxDateIf(model) : elem.maxDate || ''\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-datepicker>\n                </div>\n            }\n\n             @case (\"datetimepicker\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-datetimepicker\n                        [skeletonLoading]=\"skeletonLoading\"\n                        [skeletonTheme]=\"skeletonTheme\"\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [placeholder]=\"elem.placeholder || ''\"\n                        [minDatetime]=\"elem.minDatetimeIf ? elem.minDatetimeIf(model) : elem.minDatetime || ''\"\n                        [maxDatetime]=\"elem.maxDatetimeIf ? elem.maxDatetimeIf(model) : elem.maxDatetime || ''\"\n                        [format]=\"elem.datetimepickerFormat || 'YYYY-MM-DDTHH:mm'\"\n                        [showSeconds]=\"!!elem.datetimepickerShowSeconds\"\n                        [enableMeridian]=\"!!elem.datetimepickerEnableMeridian\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                           (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-datetimepicker>\n                </div>\n            }\n\n            @case (\"checkbox\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-checkbox\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [indeterminate]=\"!!elem.indeterminate\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-checkbox>\n                </div>\n            }\n\n            @case (\"button\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-button\n                        [label]=\"elem.label\"\n                        [loading]=\"elem.loadingIf ? elem.loadingIf(model) : false\"\n                        variant=\"secondary\"\n                        (clickEv)=\"elem.change ? elem.change(model) : null\"\n                    ></osl-button>\n                </div>\n            }\n\n            @case (\"fieldset\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-3'\">\n                    <fieldset class=\"osl-fieldset\">\n                        @if(elem.label) {\n                            <legend class=\"osl-fieldset-legend\" [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\">\n                                <span class=\"osl-fieldset-legend__text\">{{ elem.label }}</span>\n                            </legend>\n                        }\n                        <div class=\"row w-100 osl-fieldset-body\">\n                            @for(innerElem of elem.rows; track innerElem) {\n                                @if(!(innerElem.hideIf ? innerElem.hideIf(model) : innerElem.hide)) {\n                                    <ng-container *ngTemplateOutlet=\"formField; context: { $implicit: innerElem }\"></ng-container>\n                                }\n                            }\n                        </div>\n                    </fieldset>\n                </div>\n            }\n\n            @case (\"templateRef\"){\n                 <div [class]=\"'col-md-'+elem.columns+' mt-3'\">\n                        <ng-container *ngTemplateOutlet=\"elem.templateRef; context: { $implicit: elem}\"></ng-container>\n                </div>\n            }\n\n             @case (\"spacer\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                </div>\n            }\n\n        }\n    }\n</ng-template>\n", styles: [".osl-fieldset{border:1.5px solid var(--osl-border-color, #e5e7eb);border-radius:10px;padding:0 16px 16px;margin:0;background:linear-gradient(135deg,#f9fafb,#fff);box-shadow:0 1px 4px #0000000d;position:relative;transition:box-shadow .2s}.osl-fieldset:focus-within{box-shadow:0 0 0 3px #6366f114,0 2px 8px #0000000f;border-color:var(--osl-primary, #6366f1)}.osl-fieldset-legend{padding:0 6px;margin-left:8px;line-height:1;float:none;width:auto}.osl-fieldset-legend__text{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;background:#fff;padding:2px 10px;border:1.5px solid var(--osl-border-color, #e5e7eb);box-shadow:0 1px 3px #6366f11a}.osl-fieldset-body{margin-top:4px}\n"] }]
+            args: [{ selector: 'osl-dynamic-form', standalone: false, template: "@if(elements && elements.length > 0) {\n    <div class=\"row align-items-center w-100\">\n        @for(elem of elements; track elem) {\n            @if(!(elem.hideIf ? elem.hideIf(model) : elem.hide)) {\n                <ng-container *ngTemplateOutlet=\"formField; context: { $implicit: elem }\"></ng-container>\n            }\n        }\n    </div>\n}\n\n<ng-template #formField let-elem>\n    @if(elem.hideIf ? !elem.hideIf(model) : true) {\n        @switch (elem.elementType) {\n\n            @case (\"textbox\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-input\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [type]=\"elem.inputType || 'text'\"\n                        [placeholder]=\"elem.placeholder || ''\"\n                        [mask]=\"elem.mask || ''\"\n                        [min]=\"elem.min ?? ''\"\n                        [max]=\"elem.max ?? ''\"\n                        [minLength]=\"elem.minLength ?? null\"\n                        [maxLength]=\"elem.maxLength ?? null\"\n                        [prefixIcon]=\"elem.prefixIcon || ''\"\n                        [suffixIcon]=\"elem.suffixIcon || ''\"\n                        [onlyChars]=\"!!elem.onlyChars\"\n                        [decimalPortion]=\"elem.decimalPortion ?? null\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                        [isCapitalize]=\"elem.isCapitalize\"\n                    ></osl-input>\n                </div>\n            }\n\n            @case (\"textarea\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-textarea\n                        [label]=\"elem.label\"\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [rows]=\"elem.textareaRows || 3\"\n                        [placeholder]=\"elem.placeholder || ''\"\n                        [maxLength]=\"elem.maxLength ?? null\"\n                        [minLength]=\"elem.minLength ?? null\"\n                        [characterCounter]=\"!!elem.characterCounter\"\n                        [resize]=\"elem.resize || 'none'\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-textarea>\n                </div>\n            }\n\n            @case (\"select\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-select\n                        [label]=\"elem.label\"\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [datasource]=\"elem.datasource || []\"\n                        [displayField]=\"elem.displayField || ''\"\n                        [valueField]=\"elem.valueField || ''\"\n                        [placeholder]=\"elem.selectPlaceholder || 'Select...'\"\n                        [loading]=\"elem.loadingIf ? elem.loadingIf(model) : false\"\n                        [clearable]=\"!!elem.clearable\"\n                        (changeEv)=\"elem.change ? onSelectChange(elem, $event) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-select>\n                </div>\n            }\n\n            @case (\"radio\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-radio\n                        [label]=\"elem.label\"\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [datasource]=\"elem.datasource || []\"\n                        [displayField]=\"elem.displayField || ''\"\n                        [valueField]=\"elem.valueField || ''\"\n                        [inline]=\"!!elem.inline\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-radio>\n                </div>\n            }\n\n            @case (\"slide-toggle\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-slide-toggle\n                        [label]=\"elem.label\"\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [labelPosition]=\"elem.labelPosition || 'after'\"\n                        [trueLabel]=\"elem.trueLabel || ''\"\n                        [falseLabel]=\"elem.falseLabel || ''\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-slide-toggle>\n                </div>\n            }\n\n            @case (\"autocomplete\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-autocomplete\n                        [label]=\"elem.label\"\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [(datasource)]=\"elem.datasource\"\n                        [displayField]=\"elem.displayField || ''\"\n                        [valueField]=\"elem.valueField || ''\"\n                        [placeholder]=\"elem.autocompletePlaceholder || 'Type to search...'\"\n                        [loading]=\"elem.loadingIf ? elem.loadingIf(model) : false\"\n                        (changeEv)=\"onFieldChange(elem, $event)\"\n                        [(model)]=\"model[elem.key]\"\n                        [methodName]=\"elem.apiMethod\"\n                        [service]=\"elem.apiService\"\n                        [object]=\"model[elem.objectName]\"\n                        [searchType]=\"elem.searchType\"\n                        [configMethodName]=\"elem.apiConfigMethod\"\n                        [isLister]=\"elem.isListerAutocomplete\"\n                        [apiBody]=\"elem.apiBody\"\n                        [displayFn]=\"elem.displayFn || null\"\n                    ></osl-autocomplete>\n                </div>\n            }\n\n            @case (\"file-uploader\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-file-upload\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [accept]=\"elem.accept || ''\"\n                        [multiple]=\"!!elem.multiple\"\n                        [maxSize]=\"elem.maxFileSize || 0\"\n                        [fileMode]=\"elem.fileMode || 'raw'\"\n                        [downloadFn]=\"elem.fileDownloadFn ? elem.fileDownloadFn.bind(null, model) : null\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-file-upload>\n                </div>\n            }\n\n            @case (\"datepicker\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-datepicker\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [dateType]=\"elem.dateType || 'date'\"\n                        [placeholder]=\"elem.placeholder || ''\"\n                        [minDate]=\"elem.minDateIf ? elem.minDateIf(model) : elem.minDate || ''\"\n                        [maxDate]=\"elem.maxDateIf ? elem.maxDateIf(model) : elem.maxDate || ''\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-datepicker>\n                </div>\n            }\n\n             @case (\"datetimepicker\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-datetimepicker\n                        [skeletonLoading]=\"skeletonLoading\"\n                        [skeletonTheme]=\"skeletonTheme\"\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [placeholder]=\"elem.placeholder || ''\"\n                        [minDatetime]=\"elem.minDatetimeIf ? elem.minDatetimeIf(model) : elem.minDatetime || ''\"\n                        [maxDatetime]=\"elem.maxDatetimeIf ? elem.maxDatetimeIf(model) : elem.maxDatetime || ''\"\n                        [format]=\"elem.datetimepickerFormat || 'YYYY-MM-DDTHH:mm'\"\n                        [showSeconds]=\"!!elem.datetimepickerShowSeconds\"\n                        [enableMeridian]=\"!!elem.datetimepickerEnableMeridian\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                           (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-datetimepicker>\n                </div>\n            }\n\n            @case (\"checkbox\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-checkbox\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [indeterminate]=\"!!elem.indeterminate\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-checkbox>\n                </div>\n            }\n\n            @case (\"button\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-button\n                        [label]=\"elem.label\"\n                        [loading]=\"elem.loadingIf ? elem.loadingIf(model) : false\"\n                        variant=\"secondary\"\n                        (clickEv)=\"elem.change ? elem.change(model) : null\"\n                    ></osl-button>\n                </div>\n            }\n\n            @case (\"fieldset\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-3'\">\n                    <fieldset class=\"osl-fieldset\">\n                        @if(elem.label) {\n                            <legend class=\"osl-fieldset-legend\" [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\">\n                                <span class=\"osl-fieldset-legend__text\">{{ elem.label }}</span>\n                            </legend>\n                        }\n                        <div class=\"row w-100 osl-fieldset-body\">\n                            @for(innerElem of elem.rows; track innerElem) {\n                                @if(!(innerElem.hideIf ? innerElem.hideIf(model) : innerElem.hide)) {\n                                    <ng-container *ngTemplateOutlet=\"formField; context: { $implicit: innerElem }\"></ng-container>\n                                }\n                            }\n                        </div>\n                    </fieldset>\n                </div>\n            }\n\n            @case (\"templateRef\"){\n                 <div [class]=\"'col-md-'+elem.columns+' mt-3'\">\n                        <ng-container *ngTemplateOutlet=\"elem.templateRef; context: { $implicit: elem}\"></ng-container>\n                </div>\n            }\n\n             @case (\"spacer\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                </div>\n            }\n\n        }\n    }\n</ng-template>\n", styles: [".osl-fieldset{border:1.5px solid var(--osl-border-color, #e5e7eb);border-radius:10px;padding:0 16px 16px;margin:0;background:linear-gradient(135deg,#f9fafb,#fff);box-shadow:0 1px 4px #0000000d;position:relative;transition:box-shadow .2s}.osl-fieldset:focus-within{box-shadow:0 0 0 3px #6366f114,0 2px 8px #0000000f;border-color:var(--osl-primary, #6366f1)}.osl-fieldset-legend{padding:0 6px;margin-left:8px;line-height:1;float:none;width:auto}.osl-fieldset-legend__text{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;background:#fff;padding:2px 10px;border:1.5px solid var(--osl-border-color, #e5e7eb);box-shadow:0 1px 3px #6366f11a}.osl-fieldset-body{margin-top:4px}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { elements: [{
                 type: Input,
                 args: ['elements']
@@ -3257,11 +3263,11 @@ class OslGrid {
         return raw !== null && raw !== undefined && raw !== '' ? raw : '--';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslGrid, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: OslGrid, isStandalone: false, selector: "osl-grid", inputs: { columns: "columns", datasource: "datasource", isPaginated: "isPaginated", pageSize: "pageSize", autoMode: "autoMode", totalRecords: "totalRecords", tableHeight: "tableHeight", loading: "loading", isSelectable: "isSelectable", moreMenuActions: "moreMenuActions", canEdit: "canEdit", canDelete: "canDelete", highlightedRow: "highlightedRow", primaryKey: "primaryKey" }, outputs: { datasourceChange: "datasourceChange", pageChange: "pageChange", pageSizeChange: "pageSizeChange", sortChange: "sortChange", editClick: "editClick", deleteClick: "deleteClick", onRowClick: "onRowClick" }, host: { listeners: { "document:click": "onDocumentClick()" } }, viewQueries: [{ propertyName: "_tableContainerRef", first: true, predicate: ["tableContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"osl-grid-wrapper\">\r\n\r\n  <div #tableContainer class=\"osl-grid-table-container\" [style.height]=\"tableHeight\">\r\n    <table class=\"osl-grid-table\">\r\n      <thead class=\"osl-grid-thead\">\r\n        <tr>\r\n          @if (loading && columns.length === 0) {\r\n            @for (sk of skeletonColumns; track $index) {\r\n              <th class=\"osl-grid-th osl-grid-th--skeleton\">\r\n                <div class=\"osl-skeleton osl-skeleton--header\"></div>\r\n              </th>\r\n            }\r\n          } @else {\r\n            @for (col of columns; track col.key; let last = $last) {\r\n              <th\r\n                class=\"osl-grid-th\"\r\n                [class.osl-grid-th--last]=\"last\"\r\n                [class.osl-grid-th--actions]=\"col.isActions\"\r\n                (click)=\"sort(col.key, col.isActions)\"\r\n              >\r\n                @if (!col.isActions) {\r\n                  <span class=\"osl-grid-th-inner\">\r\n                    {{ col.label }}\r\n                    <span class=\"osl-grid-sort-icon\" [class.osl-grid-sort-icon--active]=\"sortKey === col.key\">\r\n                      @if (sortKey === col.key) {\r\n                        {{ sortAsc ? '\u2191' : '\u2193' }}\r\n                      } @else {\r\n                        <span class=\"osl-grid-sort-icon--idle\">\u21C5</span>\r\n                      }\r\n                    </span>\r\n                  </span>\r\n                }\r\n              </th>\r\n            }\r\n          }\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @if (loading) {\r\n          @for (sk of skeletonRows; track $index) {\r\n            <tr class=\"osl-grid-row osl-grid-row--skeleton\">\r\n              @if (columns.length > 0) {\r\n                @for (col of columns; track col.key; let last = $last) {\r\n                  <td class=\"osl-grid-td\" [class.osl-grid-td--last]=\"last\" [class.osl-grid-td--actions]=\"col.isActions\">\r\n                    @if (col.isActions) {\r\n                      <div class=\"osl-skeleton osl-skeleton--actions\"></div>\r\n                    } @else {\r\n                      <div class=\"osl-skeleton\"></div>\r\n                    }\r\n                  </td>\r\n                }\r\n              } @else {\r\n                @for (sk2 of skeletonColumns; track $index; let last = $last) {\r\n                  <td class=\"osl-grid-td\" [class.osl-grid-td--last]=\"last\">\r\n                    <div class=\"osl-skeleton\"></div>\r\n                  </td>\r\n                }\r\n              }\r\n            </tr>\r\n          }\r\n        } @else {\r\n          @if (pagedData.length === 0) {\r\n            <tr>\r\n              <td [attr.colspan]=\"columns.length\" class=\"osl-grid-empty\">\r\n                <div class=\"d-flex align-items-center justify-content-center floating-element\">\r\n                  <div class=\"mx-4\">\r\n                    <p class=\"f-s-20 f-w-600 text-start\">No Records match the <br> current filters.</p>\r\n                    <p class=\"text-start\">Expecting to see new Records? Try again in <br> a few seconds as the system catches up</p>\r\n                  </div>\r\n                  <i class=\"icon\"></i>\r\n\r\n                </div>\r\n              </td>\r\n            </tr>\r\n          }\r\n          @for (row of pagedData; track $index; let rowIdx = $index) {\r\n            <tr class=\"osl-grid-row\"\r\n                [class.pointer]=\"isSelectable\"\r\n                [class.osl-grid-row--highlighted]=\"isHighlightedRow(row)\"\r\n                (click)=\"onRowClick.emit(row)\">\r\n              @for (col of columns; track col.key; let last = $last) {\r\n                @if (col.isActions) {\r\n                  <td class=\"osl-grid-td osl-grid-td--actions\" [class.osl-grid-td--last]=\"last\">\r\n                         @if (moreMenuActions.length > 0 && hasVisibleActions(row)) {\r\n                      <div class=\"osl-menu-wrapper\">\r\n                        <button class=\"osl-grid-icon-btn\" (click)=\"toggleMenu(rowIdx, $event)\" title=\"More actions\">\r\n                          <mat-icon>more_vert</mat-icon>\r\n                        </button>\r\n                        @if (openMenuIndex === rowIdx) {\r\n                          <div class=\"osl-custom-menu\"\r\n                               [style.top.px]=\"menuPosition.top\"\r\n                               [style.left.px]=\"menuPosition.left\">\r\n                            <div class=\"osl-custom-menu-header\">Actions</div>\r\n                            @for (action of moreMenuActions; track $index) {\r\n                              @if (!action.hideIf || !action.hideIf(row)) {\r\n                                <button class=\"osl-custom-menu-item\" (click)=\"action.click(row); closeMenu(); $event.stopPropagation()\">\r\n                                  <span class=\"osl-custom-menu-dot\"></span>\r\n                                  {{ getActionLabel(action, row) }}\r\n                                </button>\r\n                              }\r\n                            }\r\n                          </div>\r\n                        }\r\n                      </div>\r\n                    }\r\n                    @if(canEdit){\r\n                    <button class=\"osl-grid-icon-btn\" (click)=\"$event.stopPropagation(); editClick.emit(row)\" title=\"Edit\">\r\n                      <mat-icon>mode_edit_outline</mat-icon>\r\n                    </button>\r\n                    }\r\n                    @if(canDelete){\r\n                    <button class=\"osl-grid-icon-btn osl-grid-icon-btn--danger\" (click)=\"$event.stopPropagation(); deleteClick.emit(row)\" title=\"Delete\">\r\n                      <mat-icon>delete_outline</mat-icon>\r\n                    </button>\r\n                    }\r\n                  </td>\r\n                } @else {\r\n                  <td class=\"osl-grid-td\" [class.osl-grid-td--last]=\"last\" >\r\n                    <span [class.link]=\"col.displayType == 'link'\" (click)=\"col.click ? col.click(row,col):null\">\r\n                    @switch (col.displayType) {\r\n                      @case ('date') { {{ row[col.key] | date }} }\r\n                      @case ('datetime') { {{ row[col.key] | date:'medium' }} }\r\n                      @case ('time') { {{ row[col.key] | date:'shortTime' }} }\r\n                      @case ('customDateFormat') { {{ row[col.key] | date:col.customDateFormat }} }\r\n                      @case ('boolean') {\r\n                        @if (row[col.key]) {\r\n                          <span class=\"osl-bool-badge osl-bool-badge--true\" title=\"Yes\">\r\n                            <svg viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                              <circle cx=\"8\" cy=\"8\" r=\"8\" fill=\"#22c55e\"/>\r\n                              <path d=\"M4.5 8.25L6.75 10.5L11.5 5.5\" stroke=\"#ffffff\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                            </svg>\r\n                          </span>\r\n                        } @else {\r\n                          <span class=\"osl-bool-badge osl-bool-badge--false\" title=\"No\">\r\n                            <svg viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                              <circle cx=\"8\" cy=\"8\" r=\"8\" fill=\"#f87171\"/>\r\n                              <path d=\"M5.5 5.5L10.5 10.5M10.5 5.5L5.5 10.5\" stroke=\"#ffffff\" stroke-width=\"1.75\" stroke-linecap=\"round\"/>\r\n                            </svg>\r\n                          </span>\r\n                        }\r\n                      }\r\n                      @default { {{ getCellValue(row, col) }} }\r\n                    }\r\n                  </span>\r\n                  </td>\r\n                }\r\n              }\r\n            </tr>\r\n          }\r\n        }\r\n      </tbody>\r\n    </table>\r\n  </div>\r\n\r\n  @if (isPaginated) {\r\n    <div class=\"osl-grid-pagination\">\r\n\r\n      <span class=\"osl-grid-pagination__info\">\r\n        @if (loading) {\r\n          Loading...\r\n        } @else if (_total > 0) {\r\n          {{ startRecord }}\u2013{{ endRecord }} of {{ _total }} records\r\n        } @else {\r\n          No records\r\n        }\r\n      </span>\r\n\r\n      <div class=\"osl-grid-pagination__controls\">\r\n        <button class=\"osl-grid-page-btn osl-grid-page-btn--nav\" (click)=\"goToPage(1)\" [disabled]=\"currentPage === 1 || loading\" title=\"First page\">\r\n          \u00AB\r\n        </button>\r\n        <button class=\"osl-grid-page-btn osl-grid-page-btn--nav\" (click)=\"goToPage(currentPage - 1)\" [disabled]=\"currentPage === 1 || loading\" title=\"Previous page\">\r\n          \u2039 Prev\r\n        </button>\r\n\r\n        @for (page of pageNumbers; track $index) {\r\n          @if (page === -1) {\r\n            <span class=\"osl-grid-page-ellipsis\">\u2026</span>\r\n          } @else {\r\n            <button\r\n              class=\"osl-grid-page-btn osl-grid-page-btn--num\"\r\n              [class.osl-grid-page-btn--active]=\"page === currentPage\"\r\n              [disabled]=\"loading\"\r\n              (click)=\"goToPage(page)\"\r\n            >\r\n              {{ page }}\r\n            </button>\r\n          }\r\n        }\r\n\r\n        <button class=\"osl-grid-page-btn osl-grid-page-btn--nav\" (click)=\"goToPage(currentPage + 1)\" [disabled]=\"currentPage === totalPages || loading\" title=\"Next page\">\r\n          Next \u203A\r\n        </button>\r\n        <button class=\"osl-grid-page-btn osl-grid-page-btn--nav\" (click)=\"goToPage(totalPages)\" [disabled]=\"currentPage === totalPages || loading\" title=\"Last page\">\r\n          \u00BB\r\n        </button>\r\n      </div>\r\n\r\n      <div class=\"osl-grid-pagination__size\">\r\n        <select class=\"osl-grid-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-grid-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);border-radius:var(--osl-border-radius);overflow:hidden;background:#fff}.osl-grid-table-container{overflow-x:auto;overflow-y:auto;min-height:200px}.osl-grid-table{width:100%;border-collapse:collapse;table-layout:auto}.osl-grid-thead{position:sticky;top:0;z-index:2}.osl-grid-th{background:#f3f4f6;color:#4b5563;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.04em;padding:10px 14px;text-align:left;border-bottom:2px solid var(--osl-border-color);border-right:1px solid var(--osl-border-color);white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none}.osl-grid-th:hover{background:#e5e7eb}.osl-grid-th--last{border-right:none}.osl-grid-th-inner{display:inline-flex;align-items:center;gap:6px}.osl-grid-sort-icon{font-size:11px;color:#9ca3af}.osl-grid-sort-icon--active{color:var(--osl-primary)}.osl-grid-sort-icon--idle{opacity:.35}.osl-grid-row{border-bottom:1px solid #f3f4f6;transition:background .12s}.osl-grid-row:hover{background:#f9fafb}.osl-grid-row:last-child{border-bottom:none}.osl-grid-td{padding:10px 14px;color:#111827;font-size:var(--osl-text-font-size);vertical-align:middle;white-space:nowrap;border-right:1px solid #f3f4f6}.osl-grid-td--last{border-right:none}@keyframes osl-row-highlight-fade{0%,60%{background:#6366f112}to{background:transparent}}.osl-grid-row--highlighted{box-shadow:inset 4px 0 0 var(--osl-primary);animation:osl-row-highlight-fade 3s ease-out forwards}.osl-grid-empty{padding:48px 16px;text-align:center;color:#9ca3af;font-size:var(--osl-text-font-size)}.osl-grid-pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;border-top:1px solid var(--osl-border-color);background:#f9fafb;flex-shrink:0;flex-wrap:wrap}.osl-grid-pagination__info{font-size:12px;color:#6b7280;white-space:nowrap;min-width:120px}.osl-grid-pagination__controls{display:flex;align-items:center;gap:3px;flex-wrap:nowrap}.osl-grid-pagination__size{display:flex;align-items:center;min-width:120px;justify-content:flex-end}.osl-grid-page-btn{display:inline-flex;align-items:center;justify-content:center;height:30px;padding:0 10px;border:1px solid var(--osl-border-color);border-radius:var(--osl-border-radius);background:#fff;color:#374151;font-size:13px;font-family:inherit;cursor:pointer;transition:background .12s,border-color .12s,color .12s;white-space:nowrap}.osl-grid-page-btn:hover:not(:disabled){background:#f3f4f6;border-color:#9ca3af}.osl-grid-page-btn:disabled{opacity:.35;cursor:not-allowed}.osl-grid-page-btn--nav{font-size:12px;color:#6b7280}.osl-grid-page-btn--num{min-width:30px;padding:0;font-size:13px}.osl-grid-page-btn--active{background:var(--osl-primary);border-color:var(--osl-primary);color:#fff;font-weight:600}.osl-grid-page-btn--active:hover:not(:disabled){background:var(--osl-primary-hover);border-color:var(--osl-primary-hover)}.osl-grid-page-ellipsis{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;color:#9ca3af;font-size:13px;pointer-events:none}.osl-grid-page-size{height:30px;padding:0 8px;border:1px solid var(--osl-border-color);border-radius:var(--osl-border-radius);background:#fff;color:#374151;font-size:12px;font-family:inherit;cursor:pointer;outline:none}.osl-grid-page-size:focus{border-color:var(--osl-focus-border-color)}.osl-grid-th--actions{width:80px;min-width:80px;cursor:default;text-align:center}.osl-grid-th--actions:hover{background:#f3f4f6}.osl-grid-td--actions{width:80px;min-width:80px;text-align:center;padding:6px 8px;white-space:nowrap}.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}.osl-menu-wrapper{position:relative;display:inline-flex}.osl-custom-menu{position:fixed;z-index:9999;min-width:190px;background:#fff;border:1px solid #e5e7eb;border-radius:10px;box-shadow:0 8px 24px #0000001f,0 2px 8px #00000012;overflow:hidden;animation:osl-menu-appear .15s cubic-bezier(.16,1,.3,1)}@keyframes osl-menu-appear{0%{opacity:0;transform:translateY(-8px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}.osl-custom-menu-header{padding:8px 14px 6px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#9ca3af;border-bottom:1px solid #f3f4f6;-webkit-user-select:none;user-select:none}.osl-custom-menu-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 14px;background:transparent;border:none;border-left:3px solid transparent;border-bottom:1px solid #f9fafb;text-align:left;font-size:13px;font-weight:500;font-family:inherit;color:#374151;cursor:pointer;white-space:nowrap;transition:background .12s,color .12s,border-left-color .12s}.osl-custom-menu-item:last-child{border-bottom:none}.osl-custom-menu-item:hover{background:#f5f3ff;color:var(--osl-primary);border-left-color:var(--osl-primary)}.osl-custom-menu-item:hover .osl-custom-menu-dot{background:var(--osl-primary);box-shadow:0 0 0 3px #6366f12e}.osl-custom-menu-dot{flex-shrink:0;width:6px;height:6px;border-radius:50%;background:#d1d5db;transition:background .12s,box-shadow .12s}@keyframes osl-skeleton-pulse{0%,to{opacity:1}50%{opacity:.4}}.osl-skeleton{height:14px;border-radius:4px;background:#e5e7eb;animation:osl-skeleton-pulse 1.4s ease-in-out infinite;width:80%}.osl-skeleton--actions{width:52px;margin:0 auto}.osl-skeleton--header{height:11px;width:65%;background:#d1d5db;border-radius:3px}.osl-grid-th--skeleton{cursor:default;pointer-events:none}.osl-grid-row--skeleton{pointer-events:none}.icon{background-repeat:no-repeat;background-position:center;display:inline-block!important;vertical-align:middle;width:18%;height:250px;background-image:url('data:image/svg+xml,<svg width=\"147\" height=\"134\" viewBox=\"0 0 147 134\" xmlns=\"http://www.w3.org/2000/svg\">%0D%0A    <g fill=\"none\" fill-rule=\"evenodd\">%0D%0A        <path d=\"M2.143 94.537c-2.858-1.65-2.858-4.35 0-6l66.1-38.163c2.858-1.65 7.534-1.65 10.392 0l66.101 38.163c2.858 1.65 2.858 4.35 0 6l-66.1 38.163c-2.859 1.65-7.535 1.65-10.393 0l-66.1-38.162z\" fill=\"%23EAF0F6\" fill-opacity=\".75\"/>%0D%0A        <path d=\"M94.611 80.446c11.065 6.39 11.065 16.843 0 23.231-11.065 6.39-29.172 6.39-40.238 0-11.065-6.388-11.065-16.842 0-23.23 11.066-6.39 29.173-6.39 40.238 0\" fill=\"%23FFF\"/>%0D%0A        <path d=\"M82.974 42.77c-5.498 1.128-11.537 1.124-17.03-.013L46.688 88.68h.007c1.089-3.023 3.637-5.9 7.679-8.233 11.065-6.39 29.172-6.39 40.237 0 2.902 1.674 5.02 3.632 6.4 5.719L82.975 42.77z\" fill=\"%23FFF\"/>%0D%0A        <path d=\"M92.296 32.687c9.792-5.653 9.792-14.905 0-20.558-9.792-5.653-25.815-5.653-35.607 0-9.792 5.653-9.793 14.905 0 20.558 9.792 5.653 25.815 5.653 35.607 0z\" stroke=\"%23CBD6E5\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0D%0A        <path d=\"M87.338 30.07c7.3-4.214 7.3-11.11 0-15.325s-19.244-4.215-26.544 0c-7.3 4.214-7.3 11.111 0 15.325 7.3 4.214 19.244 4.214 26.544 0z\" stroke=\"%23CBD6E5\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0D%0A        <path d=\"M92.296 32.687c-9.792 5.653-25.815 5.653-35.607 0-4.896-2.827-7.344-6.553-7.344-10.28v6.703c0 3.726 2.448 7.452 7.344 10.279 9.792 5.653 25.815 5.653 35.607 0 4.896-2.827 7.344-6.553 7.344-10.28v-6.701c0 3.726-2.448 7.452-7.344 10.279z\" stroke=\"%23CBD6E5\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0D%0A        <path d=\"M100.274 42.398l3.987-6.33-7.217-4.818-.011-.008-.004-.002v.001c-.481-.273-1.14-.234-1.867.185-1.46.843-2.654 2.912-2.654 4.598 0 .801.275 1.368.715 1.661l-.003.006.056.038.018.011 6.98 4.658z\" stroke=\"%23CBD6E5\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0D%0A        <path d=\"M119.293 42.398l-14.095-8.168c-.745-.432-1.772-.374-2.904.28-2.259 1.303-4.107 4.505-4.107 7.113 0 1.32.475 2.241 1.235 2.664l-.002.004 14.179 8.201\" stroke=\"%23CBD6E5\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0D%0A        <path d=\"M120.635 45.115c0-2.609-1.848-3.676-4.107-2.37-2.26 1.303-4.108 4.504-4.108 7.113 0 2.608 1.848 3.676 4.108 2.371 2.26-1.304 4.107-4.505 4.107-7.114zM74.333 12.076c-3.027 1.608-5.823 3.647-8.256 6.062-2.93 2.909-5.318 6.35-7.064 10.092.601.496 1.271.97 2.03 1.408 3.03 1.748 6.86 2.749 10.812 3.023 1.165-3.821 2.893-7.457 5.26-10.67 2.245-3.048 5.088-5.688 8.321-7.65-3.252-1.476-7.168-2.232-11.103-2.265z\" stroke=\"%23CBD6E5\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0D%0A        <path d=\"M87.55 15.472c-3.979 1.873-7.243 5.108-9.606 8.83-1.669 2.63-2.918 5.49-3.927 8.443 1.232.002 2.462-.07 3.674-.208 1.76-3.001 3.973-6.521 5.967-8.772 1.998-2.255 4.375-4.226 7.071-5.545-.784-.996-1.852-1.922-3.179-2.748z\" stroke=\"%23CBD6E5\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0D%0A        <path d=\"M92.296 32.687c9.792-5.653 9.792-14.905 0-20.558-9.792-5.653-25.815-5.653-35.607 0-9.792 5.653-9.793 14.905 0 20.558 9.792 5.653 25.815 5.653 35.607 0\" fill=\"%23FFF\"/>%0D%0A        <path d=\"M92.296 32.687c9.792-5.653 9.792-14.905 0-20.558-9.792-5.653-25.815-5.653-35.607 0-9.792 5.653-9.793 14.905 0 20.558 9.792 5.653 25.815 5.653 35.607 0z\" stroke=\"%23CBD6E5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0D%0A        <path d=\"M87.338 30.07c7.3-4.214 7.3-11.11 0-15.325s-19.244-4.215-26.544 0c-7.3 4.214-7.3 11.111 0 15.325 7.3 4.214 19.244 4.214 26.544 0\" fill=\"%23F2F5F8\"/>%0D%0A        <path d=\"M87.338 30.07c7.3-4.214 7.3-11.11 0-15.325s-19.244-4.215-26.544 0c-7.3 4.214-7.3 11.111 0 15.325 7.3 4.214 19.244 4.214 26.544 0z\" stroke=\"%23CBD6E5\"/>%0D%0A        <path d=\"M92.296 32.687c-9.792 5.653-25.815 5.653-35.607 0-4.896-2.827-7.344-6.553-7.344-10.28v6.703c0 3.726 2.448 7.452 7.344 10.279 9.792 5.653 25.815 5.653 35.607 0 4.896-2.827 7.344-6.553 7.344-10.28v-6.701c0 3.726-2.448 7.452-7.344 10.279\" fill=\"%23F2F5F8\"/>%0D%0A        <path d=\"M92.296 32.687c-9.792 5.653-25.815 5.653-35.607 0-4.896-2.827-7.344-6.553-7.344-10.28v6.703c0 3.726 2.448 7.452 7.344 10.279 9.792 5.653 25.815 5.653 35.607 0 4.896-2.827 7.344-6.553 7.344-10.28v-6.701c0 3.726-2.448 7.452-7.344 10.279z\" stroke=\"%23CBD6E5\"/>%0D%0A        <path d=\"M100.274 42.398l3.987-6.33-7.217-4.818-.011-.008-.004-.002v.001c-.481-.273-1.14-.234-1.867.185-1.46.843-2.654 2.912-2.654 4.598 0 .801.275 1.368.715 1.661l-.003.006.056.038.018.011 6.98 4.658z\" fill=\"%23FFF\"/>%0D%0A        <path d=\"M100.274 42.398l3.987-6.33-7.217-4.818-.011-.008-.004-.002v.001c-.481-.273-1.14-.234-1.867.185-1.46.843-2.654 2.912-2.654 4.598 0 .801.275 1.368.715 1.661l-.003.006.056.038.018.011 6.98 4.658z\" stroke=\"%23CBD6E5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0D%0A        <path d=\"M119.293 42.398l-14.095-8.168c-.745-.432-1.772-.374-2.904.28-2.259 1.303-4.107 4.505-4.107 7.113 0 1.32.475 2.241 1.235 2.664l-.002.004 14.179 8.201\" fill=\"%23F2F5F8\"/>%0D%0A        <path d=\"M119.293 42.398l-14.095-8.168c-.745-.432-1.772-.374-2.904.28-2.259 1.303-4.107 4.505-4.107 7.113 0 1.32.475 2.241 1.235 2.664l-.002.004 14.179 8.201\" stroke=\"%23CBD6E5\"/>%0D%0A        <path d=\"M120.635 45.115c0-2.609-1.848-3.676-4.107-2.37-2.26 1.303-4.108 4.504-4.108 7.113 0 2.608 1.848 3.676 4.108 2.371 2.26-1.304 4.107-4.505 4.107-7.114\" fill=\"%23F2F5F8\"/>%0D%0A        <path d=\"M120.635 45.115c0-2.609-1.848-3.676-4.107-2.37-2.26 1.303-4.108 4.504-4.108 7.113 0 2.608 1.848 3.676 4.108 2.371 2.26-1.304 4.107-4.505 4.107-7.114z\" stroke=\"%23CBD6E5\"/>%0D%0A        <path d=\"M74.333 12.076c-3.027 1.608-5.823 3.647-8.256 6.062-2.93 2.909-5.318 6.35-7.064 10.092.601.496 1.271.97 2.03 1.408 3.03 1.748 6.86 2.749 10.812 3.023 1.165-3.821 2.893-7.457 5.26-10.67 2.245-3.048 5.088-5.688 8.321-7.65-3.252-1.476-7.168-2.232-11.103-2.265\" fill=\"%23FFF\"/>%0D%0A        <path d=\"M87.55 15.472c-3.979 1.873-7.243 5.108-9.606 8.83-1.669 2.63-2.918 5.49-3.927 8.443 1.232.002 2.462-.07 3.674-.208 1.76-3.001 3.973-6.521 5.967-8.772 1.998-2.255 4.375-4.226 7.071-5.545-.784-.996-1.852-1.922-3.179-2.748\" fill=\"%23FFF\"/>%0D%0A        <path d=\"M101.012 86.166L82.974 42.77c-5.499 1.127-11.537 1.123-17.031-.014L46.687 88.679h.007\" stroke=\"%23CBD6E5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-dasharray=\"2,3,0,0\"/>%0D%0A        <path d=\"M94.611 80.446c11.065 6.39 11.065 16.843 0 23.231-11.065 6.39-29.172 6.39-40.238 0-11.065-6.388-11.065-16.842 0-23.23 11.066-6.39 29.173-6.39 40.238 0z\" stroke=\"%23CBD6E5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-dasharray=\"2,3,0,0\"/>%0D%0A        <path d=\"M121.68 10.236l-11.902 4.361M115.666 23.734l-5.239-2.47M119 25.306l-.753-.356M106.763 7.402l-.803 1.704M109.781 1l-1.81 3.84\" stroke=\"%23CBD6E5\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0D%0A    </g>%0D%0A</svg>%0D%0A');background-size:100%;animation:moveUpDown 3s ease-in-out infinite}@keyframes moveUpDown{0%,to{transform:translateY(0)}50%{transform:translateY(-15px)}}.pointer{cursor:pointer}.link{text-decoration:underline;color:#00f;cursor:pointer}.osl-bool-badge{display:inline-flex;align-items:center;justify-content:center}.osl-bool-badge svg{width:20px;height:20px;display:block;border-radius:50%;filter:drop-shadow(0 1px 2px rgba(0,0,0,.15));transition:transform .15s}.osl-bool-badge:hover svg{transform:scale(1.15)}\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: "pipe", type: i1$2.DatePipe, name: "date" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: OslGrid, isStandalone: false, selector: "osl-grid", inputs: { columns: "columns", datasource: "datasource", isPaginated: "isPaginated", pageSize: "pageSize", autoMode: "autoMode", totalRecords: "totalRecords", tableHeight: "tableHeight", loading: "loading", isSelectable: "isSelectable", moreMenuActions: "moreMenuActions", canEdit: "canEdit", canDelete: "canDelete", highlightedRow: "highlightedRow", primaryKey: "primaryKey" }, outputs: { datasourceChange: "datasourceChange", pageChange: "pageChange", pageSizeChange: "pageSizeChange", sortChange: "sortChange", editClick: "editClick", deleteClick: "deleteClick", onRowClick: "onRowClick" }, host: { listeners: { "document:click": "onDocumentClick()" } }, viewQueries: [{ propertyName: "_tableContainerRef", first: true, predicate: ["tableContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"osl-grid-wrapper\">\r\n\r\n  <div #tableContainer class=\"osl-grid-table-container\" [style.height]=\"tableHeight\">\r\n    <table class=\"osl-grid-table\">\r\n      <thead class=\"osl-grid-thead\">\r\n        <tr>\r\n          @if (loading && columns.length === 0) {\r\n            @for (sk of skeletonColumns; track $index) {\r\n              <th class=\"osl-grid-th osl-grid-th--skeleton\">\r\n                <div class=\"osl-skeleton osl-skeleton--header\"></div>\r\n              </th>\r\n            }\r\n          } @else {\r\n            @for (col of columns; track col.key; let last = $last) {\r\n              <th\r\n                class=\"osl-grid-th\"\r\n                [class.osl-grid-th--last]=\"last\"\r\n                [class.osl-grid-th--actions]=\"col.isActions\"\r\n                (click)=\"sort(col.key, col.isActions)\"\r\n              >\r\n                @if (!col.isActions) {\r\n                  <span class=\"osl-grid-th-inner\">\r\n                    {{ col.label }}\r\n                    <span class=\"osl-grid-sort-icon\" [class.osl-grid-sort-icon--active]=\"sortKey === col.key\">\r\n                      @if (sortKey === col.key) {\r\n                        {{ sortAsc ? '\u2191' : '\u2193' }}\r\n                      } @else {\r\n                        <span class=\"osl-grid-sort-icon--idle\">\u21C5</span>\r\n                      }\r\n                    </span>\r\n                  </span>\r\n                }\r\n              </th>\r\n            }\r\n          }\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @if (loading) {\r\n          @for (sk of skeletonRows; track $index) {\r\n            <tr class=\"osl-grid-row osl-grid-row--skeleton\">\r\n              @if (columns.length > 0) {\r\n                @for (col of columns; track col.key; let last = $last) {\r\n                  <td class=\"osl-grid-td\" [class.osl-grid-td--last]=\"last\" [class.osl-grid-td--actions]=\"col.isActions\">\r\n                    @if (col.isActions) {\r\n                      <div class=\"osl-skeleton osl-skeleton--actions\"></div>\r\n                    } @else {\r\n                      <div class=\"osl-skeleton\"></div>\r\n                    }\r\n                  </td>\r\n                }\r\n              } @else {\r\n                @for (sk2 of skeletonColumns; track $index; let last = $last) {\r\n                  <td class=\"osl-grid-td\" [class.osl-grid-td--last]=\"last\">\r\n                    <div class=\"osl-skeleton\"></div>\r\n                  </td>\r\n                }\r\n              }\r\n            </tr>\r\n          }\r\n        } @else {\r\n          @if (pagedData.length === 0) {\r\n            <tr>\r\n              <td [attr.colspan]=\"columns.length\" class=\"osl-grid-empty\">\r\n                <div class=\"d-flex align-items-center justify-content-center floating-element\">\r\n                  <div class=\"mx-4\">\r\n                    <p class=\"f-s-20 f-w-600 text-start\">No Records match the <br> current filters.</p>\r\n                    <p class=\"text-start\">Expecting to see new Records? Try again in <br> a few seconds as the system catches up</p>\r\n                  </div>\r\n                  <i class=\"icon\"></i>\r\n\r\n                </div>\r\n              </td>\r\n            </tr>\r\n          }\r\n          @for (row of pagedData; track $index; let rowIdx = $index) {\r\n            <tr class=\"osl-grid-row\"\r\n                [class.pointer]=\"isSelectable\"\r\n                [class.osl-grid-row--highlighted]=\"isHighlightedRow(row)\"\r\n                (click)=\"onRowClick.emit(row)\">\r\n              @for (col of columns; track col.key; let last = $last) {\r\n                @if (col.isActions) {\r\n                  <td class=\"osl-grid-td osl-grid-td--actions\" [class.osl-grid-td--last]=\"last\">\r\n                      @if (moreMenuActions.length > 0 && hasVisibleActions(row)) {\r\n                      <div class=\"osl-menu-wrapper\">\r\n                        <button class=\"osl-grid-icon-btn osl-grid-icon-btn--more\" (click)=\"toggleMenu(rowIdx, $event)\" title=\"More actions\">\r\n                          <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                            <circle cx=\"12\" cy=\"5\" r=\"2.2\"/><circle cx=\"12\" cy=\"12\" r=\"2.2\"/><circle cx=\"12\" cy=\"19\" r=\"2.2\"/>\r\n                          </svg>\r\n                        </button>\r\n                        @if (openMenuIndex === rowIdx) {\r\n                          <div class=\"osl-custom-menu\"\r\n                               [style.top.px]=\"menuPosition.top\"\r\n                               [style.left.px]=\"menuPosition.left\">\r\n                            <div class=\"osl-custom-menu-header\">Actions</div>\r\n                            @for (action of moreMenuActions; track $index) {\r\n                              @if (!action.hideIf || !action.hideIf(row)) {\r\n                                <button class=\"osl-custom-menu-item\" (click)=\"action.click(row); closeMenu(); $event.stopPropagation()\">\r\n                                  <span class=\"osl-custom-menu-dot\"></span>\r\n                                  {{ getActionLabel(action, row) }}\r\n                                </button>\r\n                              }\r\n                            }\r\n                          </div>\r\n                        }\r\n                      </div>\r\n                    }\r\n                    @if(canEdit){\r\n                    <button class=\"osl-grid-icon-btn osl-grid-icon-btn--edit\" (click)=\"$event.stopPropagation(); editClick.emit(row)\" title=\"Edit\">\r\n                      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                        <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"/>\r\n                        <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"/>\r\n                      </svg>\r\n                    </button>\r\n                    }\r\n                    @if(canDelete){\r\n                    <button class=\"osl-grid-icon-btn osl-grid-icon-btn--danger\" (click)=\"$event.stopPropagation(); deleteClick.emit(row)\" title=\"Delete\">\r\n                      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                        <polyline points=\"3 6 5 6 21 6\"/>\r\n                        <path d=\"M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2\"/>\r\n                        <line x1=\"10\" y1=\"11\" x2=\"10\" y2=\"17\"/><line x1=\"14\" y1=\"11\" x2=\"14\" y2=\"17\"/>\r\n                      </svg>\r\n                    </button>\r\n                    }\r\n                  \r\n                  </td>\r\n                } @else {\r\n                  <td class=\"osl-grid-td\" [class.osl-grid-td--last]=\"last\" >\r\n                    <span [class.link]=\"col.displayType == 'link'\" (click)=\"col.click ? col.click(row,col):null\">\r\n                    @switch (col.displayType) {\r\n                      @case ('date') { {{ row[col.key] | date }} }\r\n                      @case ('datetime') { {{ row[col.key] | date:'medium' }} }\r\n                      @case ('time') { {{ row[col.key] | date:'shortTime' }} }\r\n                      @case ('customDateFormat') { {{ row[col.key] | date:col.customDateFormat }} }\r\n                      @case ('boolean') {\r\n                        @if (row[col.key]) {\r\n                          <span class=\"osl-bool-badge osl-bool-badge--true\" title=\"Yes\">\r\n                            <svg viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                              <circle cx=\"8\" cy=\"8\" r=\"8\" fill=\"#22c55e\"/>\r\n                              <path d=\"M4.5 8.25L6.75 10.5L11.5 5.5\" stroke=\"#ffffff\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                            </svg>\r\n                          </span>\r\n                        } @else {\r\n                          <span class=\"osl-bool-badge osl-bool-badge--false\" title=\"No\">\r\n                            <svg viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                              <circle cx=\"8\" cy=\"8\" r=\"8\" fill=\"#f87171\"/>\r\n                              <path d=\"M5.5 5.5L10.5 10.5M10.5 5.5L5.5 10.5\" stroke=\"#ffffff\" stroke-width=\"1.75\" stroke-linecap=\"round\"/>\r\n                            </svg>\r\n                          </span>\r\n                        }\r\n                      }\r\n                      @default { {{ getCellValue(row, col) }} }\r\n                    }\r\n                  </span>\r\n                  </td>\r\n                }\r\n              }\r\n            </tr>\r\n          }\r\n        }\r\n      </tbody>\r\n    </table>\r\n  </div>\r\n\r\n  @if (isPaginated) {\r\n    <div class=\"osl-grid-pagination\">\r\n\r\n      <span class=\"osl-grid-pagination__info\">\r\n        @if (loading) {\r\n          Loading...\r\n        } @else if (_total > 0) {\r\n          {{ startRecord }}\u2013{{ endRecord }} of {{ _total }} records\r\n        } @else {\r\n          No records\r\n        }\r\n      </span>\r\n\r\n      <div class=\"osl-grid-pagination__controls\">\r\n        <button class=\"osl-grid-page-btn osl-grid-page-btn--nav\" (click)=\"goToPage(1)\" [disabled]=\"currentPage === 1 || loading\" title=\"First page\">\r\n          \u00AB\r\n        </button>\r\n        <button class=\"osl-grid-page-btn osl-grid-page-btn--nav\" (click)=\"goToPage(currentPage - 1)\" [disabled]=\"currentPage === 1 || loading\" title=\"Previous page\">\r\n          \u2039 Prev\r\n        </button>\r\n\r\n        @for (page of pageNumbers; track $index) {\r\n          @if (page === -1) {\r\n            <span class=\"osl-grid-page-ellipsis\">\u2026</span>\r\n          } @else {\r\n            <button\r\n              class=\"osl-grid-page-btn osl-grid-page-btn--num\"\r\n              [class.osl-grid-page-btn--active]=\"page === currentPage\"\r\n              [disabled]=\"loading\"\r\n              (click)=\"goToPage(page)\"\r\n            >\r\n              {{ page }}\r\n            </button>\r\n          }\r\n        }\r\n\r\n        <button class=\"osl-grid-page-btn osl-grid-page-btn--nav\" (click)=\"goToPage(currentPage + 1)\" [disabled]=\"currentPage === totalPages || loading\" title=\"Next page\">\r\n          Next \u203A\r\n        </button>\r\n        <button class=\"osl-grid-page-btn osl-grid-page-btn--nav\" (click)=\"goToPage(totalPages)\" [disabled]=\"currentPage === totalPages || loading\" title=\"Last page\">\r\n          \u00BB\r\n        </button>\r\n      </div>\r\n\r\n      <div class=\"osl-grid-pagination__size\">\r\n        <select class=\"osl-grid-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-grid-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);border-radius:var(--osl-border-radius);overflow:hidden;background:#fff}.osl-grid-table-container{overflow-x:auto;overflow-y:auto;min-height:200px}.osl-grid-table{width:100%;border-collapse:collapse;table-layout:auto}.osl-grid-thead{position:sticky;top:0;z-index:2}.osl-grid-th{background:#f3f4f6;color:#4b5563;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.04em;padding:10px 14px;text-align:left;border-bottom:2px solid var(--osl-border-color);border-right:1px solid var(--osl-border-color);white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none}.osl-grid-th:hover{background:#e5e7eb}.osl-grid-th--last{border-right:none}.osl-grid-th-inner{display:inline-flex;align-items:center;gap:6px}.osl-grid-sort-icon{font-size:11px;color:#9ca3af}.osl-grid-sort-icon--active{color:var(--osl-primary)}.osl-grid-sort-icon--idle{opacity:.35}.osl-grid-row{border-bottom:1px solid #f3f4f6;transition:background .12s}.osl-grid-row:hover{background:#f9fafb}.osl-grid-row:last-child{border-bottom:none}.osl-grid-td{padding:10px 14px;color:#111827;font-size:var(--osl-text-font-size);vertical-align:middle;white-space:nowrap;border-right:1px solid #f3f4f6}.osl-grid-td--last{border-right:none}@keyframes osl-row-highlight-fade{0%,60%{background:#6366f112}to{background:transparent}}.osl-grid-row--highlighted{box-shadow:inset 4px 0 0 var(--osl-primary);animation:osl-row-highlight-fade 3s ease-out forwards}.osl-grid-empty{padding:48px 16px;text-align:center;color:#9ca3af;font-size:var(--osl-text-font-size)}.osl-grid-pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;border-top:1px solid var(--osl-border-color);background:#f9fafb;flex-shrink:0;flex-wrap:wrap}.osl-grid-pagination__info{font-size:12px;color:#6b7280;white-space:nowrap;min-width:120px}.osl-grid-pagination__controls{display:flex;align-items:center;gap:3px;flex-wrap:nowrap}.osl-grid-pagination__size{display:flex;align-items:center;min-width:120px;justify-content:flex-end}.osl-grid-page-btn{display:inline-flex;align-items:center;justify-content:center;height:30px;padding:0 10px;border:1px solid var(--osl-border-color);border-radius:var(--osl-border-radius);background:#fff;color:#374151;font-size:13px;font-family:inherit;cursor:pointer;transition:background .12s,border-color .12s,color .12s;white-space:nowrap}.osl-grid-page-btn:hover:not(:disabled){background:#f3f4f6;border-color:#9ca3af}.osl-grid-page-btn:disabled{opacity:.35;cursor:not-allowed}.osl-grid-page-btn--nav{font-size:12px;color:#6b7280}.osl-grid-page-btn--num{min-width:30px;padding:0;font-size:13px}.osl-grid-page-btn--active{background:var(--osl-primary);border-color:var(--osl-primary);color:#fff;font-weight:600}.osl-grid-page-btn--active:hover:not(:disabled){background:var(--osl-primary-hover);border-color:var(--osl-primary-hover)}.osl-grid-page-ellipsis{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;color:#9ca3af;font-size:13px;pointer-events:none}.osl-grid-page-size{height:30px;padding:0 8px;border:1px solid var(--osl-border-color);border-radius:var(--osl-border-radius);background:#fff;color:#374151;font-size:12px;font-family:inherit;cursor:pointer;outline:none}.osl-grid-page-size:focus{border-color:var(--osl-focus-border-color)}.osl-grid-th--actions{width:80px;min-width:80px;cursor:default;text-align:center}.osl-grid-th--actions:hover{background:#f3f4f6}.osl-grid-td--actions{width:80px;min-width:80px;text-align:center;padding:6px 8px;white-space:nowrap}.osl-grid-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:1.5px solid var(--osl-border-color);border-radius:8px;background:#fff;color:#6b7280;cursor:pointer;padding:0;transition:border-color .18s,color .18s,background .18s,box-shadow .18s;margin:0 2px;flex-shrink:0}.osl-grid-icon-btn svg{width:15px;height:15px;flex-shrink:0;pointer-events:none}.osl-grid-icon-btn:hover{border-color:var(--osl-primary);color:var(--osl-primary);background:#6366f112;box-shadow:0 0 0 3px #6366f11a}.osl-grid-icon-btn--edit:hover{border-color:#3b82f6;color:#3b82f6;background:#3b82f612;box-shadow:0 0 0 3px #3b82f61a}.osl-grid-icon-btn--more:hover{border-color:#64748b;color:#1e293b;background:#f1f5f9;box-shadow:0 0 0 3px #64748b1a}.osl-grid-icon-btn--danger:hover{border-color:#ef4444;color:#ef4444;background:#ef444412;box-shadow:0 0 0 3px #ef44441a}.osl-menu-wrapper{position:relative;display:inline-flex}.osl-custom-menu{position:fixed;z-index:9999;min-width:190px;background:#fff;border:1px solid #e5e7eb;border-radius:10px;box-shadow:0 8px 24px #0000001f,0 2px 8px #00000012;overflow:hidden;animation:osl-menu-appear .15s cubic-bezier(.16,1,.3,1)}@keyframes osl-menu-appear{0%{opacity:0;transform:translateY(-8px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}.osl-custom-menu-header{padding:8px 14px 6px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#9ca3af;border-bottom:1px solid #f3f4f6;-webkit-user-select:none;user-select:none}.osl-custom-menu-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 14px;background:transparent;border:none;border-left:3px solid transparent;border-bottom:1px solid #f9fafb;text-align:left;font-size:13px;font-weight:500;font-family:inherit;color:#374151;cursor:pointer;white-space:nowrap;transition:background .12s,color .12s,border-left-color .12s}.osl-custom-menu-item:last-child{border-bottom:none}.osl-custom-menu-item:hover{background:#f5f3ff;color:var(--osl-primary);border-left-color:var(--osl-primary)}.osl-custom-menu-item:hover .osl-custom-menu-dot{background:var(--osl-primary);box-shadow:0 0 0 3px #6366f12e}.osl-custom-menu-dot{flex-shrink:0;width:6px;height:6px;border-radius:50%;background:#d1d5db;transition:background .12s,box-shadow .12s}@keyframes osl-skeleton-pulse{0%,to{opacity:1}50%{opacity:.4}}.osl-skeleton{height:14px;border-radius:4px;background:#e5e7eb;animation:osl-skeleton-pulse 1.4s ease-in-out infinite;width:80%}.osl-skeleton--actions{width:52px;margin:0 auto}.osl-skeleton--header{height:11px;width:65%;background:#d1d5db;border-radius:3px}.osl-grid-th--skeleton{cursor:default;pointer-events:none}.osl-grid-row--skeleton{pointer-events:none}.icon{background-repeat:no-repeat;background-position:center;display:inline-block!important;vertical-align:middle;width:18%;height:250px;background-image:url('data:image/svg+xml,<svg width=\"147\" height=\"134\" viewBox=\"0 0 147 134\" xmlns=\"http://www.w3.org/2000/svg\">%0D%0A    <g fill=\"none\" fill-rule=\"evenodd\">%0D%0A        <path d=\"M2.143 94.537c-2.858-1.65-2.858-4.35 0-6l66.1-38.163c2.858-1.65 7.534-1.65 10.392 0l66.101 38.163c2.858 1.65 2.858 4.35 0 6l-66.1 38.163c-2.859 1.65-7.535 1.65-10.393 0l-66.1-38.162z\" fill=\"%23EAF0F6\" fill-opacity=\".75\"/>%0D%0A        <path d=\"M94.611 80.446c11.065 6.39 11.065 16.843 0 23.231-11.065 6.39-29.172 6.39-40.238 0-11.065-6.388-11.065-16.842 0-23.23 11.066-6.39 29.173-6.39 40.238 0\" fill=\"%23FFF\"/>%0D%0A        <path d=\"M82.974 42.77c-5.498 1.128-11.537 1.124-17.03-.013L46.688 88.68h.007c1.089-3.023 3.637-5.9 7.679-8.233 11.065-6.39 29.172-6.39 40.237 0 2.902 1.674 5.02 3.632 6.4 5.719L82.975 42.77z\" fill=\"%23FFF\"/>%0D%0A        <path d=\"M92.296 32.687c9.792-5.653 9.792-14.905 0-20.558-9.792-5.653-25.815-5.653-35.607 0-9.792 5.653-9.793 14.905 0 20.558 9.792 5.653 25.815 5.653 35.607 0z\" stroke=\"%23CBD6E5\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0D%0A        <path d=\"M87.338 30.07c7.3-4.214 7.3-11.11 0-15.325s-19.244-4.215-26.544 0c-7.3 4.214-7.3 11.111 0 15.325 7.3 4.214 19.244 4.214 26.544 0z\" stroke=\"%23CBD6E5\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0D%0A        <path d=\"M92.296 32.687c-9.792 5.653-25.815 5.653-35.607 0-4.896-2.827-7.344-6.553-7.344-10.28v6.703c0 3.726 2.448 7.452 7.344 10.279 9.792 5.653 25.815 5.653 35.607 0 4.896-2.827 7.344-6.553 7.344-10.28v-6.701c0 3.726-2.448 7.452-7.344 10.279z\" stroke=\"%23CBD6E5\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0D%0A        <path d=\"M100.274 42.398l3.987-6.33-7.217-4.818-.011-.008-.004-.002v.001c-.481-.273-1.14-.234-1.867.185-1.46.843-2.654 2.912-2.654 4.598 0 .801.275 1.368.715 1.661l-.003.006.056.038.018.011 6.98 4.658z\" stroke=\"%23CBD6E5\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0D%0A        <path d=\"M119.293 42.398l-14.095-8.168c-.745-.432-1.772-.374-2.904.28-2.259 1.303-4.107 4.505-4.107 7.113 0 1.32.475 2.241 1.235 2.664l-.002.004 14.179 8.201\" stroke=\"%23CBD6E5\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0D%0A        <path d=\"M120.635 45.115c0-2.609-1.848-3.676-4.107-2.37-2.26 1.303-4.108 4.504-4.108 7.113 0 2.608 1.848 3.676 4.108 2.371 2.26-1.304 4.107-4.505 4.107-7.114zM74.333 12.076c-3.027 1.608-5.823 3.647-8.256 6.062-2.93 2.909-5.318 6.35-7.064 10.092.601.496 1.271.97 2.03 1.408 3.03 1.748 6.86 2.749 10.812 3.023 1.165-3.821 2.893-7.457 5.26-10.67 2.245-3.048 5.088-5.688 8.321-7.65-3.252-1.476-7.168-2.232-11.103-2.265z\" stroke=\"%23CBD6E5\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0D%0A        <path d=\"M87.55 15.472c-3.979 1.873-7.243 5.108-9.606 8.83-1.669 2.63-2.918 5.49-3.927 8.443 1.232.002 2.462-.07 3.674-.208 1.76-3.001 3.973-6.521 5.967-8.772 1.998-2.255 4.375-4.226 7.071-5.545-.784-.996-1.852-1.922-3.179-2.748z\" stroke=\"%23CBD6E5\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0D%0A        <path d=\"M92.296 32.687c9.792-5.653 9.792-14.905 0-20.558-9.792-5.653-25.815-5.653-35.607 0-9.792 5.653-9.793 14.905 0 20.558 9.792 5.653 25.815 5.653 35.607 0\" fill=\"%23FFF\"/>%0D%0A        <path d=\"M92.296 32.687c9.792-5.653 9.792-14.905 0-20.558-9.792-5.653-25.815-5.653-35.607 0-9.792 5.653-9.793 14.905 0 20.558 9.792 5.653 25.815 5.653 35.607 0z\" stroke=\"%23CBD6E5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0D%0A        <path d=\"M87.338 30.07c7.3-4.214 7.3-11.11 0-15.325s-19.244-4.215-26.544 0c-7.3 4.214-7.3 11.111 0 15.325 7.3 4.214 19.244 4.214 26.544 0\" fill=\"%23F2F5F8\"/>%0D%0A        <path d=\"M87.338 30.07c7.3-4.214 7.3-11.11 0-15.325s-19.244-4.215-26.544 0c-7.3 4.214-7.3 11.111 0 15.325 7.3 4.214 19.244 4.214 26.544 0z\" stroke=\"%23CBD6E5\"/>%0D%0A        <path d=\"M92.296 32.687c-9.792 5.653-25.815 5.653-35.607 0-4.896-2.827-7.344-6.553-7.344-10.28v6.703c0 3.726 2.448 7.452 7.344 10.279 9.792 5.653 25.815 5.653 35.607 0 4.896-2.827 7.344-6.553 7.344-10.28v-6.701c0 3.726-2.448 7.452-7.344 10.279\" fill=\"%23F2F5F8\"/>%0D%0A        <path d=\"M92.296 32.687c-9.792 5.653-25.815 5.653-35.607 0-4.896-2.827-7.344-6.553-7.344-10.28v6.703c0 3.726 2.448 7.452 7.344 10.279 9.792 5.653 25.815 5.653 35.607 0 4.896-2.827 7.344-6.553 7.344-10.28v-6.701c0 3.726-2.448 7.452-7.344 10.279z\" stroke=\"%23CBD6E5\"/>%0D%0A        <path d=\"M100.274 42.398l3.987-6.33-7.217-4.818-.011-.008-.004-.002v.001c-.481-.273-1.14-.234-1.867.185-1.46.843-2.654 2.912-2.654 4.598 0 .801.275 1.368.715 1.661l-.003.006.056.038.018.011 6.98 4.658z\" fill=\"%23FFF\"/>%0D%0A        <path d=\"M100.274 42.398l3.987-6.33-7.217-4.818-.011-.008-.004-.002v.001c-.481-.273-1.14-.234-1.867.185-1.46.843-2.654 2.912-2.654 4.598 0 .801.275 1.368.715 1.661l-.003.006.056.038.018.011 6.98 4.658z\" stroke=\"%23CBD6E5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0D%0A        <path d=\"M119.293 42.398l-14.095-8.168c-.745-.432-1.772-.374-2.904.28-2.259 1.303-4.107 4.505-4.107 7.113 0 1.32.475 2.241 1.235 2.664l-.002.004 14.179 8.201\" fill=\"%23F2F5F8\"/>%0D%0A        <path d=\"M119.293 42.398l-14.095-8.168c-.745-.432-1.772-.374-2.904.28-2.259 1.303-4.107 4.505-4.107 7.113 0 1.32.475 2.241 1.235 2.664l-.002.004 14.179 8.201\" stroke=\"%23CBD6E5\"/>%0D%0A        <path d=\"M120.635 45.115c0-2.609-1.848-3.676-4.107-2.37-2.26 1.303-4.108 4.504-4.108 7.113 0 2.608 1.848 3.676 4.108 2.371 2.26-1.304 4.107-4.505 4.107-7.114\" fill=\"%23F2F5F8\"/>%0D%0A        <path d=\"M120.635 45.115c0-2.609-1.848-3.676-4.107-2.37-2.26 1.303-4.108 4.504-4.108 7.113 0 2.608 1.848 3.676 4.108 2.371 2.26-1.304 4.107-4.505 4.107-7.114z\" stroke=\"%23CBD6E5\"/>%0D%0A        <path d=\"M74.333 12.076c-3.027 1.608-5.823 3.647-8.256 6.062-2.93 2.909-5.318 6.35-7.064 10.092.601.496 1.271.97 2.03 1.408 3.03 1.748 6.86 2.749 10.812 3.023 1.165-3.821 2.893-7.457 5.26-10.67 2.245-3.048 5.088-5.688 8.321-7.65-3.252-1.476-7.168-2.232-11.103-2.265\" fill=\"%23FFF\"/>%0D%0A        <path d=\"M87.55 15.472c-3.979 1.873-7.243 5.108-9.606 8.83-1.669 2.63-2.918 5.49-3.927 8.443 1.232.002 2.462-.07 3.674-.208 1.76-3.001 3.973-6.521 5.967-8.772 1.998-2.255 4.375-4.226 7.071-5.545-.784-.996-1.852-1.922-3.179-2.748\" fill=\"%23FFF\"/>%0D%0A        <path d=\"M101.012 86.166L82.974 42.77c-5.499 1.127-11.537 1.123-17.031-.014L46.687 88.679h.007\" stroke=\"%23CBD6E5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-dasharray=\"2,3,0,0\"/>%0D%0A        <path d=\"M94.611 80.446c11.065 6.39 11.065 16.843 0 23.231-11.065 6.39-29.172 6.39-40.238 0-11.065-6.388-11.065-16.842 0-23.23 11.066-6.39 29.173-6.39 40.238 0z\" stroke=\"%23CBD6E5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-dasharray=\"2,3,0,0\"/>%0D%0A        <path d=\"M121.68 10.236l-11.902 4.361M115.666 23.734l-5.239-2.47M119 25.306l-.753-.356M106.763 7.402l-.803 1.704M109.781 1l-1.81 3.84\" stroke=\"%23CBD6E5\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0D%0A    </g>%0D%0A</svg>%0D%0A');background-size:100%;animation:moveUpDown 3s ease-in-out infinite}@keyframes moveUpDown{0%,to{transform:translateY(0)}50%{transform:translateY(-15px)}}.pointer{cursor:pointer}.link{text-decoration:underline;color:#00f;cursor:pointer}.osl-bool-badge{display:inline-flex;align-items:center;justify-content:center}.osl-bool-badge svg{width:20px;height:20px;display:block;border-radius:50%;filter:drop-shadow(0 1px 2px rgba(0,0,0,.15));transition:transform .15s}.osl-bool-badge:hover svg{transform:scale(1.15)}\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: "pipe", type: i1$2.DatePipe, name: "date" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslGrid, decorators: [{
             type: Component,
-            args: [{ selector: 'osl-grid', standalone: false, template: "<div class=\"osl-grid-wrapper\">\r\n\r\n  <div #tableContainer class=\"osl-grid-table-container\" [style.height]=\"tableHeight\">\r\n    <table class=\"osl-grid-table\">\r\n      <thead class=\"osl-grid-thead\">\r\n        <tr>\r\n          @if (loading && columns.length === 0) {\r\n            @for (sk of skeletonColumns; track $index) {\r\n              <th class=\"osl-grid-th osl-grid-th--skeleton\">\r\n                <div class=\"osl-skeleton osl-skeleton--header\"></div>\r\n              </th>\r\n            }\r\n          } @else {\r\n            @for (col of columns; track col.key; let last = $last) {\r\n              <th\r\n                class=\"osl-grid-th\"\r\n                [class.osl-grid-th--last]=\"last\"\r\n                [class.osl-grid-th--actions]=\"col.isActions\"\r\n                (click)=\"sort(col.key, col.isActions)\"\r\n              >\r\n                @if (!col.isActions) {\r\n                  <span class=\"osl-grid-th-inner\">\r\n                    {{ col.label }}\r\n                    <span class=\"osl-grid-sort-icon\" [class.osl-grid-sort-icon--active]=\"sortKey === col.key\">\r\n                      @if (sortKey === col.key) {\r\n                        {{ sortAsc ? '\u2191' : '\u2193' }}\r\n                      } @else {\r\n                        <span class=\"osl-grid-sort-icon--idle\">\u21C5</span>\r\n                      }\r\n                    </span>\r\n                  </span>\r\n                }\r\n              </th>\r\n            }\r\n          }\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @if (loading) {\r\n          @for (sk of skeletonRows; track $index) {\r\n            <tr class=\"osl-grid-row osl-grid-row--skeleton\">\r\n              @if (columns.length > 0) {\r\n                @for (col of columns; track col.key; let last = $last) {\r\n                  <td class=\"osl-grid-td\" [class.osl-grid-td--last]=\"last\" [class.osl-grid-td--actions]=\"col.isActions\">\r\n                    @if (col.isActions) {\r\n                      <div class=\"osl-skeleton osl-skeleton--actions\"></div>\r\n                    } @else {\r\n                      <div class=\"osl-skeleton\"></div>\r\n                    }\r\n                  </td>\r\n                }\r\n              } @else {\r\n                @for (sk2 of skeletonColumns; track $index; let last = $last) {\r\n                  <td class=\"osl-grid-td\" [class.osl-grid-td--last]=\"last\">\r\n                    <div class=\"osl-skeleton\"></div>\r\n                  </td>\r\n                }\r\n              }\r\n            </tr>\r\n          }\r\n        } @else {\r\n          @if (pagedData.length === 0) {\r\n            <tr>\r\n              <td [attr.colspan]=\"columns.length\" class=\"osl-grid-empty\">\r\n                <div class=\"d-flex align-items-center justify-content-center floating-element\">\r\n                  <div class=\"mx-4\">\r\n                    <p class=\"f-s-20 f-w-600 text-start\">No Records match the <br> current filters.</p>\r\n                    <p class=\"text-start\">Expecting to see new Records? Try again in <br> a few seconds as the system catches up</p>\r\n                  </div>\r\n                  <i class=\"icon\"></i>\r\n\r\n                </div>\r\n              </td>\r\n            </tr>\r\n          }\r\n          @for (row of pagedData; track $index; let rowIdx = $index) {\r\n            <tr class=\"osl-grid-row\"\r\n                [class.pointer]=\"isSelectable\"\r\n                [class.osl-grid-row--highlighted]=\"isHighlightedRow(row)\"\r\n                (click)=\"onRowClick.emit(row)\">\r\n              @for (col of columns; track col.key; let last = $last) {\r\n                @if (col.isActions) {\r\n                  <td class=\"osl-grid-td osl-grid-td--actions\" [class.osl-grid-td--last]=\"last\">\r\n                         @if (moreMenuActions.length > 0 && hasVisibleActions(row)) {\r\n                      <div class=\"osl-menu-wrapper\">\r\n                        <button class=\"osl-grid-icon-btn\" (click)=\"toggleMenu(rowIdx, $event)\" title=\"More actions\">\r\n                          <mat-icon>more_vert</mat-icon>\r\n                        </button>\r\n                        @if (openMenuIndex === rowIdx) {\r\n                          <div class=\"osl-custom-menu\"\r\n                               [style.top.px]=\"menuPosition.top\"\r\n                               [style.left.px]=\"menuPosition.left\">\r\n                            <div class=\"osl-custom-menu-header\">Actions</div>\r\n                            @for (action of moreMenuActions; track $index) {\r\n                              @if (!action.hideIf || !action.hideIf(row)) {\r\n                                <button class=\"osl-custom-menu-item\" (click)=\"action.click(row); closeMenu(); $event.stopPropagation()\">\r\n                                  <span class=\"osl-custom-menu-dot\"></span>\r\n                                  {{ getActionLabel(action, row) }}\r\n                                </button>\r\n                              }\r\n                            }\r\n                          </div>\r\n                        }\r\n                      </div>\r\n                    }\r\n                    @if(canEdit){\r\n                    <button class=\"osl-grid-icon-btn\" (click)=\"$event.stopPropagation(); editClick.emit(row)\" title=\"Edit\">\r\n                      <mat-icon>mode_edit_outline</mat-icon>\r\n                    </button>\r\n                    }\r\n                    @if(canDelete){\r\n                    <button class=\"osl-grid-icon-btn osl-grid-icon-btn--danger\" (click)=\"$event.stopPropagation(); deleteClick.emit(row)\" title=\"Delete\">\r\n                      <mat-icon>delete_outline</mat-icon>\r\n                    </button>\r\n                    }\r\n                  </td>\r\n                } @else {\r\n                  <td class=\"osl-grid-td\" [class.osl-grid-td--last]=\"last\" >\r\n                    <span [class.link]=\"col.displayType == 'link'\" (click)=\"col.click ? col.click(row,col):null\">\r\n                    @switch (col.displayType) {\r\n                      @case ('date') { {{ row[col.key] | date }} }\r\n                      @case ('datetime') { {{ row[col.key] | date:'medium' }} }\r\n                      @case ('time') { {{ row[col.key] | date:'shortTime' }} }\r\n                      @case ('customDateFormat') { {{ row[col.key] | date:col.customDateFormat }} }\r\n                      @case ('boolean') {\r\n                        @if (row[col.key]) {\r\n                          <span class=\"osl-bool-badge osl-bool-badge--true\" title=\"Yes\">\r\n                            <svg viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                              <circle cx=\"8\" cy=\"8\" r=\"8\" fill=\"#22c55e\"/>\r\n                              <path d=\"M4.5 8.25L6.75 10.5L11.5 5.5\" stroke=\"#ffffff\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                            </svg>\r\n                          </span>\r\n                        } @else {\r\n                          <span class=\"osl-bool-badge osl-bool-badge--false\" title=\"No\">\r\n                            <svg viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                              <circle cx=\"8\" cy=\"8\" r=\"8\" fill=\"#f87171\"/>\r\n                              <path d=\"M5.5 5.5L10.5 10.5M10.5 5.5L5.5 10.5\" stroke=\"#ffffff\" stroke-width=\"1.75\" stroke-linecap=\"round\"/>\r\n                            </svg>\r\n                          </span>\r\n                        }\r\n                      }\r\n                      @default { {{ getCellValue(row, col) }} }\r\n                    }\r\n                  </span>\r\n                  </td>\r\n                }\r\n              }\r\n            </tr>\r\n          }\r\n        }\r\n      </tbody>\r\n    </table>\r\n  </div>\r\n\r\n  @if (isPaginated) {\r\n    <div class=\"osl-grid-pagination\">\r\n\r\n      <span class=\"osl-grid-pagination__info\">\r\n        @if (loading) {\r\n          Loading...\r\n        } @else if (_total > 0) {\r\n          {{ startRecord }}\u2013{{ endRecord }} of {{ _total }} records\r\n        } @else {\r\n          No records\r\n        }\r\n      </span>\r\n\r\n      <div class=\"osl-grid-pagination__controls\">\r\n        <button class=\"osl-grid-page-btn osl-grid-page-btn--nav\" (click)=\"goToPage(1)\" [disabled]=\"currentPage === 1 || loading\" title=\"First page\">\r\n          \u00AB\r\n        </button>\r\n        <button class=\"osl-grid-page-btn osl-grid-page-btn--nav\" (click)=\"goToPage(currentPage - 1)\" [disabled]=\"currentPage === 1 || loading\" title=\"Previous page\">\r\n          \u2039 Prev\r\n        </button>\r\n\r\n        @for (page of pageNumbers; track $index) {\r\n          @if (page === -1) {\r\n            <span class=\"osl-grid-page-ellipsis\">\u2026</span>\r\n          } @else {\r\n            <button\r\n              class=\"osl-grid-page-btn osl-grid-page-btn--num\"\r\n              [class.osl-grid-page-btn--active]=\"page === currentPage\"\r\n              [disabled]=\"loading\"\r\n              (click)=\"goToPage(page)\"\r\n            >\r\n              {{ page }}\r\n            </button>\r\n          }\r\n        }\r\n\r\n        <button class=\"osl-grid-page-btn osl-grid-page-btn--nav\" (click)=\"goToPage(currentPage + 1)\" [disabled]=\"currentPage === totalPages || loading\" title=\"Next page\">\r\n          Next \u203A\r\n        </button>\r\n        <button class=\"osl-grid-page-btn osl-grid-page-btn--nav\" (click)=\"goToPage(totalPages)\" [disabled]=\"currentPage === totalPages || loading\" title=\"Last page\">\r\n          \u00BB\r\n        </button>\r\n      </div>\r\n\r\n      <div class=\"osl-grid-pagination__size\">\r\n        <select class=\"osl-grid-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-grid-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);border-radius:var(--osl-border-radius);overflow:hidden;background:#fff}.osl-grid-table-container{overflow-x:auto;overflow-y:auto;min-height:200px}.osl-grid-table{width:100%;border-collapse:collapse;table-layout:auto}.osl-grid-thead{position:sticky;top:0;z-index:2}.osl-grid-th{background:#f3f4f6;color:#4b5563;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.04em;padding:10px 14px;text-align:left;border-bottom:2px solid var(--osl-border-color);border-right:1px solid var(--osl-border-color);white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none}.osl-grid-th:hover{background:#e5e7eb}.osl-grid-th--last{border-right:none}.osl-grid-th-inner{display:inline-flex;align-items:center;gap:6px}.osl-grid-sort-icon{font-size:11px;color:#9ca3af}.osl-grid-sort-icon--active{color:var(--osl-primary)}.osl-grid-sort-icon--idle{opacity:.35}.osl-grid-row{border-bottom:1px solid #f3f4f6;transition:background .12s}.osl-grid-row:hover{background:#f9fafb}.osl-grid-row:last-child{border-bottom:none}.osl-grid-td{padding:10px 14px;color:#111827;font-size:var(--osl-text-font-size);vertical-align:middle;white-space:nowrap;border-right:1px solid #f3f4f6}.osl-grid-td--last{border-right:none}@keyframes osl-row-highlight-fade{0%,60%{background:#6366f112}to{background:transparent}}.osl-grid-row--highlighted{box-shadow:inset 4px 0 0 var(--osl-primary);animation:osl-row-highlight-fade 3s ease-out forwards}.osl-grid-empty{padding:48px 16px;text-align:center;color:#9ca3af;font-size:var(--osl-text-font-size)}.osl-grid-pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;border-top:1px solid var(--osl-border-color);background:#f9fafb;flex-shrink:0;flex-wrap:wrap}.osl-grid-pagination__info{font-size:12px;color:#6b7280;white-space:nowrap;min-width:120px}.osl-grid-pagination__controls{display:flex;align-items:center;gap:3px;flex-wrap:nowrap}.osl-grid-pagination__size{display:flex;align-items:center;min-width:120px;justify-content:flex-end}.osl-grid-page-btn{display:inline-flex;align-items:center;justify-content:center;height:30px;padding:0 10px;border:1px solid var(--osl-border-color);border-radius:var(--osl-border-radius);background:#fff;color:#374151;font-size:13px;font-family:inherit;cursor:pointer;transition:background .12s,border-color .12s,color .12s;white-space:nowrap}.osl-grid-page-btn:hover:not(:disabled){background:#f3f4f6;border-color:#9ca3af}.osl-grid-page-btn:disabled{opacity:.35;cursor:not-allowed}.osl-grid-page-btn--nav{font-size:12px;color:#6b7280}.osl-grid-page-btn--num{min-width:30px;padding:0;font-size:13px}.osl-grid-page-btn--active{background:var(--osl-primary);border-color:var(--osl-primary);color:#fff;font-weight:600}.osl-grid-page-btn--active:hover:not(:disabled){background:var(--osl-primary-hover);border-color:var(--osl-primary-hover)}.osl-grid-page-ellipsis{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;color:#9ca3af;font-size:13px;pointer-events:none}.osl-grid-page-size{height:30px;padding:0 8px;border:1px solid var(--osl-border-color);border-radius:var(--osl-border-radius);background:#fff;color:#374151;font-size:12px;font-family:inherit;cursor:pointer;outline:none}.osl-grid-page-size:focus{border-color:var(--osl-focus-border-color)}.osl-grid-th--actions{width:80px;min-width:80px;cursor:default;text-align:center}.osl-grid-th--actions:hover{background:#f3f4f6}.osl-grid-td--actions{width:80px;min-width:80px;text-align:center;padding:6px 8px;white-space:nowrap}.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}.osl-menu-wrapper{position:relative;display:inline-flex}.osl-custom-menu{position:fixed;z-index:9999;min-width:190px;background:#fff;border:1px solid #e5e7eb;border-radius:10px;box-shadow:0 8px 24px #0000001f,0 2px 8px #00000012;overflow:hidden;animation:osl-menu-appear .15s cubic-bezier(.16,1,.3,1)}@keyframes osl-menu-appear{0%{opacity:0;transform:translateY(-8px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}.osl-custom-menu-header{padding:8px 14px 6px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#9ca3af;border-bottom:1px solid #f3f4f6;-webkit-user-select:none;user-select:none}.osl-custom-menu-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 14px;background:transparent;border:none;border-left:3px solid transparent;border-bottom:1px solid #f9fafb;text-align:left;font-size:13px;font-weight:500;font-family:inherit;color:#374151;cursor:pointer;white-space:nowrap;transition:background .12s,color .12s,border-left-color .12s}.osl-custom-menu-item:last-child{border-bottom:none}.osl-custom-menu-item:hover{background:#f5f3ff;color:var(--osl-primary);border-left-color:var(--osl-primary)}.osl-custom-menu-item:hover .osl-custom-menu-dot{background:var(--osl-primary);box-shadow:0 0 0 3px #6366f12e}.osl-custom-menu-dot{flex-shrink:0;width:6px;height:6px;border-radius:50%;background:#d1d5db;transition:background .12s,box-shadow .12s}@keyframes osl-skeleton-pulse{0%,to{opacity:1}50%{opacity:.4}}.osl-skeleton{height:14px;border-radius:4px;background:#e5e7eb;animation:osl-skeleton-pulse 1.4s ease-in-out infinite;width:80%}.osl-skeleton--actions{width:52px;margin:0 auto}.osl-skeleton--header{height:11px;width:65%;background:#d1d5db;border-radius:3px}.osl-grid-th--skeleton{cursor:default;pointer-events:none}.osl-grid-row--skeleton{pointer-events:none}.icon{background-repeat:no-repeat;background-position:center;display:inline-block!important;vertical-align:middle;width:18%;height:250px;background-image:url('data:image/svg+xml,<svg width=\"147\" height=\"134\" viewBox=\"0 0 147 134\" xmlns=\"http://www.w3.org/2000/svg\">%0D%0A    <g fill=\"none\" fill-rule=\"evenodd\">%0D%0A        <path d=\"M2.143 94.537c-2.858-1.65-2.858-4.35 0-6l66.1-38.163c2.858-1.65 7.534-1.65 10.392 0l66.101 38.163c2.858 1.65 2.858 4.35 0 6l-66.1 38.163c-2.859 1.65-7.535 1.65-10.393 0l-66.1-38.162z\" fill=\"%23EAF0F6\" fill-opacity=\".75\"/>%0D%0A        <path d=\"M94.611 80.446c11.065 6.39 11.065 16.843 0 23.231-11.065 6.39-29.172 6.39-40.238 0-11.065-6.388-11.065-16.842 0-23.23 11.066-6.39 29.173-6.39 40.238 0\" fill=\"%23FFF\"/>%0D%0A        <path d=\"M82.974 42.77c-5.498 1.128-11.537 1.124-17.03-.013L46.688 88.68h.007c1.089-3.023 3.637-5.9 7.679-8.233 11.065-6.39 29.172-6.39 40.237 0 2.902 1.674 5.02 3.632 6.4 5.719L82.975 42.77z\" fill=\"%23FFF\"/>%0D%0A        <path d=\"M92.296 32.687c9.792-5.653 9.792-14.905 0-20.558-9.792-5.653-25.815-5.653-35.607 0-9.792 5.653-9.793 14.905 0 20.558 9.792 5.653 25.815 5.653 35.607 0z\" stroke=\"%23CBD6E5\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0D%0A        <path d=\"M87.338 30.07c7.3-4.214 7.3-11.11 0-15.325s-19.244-4.215-26.544 0c-7.3 4.214-7.3 11.111 0 15.325 7.3 4.214 19.244 4.214 26.544 0z\" stroke=\"%23CBD6E5\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0D%0A        <path d=\"M92.296 32.687c-9.792 5.653-25.815 5.653-35.607 0-4.896-2.827-7.344-6.553-7.344-10.28v6.703c0 3.726 2.448 7.452 7.344 10.279 9.792 5.653 25.815 5.653 35.607 0 4.896-2.827 7.344-6.553 7.344-10.28v-6.701c0 3.726-2.448 7.452-7.344 10.279z\" stroke=\"%23CBD6E5\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0D%0A        <path d=\"M100.274 42.398l3.987-6.33-7.217-4.818-.011-.008-.004-.002v.001c-.481-.273-1.14-.234-1.867.185-1.46.843-2.654 2.912-2.654 4.598 0 .801.275 1.368.715 1.661l-.003.006.056.038.018.011 6.98 4.658z\" stroke=\"%23CBD6E5\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0D%0A        <path d=\"M119.293 42.398l-14.095-8.168c-.745-.432-1.772-.374-2.904.28-2.259 1.303-4.107 4.505-4.107 7.113 0 1.32.475 2.241 1.235 2.664l-.002.004 14.179 8.201\" stroke=\"%23CBD6E5\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0D%0A        <path d=\"M120.635 45.115c0-2.609-1.848-3.676-4.107-2.37-2.26 1.303-4.108 4.504-4.108 7.113 0 2.608 1.848 3.676 4.108 2.371 2.26-1.304 4.107-4.505 4.107-7.114zM74.333 12.076c-3.027 1.608-5.823 3.647-8.256 6.062-2.93 2.909-5.318 6.35-7.064 10.092.601.496 1.271.97 2.03 1.408 3.03 1.748 6.86 2.749 10.812 3.023 1.165-3.821 2.893-7.457 5.26-10.67 2.245-3.048 5.088-5.688 8.321-7.65-3.252-1.476-7.168-2.232-11.103-2.265z\" stroke=\"%23CBD6E5\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0D%0A        <path d=\"M87.55 15.472c-3.979 1.873-7.243 5.108-9.606 8.83-1.669 2.63-2.918 5.49-3.927 8.443 1.232.002 2.462-.07 3.674-.208 1.76-3.001 3.973-6.521 5.967-8.772 1.998-2.255 4.375-4.226 7.071-5.545-.784-.996-1.852-1.922-3.179-2.748z\" stroke=\"%23CBD6E5\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0D%0A        <path d=\"M92.296 32.687c9.792-5.653 9.792-14.905 0-20.558-9.792-5.653-25.815-5.653-35.607 0-9.792 5.653-9.793 14.905 0 20.558 9.792 5.653 25.815 5.653 35.607 0\" fill=\"%23FFF\"/>%0D%0A        <path d=\"M92.296 32.687c9.792-5.653 9.792-14.905 0-20.558-9.792-5.653-25.815-5.653-35.607 0-9.792 5.653-9.793 14.905 0 20.558 9.792 5.653 25.815 5.653 35.607 0z\" stroke=\"%23CBD6E5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0D%0A        <path d=\"M87.338 30.07c7.3-4.214 7.3-11.11 0-15.325s-19.244-4.215-26.544 0c-7.3 4.214-7.3 11.111 0 15.325 7.3 4.214 19.244 4.214 26.544 0\" fill=\"%23F2F5F8\"/>%0D%0A        <path d=\"M87.338 30.07c7.3-4.214 7.3-11.11 0-15.325s-19.244-4.215-26.544 0c-7.3 4.214-7.3 11.111 0 15.325 7.3 4.214 19.244 4.214 26.544 0z\" stroke=\"%23CBD6E5\"/>%0D%0A        <path d=\"M92.296 32.687c-9.792 5.653-25.815 5.653-35.607 0-4.896-2.827-7.344-6.553-7.344-10.28v6.703c0 3.726 2.448 7.452 7.344 10.279 9.792 5.653 25.815 5.653 35.607 0 4.896-2.827 7.344-6.553 7.344-10.28v-6.701c0 3.726-2.448 7.452-7.344 10.279\" fill=\"%23F2F5F8\"/>%0D%0A        <path d=\"M92.296 32.687c-9.792 5.653-25.815 5.653-35.607 0-4.896-2.827-7.344-6.553-7.344-10.28v6.703c0 3.726 2.448 7.452 7.344 10.279 9.792 5.653 25.815 5.653 35.607 0 4.896-2.827 7.344-6.553 7.344-10.28v-6.701c0 3.726-2.448 7.452-7.344 10.279z\" stroke=\"%23CBD6E5\"/>%0D%0A        <path d=\"M100.274 42.398l3.987-6.33-7.217-4.818-.011-.008-.004-.002v.001c-.481-.273-1.14-.234-1.867.185-1.46.843-2.654 2.912-2.654 4.598 0 .801.275 1.368.715 1.661l-.003.006.056.038.018.011 6.98 4.658z\" fill=\"%23FFF\"/>%0D%0A        <path d=\"M100.274 42.398l3.987-6.33-7.217-4.818-.011-.008-.004-.002v.001c-.481-.273-1.14-.234-1.867.185-1.46.843-2.654 2.912-2.654 4.598 0 .801.275 1.368.715 1.661l-.003.006.056.038.018.011 6.98 4.658z\" stroke=\"%23CBD6E5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0D%0A        <path d=\"M119.293 42.398l-14.095-8.168c-.745-.432-1.772-.374-2.904.28-2.259 1.303-4.107 4.505-4.107 7.113 0 1.32.475 2.241 1.235 2.664l-.002.004 14.179 8.201\" fill=\"%23F2F5F8\"/>%0D%0A        <path d=\"M119.293 42.398l-14.095-8.168c-.745-.432-1.772-.374-2.904.28-2.259 1.303-4.107 4.505-4.107 7.113 0 1.32.475 2.241 1.235 2.664l-.002.004 14.179 8.201\" stroke=\"%23CBD6E5\"/>%0D%0A        <path d=\"M120.635 45.115c0-2.609-1.848-3.676-4.107-2.37-2.26 1.303-4.108 4.504-4.108 7.113 0 2.608 1.848 3.676 4.108 2.371 2.26-1.304 4.107-4.505 4.107-7.114\" fill=\"%23F2F5F8\"/>%0D%0A        <path d=\"M120.635 45.115c0-2.609-1.848-3.676-4.107-2.37-2.26 1.303-4.108 4.504-4.108 7.113 0 2.608 1.848 3.676 4.108 2.371 2.26-1.304 4.107-4.505 4.107-7.114z\" stroke=\"%23CBD6E5\"/>%0D%0A        <path d=\"M74.333 12.076c-3.027 1.608-5.823 3.647-8.256 6.062-2.93 2.909-5.318 6.35-7.064 10.092.601.496 1.271.97 2.03 1.408 3.03 1.748 6.86 2.749 10.812 3.023 1.165-3.821 2.893-7.457 5.26-10.67 2.245-3.048 5.088-5.688 8.321-7.65-3.252-1.476-7.168-2.232-11.103-2.265\" fill=\"%23FFF\"/>%0D%0A        <path d=\"M87.55 15.472c-3.979 1.873-7.243 5.108-9.606 8.83-1.669 2.63-2.918 5.49-3.927 8.443 1.232.002 2.462-.07 3.674-.208 1.76-3.001 3.973-6.521 5.967-8.772 1.998-2.255 4.375-4.226 7.071-5.545-.784-.996-1.852-1.922-3.179-2.748\" fill=\"%23FFF\"/>%0D%0A        <path d=\"M101.012 86.166L82.974 42.77c-5.499 1.127-11.537 1.123-17.031-.014L46.687 88.679h.007\" stroke=\"%23CBD6E5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-dasharray=\"2,3,0,0\"/>%0D%0A        <path d=\"M94.611 80.446c11.065 6.39 11.065 16.843 0 23.231-11.065 6.39-29.172 6.39-40.238 0-11.065-6.388-11.065-16.842 0-23.23 11.066-6.39 29.173-6.39 40.238 0z\" stroke=\"%23CBD6E5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-dasharray=\"2,3,0,0\"/>%0D%0A        <path d=\"M121.68 10.236l-11.902 4.361M115.666 23.734l-5.239-2.47M119 25.306l-.753-.356M106.763 7.402l-.803 1.704M109.781 1l-1.81 3.84\" stroke=\"%23CBD6E5\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0D%0A    </g>%0D%0A</svg>%0D%0A');background-size:100%;animation:moveUpDown 3s ease-in-out infinite}@keyframes moveUpDown{0%,to{transform:translateY(0)}50%{transform:translateY(-15px)}}.pointer{cursor:pointer}.link{text-decoration:underline;color:#00f;cursor:pointer}.osl-bool-badge{display:inline-flex;align-items:center;justify-content:center}.osl-bool-badge svg{width:20px;height:20px;display:block;border-radius:50%;filter:drop-shadow(0 1px 2px rgba(0,0,0,.15));transition:transform .15s}.osl-bool-badge:hover svg{transform:scale(1.15)}\n"] }]
+            args: [{ selector: 'osl-grid', standalone: false, template: "<div class=\"osl-grid-wrapper\">\r\n\r\n  <div #tableContainer class=\"osl-grid-table-container\" [style.height]=\"tableHeight\">\r\n    <table class=\"osl-grid-table\">\r\n      <thead class=\"osl-grid-thead\">\r\n        <tr>\r\n          @if (loading && columns.length === 0) {\r\n            @for (sk of skeletonColumns; track $index) {\r\n              <th class=\"osl-grid-th osl-grid-th--skeleton\">\r\n                <div class=\"osl-skeleton osl-skeleton--header\"></div>\r\n              </th>\r\n            }\r\n          } @else {\r\n            @for (col of columns; track col.key; let last = $last) {\r\n              <th\r\n                class=\"osl-grid-th\"\r\n                [class.osl-grid-th--last]=\"last\"\r\n                [class.osl-grid-th--actions]=\"col.isActions\"\r\n                (click)=\"sort(col.key, col.isActions)\"\r\n              >\r\n                @if (!col.isActions) {\r\n                  <span class=\"osl-grid-th-inner\">\r\n                    {{ col.label }}\r\n                    <span class=\"osl-grid-sort-icon\" [class.osl-grid-sort-icon--active]=\"sortKey === col.key\">\r\n                      @if (sortKey === col.key) {\r\n                        {{ sortAsc ? '\u2191' : '\u2193' }}\r\n                      } @else {\r\n                        <span class=\"osl-grid-sort-icon--idle\">\u21C5</span>\r\n                      }\r\n                    </span>\r\n                  </span>\r\n                }\r\n              </th>\r\n            }\r\n          }\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @if (loading) {\r\n          @for (sk of skeletonRows; track $index) {\r\n            <tr class=\"osl-grid-row osl-grid-row--skeleton\">\r\n              @if (columns.length > 0) {\r\n                @for (col of columns; track col.key; let last = $last) {\r\n                  <td class=\"osl-grid-td\" [class.osl-grid-td--last]=\"last\" [class.osl-grid-td--actions]=\"col.isActions\">\r\n                    @if (col.isActions) {\r\n                      <div class=\"osl-skeleton osl-skeleton--actions\"></div>\r\n                    } @else {\r\n                      <div class=\"osl-skeleton\"></div>\r\n                    }\r\n                  </td>\r\n                }\r\n              } @else {\r\n                @for (sk2 of skeletonColumns; track $index; let last = $last) {\r\n                  <td class=\"osl-grid-td\" [class.osl-grid-td--last]=\"last\">\r\n                    <div class=\"osl-skeleton\"></div>\r\n                  </td>\r\n                }\r\n              }\r\n            </tr>\r\n          }\r\n        } @else {\r\n          @if (pagedData.length === 0) {\r\n            <tr>\r\n              <td [attr.colspan]=\"columns.length\" class=\"osl-grid-empty\">\r\n                <div class=\"d-flex align-items-center justify-content-center floating-element\">\r\n                  <div class=\"mx-4\">\r\n                    <p class=\"f-s-20 f-w-600 text-start\">No Records match the <br> current filters.</p>\r\n                    <p class=\"text-start\">Expecting to see new Records? Try again in <br> a few seconds as the system catches up</p>\r\n                  </div>\r\n                  <i class=\"icon\"></i>\r\n\r\n                </div>\r\n              </td>\r\n            </tr>\r\n          }\r\n          @for (row of pagedData; track $index; let rowIdx = $index) {\r\n            <tr class=\"osl-grid-row\"\r\n                [class.pointer]=\"isSelectable\"\r\n                [class.osl-grid-row--highlighted]=\"isHighlightedRow(row)\"\r\n                (click)=\"onRowClick.emit(row)\">\r\n              @for (col of columns; track col.key; let last = $last) {\r\n                @if (col.isActions) {\r\n                  <td class=\"osl-grid-td osl-grid-td--actions\" [class.osl-grid-td--last]=\"last\">\r\n                      @if (moreMenuActions.length > 0 && hasVisibleActions(row)) {\r\n                      <div class=\"osl-menu-wrapper\">\r\n                        <button class=\"osl-grid-icon-btn osl-grid-icon-btn--more\" (click)=\"toggleMenu(rowIdx, $event)\" title=\"More actions\">\r\n                          <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                            <circle cx=\"12\" cy=\"5\" r=\"2.2\"/><circle cx=\"12\" cy=\"12\" r=\"2.2\"/><circle cx=\"12\" cy=\"19\" r=\"2.2\"/>\r\n                          </svg>\r\n                        </button>\r\n                        @if (openMenuIndex === rowIdx) {\r\n                          <div class=\"osl-custom-menu\"\r\n                               [style.top.px]=\"menuPosition.top\"\r\n                               [style.left.px]=\"menuPosition.left\">\r\n                            <div class=\"osl-custom-menu-header\">Actions</div>\r\n                            @for (action of moreMenuActions; track $index) {\r\n                              @if (!action.hideIf || !action.hideIf(row)) {\r\n                                <button class=\"osl-custom-menu-item\" (click)=\"action.click(row); closeMenu(); $event.stopPropagation()\">\r\n                                  <span class=\"osl-custom-menu-dot\"></span>\r\n                                  {{ getActionLabel(action, row) }}\r\n                                </button>\r\n                              }\r\n                            }\r\n                          </div>\r\n                        }\r\n                      </div>\r\n                    }\r\n                    @if(canEdit){\r\n                    <button class=\"osl-grid-icon-btn osl-grid-icon-btn--edit\" (click)=\"$event.stopPropagation(); editClick.emit(row)\" title=\"Edit\">\r\n                      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                        <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"/>\r\n                        <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"/>\r\n                      </svg>\r\n                    </button>\r\n                    }\r\n                    @if(canDelete){\r\n                    <button class=\"osl-grid-icon-btn osl-grid-icon-btn--danger\" (click)=\"$event.stopPropagation(); deleteClick.emit(row)\" title=\"Delete\">\r\n                      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                        <polyline points=\"3 6 5 6 21 6\"/>\r\n                        <path d=\"M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2\"/>\r\n                        <line x1=\"10\" y1=\"11\" x2=\"10\" y2=\"17\"/><line x1=\"14\" y1=\"11\" x2=\"14\" y2=\"17\"/>\r\n                      </svg>\r\n                    </button>\r\n                    }\r\n                  \r\n                  </td>\r\n                } @else {\r\n                  <td class=\"osl-grid-td\" [class.osl-grid-td--last]=\"last\" >\r\n                    <span [class.link]=\"col.displayType == 'link'\" (click)=\"col.click ? col.click(row,col):null\">\r\n                    @switch (col.displayType) {\r\n                      @case ('date') { {{ row[col.key] | date }} }\r\n                      @case ('datetime') { {{ row[col.key] | date:'medium' }} }\r\n                      @case ('time') { {{ row[col.key] | date:'shortTime' }} }\r\n                      @case ('customDateFormat') { {{ row[col.key] | date:col.customDateFormat }} }\r\n                      @case ('boolean') {\r\n                        @if (row[col.key]) {\r\n                          <span class=\"osl-bool-badge osl-bool-badge--true\" title=\"Yes\">\r\n                            <svg viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                              <circle cx=\"8\" cy=\"8\" r=\"8\" fill=\"#22c55e\"/>\r\n                              <path d=\"M4.5 8.25L6.75 10.5L11.5 5.5\" stroke=\"#ffffff\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                            </svg>\r\n                          </span>\r\n                        } @else {\r\n                          <span class=\"osl-bool-badge osl-bool-badge--false\" title=\"No\">\r\n                            <svg viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                              <circle cx=\"8\" cy=\"8\" r=\"8\" fill=\"#f87171\"/>\r\n                              <path d=\"M5.5 5.5L10.5 10.5M10.5 5.5L5.5 10.5\" stroke=\"#ffffff\" stroke-width=\"1.75\" stroke-linecap=\"round\"/>\r\n                            </svg>\r\n                          </span>\r\n                        }\r\n                      }\r\n                      @default { {{ getCellValue(row, col) }} }\r\n                    }\r\n                  </span>\r\n                  </td>\r\n                }\r\n              }\r\n            </tr>\r\n          }\r\n        }\r\n      </tbody>\r\n    </table>\r\n  </div>\r\n\r\n  @if (isPaginated) {\r\n    <div class=\"osl-grid-pagination\">\r\n\r\n      <span class=\"osl-grid-pagination__info\">\r\n        @if (loading) {\r\n          Loading...\r\n        } @else if (_total > 0) {\r\n          {{ startRecord }}\u2013{{ endRecord }} of {{ _total }} records\r\n        } @else {\r\n          No records\r\n        }\r\n      </span>\r\n\r\n      <div class=\"osl-grid-pagination__controls\">\r\n        <button class=\"osl-grid-page-btn osl-grid-page-btn--nav\" (click)=\"goToPage(1)\" [disabled]=\"currentPage === 1 || loading\" title=\"First page\">\r\n          \u00AB\r\n        </button>\r\n        <button class=\"osl-grid-page-btn osl-grid-page-btn--nav\" (click)=\"goToPage(currentPage - 1)\" [disabled]=\"currentPage === 1 || loading\" title=\"Previous page\">\r\n          \u2039 Prev\r\n        </button>\r\n\r\n        @for (page of pageNumbers; track $index) {\r\n          @if (page === -1) {\r\n            <span class=\"osl-grid-page-ellipsis\">\u2026</span>\r\n          } @else {\r\n            <button\r\n              class=\"osl-grid-page-btn osl-grid-page-btn--num\"\r\n              [class.osl-grid-page-btn--active]=\"page === currentPage\"\r\n              [disabled]=\"loading\"\r\n              (click)=\"goToPage(page)\"\r\n            >\r\n              {{ page }}\r\n            </button>\r\n          }\r\n        }\r\n\r\n        <button class=\"osl-grid-page-btn osl-grid-page-btn--nav\" (click)=\"goToPage(currentPage + 1)\" [disabled]=\"currentPage === totalPages || loading\" title=\"Next page\">\r\n          Next \u203A\r\n        </button>\r\n        <button class=\"osl-grid-page-btn osl-grid-page-btn--nav\" (click)=\"goToPage(totalPages)\" [disabled]=\"currentPage === totalPages || loading\" title=\"Last page\">\r\n          \u00BB\r\n        </button>\r\n      </div>\r\n\r\n      <div class=\"osl-grid-pagination__size\">\r\n        <select class=\"osl-grid-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-grid-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);border-radius:var(--osl-border-radius);overflow:hidden;background:#fff}.osl-grid-table-container{overflow-x:auto;overflow-y:auto;min-height:200px}.osl-grid-table{width:100%;border-collapse:collapse;table-layout:auto}.osl-grid-thead{position:sticky;top:0;z-index:2}.osl-grid-th{background:#f3f4f6;color:#4b5563;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.04em;padding:10px 14px;text-align:left;border-bottom:2px solid var(--osl-border-color);border-right:1px solid var(--osl-border-color);white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none}.osl-grid-th:hover{background:#e5e7eb}.osl-grid-th--last{border-right:none}.osl-grid-th-inner{display:inline-flex;align-items:center;gap:6px}.osl-grid-sort-icon{font-size:11px;color:#9ca3af}.osl-grid-sort-icon--active{color:var(--osl-primary)}.osl-grid-sort-icon--idle{opacity:.35}.osl-grid-row{border-bottom:1px solid #f3f4f6;transition:background .12s}.osl-grid-row:hover{background:#f9fafb}.osl-grid-row:last-child{border-bottom:none}.osl-grid-td{padding:10px 14px;color:#111827;font-size:var(--osl-text-font-size);vertical-align:middle;white-space:nowrap;border-right:1px solid #f3f4f6}.osl-grid-td--last{border-right:none}@keyframes osl-row-highlight-fade{0%,60%{background:#6366f112}to{background:transparent}}.osl-grid-row--highlighted{box-shadow:inset 4px 0 0 var(--osl-primary);animation:osl-row-highlight-fade 3s ease-out forwards}.osl-grid-empty{padding:48px 16px;text-align:center;color:#9ca3af;font-size:var(--osl-text-font-size)}.osl-grid-pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;border-top:1px solid var(--osl-border-color);background:#f9fafb;flex-shrink:0;flex-wrap:wrap}.osl-grid-pagination__info{font-size:12px;color:#6b7280;white-space:nowrap;min-width:120px}.osl-grid-pagination__controls{display:flex;align-items:center;gap:3px;flex-wrap:nowrap}.osl-grid-pagination__size{display:flex;align-items:center;min-width:120px;justify-content:flex-end}.osl-grid-page-btn{display:inline-flex;align-items:center;justify-content:center;height:30px;padding:0 10px;border:1px solid var(--osl-border-color);border-radius:var(--osl-border-radius);background:#fff;color:#374151;font-size:13px;font-family:inherit;cursor:pointer;transition:background .12s,border-color .12s,color .12s;white-space:nowrap}.osl-grid-page-btn:hover:not(:disabled){background:#f3f4f6;border-color:#9ca3af}.osl-grid-page-btn:disabled{opacity:.35;cursor:not-allowed}.osl-grid-page-btn--nav{font-size:12px;color:#6b7280}.osl-grid-page-btn--num{min-width:30px;padding:0;font-size:13px}.osl-grid-page-btn--active{background:var(--osl-primary);border-color:var(--osl-primary);color:#fff;font-weight:600}.osl-grid-page-btn--active:hover:not(:disabled){background:var(--osl-primary-hover);border-color:var(--osl-primary-hover)}.osl-grid-page-ellipsis{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;color:#9ca3af;font-size:13px;pointer-events:none}.osl-grid-page-size{height:30px;padding:0 8px;border:1px solid var(--osl-border-color);border-radius:var(--osl-border-radius);background:#fff;color:#374151;font-size:12px;font-family:inherit;cursor:pointer;outline:none}.osl-grid-page-size:focus{border-color:var(--osl-focus-border-color)}.osl-grid-th--actions{width:80px;min-width:80px;cursor:default;text-align:center}.osl-grid-th--actions:hover{background:#f3f4f6}.osl-grid-td--actions{width:80px;min-width:80px;text-align:center;padding:6px 8px;white-space:nowrap}.osl-grid-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:1.5px solid var(--osl-border-color);border-radius:8px;background:#fff;color:#6b7280;cursor:pointer;padding:0;transition:border-color .18s,color .18s,background .18s,box-shadow .18s;margin:0 2px;flex-shrink:0}.osl-grid-icon-btn svg{width:15px;height:15px;flex-shrink:0;pointer-events:none}.osl-grid-icon-btn:hover{border-color:var(--osl-primary);color:var(--osl-primary);background:#6366f112;box-shadow:0 0 0 3px #6366f11a}.osl-grid-icon-btn--edit:hover{border-color:#3b82f6;color:#3b82f6;background:#3b82f612;box-shadow:0 0 0 3px #3b82f61a}.osl-grid-icon-btn--more:hover{border-color:#64748b;color:#1e293b;background:#f1f5f9;box-shadow:0 0 0 3px #64748b1a}.osl-grid-icon-btn--danger:hover{border-color:#ef4444;color:#ef4444;background:#ef444412;box-shadow:0 0 0 3px #ef44441a}.osl-menu-wrapper{position:relative;display:inline-flex}.osl-custom-menu{position:fixed;z-index:9999;min-width:190px;background:#fff;border:1px solid #e5e7eb;border-radius:10px;box-shadow:0 8px 24px #0000001f,0 2px 8px #00000012;overflow:hidden;animation:osl-menu-appear .15s cubic-bezier(.16,1,.3,1)}@keyframes osl-menu-appear{0%{opacity:0;transform:translateY(-8px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}.osl-custom-menu-header{padding:8px 14px 6px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#9ca3af;border-bottom:1px solid #f3f4f6;-webkit-user-select:none;user-select:none}.osl-custom-menu-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 14px;background:transparent;border:none;border-left:3px solid transparent;border-bottom:1px solid #f9fafb;text-align:left;font-size:13px;font-weight:500;font-family:inherit;color:#374151;cursor:pointer;white-space:nowrap;transition:background .12s,color .12s,border-left-color .12s}.osl-custom-menu-item:last-child{border-bottom:none}.osl-custom-menu-item:hover{background:#f5f3ff;color:var(--osl-primary);border-left-color:var(--osl-primary)}.osl-custom-menu-item:hover .osl-custom-menu-dot{background:var(--osl-primary);box-shadow:0 0 0 3px #6366f12e}.osl-custom-menu-dot{flex-shrink:0;width:6px;height:6px;border-radius:50%;background:#d1d5db;transition:background .12s,box-shadow .12s}@keyframes osl-skeleton-pulse{0%,to{opacity:1}50%{opacity:.4}}.osl-skeleton{height:14px;border-radius:4px;background:#e5e7eb;animation:osl-skeleton-pulse 1.4s ease-in-out infinite;width:80%}.osl-skeleton--actions{width:52px;margin:0 auto}.osl-skeleton--header{height:11px;width:65%;background:#d1d5db;border-radius:3px}.osl-grid-th--skeleton{cursor:default;pointer-events:none}.osl-grid-row--skeleton{pointer-events:none}.icon{background-repeat:no-repeat;background-position:center;display:inline-block!important;vertical-align:middle;width:18%;height:250px;background-image:url('data:image/svg+xml,<svg width=\"147\" height=\"134\" viewBox=\"0 0 147 134\" xmlns=\"http://www.w3.org/2000/svg\">%0D%0A    <g fill=\"none\" fill-rule=\"evenodd\">%0D%0A        <path d=\"M2.143 94.537c-2.858-1.65-2.858-4.35 0-6l66.1-38.163c2.858-1.65 7.534-1.65 10.392 0l66.101 38.163c2.858 1.65 2.858 4.35 0 6l-66.1 38.163c-2.859 1.65-7.535 1.65-10.393 0l-66.1-38.162z\" fill=\"%23EAF0F6\" fill-opacity=\".75\"/>%0D%0A        <path d=\"M94.611 80.446c11.065 6.39 11.065 16.843 0 23.231-11.065 6.39-29.172 6.39-40.238 0-11.065-6.388-11.065-16.842 0-23.23 11.066-6.39 29.173-6.39 40.238 0\" fill=\"%23FFF\"/>%0D%0A        <path d=\"M82.974 42.77c-5.498 1.128-11.537 1.124-17.03-.013L46.688 88.68h.007c1.089-3.023 3.637-5.9 7.679-8.233 11.065-6.39 29.172-6.39 40.237 0 2.902 1.674 5.02 3.632 6.4 5.719L82.975 42.77z\" fill=\"%23FFF\"/>%0D%0A        <path d=\"M92.296 32.687c9.792-5.653 9.792-14.905 0-20.558-9.792-5.653-25.815-5.653-35.607 0-9.792 5.653-9.793 14.905 0 20.558 9.792 5.653 25.815 5.653 35.607 0z\" stroke=\"%23CBD6E5\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0D%0A        <path d=\"M87.338 30.07c7.3-4.214 7.3-11.11 0-15.325s-19.244-4.215-26.544 0c-7.3 4.214-7.3 11.111 0 15.325 7.3 4.214 19.244 4.214 26.544 0z\" stroke=\"%23CBD6E5\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0D%0A        <path d=\"M92.296 32.687c-9.792 5.653-25.815 5.653-35.607 0-4.896-2.827-7.344-6.553-7.344-10.28v6.703c0 3.726 2.448 7.452 7.344 10.279 9.792 5.653 25.815 5.653 35.607 0 4.896-2.827 7.344-6.553 7.344-10.28v-6.701c0 3.726-2.448 7.452-7.344 10.279z\" stroke=\"%23CBD6E5\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0D%0A        <path d=\"M100.274 42.398l3.987-6.33-7.217-4.818-.011-.008-.004-.002v.001c-.481-.273-1.14-.234-1.867.185-1.46.843-2.654 2.912-2.654 4.598 0 .801.275 1.368.715 1.661l-.003.006.056.038.018.011 6.98 4.658z\" stroke=\"%23CBD6E5\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0D%0A        <path d=\"M119.293 42.398l-14.095-8.168c-.745-.432-1.772-.374-2.904.28-2.259 1.303-4.107 4.505-4.107 7.113 0 1.32.475 2.241 1.235 2.664l-.002.004 14.179 8.201\" stroke=\"%23CBD6E5\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0D%0A        <path d=\"M120.635 45.115c0-2.609-1.848-3.676-4.107-2.37-2.26 1.303-4.108 4.504-4.108 7.113 0 2.608 1.848 3.676 4.108 2.371 2.26-1.304 4.107-4.505 4.107-7.114zM74.333 12.076c-3.027 1.608-5.823 3.647-8.256 6.062-2.93 2.909-5.318 6.35-7.064 10.092.601.496 1.271.97 2.03 1.408 3.03 1.748 6.86 2.749 10.812 3.023 1.165-3.821 2.893-7.457 5.26-10.67 2.245-3.048 5.088-5.688 8.321-7.65-3.252-1.476-7.168-2.232-11.103-2.265z\" stroke=\"%23CBD6E5\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0D%0A        <path d=\"M87.55 15.472c-3.979 1.873-7.243 5.108-9.606 8.83-1.669 2.63-2.918 5.49-3.927 8.443 1.232.002 2.462-.07 3.674-.208 1.76-3.001 3.973-6.521 5.967-8.772 1.998-2.255 4.375-4.226 7.071-5.545-.784-.996-1.852-1.922-3.179-2.748z\" stroke=\"%23CBD6E5\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0D%0A        <path d=\"M92.296 32.687c9.792-5.653 9.792-14.905 0-20.558-9.792-5.653-25.815-5.653-35.607 0-9.792 5.653-9.793 14.905 0 20.558 9.792 5.653 25.815 5.653 35.607 0\" fill=\"%23FFF\"/>%0D%0A        <path d=\"M92.296 32.687c9.792-5.653 9.792-14.905 0-20.558-9.792-5.653-25.815-5.653-35.607 0-9.792 5.653-9.793 14.905 0 20.558 9.792 5.653 25.815 5.653 35.607 0z\" stroke=\"%23CBD6E5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0D%0A        <path d=\"M87.338 30.07c7.3-4.214 7.3-11.11 0-15.325s-19.244-4.215-26.544 0c-7.3 4.214-7.3 11.111 0 15.325 7.3 4.214 19.244 4.214 26.544 0\" fill=\"%23F2F5F8\"/>%0D%0A        <path d=\"M87.338 30.07c7.3-4.214 7.3-11.11 0-15.325s-19.244-4.215-26.544 0c-7.3 4.214-7.3 11.111 0 15.325 7.3 4.214 19.244 4.214 26.544 0z\" stroke=\"%23CBD6E5\"/>%0D%0A        <path d=\"M92.296 32.687c-9.792 5.653-25.815 5.653-35.607 0-4.896-2.827-7.344-6.553-7.344-10.28v6.703c0 3.726 2.448 7.452 7.344 10.279 9.792 5.653 25.815 5.653 35.607 0 4.896-2.827 7.344-6.553 7.344-10.28v-6.701c0 3.726-2.448 7.452-7.344 10.279\" fill=\"%23F2F5F8\"/>%0D%0A        <path d=\"M92.296 32.687c-9.792 5.653-25.815 5.653-35.607 0-4.896-2.827-7.344-6.553-7.344-10.28v6.703c0 3.726 2.448 7.452 7.344 10.279 9.792 5.653 25.815 5.653 35.607 0 4.896-2.827 7.344-6.553 7.344-10.28v-6.701c0 3.726-2.448 7.452-7.344 10.279z\" stroke=\"%23CBD6E5\"/>%0D%0A        <path d=\"M100.274 42.398l3.987-6.33-7.217-4.818-.011-.008-.004-.002v.001c-.481-.273-1.14-.234-1.867.185-1.46.843-2.654 2.912-2.654 4.598 0 .801.275 1.368.715 1.661l-.003.006.056.038.018.011 6.98 4.658z\" fill=\"%23FFF\"/>%0D%0A        <path d=\"M100.274 42.398l3.987-6.33-7.217-4.818-.011-.008-.004-.002v.001c-.481-.273-1.14-.234-1.867.185-1.46.843-2.654 2.912-2.654 4.598 0 .801.275 1.368.715 1.661l-.003.006.056.038.018.011 6.98 4.658z\" stroke=\"%23CBD6E5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0D%0A        <path d=\"M119.293 42.398l-14.095-8.168c-.745-.432-1.772-.374-2.904.28-2.259 1.303-4.107 4.505-4.107 7.113 0 1.32.475 2.241 1.235 2.664l-.002.004 14.179 8.201\" fill=\"%23F2F5F8\"/>%0D%0A        <path d=\"M119.293 42.398l-14.095-8.168c-.745-.432-1.772-.374-2.904.28-2.259 1.303-4.107 4.505-4.107 7.113 0 1.32.475 2.241 1.235 2.664l-.002.004 14.179 8.201\" stroke=\"%23CBD6E5\"/>%0D%0A        <path d=\"M120.635 45.115c0-2.609-1.848-3.676-4.107-2.37-2.26 1.303-4.108 4.504-4.108 7.113 0 2.608 1.848 3.676 4.108 2.371 2.26-1.304 4.107-4.505 4.107-7.114\" fill=\"%23F2F5F8\"/>%0D%0A        <path d=\"M120.635 45.115c0-2.609-1.848-3.676-4.107-2.37-2.26 1.303-4.108 4.504-4.108 7.113 0 2.608 1.848 3.676 4.108 2.371 2.26-1.304 4.107-4.505 4.107-7.114z\" stroke=\"%23CBD6E5\"/>%0D%0A        <path d=\"M74.333 12.076c-3.027 1.608-5.823 3.647-8.256 6.062-2.93 2.909-5.318 6.35-7.064 10.092.601.496 1.271.97 2.03 1.408 3.03 1.748 6.86 2.749 10.812 3.023 1.165-3.821 2.893-7.457 5.26-10.67 2.245-3.048 5.088-5.688 8.321-7.65-3.252-1.476-7.168-2.232-11.103-2.265\" fill=\"%23FFF\"/>%0D%0A        <path d=\"M87.55 15.472c-3.979 1.873-7.243 5.108-9.606 8.83-1.669 2.63-2.918 5.49-3.927 8.443 1.232.002 2.462-.07 3.674-.208 1.76-3.001 3.973-6.521 5.967-8.772 1.998-2.255 4.375-4.226 7.071-5.545-.784-.996-1.852-1.922-3.179-2.748\" fill=\"%23FFF\"/>%0D%0A        <path d=\"M101.012 86.166L82.974 42.77c-5.499 1.127-11.537 1.123-17.031-.014L46.687 88.679h.007\" stroke=\"%23CBD6E5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-dasharray=\"2,3,0,0\"/>%0D%0A        <path d=\"M94.611 80.446c11.065 6.39 11.065 16.843 0 23.231-11.065 6.39-29.172 6.39-40.238 0-11.065-6.388-11.065-16.842 0-23.23 11.066-6.39 29.173-6.39 40.238 0z\" stroke=\"%23CBD6E5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-dasharray=\"2,3,0,0\"/>%0D%0A        <path d=\"M121.68 10.236l-11.902 4.361M115.666 23.734l-5.239-2.47M119 25.306l-.753-.356M106.763 7.402l-.803 1.704M109.781 1l-1.81 3.84\" stroke=\"%23CBD6E5\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0D%0A    </g>%0D%0A</svg>%0D%0A');background-size:100%;animation:moveUpDown 3s ease-in-out infinite}@keyframes moveUpDown{0%,to{transform:translateY(0)}50%{transform:translateY(-15px)}}.pointer{cursor:pointer}.link{text-decoration:underline;color:#00f;cursor:pointer}.osl-bool-badge{display:inline-flex;align-items:center;justify-content:center}.osl-bool-badge svg{width:20px;height:20px;display:block;border-radius:50%;filter:drop-shadow(0 1px 2px rgba(0,0,0,.15));transition:transform .15s}.osl-bool-badge:hover svg{transform:scale(1.15)}\n"] }]
         }], propDecorators: { columns: [{
                 type: Input,
                 args: ['columns']
@@ -4090,7 +4096,7 @@ class OslFormGrid {
         elem.change(row, i, selectedObj);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslFormGrid, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: OslFormGrid, isStandalone: false, selector: "osl-form-grid", inputs: { columns: "columns", datasource: "datasource", isPaginated: "isPaginated", pageSize: "pageSize", canAdd: "canAdd", canDelete: "canDelete", loading: "loading", tableHeight: "tableHeight", footerColumns: "footerColumns" }, outputs: { datasourceChange: "datasourceChange", rowAdd: "rowAdd", rowDelete: "rowDelete" }, ngImport: i0, template: "<div class=\"osl-fg-wrapper\">\r\n\r\n  <div class=\"osl-fg-table-container\" [style.height]=\"tableHeight\">\r\n    <table class=\"osl-fg-table\">\r\n\r\n      <thead class=\"osl-fg-thead\">\r\n        <tr>\r\n          <!-- Actions column: + add button in header -->\r\n          @if (hasActions) {\r\n            <th class=\"osl-fg-th osl-fg-th--actions\">\r\n              @if (canAdd) {\r\n                <button class=\"osl-grid-icon-btn\" (click)=\"addRow()\" [disabled]=\"loading\" title=\"Add row\">\r\n                  <mat-icon>add</mat-icon>\r\n                </button>\r\n              }\r\n            </th>\r\n          }\r\n          @for (col of columns; track col.key) {\r\n            <th class=\"osl-fg-th\" [style.width]=\"col.width\">\r\n              {{ col.displayName }}\r\n              @if (colRequired(col)) {\r\n                <span class=\"osl-fg-th-required\">*</span>\r\n              }\r\n            </th>\r\n          }\r\n        </tr>\r\n      </thead>\r\n\r\n      <tbody>\r\n\r\n        @if (loading) {\r\n          @for (sk of skeletonRows; track $index) {\r\n            <tr class=\"osl-fg-row osl-fg-row--skeleton\">\r\n              @if (hasActions) {\r\n                <td class=\"osl-fg-td osl-fg-td--actions\">\r\n                  <div class=\"osl-fg-skeleton osl-fg-skeleton--sm\"></div>\r\n                </td>\r\n              }\r\n              @for (col of columns; track col.key) {\r\n                <td class=\"osl-fg-td\"><div class=\"osl-fg-skeleton\"></div></td>\r\n              }\r\n            </tr>\r\n          }\r\n\r\n        } @else if (pagedData.length === 0) {\r\n          <tr>\r\n            <td [attr.colspan]=\"columns.length + (hasActions ? 1 : 0)\" class=\"osl-fg-empty\">\r\n              <div class=\"osl-fg-empty-inner\">\r\n                <svg width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\r\n                  <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"/>\r\n                  <line x1=\"3\" y1=\"9\" x2=\"21\" y2=\"9\"/>\r\n                  <line x1=\"9\" y1=\"9\" x2=\"9\" y2=\"21\"/>\r\n                </svg>\r\n                <p>No rows yet.{{ canAdd ? ' Use + to get started.' : '' }}</p>\r\n              </div>\r\n            </td>\r\n          </tr>\r\n\r\n        } @else {\r\n          @for (row of pagedData; track $index; let i = $index) {\r\n            <tr class=\"osl-fg-row\">\r\n\r\n              <!-- Delete button first -->\r\n              @if (hasActions) {\r\n                <td class=\"osl-fg-td osl-fg-td--actions\">\r\n                  @if (canDelete) {\r\n                    <button class=\"osl-grid-icon-btn osl-grid-icon-btn--danger\" (click)=\"deleteRow(i)\" title=\"Delete\">\r\n                      <mat-icon>delete_outline</mat-icon>\r\n                    </button>\r\n                  }\r\n                </td>\r\n              }\r\n\r\n              @for (col of columns; track col.key) {\r\n                <td class=\"osl-fg-td\" [style.width]=\"col.width\">\r\n                  @if (col.formElem) {\r\n                    <div class=\"osl-fg-cell-form\" [style.width]=\"col.width\">\r\n                      @switch (col.formElem.elementType) {\r\n\r\n                        @case ('textbox') {\r\n                          <osl-input\r\n                            [label]=\"''\"\r\n                            [required]=\"false\"\r\n                            [disabled]=\"isDisabled(col.formElem,row,i)\"\r\n                            [type]=\"col.formElem.inputType || 'text'\"\r\n                            [placeholder]=\"col.formElem.placeholder || col.displayName\"\r\n                            [mask]=\"col.formElem.mask || ''\"\r\n                            [min]=\"col.formElem.min ?? ''\"\r\n                            [max]=\"col.formElem.max ?? ''\"\r\n                            [minLength]=\"col.formElem.minLength ?? null\"\r\n                            [maxLength]=\"col.formElem.maxLength ?? null\"\r\n                            [prefixIcon]=\"col.formElem.prefixIcon || ''\"\r\n                            [suffixIcon]=\"col.formElem.suffixIcon || ''\"\r\n                            [decimalPortion]=\"col.formElem.decimalPortion ?? null\"\r\n                            [model]=\"row[col.key]\"\r\n                            (modelChange)=\"onCellChange(row, col, $event)\"\r\n                            (changeEv)=\"col.formElem.change ? col.formElem.change(row,i) : null\">\r\n                          </osl-input>\r\n                        }\r\n\r\n                        @case ('textarea') {\r\n                          <osl-textarea\r\n                            [label]=\"''\"\r\n                            [required]=\"false\"\r\n                            [disabled]=\"isDisabled(col.formElem,row,i)\"\r\n                            [rows]=\"col.formElem.textareaRows || 3\"\r\n                            [placeholder]=\"col.formElem.placeholder || col.displayName\"\r\n                            [maxLength]=\"col.formElem.maxLength ?? null\"\r\n                            [minLength]=\"col.formElem.minLength ?? null\"\r\n                            [characterCounter]=\"!!col.formElem.characterCounter\"\r\n                            [resize]=\"col.formElem.resize || 'none'\"\r\n                            [model]=\"row[col.key]\"\r\n                            (modelChange)=\"onCellChange(row, col, $event)\"\r\n                            (changeEv)=\"col.formElem.change ? col.formElem.change(row,i) : null\">\r\n                          </osl-textarea>\r\n                        }\r\n\r\n                        @case ('select') {\r\n                          <osl-select\r\n                            [label]=\"''\"\r\n                            [required]=\"false\"\r\n                            [disabled]=\"isDisabled(col.formElem,row,i)\"\r\n                            [datasource]=\"col.formElem.datasource || []\"\r\n                            [displayField]=\"col.formElem.displayField || ''\"\r\n                            [valueField]=\"col.formElem.valueField || ''\"\r\n                            [placeholder]=\"col.formElem.selectPlaceholder || col.displayName\"\r\n                            [loading]=\"isLoading(row, col.formElem)\"\r\n                            [clearable]=\"!!col.formElem.clearable\"\r\n                            [model]=\"row[col.key]\"\r\n                            (modelChange)=\"onCellChange(row, col, $event)\"\r\n                            (changeEv)=\"col.formElem.change ? onSelectChange(col, row, i, $event) : null\">\r\n                          </osl-select>\r\n                        }\r\n\r\n                        @case ('autocomplete') {\r\n                          <osl-autocomplete\r\n                            [label]=\"''\"\r\n                            [required]=\"false\"\r\n                             [disabled]=\"isDisabled(col.formElem,row,i)\"\r\n                            [datasource]=\"col.formElem.datasource || []\"\r\n                            [displayField]=\"col.formElem.displayField || ''\"\r\n                            [valueField]=\"col.formElem.valueField || ''\"\r\n                            [placeholder]=\"col.formElem.autocompletePlaceholder || col.displayName\"\r\n                            [loading]=\"isLoading(row, col.formElem)\"\r\n                            [searchType]=\"col.formElem.searchType ? col.formElem.searchType : 'Local'\"\r\n                            [methodName]=\"col.formElem.apiMethod || ''\"\r\n                            [configMethodName]=\"col.formElem.apiConfigMethod || ''\"\r\n                            [service]=\"col.formElem.apiService\"\r\n                            [object]=\"col.formElem.objectName ? row[col.formElem.objectName] : null\"\r\n                            [isLister]=\"!!col.formElem.isListerAutocomplete\"\r\n                            [model]=\"row[col.key]\"\r\n                            (modelChange)=\"onCellChange(row, col, $event)\"\r\n                            (changeEv)=\"col.formElem.change ? onSelectChange(col, row, i, $event) : null\">\r\n                          </osl-autocomplete>\r\n                        }\r\n\r\n                        @case ('radio') {\r\n                          <osl-radio\r\n                            [label]=\"''\"\r\n                            [required]=\"false\"\r\n                           [disabled]=\"isDisabled(col.formElem,row,i)\"\r\n                            [datasource]=\"col.formElem.datasource || []\"\r\n                            [displayField]=\"col.formElem.displayField || ''\"\r\n                            [valueField]=\"col.formElem.valueField || ''\"\r\n                            [inline]=\"!!col.formElem.inline\"\r\n                            [model]=\"row[col.key]\"\r\n                            (modelChange)=\"onCellChange(row, col, $event)\"\r\n                            (changeEv)=\"col.formElem.change ? col.formElem.change(row,i) : null\">\r\n                          </osl-radio>\r\n                        }\r\n\r\n                        @case ('checkbox') {\r\n                          <osl-checkbox\r\n                            [label]=\"''\"\r\n                            [required]=\"false\"\r\n                             [disabled]=\"isDisabled(col.formElem,row,i)\"\r\n                            [indeterminate]=\"!!col.formElem.indeterminate\"\r\n                            [model]=\"row[col.key]\"\r\n                            (modelChange)=\"onCellChange(row, col, $event)\"\r\n                            (changeEv)=\"col.formElem.change ? col.formElem.change(row,i) : null\">\r\n                          </osl-checkbox>\r\n                        }\r\n\r\n                        @case ('slide-toggle') {\r\n                          <osl-slide-toggle\r\n                            [label]=\"''\"\r\n                          [disabled]=\"isDisabled(col.formElem,row,i)\"\r\n                            [labelPosition]=\"col.formElem.labelPosition || 'after'\"\r\n                            [trueLabel]=\"col.formElem.trueLabel || ''\"\r\n                            [falseLabel]=\"col.formElem.falseLabel || ''\"\r\n                            [model]=\"row[col.key]\"\r\n                            (modelChange)=\"onCellChange(row, col, $event)\"\r\n                            (changeEv)=\"col.formElem.change ? col.formElem.change(row,i) : null\">\r\n                          </osl-slide-toggle>\r\n                        }\r\n\r\n                        @case ('datepicker') {\r\n                          <osl-datepicker\r\n                            [label]=\"''\"\r\n                            [required]=\"false\"\r\n                             [disabled]=\"isDisabled(col.formElem,row,i)\"\r\n                            [dateType]=\"col.formElem.dateType || 'date'\"\r\n                            [placeholder]=\"col.formElem.placeholder || col.displayName\"\r\n                            [minDate]=\"col.formElem.minDate || ''\"\r\n                            [maxDate]=\"col.formElem.maxDate || ''\"\r\n                            [model]=\"row[col.key]\"\r\n                            (modelChange)=\"onCellChange(row, col, $event)\"\r\n                            (changeEv)=\"col.formElem.change ? col.formElem.change(row,i) : null\">\r\n                          </osl-datepicker>\r\n                        }\r\n\r\n                        @case ('datetimepicker') {\r\n                          <osl-datetimepicker\r\n                            [label]=\"''\"\r\n                            [required]=\"false\"\r\n                            [disabled]=\"isDisabled(col.formElem,row,i)\"\r\n                            [placeholder]=\"col.formElem.placeholder || col.displayName\"\r\n                            [minDatetime]=\"col.formElem.minDatetime || ''\"\r\n                            [maxDatetime]=\"col.formElem.maxDatetime || ''\"\r\n                            [format]=\"col.formElem.datetimepickerFormat || 'YYYY-MM-DDTHH:mm'\"\r\n                            [showSeconds]=\"!!col.formElem.datetimepickerShowSeconds\"\r\n                            [enableMeridian]=\"!!col.formElem.datetimepickerEnableMeridian\"\r\n                            [model]=\"row[col.key]\"\r\n                            (modelChange)=\"onCellChange(row, col, $event)\"\r\n                            (changeEv)=\"col.formElem.change ? col.formElem.change(row,i) : null\">\r\n                          </osl-datetimepicker>\r\n                        }\r\n\r\n                        @case ('file-uploader') {\r\n                          <osl-file-upload\r\n                            [label]=\"''\"\r\n                            [required]=\"false\"\r\n                             [disabled]=\"isDisabled(col.formElem,row,i)\"\r\n                            [accept]=\"col.formElem.accept || ''\"\r\n                            [multiple]=\"!!col.formElem.multiple\"\r\n                            [maxSize]=\"col.formElem.maxFileSize || 0\"\r\n                            [model]=\"row[col.key]\"\r\n                            (modelChange)=\"onCellChange(row, col, $event)\"\r\n                            (changeEv)=\"col.formElem.change ? col.formElem.change(row,i) : null\">\r\n                          </osl-file-upload>\r\n                        }\r\n\r\n                      }\r\n                    </div>\r\n                  } @else {\r\n                    <span class=\"osl-fg-cell-text\">{{ row[col.key] ?? '--' }}</span>\r\n                  }\r\n                </td>\r\n              }\r\n\r\n            </tr>\r\n          }\r\n        }\r\n\r\n      </tbody>\r\n\r\n      @if (footerColumns && footerColumns.length > 0 && datasource && datasource.length > 0) {\r\n        <tfoot class=\"osl-fg-tfoot\">\r\n          <tr class=\"osl-fg-footer-row\">\r\n            @for (fcol of footerColumns; track $index) {\r\n              <td\r\n                [class]=\"'osl-fg-footer-td ' + (fcol.class || '')\"\r\n                [attr.colspan]=\"fcol.colspan || 1\">\r\n                {{ fcol.displayFn ? fcol.displayFn(datasource) : (fcol.display || '') }}\r\n              </td>\r\n            }\r\n          </tr>\r\n        </tfoot>\r\n      }\r\n\r\n    </table>\r\n  </div>\r\n\r\n  @if (isPaginated) {\r\n    <div class=\"osl-fg-pagination\">\r\n\r\n      <span class=\"osl-fg-pagination__info\">\r\n        @if (loading) {\r\n          Loading...\r\n        } @else if (_total > 0) {\r\n          {{ startRecord }}\u2013{{ endRecord }} of {{ _total }} rows\r\n        } @else {\r\n          No rows\r\n        }\r\n      </span>\r\n\r\n      <div class=\"osl-fg-pagination__controls\">\r\n        <button class=\"osl-fg-page-btn osl-fg-page-btn--nav\" (click)=\"goToPage(1)\" [disabled]=\"currentPage === 1 || loading\">\u00AB</button>\r\n        <button class=\"osl-fg-page-btn osl-fg-page-btn--nav\" (click)=\"goToPage(currentPage - 1)\" [disabled]=\"currentPage === 1 || loading\">\u2039 Prev</button>\r\n\r\n        @for (page of pageNumbers; track $index) {\r\n          @if (page === -1) {\r\n            <span class=\"osl-fg-page-ellipsis\">\u2026</span>\r\n          } @else {\r\n            <button\r\n              class=\"osl-fg-page-btn osl-fg-page-btn--num\"\r\n              [class.osl-fg-page-btn--active]=\"page === currentPage\"\r\n              [disabled]=\"loading\"\r\n              (click)=\"goToPage(page)\">\r\n              {{ page }}\r\n            </button>\r\n          }\r\n        }\r\n\r\n        <button class=\"osl-fg-page-btn osl-fg-page-btn--nav\" (click)=\"goToPage(currentPage + 1)\" [disabled]=\"currentPage === totalPages || loading\">Next \u203A</button>\r\n        <button class=\"osl-fg-page-btn osl-fg-page-btn--nav\" (click)=\"goToPage(totalPages)\" [disabled]=\"currentPage === totalPages || loading\">\u00BB</button>\r\n      </div>\r\n\r\n      <div class=\"osl-fg-pagination__size\">\r\n        <select class=\"osl-fg-page-size\" [ngModel]=\"pageSize\" (ngModelChange)=\"onPageSizeChange($event)\" [disabled]=\"loading\">\r\n          @for (opt of pageSizeOptions; track opt) {\r\n            <option [value]=\"opt\">{{ opt }} per page</option>\r\n          }\r\n        </select>\r\n      </div>\r\n\r\n    </div>\r\n  }\r\n\r\n</div>\r\n", styles: [".osl-fg-wrapper{display:flex;flex-direction:column;width:100%;font-size:var(--osl-text-font-size);font-family:inherit;border:1px solid var(--osl-border-color, #e5e7eb);border-radius:var(--osl-border-radius, 8px);overflow:hidden;background:#fff}.osl-fg-table-container{overflow-x:auto;overflow-y:auto;min-height:120px}.osl-fg-table{width:100%;border-collapse:collapse;table-layout:auto}.osl-fg-thead{position:sticky;top:0;z-index:2}.osl-fg-th{background:#f3f4f6;color:#4b5563;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.04em;padding:10px 12px;text-align:left;border-bottom:2px solid var(--osl-border-color, #e5e7eb);border-right:1px solid var(--osl-border-color, #e5e7eb);white-space:nowrap;vertical-align:middle}.osl-fg-th:last-child{border-right:none}.osl-fg-th--actions{width:44px;min-width:44px;text-align:center;padding:6px}.osl-fg-th-required{color:#ef4444;margin-left:2px;font-size:14px;line-height:1;vertical-align:middle}.osl-fg-row{border-bottom:1px solid #f0f0f0;transition:background .1s}.osl-fg-row:nth-child(odd){background:#f8fafc}.osl-fg-row:nth-child(2n){background:#fff}.osl-fg-row:hover{background:#eef2ff!important}.osl-fg-row:last-child{border-bottom:none}.osl-fg-row--skeleton{pointer-events:none}.osl-fg-td{padding:4px 10px;vertical-align:middle;border-right:1px solid #f0f0f0}.osl-fg-td:last-child{border-right:none}.osl-fg-td--actions{width:44px;min-width:44px;text-align:center;padding:4px 6px}.osl-fg-cell-form{min-width:100px}.osl-fg-cell-form ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none!important}.osl-fg-cell-form ::ng-deep .mat-mdc-form-field,.osl-fg-cell-form ::ng-deep mat-form-field{width:100%}.osl-fg-cell-form ::ng-deep .mat-mdc-text-field-wrapper{padding-top:0}.osl-fg-cell-text{color:#111827;font-size:var(--osl-text-font-size)}.osl-fg-add-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:none;border-radius:6px;background:var(--osl-primary, #6366f1);color:#fff;cursor:pointer;padding:0;box-shadow:0 1px 4px #6366f159;transition:background .15s,box-shadow .15s,transform .1s}.osl-fg-add-btn mat-icon{font-size:18px;width:18px;height:18px;line-height:18px}.osl-fg-add-btn:hover:not(:disabled){background:var(--osl-primary-hover, #4f46e5);box-shadow:0 2px 8px #6366f173;transform:scale(1.05)}.osl-fg-add-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}.osl-fg-delete-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:1.5px solid transparent;border-radius:6px;background:transparent;color:#d1d5db;cursor:pointer;padding:0;transition:border-color .15s,color .15s,background .15s}.osl-fg-delete-btn mat-icon{font-size:16px;width:16px;height:16px;line-height:16px}.osl-fg-delete-btn:hover{border-color:#fca5a5;color:#ef4444;background:#fef2f2}.osl-fg-empty{padding:40px 16px;text-align:center}.osl-fg-empty-inner{display:flex;flex-direction:column;align-items:center;gap:10px;color:#9ca3af}.osl-fg-empty-inner svg{opacity:.4}.osl-fg-empty-inner p{margin:0;font-size:13px}@keyframes osl-fg-pulse{0%,to{opacity:1}50%{opacity:.4}}.osl-fg-skeleton{height:36px;border-radius:6px;background:#e5e7eb;animation:osl-fg-pulse 1.4s ease-in-out infinite}.osl-fg-skeleton--sm{height:28px;width:28px;border-radius:4px;margin:0 auto}.osl-fg-tfoot{position:sticky;bottom:0;z-index:2}.osl-fg-footer-td{background:#f3f4f6;color:#4b5563;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.04em;padding:10px 12px;text-align:left;border-top:2px solid var(--osl-border-color, #e5e7eb);border-right:1px solid var(--osl-border-color, #e5e7eb);white-space:nowrap;vertical-align:middle}.osl-fg-footer-td:last-child{border-right:none}.osl-fg-pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;border-top:1px solid var(--osl-border-color, #e5e7eb);background:#f9fafb;flex-shrink:0;flex-wrap:wrap}.osl-fg-pagination__info{font-size:12px;color:#6b7280;white-space:nowrap;min-width:120px}.osl-fg-pagination__controls{display:flex;align-items:center;gap:3px;flex-wrap:nowrap}.osl-fg-pagination__size{display:flex;align-items:center;justify-content:flex-end;min-width:120px}.osl-fg-page-btn{display:inline-flex;align-items:center;justify-content:center;height:30px;padding:0 10px;border:1px solid var(--osl-border-color, #e5e7eb);border-radius:var(--osl-border-radius, 6px);background:#fff;color:#374151;font-size:13px;font-family:inherit;cursor:pointer;transition:background .12s,border-color .12s,color .12s;white-space:nowrap}.osl-fg-page-btn:hover:not(:disabled){background:#f3f4f6;border-color:#9ca3af}.osl-fg-page-btn:disabled{opacity:.35;cursor:not-allowed}.osl-fg-page-btn--nav{font-size:12px;color:#6b7280}.osl-fg-page-btn--num{min-width:30px;padding:0;font-size:13px}.osl-fg-page-btn--active{background:var(--osl-primary, #6366f1);border-color:var(--osl-primary, #6366f1);color:#fff;font-weight:600}.osl-fg-page-btn--active:hover:not(:disabled){background:var(--osl-primary-hover, #4f46e5);border-color:var(--osl-primary-hover, #4f46e5)}.osl-fg-page-ellipsis{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;color:#9ca3af;font-size:13px;pointer-events:none}.osl-fg-page-size{height:30px;padding:0 8px;border:1px solid var(--osl-border-color, #e5e7eb);border-radius:var(--osl-border-radius, 6px);background:#fff;color:#374151;font-size:12px;font-family:inherit;cursor:pointer;outline:none}.osl-fg-page-size:focus{border-color:var(--osl-primary, #6366f1)}.osl-fg-page-size:disabled{opacity:.4;cursor:not-allowed}.osl-grid-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:1.5px solid var(--osl-border-color);border-radius:var(--osl-border-radius);background:transparent;color:#6b7280;cursor:pointer;padding:0;transition:border-color .15s,color .15s,background .15s;margin:0 2px}.osl-grid-icon-btn mat-icon{font-size:16px;width:16px;height:16px;line-height:16px}.osl-grid-icon-btn:hover{border-color:var(--osl-primary);color:var(--osl-primary);background:#6366f10f}.osl-grid-icon-btn--danger:hover{border-color:#ef4444;color:#ef4444;background:#ef44440f}\n"], dependencies: [{ kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: Oslinput, selector: "osl-input", inputs: ["label", "required", "disabled", "model", "type", "placeholder", "mask", "min", "max", "minLength", "maxLength", "prefixIcon", "suffixIcon", "skeletonLoading", "skeletonTheme", "onlyChars", "isCapitalize", "decimalPortion"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: Osltextarea, selector: "osl-textarea", inputs: ["label", "rows", "required", "disabled", "model", "placeholder", "maxLength", "minLength", "characterCounter", "resize", "skeletonLoading", "skeletonTheme"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslSelect, selector: "osl-select", inputs: ["label", "required", "disabled", "model", "datasource", "displayField", "valueField", "placeholder", "loading", "clearable", "skeletonLoading", "skeletonTheme"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslRadio, selector: "osl-radio", inputs: ["label", "required", "disabled", "model", "datasource", "displayField", "valueField", "inline", "skeletonLoading", "skeletonTheme"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslSlideToggle, selector: "osl-slide-toggle", inputs: ["label", "disabled", "model", "labelPosition", "trueLabel", "falseLabel", "skeletonLoading", "skeletonTheme"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslAutocomplete, selector: "osl-autocomplete", inputs: ["label", "required", "disabled", "model", "datasource", "displayField", "valueField", "placeholder", "loading", "searchType", "methodName", "configMethodName", "service", "object", "skeletonLoading", "skeletonTheme", "isLister", "apiBody"], outputs: ["datasourceChange", "modelChange", "changeEv"] }, { kind: "component", type: OslFileUpload, selector: "osl-file-upload", inputs: ["label", "required", "disabled", "model", "accept", "multiple", "maxSize", "skeletonLoading", "skeletonTheme", "fileMode", "downloadFn"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslDatepicker, selector: "osl-datepicker", inputs: ["label", "required", "disabled", "model", "dateType", "placeholder", "minDate", "maxDate", "skeletonLoading", "skeletonTheme"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslDatetimepicker, selector: "osl-datetimepicker", inputs: ["label", "required", "disabled", "model", "placeholder", "minDatetime", "maxDatetime", "format", "displayFormat", "showSeconds", "enableMeridian", "skeletonLoading", "skeletonTheme"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslCheckbox, selector: "osl-checkbox", inputs: ["label", "disabled", "required", "model", "indeterminate", "skeletonLoading", "skeletonTheme"], outputs: ["modelChange", "changeEv"] }] });
+    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: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: Oslinput, selector: "osl-input", inputs: ["label", "required", "disabled", "model", "type", "placeholder", "mask", "min", "max", "minLength", "maxLength", "prefixIcon", "suffixIcon", "skeletonLoading", "skeletonTheme", "onlyChars", "isCapitalize", "decimalPortion"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: Osltextarea, selector: "osl-textarea", inputs: ["label", "rows", "required", "disabled", "model", "placeholder", "maxLength", "minLength", "characterCounter", "resize", "skeletonLoading", "skeletonTheme"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslSelect, selector: "osl-select", inputs: ["label", "required", "disabled", "model", "datasource", "displayField", "valueField", "placeholder", "loading", "clearable", "skeletonLoading", "skeletonTheme"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslRadio, selector: "osl-radio", inputs: ["label", "required", "disabled", "model", "datasource", "displayField", "valueField", "inline", "skeletonLoading", "skeletonTheme"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslSlideToggle, selector: "osl-slide-toggle", inputs: ["label", "disabled", "model", "labelPosition", "trueLabel", "falseLabel", "skeletonLoading", "skeletonTheme"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslAutocomplete, selector: "osl-autocomplete", inputs: ["label", "required", "disabled", "model", "datasource", "displayField", "valueField", "placeholder", "loading", "searchType", "methodName", "configMethodName", "service", "object", "skeletonLoading", "skeletonTheme", "isLister", "apiBody", "displayFn"], outputs: ["datasourceChange", "modelChange", "changeEv"] }, { kind: "component", type: OslFileUpload, selector: "osl-file-upload", inputs: ["label", "required", "disabled", "model", "accept", "multiple", "maxSize", "skeletonLoading", "skeletonTheme", "fileMode", "downloadFn"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslDatepicker, selector: "osl-datepicker", inputs: ["label", "required", "disabled", "model", "dateType", "placeholder", "minDate", "maxDate", "skeletonLoading", "skeletonTheme"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslDatetimepicker, selector: "osl-datetimepicker", inputs: ["label", "required", "disabled", "model", "placeholder", "minDatetime", "maxDatetime", "format", "displayFormat", "showSeconds", "enableMeridian", "skeletonLoading", "skeletonTheme"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslCheckbox, selector: "osl-checkbox", inputs: ["label", "disabled", "required", "model", "indeterminate", "skeletonLoading", "skeletonTheme"], outputs: ["modelChange", "changeEv"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslFormGrid, decorators: [{
             type: Component,
@@ -5440,7 +5446,7 @@ class OslReportGrid {
     asGroupRow = (row) => row;
     asDataRow = (row) => row;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslReportGrid, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: OslReportGrid, isStandalone: false, selector: "osl-report-grid", inputs: { columns: "columns", datasource: "datasource", loading: "loading", totalRecords: "totalRecords", autoMode: "autoMode", isPaginated: "isPaginated", pageSize: "pageSize", tableHeight: "tableHeight", striped: "striped", exportable: "exportable", rowHeight: "rowHeight", rowSelection: "rowSelection", showAggregates: "showAggregates", title: "title", pdfExportFromGrid: "pdfExportFromGrid", pdfConfig: "pdfConfig" }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange", sortChange: "sortChange", rowClick: "rowClick", selectionChange: "selectionChange" }, host: { listeners: { "document:mousemove": "onMouseMove($event)", "document:mouseup": "onMouseUp()", "document:click": "onDocumentClick()" } }, providers: [DatePipe, DecimalPipe], viewQueries: [{ propertyName: "headerScrollRef", first: true, predicate: ["headerScrollRef"], descendants: true }, { propertyName: "bodyScrollRef", first: true, predicate: ["bodyScrollRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"osl-rg\" (click)=\"closeColumnMenu(); openFilterKey = null; $event.stopPropagation()\">\n\n  <!-- \u2550\u2550 TOOLBAR \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <div class=\"osl-rg-toolbar\">\n    <div class=\"osl-rg-toolbar__left\">\n      @if (title) { <span class=\"osl-rg-title\">{{ title }}</span> }\n      @if (!loading) {\n        @if (_filteredTotal !== datasource.length) {\n          <span class=\"osl-rg-filter-badge\">\n            <span class=\"osl-rg-filter-badge__dot\"></span>\n            {{ _filteredTotal | number }} of {{ datasource.length | number }} rows\n          </span>\n        } @else {\n          <span class=\"osl-rg-record-count\">{{ datasource.length | number }} rows</span>\n        }\n      }\n    </div>\n    <div class=\"osl-rg-toolbar__right\">\n\n      <!-- Global search -->\n      <div class=\"osl-rg-global-search\">\n        <svg class=\"osl-rg-global-search__icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.35-4.35\"/>\n        </svg>\n        <input class=\"osl-rg-global-search__input\" placeholder=\"Search all columns\u2026\"\n               [(ngModel)]=\"globalSearch\" (ngModelChange)=\"currentPage=1; processData()\" />\n        @if (globalSearch) {\n          <button class=\"osl-rg-global-search__clear\" (click)=\"globalSearch=''; processData()\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"><path d=\"M18 6 6 18M6 6l12 12\"/></svg>\n          </button>\n        }\n      </div>\n\n      <!-- Sort active badge -->\n      @if (sortStates.size > 0) {\n        <button class=\"osl-rg-toolbar-btn osl-rg-toolbar-btn--active\" (click)=\"clearSort()\" title=\"Clear sort\">\n          <svg class=\"rg-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path d=\"M11 5H4M11 9H4M11 13H4M18 4v16M15 7l3-3 3 3M15 17l3 3 3-3\"/>\n          </svg>\n          <span>{{ sortStates.size }} sort{{ sortStates.size > 1 ? 's' : '' }}</span>\n          <svg class=\"rg-icon rg-icon--xs\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"><path d=\"M18 6 6 18M6 6l12 12\"/></svg>\n        </button>\n      }\n\n      <!-- Filter active badge -->\n      @if (hasAnyFilter) {\n        <button class=\"osl-rg-toolbar-btn osl-rg-toolbar-btn--danger\" (click)=\"clearAllFilters()\" title=\"Clear all filters\">\n          <svg class=\"rg-icon\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M22 3H2l8 9.46V19l4 2V12.46z\"/></svg>\n          <span>Filtered</span>\n          <svg class=\"rg-icon rg-icon--xs\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"><path d=\"M18 6 6 18M6 6l12 12\"/></svg>\n        </button>\n      }\n\n      <!-- Group toggle -->\n      <button class=\"osl-rg-toolbar-btn\" [class.osl-rg-toolbar-btn--on]=\"showGroupPanel\"\n              (click)=\"showGroupPanel=!showGroupPanel\" title=\"Group panel\">\n        <svg class=\"rg-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <rect x=\"2\" y=\"7\" width=\"20\" height=\"14\" rx=\"2\"/><path d=\"M16 3H8a2 2 0 0 0-2 2v2h12V5a2 2 0 0 0-2-2z\"/>\n        </svg>\n        <span>Group</span>\n      </button>\n\n      <!-- Expand / collapse when grouped -->\n      @if (activeGroups.length > 0) {\n        <button class=\"osl-rg-toolbar-btn\" (click)=\"expandAll()\" title=\"Expand all\">\n          <svg class=\"rg-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m7 20 5-5 5 5M7 4l5 5 5-5\"/></svg>\n        </button>\n        <button class=\"osl-rg-toolbar-btn\" (click)=\"collapseAll()\" title=\"Collapse all\">\n          <svg class=\"rg-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m7 15 5-5 5 5M7 9l5 5 5 5\"/></svg>\n        </button>\n      }\n\n      <!-- Auto-size all -->\n      <button class=\"osl-rg-toolbar-btn\" (click)=\"autoSizeAll()\" title=\"Auto-size all columns\">\n        <svg class=\"rg-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <path d=\"M21 6H3M21 18H3\"/><path d=\"M8 3 3 6l5 3M16 3l5 3-5 3M8 15l-5 3 5 3M16 15l5 3-5 3\"/>\n        </svg>\n        <span>Auto-size</span>\n      </button>\n\n      <!-- Column config -->\n      <button class=\"osl-rg-toolbar-btn\" [class.osl-rg-toolbar-btn--on]=\"showColumnConfig\"\n              (click)=\"showColumnConfig=!showColumnConfig; $event.stopPropagation()\" title=\"Column settings\">\n        <svg class=\"rg-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <path d=\"M4 6h16M4 12h16M4 18h16\"/>\n          <circle cx=\"8\"  cy=\"6\"  r=\"2\" fill=\"white\" stroke=\"currentColor\" stroke-width=\"2\"/>\n          <circle cx=\"16\" cy=\"12\" r=\"2\" fill=\"white\" stroke=\"currentColor\" stroke-width=\"2\"/>\n          <circle cx=\"8\"  cy=\"18\" r=\"2\" fill=\"white\" stroke=\"currentColor\" stroke-width=\"2\"/>\n        </svg>\n        <span>Columns</span>\n      </button>\n\n      <!-- Export Excel -->\n      @if (exportable) {\n        <button class=\"osl-rg-toolbar-btn osl-rg-toolbar-btn--excel\" (click)=\"exportExcel()\" title=\"Export to Excel\">\n          <svg class=\"rg-icon rg-icon--excel\" viewBox=\"0 0 24 24\">\n            <rect width=\"24\" height=\"24\" rx=\"3\" fill=\"#1D6F42\"/>\n            <path d=\"M13.5 3H7a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V7.5L13.5 3z\" fill=\"#fff\" opacity=\".15\"/>\n            <path d=\"M13.5 3v4.5H18L13.5 3z\" fill=\"#fff\" opacity=\".3\"/>\n            <path d=\"M8 9.5l2.3 3.5L8 16.5h1.6l1.4-2.3 1.4 2.3H14l-2.3-3.5 2.3-3.5h-1.6l-1.4 2.3-1.4-2.3H8z\" fill=\"#fff\"/>\n          </svg>\n          <span>Export Excel</span>\n        </button>\n      }\n\n      <!-- Export PDF -->\n      @if (exportable && pdfExportFromGrid) {\n        <button class=\"osl-rg-toolbar-btn osl-rg-toolbar-btn--pdf\" (click)=\"exportPdf()\" title=\"Export to PDF\">\n          <svg class=\"rg-icon rg-icon--pdf\" viewBox=\"0 0 24 24\">\n            <rect width=\"24\" height=\"24\" rx=\"3\" fill=\"#D32F2F\"/>\n            <path d=\"M13.5 3H7a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V7.5L13.5 3z\" fill=\"#fff\" opacity=\".15\"/>\n            <path d=\"M13.5 3v4.5H18L13.5 3z\" fill=\"#fff\" opacity=\".3\"/>\n            <text x=\"4.5\" y=\"17.5\" fill=\"#fff\" font-size=\"6.5\" font-family=\"sans-serif\" font-weight=\"700\">PDF</text>\n          </svg>\n          <span>Export PDF</span>\n        </button>\n      }\n    </div>\n  </div>\n\n  <!-- \u2550\u2550 GROUP PANEL \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  @if (showGroupPanel) {\n    <div class=\"osl-rg-group-panel\">\n      <span class=\"osl-rg-group-panel__label\">Group by:</span>\n      @if (activeGroups.length === 0) {\n        <span class=\"osl-rg-group-panel__hint\">Use the \u22EE column menu \u2192 \"Group by this\"</span>\n      }\n      <div class=\"osl-rg-group-chips\" cdkDropList cdkDropListOrientation=\"horizontal\"\n           [cdkDropListData]=\"activeGroups\" (cdkDropListDropped)=\"onGroupPanelDrop($event)\">\n        @for (key of activeGroups; track key) {\n          <div class=\"osl-rg-group-chip\" cdkDrag>\n            <svg cdkDragHandle class=\"rg-drag-handle\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n              <circle cx=\"9\" cy=\"5\" r=\"1.5\"/><circle cx=\"15\" cy=\"5\" r=\"1.5\"/>\n              <circle cx=\"9\" cy=\"12\" r=\"1.5\"/><circle cx=\"15\" cy=\"12\" r=\"1.5\"/>\n              <circle cx=\"9\" cy=\"19\" r=\"1.5\"/><circle cx=\"15\" cy=\"19\" r=\"1.5\"/>\n            </svg>\n            <span>{{ getGroupColLabel(key) }}</span>\n            <button class=\"osl-rg-group-chip__remove\" (click)=\"removeGroup(key)\">\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"><path d=\"M18 6 6 18M6 6l12 12\"/></svg>\n            </button>\n          </div>\n        }\n      </div>\n      @if (activeGroups.length > 0) {\n        <button class=\"osl-rg-group-panel__clear\" (click)=\"clearGroups()\">Clear groups</button>\n      }\n    </div>\n  }\n\n  <!-- \u2550\u2550 STICKY HEADER \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <div class=\"osl-rg-header-wrap\" #headerScrollRef>\n\n    <!-- Double header \u2013 group row (only rendered when headerGroup is used on any column) -->\n    @if (hasHeaderGroups) {\n      <div class=\"osl-rg-header-row osl-rg-header-row--groups\" [style.minWidth.px]=\"totalWidth\">\n        @if (rowSelection === 'multiple') {\n          <div class=\"osl-rg-th osl-rg-th--checkbox osl-rg-th--group-span\"></div>\n        }\n        <div style=\"display:flex;flex:1;min-width:0;\">\n          @for (group of computedHeaderGroups; track $index) {\n            <div class=\"osl-rg-th osl-rg-th--group-span\"\n                 [class.osl-rg-th--group-span--labeled]=\"!!group.label\"\n                 [class.osl-rg-th--pinned]=\"group.isPinned\"\n                 [style.width.px]=\"group.width\"\n                 [style.minWidth.px]=\"group.width\"\n                 [style.left.px]=\"group.isPinned ? group.stickyLeft : null\"\n                 [style.position]=\"group.isPinned ? 'sticky' : 'relative'\"\n                 [style.zIndex]=\"group.isPinned ? 3 : 1\">\n              @if (group.label) {\n                <span class=\"osl-rg-th-group-label\">{{ group.label }}</span>\n              }\n            </div>\n          }\n        </div>\n      </div>\n    }\n\n    <div class=\"osl-rg-header-row\" [style.minWidth.px]=\"totalWidth\">\n\n      <!-- Select-all checkbox -->\n      @if (rowSelection === 'multiple') {\n        <div class=\"osl-rg-th osl-rg-th--checkbox\">\n          <input type=\"checkbox\" class=\"osl-rg-checkbox\"\n                 [checked]=\"allSelected\" [indeterminate]=\"someSelected\"\n                 (change)=\"toggleSelectAll($any($event.target).checked)\" />\n        </div>\n      }\n\n      <!-- Column headers (drag-to-reorder) -->\n      <div class=\"osl-rg-header-cols\" cdkDropList cdkDropListOrientation=\"horizontal\"\n           [cdkDropListData]=\"_cols\" (cdkDropListDropped)=\"onColumnReorder($event)\"\n           style=\"display:flex;flex:1;min-width:0;\">\n\n        @for (col of visibleCols; track col.key) {\n          <div class=\"osl-rg-th\"\n               [class.osl-rg-th--pinned]=\"col._pinned\"\n               [class.osl-rg-th--sorted]=\"getSortState(col.key)\"\n               [class.osl-rg-th--filtered]=\"hasActiveFilter(col.key)\"\n               [style.width.px]=\"col._width\"\n               [style.minWidth.px]=\"col._width\"\n               [style.left.px]=\"col._pinned ? col._stickyLeft : null\"\n               [style.position]=\"col._pinned ? 'sticky' : 'relative'\"\n               [style.zIndex]=\"col._pinned ? 3 : 1\"\n               cdkDrag [cdkDragDisabled]=\"col._pinned\"\n               (cdkDragStarted)=\"onColumnDragStarted()\"\n               (cdkDragEnded)=\"onColumnDragEnded()\"\n               (click)=\"onHeaderClick(col, $event)\">\n\n            <div *cdkDragPlaceholder class=\"osl-rg-th-drag-placeholder\"></div>\n\n            <!-- Pin badge -->\n            @if (col._pinned) {\n              <span class=\"osl-rg-th-pin-badge\" title=\"Pinned\">\n                <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"9\" height=\"9\"><path d=\"M16 12V4h1V2H7v2h1v8l-2 2v2h5.2v6h1.6v-6H18v-2l-2-2z\"/></svg>\n              </span>\n            }\n\n            <!-- Label row -->\n            <div class=\"osl-rg-th-content\">\n              <span class=\"osl-rg-th-label\" [title]=\"col.label\">{{ col.label }}</span>\n              <div class=\"osl-rg-th-actions\">\n\n                <!-- Sort indicator -->\n                @if (col.sortable) {\n                  <span class=\"osl-rg-sort-icon\"\n                        [class.osl-rg-sort-icon--asc]=\"getSortState(col.key)?.asc === true\"\n                        [class.osl-rg-sort-icon--desc]=\"getSortState(col.key)?.asc === false\">\n                    @if (getSortState(col.key); as s) {\n                      @if (s.asc) {\n                        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 19V5m-7 7 7-7 7 7\"/></svg>\n                      } @else {\n                        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 5v14m7-7-7 7-7-7\"/></svg>\n                      }\n                      @if (sortStates.size > 1) { <sup class=\"osl-rg-sort-badge\">{{ s.index + 1 }}</sup> }\n                    } @else {\n                      <svg class=\"osl-rg-sort-idle\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M8 9l4-4 4 4M16 15l-4 4-4-4\"/></svg>\n                    }\n                  </span>\n                }\n\n                <!-- Excel filter button -->\n                @if (col.filterable) {\n                  <button class=\"osl-rg-filter-btn\" [class.osl-rg-filter-btn--active]=\"hasActiveFilter(col.key)\"\n                          (click)=\"openExcelFilter(col.key, $event)\" title=\"Filter\">\n                    @if (hasActiveFilter(col.key)) {\n                      <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M22 3H2l8 9.46V19l4 2V12.46z\"/></svg>\n                    } @else {\n                      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polygon points=\"22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3\"/></svg>\n                    }\n                  </button>\n                }\n\n                <!-- Column menu -->\n                <button class=\"osl-rg-col-menu-btn\" (click)=\"openColumnMenu(col.key, $event)\" title=\"Column options\">\n                  <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><circle cx=\"12\" cy=\"5\" r=\"2\"/><circle cx=\"12\" cy=\"12\" r=\"2\"/><circle cx=\"12\" cy=\"19\" r=\"2\"/></svg>\n                </button>\n\n              </div>\n            </div>\n\n            <!-- Per-column search -->\n            @if (col.searchable) {\n              <div class=\"osl-rg-col-search\" (click)=\"$event.stopPropagation()\">\n                <svg class=\"osl-rg-col-search__icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                  <circle cx=\"11\" cy=\"11\" r=\"7\"/><path d=\"m18 18-3.5-3.5\"/>\n                </svg>\n                <input class=\"osl-rg-col-search__input\" [placeholder]=\"col.label + '\u2026'\"\n                       [ngModel]=\"columnSearch[col.key]\" (ngModelChange)=\"onColumnSearch(col.key, $event)\" />\n                @if (columnSearch[col.key]) {\n                  <button class=\"osl-rg-col-search__clear\" (click)=\"columnSearch[col.key]=''; processData()\">\n                    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"><path d=\"M18 6 6 18M6 6l12 12\"/></svg>\n                  </button>\n                }\n              </div>\n            }\n\n            <!-- Resize handle -->\n            @if (col.resizable) {\n              <div class=\"osl-rg-resize-handle\" (mousedown)=\"startResize(col, $event)\" (dblclick)=\"autoSizeColumn(col, $event)\" (click)=\"$event.stopPropagation()\"></div>\n            }\n\n\n          </div><!-- /osl-rg-th -->\n        }\n\n      </div><!-- /header-cols -->\n    </div><!-- /header-row -->\n  </div><!-- /header-wrap -->\n\n  <!-- \u2550\u2550 SCROLLABLE BODY \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <div class=\"osl-rg-body\" [style.height]=\"tableHeight\" #bodyScrollRef (scroll)=\"onBodyScroll($event)\">\n    <div class=\"osl-rg-inner\" [style.minWidth.px]=\"totalWidth\">\n\n      <!-- Skeleton loading -->\n      @if (loading) {\n        @for (sk of skeletonRows; track $index) {\n          <div class=\"osl-rg-row osl-rg-row--skeleton\" [style.height.px]=\"rowHeight\">\n            @if (rowSelection === 'multiple') {\n              <div class=\"osl-rg-td osl-rg-td--checkbox\"><div class=\"osl-rg-skel\" style=\"width:14px;height:14px;border-radius:3px;\"></div></div>\n            }\n            @for (col of visibleCols; track col.key) {\n              <div class=\"osl-rg-td\" [style.width.px]=\"col._width\" [style.minWidth.px]=\"col._width\">\n                <div class=\"osl-rg-skel\" [style.width]=\"$index % 3 === 0 ? '55%' : $index % 3 === 1 ? '80%' : '65%'\"></div>\n              </div>\n            }\n          </div>\n        }\n\n      } @else if (isEmpty) {\n        <!-- Empty state -->\n        <div class=\"osl-rg-empty\">\n          <div class=\"osl-rg-empty__icon\">\n            <svg viewBox=\"0 0 48 48\" fill=\"none\" stroke=\"#d1d5db\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <rect x=\"6\" y=\"6\" width=\"36\" height=\"36\" rx=\"4\"/>\n              <path d=\"M6 18h36M6 30h36M18 6v36\"/>\n            </svg>\n          </div>\n          <p class=\"osl-rg-empty__title\">No records found</p>\n          <p class=\"osl-rg-empty__sub\">\n            @if (hasAnyFilter) { Try adjusting your filters or search terms }\n            @else { No data to display }\n          </p>\n          @if (hasAnyFilter) {\n            <button class=\"osl-rg-empty__action\" (click)=\"clearAllFilters()\">Clear all filters</button>\n          }\n        </div>\n\n      } @else {\n        <!-- Data rows -->\n        @for (row of flatRows; track trackByRow($index, row)) {\n\n          @if (row._type === 'group') {\n            <div class=\"osl-rg-group-row\"\n                 [class.osl-rg-group-row--l0]=\"asGroupRow(row)._level === 0\"\n                 [class.osl-rg-group-row--l1]=\"asGroupRow(row)._level === 1\"\n                 [class.osl-rg-group-row--l2]=\"asGroupRow(row)._level >= 2\"\n                 [style.height.px]=\"rowHeight\"\n                 [style.paddingLeft.px]=\"asGroupRow(row)._level * 20 + 12\"\n                 (click)=\"toggleGroup(asGroupRow(row)._path)\">\n              @if (asGroupRow(row)._expanded) {\n                <svg class=\"osl-rg-group-chevron\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"/></svg>\n              } @else {\n                <svg class=\"osl-rg-group-chevron\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"/></svg>\n              }\n              <span class=\"osl-rg-group-row__key\">{{ asGroupRow(row)._colLabel }}:</span>\n              <span class=\"osl-rg-group-row__value\">{{ asGroupRow(row)._label }}</span>\n              <span class=\"osl-rg-group-row__count\">{{ asGroupRow(row)._count | number }} rows</span>\n            </div>\n\n          } @else {\n            <div class=\"osl-rg-row\"\n                 [class.osl-rg-row--striped]=\"striped && asDataRow(row)._rowIndex % 2 === 1\"\n                 [class.osl-rg-row--selected]=\"selectedRows.has(asDataRow(row)._data)\"\n                 [style.height.px]=\"rowHeight\"\n                 (click)=\"onRowClick(asDataRow(row)._data, $event)\">\n\n              @if (rowSelection === 'multiple') {\n                <div class=\"osl-rg-td osl-rg-td--checkbox\">\n                  <input type=\"checkbox\" class=\"osl-rg-checkbox\"\n                         [checked]=\"selectedRows.has(asDataRow(row)._data)\"\n                         (change)=\"toggleRowSelect(asDataRow(row)._data, $event)\" />\n                </div>\n              }\n\n              @for (col of visibleCols; track col.key) {\n                <div class=\"osl-rg-td\"\n                     [class.osl-rg-td--pinned]=\"col._pinned\"\n                     [ngClass]=\"getCellClass(asDataRow(row)._data, col)\"\n                     [style.width.px]=\"col._width\"\n                     [style.minWidth.px]=\"col._width\"\n                     [style.left.px]=\"col._pinned ? col._stickyLeft : null\"\n                     [style.position]=\"col._pinned ? 'sticky' : 'relative'\"\n                     [style.zIndex]=\"col._pinned ? 2 : 0\"\n                     [style.textAlign]=\"col.align ?? 'left'\"\n                     (dblclick)=\"copyCell(getCellDisplay(asDataRow(row)._data, col), $event)\"\n                     [title]=\"getCellDisplay(asDataRow(row)._data, col)\">\n                  <span class=\"osl-rg-cell-text\">{{ getCellDisplay(asDataRow(row)._data, col) }}</span>\n                </div>\n              }\n\n            </div>\n          }\n\n        }\n      }\n\n    </div><!-- /osl-rg-inner -->\n  </div><!-- /osl-rg-body -->\n\n  <!-- \u2550\u2550 AGGREGATE FOOTER \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  @if (showAggregates && hasAnyAggregate() && !loading) {\n    <div class=\"osl-rg-aggregate-row\" [style.minWidth.px]=\"totalWidth\">\n      @if (rowSelection === 'multiple') { <div class=\"osl-rg-agg-cell osl-rg-agg-cell--checkbox\"></div> }\n      @for (col of visibleCols; track col.key) {\n        <div class=\"osl-rg-agg-cell\" [style.width.px]=\"col._width\" [style.minWidth.px]=\"col._width\" [style.textAlign]=\"col.align ?? 'left'\">\n          @if (col.aggregate) {\n            <span class=\"osl-rg-agg-label\">{{ col.aggregate | uppercase }}</span>\n            <span class=\"osl-rg-agg-value\">{{ getAggregate(col) }}</span>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  <!-- \u2550\u2550 PAGINATION \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  @if (isPaginated) {\n    <div class=\"osl-rg-pagination\">\n      <span class=\"osl-rg-pagination__info\">\n        @if (loading) { Loading\u2026 }\n        @else if (_total > 0) { Showing <strong>{{ startRecord | number }}\u2013{{ endRecord | number }}</strong> of <strong>{{ _total | number }}</strong> records }\n        @else { No records }\n      </span>\n      <div class=\"osl-rg-pagination__controls\">\n        <button class=\"osl-rg-page-btn osl-rg-page-btn--nav\" (click)=\"goToPage(1)\" [disabled]=\"currentPage===1||loading\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"13\" height=\"13\"><path d=\"m11 17-5-5 5-5M18 17l-5-5 5-5\"/></svg>\n        </button>\n        <button class=\"osl-rg-page-btn osl-rg-page-btn--nav\" (click)=\"goToPage(currentPage-1)\" [disabled]=\"currentPage===1||loading\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"13\" height=\"13\"><path d=\"m15 18-6-6 6-6\"/></svg>\n          Prev\n        </button>\n        @for (page of pageNumbers; track $index) {\n          @if (page === -1) { <span class=\"osl-rg-page-ellipsis\">\u2026</span> }\n          @else {\n            <button class=\"osl-rg-page-btn osl-rg-page-btn--num\" [class.osl-rg-page-btn--active]=\"page===currentPage\"\n                    [disabled]=\"loading\" (click)=\"goToPage(page)\">{{ page }}</button>\n          }\n        }\n        <button class=\"osl-rg-page-btn osl-rg-page-btn--nav\" (click)=\"goToPage(currentPage+1)\" [disabled]=\"currentPage===totalPages||loading\">\n          Next\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"13\" height=\"13\"><path d=\"m9 18 6-6-6-6\"/></svg>\n        </button>\n        <button class=\"osl-rg-page-btn osl-rg-page-btn--nav\" (click)=\"goToPage(totalPages)\" [disabled]=\"currentPage===totalPages||loading\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"13\" height=\"13\"><path d=\"m13 17 5-5-5-5M6 17l5-5-5-5\"/></svg>\n        </button>\n      </div>\n      <div class=\"osl-rg-pagination__size\">\n        <span class=\"osl-rg-pagination__size-label\">Rows per page</span>\n        <select class=\"osl-rg-page-size\" [ngModel]=\"pageSize\" (ngModelChange)=\"onPageSizeChange($event)\" [disabled]=\"loading\">\n          @for (opt of pageSizeOptions; track opt) { <option [value]=\"opt\">{{ opt }}</option> }\n        </select>\n      </div>\n    </div>\n  }\n\n</div><!-- /osl-rg -->\n\n\n<!-- \u2550\u2550 EXCEL FILTER DROPDOWN (fixed, outside overflow containers) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n@if (openFilterKey && excelFilterState[openFilterKey]) {\n  <div class=\"osl-rg-excel-filter\"\n       [style.top.px]=\"filterDropdownPos.top\"\n       [style.left.px]=\"filterDropdownPos.left\"\n       (click)=\"$event.stopPropagation()\">\n    <div class=\"osl-rg-excel-filter__header\">\n      <div class=\"osl-rg-excel-filter__title\">\n        <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"12\" height=\"12\" style=\"flex-shrink:0;\"><path d=\"M22 3H2l8 9.46V19l4 2V12.46z\"/></svg>\n        Filter: {{ getColumnByKey(openFilterKey)?.label }}\n      </div>\n      @if (hasActiveFilter(openFilterKey)) {\n        <button class=\"osl-rg-excel-filter__clear-btn\" (click)=\"clearExcelFilter(openFilterKey!)\">Clear</button>\n      }\n    </div>\n    <div class=\"osl-rg-excel-filter__search\">\n      <input class=\"osl-rg-excel-filter__search-input\" placeholder=\"Search values\u2026\"\n             [(ngModel)]=\"excelFilterState[openFilterKey].search\" />\n    </div>\n    <div class=\"osl-rg-excel-filter__select-all\">\n      <label class=\"osl-rg-excel-filter__item osl-rg-excel-filter__item--all\">\n        <input type=\"checkbox\" class=\"osl-rg-checkbox\" [checked]=\"isAllExcelChecked(openFilterKey)\"\n               (change)=\"toggleAllExcelFilter(openFilterKey!, $any($event.target).checked)\" />\n        <span class=\"osl-rg-excel-filter__item-label\">(Select All)</span>\n      </label>\n    </div>\n    <div class=\"osl-rg-excel-filter__list\">\n      @for (item of getFilteredExcelItems(openFilterKey); track item.value) {\n        <label class=\"osl-rg-excel-filter__item\">\n          <input type=\"checkbox\" class=\"osl-rg-checkbox\" [(ngModel)]=\"item.checked\" />\n          <span class=\"osl-rg-excel-filter__item-label\">{{ item.label }}</span>\n        </label>\n      }\n    </div>\n    <div class=\"osl-rg-excel-filter__footer\">\n      <button class=\"osl-rg-excel-filter__apply\" (click)=\"applyExcelFilter(openFilterKey!)\">Apply Filter</button>\n      <button class=\"osl-rg-excel-filter__cancel\" (click)=\"openFilterKey=null\">Cancel</button>\n    </div>\n  </div>\n}\n\n\n<!-- \u2550\u2550 COLUMN CONTEXT MENU (fixed) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n@if (columnMenuKey && getColumnByKey(columnMenuKey); as menuCol) {\n  <div class=\"osl-rg-col-menu\"\n       [style.top.px]=\"columnMenuPos.top\" [style.left.px]=\"columnMenuPos.left\"\n       (click)=\"$event.stopPropagation()\">\n    <div class=\"osl-rg-col-menu__header\">{{ menuCol.label }}</div>\n    @if (menuCol.sortable) {\n      <button class=\"osl-rg-col-menu__item\"\n              (click)=\"sortStates.clear(); sortStates.set(menuCol.key,{key:menuCol.key,asc:true,index:0}); sortCounter=1; processData(); closeColumnMenu()\">\n        <svg class=\"rg-icon rg-icon--sm\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 19V5m-7 7 7-7 7 7\"/></svg>\n        Sort A \u2192 Z\n      </button>\n      <button class=\"osl-rg-col-menu__item\"\n              (click)=\"sortStates.clear(); sortStates.set(menuCol.key,{key:menuCol.key,asc:false,index:0}); sortCounter=1; processData(); closeColumnMenu()\">\n        <svg class=\"rg-icon rg-icon--sm\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 5v14m7-7-7 7-7-7\"/></svg>\n        Sort Z \u2192 A\n      </button>\n    }\n    @if (menuCol.groupable) {\n      <div class=\"osl-rg-col-menu__divider\"></div>\n      <button class=\"osl-rg-col-menu__item\" (click)=\"addGroup(menuCol.key); closeColumnMenu()\">\n        <svg class=\"rg-icon rg-icon--sm\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"7\" width=\"20\" height=\"14\" rx=\"2\"/><path d=\"M16 3H8a2 2 0 0 0-2 2v2h12V5a2 2 0 0 0-2-2z\"/></svg>\n        Group by this\n      </button>\n    }\n    <div class=\"osl-rg-col-menu__divider\"></div>\n    <button class=\"osl-rg-col-menu__item\" (click)=\"toggleColumnPin(menuCol)\">\n      <svg class=\"rg-icon rg-icon--sm\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M16 12V4h1V2H7v2h1v8l-2 2v2h5.2v6h1.6v-6H18v-2l-2-2z\"/></svg>\n      {{ menuCol._pinned ? 'Unpin column' : 'Pin to left' }}\n    </button>\n    <button class=\"osl-rg-col-menu__item\" (click)=\"autoSizeColumn(menuCol); closeColumnMenu()\">\n      <svg class=\"rg-icon rg-icon--sm\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 6H3M21 18H3\"/><path d=\"M8 3 3 6l5 3M16 3l5 3-5 3M8 15l-5 3 5 3M16 15l5 3-5 3\"/></svg>\n      Auto-size column\n    </button>\n    <div class=\"osl-rg-col-menu__divider\"></div>\n    <button class=\"osl-rg-col-menu__item osl-rg-col-menu__item--danger\" (click)=\"toggleColumnVisibility(menuCol); closeColumnMenu()\">\n      <svg class=\"rg-icon rg-icon--sm\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <path d=\"M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24M1 1l22 22\"/>\n      </svg>\n      Hide column\n    </button>\n  </div>\n}\n\n\n<!-- \u2550\u2550 COLUMN CONFIG SIDE DRAWER \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n@if (showColumnConfig) {\n  <div class=\"osl-rg-config-backdrop\" (click)=\"showColumnConfig=false\"></div>\n  <div class=\"osl-rg-config-panel\" (click)=\"$event.stopPropagation()\">\n    <div class=\"osl-rg-config-panel__header\">\n      <div class=\"osl-rg-config-panel__title\">\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"16\" height=\"16\">\n          <path d=\"M4 6h16M4 12h16M4 18h16\"/>\n          <circle cx=\"8\"  cy=\"6\"  r=\"2\" fill=\"white\" stroke=\"currentColor\" stroke-width=\"2\"/>\n          <circle cx=\"16\" cy=\"12\" r=\"2\" fill=\"white\" stroke=\"currentColor\" stroke-width=\"2\"/>\n          <circle cx=\"8\"  cy=\"18\" r=\"2\" fill=\"white\" stroke=\"currentColor\" stroke-width=\"2\"/>\n        </svg>\n        Column Settings\n      </div>\n      <button class=\"osl-rg-config-panel__close\" (click)=\"showColumnConfig=false\">\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"><path d=\"M18 6 6 18M6 6l12 12\"/></svg>\n      </button>\n    </div>\n    <div class=\"osl-rg-config-panel__actions\">\n      <button class=\"osl-rg-config-action\" (click)=\"autoSizeAll()\">\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"13\" height=\"13\"><path d=\"M21 6H3M21 18H3\"/><path d=\"M8 3 3 6l5 3M16 3l5 3-5 3\"/></svg>\n        Auto-size all\n      </button>\n      <button class=\"osl-rg-config-action\" (click)=\"showAllColumns()\">\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"13\" height=\"13\"><path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"/><circle cx=\"12\" cy=\"12\" r=\"3\"/></svg>\n        Show all\n      </button>\n    </div>\n    <div class=\"osl-rg-config-hint\">Drag to reorder \u00B7 Toggle to show/hide \u00B7 Pin to freeze</div>\n    <div class=\"osl-rg-config-list\" cdkDropList (cdkDropListDropped)=\"onConfigColumnReorder($event)\">\n      @for (col of _cols; track col.key) {\n        <div class=\"osl-rg-config-item\" cdkDrag [class.osl-rg-config-item--hidden]=\"col._hidden\">\n          <svg cdkDragHandle class=\"rg-drag-handle\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n            <circle cx=\"9\" cy=\"5\" r=\"1.5\"/><circle cx=\"15\" cy=\"5\" r=\"1.5\"/>\n            <circle cx=\"9\" cy=\"12\" r=\"1.5\"/><circle cx=\"15\" cy=\"12\" r=\"1.5\"/>\n            <circle cx=\"9\" cy=\"19\" r=\"1.5\"/><circle cx=\"15\" cy=\"19\" r=\"1.5\"/>\n          </svg>\n          <input type=\"checkbox\" class=\"osl-rg-checkbox\" [checked]=\"!col._hidden\" (change)=\"toggleColumnVisibility(col)\" />\n          <span class=\"osl-rg-config-item__label\" [class.osl-rg-config-item__label--hidden]=\"col._hidden\">{{ col.label }}</span>\n          <button class=\"osl-rg-config-item__pin-btn\" (click)=\"toggleColumnPin(col)\"\n                  [class.osl-rg-config-item__pin-btn--active]=\"col._pinned\"\n                  [title]=\"col._pinned ? 'Unpin' : 'Pin to left'\">\n            <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"12\" height=\"12\"><path d=\"M16 12V4h1V2H7v2h1v8l-2 2v2h5.2v6h1.6v-6H18v-2l-2-2z\"/></svg>\n          </button>\n        </div>\n      }\n    </div>\n  </div>\n}\n\n\n<!-- \u2550\u2550 COPY TOAST \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n@if (copiedCell !== null) {\n  <div class=\"osl-rg-copy-toast\">\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"13\" height=\"13\"><polyline points=\"20 6 9 17 4 12\"/></svg>\n    Copied to clipboard\n  </div>\n}\n", styles: ["@keyframes rg-pulse{0%,to{opacity:1}50%{opacity:.4}}@keyframes rg-fade-up{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes rg-slide-in{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}.rg-icon{width:15px;height:15px;flex-shrink:0;display:block}.rg-icon--sm{width:14px;height:14px}.rg-icon--xs{width:12px;height:12px}.rg-icon--excel{width:18px;height:18px}.rg-drag-handle{width:14px;height:14px;flex-shrink:0;color:#d1d5db;cursor:grab;display:block}.rg-drag-handle:active{cursor:grabbing}.osl-rg{position:relative;display:flex;flex-direction:column;width:100%;font-family:inherit;font-size:13px;color:#111827;background:#fff;border:1px solid var(--osl-border-color, #e5e7eb);border-radius:10px;overflow:hidden;box-shadow:0 2px 8px #00000012,0 1px 2px #0000000a;-webkit-user-select:none;user-select:none}.osl-rg-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;background:linear-gradient(135deg,#f8faff,#f3f4f6);border-bottom:1px solid var(--osl-border-color, #e5e7eb);flex-shrink:0;flex-wrap:wrap}.osl-rg-toolbar__left{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.osl-rg-toolbar__right{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.osl-rg-title{font-size:14px;font-weight:700;color:#111827;letter-spacing:-.01em}.osl-rg-record-count{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:#9ca3af;font-weight:500}.osl-rg-record-count svg{color:#d1d5db}.osl-rg-filter-badge{display:inline-flex;align-items:center;gap:5px;padding:2px 9px 2px 6px;background:#eff6ff;border:1px solid #bfdbfe;border-radius:12px;font-size:11px;color:#1d4ed8;font-weight:600}.osl-rg-filter-badge__dot{width:6px;height:6px;border-radius:50%;background:#2563eb;animation:rg-pulse 1.5s ease-in-out infinite;flex-shrink:0}.osl-rg-toolbar-btn{display:inline-flex;align-items:center;gap:5px;height:32px;padding:0 11px;border:1px solid var(--osl-border-color, #e5e7eb);border-radius:7px;background:#fff;color:#5a6478;font-size:12px;font-family:inherit;font-weight:500;cursor:pointer;white-space:nowrap;transition:all .15s ease}.osl-rg-toolbar-btn svg{flex-shrink:0}.osl-rg-toolbar-btn:hover{background:#f3f4f6;color:#1f2937;border-color:#c4c9d4;box-shadow:0 1px 3px #0000000f}.osl-rg-toolbar-btn--on{background:#eff6ff;border-color:#93c5fd;color:#1d4ed8}.osl-rg-toolbar-btn--active{background:#eff6ff;border-color:#93c5fd;color:#1d4ed8;font-weight:600}.osl-rg-toolbar-btn--danger{background:#fff5f5;border-color:#fca5a5;color:#dc2626}.osl-rg-toolbar-btn--danger:hover{background:#fee2e2;border-color:#f87171}.osl-rg-toolbar-btn--excel{background:linear-gradient(135deg,#1a7a3e,#1d6f42);border-color:#166534;color:#fff;font-weight:600;box-shadow:0 1px 3px #1665344d}.osl-rg-toolbar-btn--excel:hover{background:linear-gradient(135deg,#166534,#145a2c);border-color:#14532d;color:#fff;box-shadow:0 2px 6px #16653466}.osl-rg-toolbar-btn--pdf{background:linear-gradient(135deg,#e53935,#c62828);border-color:#b71c1c;color:#fff;font-weight:600;box-shadow:0 1px 3px #b71c1c4d}.osl-rg-toolbar-btn--pdf:hover{background:linear-gradient(135deg,#c62828,#ad1515);border-color:#ad1515;color:#fff;box-shadow:0 2px 6px #b71c1c66}.rg-icon--pdf{width:18px;height:18px}.osl-rg-global-search{position:relative;display:inline-flex;align-items:center}.osl-rg-global-search__icon{position:absolute;left:9px;width:14px;height:14px;color:#9ca3af;pointer-events:none;display:block}.osl-rg-global-search__input{height:32px;padding:0 30px;border:1px solid var(--osl-border-color, #e5e7eb);border-radius:7px;background:#fff;font-size:12.5px;font-family:inherit;color:#111827;outline:none;width:210px;transition:border-color .15s,width .2s,box-shadow .15s}.osl-rg-global-search__input::placeholder{color:#b0b7c3}.osl-rg-global-search__input:focus{border-color:var(--osl-primary, #2563eb);width:260px;box-shadow:0 0 0 3px #2563eb1a}.osl-rg-global-search__clear{position:absolute;right:6px;display:flex;align-items:center;justify-content:center;width:18px;height:18px;border:none;background:transparent;color:#9ca3af;cursor:pointer;padding:0;border-radius:4px;transition:all .12s}.osl-rg-global-search__clear svg{width:12px;height:12px}.osl-rg-global-search__clear:hover{color:#374151;background:#0000000d}.osl-rg-group-panel{display:flex;align-items:center;gap:8px;padding:6px 14px;background:linear-gradient(135deg,#fafbff,#f5f7ff);border-bottom:1px dashed #dde5ff;min-height:40px;flex-shrink:0;flex-wrap:wrap}.osl-rg-group-panel__label{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:#6b7280;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;flex-shrink:0}.osl-rg-group-panel__label svg{color:#9ca3af}.osl-rg-group-panel__hint{font-size:11px;color:#b0b7c3;font-style:italic}.osl-rg-group-panel__clear{margin-left:auto;font-size:11px;color:#6b7280;background:none;border:none;cursor:pointer;text-decoration:underline;flex-shrink:0;padding:0;font-family:inherit}.osl-rg-group-panel__clear:hover{color:#dc2626}.osl-rg-group-chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center;flex:1;min-height:26px}.osl-rg-group-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 6px 3px 5px;background:linear-gradient(135deg,#dbeafe,#eff6ff);border:1px solid #bfdbfe;border-radius:20px;font-size:12px;font-weight:600;color:#1e40af;cursor:grab;-webkit-user-select:none;user-select:none;box-shadow:0 1px 2px #2563eb1a;transition:box-shadow .1s}.osl-rg-group-chip:active{cursor:grabbing;box-shadow:0 2px 6px #2563eb33}.osl-rg-group-chip .rg-drag-handle{color:#93c5fd}.osl-rg-group-chip__remove{display:flex;align-items:center;justify-content:center;width:16px;height:16px;border:none;background:transparent;cursor:pointer;padding:0;border-radius:50%;transition:all .1s}.osl-rg-group-chip__remove svg{width:10px;height:10px;color:#93c5fd}.osl-rg-group-chip__remove:hover{background:#dbeafe}.osl-rg-group-chip__remove:hover svg{color:#1e40af}.osl-rg-table-area{display:flex;flex-direction:column;flex:1 1 0;overflow:hidden;position:relative;min-height:0}.osl-rg-header-wrap{overflow:hidden;flex-shrink:0;border-bottom:2px solid #dde5ff;background:linear-gradient(180deg,#f0f4ff,#e8efff);z-index:10;position:relative}.osl-rg-header-row{display:flex;align-items:stretch}.osl-rg-header-row--groups{border-bottom:1px solid #c7d7f0}.osl-rg-th--group-span{display:flex;align-items:center;justify-content:center;height:28px;min-height:28px;cursor:default;padding:0;border-right:1px solid #dde5ff}.osl-rg-th--group-span:hover{background:transparent!important}.osl-rg-th--group-span:last-child{border-right:none}.osl-rg-th--group-span--labeled{background:linear-gradient(135deg,#dbeafe,#eff6ff);border-bottom:2px solid #93c5fd}.osl-rg-th-group-label{font-size:11px;font-weight:700;color:#1e40af;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 10px;text-align:center;width:100%}.osl-rg-header-cols{display:flex}.osl-rg-th{position:relative;display:flex;flex-direction:column;background:transparent;border-right:1px solid #dde5ff;cursor:pointer;flex-shrink:0;transition:background .12s;overflow:visible}.osl-rg-th:last-child{border-right:none}.osl-rg-th:hover{background:#2563eb0f}.osl-rg-th--pinned{background:linear-gradient(180deg,#e8efff,#dde8ff);border-right:1px solid #bfdbfe;z-index:3}.osl-rg-th--pinned:after{content:\"\";position:absolute;right:-5px;top:0;bottom:0;width:5px;background:linear-gradient(to right,rgba(37,99,235,.14),transparent);pointer-events:none;z-index:4}.osl-rg-th--sorted{background:#6366f114}.osl-rg-th--filtered{background:#f59e0b12}.osl-rg-th-drag-placeholder{background:#e0e7ff;border:2px dashed #6366f1;border-radius:4px;opacity:.6}.osl-rg-th-pin-badge{position:absolute;top:3px;right:24px;color:var(--osl-primary, #2563eb);opacity:.6;display:flex;align-items:center}.osl-rg-th-content{display:flex;align-items:center;justify-content:space-between;gap:4px;padding:0 8px 0 10px;height:36px;min-height:36px}.osl-rg-th-label{font-size:11.5px;font-weight:700;color:#1e3a6e;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}.osl-rg-th-actions{display:flex;align-items:center;gap:2px;flex-shrink:0}.osl-rg-sort-icon{display:inline-flex;align-items:center;position:relative;color:#9ca3af;transition:color .12s;width:14px;height:14px}.osl-rg-sort-icon svg{width:13px;height:13px;display:block}.osl-rg-sort-icon--asc,.osl-rg-sort-icon--desc{color:var(--osl-primary, #2563eb)}.osl-rg-sort-idle{opacity:.3}.osl-rg-sort-badge{position:absolute;top:-4px;right:-6px;font-size:8px;font-weight:700;background:var(--osl-primary, #2563eb);color:#fff;border-radius:50%;width:11px;height:11px;display:flex;align-items:center;justify-content:center;line-height:1}.osl-rg-filter-btn,.osl-rg-col-menu-btn{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border:none;background:transparent;color:#b0b7c3;cursor:pointer;padding:0;border-radius:5px;transition:all .12s}.osl-rg-filter-btn svg,.osl-rg-col-menu-btn svg{width:13px;height:13px;display:block}.osl-rg-filter-btn:hover,.osl-rg-col-menu-btn:hover{background:#00000012;color:#374151}.osl-rg-filter-btn--active{color:var(--osl-primary, #2563eb)!important;background:#2563eb1f!important}.osl-rg-col-search{position:relative;display:flex;align-items:center;padding:3px 6px;border-top:1px solid #e0e7ff;background:#ffffff80}.osl-rg-col-search__icon{position:absolute;left:10px;width:12px;height:12px;display:block;pointer-events:none;color:#c4cad6}.osl-rg-col-search__input{width:100%;height:23px;padding:0 18px 0 22px;border:1px solid #dde5ff;border-radius:5px;font-size:11px;font-family:inherit;background:#fff;color:#111827;outline:none;transition:border-color .12s,box-shadow .12s}.osl-rg-col-search__input::placeholder{color:#c4cad6}.osl-rg-col-search__input:focus{border-color:var(--osl-primary, #2563eb);box-shadow:0 0 0 2px #2563eb1a}.osl-rg-col-search__clear{position:absolute;right:8px;display:flex;align-items:center;width:14px;height:14px;border:none;background:transparent;color:#9ca3af;cursor:pointer;padding:0;border-radius:3px;transition:all .1s}.osl-rg-col-search__clear svg{width:10px;height:10px;display:block}.osl-rg-col-search__clear:hover{color:#374151;background:#0000000f}.osl-rg-resize-handle{position:absolute;right:0;top:0;bottom:0;width:6px;cursor:col-resize;z-index:5}.osl-rg-resize-handle:after{content:\"\";position:absolute;right:2px;top:15%;bottom:15%;width:2px;border-radius:2px;background:#a5b4fc;opacity:0;transition:opacity .15s}.osl-rg-resize-handle:hover:after{opacity:1}.osl-rg-th:hover .osl-rg-resize-handle:after{opacity:.4}.osl-rg-excel-filter{position:fixed;z-index:9999;width:250px;background:#fff;border:1px solid #e5e7eb;border-radius:10px;box-shadow:0 12px 32px #00000026,0 2px 8px #00000012;animation:rg-fade-up .14s ease;overflow:hidden}.osl-rg-excel-filter__header{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;background:linear-gradient(135deg,#f0f4ff,#e8efff);border-bottom:1px solid #dde5ff}.osl-rg-excel-filter__title{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:#1e3a6e;text-transform:uppercase;letter-spacing:.06em}.osl-rg-excel-filter__clear-btn{font-size:11px;color:#dc2626;background:none;border:none;cursor:pointer;font-weight:600;padding:2px 6px;border-radius:4px;font-family:inherit;transition:background .1s}.osl-rg-excel-filter__clear-btn:hover{background:#fee2e2}.osl-rg-excel-filter__search{padding:7px 8px;border-bottom:1px solid #f3f4f6;position:relative}.osl-rg-excel-filter__search-input{width:100%;height:28px;padding:0 8px 0 28px;border:1px solid #e5e7eb;border-radius:6px;font-size:12px;font-family:inherit;outline:none;box-sizing:border-box;transition:border-color .12s;color:#111827}.osl-rg-excel-filter__search-input::placeholder{color:#b0b7c3}.osl-rg-excel-filter__search-input:focus{border-color:var(--osl-primary, #2563eb)}.osl-rg-excel-filter__select-all{padding:0 8px;border-bottom:2px solid #f3f4f6;background:#fafbff}.osl-rg-excel-filter__list{max-height:210px;overflow-y:auto;padding:3px 8px}.osl-rg-excel-filter__list::-webkit-scrollbar{width:5px}.osl-rg-excel-filter__list::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:4px}.osl-rg-excel-filter__list::-webkit-scrollbar-thumb:hover{background:#9ca3af}.osl-rg-excel-filter__item{display:flex;align-items:center;gap:8px;padding:5px 4px;font-size:12.5px;color:#374151;cursor:pointer;border-radius:5px;transition:background .1s}.osl-rg-excel-filter__item:hover{background:#f3f4f6}.osl-rg-excel-filter__item--all{font-weight:600;color:#1f2937;padding:6px 4px}.osl-rg-excel-filter__item-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.osl-rg-excel-filter__footer{display:flex;gap:6px;padding:8px 10px;border-top:1px solid #f3f4f6;background:#f9fafb}.osl-rg-excel-filter__apply{flex:1;height:30px;border:none;border-radius:6px;font-size:12px;font-family:inherit;font-weight:600;cursor:pointer;background:var(--osl-primary, #2563eb);color:#fff;transition:background .12s}.osl-rg-excel-filter__apply:hover{background:#1d4ed8}.osl-rg-excel-filter__cancel{height:30px;padding:0 14px;border:1px solid #e5e7eb;border-radius:6px;font-size:12px;font-family:inherit;font-weight:500;cursor:pointer;background:#fff;color:#6b7280;transition:all .12s}.osl-rg-excel-filter__cancel:hover{background:#f3f4f6;border-color:#9ca3af}.osl-rg-th--checkbox,.osl-rg-td--checkbox{display:flex;align-items:center;justify-content:center;width:36px;min-width:36px;flex-shrink:0;border-right:1px solid #dde5ff}.osl-rg-checkbox{width:14px;height:14px;cursor:pointer;accent-color:var(--osl-primary, #2563eb);flex-shrink:0}.osl-rg-body{overflow-x:auto;overflow-y:auto;flex-shrink:0}.osl-rg-body::-webkit-scrollbar{width:8px;height:8px}.osl-rg-body::-webkit-scrollbar-track{background:#f9fafb}.osl-rg-body::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:4px}.osl-rg-body::-webkit-scrollbar-thumb:hover{background:#9ca3af}.osl-rg-body::-webkit-scrollbar-corner{background:#f9fafb}.osl-rg-inner{display:block}.osl-rg-row{display:flex;align-items:stretch;border-bottom:1px solid #f3f4f6;transition:background .08s;cursor:default}.osl-rg-row:hover{background:#f0f5ff!important}.osl-rg-row--striped{background:#fafbff}.osl-rg-row--selected{background:#eff6ff!important;border-bottom-color:#dbeafe}.osl-rg-row--skeleton{pointer-events:none}.osl-rg-td{display:flex;align-items:center;padding:0 12px;border-right:1px solid #f0f2f7;overflow:hidden;background:inherit;flex-shrink:0}.osl-rg-td:last-child{border-right:none}.osl-rg-td--pinned{background:#fff;border-right:1px solid #e0e7ff;z-index:2}.osl-rg-td--pinned:after{content:\"\";position:absolute;right:-5px;top:0;bottom:0;width:5px;background:linear-gradient(to right,rgba(37,99,235,.07),transparent);pointer-events:none}.osl-rg-cell-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;width:100%;font-size:13px;color:#1f2937;line-height:1.4}.rg-profit-pos .osl-rg-cell-text{color:#15803d;font-weight:600}.rg-profit-neg .osl-rg-cell-text{color:#dc2626;font-weight:600}.rg-status-delivered .osl-rg-cell-text{color:#15803d;font-weight:600}.rg-status-shipped .osl-rg-cell-text{color:#2563eb;font-weight:600}.rg-status-processing .osl-rg-cell-text{color:#d97706;font-weight:600}.rg-status-pending .osl-rg-cell-text{color:#6b7280;font-weight:500}.rg-status-cancelled .osl-rg-cell-text{color:#dc2626;font-weight:500;text-decoration:line-through;opacity:.75}.osl-rg-group-row{display:flex;align-items:center;gap:7px;border-bottom:1px solid #e5e7eb;font-weight:600;cursor:pointer;flex-shrink:0;transition:filter .1s}.osl-rg-group-row--l0{background:linear-gradient(135deg,#eff6ff,#dbeafe);color:#1e40af;border-left:4px solid #3b82f6}.osl-rg-group-row--l1{background:linear-gradient(135deg,#f5f3ff,#ede9fe);color:#5b21b6;border-left:4px solid #8b5cf6}.osl-rg-group-row--l2{background:linear-gradient(135deg,#fff7ed,#fef3c7);color:#92400e;border-left:4px solid #f59e0b}.osl-rg-group-row:hover{filter:brightness(.97)}.osl-rg-group-row__key{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;opacity:.65;flex-shrink:0}.osl-rg-group-row__value{font-size:13px;font-weight:700;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.osl-rg-group-row__count{font-size:11px;font-weight:600;padding:2px 9px;border-radius:12px;background:#00000017;margin-right:12px;flex-shrink:0}.osl-rg-group-chevron{width:16px;height:16px;flex-shrink:0;opacity:.75;display:block}.osl-rg-aggregate-row{display:flex;align-items:center;border-top:2px solid #e5e7eb;background:linear-gradient(135deg,#f0fdf4,#f9fafb);flex-shrink:0;min-height:38px}.osl-rg-agg-cell{display:flex;align-items:center;gap:5px;padding:0 12px;border-right:1px solid #e5e7eb;height:38px;flex-shrink:0;overflow:hidden}.osl-rg-agg-cell--checkbox{width:36px;min-width:36px}.osl-rg-agg-label{font-size:9.5px;font-weight:800;color:#9ca3af;text-transform:uppercase;letter-spacing:.06em;flex-shrink:0;background:#e5e7eb;padding:1px 4px;border-radius:3px}.osl-rg-agg-value{font-size:12px;font-weight:700;color:#15803d;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.osl-rg-skel{height:12px;border-radius:4px;background:linear-gradient(90deg,#e5e7eb 25%,#f3f4f6,#e5e7eb 75%);background-size:200% 100%;animation:rg-pulse 1.5s ease-in-out infinite}.osl-rg-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:64px 20px;color:#9ca3af;text-align:center}.osl-rg-empty__icon{margin-bottom:18px;opacity:.7}.osl-rg-empty__title{font-size:15px;font-weight:600;color:#374151;margin:0 0 6px}.osl-rg-empty__sub{font-size:13px;color:#9ca3af;margin:0 0 18px;max-width:290px;line-height:1.5}.osl-rg-empty__action{height:34px;padding:0 18px;background:var(--osl-primary, #2563eb);color:#fff;border:none;border-radius:7px;font-size:13px;font-family:inherit;font-weight:600;cursor:pointer;transition:background .15s;box-shadow:0 2px 6px #2563eb4d}.osl-rg-empty__action:hover{background:#1d4ed8}.osl-rg-pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 14px;border-top:1px solid var(--osl-border-color, #e5e7eb);background:linear-gradient(135deg,#f8faff,#f3f4f6);flex-shrink:0;flex-wrap:wrap}.osl-rg-pagination__info{font-size:12px;color:#6b7280;min-width:160px;white-space:nowrap}.osl-rg-pagination__info strong{color:#1f2937;font-weight:600}.osl-rg-pagination__controls{display:flex;align-items:center;gap:3px}.osl-rg-pagination__size{display:flex;align-items:center;gap:7px;min-width:120px;justify-content:flex-end}.osl-rg-pagination__size-label{font-size:11.5px;color:#9ca3af;white-space:nowrap}.osl-rg-page-btn{display:inline-flex;align-items:center;justify-content:center;gap:3px;height:30px;padding:0 8px;border:1px solid var(--osl-border-color, #e5e7eb);border-radius:6px;background:#fff;color:#374151;font-size:12px;font-family:inherit;font-weight:500;cursor:pointer;transition:all .12s;white-space:nowrap}.osl-rg-page-btn svg{display:block}.osl-rg-page-btn:hover:not(:disabled){background:#f3f4f6;border-color:#9ca3af;box-shadow:0 1px 2px #0000000f}.osl-rg-page-btn:disabled{opacity:.35;cursor:not-allowed}.osl-rg-page-btn--num{min-width:30px;padding:0;font-size:12.5px}.osl-rg-page-btn--active{background:var(--osl-primary, #2563eb);border-color:var(--osl-primary, #2563eb);color:#fff;font-weight:700;box-shadow:0 2px 5px #2563eb59}.osl-rg-page-btn--active:hover:not(:disabled){background:#1d4ed8;border-color:#1d4ed8}.osl-rg-page-ellipsis{display:inline-flex;align-items:center;justify-content:center;width:26px;color:#9ca3af;font-size:13px;pointer-events:none}.osl-rg-page-size{height:30px;padding:0 8px;border:1px solid var(--osl-border-color, #e5e7eb);border-radius:6px;background:#fff;font-size:12px;font-family:inherit;color:#374151;cursor:pointer;outline:none;transition:border-color .15s}.osl-rg-page-size:focus{border-color:var(--osl-primary, #2563eb)}.osl-rg-col-menu{position:fixed;z-index:9999;min-width:210px;background:#fff;border:1px solid #e5e7eb;border-radius:11px;box-shadow:0 12px 36px #00000029,0 3px 10px #00000014;overflow:hidden;animation:rg-fade-up .13s cubic-bezier(.16,1,.3,1)}.osl-rg-col-menu__header{padding:9px 14px 7px;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#9ca3af;border-bottom:1px solid #f3f4f6;background:#fafbff}.osl-rg-col-menu__divider{height:1px;background:#f3f4f6;margin:2px 0}.osl-rg-col-menu__item{display:flex;align-items:center;gap:9px;width:100%;padding:9px 14px;background:transparent;border:none;border-left:3px solid transparent;border-bottom:none;text-align:left;font-size:13px;font-weight:500;font-family:inherit;color:#374151;cursor:pointer;transition:all .1s}.osl-rg-col-menu__item svg{color:#9ca3af;display:block}.osl-rg-col-menu__item:hover{background:#f0f4ff;color:var(--osl-primary, #2563eb);border-left-color:var(--osl-primary, #2563eb)}.osl-rg-col-menu__item:hover svg{color:var(--osl-primary, #2563eb)}.osl-rg-col-menu__item--danger:hover{background:#fff5f5;color:#dc2626;border-left-color:#dc2626}.osl-rg-col-menu__item--danger:hover svg{color:#dc2626}.osl-rg-config-backdrop{position:fixed;inset:0;z-index:9000;background:#0003;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}.osl-rg-config-panel{position:fixed;top:0;right:0;bottom:0;z-index:9001;width:300px;background:#fff;border-left:1px solid #e5e7eb;box-shadow:-6px 0 24px #00000021;display:flex;flex-direction:column;animation:rg-slide-in .2s cubic-bezier(.16,1,.3,1)}.osl-rg-config-panel__header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid #e5e7eb;background:linear-gradient(135deg,#f0f4ff,#e8efff);flex-shrink:0}.osl-rg-config-panel__title{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:#1e3a6e}.osl-rg-config-panel__title svg{color:#3b82f6}.osl-rg-config-panel__close{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border:none;background:transparent;color:#9ca3af;cursor:pointer;border-radius:7px;padding:0;transition:all .12s}.osl-rg-config-panel__close svg{width:16px;height:16px;display:block}.osl-rg-config-panel__close:hover{background:#00000012;color:#374151}.osl-rg-config-panel__actions{display:flex;gap:8px;padding:10px 14px;border-bottom:1px solid #f3f4f6;flex-shrink:0;background:#fafbff}.osl-rg-config-hint{padding:6px 16px;font-size:10.5px;color:#b0b7c3;font-style:italic;border-bottom:1px solid #f3f4f6;flex-shrink:0}.osl-rg-config-action{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 10px;border:1px solid #e5e7eb;border-radius:6px;background:#fff;color:#374151;font-size:12px;font-family:inherit;font-weight:500;cursor:pointer;transition:all .12s}.osl-rg-config-action svg{display:block}.osl-rg-config-action:hover{background:#f3f4f6;border-color:#9ca3af}.osl-rg-config-list{flex:1;overflow-y:auto;padding:6px 0}.osl-rg-config-list::-webkit-scrollbar{width:5px}.osl-rg-config-list::-webkit-scrollbar-thumb{background:#e5e7eb;border-radius:4px}.osl-rg-config-list::-webkit-scrollbar-thumb:hover{background:#d1d5db}.osl-rg-config-item{display:flex;align-items:center;gap:9px;padding:7px 14px;transition:background .1s;cursor:grab}.osl-rg-config-item:hover{background:#f9fafb}.osl-rg-config-item:active{cursor:grabbing}.osl-rg-config-item--hidden{opacity:.5}.osl-rg-config-item__label{flex:1;font-size:13px;color:#374151;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}.osl-rg-config-item__label--hidden{color:#9ca3af;font-style:italic}.osl-rg-config-item__pin-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid #e5e7eb;background:#fff;color:#d1d5db;cursor:pointer;padding:0;border-radius:5px;transition:all .12s;flex-shrink:0}.osl-rg-config-item__pin-btn svg{display:block}.osl-rg-config-item__pin-btn:hover,.osl-rg-config-item__pin-btn--active{background:#eff6ff;border-color:#93c5fd;color:var(--osl-primary, #2563eb)}.osl-rg-copy-toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%);z-index:99999;display:flex;align-items:center;gap:7px;background:#1f2937;color:#fff;font-size:12.5px;font-weight:500;padding:8px 18px;border-radius:22px;animation:rg-fade-up .2s ease;box-shadow:0 6px 16px #0000004d;pointer-events:none;white-space:nowrap;font-family:inherit}.osl-rg-copy-toast svg{flex-shrink:0;color:#4ade80}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.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.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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: "directive", type: i3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i3.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "pipe", type: i1$2.DecimalPipe, name: "number" }, { kind: "pipe", type: i1$2.UpperCasePipe, name: "uppercase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: OslReportGrid, isStandalone: false, selector: "osl-report-grid", inputs: { columns: "columns", datasource: "datasource", loading: "loading", totalRecords: "totalRecords", autoMode: "autoMode", isPaginated: "isPaginated", pageSize: "pageSize", tableHeight: "tableHeight", striped: "striped", exportable: "exportable", rowHeight: "rowHeight", rowSelection: "rowSelection", showAggregates: "showAggregates", title: "title", pdfExportFromGrid: "pdfExportFromGrid", pdfConfig: "pdfConfig" }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange", sortChange: "sortChange", rowClick: "rowClick", selectionChange: "selectionChange" }, host: { listeners: { "document:mousemove": "onMouseMove($event)", "document:mouseup": "onMouseUp()", "document:click": "onDocumentClick()" } }, providers: [DatePipe, DecimalPipe], viewQueries: [{ propertyName: "headerScrollRef", first: true, predicate: ["headerScrollRef"], descendants: true }, { propertyName: "bodyScrollRef", first: true, predicate: ["bodyScrollRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"osl-rg\" (click)=\"closeColumnMenu(); openFilterKey = null; $event.stopPropagation()\">\n\n  <!-- \u2550\u2550 TOOLBAR \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <div class=\"osl-rg-toolbar\">\n    <div class=\"osl-rg-toolbar__left\">\n      @if (title) { <span class=\"osl-rg-title\">{{ title }}</span> }\n      @if (!loading) {\n        @if (_filteredTotal !== datasource.length) {\n          <span class=\"osl-rg-filter-badge\">\n            <span class=\"osl-rg-filter-badge__dot\"></span>\n            {{ _filteredTotal | number }} of {{ datasource.length | number }} rows\n          </span>\n        } @else {\n          <span class=\"osl-rg-record-count\">{{ datasource.length | number }} rows</span>\n        }\n      }\n    </div>\n    <div class=\"osl-rg-toolbar__right\">\n\n      <!-- Global search -->\n      <div class=\"osl-rg-global-search\">\n        <svg class=\"osl-rg-global-search__icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.35-4.35\"/>\n        </svg>\n        <input class=\"osl-rg-global-search__input\" placeholder=\"Search all columns\u2026\"\n               [(ngModel)]=\"globalSearch\" (ngModelChange)=\"currentPage=1; processData()\" />\n        @if (globalSearch) {\n          <button class=\"osl-rg-global-search__clear\" (click)=\"globalSearch=''; processData()\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"><path d=\"M18 6 6 18M6 6l12 12\"/></svg>\n          </button>\n        }\n      </div>\n\n      <!-- Sort active badge -->\n      @if (sortStates.size > 0) {\n        <button class=\"osl-rg-toolbar-btn osl-rg-toolbar-btn--active\" (click)=\"clearSort()\" title=\"Clear sort\">\n          <svg class=\"rg-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path d=\"M11 5H4M11 9H4M11 13H4M18 4v16M15 7l3-3 3 3M15 17l3 3 3-3\"/>\n          </svg>\n          <span>{{ sortStates.size }} sort{{ sortStates.size > 1 ? 's' : '' }}</span>\n          <svg class=\"rg-icon rg-icon--xs\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"><path d=\"M18 6 6 18M6 6l12 12\"/></svg>\n        </button>\n      }\n\n      <!-- Filter active badge -->\n      @if (hasAnyFilter) {\n        <button class=\"osl-rg-toolbar-btn osl-rg-toolbar-btn--danger\" (click)=\"clearAllFilters()\" title=\"Clear all filters\">\n          <svg class=\"rg-icon\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M22 3H2l8 9.46V19l4 2V12.46z\"/></svg>\n          <span>Filtered</span>\n          <svg class=\"rg-icon rg-icon--xs\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"><path d=\"M18 6 6 18M6 6l12 12\"/></svg>\n        </button>\n      }\n\n      <!-- Group toggle -->\n      <button class=\"osl-rg-toolbar-btn\" [class.osl-rg-toolbar-btn--on]=\"showGroupPanel\"\n              (click)=\"showGroupPanel=!showGroupPanel\" title=\"Group panel\">\n        <svg class=\"rg-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <rect x=\"2\" y=\"7\" width=\"20\" height=\"14\" rx=\"2\"/><path d=\"M16 3H8a2 2 0 0 0-2 2v2h12V5a2 2 0 0 0-2-2z\"/>\n        </svg>\n        <span>Group</span>\n      </button>\n\n      <!-- Expand / collapse when grouped -->\n      @if (activeGroups.length > 0) {\n        <button class=\"osl-rg-toolbar-btn\" (click)=\"expandAll()\" title=\"Expand all\">\n          <svg class=\"rg-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m7 20 5-5 5 5M7 4l5 5 5-5\"/></svg>\n        </button>\n        <button class=\"osl-rg-toolbar-btn\" (click)=\"collapseAll()\" title=\"Collapse all\">\n          <svg class=\"rg-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m7 15 5-5 5 5M7 9l5 5 5 5\"/></svg>\n        </button>\n      }\n\n      <!-- Auto-size all -->\n      <button class=\"osl-rg-toolbar-btn\" (click)=\"autoSizeAll()\" title=\"Auto-size all columns\">\n        <svg class=\"rg-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <path d=\"M21 6H3M21 18H3\"/><path d=\"M8 3 3 6l5 3M16 3l5 3-5 3M8 15l-5 3 5 3M16 15l5 3-5 3\"/>\n        </svg>\n        <span>Auto-size</span>\n      </button>\n\n      <!-- Column config -->\n      <button class=\"osl-rg-toolbar-btn\" [class.osl-rg-toolbar-btn--on]=\"showColumnConfig\"\n              (click)=\"showColumnConfig=!showColumnConfig; $event.stopPropagation()\" title=\"Column settings\">\n        <svg class=\"rg-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <path d=\"M4 6h16M4 12h16M4 18h16\"/>\n          <circle cx=\"8\"  cy=\"6\"  r=\"2\" fill=\"white\" stroke=\"currentColor\" stroke-width=\"2\"/>\n          <circle cx=\"16\" cy=\"12\" r=\"2\" fill=\"white\" stroke=\"currentColor\" stroke-width=\"2\"/>\n          <circle cx=\"8\"  cy=\"18\" r=\"2\" fill=\"white\" stroke=\"currentColor\" stroke-width=\"2\"/>\n        </svg>\n        <span>Columns</span>\n      </button>\n\n      <!-- Export Excel -->\n      @if (exportable) {\n        <button class=\"osl-rg-toolbar-btn osl-rg-toolbar-btn--excel\" (click)=\"exportExcel()\" title=\"Export to Excel\">\n          <svg class=\"rg-icon rg-icon--excel\" viewBox=\"0 0 24 24\">\n            <rect width=\"24\" height=\"24\" rx=\"3\" fill=\"#1D6F42\"/>\n            <path d=\"M13.5 3H7a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V7.5L13.5 3z\" fill=\"#fff\" opacity=\".15\"/>\n            <path d=\"M13.5 3v4.5H18L13.5 3z\" fill=\"#fff\" opacity=\".3\"/>\n            <path d=\"M8 9.5l2.3 3.5L8 16.5h1.6l1.4-2.3 1.4 2.3H14l-2.3-3.5 2.3-3.5h-1.6l-1.4 2.3-1.4-2.3H8z\" fill=\"#fff\"/>\n          </svg>\n          <span>Export Excel</span>\n        </button>\n      }\n\n      <!-- Export PDF -->\n      @if (exportable && pdfExportFromGrid) {\n        <button class=\"osl-rg-toolbar-btn osl-rg-toolbar-btn--pdf\" (click)=\"exportPdf()\" title=\"Export to PDF\">\n          <svg class=\"rg-icon rg-icon--pdf\" viewBox=\"0 0 24 24\">\n            <rect width=\"24\" height=\"24\" rx=\"3\" fill=\"#D32F2F\"/>\n            <path d=\"M13.5 3H7a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V7.5L13.5 3z\" fill=\"#fff\" opacity=\".15\"/>\n            <path d=\"M13.5 3v4.5H18L13.5 3z\" fill=\"#fff\" opacity=\".3\"/>\n            <text x=\"4.5\" y=\"17.5\" fill=\"#fff\" font-size=\"6.5\" font-family=\"sans-serif\" font-weight=\"700\">PDF</text>\n          </svg>\n          <span>Export PDF</span>\n        </button>\n      }\n    </div>\n  </div>\n\n  <!-- \u2550\u2550 GROUP PANEL \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  @if (showGroupPanel) {\n    <div class=\"osl-rg-group-panel\">\n      <span class=\"osl-rg-group-panel__label\">Group by:</span>\n      @if (activeGroups.length === 0) {\n        <span class=\"osl-rg-group-panel__hint\">Use the \u22EE column menu \u2192 \"Group by this\"</span>\n      }\n      <div class=\"osl-rg-group-chips\" cdkDropList cdkDropListOrientation=\"horizontal\"\n           [cdkDropListData]=\"activeGroups\" (cdkDropListDropped)=\"onGroupPanelDrop($event)\">\n        @for (key of activeGroups; track key) {\n          <div class=\"osl-rg-group-chip\" cdkDrag>\n            <svg cdkDragHandle class=\"rg-drag-handle\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n              <circle cx=\"9\" cy=\"5\" r=\"1.5\"/><circle cx=\"15\" cy=\"5\" r=\"1.5\"/>\n              <circle cx=\"9\" cy=\"12\" r=\"1.5\"/><circle cx=\"15\" cy=\"12\" r=\"1.5\"/>\n              <circle cx=\"9\" cy=\"19\" r=\"1.5\"/><circle cx=\"15\" cy=\"19\" r=\"1.5\"/>\n            </svg>\n            <span>{{ getGroupColLabel(key) }}</span>\n            <button class=\"osl-rg-group-chip__remove\" (click)=\"removeGroup(key)\">\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"><path d=\"M18 6 6 18M6 6l12 12\"/></svg>\n            </button>\n          </div>\n        }\n      </div>\n      @if (activeGroups.length > 0) {\n        <button class=\"osl-rg-group-panel__clear\" (click)=\"clearGroups()\">Clear groups</button>\n      }\n    </div>\n  }\n\n  <!-- \u2550\u2550 STICKY HEADER \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <div class=\"osl-rg-header-wrap\" #headerScrollRef>\n\n    <!-- Double header \u2013 group row (only rendered when headerGroup is used on any column) -->\n    @if (hasHeaderGroups) {\n      <div class=\"osl-rg-header-row osl-rg-header-row--groups\" [style.minWidth.px]=\"totalWidth\">\n        @if (rowSelection === 'multiple') {\n          <div class=\"osl-rg-th osl-rg-th--checkbox osl-rg-th--group-span\"></div>\n        }\n        <div style=\"display:flex;flex:1;min-width:0;\">\n          @for (group of computedHeaderGroups; track $index) {\n            <div class=\"osl-rg-th osl-rg-th--group-span\"\n                 [class.osl-rg-th--group-span--labeled]=\"!!group.label\"\n                 [class.osl-rg-th--pinned]=\"group.isPinned\"\n                 [style.width.px]=\"group.width\"\n                 [style.minWidth.px]=\"group.width\"\n                 [style.left.px]=\"group.isPinned ? group.stickyLeft : null\"\n                 [style.position]=\"group.isPinned ? 'sticky' : 'relative'\"\n                 [style.zIndex]=\"group.isPinned ? 3 : 1\">\n              @if (group.label) {\n                <span class=\"osl-rg-th-group-label\">{{ group.label }}</span>\n              }\n            </div>\n          }\n        </div>\n      </div>\n    }\n\n    <div class=\"osl-rg-header-row\" [style.minWidth.px]=\"totalWidth\">\n\n      <!-- Select-all checkbox -->\n      @if (rowSelection === 'multiple') {\n        <div class=\"osl-rg-th osl-rg-th--checkbox\">\n          <input type=\"checkbox\" class=\"osl-rg-checkbox\"\n                 [checked]=\"allSelected\" [indeterminate]=\"someSelected\"\n                 (change)=\"toggleSelectAll($any($event.target).checked)\" />\n        </div>\n      }\n\n      <!-- Column headers (drag-to-reorder) -->\n      <div class=\"osl-rg-header-cols\" cdkDropList cdkDropListOrientation=\"horizontal\"\n           [cdkDropListData]=\"_cols\" (cdkDropListDropped)=\"onColumnReorder($event)\"\n           style=\"display:flex;flex:1;min-width:0;\">\n\n        @for (col of visibleCols; track col.key) {\n          <div class=\"osl-rg-th\"\n               [class.osl-rg-th--pinned]=\"col._pinned\"\n               [class.osl-rg-th--sorted]=\"getSortState(col.key)\"\n               [class.osl-rg-th--filtered]=\"hasActiveFilter(col.key)\"\n               [style.width.px]=\"col._width\"\n               [style.minWidth.px]=\"col._width\"\n               [style.left.px]=\"col._pinned ? col._stickyLeft : null\"\n               [style.position]=\"col._pinned ? 'sticky' : 'relative'\"\n               [style.zIndex]=\"col._pinned ? 3 : 1\"\n               cdkDrag [cdkDragDisabled]=\"col._pinned\"\n               (cdkDragStarted)=\"onColumnDragStarted()\"\n               (cdkDragEnded)=\"onColumnDragEnded()\"\n               (click)=\"onHeaderClick(col, $event)\">\n\n            <div *cdkDragPlaceholder class=\"osl-rg-th-drag-placeholder\"></div>\n\n            <!-- Pin badge -->\n            @if (col._pinned) {\n              <span class=\"osl-rg-th-pin-badge\" title=\"Pinned\">\n                <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"9\" height=\"9\"><path d=\"M16 12V4h1V2H7v2h1v8l-2 2v2h5.2v6h1.6v-6H18v-2l-2-2z\"/></svg>\n              </span>\n            }\n\n            <!-- Label row -->\n            <div class=\"osl-rg-th-content\">\n              <span class=\"osl-rg-th-label\" [title]=\"col.label\">{{ col.label }}</span>\n              <div class=\"osl-rg-th-actions\">\n\n                <!-- Sort indicator -->\n                @if (col.sortable) {\n                  <span class=\"osl-rg-sort-icon\"\n                        [class.osl-rg-sort-icon--asc]=\"getSortState(col.key)?.asc === true\"\n                        [class.osl-rg-sort-icon--desc]=\"getSortState(col.key)?.asc === false\">\n                    @if (getSortState(col.key); as s) {\n                      @if (s.asc) {\n                        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 19V5m-7 7 7-7 7 7\"/></svg>\n                      } @else {\n                        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 5v14m7-7-7 7-7-7\"/></svg>\n                      }\n                      @if (sortStates.size > 1) { <sup class=\"osl-rg-sort-badge\">{{ s.index + 1 }}</sup> }\n                    } @else {\n                      <svg class=\"osl-rg-sort-idle\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M8 9l4-4 4 4M16 15l-4 4-4-4\"/></svg>\n                    }\n                  </span>\n                }\n\n                <!-- Excel filter button -->\n                @if (col.filterable) {\n                  <button class=\"osl-rg-filter-btn\" [class.osl-rg-filter-btn--active]=\"hasActiveFilter(col.key)\"\n                          (click)=\"openExcelFilter(col.key, $event)\" title=\"Filter\">\n                    @if (hasActiveFilter(col.key)) {\n                      <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M22 3H2l8 9.46V19l4 2V12.46z\"/></svg>\n                    } @else {\n                      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polygon points=\"22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3\"/></svg>\n                    }\n                  </button>\n                }\n\n                <!-- Column menu -->\n                <button class=\"osl-rg-col-menu-btn\" (click)=\"openColumnMenu(col.key, $event)\" title=\"Column options\">\n                  <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><circle cx=\"12\" cy=\"5\" r=\"2\"/><circle cx=\"12\" cy=\"12\" r=\"2\"/><circle cx=\"12\" cy=\"19\" r=\"2\"/></svg>\n                </button>\n\n              </div>\n            </div>\n\n            <!-- Per-column search -->\n            @if (col.searchable) {\n              <div class=\"osl-rg-col-search\" (click)=\"$event.stopPropagation()\">\n                <svg class=\"osl-rg-col-search__icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                  <circle cx=\"11\" cy=\"11\" r=\"7\"/><path d=\"m18 18-3.5-3.5\"/>\n                </svg>\n                <input class=\"osl-rg-col-search__input\" [placeholder]=\"col.label + '\u2026'\"\n                       [ngModel]=\"columnSearch[col.key]\" (ngModelChange)=\"onColumnSearch(col.key, $event)\" />\n                @if (columnSearch[col.key]) {\n                  <button class=\"osl-rg-col-search__clear\" (click)=\"columnSearch[col.key]=''; processData()\">\n                    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"><path d=\"M18 6 6 18M6 6l12 12\"/></svg>\n                  </button>\n                }\n              </div>\n            }\n\n            <!-- Resize handle -->\n            @if (col.resizable) {\n              <div class=\"osl-rg-resize-handle\" (mousedown)=\"startResize(col, $event)\" (dblclick)=\"autoSizeColumn(col, $event)\" (click)=\"$event.stopPropagation()\"></div>\n            }\n\n\n          </div><!-- /osl-rg-th -->\n        }\n\n      </div><!-- /header-cols -->\n    </div><!-- /header-row -->\n  </div><!-- /header-wrap -->\n\n  <!-- \u2550\u2550 SCROLLABLE BODY \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <div class=\"osl-rg-body\" [style.height]=\"tableHeight\" #bodyScrollRef (scroll)=\"onBodyScroll($event)\">\n    <div class=\"osl-rg-inner\" [style.minWidth.px]=\"totalWidth\">\n\n      <!-- Skeleton loading -->\n      @if (loading) {\n        @for (sk of skeletonRows; track $index) {\n          <div class=\"osl-rg-row osl-rg-row--skeleton\" [style.height.px]=\"rowHeight\">\n            @if (rowSelection === 'multiple') {\n              <div class=\"osl-rg-td osl-rg-td--checkbox\"><div class=\"osl-rg-skel\" style=\"width:14px;height:14px;border-radius:3px;\"></div></div>\n            }\n            @for (col of visibleCols; track col.key) {\n              <div class=\"osl-rg-td\" [style.width.px]=\"col._width\" [style.minWidth.px]=\"col._width\">\n                <div class=\"osl-rg-skel\" [style.width]=\"$index % 3 === 0 ? '55%' : $index % 3 === 1 ? '80%' : '65%'\"></div>\n              </div>\n            }\n          </div>\n        }\n\n      } @else if (isEmpty) {\n        <!-- Empty state -->\n        <div class=\"osl-rg-empty\">\n          <div class=\"osl-rg-empty__icon\">\n            <svg viewBox=\"0 0 48 48\" fill=\"none\" stroke=\"#d1d5db\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <rect x=\"6\" y=\"6\" width=\"36\" height=\"36\" rx=\"4\"/>\n              <path d=\"M6 18h36M6 30h36M18 6v36\"/>\n            </svg>\n          </div>\n          <p class=\"osl-rg-empty__title\">No records found</p>\n          <p class=\"osl-rg-empty__sub\">\n            @if (hasAnyFilter) { Try adjusting your filters or search terms }\n            @else { No data to display }\n          </p>\n          @if (hasAnyFilter) {\n            <button class=\"osl-rg-empty__action\" (click)=\"clearAllFilters()\">Clear all filters</button>\n          }\n        </div>\n\n      } @else {\n        <!-- Data rows -->\n        @for (row of flatRows; track trackByRow($index, row)) {\n\n          @if (row._type === 'group') {\n            <div class=\"osl-rg-group-row\"\n                 [class.osl-rg-group-row--l0]=\"asGroupRow(row)._level === 0\"\n                 [class.osl-rg-group-row--l1]=\"asGroupRow(row)._level === 1\"\n                 [class.osl-rg-group-row--l2]=\"asGroupRow(row)._level >= 2\"\n                 [style.height.px]=\"rowHeight\"\n                 [style.paddingLeft.px]=\"asGroupRow(row)._level * 20 + 12\"\n                 (click)=\"toggleGroup(asGroupRow(row)._path)\">\n              @if (asGroupRow(row)._expanded) {\n                <svg class=\"osl-rg-group-chevron\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"/></svg>\n              } @else {\n                <svg class=\"osl-rg-group-chevron\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"/></svg>\n              }\n              <span class=\"osl-rg-group-row__key\">{{ asGroupRow(row)._colLabel }}:</span>\n              <span class=\"osl-rg-group-row__value\">{{ asGroupRow(row)._label }}</span>\n              <span class=\"osl-rg-group-row__count\">{{ asGroupRow(row)._count | number }} rows</span>\n            </div>\n\n          } @else {\n            <div class=\"osl-rg-row\"\n                 [class.osl-rg-row--striped]=\"striped && asDataRow(row)._rowIndex % 2 === 1\"\n                 [class.osl-rg-row--selected]=\"selectedRows.has(asDataRow(row)._data)\"\n                 [style.height.px]=\"rowHeight\"\n                 (click)=\"onRowClick(asDataRow(row)._data, $event)\">\n\n              @if (rowSelection === 'multiple') {\n                <div class=\"osl-rg-td osl-rg-td--checkbox\">\n                  <input type=\"checkbox\" class=\"osl-rg-checkbox\"\n                         [checked]=\"selectedRows.has(asDataRow(row)._data)\"\n                         (change)=\"toggleRowSelect(asDataRow(row)._data, $event)\" />\n                </div>\n              }\n\n              @for (col of visibleCols; track col.key) {\n                <div class=\"osl-rg-td\"\n                     [class.osl-rg-td--pinned]=\"col._pinned\"\n                     [ngClass]=\"getCellClass(asDataRow(row)._data, col)\"\n                     [style.width.px]=\"col._width\"\n                     [style.minWidth.px]=\"col._width\"\n                     [style.left.px]=\"col._pinned ? col._stickyLeft : null\"\n                     [style.position]=\"col._pinned ? 'sticky' : 'relative'\"\n                     [style.zIndex]=\"col._pinned ? 2 : 0\"\n                     [style.textAlign]=\"col.align ?? 'left'\"\n                     (dblclick)=\"copyCell(getCellDisplay(asDataRow(row)._data, col), $event)\"\n                     [title]=\"getCellDisplay(asDataRow(row)._data, col)\">\n                  <span class=\"osl-rg-cell-text\">{{ getCellDisplay(asDataRow(row)._data, col) }}</span>\n                </div>\n              }\n\n            </div>\n          }\n\n        }\n      }\n\n    </div><!-- /osl-rg-inner -->\n  </div><!-- /osl-rg-body -->\n\n  <!-- \u2550\u2550 AGGREGATE FOOTER \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  @if (showAggregates && hasAnyAggregate() && !loading) {\n    <div class=\"osl-rg-aggregate-row\" [style.minWidth.px]=\"totalWidth\">\n      @if (rowSelection === 'multiple') { <div class=\"osl-rg-agg-cell osl-rg-agg-cell--checkbox\"></div> }\n      @for (col of visibleCols; track col.key) {\n        <div class=\"osl-rg-agg-cell\" [style.width.px]=\"col._width\" [style.minWidth.px]=\"col._width\" [style.textAlign]=\"col.align ?? 'left'\">\n          @if (col.aggregate) {\n            <span class=\"osl-rg-agg-label\">{{ col.aggregate | uppercase }}</span>\n            <span class=\"osl-rg-agg-value\">{{ getAggregate(col) }}</span>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  <!-- \u2550\u2550 PAGINATION \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  @if (isPaginated) {\n    <div class=\"osl-rg-pagination\">\n      <span class=\"osl-rg-pagination__info\">\n        @if (loading) { Loading\u2026 }\n        @else if (_total > 0) { Showing <strong>{{ startRecord | number }}\u2013{{ endRecord | number }}</strong> of <strong>{{ _total | number }}</strong> records }\n        @else { No records }\n      </span>\n      <div class=\"osl-rg-pagination__controls\">\n        <button class=\"osl-rg-page-btn osl-rg-page-btn--nav\" (click)=\"goToPage(1)\" [disabled]=\"currentPage===1||loading\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"13\" height=\"13\"><path d=\"m11 17-5-5 5-5M18 17l-5-5 5-5\"/></svg>\n        </button>\n        <button class=\"osl-rg-page-btn osl-rg-page-btn--nav\" (click)=\"goToPage(currentPage-1)\" [disabled]=\"currentPage===1||loading\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"13\" height=\"13\"><path d=\"m15 18-6-6 6-6\"/></svg>\n          Prev\n        </button>\n        @for (page of pageNumbers; track $index) {\n          @if (page === -1) { <span class=\"osl-rg-page-ellipsis\">\u2026</span> }\n          @else {\n            <button class=\"osl-rg-page-btn osl-rg-page-btn--num\" [class.osl-rg-page-btn--active]=\"page===currentPage\"\n                    [disabled]=\"loading\" (click)=\"goToPage(page)\">{{ page }}</button>\n          }\n        }\n        <button class=\"osl-rg-page-btn osl-rg-page-btn--nav\" (click)=\"goToPage(currentPage+1)\" [disabled]=\"currentPage===totalPages||loading\">\n          Next\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"13\" height=\"13\"><path d=\"m9 18 6-6-6-6\"/></svg>\n        </button>\n        <button class=\"osl-rg-page-btn osl-rg-page-btn--nav\" (click)=\"goToPage(totalPages)\" [disabled]=\"currentPage===totalPages||loading\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"13\" height=\"13\"><path d=\"m13 17 5-5-5-5M6 17l5-5-5-5\"/></svg>\n        </button>\n      </div>\n      <div class=\"osl-rg-pagination__size\">\n        <span class=\"osl-rg-pagination__size-label\">Rows per page</span>\n        <select class=\"osl-rg-page-size\" [ngModel]=\"pageSize\" (ngModelChange)=\"onPageSizeChange($event)\" [disabled]=\"loading\">\n          @for (opt of pageSizeOptions; track opt) { <option [value]=\"opt\">{{ opt }}</option> }\n        </select>\n      </div>\n    </div>\n  }\n\n</div><!-- /osl-rg -->\n\n\n<!-- \u2550\u2550 EXCEL FILTER DROPDOWN (fixed, outside overflow containers) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n@if (openFilterKey && excelFilterState[openFilterKey]) {\n  <div class=\"osl-rg-excel-filter\"\n       [style.top.px]=\"filterDropdownPos.top\"\n       [style.left.px]=\"filterDropdownPos.left\"\n       (click)=\"$event.stopPropagation()\">\n    <div class=\"osl-rg-excel-filter__header\">\n      <div class=\"osl-rg-excel-filter__title\">\n        <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"12\" height=\"12\" style=\"flex-shrink:0;\"><path d=\"M22 3H2l8 9.46V19l4 2V12.46z\"/></svg>\n        Filter: {{ getColumnByKey(openFilterKey)?.label }}\n      </div>\n      @if (hasActiveFilter(openFilterKey)) {\n        <button class=\"osl-rg-excel-filter__clear-btn\" (click)=\"clearExcelFilter(openFilterKey!)\">Clear</button>\n      }\n    </div>\n    <div class=\"osl-rg-excel-filter__search\">\n      <input class=\"osl-rg-excel-filter__search-input\" placeholder=\"Search values\u2026\"\n             [(ngModel)]=\"excelFilterState[openFilterKey].search\" />\n    </div>\n    <div class=\"osl-rg-excel-filter__select-all\">\n      <label class=\"osl-rg-excel-filter__item osl-rg-excel-filter__item--all\">\n        <input type=\"checkbox\" class=\"osl-rg-checkbox\" [checked]=\"isAllExcelChecked(openFilterKey)\"\n               (change)=\"toggleAllExcelFilter(openFilterKey!, $any($event.target).checked)\" />\n        <span class=\"osl-rg-excel-filter__item-label\">(Select All)</span>\n      </label>\n    </div>\n    <div class=\"osl-rg-excel-filter__list\">\n      @for (item of getFilteredExcelItems(openFilterKey); track item.value) {\n        <label class=\"osl-rg-excel-filter__item\">\n          <input type=\"checkbox\" class=\"osl-rg-checkbox\" [(ngModel)]=\"item.checked\" />\n          <span class=\"osl-rg-excel-filter__item-label\">{{ item.label }}</span>\n        </label>\n      }\n    </div>\n    <div class=\"osl-rg-excel-filter__footer\">\n      <button class=\"osl-rg-excel-filter__apply\" (click)=\"applyExcelFilter(openFilterKey!)\">Apply Filter</button>\n      <button class=\"osl-rg-excel-filter__cancel\" (click)=\"openFilterKey=null\">Cancel</button>\n    </div>\n  </div>\n}\n\n\n<!-- \u2550\u2550 COLUMN CONTEXT MENU (fixed) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n@if (columnMenuKey && getColumnByKey(columnMenuKey); as menuCol) {\n  <div class=\"osl-rg-col-menu\"\n       [style.top.px]=\"columnMenuPos.top\" [style.left.px]=\"columnMenuPos.left\"\n       (click)=\"$event.stopPropagation()\">\n    <div class=\"osl-rg-col-menu__header\">{{ menuCol.label }}</div>\n    @if (menuCol.sortable) {\n      <button class=\"osl-rg-col-menu__item\"\n              (click)=\"sortStates.clear(); sortStates.set(menuCol.key,{key:menuCol.key,asc:true,index:0}); sortCounter=1; processData(); closeColumnMenu()\">\n        <svg class=\"rg-icon rg-icon--sm\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 19V5m-7 7 7-7 7 7\"/></svg>\n        Sort A \u2192 Z\n      </button>\n      <button class=\"osl-rg-col-menu__item\"\n              (click)=\"sortStates.clear(); sortStates.set(menuCol.key,{key:menuCol.key,asc:false,index:0}); sortCounter=1; processData(); closeColumnMenu()\">\n        <svg class=\"rg-icon rg-icon--sm\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 5v14m7-7-7 7-7-7\"/></svg>\n        Sort Z \u2192 A\n      </button>\n    }\n    @if (menuCol.groupable) {\n      <div class=\"osl-rg-col-menu__divider\"></div>\n      <button class=\"osl-rg-col-menu__item\" (click)=\"addGroup(menuCol.key); closeColumnMenu()\">\n        <svg class=\"rg-icon rg-icon--sm\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"7\" width=\"20\" height=\"14\" rx=\"2\"/><path d=\"M16 3H8a2 2 0 0 0-2 2v2h12V5a2 2 0 0 0-2-2z\"/></svg>\n        Group by this\n      </button>\n    }\n    <div class=\"osl-rg-col-menu__divider\"></div>\n    <button class=\"osl-rg-col-menu__item\" (click)=\"toggleColumnPin(menuCol)\">\n      <svg class=\"rg-icon rg-icon--sm\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M16 12V4h1V2H7v2h1v8l-2 2v2h5.2v6h1.6v-6H18v-2l-2-2z\"/></svg>\n      {{ menuCol._pinned ? 'Unpin column' : 'Pin to left' }}\n    </button>\n    <button class=\"osl-rg-col-menu__item\" (click)=\"autoSizeColumn(menuCol); closeColumnMenu()\">\n      <svg class=\"rg-icon rg-icon--sm\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 6H3M21 18H3\"/><path d=\"M8 3 3 6l5 3M16 3l5 3-5 3M8 15l-5 3 5 3M16 15l5 3-5 3\"/></svg>\n      Auto-size column\n    </button>\n    <div class=\"osl-rg-col-menu__divider\"></div>\n    <button class=\"osl-rg-col-menu__item osl-rg-col-menu__item--danger\" (click)=\"toggleColumnVisibility(menuCol); closeColumnMenu()\">\n      <svg class=\"rg-icon rg-icon--sm\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <path d=\"M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24M1 1l22 22\"/>\n      </svg>\n      Hide column\n    </button>\n  </div>\n}\n\n\n<!-- \u2550\u2550 COLUMN CONFIG SIDE DRAWER \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n@if (showColumnConfig) {\n  <div class=\"osl-rg-config-backdrop\" (click)=\"showColumnConfig=false\"></div>\n  <div class=\"osl-rg-config-panel\" (click)=\"$event.stopPropagation()\">\n    <div class=\"osl-rg-config-panel__header\">\n      <div class=\"osl-rg-config-panel__title\">\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"16\" height=\"16\">\n          <path d=\"M4 6h16M4 12h16M4 18h16\"/>\n          <circle cx=\"8\"  cy=\"6\"  r=\"2\" fill=\"white\" stroke=\"currentColor\" stroke-width=\"2\"/>\n          <circle cx=\"16\" cy=\"12\" r=\"2\" fill=\"white\" stroke=\"currentColor\" stroke-width=\"2\"/>\n          <circle cx=\"8\"  cy=\"18\" r=\"2\" fill=\"white\" stroke=\"currentColor\" stroke-width=\"2\"/>\n        </svg>\n        Column Settings\n      </div>\n      <button class=\"osl-rg-config-panel__close\" (click)=\"showColumnConfig=false\">\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"><path d=\"M18 6 6 18M6 6l12 12\"/></svg>\n      </button>\n    </div>\n    <div class=\"osl-rg-config-panel__actions\">\n      <button class=\"osl-rg-config-action\" (click)=\"autoSizeAll()\">\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"13\" height=\"13\"><path d=\"M21 6H3M21 18H3\"/><path d=\"M8 3 3 6l5 3M16 3l5 3-5 3\"/></svg>\n        Auto-size all\n      </button>\n      <button class=\"osl-rg-config-action\" (click)=\"showAllColumns()\">\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"13\" height=\"13\"><path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"/><circle cx=\"12\" cy=\"12\" r=\"3\"/></svg>\n        Show all\n      </button>\n    </div>\n    <div class=\"osl-rg-config-hint\">Drag to reorder \u00B7 Toggle to show/hide \u00B7 Pin to freeze</div>\n    <div class=\"osl-rg-config-list\" cdkDropList (cdkDropListDropped)=\"onConfigColumnReorder($event)\">\n      @for (col of _cols; track col.key) {\n        <div class=\"osl-rg-config-item\" cdkDrag [class.osl-rg-config-item--hidden]=\"col._hidden\">\n          <svg cdkDragHandle class=\"rg-drag-handle\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n            <circle cx=\"9\" cy=\"5\" r=\"1.5\"/><circle cx=\"15\" cy=\"5\" r=\"1.5\"/>\n            <circle cx=\"9\" cy=\"12\" r=\"1.5\"/><circle cx=\"15\" cy=\"12\" r=\"1.5\"/>\n            <circle cx=\"9\" cy=\"19\" r=\"1.5\"/><circle cx=\"15\" cy=\"19\" r=\"1.5\"/>\n          </svg>\n          <input type=\"checkbox\" class=\"osl-rg-checkbox\" [checked]=\"!col._hidden\" (change)=\"toggleColumnVisibility(col)\" />\n          <span class=\"osl-rg-config-item__label\" [class.osl-rg-config-item__label--hidden]=\"col._hidden\">{{ col.label }}</span>\n          <button class=\"osl-rg-config-item__pin-btn\" (click)=\"toggleColumnPin(col)\"\n                  [class.osl-rg-config-item__pin-btn--active]=\"col._pinned\"\n                  [title]=\"col._pinned ? 'Unpin' : 'Pin to left'\">\n            <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"12\" height=\"12\"><path d=\"M16 12V4h1V2H7v2h1v8l-2 2v2h5.2v6h1.6v-6H18v-2l-2-2z\"/></svg>\n          </button>\n        </div>\n      }\n    </div>\n  </div>\n}\n\n\n<!-- \u2550\u2550 COPY TOAST \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n@if (copiedCell !== null) {\n  <div class=\"osl-rg-copy-toast\">\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"13\" height=\"13\"><polyline points=\"20 6 9 17 4 12\"/></svg>\n    Copied to clipboard\n  </div>\n}\n", styles: ["@keyframes rg-pulse{0%,to{opacity:1}50%{opacity:.4}}@keyframes rg-fade-up{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes rg-slide-in{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}.rg-icon{width:15px;height:15px;flex-shrink:0;display:block}.rg-icon--sm{width:14px;height:14px}.rg-icon--xs{width:12px;height:12px}.rg-icon--excel{width:18px;height:18px}.rg-drag-handle{width:14px;height:14px;flex-shrink:0;color:#d1d5db;cursor:grab;display:block}.rg-drag-handle:active{cursor:grabbing}.osl-rg{position:relative;display:flex;flex-direction:column;width:100%;font-family:inherit;font-size:13px;color:#111827;background:#fff;border:1px solid var(--osl-border-color, #e5e7eb);border-radius:10px;overflow:hidden;box-shadow:0 2px 8px #00000012,0 1px 2px #0000000a;-webkit-user-select:none;user-select:none}.osl-rg-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;background:linear-gradient(135deg,#f8faff,#f3f4f6);border-bottom:1px solid var(--osl-border-color, #e5e7eb);flex-shrink:0;flex-wrap:wrap}.osl-rg-toolbar__left{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.osl-rg-toolbar__right{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.osl-rg-title{font-size:14px;font-weight:700;color:#111827;letter-spacing:-.01em}.osl-rg-record-count{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:#9ca3af;font-weight:500}.osl-rg-record-count svg{color:#d1d5db}.osl-rg-filter-badge{display:inline-flex;align-items:center;gap:5px;padding:2px 9px 2px 6px;background:#eff6ff;border:1px solid #bfdbfe;border-radius:12px;font-size:11px;color:#1d4ed8;font-weight:600}.osl-rg-filter-badge__dot{width:6px;height:6px;border-radius:50%;background:#2563eb;animation:rg-pulse 1.5s ease-in-out infinite;flex-shrink:0}.osl-rg-toolbar-btn{display:inline-flex;align-items:center;gap:5px;height:32px;padding:0 11px;border:1px solid var(--osl-border-color, #e5e7eb);border-radius:7px;background:#fff;color:#5a6478;font-size:12px;font-family:inherit;font-weight:500;cursor:pointer;white-space:nowrap;transition:all .15s ease}.osl-rg-toolbar-btn svg{flex-shrink:0}.osl-rg-toolbar-btn:hover{background:#f3f4f6;color:#1f2937;border-color:#c4c9d4;box-shadow:0 1px 3px #0000000f}.osl-rg-toolbar-btn--on{background:#eff6ff;border-color:#93c5fd;color:#1d4ed8}.osl-rg-toolbar-btn--active{background:#eff6ff;border-color:#93c5fd;color:#1d4ed8;font-weight:600}.osl-rg-toolbar-btn--danger{background:#fff5f5;border-color:#fca5a5;color:#dc2626}.osl-rg-toolbar-btn--danger:hover{background:#fee2e2;border-color:#f87171}.osl-rg-toolbar-btn--excel{background:linear-gradient(135deg,#1a7a3e,#1d6f42);border-color:#166534;color:#fff;font-weight:600;box-shadow:0 1px 3px #1665344d}.osl-rg-toolbar-btn--excel:hover{background:linear-gradient(135deg,#166534,#145a2c);border-color:#14532d;color:#fff;box-shadow:0 2px 6px #16653466}.osl-rg-toolbar-btn--pdf{background:linear-gradient(135deg,#e53935,#c62828);border-color:#b71c1c;color:#fff;font-weight:600;box-shadow:0 1px 3px #b71c1c4d}.osl-rg-toolbar-btn--pdf:hover{background:linear-gradient(135deg,#c62828,#ad1515);border-color:#ad1515;color:#fff;box-shadow:0 2px 6px #b71c1c66}.rg-icon--pdf{width:18px;height:18px}.osl-rg-global-search{position:relative;display:inline-flex;align-items:center}.osl-rg-global-search__icon{position:absolute;left:9px;width:14px;height:14px;color:#9ca3af;pointer-events:none;display:block}.osl-rg-global-search__input{height:32px;padding:0 30px;border:1px solid var(--osl-border-color, #e5e7eb);border-radius:7px;background:#fff;font-size:12.5px;font-family:inherit;color:#111827;outline:none;width:210px;transition:border-color .15s,width .2s,box-shadow .15s}.osl-rg-global-search__input::placeholder{color:#b0b7c3}.osl-rg-global-search__input:focus{border-color:var(--osl-primary, #2563eb);width:260px;box-shadow:0 0 0 3px #2563eb1a}.osl-rg-global-search__clear{position:absolute;right:6px;display:flex;align-items:center;justify-content:center;width:18px;height:18px;border:none;background:transparent;color:#9ca3af;cursor:pointer;padding:0;border-radius:4px;transition:all .12s}.osl-rg-global-search__clear svg{width:12px;height:12px}.osl-rg-global-search__clear:hover{color:#374151;background:#0000000d}.osl-rg-group-panel{display:flex;align-items:center;gap:8px;padding:6px 14px;background:linear-gradient(135deg,#fafbff,#f5f7ff);border-bottom:1px dashed #dde5ff;min-height:40px;flex-shrink:0;flex-wrap:wrap}.osl-rg-group-panel__label{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:#6b7280;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;flex-shrink:0}.osl-rg-group-panel__label svg{color:#9ca3af}.osl-rg-group-panel__hint{font-size:11px;color:#b0b7c3;font-style:italic}.osl-rg-group-panel__clear{margin-left:auto;font-size:11px;color:#6b7280;background:none;border:none;cursor:pointer;text-decoration:underline;flex-shrink:0;padding:0;font-family:inherit}.osl-rg-group-panel__clear:hover{color:#dc2626}.osl-rg-group-chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center;flex:1;min-height:26px}.osl-rg-group-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 6px 3px 5px;background:linear-gradient(135deg,#dbeafe,#eff6ff);border:1px solid #bfdbfe;border-radius:20px;font-size:12px;font-weight:600;color:#1e40af;cursor:grab;-webkit-user-select:none;user-select:none;box-shadow:0 1px 2px #2563eb1a;transition:box-shadow .1s}.osl-rg-group-chip:active{cursor:grabbing;box-shadow:0 2px 6px #2563eb33}.osl-rg-group-chip .rg-drag-handle{color:#93c5fd}.osl-rg-group-chip__remove{display:flex;align-items:center;justify-content:center;width:16px;height:16px;border:none;background:transparent;cursor:pointer;padding:0;border-radius:50%;transition:all .1s}.osl-rg-group-chip__remove svg{width:10px;height:10px;color:#93c5fd}.osl-rg-group-chip__remove:hover{background:#dbeafe}.osl-rg-group-chip__remove:hover svg{color:#1e40af}.osl-rg-table-area{display:flex;flex-direction:column;flex:1 1 0;overflow:hidden;position:relative;min-height:0}.osl-rg-header-wrap{overflow:hidden;flex-shrink:0;border-bottom:2px solid #dde5ff;background:linear-gradient(180deg,#f0f4ff,#e8efff);z-index:10;position:relative}.osl-rg-header-row{display:flex;align-items:stretch}.osl-rg-header-row--groups{border-bottom:1px solid #c7d7f0}.osl-rg-th--group-span{display:flex;align-items:center;justify-content:center;height:28px;min-height:28px;cursor:default;padding:0;border-right:1px solid #dde5ff}.osl-rg-th--group-span:hover{background:transparent!important}.osl-rg-th--group-span:last-child{border-right:none}.osl-rg-th--group-span--labeled{background:linear-gradient(135deg,#dbeafe,#eff6ff);border-bottom:2px solid #93c5fd}.osl-rg-th-group-label{font-size:11px;font-weight:700;color:#1e40af;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 10px;text-align:center;width:100%}.osl-rg-header-cols{display:flex}.osl-rg-th{position:relative;display:flex;flex-direction:column;background:transparent;border-right:1px solid #dde5ff;cursor:pointer;flex-shrink:0;transition:background .12s;overflow:visible}.osl-rg-th:last-child{border-right:none}.osl-rg-th:hover{background:#2563eb0f}.osl-rg-th--pinned{background:linear-gradient(180deg,#e8efff,#dde8ff);border-right:1px solid #bfdbfe;z-index:3}.osl-rg-th--pinned:after{content:\"\";position:absolute;right:-5px;top:0;bottom:0;width:5px;background:linear-gradient(to right,rgba(37,99,235,.14),transparent);pointer-events:none;z-index:4}.osl-rg-th--sorted{background:#6366f114}.osl-rg-th--filtered{background:#f59e0b12}.osl-rg-th-drag-placeholder{background:#e0e7ff;border:2px dashed #6366f1;border-radius:4px;opacity:.6}.osl-rg-th-pin-badge{position:absolute;top:3px;right:24px;color:var(--osl-primary, #2563eb);opacity:.6;display:flex;align-items:center}.osl-rg-th-content{display:flex;align-items:center;justify-content:space-between;gap:4px;padding:0 8px 0 10px;height:36px;min-height:36px}.osl-rg-th-label{font-size:11.5px;font-weight:700;color:#1e3a6e;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}.osl-rg-th-actions{display:flex;align-items:center;gap:2px;flex-shrink:0}.osl-rg-sort-icon{display:inline-flex;align-items:center;position:relative;color:#9ca3af;transition:color .12s;width:14px;height:14px}.osl-rg-sort-icon svg{width:13px;height:13px;display:block}.osl-rg-sort-icon--asc,.osl-rg-sort-icon--desc{color:var(--osl-primary, #2563eb)}.osl-rg-sort-idle{opacity:.3}.osl-rg-sort-badge{position:absolute;top:-4px;right:-6px;font-size:8px;font-weight:700;background:var(--osl-primary, #2563eb);color:#fff;border-radius:50%;width:11px;height:11px;display:flex;align-items:center;justify-content:center;line-height:1}.osl-rg-filter-btn,.osl-rg-col-menu-btn{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border:none;background:transparent;color:#b0b7c3;cursor:pointer;padding:0;border-radius:5px;transition:all .12s}.osl-rg-filter-btn svg,.osl-rg-col-menu-btn svg{width:13px;height:13px;display:block}.osl-rg-filter-btn:hover,.osl-rg-col-menu-btn:hover{background:#00000012;color:#374151}.osl-rg-filter-btn--active{color:var(--osl-primary, #2563eb)!important;background:#2563eb1f!important}.osl-rg-col-search{position:relative;display:flex;align-items:center;padding:3px 6px;border-top:1px solid #e0e7ff;background:#ffffff80}.osl-rg-col-search__icon{position:absolute;left:10px;width:12px;height:12px;display:block;pointer-events:none;color:#c4cad6}.osl-rg-col-search__input{width:100%;height:23px;padding:0 18px 0 22px;border:1px solid #dde5ff;border-radius:5px;font-size:11px;font-family:inherit;background:#fff;color:#111827;outline:none;transition:border-color .12s,box-shadow .12s}.osl-rg-col-search__input::placeholder{color:#c4cad6}.osl-rg-col-search__input:focus{border-color:var(--osl-primary, #2563eb);box-shadow:0 0 0 2px #2563eb1a}.osl-rg-col-search__clear{position:absolute;right:8px;display:flex;align-items:center;width:14px;height:14px;border:none;background:transparent;color:#9ca3af;cursor:pointer;padding:0;border-radius:3px;transition:all .1s}.osl-rg-col-search__clear svg{width:10px;height:10px;display:block}.osl-rg-col-search__clear:hover{color:#374151;background:#0000000f}.osl-rg-resize-handle{position:absolute;right:0;top:0;bottom:0;width:6px;cursor:col-resize;z-index:5}.osl-rg-resize-handle:after{content:\"\";position:absolute;right:2px;top:15%;bottom:15%;width:2px;border-radius:2px;background:#a5b4fc;opacity:0;transition:opacity .15s}.osl-rg-resize-handle:hover:after{opacity:1}.osl-rg-th:hover .osl-rg-resize-handle:after{opacity:.4}.osl-rg-excel-filter{position:fixed;z-index:9999;width:250px;background:#fff;border:1px solid #e5e7eb;border-radius:10px;box-shadow:0 12px 32px #00000026,0 2px 8px #00000012;animation:rg-fade-up .14s ease;overflow:hidden}.osl-rg-excel-filter__header{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;background:linear-gradient(135deg,#f0f4ff,#e8efff);border-bottom:1px solid #dde5ff}.osl-rg-excel-filter__title{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:#1e3a6e;text-transform:uppercase;letter-spacing:.06em}.osl-rg-excel-filter__clear-btn{font-size:11px;color:#dc2626;background:none;border:none;cursor:pointer;font-weight:600;padding:2px 6px;border-radius:4px;font-family:inherit;transition:background .1s}.osl-rg-excel-filter__clear-btn:hover{background:#fee2e2}.osl-rg-excel-filter__search{padding:7px 8px;border-bottom:1px solid #f3f4f6;position:relative}.osl-rg-excel-filter__search-input{width:100%;height:28px;padding:0 8px 0 28px;border:1px solid #e5e7eb;border-radius:6px;font-size:12px;font-family:inherit;outline:none;box-sizing:border-box;transition:border-color .12s;color:#111827}.osl-rg-excel-filter__search-input::placeholder{color:#b0b7c3}.osl-rg-excel-filter__search-input:focus{border-color:var(--osl-primary, #2563eb)}.osl-rg-excel-filter__select-all{padding:0 8px;border-bottom:2px solid #f3f4f6;background:#fafbff}.osl-rg-excel-filter__list{max-height:210px;overflow-y:auto;padding:3px 8px}.osl-rg-excel-filter__list::-webkit-scrollbar{width:5px}.osl-rg-excel-filter__list::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:4px}.osl-rg-excel-filter__list::-webkit-scrollbar-thumb:hover{background:#9ca3af}.osl-rg-excel-filter__item{display:flex;align-items:center;gap:8px;padding:5px 4px;font-size:12.5px;color:#374151;cursor:pointer;border-radius:5px;transition:background .1s}.osl-rg-excel-filter__item:hover{background:#f3f4f6}.osl-rg-excel-filter__item--all{font-weight:600;color:#1f2937;padding:6px 4px}.osl-rg-excel-filter__item-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.osl-rg-excel-filter__footer{display:flex;gap:6px;padding:8px 10px;border-top:1px solid #f3f4f6;background:#f9fafb}.osl-rg-excel-filter__apply{flex:1;height:30px;border:none;border-radius:6px;font-size:12px;font-family:inherit;font-weight:600;cursor:pointer;background:var(--osl-primary, #2563eb);color:#fff;transition:background .12s}.osl-rg-excel-filter__apply:hover{background:#1d4ed8}.osl-rg-excel-filter__cancel{height:30px;padding:0 14px;border:1px solid #e5e7eb;border-radius:6px;font-size:12px;font-family:inherit;font-weight:500;cursor:pointer;background:#fff;color:#6b7280;transition:all .12s}.osl-rg-excel-filter__cancel:hover{background:#f3f4f6;border-color:#9ca3af}.osl-rg-th--checkbox,.osl-rg-td--checkbox{display:flex;align-items:center;justify-content:center;width:36px;min-width:36px;flex-shrink:0;border-right:1px solid #dde5ff}.osl-rg-checkbox{width:14px;height:14px;cursor:pointer;accent-color:var(--osl-primary, #2563eb);flex-shrink:0}.osl-rg-body{overflow-x:auto;overflow-y:auto;flex-shrink:0}.osl-rg-body::-webkit-scrollbar{width:8px;height:8px}.osl-rg-body::-webkit-scrollbar-track{background:#f9fafb}.osl-rg-body::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:4px}.osl-rg-body::-webkit-scrollbar-thumb:hover{background:#9ca3af}.osl-rg-body::-webkit-scrollbar-corner{background:#f9fafb}.osl-rg-inner{display:block}.osl-rg-row{display:flex;align-items:stretch;border-bottom:1px solid #f3f4f6;transition:background .08s;cursor:default}.osl-rg-row:hover{background:#f0f5ff!important}.osl-rg-row--striped{background:#fafbff}.osl-rg-row--selected{background:#eff6ff!important;border-bottom-color:#dbeafe}.osl-rg-row--skeleton{pointer-events:none}.osl-rg-td{display:flex;align-items:center;padding:0 12px;border-right:1px solid #f0f2f7;overflow:hidden;background:inherit;flex-shrink:0}.osl-rg-td:last-child{border-right:none}.osl-rg-td--pinned{background:#fff;border-right:1px solid #e0e7ff;z-index:2}.osl-rg-td--pinned:after{content:\"\";position:absolute;right:-5px;top:0;bottom:0;width:5px;background:linear-gradient(to right,rgba(37,99,235,.07),transparent);pointer-events:none}.osl-rg-cell-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;width:100%;font-size:13px;color:#1f2937;line-height:1.4}.rg-profit-pos .osl-rg-cell-text{color:#15803d;font-weight:600}.rg-profit-neg .osl-rg-cell-text{color:#dc2626;font-weight:600}.rg-status-delivered .osl-rg-cell-text{color:#15803d;font-weight:600}.rg-status-shipped .osl-rg-cell-text{color:#2563eb;font-weight:600}.rg-status-processing .osl-rg-cell-text{color:#d97706;font-weight:600}.rg-status-pending .osl-rg-cell-text{color:#6b7280;font-weight:500}.rg-status-cancelled .osl-rg-cell-text{color:#dc2626;font-weight:500;text-decoration:line-through;opacity:.75}.osl-rg-group-row{display:flex;align-items:center;gap:7px;border-bottom:1px solid #e5e7eb;font-weight:600;cursor:pointer;flex-shrink:0;transition:filter .1s}.osl-rg-group-row--l0{background:linear-gradient(135deg,#eff6ff,#dbeafe);color:#1e40af;border-left:4px solid #3b82f6}.osl-rg-group-row--l1{background:linear-gradient(135deg,#f5f3ff,#ede9fe);color:#5b21b6;border-left:4px solid #8b5cf6}.osl-rg-group-row--l2{background:linear-gradient(135deg,#fff7ed,#fef3c7);color:#92400e;border-left:4px solid #f59e0b}.osl-rg-group-row:hover{filter:brightness(.97)}.osl-rg-group-row__key{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;opacity:.65;flex-shrink:0}.osl-rg-group-row__value{font-size:13px;font-weight:700;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.osl-rg-group-row__count{font-size:11px;font-weight:600;padding:2px 9px;border-radius:12px;background:#00000017;margin-right:12px;flex-shrink:0}.osl-rg-group-chevron{width:16px;height:16px;flex-shrink:0;opacity:.75;display:block}.osl-rg-aggregate-row{display:flex;align-items:center;border-top:2px solid #e5e7eb;background:linear-gradient(135deg,#f0fdf4,#f9fafb);flex-shrink:0;min-height:38px}.osl-rg-agg-cell{display:flex;align-items:center;gap:5px;padding:0 12px;border-right:1px solid #e5e7eb;height:38px;flex-shrink:0;overflow:hidden}.osl-rg-agg-cell--checkbox{width:36px;min-width:36px}.osl-rg-agg-label{font-size:9.5px;font-weight:800;color:#9ca3af;text-transform:uppercase;letter-spacing:.06em;flex-shrink:0;background:#e5e7eb;padding:1px 4px;border-radius:3px}.osl-rg-agg-value{font-size:12px;font-weight:700;color:#15803d;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.osl-rg-skel{height:12px;border-radius:4px;background:linear-gradient(90deg,#e5e7eb 25%,#f3f4f6,#e5e7eb 75%);background-size:200% 100%;animation:rg-pulse 1.5s ease-in-out infinite}.osl-rg-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:64px 20px;color:#9ca3af;text-align:center}.osl-rg-empty__icon{margin-bottom:18px;opacity:.7}.osl-rg-empty__title{font-size:15px;font-weight:600;color:#374151;margin:0 0 6px}.osl-rg-empty__sub{font-size:13px;color:#9ca3af;margin:0 0 18px;max-width:290px;line-height:1.5}.osl-rg-empty__action{height:34px;padding:0 18px;background:var(--osl-primary, #2563eb);color:#fff;border:none;border-radius:7px;font-size:13px;font-family:inherit;font-weight:600;cursor:pointer;transition:background .15s;box-shadow:0 2px 6px #2563eb4d}.osl-rg-empty__action:hover{background:#1d4ed8}.osl-rg-pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 14px;border-top:1px solid var(--osl-border-color, #e5e7eb);background:linear-gradient(135deg,#f8faff,#f3f4f6);flex-shrink:0;flex-wrap:wrap}.osl-rg-pagination__info{font-size:12px;color:#6b7280;min-width:160px;white-space:nowrap}.osl-rg-pagination__info strong{color:#1f2937;font-weight:600}.osl-rg-pagination__controls{display:flex;align-items:center;gap:3px}.osl-rg-pagination__size{display:flex;align-items:center;gap:7px;min-width:120px;justify-content:flex-end}.osl-rg-pagination__size-label{font-size:11.5px;color:#9ca3af;white-space:nowrap}.osl-rg-page-btn{display:inline-flex;align-items:center;justify-content:center;gap:3px;height:30px;padding:0 8px;border:1px solid var(--osl-border-color, #e5e7eb);border-radius:6px;background:#fff;color:#374151;font-size:12px;font-family:inherit;font-weight:500;cursor:pointer;transition:all .12s;white-space:nowrap}.osl-rg-page-btn svg{display:block}.osl-rg-page-btn:hover:not(:disabled){background:#f3f4f6;border-color:#9ca3af;box-shadow:0 1px 2px #0000000f}.osl-rg-page-btn:disabled{opacity:.35;cursor:not-allowed}.osl-rg-page-btn--num{min-width:30px;padding:0;font-size:12.5px}.osl-rg-page-btn--active{background:var(--osl-primary, #2563eb);border-color:var(--osl-primary, #2563eb);color:#fff;font-weight:700;box-shadow:0 2px 5px #2563eb59}.osl-rg-page-btn--active:hover:not(:disabled){background:#1d4ed8;border-color:#1d4ed8}.osl-rg-page-ellipsis{display:inline-flex;align-items:center;justify-content:center;width:26px;color:#9ca3af;font-size:13px;pointer-events:none}.osl-rg-page-size{height:30px;padding:0 8px;border:1px solid var(--osl-border-color, #e5e7eb);border-radius:6px;background:#fff;font-size:12px;font-family:inherit;color:#374151;cursor:pointer;outline:none;transition:border-color .15s}.osl-rg-page-size:focus{border-color:var(--osl-primary, #2563eb)}.osl-rg-col-menu{position:fixed;z-index:9999;min-width:210px;background:#fff;border:1px solid #e5e7eb;border-radius:11px;box-shadow:0 12px 36px #00000029,0 3px 10px #00000014;overflow:hidden;animation:rg-fade-up .13s cubic-bezier(.16,1,.3,1)}.osl-rg-col-menu__header{padding:9px 14px 7px;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#9ca3af;border-bottom:1px solid #f3f4f6;background:#fafbff}.osl-rg-col-menu__divider{height:1px;background:#f3f4f6;margin:2px 0}.osl-rg-col-menu__item{display:flex;align-items:center;gap:9px;width:100%;padding:9px 14px;background:transparent;border:none;border-left:3px solid transparent;border-bottom:none;text-align:left;font-size:13px;font-weight:500;font-family:inherit;color:#374151;cursor:pointer;transition:all .1s}.osl-rg-col-menu__item svg{color:#9ca3af;display:block}.osl-rg-col-menu__item:hover{background:#f0f4ff;color:var(--osl-primary, #2563eb);border-left-color:var(--osl-primary, #2563eb)}.osl-rg-col-menu__item:hover svg{color:var(--osl-primary, #2563eb)}.osl-rg-col-menu__item--danger:hover{background:#fff5f5;color:#dc2626;border-left-color:#dc2626}.osl-rg-col-menu__item--danger:hover svg{color:#dc2626}.osl-rg-config-backdrop{position:fixed;inset:0;z-index:9000;background:#0003;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}.osl-rg-config-panel{position:fixed;top:0;right:0;bottom:0;z-index:9001;width:300px;background:#fff;border-left:1px solid #e5e7eb;box-shadow:-6px 0 24px #00000021;display:flex;flex-direction:column;animation:rg-slide-in .2s cubic-bezier(.16,1,.3,1)}.osl-rg-config-panel__header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid #e5e7eb;background:linear-gradient(135deg,#f0f4ff,#e8efff);flex-shrink:0}.osl-rg-config-panel__title{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:#1e3a6e}.osl-rg-config-panel__title svg{color:#3b82f6}.osl-rg-config-panel__close{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border:none;background:transparent;color:#9ca3af;cursor:pointer;border-radius:7px;padding:0;transition:all .12s}.osl-rg-config-panel__close svg{width:16px;height:16px;display:block}.osl-rg-config-panel__close:hover{background:#00000012;color:#374151}.osl-rg-config-panel__actions{display:flex;gap:8px;padding:10px 14px;border-bottom:1px solid #f3f4f6;flex-shrink:0;background:#fafbff}.osl-rg-config-hint{padding:6px 16px;font-size:10.5px;color:#b0b7c3;font-style:italic;border-bottom:1px solid #f3f4f6;flex-shrink:0}.osl-rg-config-action{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 10px;border:1px solid #e5e7eb;border-radius:6px;background:#fff;color:#374151;font-size:12px;font-family:inherit;font-weight:500;cursor:pointer;transition:all .12s}.osl-rg-config-action svg{display:block}.osl-rg-config-action:hover{background:#f3f4f6;border-color:#9ca3af}.osl-rg-config-list{flex:1;overflow-y:auto;padding:6px 0}.osl-rg-config-list::-webkit-scrollbar{width:5px}.osl-rg-config-list::-webkit-scrollbar-thumb{background:#e5e7eb;border-radius:4px}.osl-rg-config-list::-webkit-scrollbar-thumb:hover{background:#d1d5db}.osl-rg-config-item{display:flex;align-items:center;gap:9px;padding:7px 14px;transition:background .1s;cursor:grab}.osl-rg-config-item:hover{background:#f9fafb}.osl-rg-config-item:active{cursor:grabbing}.osl-rg-config-item--hidden{opacity:.5}.osl-rg-config-item__label{flex:1;font-size:13px;color:#374151;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}.osl-rg-config-item__label--hidden{color:#9ca3af;font-style:italic}.osl-rg-config-item__pin-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid #e5e7eb;background:#fff;color:#d1d5db;cursor:pointer;padding:0;border-radius:5px;transition:all .12s;flex-shrink:0}.osl-rg-config-item__pin-btn svg{display:block}.osl-rg-config-item__pin-btn:hover,.osl-rg-config-item__pin-btn--active{background:#eff6ff;border-color:#93c5fd;color:var(--osl-primary, #2563eb)}.osl-rg-copy-toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%);z-index:99999;display:flex;align-items:center;gap:7px;background:#1f2937;color:#fff;font-size:12.5px;font-weight:500;padding:8px 18px;border-radius:22px;animation:rg-fade-up .2s ease;box-shadow:0 6px 16px #0000004d;pointer-events:none;white-space:nowrap;font-family:inherit}.osl-rg-copy-toast svg{flex-shrink:0;color:#4ade80}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.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.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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: "directive", type: i3$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i3$1.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "pipe", type: i1$2.DecimalPipe, name: "number" }, { kind: "pipe", type: i1$2.UpperCasePipe, name: "uppercase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslReportGrid, decorators: [{
             type: Component,
@@ -7402,7 +7408,7 @@ class UnsavedChangesDialog {
     leave() { this.dialogRef.close('leave'); }
     cancel() { this.dialogRef.close(null); }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: UnsavedChangesDialog, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: UnsavedChangesDialog, isStandalone: true, selector: "unsaved-changes-dialog", ngImport: i0, template: "<div class=\"ucd-wrap\">\n\n  <!-- Amber gradient header zone + icon -->\n  <div class=\"ucd-header\">\n    <button mat-icon-button class=\"ucd-close\" (click)=\"cancel()\" aria-label=\"Close\">\n      <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"18\" height=\"18\">\n        <path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"/>\n      </svg>\n    </button>\n    <div class=\"ucd-icon-ring\">\n      <svg class=\"ucd-icon-svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n        <path d=\"M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z\"/>\n      </svg>\n    </div>\n  </div>\n\n  <!-- Content -->\n  <mat-dialog-content class=\"ucd-body\">\n    <h2 class=\"ucd-title\">Unsaved Changes</h2>\n    <p class=\"ucd-subtitle\">You have unsaved changes that will be lost if you leave this page.</p>\n  </mat-dialog-content>\n\n  <!-- Actions \u2014 all buttons on one line -->\n  <mat-dialog-actions class=\"ucd-actions\">\n    <button mat-stroked-button class=\"ucd-btn ucd-stay\" (click)=\"cancel()\">\n      <svg class=\"ucd-btn-icon\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n        <path d=\"M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z\"/>\n      </svg>\n      <span>Stay on Page</span>\n    </button>\n    <button mat-stroked-button class=\"ucd-btn ucd-leave\" (click)=\"leave()\">\n      <svg class=\"ucd-btn-icon\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n        <path d=\"M17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5zM4 5h8V3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8v-2H4V5z\"/>\n      </svg>\n      <span>Leave Page</span>\n    </button>\n    @if (data.hasSaveCallback) {\n      <button mat-flat-button class=\"ucd-btn ucd-save\" (click)=\"save()\">\n        <svg class=\"ucd-btn-icon\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n          <path d=\"M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z\"/>\n        </svg>\n        <span>Save &amp; Leave</span>\n      </button>\n    }\n  </mat-dialog-actions>\n\n</div>\n", styles: ["@keyframes ucd-icon-bounce{0%{transform:scale(.55) rotate(-10deg);opacity:0}60%{transform:scale(1.12) rotate(4deg);opacity:1}80%{transform:scale(.93) rotate(-2deg)}to{transform:scale(1) rotate(0)}}@keyframes ucd-glow{0%,to{box-shadow:0 0 #f59e0b73,0 6px 20px #f59e0b1f}55%{box-shadow:0 0 0 14px #f59e0b00,0 6px 20px #f59e0b38}}.ucd-header{position:relative;background:linear-gradient(160deg,#fffbeb,#fef3c7 55%,#fde68a);padding:40px 20px 32px;display:flex;justify-content:center;align-items:center}.ucd-header:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(245,158,11,.4),transparent)}.ucd-close{position:absolute;top:10px;right:10px;width:30px!important;height:30px!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important;color:#92400e;opacity:.5;transition:opacity .15s ease,transform .2s ease}.ucd-close ::ng-deep .mat-mdc-button-touch-target,.ucd-close ::ng-deep .mat-mdc-focus-indicator{display:none}.ucd-close svg{display:block;flex-shrink:0}.ucd-close:hover{opacity:1;transform:rotate(90deg)}.ucd-icon-ring{width:82px;height:82px;border-radius:50%;background:linear-gradient(145deg,#fef9e7,#fde68a);border:2px solid rgba(245,158,11,.55);display:flex;align-items:center;justify-content:center;animation:ucd-glow 2.6s ease-in-out infinite}.ucd-icon-svg{width:40px;height:40px;color:#d97706;display:block;animation:ucd-icon-bounce .55s cubic-bezier(.34,1.56,.64,1) .12s both}.ucd-body{text-align:center;padding:26px 36px 12px!important;max-height:unset!important;overflow:visible!important}.ucd-title{font-size:20px;font-weight:700;color:#111827;margin:0 0 8px;letter-spacing:-.25px;line-height:1.25}.ucd-subtitle{font-size:14px;color:#6b7280;margin:0;line-height:1.65}.ucd-actions{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;justify-content:center!important;align-items:center!important;gap:10px;padding:18px 28px 28px!important;min-height:unset!important}.ucd-btn{height:40px!important;border-radius:10px!important;font-size:13.5px!important;font-weight:500!important;letter-spacing:.1px;padding:0 20px!important;white-space:nowrap;transition:transform .15s ease,box-shadow .15s ease,background .15s ease,border-color .15s ease!important}.ucd-btn ::ng-deep .mdc-button__label{display:flex;align-items:center;gap:7px;line-height:1}.ucd-btn:hover{transform:translateY(-2px)}.ucd-btn:active{transform:translateY(0) scale(.97)}.ucd-btn-icon{width:15px;height:15px;flex-shrink:0;display:block}.ucd-stay{border-color:#d1d5db!important;color:#374151!important}.ucd-stay:hover{border-color:#9ca3af!important;background:#f9fafb!important;box-shadow:0 3px 10px #00000012!important}.ucd-leave{border-color:#dc262666!important;color:#dc2626!important;background:#fef2f280!important}.ucd-leave:hover{border-color:#dc2626!important;background:#fef2f2!important;box-shadow:0 3px 12px #dc26262e!important}.ucd-save{background:linear-gradient(135deg,#2563eb,#4f46e5);color:#fff!important;border:none!important;box-shadow:0 2px 10px #4f46e54d!important}.ucd-save .ucd-btn-icon{color:#fff}.ucd-save:hover{background:linear-gradient(135deg,#1d4ed8,#4338ca);box-shadow:0 6px 20px #4f46e56b!important}\n"], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: UnsavedChangesDialog, isStandalone: true, selector: "unsaved-changes-dialog", ngImport: i0, template: "<div class=\"ucd-wrap\">\n\n  <!-- Amber gradient header zone + icon -->\n  <div class=\"ucd-header\">\n    <button mat-icon-button class=\"ucd-close\" (click)=\"cancel()\" aria-label=\"Close\">\n      <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"18\" height=\"18\">\n        <path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"/>\n      </svg>\n    </button>\n    <div class=\"ucd-icon-ring\">\n      <svg class=\"ucd-icon-svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n        <path d=\"M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z\"/>\n      </svg>\n    </div>\n  </div>\n\n  <!-- Content -->\n  <mat-dialog-content class=\"ucd-body\">\n    <h2 class=\"ucd-title\">Unsaved Changes</h2>\n    <p class=\"ucd-subtitle\">You have unsaved changes that will be lost if you leave this page.</p>\n  </mat-dialog-content>\n\n  <!-- Actions \u2014 all buttons on one line -->\n  <mat-dialog-actions class=\"ucd-actions\">\n    <button mat-stroked-button class=\"ucd-btn ucd-stay\" (click)=\"cancel()\">\n      <svg class=\"ucd-btn-icon\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n        <path d=\"M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z\"/>\n      </svg>\n      <span>Stay on Page</span>\n    </button>\n    <button mat-stroked-button class=\"ucd-btn ucd-leave\" (click)=\"leave()\">\n      <svg class=\"ucd-btn-icon\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n        <path d=\"M17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5zM4 5h8V3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8v-2H4V5z\"/>\n      </svg>\n      <span>Leave Page</span>\n    </button>\n    @if (data.hasSaveCallback) {\n      <button mat-flat-button class=\"ucd-btn ucd-save\" (click)=\"save()\">\n        <svg class=\"ucd-btn-icon\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n          <path d=\"M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z\"/>\n        </svg>\n        <span>Save &amp; Leave</span>\n      </button>\n    }\n  </mat-dialog-actions>\n\n</div>\n", styles: ["@keyframes ucd-icon-bounce{0%{transform:scale(.55) rotate(-10deg);opacity:0}60%{transform:scale(1.12) rotate(4deg);opacity:1}80%{transform:scale(.93) rotate(-2deg)}to{transform:scale(1) rotate(0)}}@keyframes ucd-glow{0%,to{box-shadow:0 0 #f59e0b73,0 6px 20px #f59e0b1f}55%{box-shadow:0 0 0 14px #f59e0b00,0 6px 20px #f59e0b38}}.ucd-header{position:relative;background:linear-gradient(160deg,#fffbeb,#fef3c7 55%,#fde68a);padding:40px 20px 32px;display:flex;justify-content:center;align-items:center}.ucd-header:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(245,158,11,.4),transparent)}.ucd-close{position:absolute;top:10px;right:10px;width:30px!important;height:30px!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important;color:#92400e;opacity:.5;transition:opacity .15s ease,transform .2s ease}.ucd-close ::ng-deep .mat-mdc-button-touch-target,.ucd-close ::ng-deep .mat-mdc-focus-indicator{display:none}.ucd-close svg{display:block;flex-shrink:0}.ucd-close:hover{opacity:1;transform:rotate(90deg)}.ucd-icon-ring{width:82px;height:82px;border-radius:50%;background:linear-gradient(145deg,#fef9e7,#fde68a);border:2px solid rgba(245,158,11,.55);display:flex;align-items:center;justify-content:center;animation:ucd-glow 2.6s ease-in-out infinite}.ucd-icon-svg{width:40px;height:40px;color:#d97706;display:block;animation:ucd-icon-bounce .55s cubic-bezier(.34,1.56,.64,1) .12s both}.ucd-body{text-align:center;padding:26px 36px 12px!important;max-height:unset!important;overflow:visible!important}.ucd-title{font-size:20px;font-weight:700;color:#111827;margin:0 0 8px;letter-spacing:-.25px;line-height:1.25}.ucd-subtitle{font-size:14px;color:#6b7280;margin:0;line-height:1.65}.ucd-actions{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;justify-content:center!important;align-items:center!important;gap:10px;padding:18px 28px 28px!important;min-height:unset!important}.ucd-btn{height:40px!important;border-radius:10px!important;font-size:13.5px!important;font-weight:500!important;letter-spacing:.1px;padding:0 20px!important;white-space:nowrap;transition:transform .15s ease,box-shadow .15s ease,background .15s ease,border-color .15s ease!important}.ucd-btn ::ng-deep .mdc-button__label{display:flex;align-items:center;gap:7px;line-height:1}.ucd-btn:hover{transform:translateY(-2px)}.ucd-btn:active{transform:translateY(0) scale(.97)}.ucd-btn-icon{width:15px;height:15px;flex-shrink:0;display:block}.ucd-stay{border-color:#d1d5db!important;color:#374151!important}.ucd-stay:hover{border-color:#9ca3af!important;background:#f9fafb!important;box-shadow:0 3px 10px #00000012!important}.ucd-leave{border-color:#dc262666!important;color:#dc2626!important;background:#fef2f280!important}.ucd-leave:hover{border-color:#dc2626!important;background:#fef2f2!important;box-shadow:0 3px 12px #dc26262e!important}.ucd-save{background:linear-gradient(135deg,#2563eb,#4f46e5);color:#fff!important;border:none!important;box-shadow:0 2px 10px #4f46e54d!important}.ucd-save .ucd-btn-icon{color:#fff}.ucd-save:hover{background:linear-gradient(135deg,#1d4ed8,#4338ca);box-shadow:0 6px 20px #4f46e56b!important}\n"], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: UnsavedChangesDialog, decorators: [{
             type: Component,