osl-base-extended 0.1.13 → 0.1.15

package/fesm2022/osl-base-extended.mjs

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
-import { Component, Inject, inject, Injector, Injectable, InjectionToken, EventEmitter, Output, Input, HostListener, ViewChild, NgModule } from '@angular/core';
+import { Component, Inject, inject, Injector, Injectable, InjectionToken, PLATFORM_ID, Input, Directive, EventEmitter, Output, HostListener, ViewChild, NgModule } from '@angular/core';
 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 } from '@angular/router';
 import * as i1$2 from '@angular/common';
-import { NgTemplateOutlet, NgComponentOutlet } from '@angular/common';
+import { NgTemplateOutlet, NgComponentOutlet, isPlatformBrowser } from '@angular/common';
 import * as i3 from '@angular/material/button';
 import { MatIconButton, MatButtonModule } from '@angular/material/button';
 import * as i2 from '@angular/material/icon';
@@ -43,11 +43,11 @@ 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: "\n@if(dialogData.component){\n    <ng-container [ngComponentOutlet]=\"dialogData.component\"  [ngComponentOutletInputs]=\"{ data: dialogData }\"></ng-container>\n}\n@else{\n  <div class=\"dialog-container\">\n  \n    <!-- Header -->\n    @if(typeof dialogData.header == 'string') {\n      <div class=\"dialog-header\" mat-dialog-title>\n        <div class=\"dialog-header-left\">\n          <div class=\"dialog-icon-ring\">\n            <mat-icon class=\"dialog-icon\">\n              {{ dialogData.header.startsWith('Add') ? 'add_circle' : dialogData.header.startsWith('Edit') ? 'edit' : 'info' }}\n            </mat-icon>\n          </div>\n          <div class=\"dialog-title-group\">\n             <span class=\"dialog-mode-label\">\n              {{ dialogData.header.startsWith('Add') ? 'Creating New' : dialogData.header.startsWith('Edit') ? 'Edit' : '' }}\n            </span>\n            <span class=\"dialog-heading\"> {{ dialogData.header.startsWith('Add') ? dialogData.header.replace('Add','') : dialogData.header.startsWith('Edit') ? dialogData.header.replace('Edit','') : '' }}</span>\n          </div>\n        </div>\n        <button mat-icon-button class=\"dialog-close-btn\" mat-dialog-close>\n          <mat-icon>close</mat-icon>\n        </button>\n      </div>\n    } @else {\n      <ng-container *ngTemplateOutlet=\"dialogData.header; context: { $implicit: dialogData }\"></ng-container>\n    }\n  \n    <!-- Body -->\n    <mat-dialog-content class=\"dialog-content\">\n      @if(dialogData.formBody) {\n        <div class=\"dialog-body\">\n          <ng-container *ngTemplateOutlet=\"dialogData.formBody; context: { $implicit: dialogData }\"></ng-container>\n        </div>\n      }\n    </mat-dialog-content>\n  \n    <!-- Footer -->\n    @if(dialogData.formFooter) {\n      <mat-dialog-actions class=\"dialog-actions\">\n        <div class=\"dialog-footer\">\n          <ng-container *ngTemplateOutlet=\"dialogData.formFooter; context: { $implicit: dialogData }\"></ng-container>\n        </div>\n      </mat-dialog-actions>\n    }\n  \n  </div>\n\n}\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: "\n@if(dialogData.component){\n    <ng-container [ngComponentOutlet]=\"dialogData.component\"  [ngComponentOutletInputs]=\"{ data: dialogData }\"></ng-container>\n}\n@else{\n  <div class=\"dialog-container\">\n  \n    <!-- Header -->\n    @if(typeof dialogData.header == 'string') {\n      <div class=\"dialog-header\" mat-dialog-title>\n        <div class=\"dialog-header-left\">\n          <div class=\"dialog-icon-ring\">\n            <mat-icon class=\"dialog-icon\">\n              {{ dialogData.header.startsWith('Add') ? 'add_circle' : dialogData.header.startsWith('Edit') ? 'edit' : 'info' }}\n            </mat-icon>\n          </div>\n          <div class=\"dialog-title-group\">\n            <span class=\"dialog-mode-label\">\n              {{ dialogData.header.startsWith('Add') ? 'Creating New' : dialogData.header.startsWith('Edit') ? 'Edit' : '' }}\n            </span>\n            <span class=\"dialog-heading\"> {{ dialogData.header.startsWith('Add') ? dialogData.header.replace('Add','') : dialogData.header.startsWith('Edit') ? dialogData.header.replace('Edit','') : '' }}</span>\n          </div>\n        </div>\n        <button mat-icon-button class=\"dialog-close-btn\" mat-dialog-close>\n          <mat-icon>close</mat-icon>\n        </button>\n      </div>\n    } @else {\n      <ng-container *ngTemplateOutlet=\"dialogData.header; context: { $implicit: dialogData }\"></ng-container>\n    }\n  \n    <!-- Body -->\n    <mat-dialog-content class=\"dialog-content\">\n      @if(dialogData.formBody) {\n        <div class=\"dialog-body\">\n          <ng-container *ngTemplateOutlet=\"dialogData.formBody; context: { $implicit: dialogData }\"></ng-container>\n        </div>\n      }\n    </mat-dialog-content>\n  \n    <!-- Footer -->\n    @if(dialogData.formFooter) {\n      <mat-dialog-actions class=\"dialog-actions\">\n        <div class=\"dialog-footer\">\n          <ng-container *ngTemplateOutlet=\"dialogData.formFooter; context: { $implicit: dialogData }\"></ng-container>\n        </div>\n      </mat-dialog-actions>\n    }\n  \n  </div>\n\n}\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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DialogWrapper, decorators: [{
             type: Component,
-            args: [{ selector: 'dialog-wrapper', imports: [MatDialogModule, MatIconModule, NgTemplateOutlet, MatIconButton, NgComponentOutlet], template: "\n@if(dialogData.component){\n    <ng-container [ngComponentOutlet]=\"dialogData.component\"  [ngComponentOutletInputs]=\"{ data: dialogData }\"></ng-container>\n}\n@else{\n  <div class=\"dialog-container\">\n  \n    <!-- Header -->\n    @if(typeof dialogData.header == 'string') {\n      <div class=\"dialog-header\" mat-dialog-title>\n        <div class=\"dialog-header-left\">\n          <div class=\"dialog-icon-ring\">\n            <mat-icon class=\"dialog-icon\">\n              {{ dialogData.header.startsWith('Add') ? 'add_circle' : dialogData.header.startsWith('Edit') ? 'edit' : 'info' }}\n            </mat-icon>\n          </div>\n          <div class=\"dialog-title-group\">\n             <span class=\"dialog-mode-label\">\n              {{ dialogData.header.startsWith('Add') ? 'Creating New' : dialogData.header.startsWith('Edit') ? 'Edit' : '' }}\n            </span>\n            <span class=\"dialog-heading\"> {{ dialogData.header.startsWith('Add') ? dialogData.header.replace('Add','') : dialogData.header.startsWith('Edit') ? dialogData.header.replace('Edit','') : '' }}</span>\n          </div>\n        </div>\n        <button mat-icon-button class=\"dialog-close-btn\" mat-dialog-close>\n          <mat-icon>close</mat-icon>\n        </button>\n      </div>\n    } @else {\n      <ng-container *ngTemplateOutlet=\"dialogData.header; context: { $implicit: dialogData }\"></ng-container>\n    }\n  \n    <!-- Body -->\n    <mat-dialog-content class=\"dialog-content\">\n      @if(dialogData.formBody) {\n        <div class=\"dialog-body\">\n          <ng-container *ngTemplateOutlet=\"dialogData.formBody; context: { $implicit: dialogData }\"></ng-container>\n        </div>\n      }\n    </mat-dialog-content>\n  \n    <!-- Footer -->\n    @if(dialogData.formFooter) {\n      <mat-dialog-actions class=\"dialog-actions\">\n        <div class=\"dialog-footer\">\n          <ng-container *ngTemplateOutlet=\"dialogData.formFooter; context: { $implicit: dialogData }\"></ng-container>\n        </div>\n      </mat-dialog-actions>\n    }\n  \n  </div>\n\n}\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"] }]
+            args: [{ selector: 'dialog-wrapper', imports: [MatDialogModule, MatIconModule, NgTemplateOutlet, MatIconButton, NgComponentOutlet], template: "\n@if(dialogData.component){\n    <ng-container [ngComponentOutlet]=\"dialogData.component\"  [ngComponentOutletInputs]=\"{ data: dialogData }\"></ng-container>\n}\n@else{\n  <div class=\"dialog-container\">\n  \n    <!-- Header -->\n    @if(typeof dialogData.header == 'string') {\n      <div class=\"dialog-header\" mat-dialog-title>\n        <div class=\"dialog-header-left\">\n          <div class=\"dialog-icon-ring\">\n            <mat-icon class=\"dialog-icon\">\n              {{ dialogData.header.startsWith('Add') ? 'add_circle' : dialogData.header.startsWith('Edit') ? 'edit' : 'info' }}\n            </mat-icon>\n          </div>\n          <div class=\"dialog-title-group\">\n            <span class=\"dialog-mode-label\">\n              {{ dialogData.header.startsWith('Add') ? 'Creating New' : dialogData.header.startsWith('Edit') ? 'Edit' : '' }}\n            </span>\n            <span class=\"dialog-heading\"> {{ dialogData.header.startsWith('Add') ? dialogData.header.replace('Add','') : dialogData.header.startsWith('Edit') ? dialogData.header.replace('Edit','') : '' }}</span>\n          </div>\n        </div>\n        <button mat-icon-button class=\"dialog-close-btn\" mat-dialog-close>\n          <mat-icon>close</mat-icon>\n        </button>\n      </div>\n    } @else {\n      <ng-container *ngTemplateOutlet=\"dialogData.header; context: { $implicit: dialogData }\"></ng-container>\n    }\n  \n    <!-- Body -->\n    <mat-dialog-content class=\"dialog-content\">\n      @if(dialogData.formBody) {\n        <div class=\"dialog-body\">\n          <ng-container *ngTemplateOutlet=\"dialogData.formBody; context: { $implicit: dialogData }\"></ng-container>\n        </div>\n      }\n    </mat-dialog-content>\n  \n    <!-- Footer -->\n    @if(dialogData.formFooter) {\n      <mat-dialog-actions class=\"dialog-actions\">\n        <div class=\"dialog-footer\">\n          <ng-container *ngTemplateOutlet=\"dialogData.formFooter; context: { $implicit: dialogData }\"></ng-container>\n        </div>\n      </mat-dialog-actions>\n    }\n  \n  </div>\n\n}\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"] }]
         }], ctorParameters: () => [{ type: i1.MatDialogRef }, { type: Dialog, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -297,6 +297,482 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             args: [{ providedIn: 'root' }]
         }] });
 
+// Injected once per app lifetime — static flag avoids duplicate <style> tags.
+let _osl_sk_injected = false;
+// CSS is minified inline: zero runtime SCSS processing, one GPU-composited
+// keyframe (translateX uses the compositor thread, no layout/paint on each frame).
+const SKELETON_CSS = `
+.osl-sk-host{position:relative!important}
+.osl-sk-overlay{position:absolute;inset:0;pointer-events:none;overflow:hidden;background:var(--osl-sk-bg,#f8fafc)}
+.osl-sk-bone{position:absolute;background:var(--osl-sk-color,#e2e8f0);border-radius:var(--osl-sk-r,4px);overflow:hidden;will-change:transform,opacity}
+.osl-sk-bone::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,var(--osl-sk-hl,rgba(255,255,255,.6)) 50%,transparent 100%);transform:translateX(-100%);will-change:transform}
+.osl-sk-shimmer .osl-sk-bone::after{animation:_osl-sk-shimmer var(--osl-sk-dur,1.5s) ease-in-out infinite}
+.osl-sk-pulse .osl-sk-bone{animation:_osl-sk-pulse var(--osl-sk-dur,1.5s) ease-in-out infinite;animation-delay:var(--osl-sk-d,0s)}
+.osl-sk-wave .osl-sk-bone{animation:_osl-sk-pulse var(--osl-sk-dur,1.5s) ease-in-out infinite;animation-delay:var(--osl-sk-d,0s)}
+.osl-sk-none .osl-sk-bone::after{display:none}
+.osl-sk-host.osl-sk-active>*:not(.osl-sk-overlay){visibility:hidden}
+@keyframes _osl-sk-shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(200%)}}
+@keyframes _osl-sk-pulse{0%,100%{opacity:1}50%{opacity:.4}}
+`;
+// Keys whose changes require bone recomputation
+const LAYOUT_KEYS = new Set([
+    'type',
+    'rows',
+    'rowGap',
+    'circleSize',
+    'listItems',
+    'tableRows',
+    'tableCols',
+    'cardLines',
+    'minHeight',
+]);
+// ─── Directive ───────────────────────────────────────────────────────────────
+class OslSkeletonDirective {
+    el;
+    renderer;
+    zone;
+    platformId;
+    // ── Inputs ────────────────────────────────────────────────────────────────
+    /** Primary toggle — set true while data is loading */
+    loading = false;
+    /** Layout strategy (default: auto — mirrors host children) */
+    type = 'auto';
+    /** Animation style (default: shimmer) */
+    animation = 'shimmer';
+    /** Colour preset — overridden by oslSkeletonColor & oslSkeletonHighlight */
+    theme = 'light';
+    /** Override bone background colour (e.g. '#cbd5e1') */
+    color;
+    /** Override shimmer highlight colour (e.g. 'rgba(255,255,255,0.8)') */
+    highlight;
+    /** Override bone border-radius (e.g. '8px' or '50%') */
+    radius;
+    /** Text rows — used by type=text and type=avatar-text */
+    rows = 3;
+    /** Gap between text rows (px) */
+    rowGap = 10;
+    /** Overlay z-index */
+    zIndex = 10;
+    /** Delay before skeleton appears (ms) — prevents flicker on fast responses */
+    delay = 0;
+    /** Animation cycle duration (ms) */
+    duration = 1500;
+    /** Minimum overlay height when host has no size yet (px) */
+    minHeight;
+    /** Re-read host DOM on every show() instead of using cached layout */
+    forceReread = false;
+    /** Circle diameter — used by type=circle and avatar in list/avatar-text (px) */
+    circleSize = 40;
+    /** Item count for type=list */
+    listItems = 4;
+    /** Row count for type=table (data rows, excluding header) */
+    tableRows = 5;
+    /** Column count for type=table */
+    tableCols = 4;
+    /** Body text lines for type=card */
+    cardLines = 3;
+    /** Overlay background colour — should match your page/card background to cover real content */
+    bgColor;
+    // ── State ─────────────────────────────────────────────────────────────────
+    overlay = null;
+    cachedBones = null;
+    delayTimer = null;
+    rafId = 0;
+    // ── Lifecycle ─────────────────────────────────────────────────────────────
+    constructor(el, renderer, zone, platformId) {
+        this.el = el;
+        this.renderer = renderer;
+        this.zone = zone;
+        this.platformId = platformId;
+        if (isPlatformBrowser(this.platformId)) {
+            OslSkeletonDirective.injectStyles();
+        }
+    }
+    ngOnChanges(changes) {
+        if (!isPlatformBrowser(this.platformId))
+            return;
+        // Bust bone cache when any layout-affecting input changes
+        for (const key of Object.keys(changes)) {
+            if (LAYOUT_KEYS.has(key)) {
+                this.cachedBones = null;
+                break;
+            }
+        }
+        if ('loading' in changes) {
+            this.loading ? this.show() : this.hide();
+        }
+        else if (this.loading && this.overlay) {
+            // Visual config changed while skeleton is visible — re-apply without toggling
+            this.applyConfig();
+            this.renderBones();
+        }
+    }
+    ngOnDestroy() {
+        this.cancelPending();
+        if (this.overlay?.parentNode)
+            this.overlay.parentNode.removeChild(this.overlay);
+        this.overlay = null;
+        this.cachedBones = null;
+        this.renderer.removeClass(this.el.nativeElement, 'osl-sk-host');
+        this.renderer.removeClass(this.el.nativeElement, 'osl-sk-active');
+    }
+    // ── Visibility control ────────────────────────────────────────────────────
+    show() {
+        this.cancelPending();
+        if (this.delay > 0) {
+            this.delayTimer = setTimeout(() => this.doRender(), this.delay);
+        }
+        else {
+            this.doRender();
+        }
+    }
+    hide() {
+        this.cancelPending();
+        if (this.overlay?.parentNode)
+            this.overlay.parentNode.removeChild(this.overlay);
+        this.renderer.removeClass(this.el.nativeElement, 'osl-sk-host');
+        this.renderer.removeClass(this.el.nativeElement, 'osl-sk-active');
+    }
+    // ── Rendering ─────────────────────────────────────────────────────────────
+    doRender() {
+        this.zone.runOutsideAngular(() => {
+            // ── Synchronous: hide real content this JS tick ───────────────────────
+            // Runs before the browser gets a chance to paint, so real content is
+            // never visible even for a single frame.
+            this.ensureOverlay();
+            this.applyConfig();
+            this.renderer.addClass(this.el.nativeElement, 'osl-sk-host');
+            this.renderer.addClass(this.el.nativeElement, 'osl-sk-active');
+            this.el.nativeElement.appendChild(this.overlay);
+            // ── RAF: compute + paint bones ────────────────────────────────────────
+            // By the time RAF fires, Angular has finished rendering all children into
+            // the DOM, so getBoundingClientRect() in autoDetect() returns real sizes.
+            this.rafId = requestAnimationFrame(() => {
+                if (!this.overlay?.parentNode)
+                    return; // hide() was called before RAF fired
+                if (!this.cachedBones || this.forceReread) {
+                    this.cachedBones = this.computeBones();
+                }
+                this.renderBones();
+            });
+        });
+    }
+    ensureOverlay() {
+        if (!this.overlay) {
+            this.overlay = document.createElement('div');
+        }
+    }
+    applyConfig() {
+        const ov = this.overlay;
+        // Reset to known baseline before adding animation class
+        ov.className = `osl-sk-overlay osl-sk-${this.animation}`;
+        const dark = this.theme === 'dark';
+        const parts = [
+            `--osl-sk-dur:${this.duration}ms`,
+            `--osl-sk-color:${this.color ?? (dark ? '#374151' : '#e2e8f0')}`,
+            `--osl-sk-bg:${this.bgColor ?? (dark ? '#1f2937' : '#f8fafc')}`,
+            `--osl-sk-hl:${this.highlight ?? (dark ? 'rgba(255,255,255,.1)' : 'rgba(255,255,255,.6)')}`,
+            `z-index:${this.zIndex}`,
+        ];
+        if (this.radius)
+            parts.push(`--osl-sk-r:${this.radius}`);
+        // Single cssText assignment avoids repeated style flushes
+        ov.style.cssText = parts.join(';');
+    }
+    renderBones() {
+        const ov = this.overlay;
+        // Clear previous bones without innerHTML (avoids serialisation overhead)
+        while (ov.firstChild)
+            ov.removeChild(ov.firstChild);
+        if (!this.cachedBones?.length)
+            return;
+        const isWave = this.animation === 'wave';
+        // DocumentFragment = single reflow when appended
+        const frag = document.createDocumentFragment();
+        this.cachedBones.forEach((b, i) => {
+            const div = document.createElement('div');
+            div.className = 'osl-sk-bone';
+            let css = `top:${b.top}px;left:${b.left}px;width:${b.width}px;height:${b.height}px;border-radius:${b.radius}`;
+            if (isWave)
+                css += `;--osl-sk-d:${b.delay ?? i * 0.1}s`;
+            div.style.cssText = css;
+            frag.appendChild(div);
+        });
+        ov.appendChild(frag);
+    }
+    // ── Bone computation ──────────────────────────────────────────────────────
+    computeBones() {
+        return this.type === 'auto' ? this.autoDetect() : this.predefined();
+    }
+    /**
+     * Reads the host's direct children, computes their bounding boxes in a
+     * single batched pass (all reads before writes), and creates matching bones.
+     * Falls back to predefined() when host is empty.
+     */
+    autoDetect() {
+        const host = this.el.nativeElement;
+        const kids = Array.from(host.children).filter((c) => !c.classList.contains('osl-sk-overlay'));
+        if (!kids.length)
+            return this.predefined();
+        // ── Batch reads (no write between these) ──
+        const hostRect = host.getBoundingClientRect();
+        const rects = kids.map((k) => k.getBoundingClientRect());
+        // ── Build bone descriptors ──
+        const bones = [];
+        rects.forEach((r, i) => {
+            if (r.width === 0 && r.height === 0)
+                return;
+            bones.push({
+                top: r.top - hostRect.top,
+                left: r.left - hostRect.left,
+                width: r.width,
+                height: r.height,
+                radius: this.inferRadius(kids[i]),
+                delay: i * 0.1,
+            });
+        });
+        return bones.length ? bones : this.predefined();
+    }
+    /** Classifies an element's shape without triggering getComputedStyle */
+    inferRadius(el) {
+        const cls = el.className ?? '';
+        const tag = el.tagName.toLowerCase();
+        if (tag === 'mat-icon' || /\bcircle\b|\bround\b|\bavatar\b/.test(cls))
+            return '50%';
+        return '4px';
+    }
+    /** Generates a fully predefined bone layout for the current type */
+    predefined() {
+        const host = this.el.nativeElement;
+        const w = host.offsetWidth || 300;
+        const rh = host.offsetHeight;
+        const h = rh > 20 ? rh : (this.minHeight ?? 200);
+        const { rows, rowGap, circleSize, listItems, tableRows, tableCols, cardLines } = this;
+        switch (this.type) {
+            // ── Circle ────────────────────────────────────────────────────────────
+            case 'circle':
+                return [{ top: 0, left: 0, width: circleSize, height: circleSize, radius: '50%' }];
+            // ── Rect ──────────────────────────────────────────────────────────────
+            case 'rect':
+                return [{ top: 0, left: 0, width: w, height: h, radius: '4px' }];
+            // ── Text ──────────────────────────────────────────────────────────────
+            case 'text': {
+                const lh = 14;
+                return Array.from({ length: rows }, (_, i) => ({
+                    top: i * (lh + rowGap),
+                    left: 0,
+                    width: i === rows - 1 ? Math.round(w * 0.6) : w,
+                    height: lh,
+                    radius: '4px',
+                    delay: i * 0.1,
+                }));
+            }
+            // ── Card ──────────────────────────────────────────────────────────────
+            case 'card': {
+                const imgH = Math.round(h * 0.45);
+                const lh = 14;
+                const bones = [
+                    { top: 0, left: 0, width: w, height: imgH, radius: '4px', delay: 0 },
+                ];
+                for (let i = 0; i < cardLines; i++) {
+                    bones.push({
+                        top: imgH + 16 + i * (lh + rowGap),
+                        left: 0,
+                        width: i === cardLines - 1 ? Math.round(w * 0.5) : Math.round(w * 0.9),
+                        height: lh,
+                        radius: '4px',
+                        delay: (i + 1) * 0.1,
+                    });
+                }
+                return bones;
+            }
+            // ── List ──────────────────────────────────────────────────────────────
+            case 'list': {
+                const itemH = Math.max(circleSize + 12, 52);
+                const gap = 12;
+                const bones = [];
+                for (let i = 0; i < listItems; i++) {
+                    const t = i * (itemH + gap);
+                    // Avatar
+                    bones.push({
+                        top: t,
+                        left: 0,
+                        width: circleSize,
+                        height: circleSize,
+                        radius: '50%',
+                        delay: i * 0.06,
+                    });
+                    // Title
+                    bones.push({
+                        top: t,
+                        left: circleSize + 12,
+                        width: Math.round(w * 0.5),
+                        height: 14,
+                        radius: '4px',
+                        delay: i * 0.06,
+                    });
+                    // Subtitle
+                    bones.push({
+                        top: t + 22,
+                        left: circleSize + 12,
+                        width: Math.round(w * 0.35),
+                        height: 12,
+                        radius: '4px',
+                        delay: i * 0.06 + 0.05,
+                    });
+                }
+                return bones;
+            }
+            // ── Table ─────────────────────────────────────────────────────────────
+            case 'table': {
+                const rh2 = 36;
+                const cw = Math.floor(w / tableCols);
+                const bones = [];
+                // Header
+                for (let c = 0; c < tableCols; c++) {
+                    bones.push({
+                        top: 0,
+                        left: c * cw + 4,
+                        width: cw - 8,
+                        height: rh2,
+                        radius: '4px',
+                        delay: c * 0.05,
+                    });
+                }
+                // Data rows
+                for (let r = 0; r < tableRows; r++) {
+                    for (let c = 0; c < tableCols; c++) {
+                        bones.push({
+                            top: (r + 1) * (rh2 + 4) + 4,
+                            left: c * cw + 4,
+                            width: cw - 8,
+                            height: rh2 - 8,
+                            radius: '4px',
+                            delay: (c + r * tableCols) * 0.03,
+                        });
+                    }
+                }
+                return bones;
+            }
+            // ── Avatar + text ─────────────────────────────────────────────────────
+            case 'avatar-text': {
+                const bones = [
+                    { top: 0, left: 0, width: circleSize, height: circleSize, radius: '50%', delay: 0 },
+                ];
+                const tLeft = circleSize + 12;
+                const tWidth = w - tLeft;
+                const lh = 14;
+                for (let i = 0; i < rows; i++) {
+                    bones.push({
+                        top: i * (lh + rowGap),
+                        left: tLeft,
+                        width: i === rows - 1 ? Math.round(tWidth * 0.6) : tWidth,
+                        height: lh,
+                        radius: '4px',
+                        delay: (i + 1) * 0.1,
+                    });
+                }
+                return bones;
+            }
+            // ── Fallback ──────────────────────────────────────────────────────────
+            default:
+                return [{ top: 0, left: 0, width: w, height: h, radius: '4px' }];
+        }
+    }
+    // ── Utilities ─────────────────────────────────────────────────────────────
+    cancelPending() {
+        if (this.delayTimer) {
+            clearTimeout(this.delayTimer);
+            this.delayTimer = null;
+        }
+        if (this.rafId) {
+            cancelAnimationFrame(this.rafId);
+            this.rafId = 0;
+        }
+    }
+    static injectStyles() {
+        if (_osl_sk_injected)
+            return;
+        _osl_sk_injected = true;
+        const style = document.createElement('style');
+        style.id = 'osl-sk-styles';
+        style.textContent = SKELETON_CSS;
+        document.head.appendChild(style);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslSkeletonDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: OslSkeletonDirective, isStandalone: false, selector: "[oslSkeleton]", inputs: { loading: ["oslSkeleton", "loading"], type: ["oslSkeletonType", "type"], animation: ["oslSkeletonAnimation", "animation"], theme: ["oslSkeletonTheme", "theme"], color: ["oslSkeletonColor", "color"], highlight: ["oslSkeletonHighlight", "highlight"], radius: ["oslSkeletonRadius", "radius"], rows: ["oslSkeletonRows", "rows"], rowGap: ["oslSkeletonRowGap", "rowGap"], zIndex: ["oslSkeletonZIndex", "zIndex"], delay: ["oslSkeletonDelay", "delay"], duration: ["oslSkeletonDuration", "duration"], minHeight: ["oslSkeletonMinHeight", "minHeight"], forceReread: ["oslSkeletonForceReread", "forceReread"], circleSize: ["oslSkeletonCircleSize", "circleSize"], listItems: ["oslSkeletonListItems", "listItems"], tableRows: ["oslSkeletonTableRows", "tableRows"], tableCols: ["oslSkeletonTableCols", "tableCols"], cardLines: ["oslSkeletonCardLines", "cardLines"], bgColor: ["oslSkeletonBgColor", "bgColor"] }, usesOnChanges: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslSkeletonDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[oslSkeleton]',
+                    standalone: false
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }], propDecorators: { loading: [{
+                type: Input,
+                args: ['oslSkeleton']
+            }], type: [{
+                type: Input,
+                args: ['oslSkeletonType']
+            }], animation: [{
+                type: Input,
+                args: ['oslSkeletonAnimation']
+            }], theme: [{
+                type: Input,
+                args: ['oslSkeletonTheme']
+            }], color: [{
+                type: Input,
+                args: ['oslSkeletonColor']
+            }], highlight: [{
+                type: Input,
+                args: ['oslSkeletonHighlight']
+            }], radius: [{
+                type: Input,
+                args: ['oslSkeletonRadius']
+            }], rows: [{
+                type: Input,
+                args: ['oslSkeletonRows']
+            }], rowGap: [{
+                type: Input,
+                args: ['oslSkeletonRowGap']
+            }], zIndex: [{
+                type: Input,
+                args: ['oslSkeletonZIndex']
+            }], delay: [{
+                type: Input,
+                args: ['oslSkeletonDelay']
+            }], duration: [{
+                type: Input,
+                args: ['oslSkeletonDuration']
+            }], minHeight: [{
+                type: Input,
+                args: ['oslSkeletonMinHeight']
+            }], forceReread: [{
+                type: Input,
+                args: ['oslSkeletonForceReread']
+            }], circleSize: [{
+                type: Input,
+                args: ['oslSkeletonCircleSize']
+            }], listItems: [{
+                type: Input,
+                args: ['oslSkeletonListItems']
+            }], tableRows: [{
+                type: Input,
+                args: ['oslSkeletonTableRows']
+            }], tableCols: [{
+                type: Input,
+                args: ['oslSkeletonTableCols']
+            }], cardLines: [{
+                type: Input,
+                args: ['oslSkeletonCardLines']
+            }], bgColor: [{
+                type: Input,
+                args: ['oslSkeletonBgColor']
+            }] } });
+
 class Oslinput {
     label = '';
     required = false;
@@ -312,6 +788,7 @@ class Oslinput {
     maxLength = null;
     prefixIcon = '';
     suffixIcon = '';
+    skeletonLoading = false;
     modelChange = new EventEmitter();
     changeEv = new EventEmitter();
     showPassword = false;
@@ -364,11 +841,11 @@ 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" }, outputs: { modelChange: "modelChange", changeEv: "changeEv" }, ngImport: i0, template: "<div class=\"d-flex flex-column\">\n    <label class=\"label\" [class.txt-clr-red]=\"myField.touched && myField.invalid\">\n        {{label}} <span class=\"txt-clr-red\">{{required?'*':''}}</span>\n    </label>\n\n    <div class=\"input-wrapper\" [class.plain]=\"!hasWrapper\" [class.error]=\"myField.touched && myField.invalid\" [class.input-disabled]=\"disabled\">\n        @if(prefixIcon) {\n            <mat-icon class=\"input-icon prefix-icon\">{{prefixIcon}}</mat-icon>\n        }\n        <input\n            [type]=\"inputType\"\n            [ngModel]=\"model\"\n            (ngModelChange)=\"onModelChange($event)\"\n            (change)=\"onChange()\"\n            [required]=\"required\"\n            [disabled]=\"disabled\"\n            [placeholder]=\"placeholder\"\n            [attr.min]=\"min || null\"\n            [attr.max]=\"max || null\"\n            [attr.minlength]=\"minLength\"\n            [attr.maxlength]=\"maxLength\"\n            [email]=\"type === 'email'\"\n            #myField=\"ngModel\"\n            class=\"inner-input\"\n        >\n        @if(type === 'password') {\n            <button type=\"button\" class=\"password-toggle\" (click)=\"togglePassword()\" tabindex=\"-1\">\n                <mat-icon>{{showPassword ? 'visibility_off' : 'visibility'}}</mat-icon>\n            </button>\n        }\n        @if(suffixIcon && type !== 'password') {\n            <mat-icon class=\"input-icon suffix-icon\">{{suffixIcon}}</mat-icon>\n        }\n    </div>\n\n    @if(myField.touched && myField.invalid) {\n        @if(myField.errors?.['required']) {\n            <mat-hint class=\"hint\">{{label}} is Required!</mat-hint>\n        } @else if(myField.errors?.['email']) {\n            <mat-hint class=\"hint\">Please enter a valid email address.</mat-hint>\n        } @else if(myField.errors?.['minlength']) {\n            <mat-hint class=\"hint\">Minimum {{minLength}} characters required.</mat-hint>\n        } @else if(myField.errors?.['maxlength']) {\n            <mat-hint class=\"hint\">Maximum {{maxLength}} characters allowed.</mat-hint>\n        } @else if(myField.errors?.['min']) {\n            <mat-hint class=\"hint\">Value must be at least {{min}}.</mat-hint>\n        } @else if(myField.errors?.['max']) {\n            <mat-hint class=\"hint\">Value must be at most {{max}}.</mat-hint>\n        }\n    }\n</div>\n", styles: [".label{font-size:var(--osl-label-font-size);margin-bottom:5px}.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: 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: 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" }, outputs: { modelChange: "modelChange", changeEv: "changeEv" }, ngImport: i0, template: "<div class=\"d-flex flex-column\">\n    <div [oslSkeleton]=\"skeletonLoading\">\n    <label class=\"label\" [class.txt-clr-red]=\"myField.touched && myField.invalid\">\n        <span [oslSkeleton]=\"skeletonLoading\">{{label}} <span class=\"txt-clr-red\">{{required?'*':''}}</span></span>\n    </label>\n    </div>\n\n    <div class=\"input-wrapper\" [oslSkeleton]=\"skeletonLoading\" [class.plain]=\"!hasWrapper\" [class.error]=\"myField.touched && myField.invalid\" [class.input-disabled]=\"disabled\">\n        @if(prefixIcon) {\n            <mat-icon class=\"input-icon prefix-icon\">{{prefixIcon}}</mat-icon>\n        }\n        <input\n    \n            [type]=\"inputType\"\n            [ngModel]=\"model\"\n            (ngModelChange)=\"onModelChange($event)\"\n            (change)=\"onChange()\"\n            [required]=\"required\"\n            [disabled]=\"disabled\"\n            [placeholder]=\"placeholder\"\n            [attr.min]=\"min || null\"\n            [attr.max]=\"max || null\"\n            [attr.minlength]=\"minLength\"\n            [attr.maxlength]=\"maxLength\"\n            [email]=\"type === 'email'\"\n            #myField=\"ngModel\"\n            class=\"inner-input\"\n        >\n        @if(type === 'password') {\n            <button type=\"button\" class=\"password-toggle\" (click)=\"togglePassword()\" tabindex=\"-1\">\n                <mat-icon>{{showPassword ? 'visibility_off' : 'visibility'}}</mat-icon>\n            </button>\n        }\n        @if(suffixIcon && type !== 'password') {\n            <mat-icon class=\"input-icon suffix-icon\">{{suffixIcon}}</mat-icon>\n        }\n    </div>\n\n    @if(myField.touched && myField.invalid) {\n        @if(myField.errors?.['required']) {\n            <mat-hint class=\"hint\">{{label}} is Required!</mat-hint>\n        } @else if(myField.errors?.['email']) {\n            <mat-hint class=\"hint\">Please enter a valid email address.</mat-hint>\n        } @else if(myField.errors?.['minlength']) {\n            <mat-hint class=\"hint\">Minimum {{minLength}} characters required.</mat-hint>\n        } @else if(myField.errors?.['maxlength']) {\n            <mat-hint class=\"hint\">Maximum {{maxLength}} characters allowed.</mat-hint>\n        } @else if(myField.errors?.['min']) {\n            <mat-hint class=\"hint\">Value must be at least {{min}}.</mat-hint>\n        } @else if(myField.errors?.['max']) {\n            <mat-hint class=\"hint\">Value must be at most {{max}}.</mat-hint>\n        }\n    }\n</div>\n", styles: [".label{font-size:var(--osl-label-font-size);margin-bottom:5px}.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: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: OslSkeletonDirective, selector: "[oslSkeleton]", inputs: ["oslSkeleton", "oslSkeletonType", "oslSkeletonAnimation", "oslSkeletonTheme", "oslSkeletonColor", "oslSkeletonHighlight", "oslSkeletonRadius", "oslSkeletonRows", "oslSkeletonRowGap", "oslSkeletonZIndex", "oslSkeletonDelay", "oslSkeletonDuration", "oslSkeletonMinHeight", "oslSkeletonForceReread", "oslSkeletonCircleSize", "oslSkeletonListItems", "oslSkeletonTableRows", "oslSkeletonTableCols", "oslSkeletonCardLines", "oslSkeletonBgColor"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: Oslinput, decorators: [{
             type: Component,
-            args: [{ selector: 'osl-input', standalone: false, template: "<div class=\"d-flex flex-column\">\n    <label class=\"label\" [class.txt-clr-red]=\"myField.touched && myField.invalid\">\n        {{label}} <span class=\"txt-clr-red\">{{required?'*':''}}</span>\n    </label>\n\n    <div class=\"input-wrapper\" [class.plain]=\"!hasWrapper\" [class.error]=\"myField.touched && myField.invalid\" [class.input-disabled]=\"disabled\">\n        @if(prefixIcon) {\n            <mat-icon class=\"input-icon prefix-icon\">{{prefixIcon}}</mat-icon>\n        }\n        <input\n            [type]=\"inputType\"\n            [ngModel]=\"model\"\n            (ngModelChange)=\"onModelChange($event)\"\n            (change)=\"onChange()\"\n            [required]=\"required\"\n            [disabled]=\"disabled\"\n            [placeholder]=\"placeholder\"\n            [attr.min]=\"min || null\"\n            [attr.max]=\"max || null\"\n            [attr.minlength]=\"minLength\"\n            [attr.maxlength]=\"maxLength\"\n            [email]=\"type === 'email'\"\n            #myField=\"ngModel\"\n            class=\"inner-input\"\n        >\n        @if(type === 'password') {\n            <button type=\"button\" class=\"password-toggle\" (click)=\"togglePassword()\" tabindex=\"-1\">\n                <mat-icon>{{showPassword ? 'visibility_off' : 'visibility'}}</mat-icon>\n            </button>\n        }\n        @if(suffixIcon && type !== 'password') {\n            <mat-icon class=\"input-icon suffix-icon\">{{suffixIcon}}</mat-icon>\n        }\n    </div>\n\n    @if(myField.touched && myField.invalid) {\n        @if(myField.errors?.['required']) {\n            <mat-hint class=\"hint\">{{label}} is Required!</mat-hint>\n        } @else if(myField.errors?.['email']) {\n            <mat-hint class=\"hint\">Please enter a valid email address.</mat-hint>\n        } @else if(myField.errors?.['minlength']) {\n            <mat-hint class=\"hint\">Minimum {{minLength}} characters required.</mat-hint>\n        } @else if(myField.errors?.['maxlength']) {\n            <mat-hint class=\"hint\">Maximum {{maxLength}} characters allowed.</mat-hint>\n        } @else if(myField.errors?.['min']) {\n            <mat-hint class=\"hint\">Value must be at least {{min}}.</mat-hint>\n        } @else if(myField.errors?.['max']) {\n            <mat-hint class=\"hint\">Value must be at most {{max}}.</mat-hint>\n        }\n    }\n</div>\n", styles: [".label{font-size:var(--osl-label-font-size);margin-bottom:5px}.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"] }]
+            args: [{ selector: 'osl-input', standalone: false, template: "<div class=\"d-flex flex-column\">\n    <div [oslSkeleton]=\"skeletonLoading\">\n    <label class=\"label\" [class.txt-clr-red]=\"myField.touched && myField.invalid\">\n        <span [oslSkeleton]=\"skeletonLoading\">{{label}} <span class=\"txt-clr-red\">{{required?'*':''}}</span></span>\n    </label>\n    </div>\n\n    <div class=\"input-wrapper\" [oslSkeleton]=\"skeletonLoading\" [class.plain]=\"!hasWrapper\" [class.error]=\"myField.touched && myField.invalid\" [class.input-disabled]=\"disabled\">\n        @if(prefixIcon) {\n            <mat-icon class=\"input-icon prefix-icon\">{{prefixIcon}}</mat-icon>\n        }\n        <input\n    \n            [type]=\"inputType\"\n            [ngModel]=\"model\"\n            (ngModelChange)=\"onModelChange($event)\"\n            (change)=\"onChange()\"\n            [required]=\"required\"\n            [disabled]=\"disabled\"\n            [placeholder]=\"placeholder\"\n            [attr.min]=\"min || null\"\n            [attr.max]=\"max || null\"\n            [attr.minlength]=\"minLength\"\n            [attr.maxlength]=\"maxLength\"\n            [email]=\"type === 'email'\"\n            #myField=\"ngModel\"\n            class=\"inner-input\"\n        >\n        @if(type === 'password') {\n            <button type=\"button\" class=\"password-toggle\" (click)=\"togglePassword()\" tabindex=\"-1\">\n                <mat-icon>{{showPassword ? 'visibility_off' : 'visibility'}}</mat-icon>\n            </button>\n        }\n        @if(suffixIcon && type !== 'password') {\n            <mat-icon class=\"input-icon suffix-icon\">{{suffixIcon}}</mat-icon>\n        }\n    </div>\n\n    @if(myField.touched && myField.invalid) {\n        @if(myField.errors?.['required']) {\n            <mat-hint class=\"hint\">{{label}} is Required!</mat-hint>\n        } @else if(myField.errors?.['email']) {\n            <mat-hint class=\"hint\">Please enter a valid email address.</mat-hint>\n        } @else if(myField.errors?.['minlength']) {\n            <mat-hint class=\"hint\">Minimum {{minLength}} characters required.</mat-hint>\n        } @else if(myField.errors?.['maxlength']) {\n            <mat-hint class=\"hint\">Maximum {{maxLength}} characters allowed.</mat-hint>\n        } @else if(myField.errors?.['min']) {\n            <mat-hint class=\"hint\">Value must be at least {{min}}.</mat-hint>\n        } @else if(myField.errors?.['max']) {\n            <mat-hint class=\"hint\">Value must be at most {{max}}.</mat-hint>\n        }\n    }\n</div>\n", styles: [".label{font-size:var(--osl-label-font-size);margin-bottom:5px}.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"] }]
         }], propDecorators: { label: [{
                 type: Input,
                 args: ['label']
@@ -408,6 +885,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             }], suffixIcon: [{
                 type: Input,
                 args: ['suffixIcon']
+            }], skeletonLoading: [{
+                type: Input,
+                args: ['skeletonLoading']
             }], modelChange: [{
                 type: Output
             }], changeEv: [{
@@ -427,6 +907,7 @@ class Osltextarea {
     resize = 'none';
     modelChange = new EventEmitter();
     changeEv = new EventEmitter();
+    skeletonLoading = false;
     get currentLength() {
         return this.model ? String(this.model).length : 0;
     }
@@ -443,11 +924,11 @@ 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" }, outputs: { modelChange: "modelChange", changeEv: "changeEv" }, ngImport: i0, template: "<div class=\"d-flex flex-column\">\n    <label class=\"label\" [class.txt-clr-red]=\"myField.touched && myField.invalid\">\n        {{label}} <span class=\"txt-clr-red\">{{required?'*':''}}</span>\n    </label>\n    <textarea\n        [rows]=\"rows\"\n        [ngModel]=\"model\"\n        (ngModelChange)=\"onModelChange($event)\"\n        (change)=\"changeEv.emit(model)\"\n        [required]=\"required\"\n        [disabled]=\"disabled\"\n        [placeholder]=\"placeholder\"\n        [attr.maxlength]=\"maxLength\"\n        [attr.minlength]=\"minLength\"\n        [style.resize]=\"resize\"\n        #myField=\"ngModel\"\n        [class.error]=\"myField.touched && myField.invalid\"\n    ></textarea>\n    <div class=\"textarea-footer\">\n        @if(myField.touched && myField.invalid) {\n            @if(myField.errors?.['required']) {\n                <mat-hint class=\"hint\">{{label}} is Required!</mat-hint>\n            } @else if(myField.errors?.['minlength']) {\n                <mat-hint class=\"hint\">Minimum {{minLength}} characters required.</mat-hint>\n            } @else if(myField.errors?.['maxlength']) {\n                <mat-hint class=\"hint\">Maximum {{maxLength}} characters allowed.</mat-hint>\n            }\n        } @else {\n            <span></span>\n        }\n        @if(showCounter) {\n            <span class=\"char-counter\" [class.counter-limit]=\"currentLength >= maxLength!\">\n                {{currentLength}}/{{maxLength}}\n            </span>\n        }\n    </div>\n</div>\n", styles: [".label{font-size:var(--osl-label-font-size);margin-bottom:5px}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"] }] });
+    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" }, outputs: { modelChange: "modelChange", changeEv: "changeEv" }, ngImport: i0, template: "<div class=\"d-flex flex-column\">\n    <div  [oslSkeleton]=\"skeletonLoading\">\n        <label class=\"label\" [class.txt-clr-red]=\"myField.touched && myField.invalid\">\n            {{label}} <span class=\"txt-clr-red\">{{required?'*':''}}</span>\n        </label>\n\n    </div>\n    <div [oslSkeleton]=\"skeletonLoading\">\n    <textarea\n        [rows]=\"rows\"\n        [ngModel]=\"model\"\n        (ngModelChange)=\"onModelChange($event)\"\n        (change)=\"changeEv.emit(model)\"\n        [required]=\"required\"\n        [disabled]=\"disabled\"\n        [placeholder]=\"placeholder\"\n        [attr.maxlength]=\"maxLength\"\n        [attr.minlength]=\"minLength\"\n        [style.resize]=\"resize\"\n        #myField=\"ngModel\"\n        [class.error]=\"myField.touched && myField.invalid\"\n    ></textarea>\n    </div>\n    <div class=\"textarea-footer\">\n        @if(myField.touched && myField.invalid) {\n            @if(myField.errors?.['required']) {\n                <mat-hint class=\"hint\">{{label}} is Required!</mat-hint>\n            } @else if(myField.errors?.['minlength']) {\n                <mat-hint class=\"hint\">Minimum {{minLength}} characters required.</mat-hint>\n            } @else if(myField.errors?.['maxlength']) {\n                <mat-hint class=\"hint\">Maximum {{maxLength}} characters allowed.</mat-hint>\n            }\n        } @else {\n            <span></span>\n        }\n        @if(showCounter) {\n            <span class=\"char-counter\" [class.counter-limit]=\"currentLength >= maxLength!\">\n                {{currentLength}}/{{maxLength}}\n            </span>\n        }\n    </div>\n</div>\n", styles: [".label{font-size:var(--osl-label-font-size);margin-bottom:5px}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,
-            args: [{ selector: 'osl-textarea', standalone: false, template: "<div class=\"d-flex flex-column\">\n    <label class=\"label\" [class.txt-clr-red]=\"myField.touched && myField.invalid\">\n        {{label}} <span class=\"txt-clr-red\">{{required?'*':''}}</span>\n    </label>\n    <textarea\n        [rows]=\"rows\"\n        [ngModel]=\"model\"\n        (ngModelChange)=\"onModelChange($event)\"\n        (change)=\"changeEv.emit(model)\"\n        [required]=\"required\"\n        [disabled]=\"disabled\"\n        [placeholder]=\"placeholder\"\n        [attr.maxlength]=\"maxLength\"\n        [attr.minlength]=\"minLength\"\n        [style.resize]=\"resize\"\n        #myField=\"ngModel\"\n        [class.error]=\"myField.touched && myField.invalid\"\n    ></textarea>\n    <div class=\"textarea-footer\">\n        @if(myField.touched && myField.invalid) {\n            @if(myField.errors?.['required']) {\n                <mat-hint class=\"hint\">{{label}} is Required!</mat-hint>\n            } @else if(myField.errors?.['minlength']) {\n                <mat-hint class=\"hint\">Minimum {{minLength}} characters required.</mat-hint>\n            } @else if(myField.errors?.['maxlength']) {\n                <mat-hint class=\"hint\">Maximum {{maxLength}} characters allowed.</mat-hint>\n            }\n        } @else {\n            <span></span>\n        }\n        @if(showCounter) {\n            <span class=\"char-counter\" [class.counter-limit]=\"currentLength >= maxLength!\">\n                {{currentLength}}/{{maxLength}}\n            </span>\n        }\n    </div>\n</div>\n", styles: [".label{font-size:var(--osl-label-font-size);margin-bottom:5px}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"] }]
+            args: [{ selector: 'osl-textarea', standalone: false, template: "<div class=\"d-flex flex-column\">\n    <div  [oslSkeleton]=\"skeletonLoading\">\n        <label class=\"label\" [class.txt-clr-red]=\"myField.touched && myField.invalid\">\n            {{label}} <span class=\"txt-clr-red\">{{required?'*':''}}</span>\n        </label>\n\n    </div>\n    <div [oslSkeleton]=\"skeletonLoading\">\n    <textarea\n        [rows]=\"rows\"\n        [ngModel]=\"model\"\n        (ngModelChange)=\"onModelChange($event)\"\n        (change)=\"changeEv.emit(model)\"\n        [required]=\"required\"\n        [disabled]=\"disabled\"\n        [placeholder]=\"placeholder\"\n        [attr.maxlength]=\"maxLength\"\n        [attr.minlength]=\"minLength\"\n        [style.resize]=\"resize\"\n        #myField=\"ngModel\"\n        [class.error]=\"myField.touched && myField.invalid\"\n    ></textarea>\n    </div>\n    <div class=\"textarea-footer\">\n        @if(myField.touched && myField.invalid) {\n            @if(myField.errors?.['required']) {\n                <mat-hint class=\"hint\">{{label}} is Required!</mat-hint>\n            } @else if(myField.errors?.['minlength']) {\n                <mat-hint class=\"hint\">Minimum {{minLength}} characters required.</mat-hint>\n            } @else if(myField.errors?.['maxlength']) {\n                <mat-hint class=\"hint\">Maximum {{maxLength}} characters allowed.</mat-hint>\n            }\n        } @else {\n            <span></span>\n        }\n        @if(showCounter) {\n            <span class=\"char-counter\" [class.counter-limit]=\"currentLength >= maxLength!\">\n                {{currentLength}}/{{maxLength}}\n            </span>\n        }\n    </div>\n</div>\n", styles: [".label{font-size:var(--osl-label-font-size);margin-bottom:5px}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"] }]
         }], propDecorators: { label: [{
                 type: Input,
                 args: ['label']
@@ -482,6 +963,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 type: Output
             }], changeEv: [{
                 type: Output
+            }], skeletonLoading: [{
+                type: Input,
+                args: ['skeletonLoading']
             }] } });
 
 class OslSelect {
@@ -495,6 +979,7 @@ class OslSelect {
     placeholder = 'Select...';
     loading = false;
     clearable = false;
+    skeletonLoading = false;
     modelChange = new EventEmitter();
     changeEv = new EventEmitter();
     getDisplay(item) {
@@ -520,11 +1005,11 @@ 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" }, outputs: { modelChange: "modelChange", changeEv: "changeEv" }, ngImport: i0, template: "<div class=\"d-flex flex-column\">\n    <label class=\"label\" [class.txt-clr-red]=\"myField.touched && myField.invalid\">\n        {{label}} <span class=\"txt-clr-red\">{{required?'*':''}}</span>\n    </label>\n\n    <div class=\"select-wrapper\" [class.error]=\"myField.touched && myField.invalid\" [class.select-disabled]=\"disabled || loading\">\n        @if(loading) {\n            <span class=\"select-spinner\"></span>\n        }\n        <select\n            [ngModel]=\"model\"\n            (ngModelChange)=\"onModelChange($event)\"\n            (change)=\"onChange()\"\n            [required]=\"required\"\n            [disabled]=\"disabled || loading\"\n            #myField=\"ngModel\"\n        >\n            <option value=\"\" [disabled]=\"required\" [hidden]=\"required\" selected>{{placeholder}}</option>\n            @for(item of datasource; track item) {\n                <option [value]=\"getValue(item)\">{{getDisplay(item)}}</option>\n            }\n        </select>\n        @if(clearable && hasValue && !disabled && !loading) {\n            <button type=\"button\" class=\"select-clear\" (click)=\"onClear($event)\" title=\"Clear\">\n                <mat-icon>close</mat-icon>\n            </button>\n        }\n        <mat-icon class=\"select-arrow\">expand_more</mat-icon>\n    </div>\n\n    @if(myField.touched && myField.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}.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: 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: 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" }, outputs: { modelChange: "modelChange", changeEv: "changeEv" }, ngImport: i0, template: "<div class=\"d-flex flex-column\">\n    <div [oslSkeleton]=\"skeletonLoading\">\n        <label class=\"label\" [class.txt-clr-red]=\"myField.touched && myField.invalid\">\n            {{label}} <span class=\"txt-clr-red\">{{required?'*':''}}</span>\n        </label>\n\n    </div>\n\n    <div class=\"select-wrapper\" [oslSkeleton]=\"skeletonLoading\" [class.error]=\"myField.touched && myField.invalid\" [class.select-disabled]=\"disabled || loading\">\n        @if(loading) {\n            <span class=\"select-spinner\"></span>\n        }\n        <select\n            [ngModel]=\"model\"\n            (ngModelChange)=\"onModelChange($event)\"\n            (change)=\"onChange()\"\n            [required]=\"required\"\n            [disabled]=\"disabled || loading\"\n            #myField=\"ngModel\"\n        >\n            <option value=\"\" [disabled]=\"required\" [hidden]=\"required\" selected>{{placeholder}}</option>\n            @for(item of datasource; track item) {\n                <option [value]=\"getValue(item)\">{{getDisplay(item)}}</option>\n            }\n        </select>\n        @if(clearable && hasValue && !disabled && !loading) {\n            <button type=\"button\" class=\"select-clear\" (click)=\"onClear($event)\" title=\"Clear\">\n                <mat-icon>close</mat-icon>\n            </button>\n        }\n        <mat-icon class=\"select-arrow\">expand_more</mat-icon>\n    </div>\n\n    @if(myField.touched && myField.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}.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: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: OslSkeletonDirective, selector: "[oslSkeleton]", inputs: ["oslSkeleton", "oslSkeletonType", "oslSkeletonAnimation", "oslSkeletonTheme", "oslSkeletonColor", "oslSkeletonHighlight", "oslSkeletonRadius", "oslSkeletonRows", "oslSkeletonRowGap", "oslSkeletonZIndex", "oslSkeletonDelay", "oslSkeletonDuration", "oslSkeletonMinHeight", "oslSkeletonForceReread", "oslSkeletonCircleSize", "oslSkeletonListItems", "oslSkeletonTableRows", "oslSkeletonTableCols", "oslSkeletonCardLines", "oslSkeletonBgColor"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslSelect, decorators: [{
             type: Component,
-            args: [{ selector: 'osl-select', standalone: false, template: "<div class=\"d-flex flex-column\">\n    <label class=\"label\" [class.txt-clr-red]=\"myField.touched && myField.invalid\">\n        {{label}} <span class=\"txt-clr-red\">{{required?'*':''}}</span>\n    </label>\n\n    <div class=\"select-wrapper\" [class.error]=\"myField.touched && myField.invalid\" [class.select-disabled]=\"disabled || loading\">\n        @if(loading) {\n            <span class=\"select-spinner\"></span>\n        }\n        <select\n            [ngModel]=\"model\"\n            (ngModelChange)=\"onModelChange($event)\"\n            (change)=\"onChange()\"\n            [required]=\"required\"\n            [disabled]=\"disabled || loading\"\n            #myField=\"ngModel\"\n        >\n            <option value=\"\" [disabled]=\"required\" [hidden]=\"required\" selected>{{placeholder}}</option>\n            @for(item of datasource; track item) {\n                <option [value]=\"getValue(item)\">{{getDisplay(item)}}</option>\n            }\n        </select>\n        @if(clearable && hasValue && !disabled && !loading) {\n            <button type=\"button\" class=\"select-clear\" (click)=\"onClear($event)\" title=\"Clear\">\n                <mat-icon>close</mat-icon>\n            </button>\n        }\n        <mat-icon class=\"select-arrow\">expand_more</mat-icon>\n    </div>\n\n    @if(myField.touched && myField.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}.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"] }]
+            args: [{ selector: 'osl-select', standalone: false, template: "<div class=\"d-flex flex-column\">\n    <div [oslSkeleton]=\"skeletonLoading\">\n        <label class=\"label\" [class.txt-clr-red]=\"myField.touched && myField.invalid\">\n            {{label}} <span class=\"txt-clr-red\">{{required?'*':''}}</span>\n        </label>\n\n    </div>\n\n    <div class=\"select-wrapper\" [oslSkeleton]=\"skeletonLoading\" [class.error]=\"myField.touched && myField.invalid\" [class.select-disabled]=\"disabled || loading\">\n        @if(loading) {\n            <span class=\"select-spinner\"></span>\n        }\n        <select\n            [ngModel]=\"model\"\n            (ngModelChange)=\"onModelChange($event)\"\n            (change)=\"onChange()\"\n            [required]=\"required\"\n            [disabled]=\"disabled || loading\"\n            #myField=\"ngModel\"\n        >\n            <option value=\"\" [disabled]=\"required\" [hidden]=\"required\" selected>{{placeholder}}</option>\n            @for(item of datasource; track item) {\n                <option [value]=\"getValue(item)\">{{getDisplay(item)}}</option>\n            }\n        </select>\n        @if(clearable && hasValue && !disabled && !loading) {\n            <button type=\"button\" class=\"select-clear\" (click)=\"onClear($event)\" title=\"Clear\">\n                <mat-icon>close</mat-icon>\n            </button>\n        }\n        <mat-icon class=\"select-arrow\">expand_more</mat-icon>\n    </div>\n\n    @if(myField.touched && myField.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}.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"] }]
         }], propDecorators: { label: [{
                 type: Input,
                 args: ['label']
@@ -555,6 +1040,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             }], clearable: [{
                 type: Input,
                 args: ['clearable']
+            }], skeletonLoading: [{
+                type: Input,
+                args: ['skeletonLoading']
             }], modelChange: [{
                 type: Output
             }], changeEv: [{
@@ -570,6 +1058,7 @@ class OslRadio {
     displayField = '';
     valueField = '';
     inline = false;
+    skeletonLoading = false;
     modelChange = new EventEmitter();
     changeEv = new EventEmitter();
     static _idCounter = 0;
@@ -589,11 +1078,11 @@ class OslRadio {
         this.changeEv.emit(this.model);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslRadio, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: OslRadio, isStandalone: false, selector: "osl-radio", inputs: { label: "label", required: "required", disabled: "disabled", model: "model", datasource: "datasource", displayField: "displayField", valueField: "valueField", inline: "inline" }, outputs: { modelChange: "modelChange", changeEv: "changeEv" }, ngImport: i0, template: "<div class=\"d-flex flex-column\">\n    <label class=\"label\">{{label}} <span class=\"txt-clr-red\">{{required?'*':''}}</span></label>\n    <div class=\"radio-group\" [class.radio-inline]=\"inline\">\n        @for(item of datasource; track item) {\n            <label class=\"radio-item\" [class.disabled]=\"disabled\">\n                <input\n                    type=\"radio\"\n                    [name]=\"groupName\"\n                    [checked]=\"isChecked(item)\"\n                    [disabled]=\"disabled\"\n                    (change)=\"onSelect(item)\"\n                >\n                <span>{{getDisplay(item)}}</span>\n            </label>\n        }\n    </div>\n</div>\n", styles: [".label{font-size:var(--osl-label-font-size);margin-bottom:5px}.radio-group{display:flex;flex-direction:column;gap:10px;padding:4px 0}.radio-group.radio-inline{flex-direction:row;flex-wrap:wrap;gap:16px}.radio-item{display:flex;align-items:center;gap:6px;font-size:var(--osl-label-font-size);cursor:pointer}.radio-item input[type=radio]{width:15px;height:15px;cursor:pointer;accent-color:#333;flex-shrink:0}.radio-item.disabled{opacity:.6;cursor:not-allowed}.radio-item.disabled input[type=radio]{cursor:not-allowed}.txt-clr-red{color:var(--osl-error-color)}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: OslRadio, isStandalone: false, selector: "osl-radio", inputs: { label: "label", required: "required", disabled: "disabled", model: "model", datasource: "datasource", displayField: "displayField", valueField: "valueField", inline: "inline", skeletonLoading: "skeletonLoading" }, outputs: { modelChange: "modelChange", changeEv: "changeEv" }, ngImport: i0, template: "<div class=\"d-flex flex-column\">\n    <div [oslSkeleton]=\"skeletonLoading\">\n        <label class=\"label\">{{label}} <span class=\"txt-clr-red\">{{required?'*':''}}</span></label>\n\n    </div>\n    <div class=\"radio-group\" [oslSkeleton]=\"skeletonLoading\" [class.radio-inline]=\"inline\">\n        @for(item of datasource; track item) {\n            <label class=\"radio-item\" [class.disabled]=\"disabled\">\n                <input\n                    type=\"radio\"\n                    [name]=\"groupName\"\n                    [checked]=\"isChecked(item)\"\n                    [disabled]=\"disabled\"\n                    (change)=\"onSelect(item)\"\n                >\n                <span>{{getDisplay(item)}}</span>\n            </label>\n        }\n    </div>\n</div>\n", styles: [".label{font-size:var(--osl-label-font-size);margin-bottom:5px}.radio-group{display:flex;gap:10px;padding:4px 0}.radio-group.radio-inline{flex-direction:row;flex-wrap:wrap;gap:16px}.radio-item{display:flex;align-items:center;gap:6px;font-size:var(--osl-label-font-size);cursor:pointer}.radio-item input[type=radio]{width:15px;height:15px;cursor:pointer;accent-color:#333;flex-shrink:0}.radio-item.disabled{opacity:.6;cursor:not-allowed}.radio-item.disabled input[type=radio]{cursor:not-allowed}.txt-clr-red{color:var(--osl-error-color)}\n"], dependencies: [{ 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: OslRadio, decorators: [{
             type: Component,
-            args: [{ selector: 'osl-radio', standalone: false, template: "<div class=\"d-flex flex-column\">\n    <label class=\"label\">{{label}} <span class=\"txt-clr-red\">{{required?'*':''}}</span></label>\n    <div class=\"radio-group\" [class.radio-inline]=\"inline\">\n        @for(item of datasource; track item) {\n            <label class=\"radio-item\" [class.disabled]=\"disabled\">\n                <input\n                    type=\"radio\"\n                    [name]=\"groupName\"\n                    [checked]=\"isChecked(item)\"\n                    [disabled]=\"disabled\"\n                    (change)=\"onSelect(item)\"\n                >\n                <span>{{getDisplay(item)}}</span>\n            </label>\n        }\n    </div>\n</div>\n", styles: [".label{font-size:var(--osl-label-font-size);margin-bottom:5px}.radio-group{display:flex;flex-direction:column;gap:10px;padding:4px 0}.radio-group.radio-inline{flex-direction:row;flex-wrap:wrap;gap:16px}.radio-item{display:flex;align-items:center;gap:6px;font-size:var(--osl-label-font-size);cursor:pointer}.radio-item input[type=radio]{width:15px;height:15px;cursor:pointer;accent-color:#333;flex-shrink:0}.radio-item.disabled{opacity:.6;cursor:not-allowed}.radio-item.disabled input[type=radio]{cursor:not-allowed}.txt-clr-red{color:var(--osl-error-color)}\n"] }]
+            args: [{ selector: 'osl-radio', standalone: false, template: "<div class=\"d-flex flex-column\">\n    <div [oslSkeleton]=\"skeletonLoading\">\n        <label class=\"label\">{{label}} <span class=\"txt-clr-red\">{{required?'*':''}}</span></label>\n\n    </div>\n    <div class=\"radio-group\" [oslSkeleton]=\"skeletonLoading\" [class.radio-inline]=\"inline\">\n        @for(item of datasource; track item) {\n            <label class=\"radio-item\" [class.disabled]=\"disabled\">\n                <input\n                    type=\"radio\"\n                    [name]=\"groupName\"\n                    [checked]=\"isChecked(item)\"\n                    [disabled]=\"disabled\"\n                    (change)=\"onSelect(item)\"\n                >\n                <span>{{getDisplay(item)}}</span>\n            </label>\n        }\n    </div>\n</div>\n", styles: [".label{font-size:var(--osl-label-font-size);margin-bottom:5px}.radio-group{display:flex;gap:10px;padding:4px 0}.radio-group.radio-inline{flex-direction:row;flex-wrap:wrap;gap:16px}.radio-item{display:flex;align-items:center;gap:6px;font-size:var(--osl-label-font-size);cursor:pointer}.radio-item input[type=radio]{width:15px;height:15px;cursor:pointer;accent-color:#333;flex-shrink:0}.radio-item.disabled{opacity:.6;cursor:not-allowed}.radio-item.disabled input[type=radio]{cursor:not-allowed}.txt-clr-red{color:var(--osl-error-color)}\n"] }]
         }], propDecorators: { label: [{
                 type: Input,
                 args: ['label']
@@ -618,6 +1107,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             }], inline: [{
                 type: Input,
                 args: ['inline']
+            }], skeletonLoading: [{
+                type: Input,
+                args: ['skeletonLoading']
             }], modelChange: [{
                 type: Output
             }], changeEv: [{
@@ -631,6 +1123,7 @@ class OslSlideToggle {
     labelPosition = 'after';
     trueLabel = '';
     falseLabel = '';
+    skeletonLoading = false;
     modelChange = new EventEmitter();
     changeEv = new EventEmitter();
     get stateLabel() {
@@ -646,11 +1139,11 @@ class OslSlideToggle {
         this.changeEv.emit(this.model);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslSlideToggle, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: OslSlideToggle, isStandalone: false, selector: "osl-slide-toggle", inputs: { label: "label", disabled: "disabled", model: "model", labelPosition: "labelPosition", trueLabel: "trueLabel", falseLabel: "falseLabel" }, outputs: { modelChange: "modelChange", changeEv: "changeEv" }, ngImport: i0, template: "<div class=\"d-flex flex-column\">\n    @if(label) {\n        <span class=\"label\">{{label}}</span>\n    }\n    <div class=\"toggle-row\" [class.reverse]=\"labelPosition === 'before'\">\n        <label class=\"toggle\" [class.toggle-disabled]=\"disabled\">\n            <input type=\"checkbox\" [ngModel]=\"model\" (ngModelChange)=\"onModelChange($event)\" [disabled]=\"disabled\">\n            <span class=\"slider\"></span>\n        </label>\n        @if(stateLabel) {\n            <span class=\"state-label\" [class.state-on]=\"model\" [class.state-off]=\"!model\">{{stateLabel}}</span>\n        }\n    </div>\n</div>\n", styles: [".label{font-size:var(--osl-label-font-size);margin-bottom:5px}.toggle-row{display:flex;align-items:center;gap:8px}.toggle-row.reverse{flex-direction:row-reverse;justify-content:flex-end}.toggle{position:relative;display:inline-block;width:46px;height:24px;cursor:pointer;flex-shrink:0}.toggle input{opacity:0;width:0;height:0;position:absolute}.toggle .slider{position:absolute;inset:0;background-color:var(--osl-border-color);border-radius:24px;transition:.3s}.toggle .slider:before{content:\"\";position:absolute;height:18px;width:18px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.3s;box-shadow:0 1px 3px #0003}.toggle input:checked+.slider{background-color:#333}.toggle input:checked+.slider:before{transform:translate(22px)}.toggle.toggle-disabled{opacity:.6;cursor:not-allowed}.state-label{font-size:var(--osl-label-font-size);-webkit-user-select:none;user-select:none}.state-label.state-on{color:#333;font-weight:500}.state-label.state-off{color:#888}\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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: OslSlideToggle, isStandalone: false, selector: "osl-slide-toggle", inputs: { label: "label", disabled: "disabled", model: "model", labelPosition: "labelPosition", trueLabel: "trueLabel", falseLabel: "falseLabel", skeletonLoading: "skeletonLoading" }, outputs: { modelChange: "modelChange", changeEv: "changeEv" }, ngImport: i0, template: "<div class=\"d-flex flex-column\">\n    @if(label) {\n        <div [oslSkeleton]=\"skeletonLoading\">\n            <span class=\"label\">{{label}}</span>\n\n        </div>\n    }\n    <div class=\"toggle-row\" [class.reverse]=\"labelPosition === 'before'\" [oslSkeleton]=\"skeletonLoading\">\n        <label class=\"toggle\" [class.toggle-disabled]=\"disabled\">\n            <input type=\"checkbox\" [ngModel]=\"model\" (ngModelChange)=\"onModelChange($event)\" [disabled]=\"disabled\">\n            <span class=\"slider\"></span>\n        </label>\n        @if(stateLabel) {\n            <span class=\"state-label\" [class.state-on]=\"model\" [class.state-off]=\"!model\">{{stateLabel}}</span>\n        }\n    </div>\n</div>\n", styles: [".label{font-size:var(--osl-label-font-size);margin-bottom:5px}.toggle-row{display:flex;align-items:center;gap:8px}.toggle-row.reverse{flex-direction:row-reverse;justify-content:flex-end}.toggle{position:relative;display:inline-block;width:46px;height:24px;cursor:pointer;flex-shrink:0}.toggle input{opacity:0;width:0;height:0;position:absolute}.toggle .slider{position:absolute;inset:0;background-color:var(--osl-border-color);border-radius:24px;transition:.3s}.toggle .slider:before{content:\"\";position:absolute;height:18px;width:18px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.3s;box-shadow:0 1px 3px #0003}.toggle input:checked+.slider{background-color:#333}.toggle input:checked+.slider:before{transform:translate(22px)}.toggle.toggle-disabled{opacity:.6;cursor:not-allowed}.state-label{font-size:var(--osl-label-font-size);-webkit-user-select:none;user-select:none}.state-label.state-on{color:#333;font-weight:500}.state-label.state-off{color:#888}\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: 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: OslSlideToggle, decorators: [{
             type: Component,
-            args: [{ selector: 'osl-slide-toggle', standalone: false, template: "<div class=\"d-flex flex-column\">\n    @if(label) {\n        <span class=\"label\">{{label}}</span>\n    }\n    <div class=\"toggle-row\" [class.reverse]=\"labelPosition === 'before'\">\n        <label class=\"toggle\" [class.toggle-disabled]=\"disabled\">\n            <input type=\"checkbox\" [ngModel]=\"model\" (ngModelChange)=\"onModelChange($event)\" [disabled]=\"disabled\">\n            <span class=\"slider\"></span>\n        </label>\n        @if(stateLabel) {\n            <span class=\"state-label\" [class.state-on]=\"model\" [class.state-off]=\"!model\">{{stateLabel}}</span>\n        }\n    </div>\n</div>\n", styles: [".label{font-size:var(--osl-label-font-size);margin-bottom:5px}.toggle-row{display:flex;align-items:center;gap:8px}.toggle-row.reverse{flex-direction:row-reverse;justify-content:flex-end}.toggle{position:relative;display:inline-block;width:46px;height:24px;cursor:pointer;flex-shrink:0}.toggle input{opacity:0;width:0;height:0;position:absolute}.toggle .slider{position:absolute;inset:0;background-color:var(--osl-border-color);border-radius:24px;transition:.3s}.toggle .slider:before{content:\"\";position:absolute;height:18px;width:18px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.3s;box-shadow:0 1px 3px #0003}.toggle input:checked+.slider{background-color:#333}.toggle input:checked+.slider:before{transform:translate(22px)}.toggle.toggle-disabled{opacity:.6;cursor:not-allowed}.state-label{font-size:var(--osl-label-font-size);-webkit-user-select:none;user-select:none}.state-label.state-on{color:#333;font-weight:500}.state-label.state-off{color:#888}\n"] }]
+            args: [{ selector: 'osl-slide-toggle', standalone: false, template: "<div class=\"d-flex flex-column\">\n    @if(label) {\n        <div [oslSkeleton]=\"skeletonLoading\">\n            <span class=\"label\">{{label}}</span>\n\n        </div>\n    }\n    <div class=\"toggle-row\" [class.reverse]=\"labelPosition === 'before'\" [oslSkeleton]=\"skeletonLoading\">\n        <label class=\"toggle\" [class.toggle-disabled]=\"disabled\">\n            <input type=\"checkbox\" [ngModel]=\"model\" (ngModelChange)=\"onModelChange($event)\" [disabled]=\"disabled\">\n            <span class=\"slider\"></span>\n        </label>\n        @if(stateLabel) {\n            <span class=\"state-label\" [class.state-on]=\"model\" [class.state-off]=\"!model\">{{stateLabel}}</span>\n        }\n    </div>\n</div>\n", styles: [".label{font-size:var(--osl-label-font-size);margin-bottom:5px}.toggle-row{display:flex;align-items:center;gap:8px}.toggle-row.reverse{flex-direction:row-reverse;justify-content:flex-end}.toggle{position:relative;display:inline-block;width:46px;height:24px;cursor:pointer;flex-shrink:0}.toggle input{opacity:0;width:0;height:0;position:absolute}.toggle .slider{position:absolute;inset:0;background-color:var(--osl-border-color);border-radius:24px;transition:.3s}.toggle .slider:before{content:\"\";position:absolute;height:18px;width:18px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.3s;box-shadow:0 1px 3px #0003}.toggle input:checked+.slider{background-color:#333}.toggle input:checked+.slider:before{transform:translate(22px)}.toggle.toggle-disabled{opacity:.6;cursor:not-allowed}.state-label{font-size:var(--osl-label-font-size);-webkit-user-select:none;user-select:none}.state-label.state-on{color:#333;font-weight:500}.state-label.state-off{color:#888}\n"] }]
         }], propDecorators: { label: [{
                 type: Input,
                 args: ['label']
@@ -669,6 +1162,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             }], falseLabel: [{
                 type: Input,
                 args: ['falseLabel']
+            }], skeletonLoading: [{
+                type: Input,
+                args: ['skeletonLoading']
             }], modelChange: [{
                 type: Output
             }], changeEv: [{
@@ -692,6 +1188,7 @@ class OslAutocomplete extends baseComponent {
     configMethodName = '';
     service;
     object;
+    skeletonLoading = false;
     modelChange = new EventEmitter();
     changeEv = new EventEmitter();
     listerComponent = inject(AUTOCOMPLETE_LISTER_COMPONENT);
@@ -820,11 +1317,11 @@ 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" }, outputs: { modelChange: "modelChange", changeEv: "changeEv" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"d-flex flex-column\">\n    <label class=\"label\" [class.txt-clr-red]=\"isInvalid\">\n        {{label}} <span class=\"txt-clr-red\">{{required?'*':''}}</span>\n    </label>\n    <div class=\"autocomplete-wrapper\" [class.error]=\"isInvalid\" [class.autocomplete-wrapper--api]=\"searchType == 'Api'\">\n        <input\n            [value]=\"inputValue\"\n            (input)=\"onInput($any($event.target).value)\"\n            (focus)=\"onFocus()\"\n            (blur)=\"onBlur()\"\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)=\"searchType == 'Api' ? openLister() : null\"\n        >\n        @if(loading) {\n            <span class=\"ac-spinner\"></span>\n        } @else {\n            @if(inputValue && !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' && !disabled) {\n                <button  type=\"button\" class=\"ac-lister-btn\" (mousedown)=\"$event.preventDefault(); openLister()\" tabindex=\"-1\" title=\"Browse list or press Enter\">\n                    <!-- <img src=\"assets/enter (2).png\" alt=\"Enter\" class=\"ac-lister-img\"> -->\n                     <mat-icon>manage_search</mat-icon>\n                </button>\n            }\n        }\n        @if(showDropdown && !loading) {\n            <div class=\"dropdown\">\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}.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{position:absolute;top:100%;left:0;right:0;z-index:1000;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)}\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.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: 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: 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" }, outputs: { modelChange: "modelChange", changeEv: "changeEv" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"d-flex flex-column\">\n    <div [oslSkeleton]=\"skeletonLoading\">\n        <label class=\"label\" [class.txt-clr-red]=\"isInvalid\">\n            {{label}} <span class=\"txt-clr-red\">{{required?'*':''}}</span>\n        </label>\n\n    </div>\n    <div class=\"autocomplete-wrapper\" [oslSkeleton]=\"skeletonLoading\" [class.error]=\"isInvalid\" [class.autocomplete-wrapper--api]=\"searchType == 'Api'\">\n        <input\n            [value]=\"inputValue\"\n            (input)=\"onInput($any($event.target).value)\"\n            (focus)=\"onFocus()\"\n            (blur)=\"onBlur()\"\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)=\"searchType == 'Api' ? openLister() : null\"\n        >\n        @if(loading) {\n            <span class=\"ac-spinner\"></span>\n        } @else {\n            @if(inputValue && !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' && !disabled) {\n                <button  type=\"button\" class=\"ac-lister-btn\" (mousedown)=\"$event.preventDefault(); openLister()\" tabindex=\"-1\" title=\"Browse list or press Enter\">\n                    <!-- <img src=\"assets/enter (2).png\" alt=\"Enter\" class=\"ac-lister-img\"> -->\n                     <mat-icon>manage_search</mat-icon>\n                </button>\n            }\n        }\n        @if(showDropdown && !loading) {\n            <div class=\"dropdown\">\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}.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{position:absolute;top:100%;left:0;right:0;z-index:1000;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)}\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.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: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: OslSkeletonDirective, selector: "[oslSkeleton]", inputs: ["oslSkeleton", "oslSkeletonType", "oslSkeletonAnimation", "oslSkeletonTheme", "oslSkeletonColor", "oslSkeletonHighlight", "oslSkeletonRadius", "oslSkeletonRows", "oslSkeletonRowGap", "oslSkeletonZIndex", "oslSkeletonDelay", "oslSkeletonDuration", "oslSkeletonMinHeight", "oslSkeletonForceReread", "oslSkeletonCircleSize", "oslSkeletonListItems", "oslSkeletonTableRows", "oslSkeletonTableCols", "oslSkeletonCardLines", "oslSkeletonBgColor"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslAutocomplete, decorators: [{
             type: Component,
-            args: [{ selector: 'osl-autocomplete', standalone: false, template: "<div class=\"d-flex flex-column\">\n    <label class=\"label\" [class.txt-clr-red]=\"isInvalid\">\n        {{label}} <span class=\"txt-clr-red\">{{required?'*':''}}</span>\n    </label>\n    <div class=\"autocomplete-wrapper\" [class.error]=\"isInvalid\" [class.autocomplete-wrapper--api]=\"searchType == 'Api'\">\n        <input\n            [value]=\"inputValue\"\n            (input)=\"onInput($any($event.target).value)\"\n            (focus)=\"onFocus()\"\n            (blur)=\"onBlur()\"\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)=\"searchType == 'Api' ? openLister() : null\"\n        >\n        @if(loading) {\n            <span class=\"ac-spinner\"></span>\n        } @else {\n            @if(inputValue && !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' && !disabled) {\n                <button  type=\"button\" class=\"ac-lister-btn\" (mousedown)=\"$event.preventDefault(); openLister()\" tabindex=\"-1\" title=\"Browse list or press Enter\">\n                    <!-- <img src=\"assets/enter (2).png\" alt=\"Enter\" class=\"ac-lister-img\"> -->\n                     <mat-icon>manage_search</mat-icon>\n                </button>\n            }\n        }\n        @if(showDropdown && !loading) {\n            <div class=\"dropdown\">\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}.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{position:absolute;top:100%;left:0;right:0;z-index:1000;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)}\n"] }]
+            args: [{ selector: 'osl-autocomplete', standalone: false, template: "<div class=\"d-flex flex-column\">\n    <div [oslSkeleton]=\"skeletonLoading\">\n        <label class=\"label\" [class.txt-clr-red]=\"isInvalid\">\n            {{label}} <span class=\"txt-clr-red\">{{required?'*':''}}</span>\n        </label>\n\n    </div>\n    <div class=\"autocomplete-wrapper\" [oslSkeleton]=\"skeletonLoading\" [class.error]=\"isInvalid\" [class.autocomplete-wrapper--api]=\"searchType == 'Api'\">\n        <input\n            [value]=\"inputValue\"\n            (input)=\"onInput($any($event.target).value)\"\n            (focus)=\"onFocus()\"\n            (blur)=\"onBlur()\"\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)=\"searchType == 'Api' ? openLister() : null\"\n        >\n        @if(loading) {\n            <span class=\"ac-spinner\"></span>\n        } @else {\n            @if(inputValue && !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' && !disabled) {\n                <button  type=\"button\" class=\"ac-lister-btn\" (mousedown)=\"$event.preventDefault(); openLister()\" tabindex=\"-1\" title=\"Browse list or press Enter\">\n                    <!-- <img src=\"assets/enter (2).png\" alt=\"Enter\" class=\"ac-lister-img\"> -->\n                     <mat-icon>manage_search</mat-icon>\n                </button>\n            }\n        }\n        @if(showDropdown && !loading) {\n            <div class=\"dropdown\">\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}.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{position:absolute;top:100%;left:0;right:0;z-index:1000;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)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { label: [{
                 type: Input,
                 args: ['label']
@@ -867,6 +1364,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             }], object: [{
                 type: Input,
                 args: ['object']
+            }], skeletonLoading: [{
+                type: Input,
+                args: ['skeletonLoading']
             }], modelChange: [{
                 type: Output
             }], changeEv: [{
@@ -885,6 +1385,7 @@ class OslFileUpload {
     multiple = false;
     /** Max file size in bytes. 0 = no limit. */
     maxSize = 0;
+    skeletonLoading = false;
     modelChange = new EventEmitter();
     changeEv = new EventEmitter();
     touched = false;
@@ -966,11 +1467,11 @@ class OslFileUpload {
         return `Max ${this.maxSize} B`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslFileUpload, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: OslFileUpload, isStandalone: false, selector: "osl-file-upload", inputs: { label: "label", required: "required", disabled: "disabled", model: "model", accept: "accept", multiple: "multiple", maxSize: "maxSize" }, outputs: { modelChange: "modelChange", changeEv: "changeEv" }, ngImport: i0, template: "<div class=\"d-flex flex-column\">\n    <label class=\"label\" [class.txt-clr-red]=\"isInvalid\">\n        {{label}} <span class=\"txt-clr-red\">{{required?'*':''}}</span>\n    </label>\n\n    <input\n        type=\"file\"\n        [accept]=\"accept\"\n        [multiple]=\"multiple\"\n        [disabled]=\"disabled\"\n        (change)=\"onFileChange($event)\"\n        #fileInput\n        class=\"file-input\"\n    >\n\n    <div\n        class=\"drop-zone\"\n        [class.error]=\"isInvalid || sizeError\"\n        [class.file-disabled]=\"disabled\"\n        [class.drag-over]=\"isDragOver\"\n        [class.has-file]=\"!!model\"\n        (click)=\"triggerInput(fileInput)\"\n        (dragover)=\"onDragOver($event)\"\n        (dragleave)=\"onDragLeave()\"\n        (drop)=\"onDrop($event)\"\n    >\n        @if(!model) {\n            <div class=\"drop-content\">\n                <mat-icon class=\"upload-icon\">upload_file</mat-icon>\n                <div class=\"drop-text\">\n                    <span class=\"browse-link\">Browse</span> or drag &amp; drop\n                </div>\n                @if(accept) { <div class=\"drop-meta\">{{accept}}</div> }\n                @if(maxSize) { <div class=\"drop-meta\">{{maxSizeLabel}}</div> }\n            </div>\n        } @else {\n            <div class=\"file-list\">\n                <mat-icon class=\"file-icon\">insert_drive_file</mat-icon>\n                <span class=\"file-name\">{{fileNames}}</span>\n                <button type=\"button\" class=\"clear-btn\" (click)=\"clearFiles($event)\" title=\"Remove\">\n                    <mat-icon>close</mat-icon>\n                </button>\n            </div>\n        }\n    </div>\n\n    @if(sizeError) {\n        <mat-hint class=\"hint\">File exceeds the {{maxSizeLabel}} limit.</mat-hint>\n    } @else 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}.file-input{display:none}.drop-zone{width:100%;min-height:var(--osl-control-height);border-radius:var(--osl-border-radius);border:1.5px dashed var(--osl-border-color);cursor:pointer;transition:border-color .3s,background .3s;display:flex;align-items:center;justify-content:center;padding:8px}.drop-zone:hover:not(.file-disabled){border-color:var(--osl-focus-border-color);background:#00000003}.drop-zone.drag-over{border-color:var(--osl-focus-border-color);background:#00000008}.drop-zone.has-file{border-style:solid;border-color:var(--osl-border-color)}.drop-zone.error{border-color:var(--osl-error-color)}.drop-zone.file-disabled{opacity:.6;cursor:not-allowed;background:#f5f5f5}.drop-content{display:flex;flex-direction:column;align-items:center;gap:4px;color:#888;pointer-events:none}.upload-icon{font-size:28px;width:28px;height:28px;color:#bbb}.drop-text{font-size:var(--osl-label-font-size)}.browse-link{color:var(--osl-focus-border-color);font-weight:500}.drop-meta{font-size:var(--osl-hint-font-size);color:#bbb}.file-list{display:flex;align-items:center;gap:8px;width:100%;pointer-events:none}.file-icon{font-size:20px;width:20px;height:20px;color:#888;flex-shrink:0}.file-name{flex:1;font-size:var(--osl-text-font-size);color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.clear-btn{pointer-events:all;display:flex;align-items:center;background:none;border:none;cursor:pointer;color:#aaa;padding:0;flex-shrink:0}.clear-btn mat-icon{font-size:16px;width:16px;height:16px}.clear-btn:hover{color:var(--osl-error-color)}.hint{color:var(--osl-error-color);margin-top:2px;font-size:var(--osl-hint-font-size)}.txt-clr-red{color:var(--osl-error-color)}\n"], dependencies: [{ kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { 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: OslFileUpload, isStandalone: false, selector: "osl-file-upload", inputs: { label: "label", required: "required", disabled: "disabled", model: "model", accept: "accept", multiple: "multiple", maxSize: "maxSize", skeletonLoading: "skeletonLoading" }, outputs: { modelChange: "modelChange", changeEv: "changeEv" }, ngImport: i0, template: "<div class=\"d-flex flex-column\">\n    <div  [oslSkeleton]=\"skeletonLoading\">\n    <label class=\"label\" [class.txt-clr-red]=\"isInvalid\">\n        {{label}} <span class=\"txt-clr-red\">{{required?'*':''}}</span>\n    </label>\n    </div>\n\n    <input\n        type=\"file\"\n        [accept]=\"accept\"\n        [multiple]=\"multiple\"\n        [disabled]=\"disabled\"\n        (change)=\"onFileChange($event)\"\n        #fileInput\n        class=\"file-input\"\n    >\n\n    <div\n     [oslSkeleton]=\"skeletonLoading\"\n        class=\"drop-zone\"\n        [class.error]=\"isInvalid || sizeError\"\n        [class.file-disabled]=\"disabled\"\n        [class.drag-over]=\"isDragOver\"\n        [class.has-file]=\"!!model\"\n        (click)=\"triggerInput(fileInput)\"\n        (dragover)=\"onDragOver($event)\"\n        (dragleave)=\"onDragLeave()\"\n        (drop)=\"onDrop($event)\"\n    >\n        @if(!model) {\n            <div class=\"drop-content\">\n                <mat-icon class=\"upload-icon\">upload_file</mat-icon>\n                <div class=\"drop-text\">\n                    <span class=\"browse-link\">Browse</span> or drag &amp; drop\n                </div>\n                @if(accept) { <div class=\"drop-meta\">{{accept}}</div> }\n                @if(maxSize) { <div class=\"drop-meta\">{{maxSizeLabel}}</div> }\n            </div>\n        } @else {\n            <div class=\"file-list\">\n                <mat-icon class=\"file-icon\">insert_drive_file</mat-icon>\n                <span class=\"file-name\">{{fileNames}}</span>\n                <button type=\"button\" class=\"clear-btn\" (click)=\"clearFiles($event)\" title=\"Remove\">\n                    <mat-icon>close</mat-icon>\n                </button>\n            </div>\n        }\n    </div>\n\n    @if(sizeError) {\n        <mat-hint class=\"hint\">File exceeds the {{maxSizeLabel}} limit.</mat-hint>\n    } @else 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}.file-input{display:none}.drop-zone{width:100%;min-height:var(--osl-control-height);border-radius:var(--osl-border-radius);border:1.5px dashed var(--osl-border-color);cursor:pointer;transition:border-color .3s,background .3s;display:flex;align-items:center;justify-content:center;padding:8px}.drop-zone:hover:not(.file-disabled){border-color:var(--osl-focus-border-color);background:#00000003}.drop-zone.drag-over{border-color:var(--osl-focus-border-color);background:#00000008}.drop-zone.has-file{border-style:solid;border-color:var(--osl-border-color)}.drop-zone.error{border-color:var(--osl-error-color)}.drop-zone.file-disabled{opacity:.6;cursor:not-allowed;background:#f5f5f5}.drop-content{display:flex;flex-direction:column;align-items:center;gap:4px;color:#888;pointer-events:none}.upload-icon{font-size:28px;width:28px;height:28px;color:#bbb}.drop-text{font-size:var(--osl-label-font-size)}.browse-link{color:var(--osl-focus-border-color);font-weight:500}.drop-meta{font-size:var(--osl-hint-font-size);color:#bbb}.file-list{display:flex;align-items:center;gap:8px;width:100%;pointer-events:none}.file-icon{font-size:20px;width:20px;height:20px;color:#888;flex-shrink:0}.file-name{flex:1;font-size:var(--osl-text-font-size);color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.clear-btn{pointer-events:all;display:flex;align-items:center;background:none;border:none;cursor:pointer;color:#aaa;padding:0;flex-shrink:0}.clear-btn mat-icon{font-size:16px;width:16px;height:16px}.clear-btn:hover{color:var(--osl-error-color)}.hint{color:var(--osl-error-color);margin-top:2px;font-size:var(--osl-hint-font-size)}.txt-clr-red{color:var(--osl-error-color)}\n"], dependencies: [{ kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: OslSkeletonDirective, selector: "[oslSkeleton]", inputs: ["oslSkeleton", "oslSkeletonType", "oslSkeletonAnimation", "oslSkeletonTheme", "oslSkeletonColor", "oslSkeletonHighlight", "oslSkeletonRadius", "oslSkeletonRows", "oslSkeletonRowGap", "oslSkeletonZIndex", "oslSkeletonDelay", "oslSkeletonDuration", "oslSkeletonMinHeight", "oslSkeletonForceReread", "oslSkeletonCircleSize", "oslSkeletonListItems", "oslSkeletonTableRows", "oslSkeletonTableCols", "oslSkeletonCardLines", "oslSkeletonBgColor"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslFileUpload, decorators: [{
             type: Component,
-            args: [{ selector: 'osl-file-upload', standalone: false, template: "<div class=\"d-flex flex-column\">\n    <label class=\"label\" [class.txt-clr-red]=\"isInvalid\">\n        {{label}} <span class=\"txt-clr-red\">{{required?'*':''}}</span>\n    </label>\n\n    <input\n        type=\"file\"\n        [accept]=\"accept\"\n        [multiple]=\"multiple\"\n        [disabled]=\"disabled\"\n        (change)=\"onFileChange($event)\"\n        #fileInput\n        class=\"file-input\"\n    >\n\n    <div\n        class=\"drop-zone\"\n        [class.error]=\"isInvalid || sizeError\"\n        [class.file-disabled]=\"disabled\"\n        [class.drag-over]=\"isDragOver\"\n        [class.has-file]=\"!!model\"\n        (click)=\"triggerInput(fileInput)\"\n        (dragover)=\"onDragOver($event)\"\n        (dragleave)=\"onDragLeave()\"\n        (drop)=\"onDrop($event)\"\n    >\n        @if(!model) {\n            <div class=\"drop-content\">\n                <mat-icon class=\"upload-icon\">upload_file</mat-icon>\n                <div class=\"drop-text\">\n                    <span class=\"browse-link\">Browse</span> or drag &amp; drop\n                </div>\n                @if(accept) { <div class=\"drop-meta\">{{accept}}</div> }\n                @if(maxSize) { <div class=\"drop-meta\">{{maxSizeLabel}}</div> }\n            </div>\n        } @else {\n            <div class=\"file-list\">\n                <mat-icon class=\"file-icon\">insert_drive_file</mat-icon>\n                <span class=\"file-name\">{{fileNames}}</span>\n                <button type=\"button\" class=\"clear-btn\" (click)=\"clearFiles($event)\" title=\"Remove\">\n                    <mat-icon>close</mat-icon>\n                </button>\n            </div>\n        }\n    </div>\n\n    @if(sizeError) {\n        <mat-hint class=\"hint\">File exceeds the {{maxSizeLabel}} limit.</mat-hint>\n    } @else 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}.file-input{display:none}.drop-zone{width:100%;min-height:var(--osl-control-height);border-radius:var(--osl-border-radius);border:1.5px dashed var(--osl-border-color);cursor:pointer;transition:border-color .3s,background .3s;display:flex;align-items:center;justify-content:center;padding:8px}.drop-zone:hover:not(.file-disabled){border-color:var(--osl-focus-border-color);background:#00000003}.drop-zone.drag-over{border-color:var(--osl-focus-border-color);background:#00000008}.drop-zone.has-file{border-style:solid;border-color:var(--osl-border-color)}.drop-zone.error{border-color:var(--osl-error-color)}.drop-zone.file-disabled{opacity:.6;cursor:not-allowed;background:#f5f5f5}.drop-content{display:flex;flex-direction:column;align-items:center;gap:4px;color:#888;pointer-events:none}.upload-icon{font-size:28px;width:28px;height:28px;color:#bbb}.drop-text{font-size:var(--osl-label-font-size)}.browse-link{color:var(--osl-focus-border-color);font-weight:500}.drop-meta{font-size:var(--osl-hint-font-size);color:#bbb}.file-list{display:flex;align-items:center;gap:8px;width:100%;pointer-events:none}.file-icon{font-size:20px;width:20px;height:20px;color:#888;flex-shrink:0}.file-name{flex:1;font-size:var(--osl-text-font-size);color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.clear-btn{pointer-events:all;display:flex;align-items:center;background:none;border:none;cursor:pointer;color:#aaa;padding:0;flex-shrink:0}.clear-btn mat-icon{font-size:16px;width:16px;height:16px}.clear-btn:hover{color:var(--osl-error-color)}.hint{color:var(--osl-error-color);margin-top:2px;font-size:var(--osl-hint-font-size)}.txt-clr-red{color:var(--osl-error-color)}\n"] }]
+            args: [{ selector: 'osl-file-upload', standalone: false, template: "<div class=\"d-flex flex-column\">\n    <div  [oslSkeleton]=\"skeletonLoading\">\n    <label class=\"label\" [class.txt-clr-red]=\"isInvalid\">\n        {{label}} <span class=\"txt-clr-red\">{{required?'*':''}}</span>\n    </label>\n    </div>\n\n    <input\n        type=\"file\"\n        [accept]=\"accept\"\n        [multiple]=\"multiple\"\n        [disabled]=\"disabled\"\n        (change)=\"onFileChange($event)\"\n        #fileInput\n        class=\"file-input\"\n    >\n\n    <div\n     [oslSkeleton]=\"skeletonLoading\"\n        class=\"drop-zone\"\n        [class.error]=\"isInvalid || sizeError\"\n        [class.file-disabled]=\"disabled\"\n        [class.drag-over]=\"isDragOver\"\n        [class.has-file]=\"!!model\"\n        (click)=\"triggerInput(fileInput)\"\n        (dragover)=\"onDragOver($event)\"\n        (dragleave)=\"onDragLeave()\"\n        (drop)=\"onDrop($event)\"\n    >\n        @if(!model) {\n            <div class=\"drop-content\">\n                <mat-icon class=\"upload-icon\">upload_file</mat-icon>\n                <div class=\"drop-text\">\n                    <span class=\"browse-link\">Browse</span> or drag &amp; drop\n                </div>\n                @if(accept) { <div class=\"drop-meta\">{{accept}}</div> }\n                @if(maxSize) { <div class=\"drop-meta\">{{maxSizeLabel}}</div> }\n            </div>\n        } @else {\n            <div class=\"file-list\">\n                <mat-icon class=\"file-icon\">insert_drive_file</mat-icon>\n                <span class=\"file-name\">{{fileNames}}</span>\n                <button type=\"button\" class=\"clear-btn\" (click)=\"clearFiles($event)\" title=\"Remove\">\n                    <mat-icon>close</mat-icon>\n                </button>\n            </div>\n        }\n    </div>\n\n    @if(sizeError) {\n        <mat-hint class=\"hint\">File exceeds the {{maxSizeLabel}} limit.</mat-hint>\n    } @else 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}.file-input{display:none}.drop-zone{width:100%;min-height:var(--osl-control-height);border-radius:var(--osl-border-radius);border:1.5px dashed var(--osl-border-color);cursor:pointer;transition:border-color .3s,background .3s;display:flex;align-items:center;justify-content:center;padding:8px}.drop-zone:hover:not(.file-disabled){border-color:var(--osl-focus-border-color);background:#00000003}.drop-zone.drag-over{border-color:var(--osl-focus-border-color);background:#00000008}.drop-zone.has-file{border-style:solid;border-color:var(--osl-border-color)}.drop-zone.error{border-color:var(--osl-error-color)}.drop-zone.file-disabled{opacity:.6;cursor:not-allowed;background:#f5f5f5}.drop-content{display:flex;flex-direction:column;align-items:center;gap:4px;color:#888;pointer-events:none}.upload-icon{font-size:28px;width:28px;height:28px;color:#bbb}.drop-text{font-size:var(--osl-label-font-size)}.browse-link{color:var(--osl-focus-border-color);font-weight:500}.drop-meta{font-size:var(--osl-hint-font-size);color:#bbb}.file-list{display:flex;align-items:center;gap:8px;width:100%;pointer-events:none}.file-icon{font-size:20px;width:20px;height:20px;color:#888;flex-shrink:0}.file-name{flex:1;font-size:var(--osl-text-font-size);color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.clear-btn{pointer-events:all;display:flex;align-items:center;background:none;border:none;cursor:pointer;color:#aaa;padding:0;flex-shrink:0}.clear-btn mat-icon{font-size:16px;width:16px;height:16px}.clear-btn:hover{color:var(--osl-error-color)}.hint{color:var(--osl-error-color);margin-top:2px;font-size:var(--osl-hint-font-size)}.txt-clr-red{color:var(--osl-error-color)}\n"] }]
         }], propDecorators: { label: [{
                 type: Input,
                 args: ['label']
@@ -992,6 +1493,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             }], maxSize: [{
                 type: Input,
                 args: ['maxSize']
+            }], skeletonLoading: [{
+                type: Input,
+                args: ['skeletonLoading']
             }], modelChange: [{
                 type: Output
             }], changeEv: [{
@@ -1006,6 +1510,7 @@ class OslDatepicker {
     dateType = 'date';
     placeholder = '';
     minDate = '';
+    skeletonLoading = false;
     maxDate = '';
     modelChange = new EventEmitter();
     changeEv = new EventEmitter();
@@ -1014,11 +1519,11 @@ class OslDatepicker {
         this.modelChange.emit(this.model);
     }
     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" }, outputs: { modelChange: "modelChange", changeEv: "changeEv" }, ngImport: i0, template: "<div class=\"d-flex flex-column\">\n    <label class=\"label\" [class.txt-clr-red]=\"myField.touched && myField.invalid\">\n        {{label}} <span class=\"txt-clr-red\">{{required?'*':''}}</span>\n    </label>\n    <input\n        [type]=\"dateType\"\n        [ngModel]=\"model\"\n        (ngModelChange)=\"onModelChange($event)\"\n        (change)=\"changeEv.emit(model)\"\n        [required]=\"required\"\n        [disabled]=\"disabled\"\n        [placeholder]=\"placeholder\"\n        [attr.min]=\"minDate || null\"\n        [attr.max]=\"maxDate || null\"\n        #myField=\"ngModel\"\n        [class.error]=\"myField.touched && myField.invalid\"\n    >\n    @if(myField.touched && myField.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}input[type=date],input[type=datetime-local],input[type=time],input[type=month],input[type=week]{height:var(--osl-control-height);width:100%;border-radius:var(--osl-border-radius);outline:none;border:1px solid var(--osl-border-color);padding:0 8px;font-size:var(--osl-text-font-size);font-family:inherit;transition:border-color .5s}input[type=date]:focus,input[type=datetime-local]:focus,input[type=time]:focus,input[type=month]:focus,input[type=week]:focus{border-color:var(--osl-focus-border-color)}input[type=date]:disabled,input[type=datetime-local]:disabled,input[type=time]:disabled,input[type=month]:disabled,input[type=week]:disabled{background:#f5f5f5;cursor:not-allowed;opacity:.7}input[type=date].error,input[type=datetime-local].error,input[type=time].error,input[type=month].error,input[type=week].error{border-color:var(--osl-error-color)}.hint{color:var(--osl-error-color);margin-top:2px;font-size:var(--osl-hint-font-size)}.txt-clr-red{color:var(--osl-error-color)}\n"], dependencies: [{ kind: "directive", type: i1$1.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"] }] });
+    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", skeletonLoading: "skeletonLoading", maxDate: "maxDate" }, outputs: { modelChange: "modelChange", changeEv: "changeEv" }, ngImport: i0, template: "<div class=\"d-flex flex-column\">\n    <div  [oslSkeleton]=\"skeletonLoading\">\n        <label class=\"label\" [class.txt-clr-red]=\"myField.touched && myField.invalid\">\n            {{label}} <span class=\"txt-clr-red\">{{required?'*':''}}</span>\n        </label>\n\n    </div>\n    <div  [oslSkeleton]=\"skeletonLoading\">\n    <input\n        [type]=\"dateType\"\n        [ngModel]=\"model\"\n        (ngModelChange)=\"onModelChange($event)\"\n        (change)=\"changeEv.emit(model)\"\n        [required]=\"required\"\n        [disabled]=\"disabled\"\n        [placeholder]=\"placeholder\"\n        [attr.min]=\"minDate || null\"\n        [attr.max]=\"maxDate || null\"\n        #myField=\"ngModel\"\n        [class.error]=\"myField.touched && myField.invalid\"\n    >\n    </div>\n    @if(myField.touched && myField.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}input[type=date],input[type=datetime-local],input[type=time],input[type=month],input[type=week]{height:var(--osl-control-height);width:100%;border-radius:var(--osl-border-radius);outline:none;border:1px solid var(--osl-border-color);padding:0 8px;font-size:var(--osl-text-font-size);font-family:inherit;transition:border-color .5s}input[type=date]:focus,input[type=datetime-local]:focus,input[type=time]:focus,input[type=month]:focus,input[type=week]:focus{border-color:var(--osl-focus-border-color)}input[type=date]:disabled,input[type=datetime-local]:disabled,input[type=time]:disabled,input[type=month]:disabled,input[type=week]:disabled{background:#f5f5f5;cursor:not-allowed;opacity:.7}input[type=date].error,input[type=datetime-local].error,input[type=time].error,input[type=month].error,input[type=week].error{border-color:var(--osl-error-color)}.hint{color:var(--osl-error-color);margin-top:2px;font-size:var(--osl-hint-font-size)}.txt-clr-red{color:var(--osl-error-color)}\n"], dependencies: [{ kind: "directive", type: i1$1.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: OslDatepicker, decorators: [{
             type: Component,
-            args: [{ selector: 'osl-datepicker', standalone: false, template: "<div class=\"d-flex flex-column\">\n    <label class=\"label\" [class.txt-clr-red]=\"myField.touched && myField.invalid\">\n        {{label}} <span class=\"txt-clr-red\">{{required?'*':''}}</span>\n    </label>\n    <input\n        [type]=\"dateType\"\n        [ngModel]=\"model\"\n        (ngModelChange)=\"onModelChange($event)\"\n        (change)=\"changeEv.emit(model)\"\n        [required]=\"required\"\n        [disabled]=\"disabled\"\n        [placeholder]=\"placeholder\"\n        [attr.min]=\"minDate || null\"\n        [attr.max]=\"maxDate || null\"\n        #myField=\"ngModel\"\n        [class.error]=\"myField.touched && myField.invalid\"\n    >\n    @if(myField.touched && myField.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}input[type=date],input[type=datetime-local],input[type=time],input[type=month],input[type=week]{height:var(--osl-control-height);width:100%;border-radius:var(--osl-border-radius);outline:none;border:1px solid var(--osl-border-color);padding:0 8px;font-size:var(--osl-text-font-size);font-family:inherit;transition:border-color .5s}input[type=date]:focus,input[type=datetime-local]:focus,input[type=time]:focus,input[type=month]:focus,input[type=week]:focus{border-color:var(--osl-focus-border-color)}input[type=date]:disabled,input[type=datetime-local]:disabled,input[type=time]:disabled,input[type=month]:disabled,input[type=week]:disabled{background:#f5f5f5;cursor:not-allowed;opacity:.7}input[type=date].error,input[type=datetime-local].error,input[type=time].error,input[type=month].error,input[type=week].error{border-color:var(--osl-error-color)}.hint{color:var(--osl-error-color);margin-top:2px;font-size:var(--osl-hint-font-size)}.txt-clr-red{color:var(--osl-error-color)}\n"] }]
+            args: [{ selector: 'osl-datepicker', standalone: false, template: "<div class=\"d-flex flex-column\">\n    <div  [oslSkeleton]=\"skeletonLoading\">\n        <label class=\"label\" [class.txt-clr-red]=\"myField.touched && myField.invalid\">\n            {{label}} <span class=\"txt-clr-red\">{{required?'*':''}}</span>\n        </label>\n\n    </div>\n    <div  [oslSkeleton]=\"skeletonLoading\">\n    <input\n        [type]=\"dateType\"\n        [ngModel]=\"model\"\n        (ngModelChange)=\"onModelChange($event)\"\n        (change)=\"changeEv.emit(model)\"\n        [required]=\"required\"\n        [disabled]=\"disabled\"\n        [placeholder]=\"placeholder\"\n        [attr.min]=\"minDate || null\"\n        [attr.max]=\"maxDate || null\"\n        #myField=\"ngModel\"\n        [class.error]=\"myField.touched && myField.invalid\"\n    >\n    </div>\n    @if(myField.touched && myField.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}input[type=date],input[type=datetime-local],input[type=time],input[type=month],input[type=week]{height:var(--osl-control-height);width:100%;border-radius:var(--osl-border-radius);outline:none;border:1px solid var(--osl-border-color);padding:0 8px;font-size:var(--osl-text-font-size);font-family:inherit;transition:border-color .5s}input[type=date]:focus,input[type=datetime-local]:focus,input[type=time]:focus,input[type=month]:focus,input[type=week]:focus{border-color:var(--osl-focus-border-color)}input[type=date]:disabled,input[type=datetime-local]:disabled,input[type=time]:disabled,input[type=month]:disabled,input[type=week]:disabled{background:#f5f5f5;cursor:not-allowed;opacity:.7}input[type=date].error,input[type=datetime-local].error,input[type=time].error,input[type=month].error,input[type=week].error{border-color:var(--osl-error-color)}.hint{color:var(--osl-error-color);margin-top:2px;font-size:var(--osl-hint-font-size)}.txt-clr-red{color:var(--osl-error-color)}\n"] }]
         }], propDecorators: { label: [{
                 type: Input,
                 args: ['label']
@@ -1040,6 +1545,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             }], minDate: [{
                 type: Input,
                 args: ['minDate']
+            }], skeletonLoading: [{
+                type: Input,
+                args: ['skeletonLoading']
             }], maxDate: [{
                 type: Input,
                 args: ['maxDate']
@@ -1056,6 +1564,7 @@ class OslCheckbox {
     required = false;
     model = false;
     indeterminate = false;
+    skeletonLoading = false;
     modelChange = new EventEmitter();
     changeEv = new EventEmitter();
     touched = false;
@@ -1079,11 +1588,11 @@ 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" }, 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\">\n    <label class=\"checkbox-wrapper\" [class.checkbox-disabled]=\"disabled\" [class.checkbox-invalid]=\"isInvalid\">\n        <input\n            #checkboxEl\n            type=\"checkbox\"\n            [ngModel]=\"model\"\n            (ngModelChange)=\"onModelChange($event)\"\n            [disabled]=\"disabled\"\n        >\n        <span class=\"checkbox-label\">\n            {{label}} <span class=\"txt-clr-red\">{{required?'*':''}}</span>\n        </span>\n    </label>\n    @if(isInvalid) {\n        <mat-hint class=\"hint\">{{label}} is Required!</mat-hint>\n    }\n</div>\n", styles: [".checkbox-wrapper{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:var(--osl-label-font-size);width:fit-content}.checkbox-wrapper input[type=checkbox]{width:16px;height:16px;cursor:pointer;accent-color:#333;flex-shrink:0}.checkbox-wrapper .checkbox-label{-webkit-user-select:none;user-select:none}.checkbox-wrapper.checkbox-disabled{opacity:.6;cursor:not-allowed}.checkbox-wrapper.checkbox-disabled input[type=checkbox]{cursor:not-allowed}.checkbox-wrapper.checkbox-invalid{color:var(--osl-error-color)}.hint{color:var(--osl-error-color);margin-top:2px;font-size:var(--osl-hint-font-size)}.txt-clr-red{color:var(--osl-error-color)}\n"], dependencies: [{ kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }] });
+    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" }, 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\">\n\n    <label class=\"checkbox-wrapper\"  [oslSkeleton]=\"skeletonLoading\" [class.checkbox-disabled]=\"disabled\" [class.checkbox-invalid]=\"isInvalid\">\n        <input\n            #checkboxEl\n            type=\"checkbox\"\n            [ngModel]=\"model\"\n            (ngModelChange)=\"onModelChange($event)\"\n            [disabled]=\"disabled\"\n        >\n        <span class=\"checkbox-label\"  [oslSkeleton]=\"skeletonLoading\">\n            {{label}} <span class=\"txt-clr-red\">{{required?'*':''}}</span>\n        </span>\n    </label>\n    @if(isInvalid) {\n        <mat-hint class=\"hint\">{{label}} is Required!</mat-hint>\n    }\n</div>\n", styles: [".checkbox-wrapper{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:var(--osl-label-font-size);width:fit-content}.checkbox-wrapper input[type=checkbox]{width:16px;height:16px;cursor:pointer;accent-color:#333;flex-shrink:0}.checkbox-wrapper .checkbox-label{-webkit-user-select:none;user-select:none}.checkbox-wrapper.checkbox-disabled{opacity:.6;cursor:not-allowed}.checkbox-wrapper.checkbox-disabled input[type=checkbox]{cursor:not-allowed}.checkbox-wrapper.checkbox-invalid{color:var(--osl-error-color)}.hint{color:var(--osl-error-color);margin-top:2px;font-size:var(--osl-hint-font-size)}.txt-clr-red{color:var(--osl-error-color)}\n"], dependencies: [{ kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: OslSkeletonDirective, selector: "[oslSkeleton]", inputs: ["oslSkeleton", "oslSkeletonType", "oslSkeletonAnimation", "oslSkeletonTheme", "oslSkeletonColor", "oslSkeletonHighlight", "oslSkeletonRadius", "oslSkeletonRows", "oslSkeletonRowGap", "oslSkeletonZIndex", "oslSkeletonDelay", "oslSkeletonDuration", "oslSkeletonMinHeight", "oslSkeletonForceReread", "oslSkeletonCircleSize", "oslSkeletonListItems", "oslSkeletonTableRows", "oslSkeletonTableCols", "oslSkeletonCardLines", "oslSkeletonBgColor"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslCheckbox, decorators: [{
             type: Component,
-            args: [{ selector: 'osl-checkbox', standalone: false, template: "<div class=\"d-flex flex-column\">\n    <label class=\"checkbox-wrapper\" [class.checkbox-disabled]=\"disabled\" [class.checkbox-invalid]=\"isInvalid\">\n        <input\n            #checkboxEl\n            type=\"checkbox\"\n            [ngModel]=\"model\"\n            (ngModelChange)=\"onModelChange($event)\"\n            [disabled]=\"disabled\"\n        >\n        <span class=\"checkbox-label\">\n            {{label}} <span class=\"txt-clr-red\">{{required?'*':''}}</span>\n        </span>\n    </label>\n    @if(isInvalid) {\n        <mat-hint class=\"hint\">{{label}} is Required!</mat-hint>\n    }\n</div>\n", styles: [".checkbox-wrapper{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:var(--osl-label-font-size);width:fit-content}.checkbox-wrapper input[type=checkbox]{width:16px;height:16px;cursor:pointer;accent-color:#333;flex-shrink:0}.checkbox-wrapper .checkbox-label{-webkit-user-select:none;user-select:none}.checkbox-wrapper.checkbox-disabled{opacity:.6;cursor:not-allowed}.checkbox-wrapper.checkbox-disabled input[type=checkbox]{cursor:not-allowed}.checkbox-wrapper.checkbox-invalid{color:var(--osl-error-color)}.hint{color:var(--osl-error-color);margin-top:2px;font-size:var(--osl-hint-font-size)}.txt-clr-red{color:var(--osl-error-color)}\n"] }]
+            args: [{ selector: 'osl-checkbox', standalone: false, template: "<div class=\"d-flex flex-column\">\n\n    <label class=\"checkbox-wrapper\"  [oslSkeleton]=\"skeletonLoading\" [class.checkbox-disabled]=\"disabled\" [class.checkbox-invalid]=\"isInvalid\">\n        <input\n            #checkboxEl\n            type=\"checkbox\"\n            [ngModel]=\"model\"\n            (ngModelChange)=\"onModelChange($event)\"\n            [disabled]=\"disabled\"\n        >\n        <span class=\"checkbox-label\"  [oslSkeleton]=\"skeletonLoading\">\n            {{label}} <span class=\"txt-clr-red\">{{required?'*':''}}</span>\n        </span>\n    </label>\n    @if(isInvalid) {\n        <mat-hint class=\"hint\">{{label}} is Required!</mat-hint>\n    }\n</div>\n", styles: [".checkbox-wrapper{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:var(--osl-label-font-size);width:fit-content}.checkbox-wrapper input[type=checkbox]{width:16px;height:16px;cursor:pointer;accent-color:#333;flex-shrink:0}.checkbox-wrapper .checkbox-label{-webkit-user-select:none;user-select:none}.checkbox-wrapper.checkbox-disabled{opacity:.6;cursor:not-allowed}.checkbox-wrapper.checkbox-disabled input[type=checkbox]{cursor:not-allowed}.checkbox-wrapper.checkbox-invalid{color:var(--osl-error-color)}.hint{color:var(--osl-error-color);margin-top:2px;font-size:var(--osl-hint-font-size)}.txt-clr-red{color:var(--osl-error-color)}\n"] }]
         }], propDecorators: { checkboxEl: [{
                 type: ViewChild,
                 args: ['checkboxEl']
@@ -1102,6 +1611,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             }], indeterminate: [{
                 type: Input,
                 args: ['indeterminate']
+            }], skeletonLoading: [{
+                type: Input,
+                args: ['skeletonLoading']
             }], modelChange: [{
                 type: Output
             }], changeEv: [{
@@ -1171,6 +1683,7 @@ class DynamicForm {
     cdr;
     elements = [];
     model;
+    skeletonLoading = false;
     modelChange = new EventEmitter();
     datasourceCache = inject(DatasourceCacheService);
     constructor(cdr) {
@@ -1208,17 +1721,20 @@ class DynamicForm {
         this.modelChange.emit(this.model);
     }
     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" }, outputs: { modelChange: "modelChange" }, usesOnChanges: true, ngImport: i0, template: "@if(elements && elements.length > 0) {\n    <div class=\"row 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'\">\n                    <osl-input\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!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                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [(model)]=\"model[elem.key]\"\n                    ></osl-input>\n                </div>\n            }\n\n            @case (\"textarea\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n                    <osl-textarea\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!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                    ></osl-textarea>\n                </div>\n            }\n\n            @case (\"select\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n                    <osl-select\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!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 ? elem.change(model) : null\"\n                        [(model)]=\"model[elem.key]\"\n                    ></osl-select>\n                </div>\n            }\n\n            @case (\"radio\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n                    <osl-radio\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!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                    ></osl-radio>\n                </div>\n            }\n\n            @case (\"slide-toggle\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n                    <osl-slide-toggle\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!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                    ></osl-slide-toggle>\n                </div>\n            }\n\n            @case (\"autocomplete\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n                    <osl-autocomplete\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!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)=\"elem.change ? elem.change(model) : null\"\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                        \n                        \n                    ></osl-autocomplete>\n                </div>\n            }\n\n            @case (\"file-uploader\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n                    <osl-file-upload\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [accept]=\"elem.accept || ''\"\n                        [multiple]=\"!!elem.multiple\"\n                        [maxSize]=\"elem.maxFileSize || 0\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [(model)]=\"model[elem.key]\"\n                    ></osl-file-upload>\n                </div>\n            }\n\n            @case (\"datepicker\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n                    <osl-datepicker\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [dateType]=\"elem.dateType || 'date'\"\n                        [placeholder]=\"elem.placeholder || ''\"\n                        [minDate]=\"elem.minDate || ''\"\n                        [maxDate]=\"elem.maxDate || ''\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [(model)]=\"model[elem.key]\"\n                    ></osl-datepicker>\n                </div>\n            }\n\n            @case (\"checkbox\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n                    <osl-checkbox\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!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                    ></osl-checkbox>\n                </div>\n            }\n\n            @case (\"button\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\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\">\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\n                \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: "component", type: Oslinput, selector: "osl-input", inputs: ["label", "required", "disabled", "model", "type", "placeholder", "mask", "min", "max", "minLength", "maxLength", "prefixIcon", "suffixIcon"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: Osltextarea, selector: "osl-textarea", inputs: ["label", "rows", "required", "disabled", "model", "placeholder", "maxLength", "minLength", "characterCounter", "resize"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslSelect, selector: "osl-select", inputs: ["label", "required", "disabled", "model", "datasource", "displayField", "valueField", "placeholder", "loading", "clearable"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslRadio, selector: "osl-radio", inputs: ["label", "required", "disabled", "model", "datasource", "displayField", "valueField", "inline"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslSlideToggle, selector: "osl-slide-toggle", inputs: ["label", "disabled", "model", "labelPosition", "trueLabel", "falseLabel"], 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"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslFileUpload, selector: "osl-file-upload", inputs: ["label", "required", "disabled", "model", "accept", "multiple", "maxSize"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslDatepicker, selector: "osl-datepicker", inputs: ["label", "required", "disabled", "model", "dateType", "placeholder", "minDate", "maxDate"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslCheckbox, selector: "osl-checkbox", inputs: ["label", "disabled", "required", "model", "indeterminate"], 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" }, outputs: { modelChange: "modelChange" }, usesOnChanges: true, ngImport: i0, template: "@if(elements && elements.length > 0) {\n    <div class=\"row 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'\">\n                    <osl-input\n                    [skeletonLoading]=\"skeletonLoading\"\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!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                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [(model)]=\"model[elem.key]\"\n                    ></osl-input>\n                </div>\n            }\n\n            @case (\"textarea\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n                    <osl-textarea\n                        [label]=\"elem.label\"\n                    [skeletonLoading]=\"skeletonLoading\"\n\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!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                    ></osl-textarea>\n                </div>\n            }\n\n            @case (\"select\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n                    <osl-select\n                        [label]=\"elem.label\"\n                    [skeletonLoading]=\"skeletonLoading\"\n\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!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 ? elem.change(model) : null\"\n                        [(model)]=\"model[elem.key]\"\n                    ></osl-select>\n                </div>\n            }\n\n            @case (\"radio\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n                    <osl-radio\n                        [label]=\"elem.label\"\n                    [skeletonLoading]=\"skeletonLoading\"\n\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!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                    ></osl-radio>\n                </div>\n            }\n\n            @case (\"slide-toggle\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n                    <osl-slide-toggle\n                        [label]=\"elem.label\"\n                    [skeletonLoading]=\"skeletonLoading\"\n\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!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                    ></osl-slide-toggle>\n                </div>\n            }\n\n            @case (\"autocomplete\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n                    <osl-autocomplete\n                        [label]=\"elem.label\"\n                    [skeletonLoading]=\"skeletonLoading\"\n\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!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)=\"elem.change ? elem.change(model) : null\"\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                        \n                        \n                    ></osl-autocomplete>\n                </div>\n            }\n\n            @case (\"file-uploader\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n                    <osl-file-upload\n                    [skeletonLoading]=\"skeletonLoading\"\n\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [accept]=\"elem.accept || ''\"\n                        [multiple]=\"!!elem.multiple\"\n                        [maxSize]=\"elem.maxFileSize || 0\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [(model)]=\"model[elem.key]\"\n                    ></osl-file-upload>\n                </div>\n            }\n\n            @case (\"datepicker\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n                    <osl-datepicker\n                    [skeletonLoading]=\"skeletonLoading\"\n\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [dateType]=\"elem.dateType || 'date'\"\n                        [placeholder]=\"elem.placeholder || ''\"\n                        [minDate]=\"elem.minDate || ''\"\n                        [maxDate]=\"elem.maxDate || ''\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [(model)]=\"model[elem.key]\"\n                    ></osl-datepicker>\n                </div>\n            }\n\n            @case (\"checkbox\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n                    <osl-checkbox\n                    [skeletonLoading]=\"skeletonLoading\"\n\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!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                    ></osl-checkbox>\n                </div>\n            }\n\n            @case (\"button\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n                    <osl-button\n                    \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\">\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\n                \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"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: Osltextarea, selector: "osl-textarea", inputs: ["label", "rows", "required", "disabled", "model", "placeholder", "maxLength", "minLength", "characterCounter", "resize", "skeletonLoading"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslSelect, selector: "osl-select", inputs: ["label", "required", "disabled", "model", "datasource", "displayField", "valueField", "placeholder", "loading", "clearable", "skeletonLoading"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslRadio, selector: "osl-radio", inputs: ["label", "required", "disabled", "model", "datasource", "displayField", "valueField", "inline", "skeletonLoading"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslSlideToggle, selector: "osl-slide-toggle", inputs: ["label", "disabled", "model", "labelPosition", "trueLabel", "falseLabel", "skeletonLoading"], 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"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslFileUpload, selector: "osl-file-upload", inputs: ["label", "required", "disabled", "model", "accept", "multiple", "maxSize", "skeletonLoading"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslDatepicker, selector: "osl-datepicker", inputs: ["label", "required", "disabled", "model", "dateType", "placeholder", "minDate", "skeletonLoading", "maxDate"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslCheckbox, selector: "osl-checkbox", inputs: ["label", "disabled", "required", "model", "indeterminate", "skeletonLoading"], 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 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'\">\n                    <osl-input\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!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                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [(model)]=\"model[elem.key]\"\n                    ></osl-input>\n                </div>\n            }\n\n            @case (\"textarea\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n                    <osl-textarea\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!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                    ></osl-textarea>\n                </div>\n            }\n\n            @case (\"select\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n                    <osl-select\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!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 ? elem.change(model) : null\"\n                        [(model)]=\"model[elem.key]\"\n                    ></osl-select>\n                </div>\n            }\n\n            @case (\"radio\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n                    <osl-radio\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!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                    ></osl-radio>\n                </div>\n            }\n\n            @case (\"slide-toggle\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n                    <osl-slide-toggle\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!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                    ></osl-slide-toggle>\n                </div>\n            }\n\n            @case (\"autocomplete\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n                    <osl-autocomplete\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!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)=\"elem.change ? elem.change(model) : null\"\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                        \n                        \n                    ></osl-autocomplete>\n                </div>\n            }\n\n            @case (\"file-uploader\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n                    <osl-file-upload\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [accept]=\"elem.accept || ''\"\n                        [multiple]=\"!!elem.multiple\"\n                        [maxSize]=\"elem.maxFileSize || 0\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [(model)]=\"model[elem.key]\"\n                    ></osl-file-upload>\n                </div>\n            }\n\n            @case (\"datepicker\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n                    <osl-datepicker\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [dateType]=\"elem.dateType || 'date'\"\n                        [placeholder]=\"elem.placeholder || ''\"\n                        [minDate]=\"elem.minDate || ''\"\n                        [maxDate]=\"elem.maxDate || ''\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [(model)]=\"model[elem.key]\"\n                    ></osl-datepicker>\n                </div>\n            }\n\n            @case (\"checkbox\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n                    <osl-checkbox\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!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                    ></osl-checkbox>\n                </div>\n            }\n\n            @case (\"button\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\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\">\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\n                \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 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'\">\n                    <osl-input\n                    [skeletonLoading]=\"skeletonLoading\"\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!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                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [(model)]=\"model[elem.key]\"\n                    ></osl-input>\n                </div>\n            }\n\n            @case (\"textarea\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n                    <osl-textarea\n                        [label]=\"elem.label\"\n                    [skeletonLoading]=\"skeletonLoading\"\n\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!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                    ></osl-textarea>\n                </div>\n            }\n\n            @case (\"select\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n                    <osl-select\n                        [label]=\"elem.label\"\n                    [skeletonLoading]=\"skeletonLoading\"\n\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!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 ? elem.change(model) : null\"\n                        [(model)]=\"model[elem.key]\"\n                    ></osl-select>\n                </div>\n            }\n\n            @case (\"radio\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n                    <osl-radio\n                        [label]=\"elem.label\"\n                    [skeletonLoading]=\"skeletonLoading\"\n\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!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                    ></osl-radio>\n                </div>\n            }\n\n            @case (\"slide-toggle\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n                    <osl-slide-toggle\n                        [label]=\"elem.label\"\n                    [skeletonLoading]=\"skeletonLoading\"\n\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!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                    ></osl-slide-toggle>\n                </div>\n            }\n\n            @case (\"autocomplete\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n                    <osl-autocomplete\n                        [label]=\"elem.label\"\n                    [skeletonLoading]=\"skeletonLoading\"\n\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!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)=\"elem.change ? elem.change(model) : null\"\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                        \n                        \n                    ></osl-autocomplete>\n                </div>\n            }\n\n            @case (\"file-uploader\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n                    <osl-file-upload\n                    [skeletonLoading]=\"skeletonLoading\"\n\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [accept]=\"elem.accept || ''\"\n                        [multiple]=\"!!elem.multiple\"\n                        [maxSize]=\"elem.maxFileSize || 0\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [(model)]=\"model[elem.key]\"\n                    ></osl-file-upload>\n                </div>\n            }\n\n            @case (\"datepicker\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n                    <osl-datepicker\n                    [skeletonLoading]=\"skeletonLoading\"\n\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [dateType]=\"elem.dateType || 'date'\"\n                        [placeholder]=\"elem.placeholder || ''\"\n                        [minDate]=\"elem.minDate || ''\"\n                        [maxDate]=\"elem.maxDate || ''\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [(model)]=\"model[elem.key]\"\n                    ></osl-datepicker>\n                </div>\n            }\n\n            @case (\"checkbox\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n                    <osl-checkbox\n                    [skeletonLoading]=\"skeletonLoading\"\n\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!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                    ></osl-checkbox>\n                </div>\n            }\n\n            @case (\"button\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n                    <osl-button\n                    \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\">\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\n                \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']
             }], model: [{
                 type: Input,
                 args: ['model']
+            }], skeletonLoading: [{
+                type: Input,
+                args: ['skeletonLoading']
             }], modelChange: [{
                 type: Output
             }] } });
@@ -1527,11 +2043,11 @@ class OslSetup {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslSetup, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: OslSetup, isStandalone: false, selector: "osl-setup", inputs: { title: "title", columns: "columns", datasource: "datasource", isPaginated: "isPaginated", pageSize: "pageSize", autoMode: "autoMode", tableHeight: "tableHeight", totalRecords: "totalRecords", loading: "loading", dialogWidth: "dialogWidth", formElements: "formElements", beforeDisplay: "beforeDisplay", onAddEditFn: "onAddEditFn", isLister: "isLister" }, outputs: { onSearch: "onSearch", onAdd: "onAdd", onSave: "onSave", onEdit: "onEdit", onDelete: "onDelete", pageChange: "pageChange", pageSizeChange: "pageSizeChange", sortChange: "sortChange", onRowClick: "onRowClick" }, viewQueries: [{ propertyName: "formBodyTpl", first: true, predicate: ["formBodyTpl"], descendants: true }, { propertyName: "formFooterTpl", first: true, predicate: ["formFooterTpl"], descendants: true }, { propertyName: "searchbar", first: true, predicate: ["searchbar"], descendants: true }], ngImport: i0, template: "<div class=\"p-2\">\n\n  <!-- Header -->\n  <div class=\"osl-setup-header\">\n    <h5 class=\"mb-0\">{{ title }}</h5>\n    <div class=\"d-flex align-items-center gap-2\">\n      <osl-searchbar #searchbar class=\"mx-2\" (onSearch)=\"onSearch.emit($event)\"></osl-searchbar>\n      @if(!isLister){\n        <osl-button \n          variant=\"secondary\"\n          size=\"sm\"\n          [label]=\"'Add ' + title\"\n          (clickEv)=\"openAddDialog()\"\n        ></osl-button>\n\n      }\n    </div>\n  </div>\n\n  <!-- Grid -->\n  <div class=\"osl-setup-body my-2\">\n    <osl-grid\n      [columns]=\"columnsWithActions\"\n      [datasource]=\"datasource\"\n      [isPaginated]=\"isPaginated\"\n      [pageSize]=\"pageSize\"\n      [autoMode]=\"autoMode\"\n      [tableHeight]=\"tableHeight\"\n      [totalRecords]=\"totalRecords\"\n      [loading]=\"loading\"\n      (editClick)=\"openEditDialog($event)\"\n      (deleteClick)=\"onDeleteClick($event)\"\n      (pageChange)=\"onPageChange(pageChange,$event)\"\n      (pageSizeChange)=\"onPageChange(pageSizeChange,$event)\"\n      (sortChange)=\"sortChange.emit($event)\"\n      [isSelectable]=\"isLister\";\n      (onRowClick)=\"onRowClick.emit($event)\"\n    />\n  </div>\n\n</div>\n\n<!-- Dialog: Form Body -->\n<ng-template #formBodyTpl>\n  <osl-dynamic-form\n    [elements]=\"formElements\"\n    [(model)]=\"dialogModel\"\n  ></osl-dynamic-form>\n</ng-template>\n\n<!-- Dialog: Form Footer -->\n<ng-template #formFooterTpl>\n  <div class=\"osl-setup-dialog-footer\">\n\n    \n    <button mat-flat-button class=\"dialog-save-btn\" (click)=\"saveDialog()\">\n      <!-- <mat-icon>{{ dialogMode === 'add' ? 'add_circle' : 'save' }}</mat-icon> -->\n      Save\n    </button>\n  </div>\n</ng-template>\n\n", styles: [".osl-setup-header{display:flex;align-items:center;justify-content:space-between}.osl-setup-dialog-footer{display:flex;align-items:center;justify-content:flex-end;gap:10px;width:100%}.dialog-cancel-btn{display:flex;align-items:center;gap:6px;height:38px;font-size:13px;font-weight:500;border-color:var(--osl-border-color, #d1d5db);color:var(--osl-secondary, #6b7280);border-radius:var(--osl-border-radius, 4px);padding:0 16px;transition:all .2s ease}.dialog-cancel-btn mat-icon{font-size:17px;width:17px;height:17px}.dialog-cancel-btn:hover{border-color:#9ca3af;background:#f9fafb;color:#374151}.dialog-save-btn{display:flex;align-items:center;gap:6px;height:38px;font-size:13px;font-weight:500;background:linear-gradient(135deg,var(--osl-primary, #2563eb),#3b82f6);color:#fff;border-radius:var(--osl-border-radius, 4px);padding:0 18px;transition:all .2s ease;box-shadow:0 2px 8px #2563eb40}.dialog-save-btn mat-icon{font-size:17px;width:17px;height:17px}.dialog-save-btn:hover{background:linear-gradient(135deg,var(--osl-primary-hover, #1d4ed8),#2563eb);box-shadow:0 4px 14px #2563eb66;transform:translateY(-1px)}.dialog-save-btn:active{transform:translateY(0);box-shadow:0 2px 8px #2563eb40}\n"], dependencies: [{ kind: "component", type: i3.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: DynamicForm, selector: "osl-dynamic-form", inputs: ["elements", "model"], outputs: ["modelChange"] }, { kind: "component", type: OslButton, selector: "osl-button", inputs: ["label", "icon", "variant", "size", "disabled", "loading", "type", "fullWidth"], outputs: ["clickEv"] }, { kind: "component", type: OslSearchbar, selector: "osl-searchbar", inputs: ["label"], outputs: ["onSearch"] }, { kind: "component", type: OslGrid, selector: "osl-grid", inputs: ["columns", "datasource", "isPaginated", "pageSize", "autoMode", "totalRecords", "tableHeight", "loading", "isSelectable"], outputs: ["datasourceChange", "pageChange", "pageSizeChange", "sortChange", "editClick", "deleteClick", "onRowClick"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: OslSetup, isStandalone: false, selector: "osl-setup", inputs: { title: "title", columns: "columns", datasource: "datasource", isPaginated: "isPaginated", pageSize: "pageSize", autoMode: "autoMode", tableHeight: "tableHeight", totalRecords: "totalRecords", loading: "loading", dialogWidth: "dialogWidth", formElements: "formElements", beforeDisplay: "beforeDisplay", onAddEditFn: "onAddEditFn", isLister: "isLister" }, outputs: { onSearch: "onSearch", onAdd: "onAdd", onSave: "onSave", onEdit: "onEdit", onDelete: "onDelete", pageChange: "pageChange", pageSizeChange: "pageSizeChange", sortChange: "sortChange", onRowClick: "onRowClick" }, viewQueries: [{ propertyName: "formBodyTpl", first: true, predicate: ["formBodyTpl"], descendants: true }, { propertyName: "formFooterTpl", first: true, predicate: ["formFooterTpl"], descendants: true }, { propertyName: "searchbar", first: true, predicate: ["searchbar"], descendants: true }], ngImport: i0, template: "<div class=\"p-2\">\n\n  <!-- Header -->\n  <div class=\"osl-setup-header\">\n    <h5 class=\"mb-0\">{{ title }}</h5>\n    <div class=\"d-flex align-items-center gap-2\">\n      <osl-searchbar #searchbar class=\"mx-2\" (onSearch)=\"onSearch.emit($event)\"></osl-searchbar>\n      @if(!isLister){\n        <osl-button \n          variant=\"secondary\"\n          size=\"sm\"\n          [label]=\"'Add ' + title\"\n          (clickEv)=\"openAddDialog()\"\n        ></osl-button>\n\n      }\n    </div>\n  </div>\n\n  <!-- Grid -->\n  <div class=\"osl-setup-body my-2\">\n    <osl-grid\n      [columns]=\"columnsWithActions\"\n      [datasource]=\"datasource\"\n      [isPaginated]=\"isPaginated\"\n      [pageSize]=\"pageSize\"\n      [autoMode]=\"autoMode\"\n      [tableHeight]=\"tableHeight\"\n      [totalRecords]=\"totalRecords\"\n      [loading]=\"loading\"\n      (editClick)=\"openEditDialog($event)\"\n      (deleteClick)=\"onDeleteClick($event)\"\n      (pageChange)=\"onPageChange(pageChange,$event)\"\n      (pageSizeChange)=\"onPageChange(pageSizeChange,$event)\"\n      (sortChange)=\"sortChange.emit($event)\"\n      [isSelectable]=\"isLister\";\n      (onRowClick)=\"onRowClick.emit($event)\"\n    />\n  </div>\n\n</div>\n\n<!-- Dialog: Form Body -->\n<ng-template #formBodyTpl>\n  <osl-dynamic-form\n    [elements]=\"formElements\"\n    [(model)]=\"dialogModel\"\n  ></osl-dynamic-form>\n</ng-template>\n\n<!-- Dialog: Form Footer -->\n<ng-template #formFooterTpl>\n  <div class=\"osl-setup-dialog-footer\">\n\n    \n    <button mat-flat-button class=\"dialog-save-btn\" (click)=\"saveDialog()\">\n      <!-- <mat-icon>{{ dialogMode === 'add' ? 'add_circle' : 'save' }}</mat-icon> -->\n      Save\n    </button>\n  </div>\n</ng-template>\n", styles: [".osl-setup-header{display:flex;align-items:center;justify-content:space-between}.osl-setup-dialog-footer{display:flex;align-items:center;justify-content:flex-end;gap:10px;width:100%}.dialog-cancel-btn{display:flex;align-items:center;gap:6px;height:38px;font-size:13px;font-weight:500;border-color:var(--osl-border-color, #d1d5db);color:var(--osl-secondary, #6b7280);border-radius:var(--osl-border-radius, 4px);padding:0 16px;transition:all .2s ease}.dialog-cancel-btn mat-icon{font-size:17px;width:17px;height:17px}.dialog-cancel-btn:hover{border-color:#9ca3af;background:#f9fafb;color:#374151}.dialog-save-btn{display:flex;align-items:center;gap:6px;height:38px;font-size:13px;font-weight:500;background:linear-gradient(135deg,var(--osl-primary, #2563eb),#3b82f6);color:#fff;border-radius:var(--osl-border-radius, 4px);padding:0 18px;transition:all .2s ease;box-shadow:0 2px 8px #2563eb40}.dialog-save-btn mat-icon{font-size:17px;width:17px;height:17px}.dialog-save-btn:hover{background:linear-gradient(135deg,var(--osl-primary-hover, #1d4ed8),#2563eb);box-shadow:0 4px 14px #2563eb66;transform:translateY(-1px)}.dialog-save-btn:active{transform:translateY(0);box-shadow:0 2px 8px #2563eb40}\n"], dependencies: [{ kind: "component", type: i3.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: DynamicForm, selector: "osl-dynamic-form", inputs: ["elements", "model", "skeletonLoading"], outputs: ["modelChange"] }, { kind: "component", type: OslButton, selector: "osl-button", inputs: ["label", "icon", "variant", "size", "disabled", "loading", "type", "fullWidth"], outputs: ["clickEv"] }, { kind: "component", type: OslSearchbar, selector: "osl-searchbar", inputs: ["label"], outputs: ["onSearch"] }, { kind: "component", type: OslGrid, selector: "osl-grid", inputs: ["columns", "datasource", "isPaginated", "pageSize", "autoMode", "totalRecords", "tableHeight", "loading", "isSelectable"], outputs: ["datasourceChange", "pageChange", "pageSizeChange", "sortChange", "editClick", "deleteClick", "onRowClick"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslSetup, decorators: [{
             type: Component,
-            args: [{ selector: 'osl-setup', standalone: false, template: "<div class=\"p-2\">\n\n  <!-- Header -->\n  <div class=\"osl-setup-header\">\n    <h5 class=\"mb-0\">{{ title }}</h5>\n    <div class=\"d-flex align-items-center gap-2\">\n      <osl-searchbar #searchbar class=\"mx-2\" (onSearch)=\"onSearch.emit($event)\"></osl-searchbar>\n      @if(!isLister){\n        <osl-button \n          variant=\"secondary\"\n          size=\"sm\"\n          [label]=\"'Add ' + title\"\n          (clickEv)=\"openAddDialog()\"\n        ></osl-button>\n\n      }\n    </div>\n  </div>\n\n  <!-- Grid -->\n  <div class=\"osl-setup-body my-2\">\n    <osl-grid\n      [columns]=\"columnsWithActions\"\n      [datasource]=\"datasource\"\n      [isPaginated]=\"isPaginated\"\n      [pageSize]=\"pageSize\"\n      [autoMode]=\"autoMode\"\n      [tableHeight]=\"tableHeight\"\n      [totalRecords]=\"totalRecords\"\n      [loading]=\"loading\"\n      (editClick)=\"openEditDialog($event)\"\n      (deleteClick)=\"onDeleteClick($event)\"\n      (pageChange)=\"onPageChange(pageChange,$event)\"\n      (pageSizeChange)=\"onPageChange(pageSizeChange,$event)\"\n      (sortChange)=\"sortChange.emit($event)\"\n      [isSelectable]=\"isLister\";\n      (onRowClick)=\"onRowClick.emit($event)\"\n    />\n  </div>\n\n</div>\n\n<!-- Dialog: Form Body -->\n<ng-template #formBodyTpl>\n  <osl-dynamic-form\n    [elements]=\"formElements\"\n    [(model)]=\"dialogModel\"\n  ></osl-dynamic-form>\n</ng-template>\n\n<!-- Dialog: Form Footer -->\n<ng-template #formFooterTpl>\n  <div class=\"osl-setup-dialog-footer\">\n\n    \n    <button mat-flat-button class=\"dialog-save-btn\" (click)=\"saveDialog()\">\n      <!-- <mat-icon>{{ dialogMode === 'add' ? 'add_circle' : 'save' }}</mat-icon> -->\n      Save\n    </button>\n  </div>\n</ng-template>\n\n", styles: [".osl-setup-header{display:flex;align-items:center;justify-content:space-between}.osl-setup-dialog-footer{display:flex;align-items:center;justify-content:flex-end;gap:10px;width:100%}.dialog-cancel-btn{display:flex;align-items:center;gap:6px;height:38px;font-size:13px;font-weight:500;border-color:var(--osl-border-color, #d1d5db);color:var(--osl-secondary, #6b7280);border-radius:var(--osl-border-radius, 4px);padding:0 16px;transition:all .2s ease}.dialog-cancel-btn mat-icon{font-size:17px;width:17px;height:17px}.dialog-cancel-btn:hover{border-color:#9ca3af;background:#f9fafb;color:#374151}.dialog-save-btn{display:flex;align-items:center;gap:6px;height:38px;font-size:13px;font-weight:500;background:linear-gradient(135deg,var(--osl-primary, #2563eb),#3b82f6);color:#fff;border-radius:var(--osl-border-radius, 4px);padding:0 18px;transition:all .2s ease;box-shadow:0 2px 8px #2563eb40}.dialog-save-btn mat-icon{font-size:17px;width:17px;height:17px}.dialog-save-btn:hover{background:linear-gradient(135deg,var(--osl-primary-hover, #1d4ed8),#2563eb);box-shadow:0 4px 14px #2563eb66;transform:translateY(-1px)}.dialog-save-btn:active{transform:translateY(0);box-shadow:0 2px 8px #2563eb40}\n"] }]
+            args: [{ selector: 'osl-setup', standalone: false, template: "<div class=\"p-2\">\n\n  <!-- Header -->\n  <div class=\"osl-setup-header\">\n    <h5 class=\"mb-0\">{{ title }}</h5>\n    <div class=\"d-flex align-items-center gap-2\">\n      <osl-searchbar #searchbar class=\"mx-2\" (onSearch)=\"onSearch.emit($event)\"></osl-searchbar>\n      @if(!isLister){\n        <osl-button \n          variant=\"secondary\"\n          size=\"sm\"\n          [label]=\"'Add ' + title\"\n          (clickEv)=\"openAddDialog()\"\n        ></osl-button>\n\n      }\n    </div>\n  </div>\n\n  <!-- Grid -->\n  <div class=\"osl-setup-body my-2\">\n    <osl-grid\n      [columns]=\"columnsWithActions\"\n      [datasource]=\"datasource\"\n      [isPaginated]=\"isPaginated\"\n      [pageSize]=\"pageSize\"\n      [autoMode]=\"autoMode\"\n      [tableHeight]=\"tableHeight\"\n      [totalRecords]=\"totalRecords\"\n      [loading]=\"loading\"\n      (editClick)=\"openEditDialog($event)\"\n      (deleteClick)=\"onDeleteClick($event)\"\n      (pageChange)=\"onPageChange(pageChange,$event)\"\n      (pageSizeChange)=\"onPageChange(pageSizeChange,$event)\"\n      (sortChange)=\"sortChange.emit($event)\"\n      [isSelectable]=\"isLister\";\n      (onRowClick)=\"onRowClick.emit($event)\"\n    />\n  </div>\n\n</div>\n\n<!-- Dialog: Form Body -->\n<ng-template #formBodyTpl>\n  <osl-dynamic-form\n    [elements]=\"formElements\"\n    [(model)]=\"dialogModel\"\n  ></osl-dynamic-form>\n</ng-template>\n\n<!-- Dialog: Form Footer -->\n<ng-template #formFooterTpl>\n  <div class=\"osl-setup-dialog-footer\">\n\n    \n    <button mat-flat-button class=\"dialog-save-btn\" (click)=\"saveDialog()\">\n      <!-- <mat-icon>{{ dialogMode === 'add' ? 'add_circle' : 'save' }}</mat-icon> -->\n      Save\n    </button>\n  </div>\n</ng-template>\n", styles: [".osl-setup-header{display:flex;align-items:center;justify-content:space-between}.osl-setup-dialog-footer{display:flex;align-items:center;justify-content:flex-end;gap:10px;width:100%}.dialog-cancel-btn{display:flex;align-items:center;gap:6px;height:38px;font-size:13px;font-weight:500;border-color:var(--osl-border-color, #d1d5db);color:var(--osl-secondary, #6b7280);border-radius:var(--osl-border-radius, 4px);padding:0 16px;transition:all .2s ease}.dialog-cancel-btn mat-icon{font-size:17px;width:17px;height:17px}.dialog-cancel-btn:hover{border-color:#9ca3af;background:#f9fafb;color:#374151}.dialog-save-btn{display:flex;align-items:center;gap:6px;height:38px;font-size:13px;font-weight:500;background:linear-gradient(135deg,var(--osl-primary, #2563eb),#3b82f6);color:#fff;border-radius:var(--osl-border-radius, 4px);padding:0 18px;transition:all .2s ease;box-shadow:0 2px 8px #2563eb40}.dialog-save-btn mat-icon{font-size:17px;width:17px;height:17px}.dialog-save-btn:hover{background:linear-gradient(135deg,var(--osl-primary-hover, #1d4ed8),#2563eb);box-shadow:0 4px 14px #2563eb66;transform:translateY(-1px)}.dialog-save-btn:active{transform:translateY(0);box-shadow:0 2px 8px #2563eb40}\n"] }]
         }], propDecorators: { formBodyTpl: [{
                 type: ViewChild,
                 args: ['formBodyTpl']
@@ -1710,7 +2226,7 @@ class OslFormGrid {
         return !!col.formElem?.required || !!col.formElem?.requiredIf;
     }
     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" }, outputs: { datasourceChange: "datasourceChange", rowAdd: "rowAdd", rowDelete: "rowDelete" }, ngImport: i0, template: "<div class=\"osl-fg-wrapper\">\n\n  <div class=\"osl-fg-table-container\" [style.height]=\"tableHeight\">\n    <table class=\"osl-fg-table\">\n\n      <thead class=\"osl-fg-thead\">\n        <tr>\n          <!-- Actions column: + add button in header -->\n          @if (hasActions) {\n            <th class=\"osl-fg-th osl-fg-th--actions\">\n              @if (canAdd) {\n                <button class=\"osl-grid-icon-btn\" (click)=\"addRow()\" [disabled]=\"loading\" title=\"Add row\">\n                  <mat-icon>add</mat-icon>\n                </button>\n              }\n            </th>\n          }\n          @for (col of columns; track col.key) {\n            <th class=\"osl-fg-th\" [style.width]=\"col.width\">\n              {{ col.displayName }}\n              @if (colRequired(col)) {\n                <span class=\"osl-fg-th-required\">*</span>\n              }\n            </th>\n          }\n        </tr>\n      </thead>\n\n      <tbody>\n\n        @if (loading) {\n          @for (sk of skeletonRows; track $index) {\n            <tr class=\"osl-fg-row osl-fg-row--skeleton\">\n              @if (hasActions) {\n                <td class=\"osl-fg-td osl-fg-td--actions\">\n                  <div class=\"osl-fg-skeleton osl-fg-skeleton--sm\"></div>\n                </td>\n              }\n              @for (col of columns; track col.key) {\n                <td class=\"osl-fg-td\"><div class=\"osl-fg-skeleton\"></div></td>\n              }\n            </tr>\n          }\n\n        } @else if (pagedData.length === 0) {\n          <tr>\n            <td [attr.colspan]=\"columns.length + (hasActions ? 1 : 0)\" class=\"osl-fg-empty\">\n              <div class=\"osl-fg-empty-inner\">\n                <svg width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\n                  <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"/>\n                  <line x1=\"3\" y1=\"9\" x2=\"21\" y2=\"9\"/>\n                  <line x1=\"9\" y1=\"9\" x2=\"9\" y2=\"21\"/>\n                </svg>\n                <p>No rows yet.{{ canAdd ? ' Use + to get started.' : '' }}</p>\n              </div>\n            </td>\n          </tr>\n\n        } @else {\n          @for (row of pagedData; track $index; let i = $index) {\n            <tr class=\"osl-fg-row\">\n\n              <!-- Delete button first -->\n              @if (hasActions) {\n                <td class=\"osl-fg-td osl-fg-td--actions\">\n                  @if (canDelete) {\n                    <button class=\"osl-grid-icon-btn osl-grid-icon-btn--danger\" (click)=\"deleteRow(i)\" title=\"Delete\">\n                      <mat-icon>delete_outline</mat-icon>\n                    </button>\n                    <!-- <button class=\"osl-fg-delete-btn\" (click)=\"deleteRow(i)\" title=\"Delete row\">\n                      <mat-icon>delete_outline</mat-icon>\n                    </button> -->\n                  }\n                </td>\n              }\n\n              @for (col of columns; track col.key) {\n                <td class=\"osl-fg-td\" [style.width]=\"col.width\">\n                  @if (col.formElem) {\n                    <div class=\"osl-fg-cell-form\">\n                      @switch (col.formElem.elementType) {\n\n                        @case ('textbox') {\n                          <osl-input\n                            [label]=\"''\"\n                            [required]=\"false\"\n                            [disabled]=\"isDisabled(col.formElem)\"\n                            [type]=\"col.formElem.inputType || 'text'\"\n                            [placeholder]=\"col.formElem.placeholder || col.displayName\"\n                            [mask]=\"col.formElem.mask || ''\"\n                            [min]=\"col.formElem.min ?? ''\"\n                            [max]=\"col.formElem.max ?? ''\"\n                            [minLength]=\"col.formElem.minLength ?? null\"\n                            [maxLength]=\"col.formElem.maxLength ?? null\"\n                            [prefixIcon]=\"col.formElem.prefixIcon || ''\"\n                            [suffixIcon]=\"col.formElem.suffixIcon || ''\"\n                            [model]=\"row[col.key]\"\n                            (modelChange)=\"onCellChange(row, col, $event)\"\n                            (changeEv)=\"col.formElem.change ? col.formElem.change(row) : null\">\n                          </osl-input>\n                        }\n\n                        @case ('textarea') {\n                          <osl-textarea\n                            [label]=\"''\"\n                            [required]=\"false\"\n                            [disabled]=\"isDisabled(col.formElem)\"\n                            [rows]=\"col.formElem.textareaRows || 3\"\n                            [placeholder]=\"col.formElem.placeholder || col.displayName\"\n                            [maxLength]=\"col.formElem.maxLength ?? null\"\n                            [minLength]=\"col.formElem.minLength ?? null\"\n                            [characterCounter]=\"!!col.formElem.characterCounter\"\n                            [resize]=\"col.formElem.resize || 'none'\"\n                            [model]=\"row[col.key]\"\n                            (modelChange)=\"onCellChange(row, col, $event)\"\n                            (changeEv)=\"col.formElem.change ? col.formElem.change(row) : null\">\n                          </osl-textarea>\n                        }\n\n                        @case ('select') {\n                          <osl-select\n                            [label]=\"''\"\n                            [required]=\"false\"\n                            [disabled]=\"isDisabled(col.formElem)\"\n                            [datasource]=\"col.formElem.datasource || []\"\n                            [displayField]=\"col.formElem.displayField || ''\"\n                            [valueField]=\"col.formElem.valueField || ''\"\n                            [placeholder]=\"col.formElem.selectPlaceholder || col.displayName\"\n                            [loading]=\"isLoading(row, col.formElem)\"\n                            [clearable]=\"!!col.formElem.clearable\"\n                            [model]=\"row[col.key]\"\n                            (modelChange)=\"onCellChange(row, col, $event)\"\n                            (changeEv)=\"col.formElem.change ? col.formElem.change(row) : null\">\n                          </osl-select>\n                        }\n\n                        @case ('autocomplete') {\n                          <osl-autocomplete\n                            [label]=\"''\"\n                            [required]=\"false\"\n                            [disabled]=\"isDisabled(col.formElem)\"\n                            [datasource]=\"col.formElem.datasource || []\"\n                            [displayField]=\"col.formElem.displayField || ''\"\n                            [valueField]=\"col.formElem.valueField || ''\"\n                            [placeholder]=\"col.formElem.autocompletePlaceholder || col.displayName\"\n                            [loading]=\"isLoading(row, col.formElem)\"\n                            [model]=\"row[col.key]\"\n                            (modelChange)=\"onCellChange(row, col, $event)\"\n                            (changeEv)=\"col.formElem.change ? col.formElem.change(row) : null\">\n                          </osl-autocomplete>\n                        }\n\n                        @case ('radio') {\n                          <osl-radio\n                            [label]=\"''\"\n                            [required]=\"false\"\n                            [disabled]=\"isDisabled(col.formElem)\"\n                            [datasource]=\"col.formElem.datasource || []\"\n                            [displayField]=\"col.formElem.displayField || ''\"\n                            [valueField]=\"col.formElem.valueField || ''\"\n                            [inline]=\"!!col.formElem.inline\"\n                            [model]=\"row[col.key]\"\n                            (modelChange)=\"onCellChange(row, col, $event)\"\n                            (changeEv)=\"col.formElem.change ? col.formElem.change(row) : null\">\n                          </osl-radio>\n                        }\n\n                        @case ('checkbox') {\n                          <osl-checkbox\n                            [label]=\"''\"\n                            [required]=\"false\"\n                            [disabled]=\"isDisabled(col.formElem)\"\n                            [indeterminate]=\"!!col.formElem.indeterminate\"\n                            [model]=\"row[col.key]\"\n                            (modelChange)=\"onCellChange(row, col, $event)\"\n                            (changeEv)=\"col.formElem.change ? col.formElem.change(row) : null\">\n                          </osl-checkbox>\n                        }\n\n                        @case ('slide-toggle') {\n                          <osl-slide-toggle\n                            [label]=\"''\"\n                            [disabled]=\"isDisabled(col.formElem)\"\n                            [labelPosition]=\"col.formElem.labelPosition || 'after'\"\n                            [trueLabel]=\"col.formElem.trueLabel || ''\"\n                            [falseLabel]=\"col.formElem.falseLabel || ''\"\n                            [model]=\"row[col.key]\"\n                            (modelChange)=\"onCellChange(row, col, $event)\"\n                            (changeEv)=\"col.formElem.change ? col.formElem.change(row) : null\">\n                          </osl-slide-toggle>\n                        }\n\n                        @case ('datepicker') {\n                          <osl-datepicker\n                            [label]=\"''\"\n                            [required]=\"false\"\n                            [disabled]=\"isDisabled(col.formElem)\"\n                            [dateType]=\"col.formElem.dateType || 'date'\"\n                            [placeholder]=\"col.formElem.placeholder || col.displayName\"\n                            [minDate]=\"col.formElem.minDate || ''\"\n                            [maxDate]=\"col.formElem.maxDate || ''\"\n                            [model]=\"row[col.key]\"\n                            (modelChange)=\"onCellChange(row, col, $event)\"\n                            (changeEv)=\"col.formElem.change ? col.formElem.change(row) : null\">\n                          </osl-datepicker>\n                        }\n\n                        @case ('file-uploader') {\n                          <osl-file-upload\n                            [label]=\"''\"\n                            [required]=\"false\"\n                            [disabled]=\"isDisabled(col.formElem)\"\n                            [accept]=\"col.formElem.accept || ''\"\n                            [multiple]=\"!!col.formElem.multiple\"\n                            [maxSize]=\"col.formElem.maxFileSize || 0\"\n                            [model]=\"row[col.key]\"\n                            (modelChange)=\"onCellChange(row, col, $event)\"\n                            (changeEv)=\"col.formElem.change ? col.formElem.change(row) : null\">\n                          </osl-file-upload>\n                        }\n\n                      }\n                    </div>\n                  } @else {\n                    <span class=\"osl-fg-cell-text\">{{ row[col.key] ?? '--' }}</span>\n                  }\n                </td>\n              }\n\n            </tr>\n          }\n        }\n\n      </tbody>\n    </table>\n  </div>\n\n  @if (isPaginated) {\n    <div class=\"osl-fg-pagination\">\n\n      <span class=\"osl-fg-pagination__info\">\n        @if (loading) {\n          Loading...\n        } @else if (_total > 0) {\n          {{ startRecord }}\u2013{{ endRecord }} of {{ _total }} rows\n        } @else {\n          No rows\n        }\n      </span>\n\n      <div class=\"osl-fg-pagination__controls\">\n        <button class=\"osl-fg-page-btn osl-fg-page-btn--nav\" (click)=\"goToPage(1)\" [disabled]=\"currentPage === 1 || loading\">\u00AB</button>\n        <button class=\"osl-fg-page-btn osl-fg-page-btn--nav\" (click)=\"goToPage(currentPage - 1)\" [disabled]=\"currentPage === 1 || loading\">\u2039 Prev</button>\n\n        @for (page of pageNumbers; track $index) {\n          @if (page === -1) {\n            <span class=\"osl-fg-page-ellipsis\">\u2026</span>\n          } @else {\n            <button\n              class=\"osl-fg-page-btn osl-fg-page-btn--num\"\n              [class.osl-fg-page-btn--active]=\"page === currentPage\"\n              [disabled]=\"loading\"\n              (click)=\"goToPage(page)\">\n              {{ page }}\n            </button>\n          }\n        }\n\n        <button class=\"osl-fg-page-btn osl-fg-page-btn--nav\" (click)=\"goToPage(currentPage + 1)\" [disabled]=\"currentPage === totalPages || loading\">Next \u203A</button>\n        <button class=\"osl-fg-page-btn osl-fg-page-btn--nav\" (click)=\"goToPage(totalPages)\" [disabled]=\"currentPage === totalPages || loading\">\u00BB</button>\n      </div>\n\n      <div class=\"osl-fg-pagination__size\">\n        <select class=\"osl-fg-page-size\" [ngModel]=\"pageSize\" (ngModelChange)=\"onPageSizeChange($event)\" [disabled]=\"loading\">\n          @for (opt of pageSizeOptions; track opt) {\n            <option [value]=\"opt\">{{ opt }} per page</option>\n          }\n        </select>\n      </div>\n\n    </div>\n  }\n\n</div>\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-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"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: Osltextarea, selector: "osl-textarea", inputs: ["label", "rows", "required", "disabled", "model", "placeholder", "maxLength", "minLength", "characterCounter", "resize"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslSelect, selector: "osl-select", inputs: ["label", "required", "disabled", "model", "datasource", "displayField", "valueField", "placeholder", "loading", "clearable"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslRadio, selector: "osl-radio", inputs: ["label", "required", "disabled", "model", "datasource", "displayField", "valueField", "inline"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslSlideToggle, selector: "osl-slide-toggle", inputs: ["label", "disabled", "model", "labelPosition", "trueLabel", "falseLabel"], 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"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslFileUpload, selector: "osl-file-upload", inputs: ["label", "required", "disabled", "model", "accept", "multiple", "maxSize"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslDatepicker, selector: "osl-datepicker", inputs: ["label", "required", "disabled", "model", "dateType", "placeholder", "minDate", "maxDate"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslCheckbox, selector: "osl-checkbox", inputs: ["label", "disabled", "required", "model", "indeterminate"], 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" }, outputs: { datasourceChange: "datasourceChange", rowAdd: "rowAdd", rowDelete: "rowDelete" }, ngImport: i0, template: "<div class=\"osl-fg-wrapper\">\n\n  <div class=\"osl-fg-table-container\" [style.height]=\"tableHeight\">\n    <table class=\"osl-fg-table\">\n\n      <thead class=\"osl-fg-thead\">\n        <tr>\n          <!-- Actions column: + add button in header -->\n          @if (hasActions) {\n            <th class=\"osl-fg-th osl-fg-th--actions\">\n              @if (canAdd) {\n                <button class=\"osl-grid-icon-btn\" (click)=\"addRow()\" [disabled]=\"loading\" title=\"Add row\">\n                  <mat-icon>add</mat-icon>\n                </button>\n              }\n            </th>\n          }\n          @for (col of columns; track col.key) {\n            <th class=\"osl-fg-th\" [style.width]=\"col.width\">\n              {{ col.displayName }}\n              @if (colRequired(col)) {\n                <span class=\"osl-fg-th-required\">*</span>\n              }\n            </th>\n          }\n        </tr>\n      </thead>\n\n      <tbody>\n\n        @if (loading) {\n          @for (sk of skeletonRows; track $index) {\n            <tr class=\"osl-fg-row osl-fg-row--skeleton\">\n              @if (hasActions) {\n                <td class=\"osl-fg-td osl-fg-td--actions\">\n                  <div class=\"osl-fg-skeleton osl-fg-skeleton--sm\"></div>\n                </td>\n              }\n              @for (col of columns; track col.key) {\n                <td class=\"osl-fg-td\"><div class=\"osl-fg-skeleton\"></div></td>\n              }\n            </tr>\n          }\n\n        } @else if (pagedData.length === 0) {\n          <tr>\n            <td [attr.colspan]=\"columns.length + (hasActions ? 1 : 0)\" class=\"osl-fg-empty\">\n              <div class=\"osl-fg-empty-inner\">\n                <svg width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\n                  <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"/>\n                  <line x1=\"3\" y1=\"9\" x2=\"21\" y2=\"9\"/>\n                  <line x1=\"9\" y1=\"9\" x2=\"9\" y2=\"21\"/>\n                </svg>\n                <p>No rows yet.{{ canAdd ? ' Use + to get started.' : '' }}</p>\n              </div>\n            </td>\n          </tr>\n\n        } @else {\n          @for (row of pagedData; track $index; let i = $index) {\n            <tr class=\"osl-fg-row\">\n\n              <!-- Delete button first -->\n              @if (hasActions) {\n                <td class=\"osl-fg-td osl-fg-td--actions\">\n                  @if (canDelete) {\n                    <button class=\"osl-grid-icon-btn osl-grid-icon-btn--danger\" (click)=\"deleteRow(i)\" title=\"Delete\">\n                      <mat-icon>delete_outline</mat-icon>\n                    </button>\n                    <!-- <button class=\"osl-fg-delete-btn\" (click)=\"deleteRow(i)\" title=\"Delete row\">\n                      <mat-icon>delete_outline</mat-icon>\n                    </button> -->\n                  }\n                </td>\n              }\n\n              @for (col of columns; track col.key) {\n                <td class=\"osl-fg-td\" [style.width]=\"col.width\">\n                  @if (col.formElem) {\n                    <div class=\"osl-fg-cell-form\">\n                      @switch (col.formElem.elementType) {\n\n                        @case ('textbox') {\n                          <osl-input\n                            [label]=\"''\"\n                            [required]=\"false\"\n                            [disabled]=\"isDisabled(col.formElem)\"\n                            [type]=\"col.formElem.inputType || 'text'\"\n                            [placeholder]=\"col.formElem.placeholder || col.displayName\"\n                            [mask]=\"col.formElem.mask || ''\"\n                            [min]=\"col.formElem.min ?? ''\"\n                            [max]=\"col.formElem.max ?? ''\"\n                            [minLength]=\"col.formElem.minLength ?? null\"\n                            [maxLength]=\"col.formElem.maxLength ?? null\"\n                            [prefixIcon]=\"col.formElem.prefixIcon || ''\"\n                            [suffixIcon]=\"col.formElem.suffixIcon || ''\"\n                            [model]=\"row[col.key]\"\n                            (modelChange)=\"onCellChange(row, col, $event)\"\n                            (changeEv)=\"col.formElem.change ? col.formElem.change(row) : null\">\n                          </osl-input>\n                        }\n\n                        @case ('textarea') {\n                          <osl-textarea\n                            [label]=\"''\"\n                            [required]=\"false\"\n                            [disabled]=\"isDisabled(col.formElem)\"\n                            [rows]=\"col.formElem.textareaRows || 3\"\n                            [placeholder]=\"col.formElem.placeholder || col.displayName\"\n                            [maxLength]=\"col.formElem.maxLength ?? null\"\n                            [minLength]=\"col.formElem.minLength ?? null\"\n                            [characterCounter]=\"!!col.formElem.characterCounter\"\n                            [resize]=\"col.formElem.resize || 'none'\"\n                            [model]=\"row[col.key]\"\n                            (modelChange)=\"onCellChange(row, col, $event)\"\n                            (changeEv)=\"col.formElem.change ? col.formElem.change(row) : null\">\n                          </osl-textarea>\n                        }\n\n                        @case ('select') {\n                          <osl-select\n                            [label]=\"''\"\n                            [required]=\"false\"\n                            [disabled]=\"isDisabled(col.formElem)\"\n                            [datasource]=\"col.formElem.datasource || []\"\n                            [displayField]=\"col.formElem.displayField || ''\"\n                            [valueField]=\"col.formElem.valueField || ''\"\n                            [placeholder]=\"col.formElem.selectPlaceholder || col.displayName\"\n                            [loading]=\"isLoading(row, col.formElem)\"\n                            [clearable]=\"!!col.formElem.clearable\"\n                            [model]=\"row[col.key]\"\n                            (modelChange)=\"onCellChange(row, col, $event)\"\n                            (changeEv)=\"col.formElem.change ? col.formElem.change(row) : null\">\n                          </osl-select>\n                        }\n\n                        @case ('autocomplete') {\n                          <osl-autocomplete\n                            [label]=\"''\"\n                            [required]=\"false\"\n                            [disabled]=\"isDisabled(col.formElem)\"\n                            [datasource]=\"col.formElem.datasource || []\"\n                            [displayField]=\"col.formElem.displayField || ''\"\n                            [valueField]=\"col.formElem.valueField || ''\"\n                            [placeholder]=\"col.formElem.autocompletePlaceholder || col.displayName\"\n                            [loading]=\"isLoading(row, col.formElem)\"\n                            [model]=\"row[col.key]\"\n                            (modelChange)=\"onCellChange(row, col, $event)\"\n                            (changeEv)=\"col.formElem.change ? col.formElem.change(row) : null\">\n                          </osl-autocomplete>\n                        }\n\n                        @case ('radio') {\n                          <osl-radio\n                            [label]=\"''\"\n                            [required]=\"false\"\n                            [disabled]=\"isDisabled(col.formElem)\"\n                            [datasource]=\"col.formElem.datasource || []\"\n                            [displayField]=\"col.formElem.displayField || ''\"\n                            [valueField]=\"col.formElem.valueField || ''\"\n                            [inline]=\"!!col.formElem.inline\"\n                            [model]=\"row[col.key]\"\n                            (modelChange)=\"onCellChange(row, col, $event)\"\n                            (changeEv)=\"col.formElem.change ? col.formElem.change(row) : null\">\n                          </osl-radio>\n                        }\n\n                        @case ('checkbox') {\n                          <osl-checkbox\n                            [label]=\"''\"\n                            [required]=\"false\"\n                            [disabled]=\"isDisabled(col.formElem)\"\n                            [indeterminate]=\"!!col.formElem.indeterminate\"\n                            [model]=\"row[col.key]\"\n                            (modelChange)=\"onCellChange(row, col, $event)\"\n                            (changeEv)=\"col.formElem.change ? col.formElem.change(row) : null\">\n                          </osl-checkbox>\n                        }\n\n                        @case ('slide-toggle') {\n                          <osl-slide-toggle\n                            [label]=\"''\"\n                            [disabled]=\"isDisabled(col.formElem)\"\n                            [labelPosition]=\"col.formElem.labelPosition || 'after'\"\n                            [trueLabel]=\"col.formElem.trueLabel || ''\"\n                            [falseLabel]=\"col.formElem.falseLabel || ''\"\n                            [model]=\"row[col.key]\"\n                            (modelChange)=\"onCellChange(row, col, $event)\"\n                            (changeEv)=\"col.formElem.change ? col.formElem.change(row) : null\">\n                          </osl-slide-toggle>\n                        }\n\n                        @case ('datepicker') {\n                          <osl-datepicker\n                            [label]=\"''\"\n                            [required]=\"false\"\n                            [disabled]=\"isDisabled(col.formElem)\"\n                            [dateType]=\"col.formElem.dateType || 'date'\"\n                            [placeholder]=\"col.formElem.placeholder || col.displayName\"\n                            [minDate]=\"col.formElem.minDate || ''\"\n                            [maxDate]=\"col.formElem.maxDate || ''\"\n                            [model]=\"row[col.key]\"\n                            (modelChange)=\"onCellChange(row, col, $event)\"\n                            (changeEv)=\"col.formElem.change ? col.formElem.change(row) : null\">\n                          </osl-datepicker>\n                        }\n\n                        @case ('file-uploader') {\n                          <osl-file-upload\n                            [label]=\"''\"\n                            [required]=\"false\"\n                            [disabled]=\"isDisabled(col.formElem)\"\n                            [accept]=\"col.formElem.accept || ''\"\n                            [multiple]=\"!!col.formElem.multiple\"\n                            [maxSize]=\"col.formElem.maxFileSize || 0\"\n                            [model]=\"row[col.key]\"\n                            (modelChange)=\"onCellChange(row, col, $event)\"\n                            (changeEv)=\"col.formElem.change ? col.formElem.change(row) : null\">\n                          </osl-file-upload>\n                        }\n\n                      }\n                    </div>\n                  } @else {\n                    <span class=\"osl-fg-cell-text\">{{ row[col.key] ?? '--' }}</span>\n                  }\n                </td>\n              }\n\n            </tr>\n          }\n        }\n\n      </tbody>\n    </table>\n  </div>\n\n  @if (isPaginated) {\n    <div class=\"osl-fg-pagination\">\n\n      <span class=\"osl-fg-pagination__info\">\n        @if (loading) {\n          Loading...\n        } @else if (_total > 0) {\n          {{ startRecord }}\u2013{{ endRecord }} of {{ _total }} rows\n        } @else {\n          No rows\n        }\n      </span>\n\n      <div class=\"osl-fg-pagination__controls\">\n        <button class=\"osl-fg-page-btn osl-fg-page-btn--nav\" (click)=\"goToPage(1)\" [disabled]=\"currentPage === 1 || loading\">\u00AB</button>\n        <button class=\"osl-fg-page-btn osl-fg-page-btn--nav\" (click)=\"goToPage(currentPage - 1)\" [disabled]=\"currentPage === 1 || loading\">\u2039 Prev</button>\n\n        @for (page of pageNumbers; track $index) {\n          @if (page === -1) {\n            <span class=\"osl-fg-page-ellipsis\">\u2026</span>\n          } @else {\n            <button\n              class=\"osl-fg-page-btn osl-fg-page-btn--num\"\n              [class.osl-fg-page-btn--active]=\"page === currentPage\"\n              [disabled]=\"loading\"\n              (click)=\"goToPage(page)\">\n              {{ page }}\n            </button>\n          }\n        }\n\n        <button class=\"osl-fg-page-btn osl-fg-page-btn--nav\" (click)=\"goToPage(currentPage + 1)\" [disabled]=\"currentPage === totalPages || loading\">Next \u203A</button>\n        <button class=\"osl-fg-page-btn osl-fg-page-btn--nav\" (click)=\"goToPage(totalPages)\" [disabled]=\"currentPage === totalPages || loading\">\u00BB</button>\n      </div>\n\n      <div class=\"osl-fg-pagination__size\">\n        <select class=\"osl-fg-page-size\" [ngModel]=\"pageSize\" (ngModelChange)=\"onPageSizeChange($event)\" [disabled]=\"loading\">\n          @for (opt of pageSizeOptions; track opt) {\n            <option [value]=\"opt\">{{ opt }} per page</option>\n          }\n        </select>\n      </div>\n\n    </div>\n  }\n\n</div>\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-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"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: Osltextarea, selector: "osl-textarea", inputs: ["label", "rows", "required", "disabled", "model", "placeholder", "maxLength", "minLength", "characterCounter", "resize", "skeletonLoading"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslSelect, selector: "osl-select", inputs: ["label", "required", "disabled", "model", "datasource", "displayField", "valueField", "placeholder", "loading", "clearable", "skeletonLoading"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslRadio, selector: "osl-radio", inputs: ["label", "required", "disabled", "model", "datasource", "displayField", "valueField", "inline", "skeletonLoading"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslSlideToggle, selector: "osl-slide-toggle", inputs: ["label", "disabled", "model", "labelPosition", "trueLabel", "falseLabel", "skeletonLoading"], 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"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslFileUpload, selector: "osl-file-upload", inputs: ["label", "required", "disabled", "model", "accept", "multiple", "maxSize", "skeletonLoading"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslDatepicker, selector: "osl-datepicker", inputs: ["label", "required", "disabled", "model", "dateType", "placeholder", "minDate", "skeletonLoading", "maxDate"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslCheckbox, selector: "osl-checkbox", inputs: ["label", "disabled", "required", "model", "indeterminate", "skeletonLoading"], outputs: ["modelChange", "changeEv"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslFormGrid, decorators: [{
             type: Component,
@@ -1810,6 +2326,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 args: ['data']
             }] } });
 
+class OslSkeletonModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslSkeletonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: OslSkeletonModule, declarations: [OslSkeletonDirective], exports: [OslSkeletonDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslSkeletonModule });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslSkeletonModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [OslSkeletonDirective],
+                    exports: [OslSkeletonDirective],
+                }]
+        }] });
+
 class FormStructureModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FormStructureModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: FormStructureModule, declarations: [DynamicForm,
@@ -1835,7 +2364,8 @@ class FormStructureModule {
             MatHint,
             MatIconModule,
             MatDialogModule,
-            MatButtonModule], exports: [DynamicForm, OslSetup, OslGrid, OslFormGrid, Oslinput,
+            MatButtonModule,
+            OslSkeletonModule], exports: [DynamicForm, OslSetup, OslGrid, OslFormGrid, Oslinput,
             Osltextarea,
             OslSelect,
             OslRadio,
@@ -1855,7 +2385,8 @@ class FormStructureModule {
             MatInputModule,
             MatIconModule,
             MatDialogModule,
-            MatButtonModule] });
+            MatButtonModule,
+            OslSkeletonModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FormStructureModule, decorators: [{
             type: NgModule,
@@ -1888,6 +2419,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         MatIconModule,
                         MatDialogModule,
                         MatButtonModule,
+                        OslSkeletonModule
                     ],
                     exports: [DynamicForm, OslSetup, OslGrid, OslFormGrid, Oslinput,
                         Osltextarea,
@@ -1915,5 +2447,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { DeleteConfirmation, DeleteConfirmationData, Dialog, DialogWrapper, DynamicForm, FormStructureModule, Httpbase, OslAutocomplete, OslAutocompleteLister, OslBaseExtended, OslButton, OslCheckbox, OslDatepicker, OslFileUpload, OslFormGrid, OslGrid, OslRadio, OslSearchbar, OslSelect, OslSetup, OslSlideToggle, Oslinput, Osltextarea, baseComponent };
+export { DeleteConfirmation, DeleteConfirmationData, Dialog, DialogWrapper, DynamicForm, FormStructureModule, Httpbase, OslAutocomplete, OslAutocompleteLister, OslBaseExtended, OslButton, OslCheckbox, OslDatepicker, OslFileUpload, OslFormGrid, OslGrid, OslRadio, OslSearchbar, OslSelect, OslSetup, OslSkeletonDirective, OslSkeletonModule, OslSlideToggle, Oslinput, Osltextarea, baseComponent };
 //# sourceMappingURL=osl-base-extended.mjs.map